{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-file-tree",
  "title": "File Tree Demo",
  "description": "Animated file-tree with nested folders, file-type icons, and highlighted files.",
  "registryDependencies": [
    "@unlumen-ui/file-tree"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/file-tree/index.tsx",
      "content": "\"use client\";\n\nimport {\n  FileTree,\n  type FileTreeElement,\n} from \"@/components/unlumen-ui/file-tree\";\n\nconst elements: FileTreeElement[] = [\n  {\n    id: \"src\",\n    type: \"folder\",\n    name: \"src\",\n    children: [\n      {\n        id: \"components\",\n        type: \"folder\",\n        name: \"components\",\n        children: [\n          {\n            id: \"ui\",\n            type: \"folder\",\n            name: \"ui\",\n            children: [\n              { id: \"button\", name: \"button.tsx\", highlight: true },\n              { id: \"card\", name: \"card.tsx\", highlight: true },\n              { id: \"modal\", name: \"modal.tsx\" },\n              { id: \"input\", name: \"input.tsx\" },\n            ],\n          },\n          {\n            id: \"layout\",\n            type: \"folder\",\n            name: \"layout\",\n            children: [\n              { id: \"header\", name: \"header.tsx\" },\n              { id: \"footer\", name: \"footer.tsx\" },\n              { id: \"sidebar\", name: \"sidebar.tsx\" },\n            ],\n          },\n        ],\n      },\n      {\n        id: \"app\",\n        type: \"folder\",\n        name: \"app\",\n        children: [\n          { id: \"layout\", name: \"layout.tsx\", highlight: true },\n          { id: \"page\", name: \"page.tsx\", highlight: true },\n          {\n            id: \"api\",\n            type: \"folder\",\n            name: \"api\",\n            children: [\n              {\n                id: \"users\",\n                type: \"folder\",\n                name: \"users\",\n                children: [{ id: \"route\", name: \"route.ts\" }],\n              },\n              {\n                id: \"posts\",\n                type: \"folder\",\n                name: \"posts\",\n                children: [{ id: \"route\", name: \"route.ts\" }],\n              },\n            ],\n          },\n        ],\n      },\n      {\n        id: \"lib\",\n        type: \"folder\",\n        name: \"lib\",\n        children: [\n          { id: \"utils\", name: \"utils.ts\" },\n          {\n            id: \"hooks\",\n            type: \"folder\",\n            name: \"hooks\",\n            children: [\n              { id: \"useAuth\", name: \"useAuth.ts\" },\n              { id: \"useTheme\", name: \"useTheme.ts\" },\n            ],\n          },\n          {\n            id: \"services\",\n            type: \"folder\",\n            name: \"services\",\n            children: [\n              { id: \"api\", name: \"api.ts\", highlight: true },\n              { id: \"auth\", name: \"auth.ts\" },\n            ],\n          },\n        ],\n      },\n      {\n        id: \"styles\",\n        type: \"folder\",\n        name: \"styles\",\n        children: [\n          { id: \"globals\", name: \"globals.css\" },\n          { id: \"theme\", name: \"theme.css\" },\n        ],\n      },\n    ],\n  },\n  {\n    id: \"public\",\n    type: \"folder\",\n    name: \"public\",\n    children: [\n      { id: \"favicon\", name: \"favicon.ico\" },\n      {\n        id: \"images\",\n        type: \"folder\",\n        name: \"images\",\n        children: [\n          { id: \"logo\", name: \"logo.png\" },\n          { id: \"banner\", name: \"banner.jpg\" },\n        ],\n      },\n    ],\n  },\n  {\n    id: \"config\",\n    type: \"folder\",\n    name: \"config\",\n    children: [\n      { id: \"package-json\", name: \"package.json\" },\n      { id: \"tsconfig\", name: \"tsconfig.json\" },\n      { id: \"nextconfig\", name: \"next.config.js\" },\n    ],\n  },\n  { id: \"readme\", name: \"README.md\" },\n];\n\ninterface FileTreeDemoProps {\n  highlightColor?: string;\n  indentSize?: number;\n  showIcons?: boolean;\n}\n\nexport function FileTreeDemo({\n  highlightColor,\n  indentSize,\n  showIcons,\n}: FileTreeDemoProps) {\n  return (\n    <div className=\"w-64\">\n      <FileTree\n        elements={elements}\n        defaultOpenIds={[\"src\", \"app\"]}\n        highlightColor={highlightColor}\n        indentSize={indentSize}\n        showIcons={showIcons}\n      />\n    </div>\n  );\n}\n\nexport default FileTreeDemo;\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}