{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree-node-tooltip",
  "type": "registry:ui",
  "title": "Tree Node Tooltip",
  "description": "A file tree component with tooltip support for each node.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ruixenui/tree-node-tooltip.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport { Folder, File } from \"lucide-react\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nexport type TreeNode = {\n  id: string;\n  name: string;\n  tooltip?: string;\n  type: \"folder\" | \"file\";\n  children?: TreeNode[];\n};\n\nconst demoData: TreeNode[] = [\n  {\n    id: \"1\",\n    name: \"src\",\n    tooltip: \"src\",\n    type: \"folder\",\n    children: [\n      {\n        id: \"2\",\n        name: \"components\",\n        tooltip: \"components\",\n        type: \"folder\",\n        children: [\n          {\n            id: \"3\",\n            name: \"Button.tsx\",\n            tooltip: \"Button's tooltip\",\n            type: \"file\",\n          },\n          {\n            id: \"4\",\n            name: \"Card.tsx\",\n            tooltip: \"Card's tooltip\",\n            type: \"file\",\n          },\n        ],\n      },\n      {\n        id: \"5\",\n        name: \"lib\",\n        tooltip: \"lib\",\n        type: \"folder\",\n        children: [\n          {\n            id: \"6\",\n            name: \"utils.ts\",\n            tooltip: \"utils's tooltip\",\n            type: \"file\",\n          },\n        ],\n      },\n    ],\n  },\n];\n\nexport default function TreeNodeTooltip({ node }: { node: TreeNode }) {\n  const [expanded, setExpanded] = useState(false);\n\n  const isFolder = node.type === \"folder\";\n\n  const toggle = () => {\n    if (isFolder) setExpanded((prev) => !prev);\n  };\n\n  return (\n    <div>\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              onClick={toggle}\n              className={cn(\n                \"flex items-center gap-2 px-2 py-1 rounded-md w-full text-left\",\n                \"hover:bg-accent hover:text-accent-foreground transition-colors\",\n              )}\n            >\n              {isFolder ? (\n                <Folder\n                  size={16}\n                  className={cn(\n                    \"text-muted-foreground\",\n                    expanded && \"text-blue-500\",\n                  )}\n                />\n              ) : (\n                <File size={16} className=\"text-muted-foreground\" />\n              )}\n              <span className=\"truncate\">{node.name}</span>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">{node.tooltip}</TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n\n      {/* Animate children */}\n      {isFolder && (\n        <AnimatePresence>\n          {expanded && (\n            <motion.div\n              initial={{ height: 0, opacity: 0 }}\n              animate={{ height: \"auto\", opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={{ duration: 0.2 }}\n              className=\"ml-4 border-l pl-2 space-y-1\"\n            >\n              {node.children?.map((child) => (\n                <TreeNodeTooltip key={child.id} node={child} />\n              ))}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/tree-node-tooltip.tsx"
    }
  ]
}