{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree-dynamic",
  "registryDependencies": [
    "https://taki-ui.com/r/tree.json",
    "https://taki-ui.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/new-york/examples/tree-dynamic.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Tree, TreeItem } from \"@/registry/new-york/ui/tree\"\n\ninterface FileNode {\n  id: string\n  title: string\n  children?: FileNode[]\n}\n\nexport default function TreeDynamicDemo() {\n  const [items, setItems] = useState<FileNode[]>([\n    {\n      id: \"documents\",\n      title: \"Documents\",\n      children: [\n        {\n          id: \"project\",\n          title: \"Project\",\n          children: [\n            { id: \"report\", title: \"Weekly Report\" },\n            { id: \"presentation\", title: \"Presentation\" },\n          ],\n        },\n      ],\n    },\n    {\n      id: \"photos\",\n      title: \"Photos\",\n      children: [{ id: \"vacation\", title: \"Vacation\" }],\n    },\n  ])\n\n  const addItem = () => {\n    setItems([\n      ...items,\n      {\n        id: `item-${Date.now()}`,\n        title: `New Folder ${items.length + 1}`,\n      },\n    ])\n  }\n\n  const renderItem = (item: FileNode): React.ReactElement => (\n    <TreeItem key={item.id} id={item.id} title={item.title}>\n      {item.children?.map(renderItem)}\n    </TreeItem>\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Button onClick={addItem} size=\"sm\" variant=\"outline\" className=\"w-fit\">\n        Add Folder\n      </Button>\n      <Tree\n        aria-label=\"Files\"\n        className=\"w-64\"\n        defaultExpandedKeys={[\"documents\", \"project\"]}\n      >\n        {items.map(renderItem)}\n      </Tree>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}