{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-tree",
  "type": "registry:ui",
  "title": "FileTree",
  "description": "Directory explorer tree with collapsible folders and item selection.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/file-tree.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FileTreeNode {\n  name: string;\n  type?: \"file\" | \"folder\";\n  children?: FileTreeNode[];\n  badge?: string;\n  defaultOpen?: boolean;\n}\n\nexport interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  data: FileTreeNode[];\n  onSelect?: (item: FileTreeNode) => void;\n  selected?: string;\n}\n\nfunction FileTreeNodeItem({\n  node,\n  onSelect,\n  selected,\n}: {\n  node: FileTreeNode;\n  onSelect?: (item: FileTreeNode) => void;\n  selected?: string;\n}) {\n  const isFolder = node.type === \"folder\" || Boolean(node.children && node.children.length > 0);\n  const [isOpen, setIsOpen] = React.useState(node.defaultOpen ?? true);\n  const isSelected = selected === node.name;\n\n  return (\n    <div className=\"text-xs font-mono select-none\">\n      <div\n        className={cn(\n          \"flex items-center gap-1.5 px-2 py-1 rounded cursor-pointer transition-colors\",\n          isSelected ? \"bg-muted font-semibold text-foreground\" : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n        )}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (isFolder) setIsOpen(!isOpen);\n          onSelect?.(node);\n        }}\n      >\n        <span className=\"w-3 text-center text-[10px] text-muted-foreground\">\n          {isFolder ? (isOpen ? \"▾\" : \"▸\") : \"•\"}\n        </span>\n        <span className=\"flex-1\">{node.name}</span>\n        {node.badge && (\n          <span className=\"text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n            {node.badge}\n          </span>\n        )}\n      </div>\n      {isFolder && isOpen && node.children && (\n        <div className=\"pl-4 border-l border-border/60 ml-2 space-y-0.5 mt-0.5\">\n          {node.children.map((child, idx) => (\n            <FileTreeNodeItem\n              key={idx}\n              node={child}\n              onSelect={onSelect}\n              selected={selected}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function FileTree({ data, onSelect, selected, className, ...props }: FileTreeProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-3 shadow-2xs space-y-0.5 my-4\",\n        className\n      )}\n      {...props}\n    >\n      {data.map((node, idx) => (\n        <FileTreeNodeItem key={idx} node={node} onSelect={onSelect} selected={selected} />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}