{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "motion-file-tree",
  "type": "registry:ui",
  "title": "Motion File Tree",
  "description": "An animated file tree component with smooth expand/collapse transitions.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/motion-file-tree.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { ChevronRight, ChevronDown, Folder, File } from \"lucide-react\";\n\n// -------- Types --------\nexport type FileNode = {\n  id: string;\n  name: string;\n  type: \"file\" | \"folder\";\n  children?: FileNode[];\n};\n\nexport type MotionFileTreeProps = {\n  data: FileNode[];\n  defaultExpanded?: Record<string, boolean>;\n  onSelect?: (node: FileNode) => void;\n};\n\n// -------- Component --------\nexport default function MotionFileTree({\n  data,\n  defaultExpanded = {},\n  onSelect,\n}: MotionFileTreeProps) {\n  const [expanded, setExpanded] =\n    useState<Record<string, boolean>>(defaultExpanded);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const toggle = (id: string) => {\n    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));\n  };\n\n  const renderNodes = (nodes: FileNode[], level = 0) => {\n    return nodes.map((n) => (\n      <div key={n.id} className=\"relative\">\n        <div\n          role=\"treeitem\"\n          tabIndex={0}\n          aria-expanded={n.type === \"folder\" ? !!expanded[n.id] : undefined}\n          className={cn(\n            \"flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer transition-colors select-none outline-none\",\n            selected === n.id\n              ? \"bg-accent text-accent-foreground border-l-2 border-primary\"\n              : \"hover:bg-muted\",\n          )}\n          style={{ paddingLeft: level * 14 + 8 }}\n          onClick={() => {\n            if (n.type === \"folder\") toggle(n.id);\n            setSelected(n.id);\n            onSelect?.(n);\n          }}\n          onKeyDown={(e) => {\n            if (n.type === \"folder\" && (e.key === \"Enter\" || e.key === \" \")) {\n              e.preventDefault();\n              toggle(n.id);\n            }\n          }}\n        >\n          {n.type === \"folder\" ? (\n            <>\n              {expanded[n.id] ? (\n                <ChevronDown size={14} />\n              ) : (\n                <ChevronRight size={14} />\n              )}\n              <Folder size={16} />\n            </>\n          ) : (\n            <File size={14} />\n          )}\n          <span className=\"text-sm truncate\">{n.name}</span>\n        </div>\n\n        {/* Children with smooth animation */}\n        <AnimatePresence initial={false}>\n          {n.children && n.children.length > 0 && expanded[n.id] && (\n            <motion.div\n              key=\"children\"\n              role=\"group\"\n              initial={{ height: 0, opacity: 0 }}\n              animate={{ height: \"auto\", opacity: 1 }}\n              exit={{ height: 0, opacity: 0 }}\n              transition={{ duration: 0.25, ease: \"easeInOut\" }}\n              className=\"pl-3 border-l border-muted\"\n            >\n              {renderNodes(n.children, level + 1)}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    ));\n  };\n\n  return (\n    <div role=\"tree\" className=\"space-y-1 text-sm\">\n      {renderNodes(data)}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/motion-file-tree.tsx"
    }
  ]
}