{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-tree",
  "title": "File Tree",
  "description": "Collapsible tree for documenting project structure.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/file-tree.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface FileNode {\n  name: string;\n  /** Presence of `children` makes the node a folder */\n  children?: FileNode[];\n  /** Folders start open unless this is false */\n  defaultOpen?: boolean;\n}\n\ninterface FileTreeProps {\n  tree: FileNode[];\n  className?: string;\n}\n\nfunction Node({ node, depth }: { node: FileNode; depth: number }) {\n  const isFolder = Array.isArray(node.children);\n  const [open, setOpen] = useState(node.defaultOpen ?? true);\n\n  return (\n    <li>\n      <div\n        style={{ paddingLeft: depth * 14 }}\n        className=\"flex items-center gap-1.5 rounded-md py-1 pr-2 text-sm\"\n      >\n        {isFolder ? (\n          <button\n            type=\"button\"\n            onClick={() => setOpen((value) => !value)}\n            aria-expanded={open}\n            className=\"flex flex-1 cursor-pointer items-center gap-1.5 rounded-md px-1 py-0.5 text-left transition-colors hover:bg-muted\"\n          >\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.75\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden\n              className={cn(\n                \"shrink-0 text-muted-foreground transition-transform duration-150 motion-reduce:transition-none\",\n                open && \"rotate-90\"\n              )}\n            >\n              <path d=\"M4.5 2.5L8 6l-3.5 3.5\" />\n            </svg>\n            <span className=\"font-medium\">{node.name}</span>\n          </button>\n        ) : (\n          <span className=\"flex items-center gap-1.5 px-1 py-0.5 pl-[1.125rem] text-muted-foreground\">\n            {node.name}\n          </span>\n        )}\n      </div>\n\n      {isFolder && open && (\n        <ul>\n          {node.children!.map((child) => (\n            <Node key={child.name} node={child} depth={depth + 1} />\n          ))}\n        </ul>\n      )}\n    </li>\n  );\n}\n\n/**\n * Collapsible file tree for documenting project structure. Renders as nested\n * lists, so it stays readable with CSS off.\n */\nexport function FileTree({ tree, className }: FileTreeProps) {\n  return (\n    <ul\n      data-slot=\"file-tree\"\n      className={cn(\"w-full rounded-xl border bg-card p-3 font-mono\", className)}\n    >\n      {tree.map((node) => (\n        <Node key={node.name} node={node} depth={0} />\n      ))}\n    </ul>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/file-tree.tsx"
    }
  ],
  "type": "registry:ui"
}