{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-radix-files",
  "title": "Radix Files Demo",
  "description": "Demo showing an animated radix files.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@odysseyui/primitives-radix-files"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/radix/files/index.tsx",
      "content": "import {\n  File,\n  FileHighlight,\n  FileIcon,\n  FileLabel,\n  Files,\n  FilesHighlight,\n  Folder,\n  FolderContent,\n  FolderHeader,\n  FolderHighlight,\n  FolderIcon,\n  FolderItem,\n  FolderTrigger,\n} from '@/components/odyssey/primitives/radix/files';\nimport {\n  FolderOpenIcon,\n  FolderIcon as LucideFolderIcon,\n  FileIcon as LucideFileIcon,\n} from 'lucide-react';\n\nexport const FilesDemo = () => {\n  return (\n    <div className=\"relative size-full border bg-background overflow-auto\">\n      <Files className=\"p-3\" defaultOpen={['folder-1']}>\n        <FilesHighlight className=\"bg-accent pointer-events-none\">\n          <FolderItem value=\"folder-1\">\n            <FolderHeader>\n              <FolderTrigger className=\"w-full text-start\">\n                <FolderHighlight>\n                  <Folder className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                    <FolderIcon\n                      closeIcon={<LucideFolderIcon className=\"size-4.5\" />}\n                      openIcon={<FolderOpenIcon className=\"size-4.5\" />}\n                    />\n                    <FileLabel className=\"text-sm\">Folder 1</FileLabel>\n                  </Folder>\n                </FolderHighlight>\n              </FolderTrigger>\n            </FolderHeader>\n\n            <div className=\"relative ml-8 before:absolute before:-left-3 before:inset-y-0 before:w-px before:h-full before:bg-border\">\n              <FolderContent>\n                <FileHighlight>\n                  <File className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                    <FileIcon>\n                      <LucideFileIcon className=\"size-4.5\" />\n                    </FileIcon>\n                    <FileLabel className=\"text-sm\">File 1</FileLabel>\n                  </File>\n                </FileHighlight>\n\n                <Files defaultOpen={['folder-2']}>\n                  <FolderItem value=\"folder-2\">\n                    <FolderHeader>\n                      <FolderTrigger className=\"w-full text-start\">\n                        <FolderHighlight>\n                          <Folder className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                            <FolderIcon\n                              closeIcon={\n                                <LucideFolderIcon className=\"size-4.5\" />\n                              }\n                              openIcon={<FolderOpenIcon className=\"size-4.5\" />}\n                            />\n                            <FileLabel className=\"text-sm\">Folder 2</FileLabel>\n                          </Folder>\n                        </FolderHighlight>\n                      </FolderTrigger>\n                    </FolderHeader>\n\n                    <div className=\"relative ml-8 before:absolute before:-left-3 before:inset-y-0 before:w-px before:h-full before:bg-border\">\n                      <FolderContent>\n                        <FileHighlight>\n                          <File className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                            <FileIcon>\n                              <LucideFileIcon className=\"size-4.5\" />\n                            </FileIcon>\n                            <FileLabel className=\"text-sm\">File 2</FileLabel>\n                          </File>\n                        </FileHighlight>\n                        <FileHighlight>\n                          <File className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                            <FileIcon>\n                              <LucideFileIcon className=\"size-4.5\" />\n                            </FileIcon>\n                            <FileLabel className=\"text-sm\">File 3</FileLabel>\n                          </File>\n                        </FileHighlight>\n                      </FolderContent>\n                    </div>\n                  </FolderItem>\n\n                  <FileHighlight>\n                    <File className=\"flex items-center gap-2 p-2 pointer-events-none\">\n                      <FileIcon>\n                        <LucideFileIcon className=\"size-4.5\" />\n                      </FileIcon>\n                      <FileLabel className=\"text-sm\">File 4</FileLabel>\n                    </File>\n                  </FileHighlight>\n                </Files>\n              </FolderContent>\n            </div>\n          </FolderItem>\n\n          <FileHighlight>\n            <File className=\"flex items-center gap-2 p-2 pointer-events-none\">\n              <FileIcon>\n                <LucideFileIcon className=\"size-4.5\" />\n              </FileIcon>\n              <FileLabel className=\"text-sm\">File 5</FileLabel>\n            </File>\n          </FileHighlight>\n        </FilesHighlight>\n      </Files>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/odysseyui/demo/primitives/radix/files.tsx"
    }
  ],
  "type": "registry:ui"
}