{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-03",
  "title": "File tree",
  "description": "Nested folders built from collapsible rows, with folder icons that swap on open.",
  "dependencies": [],
  "registryDependencies": [
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/patterns/collapsible/collapsible-03.tsx",
      "content": "import {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible'\nimport {\n  ChevronRightIcon,\n  FileIcon,\n  FileJsonIcon,\n  FileTextIcon,\n  FolderIcon,\n  FolderOpenIcon,\n} from 'lucide-react'\n\ntype TreeNode = {\n  name: string\n  children?: TreeNode[]\n}\n\nconst tree: TreeNode[] = [\n  {\n    name: 'app',\n    children: [\n      {\n        name: '(main)',\n        children: [{ name: 'layout.tsx' }, { name: 'page.tsx' }],\n      },\n      { name: 'globals.css' },\n    ],\n  },\n  {\n    name: 'components',\n    children: [\n      {\n        name: 'ui',\n        children: [{ name: 'button.tsx' }, { name: 'collapsible.tsx' }],\n      },\n    ],\n  },\n  { name: 'package.json' },\n  { name: 'tsconfig.json' },\n]\n\nfunction fileIcon(name: string) {\n  if (name.endsWith('.json')) return FileJsonIcon\n  if (name.endsWith('.tsx') || name.endsWith('.ts')) return FileTextIcon\n  return FileIcon\n}\n\nfunction Tree({ nodes, level = 0 }: { nodes: TreeNode[]; level?: number }) {\n  return (\n    <ul>\n      {nodes.map((node) =>\n        node.children ? (\n          <li key={node.name}>\n            <Collapsible defaultOpen={level === 0}>\n              <CollapsibleTrigger\n                className=\"group/folder hover:bg-accent flex w-full items-center gap-1.5 rounded-md py-1 pr-2 text-sm\"\n                style={{ paddingLeft: `${level * 16 + 8}px` }}\n              >\n                <ChevronRightIcon className=\"text-muted-foreground size-3.5 shrink-0 transition-transform group-data-panel-open/folder:rotate-90\" />\n                <FolderIcon className=\"text-muted-foreground size-4 shrink-0 group-data-panel-open/folder:hidden\" />\n                <FolderOpenIcon className=\"text-muted-foreground hidden size-4 shrink-0 group-data-panel-open/folder:block\" />\n                {node.name}\n              </CollapsibleTrigger>\n              <CollapsibleContent>\n                <Tree nodes={node.children} level={level + 1} />\n              </CollapsibleContent>\n            </Collapsible>\n          </li>\n        ) : (\n          <li key={node.name}>\n            <FileRow name={node.name} level={level} />\n          </li>\n        ),\n      )}\n    </ul>\n  )\n}\n\nfunction FileRow({ name, level }: { name: string; level: number }) {\n  const Icon = fileIcon(name)\n  return (\n    <div\n      className=\"hover:bg-accent text-muted-foreground flex items-center gap-1.5 rounded-md py-1 pr-2 text-sm\"\n      style={{ paddingLeft: `${level * 16 + 26}px` }}\n    >\n      <Icon className=\"size-4 shrink-0\" />\n      {name}\n    </div>\n  )\n}\n\nexport function Collapsible03() {\n  return (\n    <div className=\"w-full max-w-xs rounded-lg border p-2\">\n      <Tree nodes={tree} />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/collapsible/collapsible-03.tsx"
    }
  ],
  "type": "registry:block"
}