{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "tree-drag-example",
  "title": "Tree Drag",
  "description": "tree-drag-example",
  "dependencies": [
    "@heroicons/react",
    "@react-stately/data",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/tree"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/tree/tree-drag-example.tsx",
      "content": "'use client'\nimport {\n  DocumentIcon,\n  DocumentTextIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  PlayCircleIcon,\n  Squares2X2Icon,\n} from '@heroicons/react/24/outline'\nimport { useTreeData } from '@react-stately/data'\nimport { Collection } from 'react-aria-components/Collection'\nimport type { TreeItemProps as TreeItemPrimitiveProps } from 'react-aria-components/Tree'\nimport { useDragAndDrop } from 'react-aria-components/useDragAndDrop'\nimport { Tree, TreeContent, TreeItem as PrimitiveItem } from '@/components/ui/tree'\n\nconst fileStructure = [\n  {\n    id: 'departments',\n    name: 'departments',\n    children: [\n      {\n        id: 'sales',\n        name: 'sales',\n        children: [\n          {\n            id: 'reports',\n            name: 'reports',\n            children: [\n              { id: 'q1', name: 'Q1.pdf' },\n              { id: 'q2', name: 'Q2.pdf' },\n              { id: 'q3', name: 'Q3.pdf' },\n            ],\n          },\n          {\n            id: 's-clients',\n            name: 's-clients',\n            children: [\n              { id: 'europe', name: 'europe.xlsx' },\n              { id: 'asia', name: 'asia.xlsx' },\n            ],\n          },\n        ],\n      },\n      {\n        id: 'hr',\n        name: 'hr',\n        children: [\n          {\n            id: 'd-docs',\n            name: 'd-docs',\n            children: [\n              { id: 'policy', name: 'leave-policy.pdf' },\n              { id: 'handbook', name: 'handbook.pdf' },\n              { id: 'benefits', name: 'benefits.pdf' },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n  {\n    id: 'projects',\n    name: 'projects',\n    children: [\n      {\n        id: 'revamp',\n        name: 'website-revamp',\n        children: [\n          {\n            id: 'designs',\n            name: 'designs',\n            children: [\n              { id: 'home', name: 'home.fig' },\n              { id: 'about', name: 'about.fig' },\n              { id: 'pricing', name: 'pricing.fig' },\n            ],\n          },\n        ],\n      },\n      {\n        id: 'mobile',\n        name: 'mobile-app',\n        children: [\n          {\n            id: 'ios',\n            name: 'ios',\n            children: [\n              { id: 'v1', name: 'v1.0.ipa' },\n              { id: 'v2', name: 'v2.0.ipa' },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n  {\n    id: 'clients',\n    name: 'clients',\n    children: [\n      {\n        id: 'acme',\n        name: 'acme-corp',\n        children: [\n          {\n            id: 'contracts',\n            name: 'contracts',\n            children: [\n              { id: 'c-2024', name: '2024.pdf' },\n              { id: 'c-2025', name: '2025.pdf' },\n            ],\n          },\n        ],\n      },\n      {\n        id: 'initech',\n        name: 'initech',\n        children: [\n          {\n            id: 'invoices',\n            name: 'invoices',\n            children: [\n              { id: 'inv1', name: 'inv-001.pdf' },\n              { id: 'inv2', name: 'inv-002.pdf' },\n              { id: 'inv3', name: 'inv-003.pdf' },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n  {\n    id: 'legal',\n    name: 'legal',\n    children: [\n      {\n        id: 'nda',\n        name: 'nda',\n        children: [\n          { id: 'partner-a', name: 'partner-a.pdf' },\n          { id: 'partner-b', name: 'partner-b.pdf' },\n        ],\n      },\n      {\n        id: 'terms',\n        name: 'terms',\n        children: [\n          { id: 't-2024', name: '2024.pdf' },\n          { id: 't-2025', name: '2025.pdf' },\n        ],\n      },\n    ],\n  },\n  {\n    id: 'resources',\n    name: 'resources',\n    children: [\n      {\n        id: 'docs',\n        name: 'docs',\n        children: [\n          { id: 'api', name: 'api.md' },\n          { id: 'auth', name: 'auth.md' },\n          { id: 'sdk', name: 'sdk.md' },\n        ],\n      },\n      {\n        id: 'videos',\n        name: 'videos',\n        children: [\n          { id: 'intro', name: 'intro.mp4' },\n          { id: 'setup', name: 'setup.mp4' },\n        ],\n      },\n    ],\n  },\n]\n\ninterface TreeItemProps extends Partial<TreeItemPrimitiveProps> {\n  title: string\n}\n\nfunction TreeItem({ title, children, ...props }: TreeItemProps) {\n  return (\n    <PrimitiveItem textValue={title} {...props}>\n      <TreeContent>\n        {({ isExpanded, hasChildItems }) => (\n          <>\n            {hasChildItems ? (\n              isExpanded ? (\n                <FolderOpenIcon />\n              ) : (\n                <FolderIcon />\n              )\n            ) : title.endsWith('.fig') ? (\n              <Squares2X2Icon />\n            ) : title.endsWith('.mp4') ? (\n              <PlayCircleIcon />\n            ) : title.endsWith('.pdf') ? (\n              <DocumentIcon />\n            ) : (\n              <DocumentTextIcon />\n            )}\n            {title}\n          </>\n        )}\n      </TreeContent>\n      {children}\n    </PrimitiveItem>\n  )\n}\n\nexport default function TreeDragDemo() {\n  const tree = useTreeData({\n    initialItems: fileStructure,\n  })\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      [...keys].map((key) => ({\n        'text/plain': (tree.getItem(key) as any).value.name,\n      })),\n    onMove(e) {\n      if (e.target.dropPosition === 'before') {\n        tree.moveBefore(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'after') {\n        tree.moveAfter(e.target.key, e.keys)\n      } else if (e.target.dropPosition === 'on') {\n        const targetNode = tree.getItem(e.target.key)\n        if (targetNode) {\n          const targetIndex = targetNode.children ? targetNode.children.length : 0\n          const keyArray = Array.from(e.keys)\n          for (let i = 0; i < keyArray.length; i++) {\n            tree.move(keyArray[i], e.target.key, targetIndex + i)\n          }\n        }\n      }\n    },\n  })\n\n  return (\n    <Tree aria-label=\"File system\" items={tree.items} dragAndDropHooks={dragAndDropHooks}>\n      {function renderItem(item) {\n        return (\n          <TreeItem title={(item as any).value.name}>\n            <Collection items={(item as any).children ?? []}>{renderItem}</Collection>\n          </TreeItem>\n        )\n      }}\n    </Tree>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/tree-drag-example/page.tsx"
    }
  ],
  "type": "registry:page"
}