love-ui 1.2.12 → 1.2.14

package/public/r/files.json

@@ -0,0 +1,195 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "files",
+  "type": "registry:block",
+  "title": "Documentary Asset Vault",
+  "description": "A production asset manager with storage insights, collection navigation, and crew activity.",
+  "files": [
+    {
+      "path": "registry/example-apps/default/files/components/files/breadcrumb.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/breadcrumb.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { ArrowRight01Icon, Home01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useFilesStore } from \"../../store/files-store\"\n\nexport function Breadcrumb() {\n  const pathname = usePathname()\n  const { folders } = useFilesStore()\n\n  const getViewName = () => {\n    if (pathname === \"/starred\") return \"Starred\"\n    if (pathname === \"/recent\") return \"Recent\"\n    if (pathname === \"/shared\") return \"Shared\"\n    if (pathname === \"/trash\") return \"Trash\"\n    if (pathname.startsWith(\"/folder/\")) {\n      const folderId = pathname.split(\"/folder/\")[1]\n      const folder = folders.find((f) => f.id === folderId)\n      return folder?.name || \"Folder\"\n    }\n    return null\n  }\n\n  const viewName = getViewName()\n\n  return (\n    <nav className=\"flex items-center gap-1 text-sm\">\n      <Link\n        href=\"/\"\n        className={cn(\n          \"flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors\",\n          pathname === \"/\"\n            ? \"font-medium text-foreground\"\n            : \"text-muted-foreground hover:bg-muted hover:text-foreground\"\n        )}\n      >\n        <HugeiconsIcon icon={Home01Icon} className=\"size-4\" />\n        <span>Asset Vault</span>\n      </Link>\n      {viewName && (\n        <>\n          <HugeiconsIcon\n            icon={ArrowRight01Icon}\n            className=\"size-4 text-muted-foreground\"\n          />\n          <span className=\"px-2 py-1 font-medium\">{viewName}</span>\n        </>\n      )}\n    </nav>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/content.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/content.tsx",
+      "content": "\"use client\"\n\nimport { FileList } from \"./file-list\"\nimport { FolderGrid } from \"./folder-grid\"\nimport { RecentActivity } from \"./recent-activity\"\nimport { SharedWithMe } from \"./shared-with-me\"\nimport { StorageCards } from \"./storage-cards\"\nimport { StorageOverview } from \"./storage-overview\"\n\nexport type ViewType =\n  | \"all\"\n  | \"starred\"\n  | \"recent\"\n  | \"shared\"\n  | \"trash\"\n  | \"folder\"\n\ninterface FilesContentProps {\n  view: ViewType\n  folderId?: string\n}\n\nexport function FilesContent({ view, folderId }: FilesContentProps) {\n  const showStorageCards = view === \"all\" || view === \"recent\"\n  const showSidePanels = view === \"all\"\n  const showFolders = view === \"all\"\n\n  return (\n    <div className=\"w-full flex-1 overflow-auto\">\n      <div className=\"flex flex-col gap-6 p-4 md:p-6 xl:flex-row\">\n        <div className=\"min-w-0 flex-1 space-y-6\">\n          {showStorageCards && <StorageCards />}\n          {showFolders && <FolderGrid />}\n          <FileList view={view} folderId={folderId} />\n        </div>\n\n        {showSidePanels && (\n          <div className=\"w-full shrink-0 space-y-4 xl:w-80\">\n            <StorageOverview />\n            <SharedWithMe />\n            <RecentActivity />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/file-icon.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/file-icon.tsx",
+      "content": "\"use client\"\n\nimport {\n  File01Icon,\n  FileAttachmentIcon,\n  FolderZipIcon,\n  Image01Icon,\n  MusicNote01Icon,\n  SourceCodeIcon,\n  Video01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { FileType } from \"../../mock-data/files\"\n\ninterface FileIconProps {\n  type: FileType\n  className?: string\n}\n\nconst iconMap = {\n  image: { icon: Image01Icon, color: \"text-violet-500\" },\n  video: { icon: Video01Icon, color: \"text-pink-500\" },\n  document: { icon: File01Icon, color: \"text-amber-500\" },\n  archive: { icon: FolderZipIcon, color: \"text-emerald-500\" },\n  audio: { icon: MusicNote01Icon, color: \"text-cyan-500\" },\n  code: { icon: SourceCodeIcon, color: \"text-blue-500\" },\n  other: { icon: FileAttachmentIcon, color: \"text-muted-foreground\" },\n}\n\nexport function FileIcon({ type, className }: FileIconProps) {\n  const { icon, color } = iconMap[type] || iconMap.other\n\n  return (\n    <HugeiconsIcon icon={icon} className={cn(\"size-5\", color, className)} />\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/file-list.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/file-list.tsx",
+      "content": "\"use client\"\n\nimport {\n  Clock01Icon,\n  Delete01Icon,\n  FavouriteIcon,\n  FolderOpenIcon,\n  MoreVerticalIcon,\n  Share01Icon,\n  UserGroupIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@loveui/ui/ui/tooltip\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useFilesStore } from \"../../store/files-store\"\nimport { ViewType } from \"./content\"\nimport { FileIcon } from \"./file-icon\"\n\ninterface FileListProps {\n  view: ViewType\n  folderId?: string\n}\n\nexport function FileList({ view, folderId }: FileListProps) {\n  const {\n    viewMode,\n    toggleStarred,\n    getFilteredFiles,\n    getStarredFiles,\n    getRecentFiles,\n    getSharedFiles,\n    getFilesByFolder,\n  } = useFilesStore()\n\n  let files = getFilteredFiles()\n  let title = \"All Assets\"\n\n  if (view === \"starred\") {\n    files = getStarredFiles()\n    title = \"Pinned Assets\"\n  } else if (view === \"recent\") {\n    files = getRecentFiles()\n    title = \"Latest Assets\"\n  } else if (view === \"shared\") {\n    files = getSharedFiles()\n    title = \"Shared Assets\"\n  } else if (view === \"trash\") {\n    files = []\n    title = \"Archive Bin\"\n  } else if (view === \"folder\" && folderId) {\n    files = getFilesByFolder(folderId)\n    title = \"Collection\"\n  }\n\n  if (files.length === 0) {\n    const emptyStates = {\n      starred: {\n        icon: FavouriteIcon,\n        title: \"No pinned assets\",\n        description: \"Pin important assets to keep them on top\",\n      },\n      recent: {\n        icon: Clock01Icon,\n        title: \"No recent assets\",\n        description: \"Assets you open will appear here\",\n      },\n      shared: {\n        icon: UserGroupIcon,\n        title: \"No shared assets\",\n        description: \"Assets shared with you will appear here\",\n      },\n      trash: {\n        icon: Delete01Icon,\n        title: \"Archive bin is empty\",\n        description: \"Removed assets will appear here for 30 days\",\n      },\n      default: {\n        icon: FolderOpenIcon,\n        title: \"This collection is empty\",\n        description: \"Upload assets or drag and drop them here\",\n      },\n    }\n\n    const state =\n      emptyStates[view as keyof typeof emptyStates] || emptyStates.default\n    const Icon = state.icon\n\n    return (\n      <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n        <div className=\"mb-4 flex size-16 items-center justify-center rounded-2xl bg-muted\">\n          <HugeiconsIcon icon={Icon} className=\"size-7 text-muted-foreground\" />\n        </div>\n        <h3 className=\"mb-1 text-lg font-medium\">{state.title}</h3>\n        <p className=\"max-w-xs text-sm text-muted-foreground\">\n          {state.description}\n        </p>\n      </div>\n    )\n  }\n\n  if (viewMode === \"grid\") {\n    return (\n      <div className=\"space-y-4\">\n        <h2 className=\"text-sm font-medium text-muted-foreground\">{title}</h2>\n        <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4\">\n          {files.map((file) => (\n            <div\n              key={file.id}\n              className=\"group cursor-pointer rounded-xl border bg-card p-4 transition-all hover:bg-accent/50\"\n            >\n              <div className=\"mb-3 flex items-start justify-between\">\n                <FileIcon type={file.type} />\n                <div className=\"flex items-center gap-1\">\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className={cn(\n                            \"size-7 transition-opacity\",\n                            file.starred\n                              ? \"opacity-100\"\n                              : \"opacity-0 group-hover:opacity-100\"\n                          )}\n                          onClick={(e) => {\n                            e.stopPropagation()\n                            toggleStarred(file.id)\n                          }}\n                        >\n                          <HugeiconsIcon\n                            icon={FavouriteIcon}\n                            className={cn(\n                              \"size-4\",\n                              file.starred && \"fill-amber-400 text-amber-400\"\n                            )}\n                          />\n                        </Button>\n                      }\n                    />\n                    <TooltipContent>\n                      {file.starred ? \"Remove from starred\" : \"Add to starred\"}\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className=\"size-7\"\n                          onClick={(e) => e.stopPropagation()}\n                        >\n                          <HugeiconsIcon\n                            icon={MoreVerticalIcon}\n                            className=\"size-4\"\n                          />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>Download</DropdownMenuItem>\n                        <DropdownMenuItem>Rename</DropdownMenuItem>\n                        <DropdownMenuItem>Share</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem variant=\"destructive\">\n                        Delete\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </div>\n              <p className=\"mb-0.5 truncate text-sm font-medium\">{file.name}</p>\n              <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span>{file.size}</span>\n                {file.shared && (\n                  <HugeiconsIcon icon={Share01Icon} className=\"size-3\" />\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-sm font-medium text-muted-foreground\">{title}</h2>\n      <div className=\"overflow-hidden rounded-xl border bg-card\">\n        <div className=\"hidden grid-cols-[1fr_100px_100px_100px_70px] gap-4 border-b bg-muted/50 px-4 py-3 text-xs font-medium text-muted-foreground sm:grid\">\n          <span>Name</span>\n          <span>Size</span>\n          <span>Modified</span>\n          <span>Created</span>\n          <span></span>\n        </div>\n        <div className=\"divide-y\">\n          {files.map((file) => (\n            <div\n              key={file.id}\n              className=\"group grid cursor-pointer grid-cols-[1fr_auto] items-center gap-2 px-4 py-3 transition-colors hover:bg-accent/50 sm:grid-cols-[1fr_100px_100px_100px_70px] sm:gap-4\"\n            >\n              <div className=\"flex min-w-0 items-center gap-3\">\n                <FileIcon type={file.type} />\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm font-medium\">{file.name}</p>\n                  <p className=\"text-xs text-muted-foreground sm:hidden\">\n                    {file.size} · {file.modifiedAt}\n                  </p>\n                </div>\n                {file.shared && (\n                  <HugeiconsIcon\n                    icon={Share01Icon}\n                    className=\"hidden size-3.5 shrink-0 text-muted-foreground sm:block\"\n                  />\n                )}\n              </div>\n              <span className=\"hidden text-sm text-muted-foreground sm:block\">\n                {file.size}\n              </span>\n              <span className=\"hidden text-sm text-muted-foreground sm:block\">\n                {file.modifiedAt}\n              </span>\n              <span className=\"hidden text-sm text-muted-foreground sm:block\">\n                {file.createdAt}\n              </span>\n              <div className=\"flex items-center gap-1\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className={cn(\n                          \"size-7 transition-opacity\",\n                          file.starred\n                            ? \"opacity-100\"\n                            : \"opacity-0 group-hover:opacity-100\"\n                        )}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          toggleStarred(file.id)\n                        }}\n                      >\n                        <HugeiconsIcon\n                          icon={FavouriteIcon}\n                          className={cn(\n                            \"size-4\",\n                            file.starred && \"fill-amber-400 text-amber-400\"\n                          )}\n                        />\n                      </Button>\n                    }\n                  />\n                  <TooltipContent>\n                    {file.starred ? \"Remove from starred\" : \"Add to starred\"}\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"size-7\"\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <HugeiconsIcon\n                          icon={MoreVerticalIcon}\n                          className=\"size-4\"\n                        />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Download</DropdownMenuItem>\n                      <DropdownMenuItem>Rename</DropdownMenuItem>\n                      <DropdownMenuItem>Share</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem variant=\"destructive\">\n                      Delete\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/folder-grid.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/folder-grid.tsx",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport { Folder01Icon, MoreVerticalIcon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useFilesStore } from \"../../store/files-store\"\n\nexport function FolderGrid() {\n  const { folders } = useFilesStore()\n  const pathname = usePathname()\n\n  if (pathname !== \"/\") {\n    return null\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-sm font-medium text-muted-foreground\">Folders</h2>\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5\">\n        {folders.map((folder) => (\n          <Link\n            key={folder.id}\n            href={`/folder/${folder.id}`}\n            className={cn(\n              \"group block cursor-pointer rounded-xl border bg-card p-4 transition-all hover:bg-accent/50\"\n            )}\n          >\n            <div className=\"mb-3 flex items-start justify-between\">\n              <div\n                className=\"flex size-10 items-center justify-center rounded-lg\"\n                style={{ backgroundColor: `${folder.color}15` }}\n              >\n                <HugeiconsIcon\n                  icon={Folder01Icon}\n                  className=\"size-5\"\n                  style={{ color: folder.color }}\n                />\n              </div>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"size-7\"\n                      onClick={(e) => e.preventDefault()}\n                    >\n                      <HugeiconsIcon\n                        icon={MoreVerticalIcon}\n                        className=\"size-4\"\n                      />\n                    </Button>\n                  }\n                />\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Open</DropdownMenuItem>\n                    <DropdownMenuItem>Rename</DropdownMenuItem>\n                    <DropdownMenuItem>Share</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <p className=\"mb-0.5 truncate text-sm font-medium\">{folder.name}</p>\n            <p className=\"text-xs text-muted-foreground\">\n              {folder.filesCount} files · {folder.size}\n            </p>\n          </Link>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/header.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/header.tsx",
+      "content": "\"use client\"\n\nimport {\n  GridViewIcon,\n  Menu01Icon,\n  MoreVerticalIcon,\n  Notification01Icon,\n  Search01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\n\nimport { SidebarTrigger } from \"@/components/ui/sidebar\"\n\nimport { cn } from \"../../lib/utils\"\nimport { useFilesStore } from \"../../store/files-store\"\nimport { ThemeToggle } from \"../theme-toggle\"\nimport { Breadcrumb } from \"./breadcrumb\"\nimport { QuickActions } from \"./quick-actions\"\n\nexport function FilesHeader() {\n  const { searchQuery, setSearchQuery, viewMode, setViewMode } = useFilesStore()\n\n  return (\n    <header className=\"sticky top-0 z-10 flex w-full items-center gap-2 border-b bg-card px-3 py-2 sm:gap-3 sm:px-6 sm:py-3\">\n      <SidebarTrigger className=\"-ml-1 sm:-ml-2\" />\n\n      <div className=\"hidden lg:block\">\n        <Breadcrumb />\n      </div>\n\n      <div className=\"flex-1 lg:hidden\">\n        <Breadcrumb />\n      </div>\n\n      <div className=\"hidden flex-1 items-center justify-center gap-2 lg:flex\">\n        <QuickActions />\n      </div>\n\n      <div className=\"relative hidden max-w-xs md:block\">\n        <HugeiconsIcon\n          icon={Search01Icon}\n          className=\"pointer-events-none absolute top-1/2 left-3 z-10 size-4 -translate-y-1/2 text-muted-foreground\"\n        />\n        <Input\n          placeholder=\"Search assets...\"\n          value={searchQuery}\n          onChange={(e) => setSearchQuery(e.target.value)}\n          className=\"h-9 border bg-card pl-9\"\n        />\n      </div>\n\n      <div className=\"hidden items-center gap-1 rounded-lg border p-0.5 sm:flex\">\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          onClick={() => setViewMode(\"grid\")}\n          className={cn(\"size-7.5\", viewMode === \"grid\" && \"bg-muted\")}\n        >\n          <HugeiconsIcon icon={GridViewIcon} className=\"size-4\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          onClick={() => setViewMode(\"list\")}\n          className={cn(\"size-7.5\", viewMode === \"list\" && \"bg-muted\")}\n        >\n          <HugeiconsIcon icon={Menu01Icon} className=\"size-4\" />\n        </Button>\n      </div>\n\n      <ThemeToggle />\n\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8 sm:hidden\">\n              <HugeiconsIcon icon={MoreVerticalIcon} className=\"size-4\" />\n            </Button>\n          }\n        />\n        <DropdownMenuContent className=\"w-40\" align=\"end\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <HugeiconsIcon icon={Search01Icon} className=\"mr-2 size-4\" />\n              Search\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={() => setViewMode(viewMode === \"grid\" ? \"list\" : \"grid\")}\n            >\n              {viewMode === \"grid\" ? (\n                <HugeiconsIcon icon={Menu01Icon} className=\"mr-2 size-4\" />\n              ) : (\n                <HugeiconsIcon icon={GridViewIcon} className=\"mr-2 size-4\" />\n              )}\n              {viewMode === \"grid\" ? \"List View\" : \"Grid View\"}\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <HugeiconsIcon\n                icon={Notification01Icon}\n                className=\"mr-2 size-4\"\n              />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </header>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/quick-actions.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/quick-actions.tsx",
+      "content": "\"use client\"\n\nimport {\n  FileImportIcon,\n  FolderAddIcon,\n  Link01Icon,\n  Upload01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@loveui/ui/ui/tooltip\"\n\nconst actions = [\n  { icon: Upload01Icon, label: \"Upload Clip\", shortcut: \"⌘U\" },\n  { icon: FolderAddIcon, label: \"New Collection\", shortcut: \"⌘N\" },\n  { icon: Link01Icon, label: \"Share Review Link\", shortcut: \"⌘L\" },\n  { icon: FileImportIcon, label: \"Import Dailies\", shortcut: \"⌘I\" },\n]\n\nexport function QuickActions() {\n  return (\n    <div className=\"flex items-center gap-1 rounded-xl border bg-card p-1\">\n      {actions.map((action) => (\n        <Tooltip key={action.label}>\n          <TooltipTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-9 rounded-lg\">\n                <HugeiconsIcon icon={action.icon} className=\"size-4\" />\n              </Button>\n            }\n          />\n          <TooltipContent side=\"bottom\" className=\"flex items-center gap-2\">\n            <span>{action.label}</span>\n            <kbd className=\"rounded border border-muted-foreground/50 px-1.5 py-0.5 text-[10px]\">\n              {action.shortcut}\n            </kbd>\n          </TooltipContent>\n        </Tooltip>\n      ))}\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/recent-activity.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/recent-activity.tsx",
+      "content": "\"use client\"\n\nimport {\n  Comment01Icon,\n  Delete01Icon,\n  Download01Icon,\n  Edit01Icon,\n  FolderTransferIcon,\n  Share01Icon,\n  Upload01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst activities = [\n  {\n    id: \"1\",\n    user: { name: \"Ava Patel\", avatar: \"ava\", initials: \"AP\" },\n    action: \"uploaded\",\n    file: \"Kenya_Savannah_Day03_Acam_4K.mov\",\n    time: \"2 min ago\",\n    icon: Upload01Icon,\n    iconColor: \"text-emerald-500\",\n    iconBg: \"bg-emerald-500/10\",\n  },\n  {\n    id: \"2\",\n    user: { name: \"Nora Singh\", avatar: \"nora\", initials: \"NS\" },\n    action: \"shared\",\n    file: \"Narrative_BeatBoard.pdf\",\n    time: \"15 min ago\",\n    icon: Share01Icon,\n    iconColor: \"text-blue-500\",\n    iconBg: \"bg-blue-500/10\",\n  },\n  {\n    id: \"3\",\n    user: { name: \"Theo Bennett\", avatar: \"theo\", initials: \"TB\" },\n    action: \"edited\",\n    file: \"Episode02_Edit_v14.prproj\",\n    time: \"1 hour ago\",\n    icon: Edit01Icon,\n    iconColor: \"text-amber-500\",\n    iconBg: \"bg-amber-500/10\",\n  },\n  {\n    id: \"4\",\n    user: { name: \"Liam Carter\", avatar: \"liam\", initials: \"LC\" },\n    action: \"downloaded\",\n    file: \"Festival_Submission_Package.zip\",\n    time: \"3 hours ago\",\n    icon: Download01Icon,\n    iconColor: \"text-violet-500\",\n    iconBg: \"bg-violet-500/10\",\n  },\n  {\n    id: \"5\",\n    user: { name: \"Maya Ortiz\", avatar: \"maya\", initials: \"MO\" },\n    action: \"moved\",\n    file: \"Camp_Ambience_Master.wav\",\n    time: \"5 hours ago\",\n    icon: FolderTransferIcon,\n    iconColor: \"text-cyan-500\",\n    iconBg: \"bg-cyan-500/10\",\n  },\n  {\n    id: \"6\",\n    user: { name: \"Ari Kim\", avatar: \"ari\", initials: \"AK\" },\n    action: \"commented on\",\n    file: \"Interview_Transcript_DrSafi.pdf\",\n    time: \"Yesterday\",\n    icon: Comment01Icon,\n    iconColor: \"text-pink-500\",\n    iconBg: \"bg-pink-500/10\",\n  },\n  {\n    id: \"7\",\n    user: { name: \"Noah Reid\", avatar: \"noah\", initials: \"NR\" },\n    action: \"deleted\",\n    file: \"RoughCut_Archive_2025.zip\",\n    time: \"Yesterday\",\n    icon: Delete01Icon,\n    iconColor: \"text-red-500\",\n    iconBg: \"bg-red-500/10\",\n  },\n]\n\nexport function RecentActivity() {\n  return (\n    <div className=\"rounded-xl border bg-card p-4\">\n      <div className=\"mb-4 flex items-center justify-between\">\n        <h3 className=\"text-sm font-medium\">Recent Activity</h3>\n        <button className=\"text-xs text-muted-foreground transition-colors hover:text-foreground\">\n          View all\n        </button>\n      </div>\n      <div className=\"space-y-3\">\n        {activities.map((activity) => (\n          <div key={activity.id} className=\"flex items-start gap-3\">\n            <Avatar className=\"size-8\">\n              <AvatarImage\n                src={`https://api.dicebear.com/9.x/glass/svg?seed=${activity.user.avatar}`}\n              />\n              <AvatarFallback className=\"text-[10px]\">\n                {activity.user.initials}\n              </AvatarFallback>\n            </Avatar>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"text-sm\">\n                <span className=\"font-medium\">{activity.user.name}</span>{\" \"}\n                <span className=\"text-muted-foreground\">{activity.action}</span>\n              </p>\n              <p className=\"truncate text-xs text-muted-foreground\">\n                {activity.file}\n              </p>\n            </div>\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <div\n                className={cn(\n                  \"flex size-6 items-center justify-center rounded-md\",\n                  activity.iconBg\n                )}\n              >\n                <HugeiconsIcon\n                  icon={activity.icon}\n                  className={cn(\"size-3\", activity.iconColor)}\n                />\n              </div>\n              <span className=\"text-[10px] whitespace-nowrap text-muted-foreground\">\n                {activity.time}\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/shared-with-me.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/shared-with-me.tsx",
+      "content": "\"use client\"\n\nimport { Add01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@loveui/ui/ui/tooltip\"\n\nconst sharedUsers = [\n  { name: \"Maya Ortiz\", avatar: \"maya\", initials: \"MO\" },\n  { name: \"Liam Carter\", avatar: \"liam\", initials: \"LC\" },\n  { name: \"Nora Singh\", avatar: \"nora\", initials: \"NS\" },\n  { name: \"Theo Bennett\", avatar: \"theo\", initials: \"TB\" },\n  { name: \"Ari Kim\", avatar: \"ari\", initials: \"AK\" },\n]\n\nexport function SharedWithMe() {\n  return (\n    <div className=\"rounded-xl border bg-card p-4\">\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h3 className=\"text-sm font-medium\">Field Crew</h3>\n        <span className=\"text-xs text-muted-foreground\">\n          {sharedUsers.length} collaborators\n        </span>\n      </div>\n      <div className=\"flex items-center\">\n        <div className=\"flex -space-x-2\">\n          {sharedUsers.slice(0, 4).map((user) => (\n            <Tooltip key={user.name}>\n              <TooltipTrigger\n                render={\n                  <Avatar className=\"size-8 cursor-pointer border-2 border-card transition-transform hover:z-10 hover:scale-110\">\n                    <AvatarImage\n                      src={`https://api.dicebear.com/9.x/glass/svg?seed=${user.avatar}`}\n                    />\n                    <AvatarFallback className=\"text-[10px]\">\n                      {user.initials}\n                    </AvatarFallback>\n                  </Avatar>\n                }\n              />\n              <TooltipContent>{user.name}</TooltipContent>\n            </Tooltip>\n          ))}\n          {sharedUsers.length > 4 && (\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <div className=\"flex size-8 cursor-pointer items-center justify-center rounded-full border-2 border-card bg-muted transition-colors hover:bg-muted/80\">\n                    <span className=\"text-xs font-medium text-muted-foreground\">\n                      +{sharedUsers.length - 4}\n                    </span>\n                  </div>\n                }\n              />\n              <TooltipContent>\n                {sharedUsers\n                  .slice(4)\n                  .map((u) => u.name)\n                  .join(\", \")}\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n        <Button variant=\"outline\" size=\"icon\" className=\"ml-2 size-8\">\n          <HugeiconsIcon icon={Add01Icon} className=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/sidebar.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { usePathname } from \"next/navigation\"\nimport {\n  Add01Icon,\n  ArrowDown01Icon,\n  Clock01Icon,\n  Delete01Icon,\n  FavouriteIcon,\n  File01Icon,\n  Folder01Icon,\n  FolderAddIcon,\n  Globe02Icon,\n  HardDriveIcon,\n  Home01Icon,\n  Image01Icon,\n  Link01Icon,\n  Logout01Icon,\n  Settings01Icon,\n  Share01Icon,\n  UnfoldMoreIcon,\n  Upload01Icon,\n  UserCircle02Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@loveui/ui/ui/avatar\"\nimport { Button } from \"@loveui/ui/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@loveui/ui/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@loveui/ui/ui/menu\"\nimport { Progress } from \"@loveui/ui/ui/progress\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nimport { cn } from \"../../lib/utils\"\nimport { storageData } from \"../../mock-data/files\"\nimport { useFilesStore } from \"../../store/files-store\"\n\nconst menuItems = [\n  { icon: Home01Icon, label: \"All Assets\", href: \"/\" },\n  { icon: FavouriteIcon, label: \"Pinned\", href: \"/starred\" },\n  { icon: Clock01Icon, label: \"Latest\", href: \"/recent\" },\n  { icon: Share01Icon, label: \"Shared\", href: \"/shared\" },\n  { icon: Delete01Icon, label: \"Archive Bin\", href: \"/trash\" },\n]\n\nexport function FilesSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  const { folders } = useFilesStore()\n  const pathname = usePathname()\n  const [foldersOpen, setFoldersOpen] = React.useState(true)\n\n  const storagePercentage = (storageData.used / storageData.total) * 100\n\n  return (\n    <Sidebar className=\"lg:border-r-0!\" collapsible=\"offExamples\" {...props}>\n      <SidebarHeader className=\"p-4 pb-0\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex size-8 items-center justify-center rounded-lg bg-linear-to-br from-violet-500 to-fuchsia-500\">\n            <HugeiconsIcon icon={HardDriveIcon} className=\"size-4 text-white\" />\n          </div>\n          <span className=\"text-base font-semibold\">DocuVault</span>\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent className=\"px-4 pt-6\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button className=\"mb-4 w-full gap-2\">\n                <HugeiconsIcon icon={Add01Icon} className=\"size-4\" />\n                Add Asset\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"start\" className=\"w-48\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Upload01Icon} className=\"mr-2 size-4\" />\n                Upload Clip\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={FolderAddIcon} className=\"mr-2 size-4\" />\n                New Collection\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={File01Icon} className=\"mr-2 size-4\" />\n                New Log\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Image01Icon} className=\"mr-2 size-4\" />\n                New Still\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Link01Icon} className=\"mr-2 size-4\" />\n                Add Reference Link\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <SidebarGroup className=\"p-0\">\n          <SidebarGroupContent>\n            <SidebarMenu>\n              {menuItems.map((item) => (\n                <SidebarMenuItem key={item.label}>\n                  <SidebarMenuButton\n                    render={<Link href={item.href} />}\n                    isActive={pathname === item.href}\n                    className=\"h-9\"\n                  >\n                    <HugeiconsIcon icon={item.icon} className=\"size-4\" />\n                    <span className=\"text-sm\">{item.label}</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n\n        <Collapsible open={foldersOpen} onOpenChange={setFoldersOpen}>\n          <SidebarGroup className=\"mt-4 p-0\">\n            <CollapsibleTrigger\n              nativeButton={false}\n              render={\n                <SidebarGroupLabel className=\"flex h-4 cursor-pointer items-center justify-between pt-2 pb-4 text-[10px] tracking-widest text-muted-foreground uppercase hover:bg-transparent hover:text-foreground\">\n                  <div className=\"flex items-center gap-1\">\n                    <HugeiconsIcon\n                      icon={ArrowDown01Icon}\n                      className={cn(\n                        \"size-3 transition-transform\",\n                        !foldersOpen && \"-rotate-90\"\n                      )}\n                    />\n                    <span>Folders</span>\n                  </div>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-5 hover:bg-muted\"\n                    onClick={(e) => e.stopPropagation()}\n                  >\n                    <HugeiconsIcon icon={Add01Icon} className=\"size-3\" />\n                  </Button>\n                </SidebarGroupLabel>\n              }\n            />\n            <CollapsibleContent>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {folders.map((folder) => (\n                    <SidebarMenuItem key={folder.id}>\n                      <SidebarMenuButton\n                        render={<Link href={`/folder/${folder.id}`} />}\n                        isActive={pathname === `/folder/${folder.id}`}\n                        className=\"h-9\"\n                      >\n                        <HugeiconsIcon\n                          icon={Folder01Icon}\n                          className=\"size-4\"\n                          style={{ color: folder.color }}\n                        />\n                        <span className=\"flex-1 truncate text-sm\">\n                          {folder.name}\n                        </span>\n                        <span className=\"text-xs text-muted-foreground\">\n                          {folder.filesCount}\n                        </span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </CollapsibleContent>\n          </SidebarGroup>\n        </Collapsible>\n\n        <div className=\"mt-6 rounded-xl border bg-card p-3\">\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-sm font-medium\">Vault Storage</span>\n            <span className=\"text-xs text-muted-foreground\">\n              {storageData.used} GB / {storageData.total} GB\n            </span>\n          </div>\n          <Progress value={storagePercentage} className=\"h-2\" />\n          <div className=\"mt-3 flex flex-wrap gap-2\">\n            {storageData.breakdown.slice(0, 3).map((item) => (\n              <div key={item.type} className=\"flex items-center gap-1.5\">\n                <div\n                  className=\"size-2 rounded-full\"\n                  style={{ backgroundColor: item.color }}\n                />\n                <span className=\"text-[10px] text-muted-foreground\">\n                  {item.type}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </SidebarContent>\n\n      <SidebarFooter className=\"p-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <div className=\"mt-2 flex cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors hover:bg-accent\">\n                <Avatar className=\"size-8\">\n                  <AvatarImage src=\"/ln.png\" />\n                  <AvatarFallback className=\"text-xs\">AP</AvatarFallback>\n                </Avatar>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">Ava Patel</p>\n                  <p className=\"truncate text-xs text-muted-foreground\">\n                    archive@docuvault.studio\n                  </p>\n                </div>\n                <HugeiconsIcon\n                  icon={UnfoldMoreIcon}\n                  className=\"size-4 shrink-0 text-muted-foreground\"\n                />\n              </div>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <HugeiconsIcon\n                  icon={UserCircle02Icon}\n                  className=\"mr-2 size-4\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <HugeiconsIcon icon={Settings01Icon} className=\"mr-2 size-4\" />\n                Settings\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem variant=\"destructive\">\n              <HugeiconsIcon icon={Logout01Icon} className=\"mr-2 size-4\" />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/storage-cards.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/storage-cards.tsx",
+      "content": "\"use client\"\n\nimport {\n  File01Icon,\n  FileAttachmentIcon,\n  FolderZipIcon,\n  Image01Icon,\n  Video01Icon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\n\nimport { storageData } from \"../../mock-data/files\"\n\nconst iconMap = {\n  Images: Image01Icon,\n  Videos: Video01Icon,\n  Documents: File01Icon,\n  Archives: FolderZipIcon,\n  Other: FileAttachmentIcon,\n}\n\nexport function StorageCards() {\n  return (\n    <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5\">\n      {storageData.breakdown.map((item) => {\n        const Icon =\n          iconMap[item.type as keyof typeof iconMap] || FileAttachmentIcon\n        const percentage = ((item.size / storageData.total) * 100).toFixed(0)\n\n        return (\n          <div\n            key={item.type}\n            className=\"group cursor-pointer rounded-xl border bg-card p-4 transition-colors hover:bg-accent/50\"\n          >\n            <div\n              className=\"mb-3 flex size-10 items-center justify-center rounded-lg\"\n              style={{ backgroundColor: `${item.color}15` }}\n            >\n              <HugeiconsIcon\n                icon={Icon}\n                className=\"size-5\"\n                style={{ color: item.color }}\n              />\n            </div>\n            <p className=\"mb-0.5 text-sm font-medium\">{item.type}</p>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"text-xs text-muted-foreground\">\n                {item.size} GB\n              </span>\n              <span className=\"text-xs text-muted-foreground\">\n                {percentage}%\n              </span>\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/files/storage-overview.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/files/storage-overview.tsx",
+      "content": "\"use client\"\n\nimport { storageData } from \"../../mock-data/files\"\n\nexport function StorageOverview() {\n  const usedPercentage = (storageData.used / storageData.total) * 100\n\n  return (\n    <div className=\"rounded-xl border bg-card p-4\">\n      <div className=\"mb-4 flex items-center justify-between\">\n        <h3 className=\"text-sm font-medium\">Storage Overview</h3>\n        <button className=\"text-xs font-medium text-violet-500 transition-colors hover:text-violet-600\">\n          Upgrade\n        </button>\n      </div>\n\n      <div className=\"relative mb-3 h-3 overflow-hidden rounded-full bg-muted\">\n        <div className=\"absolute inset-0 flex overflow-hidden rounded-full\">\n          {storageData.breakdown.map((item, index) => {\n            const width = (item.size / storageData.used) * usedPercentage\n            const isFirst = index === 0\n            const isLast = index === storageData.breakdown.length - 1\n            return (\n              <div\n                key={item.type}\n                className={`h-full ${isFirst ? \"rounded-l-full\" : \"\"} ${isLast ? \"rounded-r-full\" : \"\"}`}\n                style={{\n                  width: `${width}%`,\n                  backgroundColor: item.color,\n                }}\n              />\n            )\n          })}\n        </div>\n      </div>\n\n      <div className=\"mb-4 flex items-center justify-between text-sm\">\n        <span className=\"text-muted-foreground\">\n          {storageData.used} GB of {storageData.total} GB used\n        </span>\n        <span className=\"font-medium\">{usedPercentage.toFixed(0)}%</span>\n      </div>\n\n      <div className=\"grid grid-cols-2 gap-2\">\n        {storageData.breakdown.map((item) => (\n          <div\n            key={item.type}\n            className=\"flex items-center gap-2 rounded-lg bg-muted/50 p-2\"\n          >\n            <div\n              className=\"size-2.5 shrink-0 rounded-full\"\n              style={{ backgroundColor: item.color }}\n            />\n            <span className=\"truncate text-xs text-muted-foreground\">\n              {item.type}\n            </span>\n            <span className=\"ml-auto text-xs font-medium\">{item.size} GB</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/theme-provider.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/theme-provider.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\n\nexport function ThemeProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NextThemesProvider>) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/theme-toggle.tsx",
+      "type": "registry:component",
+      "target": "components/example-apps/files/components/theme-toggle.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon01Icon, Sun01Icon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\n\nexport function ThemeToggle() {\n  const { setTheme, theme } = useTheme()\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={() => setTheme(theme === \"light\" ? \"dark\" : \"light\")}\n    >\n      <HugeiconsIcon\n        icon={Sun01Icon}\n        className=\"h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\"\n      />\n      <HugeiconsIcon\n        icon={Moon01Icon}\n        className=\"absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\"\n      />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/components/ui/sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/example-apps/files/components/ui/sidebar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { SidebarLeftIcon } from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { Button } from \"@loveui/ui/ui/button\"\nimport { Input } from \"@loveui/ui/ui/input\"\nimport { Separator } from \"@loveui/ui/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@loveui/ui/ui/sheet\"\nimport { Skeleton } from \"@loveui/ui/ui/skeleton\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@loveui/ui/ui/tooltip\"\n\nimport { useIsMobile } from \"../../hooks/use-mobile\"\nimport { cn } from \"../../lib/utils\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as any\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"top-[var(--sidebar-top-offset,0px)] h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as any\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed top-[var(--sidebar-top-offset,0px)] bottom-0 z-10 hidden h-[calc(100svh-var(--sidebar-top-offset,0px))] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2} />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full hover:group-data-[collapsible=offExamples]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: (!tooltip ? render : TooltipTrigger) as any,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as any\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/hooks/use-mobile.ts",
+      "type": "registry:hook",
+      "target": "components/example-apps/files/hooks/use-mobile.ts",
+      "content": "import * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/index.tsx",
+      "type": "registry:file",
+      "target": "components/example-apps/files/index.tsx",
+      "content": "/**\n * Wrapper export for embedding the app in the docs app\n */\n\"use client\"\n\nimport { SidebarProvider } from \"@/components/ui/sidebar\"\n\nimport { FilesContent } from \"./components/files/content\"\nimport { FilesHeader } from \"./components/files/header\"\nimport { FilesSidebar } from \"./components/files/sidebar\"\n\nexport default function FilesWrapper() {\n  return (\n    <SidebarProvider className=\"bg-sidebar\">\n      <FilesSidebar />\n      <div className=\"h-full min-h-0 w-full overflow-hidden lg:p-2\">\n        <div className=\"flex h-full min-h-0 w-full flex-col items-center justify-start overflow-hidden bg-background lg:rounded-xl lg:border\">\n          <FilesHeader />\n          <FilesContent view=\"all\" />\n        </div>\n      </div>\n    </SidebarProvider>\n  )\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/lib/utils.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/files/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/mock-data/files.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/files/mock-data/files.ts",
+      "content": "export type FileType =\n  | \"image\"\n  | \"video\"\n  | \"document\"\n  | \"archive\"\n  | \"audio\"\n  | \"code\"\n  | \"other\"\n\nexport interface FileItem {\n  id: string\n  name: string\n  type: FileType\n  size: string\n  sizeBytes: number\n  modifiedAt: string\n  createdAt: string\n  starred: boolean\n  shared: boolean\n  folderId: string | null\n}\n\nexport interface Folder {\n  id: string\n  name: string\n  color: string\n  filesCount: number\n  size: string\n  parentId: string | null\n}\n\nexport const folders: Folder[] = [\n  {\n    id: \"1\",\n    name: \"Raw Footage\",\n    color: \"#8B5CF6\",\n    filesCount: 32,\n    size: \"5.8 GB\",\n    parentId: null,\n  },\n  {\n    id: \"2\",\n    name: \"Field Audio\",\n    color: \"#06B6D4\",\n    filesCount: 18,\n    size: \"1.9 GB\",\n    parentId: null,\n  },\n  {\n    id: \"3\",\n    name: \"Research Docs\",\n    color: \"#F59E0B\",\n    filesCount: 27,\n    size: \"410 MB\",\n    parentId: null,\n  },\n  {\n    id: \"4\",\n    name: \"Edit Projects\",\n    color: \"#EC4899\",\n    filesCount: 21,\n    size: \"3.2 GB\",\n    parentId: null,\n  },\n  {\n    id: \"5\",\n    name: \"Deliverables\",\n    color: \"#10B981\",\n    filesCount: 9,\n    size: \"1.3 GB\",\n    parentId: null,\n  },\n]\n\nexport const files: FileItem[] = [\n  {\n    id: \"f1\",\n    name: \"Kenya_Savannah_Day03_Acam_4K.mov\",\n    type: \"video\",\n    size: \"1.4 GB\",\n    sizeBytes: 1503238553,\n    modifiedAt: \"20 min ago\",\n    createdAt: \"Jan 12, 2026\",\n    starred: true,\n    shared: true,\n    folderId: \"1\",\n  },\n  {\n    id: \"f2\",\n    name: \"Night_Vision_Hyena_CutB.mp4\",\n    type: \"video\",\n    size: \"842 MB\",\n    sizeBytes: 882900000,\n    modifiedAt: \"2 hours ago\",\n    createdAt: \"Jan 11, 2026\",\n    starred: false,\n    shared: true,\n    folderId: \"1\",\n  },\n  {\n    id: \"f3\",\n    name: \"Camp_Ambience_Master.wav\",\n    type: \"audio\",\n    size: \"188 MB\",\n    sizeBytes: 197132288,\n    modifiedAt: \"1 hour ago\",\n    createdAt: \"Jan 10, 2026\",\n    starred: true,\n    shared: false,\n    folderId: \"2\",\n  },\n  {\n    id: \"f4\",\n    name: \"Narration_Pass_V3.wav\",\n    type: \"audio\",\n    size: \"96 MB\",\n    sizeBytes: 100663296,\n    modifiedAt: \"Yesterday\",\n    createdAt: \"Jan 9, 2026\",\n    starred: false,\n    shared: true,\n    folderId: \"2\",\n  },\n  {\n    id: \"f5\",\n    name: \"Species_Timeline_Outline.docx\",\n    type: \"document\",\n    size: \"2.1 MB\",\n    sizeBytes: 2202009,\n    modifiedAt: \"3 hours ago\",\n    createdAt: \"Jan 8, 2026\",\n    starred: true,\n    shared: true,\n    folderId: \"3\",\n  },\n  {\n    id: \"f6\",\n    name: \"Permit_Log_Q1_2026.xlsx\",\n    type: \"document\",\n    size: \"640 KB\",\n    sizeBytes: 655360,\n    modifiedAt: \"Yesterday\",\n    createdAt: \"Jan 6, 2026\",\n    starred: false,\n    shared: false,\n    folderId: \"3\",\n  },\n  {\n    id: \"f7\",\n    name: \"Episode02_Edit_v14.prproj\",\n    type: \"code\",\n    size: \"75 MB\",\n    sizeBytes: 78643200,\n    modifiedAt: \"30 min ago\",\n    createdAt: \"Jan 14, 2026\",\n    starred: true,\n    shared: false,\n    folderId: \"4\",\n  },\n  {\n    id: \"f8\",\n    name: \"LowerThirds_StyleGuide.fig\",\n    type: \"image\",\n    size: \"18 MB\",\n    sizeBytes: 18874368,\n    modifiedAt: \"4 hours ago\",\n    createdAt: \"Jan 5, 2026\",\n    starred: false,\n    shared: true,\n    folderId: \"4\",\n  },\n  {\n    id: \"f9\",\n    name: \"Episode02_Master_ProRes.mov\",\n    type: \"video\",\n    size: \"2.0 GB\",\n    sizeBytes: 2147483648,\n    modifiedAt: \"2 days ago\",\n    createdAt: \"Jan 4, 2026\",\n    starred: true,\n    shared: false,\n    folderId: \"5\",\n  },\n  {\n    id: \"f10\",\n    name: \"Festival_Submission_Package.zip\",\n    type: \"archive\",\n    size: \"426 MB\",\n    sizeBytes: 446693376,\n    modifiedAt: \"2 days ago\",\n    createdAt: \"Jan 3, 2026\",\n    starred: true,\n    shared: true,\n    folderId: \"5\",\n  },\n  {\n    id: \"f11\",\n    name: \"Map_Overlays_SetA.png\",\n    type: \"image\",\n    size: \"14 MB\",\n    sizeBytes: 14680064,\n    modifiedAt: \"5 hours ago\",\n    createdAt: \"Jan 2, 2026\",\n    starred: false,\n    shared: true,\n    folderId: \"4\",\n  },\n  {\n    id: \"f12\",\n    name: \"Drone_Path_Metadata.json\",\n    type: \"code\",\n    size: \"340 KB\",\n    sizeBytes: 348160,\n    modifiedAt: \"6 hours ago\",\n    createdAt: \"Jan 13, 2026\",\n    starred: false,\n    shared: false,\n    folderId: \"3\",\n  },\n  {\n    id: \"f13\",\n    name: \"Lion_Pride_Closeup_FrameGrab.jpg\",\n    type: \"image\",\n    size: \"9.8 MB\",\n    sizeBytes: 10276044,\n    modifiedAt: \"1 day ago\",\n    createdAt: \"Jan 1, 2026\",\n    starred: true,\n    shared: true,\n    folderId: \"1\",\n  },\n  {\n    id: \"f14\",\n    name: \"Interview_Transcript_DrSafi.pdf\",\n    type: \"document\",\n    size: \"3.4 MB\",\n    sizeBytes: 3565158,\n    modifiedAt: \"3 days ago\",\n    createdAt: \"Dec 30, 2025\",\n    starred: false,\n    shared: true,\n    folderId: \"3\",\n  },\n  {\n    id: \"f15\",\n    name: \"Color_Grade_LUTs.cube\",\n    type: \"other\",\n    size: \"12 KB\",\n    sizeBytes: 12288,\n    modifiedAt: \"2 hours ago\",\n    createdAt: \"Dec 29, 2025\",\n    starred: false,\n    shared: false,\n    folderId: \"4\",\n  },\n  {\n    id: \"f16\",\n    name: \"Episode03_RoughAssembly_v05.prproj\",\n    type: \"code\",\n    size: \"62 MB\",\n    sizeBytes: 65011712,\n    modifiedAt: \"8 hours ago\",\n    createdAt: \"Dec 28, 2025\",\n    starred: false,\n    shared: false,\n    folderId: \"4\",\n  },\n  {\n    id: \"f17\",\n    name: \"Backup_FieldCards_Week2.7z\",\n    type: \"archive\",\n    size: \"970 MB\",\n    sizeBytes: 1017118720,\n    modifiedAt: \"4 days ago\",\n    createdAt: \"Dec 27, 2025\",\n    starred: false,\n    shared: false,\n    folderId: \"5\",\n  },\n  {\n    id: \"f18\",\n    name: \"WindNoise_Reduction_Profile.xml\",\n    type: \"code\",\n    size: \"86 KB\",\n    sizeBytes: 88064,\n    modifiedAt: \"Yesterday\",\n    createdAt: \"Dec 26, 2025\",\n    starred: true,\n    shared: false,\n    folderId: \"2\",\n  },\n  {\n    id: \"f19\",\n    name: \"Narrative_BeatBoard.pdf\",\n    type: \"document\",\n    size: \"1.8 MB\",\n    sizeBytes: 1887436,\n    modifiedAt: \"5 days ago\",\n    createdAt: \"Dec 24, 2025\",\n    starred: true,\n    shared: true,\n    folderId: \"3\",\n  },\n  {\n    id: \"f20\",\n    name: \"Streaming_Delivery_H264.mp4\",\n    type: \"video\",\n    size: \"612 MB\",\n    sizeBytes: 641728512,\n    modifiedAt: \"1 week ago\",\n    createdAt: \"Dec 22, 2025\",\n    starred: false,\n    shared: true,\n    folderId: \"5\",\n  },\n]\n\nexport const storageData = {\n  used: 12.6,\n  total: 20,\n  breakdown: [\n    { type: \"Images\", size: 1.9, color: \"#8B5CF6\" },\n    { type: \"Videos\", size: 7.2, color: \"#EC4899\" },\n    { type: \"Documents\", size: 1.3, color: \"#F59E0B\" },\n    { type: \"Archives\", size: 1.5, color: \"#10B981\" },\n    { type: \"Other\", size: 0.7, color: \"#6B7280\" },\n  ],\n}\n"
+    },
+    {
+      "path": "registry/example-apps/default/files/store/files-store.ts",
+      "type": "registry:lib",
+      "target": "components/example-apps/files/store/files-store.ts",
+      "content": "import { create } from \"zustand\"\n\nimport {\n  FileItem,\n  Folder,\n  files as initialFiles,\n  folders as initialFolders,\n} from \"../mock-data/files\"\n\ntype ViewMode = \"grid\" | \"list\"\n\ninterface FilesStore {\n  files: FileItem[]\n  folders: Folder[]\n  searchQuery: string\n  viewMode: ViewMode\n  setSearchQuery: (query: string) => void\n  setViewMode: (mode: ViewMode) => void\n  toggleStarred: (fileId: string) => void\n  getFilteredFiles: () => FileItem[]\n  getStarredFiles: () => FileItem[]\n  getRecentFiles: () => FileItem[]\n  getSharedFiles: () => FileItem[]\n  getFilesByFolder: (folderId: string) => FileItem[]\n}\n\nexport const useFilesStore = create<FilesStore>((set, get) => ({\n  files: initialFiles,\n  folders: initialFolders,\n  searchQuery: \"\",\n  viewMode: \"list\",\n\n  setSearchQuery: (query) => set({ searchQuery: query }),\n\n  setViewMode: (mode) => set({ viewMode: mode }),\n\n  toggleStarred: (fileId) =>\n    set((state) => ({\n      files: state.files.map((file) =>\n        file.id === fileId ? { ...file, starred: !file.starred } : file\n      ),\n    })),\n\n  getFilteredFiles: () => {\n    const { files, searchQuery } = get()\n    let filtered = files\n\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase()\n      filtered = filtered.filter((file) =>\n        file.name.toLowerCase().includes(query)\n      )\n    }\n\n    return filtered\n  },\n\n  getStarredFiles: () => {\n    const { files } = get()\n    return files.filter((file) => file.starred)\n  },\n\n  getRecentFiles: () => {\n    const { files } = get()\n    return files.slice(0, 5)\n  },\n\n  getSharedFiles: () => {\n    const { files } = get()\n    return files.filter((file) => file.shared)\n  },\n\n  getFilesByFolder: (folderId: string) => {\n    const { files } = get()\n    return files.filter((file) => file.folderId === folderId)\n  },\n}))\n"
+    }
+  ],
+  "categories": [
+    "example-app",
+    "productivity",
+    "assets",
+    "documentary",
+    "storage",
+    "collections"
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@hugeicons/core-free-icons",
+    "@hugeicons/react",
+    "class-variance-authority",
+    "clsx",
+    "next-themes",
+    "tailwind-merge",
+    "zustand"
+  ],
+  "registryDependencies": [
+    "https://www.loveui.dev/r/avatar.json",
+    "https://www.loveui.dev/r/button.json",
+    "https://www.loveui.dev/r/collapsible.json",
+    "https://www.loveui.dev/r/input.json",
+    "https://www.loveui.dev/r/menu.json",
+    "https://www.loveui.dev/r/progress.json",
+    "https://www.loveui.dev/r/separator.json",
+    "https://www.loveui.dev/r/sheet.json",
+    "https://www.loveui.dev/r/skeleton.json",
+    "https://www.loveui.dev/r/tooltip.json"
+  ],
+  "meta": {
+    "source": "example-app",
+    "appName": "files",
+    "routes": [
+      {
+        "path": "/",
+        "title": "All Assets",
+        "description": "Main production asset explorer"
+      },
+      {
+        "path": "/recent",
+        "title": "Latest",
+        "description": "Recently accessed assets"
+      },
+      {
+        "path": "/shared",
+        "title": "Shared",
+        "description": "Shared assets and collections"
+      },
+      {
+        "path": "/starred",
+        "title": "Pinned",
+        "description": "Pinned assets"
+      },
+      {
+        "path": "/trash",
+        "title": "Archive Bin",
+        "description": "Removed assets"
+      },
+      {
+        "path": "/folder/[id]",
+        "title": "Collection",
+        "description": "Dynamic collection view"
+      }
+    ]
+  }
+}

package/public/r/form-demo.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/form-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function FormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Email: ${formData.get(\"email\") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Email</FieldLabel>\n        <FieldControl\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"you@example.com\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Please enter a valid email.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nexport default function FormDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.currentTarget)\n    setLoading(true)\n    await new Promise((r) => setTimeout(r, 800))\n    setLoading(false)\n    alert(`Email: ${formData.get(\"email\") || \"\"}`)\n  }\n\n  return (\n    <Form onSubmit={onSubmit} className=\"max-w-64\">\n      <Field>\n        <FieldLabel>Updated Email</FieldLabel>\n        <FieldControl\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"you@example.com\"\n          disabled={loading}\n          required\n        />\n        <FieldError>Updated Please enter a valid email.</FieldError>\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/form-zod.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/examples/form-zod.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nconst schema = z.object({\n  name: z.string().min(1, { message: \"Please enter a name.\" }),\n  age: z.coerce\n    .number({ message: \"Please enter a number.\" })\n    .positive({ message: \"Number must be positive.\" }),\n})\n\ntype Errors = Record<string, string | string[]>\n\nasync function submitForm(event: React.FormEvent<HTMLFormElement>) {\n  event.preventDefault()\n\n  const formData = new FormData(event.currentTarget)\n  const result = schema.safeParse(Object.fromEntries(formData as any))\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error)\n    return { errors: fieldErrors as Errors }\n  }\n\n  return {\n    errors: {} as Errors,\n  }\n}\n\nexport default function FormZodDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const [errors, setErrors] = React.useState<Errors>({})\n  const handleClearErrors = (next: Errors) => setErrors(next)\n\n  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    const formEl = event.currentTarget\n    setLoading(true)\n    const response = await submitForm(event)\n    await new Promise((r) => setTimeout(r, 800))\n    setErrors(response.errors)\n    setLoading(false)\n    if (Object.keys(response.errors).length === 0) {\n      const formData = new FormData(formEl)\n      alert(\n        `Name: ${String(formData.get(\"name\") || \"\")}\\nAge: ${String(\n          formData.get(\"age\") || \"\"\n        )}`\n      )\n    }\n  }\n\n  return (\n    <Form\n      className=\"max-w-64\"\n      errors={errors}\n      onClearErrors={handleClearErrors}\n      onSubmit={onSubmit}\n    >\n      <Field name=\"name\">\n        <FieldLabel>Name</FieldLabel>\n        <FieldControl placeholder=\"Enter name\" disabled={loading} />\n        <FieldError />\n      </Field>\n      <Field name=\"age\">\n        <FieldLabel>Age</FieldLabel>\n        <FieldControl placeholder=\"Enter age\" disabled={loading} />\n        <FieldError />\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Submit\n      </Button>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Field,\n  FieldControl,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\"\nimport { Form } from \"@/registry/default/ui/form\"\n\nconst schema = z.object({\n  name: z.string().min(1, { message: \"Updated Please enter a name.\" }),\n  age: z.coerce\n    .number({ message: \"Updated Please enter a number.\" })\n    .positive({ message: \"Updated Number must be positive.\" }),\n})\n\ntype Errors = Record<string, string | string[]>\n\nasync function submitForm(event: React.FormEvent<HTMLFormElement>) {\n  event.preventDefault()\n\n  const formData = new FormData(event.currentTarget)\n  const result = schema.safeParse(Object.fromEntries(formData as any))\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error)\n    return { errors: fieldErrors as Errors }\n  }\n\n  return {\n    errors: {} as Errors,\n  }\n}\n\nexport default function FormZodDemo() {\n  const [loading, setLoading] = React.useState(false)\n  const [errors, setErrors] = React.useState<Errors>({})\n  const handleClearErrors = (next: Errors) => setErrors(next)\n\n  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    const formEl = event.currentTarget\n    setLoading(true)\n    const response = await submitForm(event)\n    await new Promise((r) => setTimeout(r, 800))\n    setErrors(response.errors)\n    setLoading(false)\n    if (Object.keys(response.errors).length === 0) {\n      const formData = new FormData(formEl)\n      alert(\n        `Name: ${String(formData.get(\"name\") || \"\")}\\nAge: ${String(\n          formData.get(\"age\") || \"\"\n        )}`\n      )\n    }\n  }\n\n  return (\n    <Form\n      className=\"max-w-64\"\n      errors={errors}\n      onClearErrors={handleClearErrors}\n      onSubmit={onSubmit}\n    >\n      <Field name=\"name\">\n        <FieldLabel>Updated Name</FieldLabel>\n        <FieldControl placeholder=\"Updated Enter name\" disabled={loading} />\n        <FieldError />\n      </Field>\n      <Field name=\"age\">\n        <FieldLabel>Updated Age</FieldLabel>\n        <FieldControl placeholder=\"Updated Enter age\" disabled={loading} />\n        <FieldError />\n      </Field>\n      <Button type=\"submit\" disabled={loading}>\n        Updated Submit\n      </Button>\n    </Form>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/form.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/form.tsx",
-      "content": "\"use client\"\n\nimport { useState, type FormEventHandler } from \"react\"\nimport {\n  CalendarIcon,\n  ImageIcon,\n  InfoIcon,\n  MapPinIcon,\n  TagIcon,\n  UsersIcon,\n} from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport { Input } from \"../../../../../packages/ui/src/ui/input\"\nimport { Label } from \"../../../../../packages/ui/src/ui/label\"\nimport { Textarea } from \"../../../../../packages/ui/src/ui/textarea\"\n\nconst eventTypes = [\n  {\n    value: \"conference\",\n    label: \"Conference\",\n    description: \"Professional gathering with speakers and networking\",\n  },\n  {\n    value: \"workshop\",\n    label: \"Workshop\",\n    description: \"Hands-on learning experience with practical activities\",\n  },\n  {\n    value: \"meetup\",\n    label: \"Meetup\",\n    description: \"Casual gathering for like-minded individuals\",\n  },\n  {\n    value: \"webinar\",\n    label: \"Webinar\",\n    description: \"Online presentation or seminar via video conference\",\n  },\n]\n\nconst venues = [\n  { value: \"convention-center\", label: \"Downtown Convention Center\" },\n  { value: \"hotel-ballroom\", label: \"Grand Hotel Ballroom\" },\n  { value: \"university-hall\", label: \"University Main Hall\" },\n  { value: \"co-working-space\", label: \"Tech Hub Co-working Space\" },\n  { value: \"online\", label: \"Online/Virtual\" },\n]\n\nconst availableTags = [\n  \"Technology\",\n  \"Business\",\n  \"Marketing\",\n  \"Design\",\n  \"Development\",\n  \"AI/ML\",\n  \"Startup\",\n  \"Networking\",\n  \"Education\",\n  \"Innovation\",\n  \"Remote Work\",\n  \"Leadership\",\n]\n\nconst Example = () => {\n  const [eventType, setEventType] = useState(\"\")\n  const [venue, setVenue] = useState(\"\")\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>()\n  const [files, setFiles] = useState<File[]>([])\n  const [selectedTags, setSelectedTags] = useState<string[]>([])\n\n  const handleTagSelect = (tag: string) => {\n    if (!selectedTags.includes(tag)) {\n      setSelectedTags([...selectedTags, tag])\n    }\n  }\n\n  const handleTagRemove = (tagToRemove: string) => {\n    setSelectedTags(selectedTags.filter((tag) => tag !== tagToRemove))\n  }\n\n  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n    event.preventDefault()\n\n    toast.success(\"Event created successfully\", {\n      description: `${eventType} event created for ${selectedDate?.toLocaleDateString()} at ${venue}`,\n    })\n  }\n\n  return (\n    <div className=\"not-prose mx-auto max-w-[530px] p-8\">\n      <div className=\"mb-8 text-center\">\n        <h1 className=\"mb-2 text-3xl font-semibold tracking-tight\">\n          Create Your Event\n        </h1>\n        <p className=\"text-balance text-muted-foreground\">\n          Fill out the form below to create and customize your upcoming event\n        </p>\n      </div>\n\n      <form className=\"space-y-8\" onSubmit={handleSubmit}>\n        {/* Basic Information */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <InfoIcon className=\"size-5\" />\n            Basic Information\n          </h2>\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"event-name\">Event Name</Label>\n              <Input\n                id=\"event-name\"\n                placeholder=\"Enter your event name\"\n                required\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"organizer\">Organizer</Label>\n              <Input\n                id=\"organizer\"\n                placeholder=\"Your name or organization\"\n                required\n              />\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"description\">Description</Label>\n            <Textarea\n              id=\"description\"\n              placeholder=\"Describe your event in detail...\"\n              rows={3}\n            />\n          </div>\n        </div>\n\n        {/* Event Type Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <UsersIcon className=\"size-5\" />\n            Event Type\n          </h2>\n          <Choicebox onValueChange={setEventType} value={eventType}>\n            {eventTypes.map((type) => (\n              <ChoiceboxItem key={type.value} value={type.value}>\n                <ChoiceboxItemHeader>\n                  <ChoiceboxItemTitle>{type.label}</ChoiceboxItemTitle>\n                  <ChoiceboxItemDescription>\n                    {type.description}\n                  </ChoiceboxItemDescription>\n                </ChoiceboxItemHeader>\n                <ChoiceboxIndicator />\n              </ChoiceboxItem>\n            ))}\n          </Choicebox>\n        </div>\n\n        {/* Venue Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <MapPinIcon className=\"size-5\" />\n            Venue\n          </h2>\n          <Combobox\n            data={venues}\n            onValueChange={setVenue}\n            type=\"venue\"\n            value={venue}\n          >\n            <ComboboxTrigger className=\"w-full\" />\n            <ComboboxContent>\n              <ComboboxInput />\n              <ComboboxList>\n                <ComboboxEmpty />\n                <ComboboxGroup>\n                  {venues.map((venue) => (\n                    <ComboboxItem key={venue.value} value={venue.value}>\n                      {venue.label}\n                    </ComboboxItem>\n                  ))}\n                </ComboboxGroup>\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </div>\n\n        {/* Date Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <CalendarIcon className=\"size-5\" />\n            Select Date\n          </h2>\n          <MiniCalendar\n            className=\"w-fit\"\n            days={7}\n            onValueChange={setSelectedDate}\n            value={selectedDate}\n          >\n            <MiniCalendarNavigation direction=\"prev\" />\n            <MiniCalendarDays>\n              {(date) => (\n                <MiniCalendarDay date={date} key={date.toISOString()} />\n              )}\n            </MiniCalendarDays>\n            <MiniCalendarNavigation direction=\"next\" />\n          </MiniCalendar>\n        </div>\n\n        {/* Tags Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <TagIcon className=\"size-5\" />\n            Event Tags\n          </h2>\n          <Tags>\n            <TagsTrigger>\n              {selectedTags.map((tag) => (\n                <TagsValue key={tag} onRemove={() => handleTagRemove(tag)}>\n                  {tag}\n                </TagsValue>\n              ))}\n            </TagsTrigger>\n            <TagsContent>\n              <TagsInput placeholder=\"Search tags...\" />\n              <TagsList>\n                <TagsEmpty>No tags found.</TagsEmpty>\n                <TagsGroup>\n                  {availableTags\n                    .filter((tag) => !selectedTags.includes(tag))\n                    .map((tag) => (\n                      <TagsItem key={tag} onSelect={() => handleTagSelect(tag)}>\n                        {tag}\n                      </TagsItem>\n                    ))}\n                </TagsGroup>\n              </TagsList>\n            </TagsContent>\n          </Tags>\n        </div>\n\n        {/* File Upload */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <ImageIcon className=\"size-5\" />\n            Event Images\n          </h2>\n          <Dropzone\n            accept={{\n              \"image/*\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".webp\"],\n            }}\n            maxFiles={5}\n            maxSize={5 * 1024 * 1024} // 5MB\n            onDrop={(acceptedFiles) => setFiles(acceptedFiles)}\n          >\n            <DropzoneEmptyState />\n            <DropzoneContent />\n          </Dropzone>\n          {files.length > 0 && (\n            <div className=\"text-sm text-muted-foreground\">\n              {files.length} file{files.length > 1 ? \"s\" : \"\"} selected\n            </div>\n          )}\n        </div>\n\n        {/* Submit Button */}\n        <div className=\"flex justify-end space-x-4\">\n          <Button type=\"button\" variant=\"outline\">\n            Save as Draft\n          </Button>\n          <Button type=\"submit\">Create Event</Button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState, type FormEventHandler } from \"react\"\nimport {\n  CalendarIcon,\n  ImageIcon,\n  InfoIcon,\n  MapPinIcon,\n  TagIcon,\n  UsersIcon,\n} from \"lucide-react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Choicebox,\n  ChoiceboxIndicator,\n  ChoiceboxItem,\n  ChoiceboxItemDescription,\n  ChoiceboxItemHeader,\n  ChoiceboxItemTitle,\n} from \"../../../../../packages/choicebox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n} from \"../../../../../packages/combobox\"\nimport {\n  Dropzone,\n  DropzoneContent,\n  DropzoneEmptyState,\n} from \"../../../../../packages/dropzone\"\nimport {\n  MiniCalendar,\n  MiniCalendarDay,\n  MiniCalendarDays,\n  MiniCalendarNavigation,\n} from \"../../../../../packages/mini-calendar\"\nimport {\n  Tags,\n  TagsContent,\n  TagsEmpty,\n  TagsGroup,\n  TagsInput,\n  TagsItem,\n  TagsList,\n  TagsTrigger,\n  TagsValue,\n} from \"../../../../../packages/tags\"\nimport { Button } from \"../../../../../packages/ui/src/ui/button\"\nimport { Input } from \"../../../../../packages/ui/src/ui/input\"\nimport { Label } from \"../../../../../packages/ui/src/ui/label\"\nimport { Textarea } from \"../../../../../packages/ui/src/ui/textarea\"\n\nconst eventTypes = [\n  {\n    value: \"conference\",\n    label: \"Updated Conference\",\n    description: \"Updated Professional gathering with speakers and networking\",\n  },\n  {\n    value: \"workshop\",\n    label: \"Updated Workshop\",\n    description:\n      \"Updated Hands-on learning experience with practical activities\",\n  },\n  {\n    value: \"meetup\",\n    label: \"Updated Meetup\",\n    description: \"Updated Casual gathering for like-minded individuals\",\n  },\n  {\n    value: \"webinar\",\n    label: \"Updated Webinar\",\n    description: \"Updated Online presentation or seminar via video conference\",\n  },\n]\n\nconst venues = [\n  { value: \"convention-center\", label: \"Updated Downtown Convention Center\" },\n  { value: \"hotel-ballroom\", label: \"Updated Grand Hotel Ballroom\" },\n  { value: \"university-hall\", label: \"Updated University Main Hall\" },\n  { value: \"co-working-space\", label: \"Updated Tech Hub Co-working Space\" },\n  { value: \"online\", label: \"Updated Online/Virtual\" },\n]\n\nconst availableTags = [\n  \"Technology\",\n  \"Business\",\n  \"Marketing\",\n  \"Design\",\n  \"Development\",\n  \"AI/ML\",\n  \"Startup\",\n  \"Networking\",\n  \"Education\",\n  \"Innovation\",\n  \"Remote Work\",\n  \"Leadership\",\n]\n\nconst Example = () => {\n  const [eventType, setEventType] = useState(\"\")\n  const [venue, setVenue] = useState(\"\")\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>()\n  const [files, setFiles] = useState<File[]>([])\n  const [selectedTags, setSelectedTags] = useState<string[]>([])\n\n  const handleTagSelect = (tag: string) => {\n    if (!selectedTags.includes(tag)) {\n      setSelectedTags([...selectedTags, tag])\n    }\n  }\n\n  const handleTagRemove = (tagToRemove: string) => {\n    setSelectedTags(selectedTags.filter((tag) => tag !== tagToRemove))\n  }\n\n  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n    event.preventDefault()\n\n    toast.success(\"Event created successfully\", {\n      description: `${eventType} event created for ${selectedDate?.toLocaleDateString()} at ${venue}`,\n    })\n  }\n\n  return (\n    <div className=\"not-prose mx-auto max-w-[530px] p-8\">\n      <div className=\"mb-8 text-center\">\n        <h1 className=\"mb-2 text-3xl font-semibold tracking-tight\">\n          Updated Create Your Event\n        </h1>\n        <p className=\"text-balance text-muted-foreground\">\n          Updated Fill out the form below to create and customize your upcoming\n          event\n        </p>\n      </div>\n\n      <form className=\"space-y-8\" onSubmit={handleSubmit}>\n        {/* Basic Information */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <InfoIcon className=\"size-5\" />\n            Updated Basic Information\n          </h2>\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"event-name\">Updated Event Name</Label>\n              <Input\n                id=\"event-name\"\n                placeholder=\"Updated Enter your event name\"\n                required\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Label htmlFor=\"organizer\">Updated Organizer</Label>\n              <Input\n                id=\"organizer\"\n                placeholder=\"Updated Your name or organization\"\n                required\n              />\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"description\">Updated Description</Label>\n            <Textarea\n              id=\"description\"\n              placeholder=\"Updated Describe your event in detail...\"\n              rows={3}\n            />\n          </div>\n        </div>\n\n        {/* Event Type Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <UsersIcon className=\"size-5\" />\n            Updated Event Type\n          </h2>\n          <Choicebox onValueChange={setEventType} value={eventType}>\n            {eventTypes.map((type) => (\n              <ChoiceboxItem key={type.value} value={type.value}>\n                <ChoiceboxItemHeader>\n                  <ChoiceboxItemTitle>{type.label}</ChoiceboxItemTitle>\n                  <ChoiceboxItemDescription>\n                    {type.description}\n                  </ChoiceboxItemDescription>\n                </ChoiceboxItemHeader>\n                <ChoiceboxIndicator />\n              </ChoiceboxItem>\n            ))}\n          </Choicebox>\n        </div>\n\n        {/* Venue Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <MapPinIcon className=\"size-5\" />\n            Updated Venue\n          </h2>\n          <Combobox\n            data={venues}\n            onValueChange={setVenue}\n            type=\"venue\"\n            value={venue}\n          >\n            <ComboboxTrigger className=\"w-full\" />\n            <ComboboxContent>\n              <ComboboxInput />\n              <ComboboxList>\n                <ComboboxEmpty />\n                <ComboboxGroup>\n                  {venues.map((venue) => (\n                    <ComboboxItem key={venue.value} value={venue.value}>\n                      {venue.label}\n                    </ComboboxItem>\n                  ))}\n                </ComboboxGroup>\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </div>\n\n        {/* Date Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <CalendarIcon className=\"size-5\" />\n            Updated Select Date\n          </h2>\n          <MiniCalendar\n            className=\"w-fit\"\n            days={7}\n            onValueChange={setSelectedDate}\n            value={selectedDate}\n          >\n            <MiniCalendarNavigation direction=\"prev\" />\n            <MiniCalendarDays>\n              {(date) => (\n                <MiniCalendarDay date={date} key={date.toISOString()} />\n              )}\n            </MiniCalendarDays>\n            <MiniCalendarNavigation direction=\"next\" />\n          </MiniCalendar>\n        </div>\n\n        {/* Tags Selection */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <TagIcon className=\"size-5\" />\n            Updated Event Tags\n          </h2>\n          <Tags>\n            <TagsTrigger>\n              {selectedTags.map((tag) => (\n                <TagsValue key={tag} onRemove={() => handleTagRemove(tag)}>\n                  {tag}\n                </TagsValue>\n              ))}\n            </TagsTrigger>\n            <TagsContent>\n              <TagsInput placeholder=\"Updated Search tags...\" />\n              <TagsList>\n                <TagsEmpty>Updated No tags found.</TagsEmpty>\n                <TagsGroup>\n                  {availableTags\n                    .filter((tag) => !selectedTags.includes(tag))\n                    .map((tag) => (\n                      <TagsItem key={tag} onSelect={() => handleTagSelect(tag)}>\n                        {tag}\n                      </TagsItem>\n                    ))}\n                </TagsGroup>\n              </TagsList>\n            </TagsContent>\n          </Tags>\n        </div>\n\n        {/* File Upload */}\n        <div className=\"space-y-4\">\n          <h2 className=\"flex items-center gap-2 text-xl font-semibold\">\n            <ImageIcon className=\"size-5\" />\n            Updated Event Images\n          </h2>\n          <Dropzone\n            accept={{\n              \"image/*\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".webp\"],\n            }}\n            maxFiles={5}\n            maxSize={5 * 1024 * 1024} // 5MB\n            onDrop={(acceptedFiles) => setFiles(acceptedFiles)}\n          >\n            <DropzoneEmptyState />\n            <DropzoneContent />\n          </Dropzone>\n          {files.length > 0 && (\n            <div className=\"text-sm text-muted-foreground\">\n              {files.length} file{files.length > 1 ? \"s\" : \"\"} selected\n            </div>\n          )}\n        </div>\n\n        {/* Submit Button */}\n        <div className=\"flex justify-end space-x-4\">\n          <Button type=\"button\" variant=\"outline\">\n            Updated Save as Draft\n          </Button>\n          <Button type=\"submit\">Updated Create Event</Button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],

package/public/r/frame-demo.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/examples/frame-demo.tsx",
-      "content": "import {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\"\n\nexport default function FrameDemo() {\n  return (\n    <Frame className=\"w-full\">\n      <FrameHeader>\n        <FrameTitle>Section header</FrameTitle>\n        <FrameDescription>Brief description about the section</FrameDescription>\n      </FrameHeader>\n      <FramePanel>\n        <h2 className=\"text-sm font-semibold\">Section title</h2>\n        <p className=\"text-sm text-muted-foreground\">Section description</p>\n      </FramePanel>\n    </Frame>\n  )\n}\n",
+      "content": "import {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\"\n\nexport default function FrameDemo() {\n  return (\n    <Frame className=\"w-full\">\n      <FrameHeader>\n        <FrameTitle>Updated Section header</FrameTitle>\n        <FrameDescription>\n          Updated Brief description about the section\n        </FrameDescription>\n      </FrameHeader>\n      <FramePanel>\n        <h2 className=\"text-sm font-semibold\">Updated Section title</h2>\n        <p className=\"text-sm text-muted-foreground\">\n          Updated Section description\n        </p>\n      </FramePanel>\n    </Frame>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

package/public/r/gantt-lanes.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/examples/gantt-lanes.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\n// @ts-ignore: No type declarations for 'lodash.groupby'\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttFeatureRow,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Confirmed\", color: \"#10B981\" },\n  { id: faker.string.uuid(), name: \"Pending\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Cancelled\", color: \"#EF4444\" },\n]\n\nconst guests = Array.from({ length: 8 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\n// Hotel rooms\nconst hotelRooms = Array.from({ length: 5 })\n  .fill(null)\n  .map((_, index) => ({\n    id: faker.string.uuid(),\n    name: `Room ${101 + index}`,\n  }))\n\n// Generate hotel reservations - multiple guests can book the same room for different periods\nconst hotelReservations = Array.from({ length: 12 })\n  .fill(null)\n  .map(() => {\n    const startDate = faker.date.future({ years: 0.3, refDate: new Date() })\n    const endDate = faker.date.future({ years: 0.1, refDate: startDate })\n    const room = faker.helpers.arrayElement(hotelRooms)\n    const guest = faker.helpers.arrayElement(guests)\n\n    return {\n      id: faker.string.uuid(),\n      name: `${guest.name} - ${faker.helpers.arrayElement([\"Business Trip\", \"Vacation\", \"Conference\", \"Weekend Getaway\"])}`,\n      startAt: startDate,\n      endAt: endDate,\n      status: faker.helpers.arrayElement(statuses),\n      lane: room.id, // This groups reservations by room\n      // Store additional data that's not part of core GanttFeature\n      metadata: {\n        guest,\n        room,\n        group: { name: \"Hotel Reservations\" },\n      },\n    }\n  })\n\nconst exampleMarkers = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.future({ years: 0.2, refDate: new Date() }),\n    label: faker.helpers.arrayElement([\n      \"Holiday Period\",\n      \"Conference Week\",\n      \"Peak Season\",\n    ]),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n    ]),\n  }))\n\nconst Example = () => {\n  const [reservations, setReservations] = useState(hotelReservations)\n\n  // Group reservations by room (lane), then by group\n  const groupedReservations = groupBy(reservations, \"metadata.group.name\")\n  const roomGroupedReservations = Object.fromEntries(\n    Object.entries(groupedReservations).map(\n      ([groupName, groupReservations]) => [\n        groupName,\n        groupBy(groupReservations, \"lane\"),\n      ]\n    )\n  )\n\n  const handleViewReservation = (id: string) =>\n    console.log(`Reservation selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveReservation = (id: string) =>\n    setReservations((prev) =>\n      prev.filter((reservation) => reservation.id !== id)\n    )\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveReservation = (\n    id: string,\n    startAt: Date,\n    endAt: Date | null\n  ) => {\n    if (!endAt) {\n      return\n    }\n\n    setReservations((prev) =>\n      prev.map((reservation) =>\n        reservation.id === id ? { ...reservation, startAt, endAt } : reservation\n      )\n    )\n\n    console.log(`Move reservation: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddReservation = (date: Date) =>\n    console.log(`Add reservation: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"border\"\n      onAddItem={handleAddReservation}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttSidebar>\n        {Object.entries(roomGroupedReservations).map(\n          ([groupName, roomReservations]) => (\n            <GanttSidebarGroup key={groupName} name={groupName}>\n              {Object.entries(roomReservations).map(\n                ([roomId, roomReservationList]) => {\n                  const room = hotelRooms.find((r) => r.id === roomId)\n                  // Create a representative feature for the sidebar\n                  const representativeReservation = {\n                    id: roomId,\n                    name: room?.name || \"Unknown Room\",\n                    startAt: new Date(\n                      Math.min(\n                        ...roomReservationList.map((r) => r.startAt.getTime())\n                      )\n                    ),\n                    endAt: new Date(\n                      Math.max(\n                        ...roomReservationList.map((r) => r.endAt.getTime())\n                      )\n                    ),\n                    status: roomReservationList[0].status,\n                  }\n\n                  return (\n                    <GanttSidebarItem\n                      feature={representativeReservation}\n                      key={roomId}\n                      onSelectItem={() => handleViewReservation(roomId)}\n                    />\n                  )\n                }\n              )}\n            </GanttSidebarGroup>\n          )\n        )}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(roomGroupedReservations).map(\n            ([groupName, roomReservations]) => (\n              <GanttFeatureListGroup key={groupName}>\n                {Object.entries(roomReservations).map(\n                  ([roomId, roomReservationList]) => (\n                    <div key={roomId}>\n                      <GanttFeatureRow\n                        features={roomReservationList}\n                        onMove={handleMoveReservation}\n                      >\n                        {(reservation) => (\n                          <ContextMenu>\n                            <ContextMenuTrigger asChild>\n                              <div className=\"flex w-full items-center gap-2\">\n                                <p className=\"flex-1 truncate text-xs\">\n                                  {reservation.name}\n                                </p>\n                                {(reservation as any).metadata?.guest && (\n                                  <Avatar className=\"h-4 w-4\">\n                                    <AvatarImage\n                                      src={\n                                        (reservation as any).metadata.guest\n                                          .image\n                                      }\n                                    />\n                                    <AvatarFallback>\n                                      {(\n                                        reservation as any\n                                      ).metadata.guest.name?.slice(0, 2)}\n                                    </AvatarFallback>\n                                  </Avatar>\n                                )}\n                              </div>\n                            </ContextMenuTrigger>\n                            <ContextMenuContent>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2\"\n                                onClick={() =>\n                                  handleViewReservation(reservation.id)\n                                }\n                              >\n                                <EyeIcon\n                                  className=\"text-muted-foreground\"\n                                  size={16}\n                                />\n                                View reservation\n                              </ContextMenuItem>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2\"\n                                onClick={() => handleCopyLink(reservation.id)}\n                              >\n                                <LinkIcon\n                                  className=\"text-muted-foreground\"\n                                  size={16}\n                                />\n                                Copy link\n                              </ContextMenuItem>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2 text-destructive\"\n                                onClick={() =>\n                                  handleRemoveReservation(reservation.id)\n                                }\n                              >\n                                <TrashIcon size={16} />\n                                Cancel reservation\n                              </ContextMenuItem>\n                            </ContextMenuContent>\n                          </ContextMenu>\n                        )}\n                      </GanttFeatureRow>\n                    </div>\n                  )\n                )}\n              </GanttFeatureListGroup>\n            )\n          )}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { faker } from \"@faker-js/faker\"\n// @ts-ignore: No type declarations for 'lodash.groupby'\nimport groupBy from \"lodash.groupby\"\nimport { EyeIcon, LinkIcon, TrashIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n  ContextMenu,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nimport {\n  GanttCreateMarkerTrigger,\n  GanttFeatureList,\n  GanttFeatureListGroup,\n  GanttFeatureRow,\n  GanttHeader,\n  GanttMarker,\n  GanttProvider,\n  GanttSidebar,\n  GanttSidebarGroup,\n  GanttSidebarItem,\n  GanttTimeline,\n  GanttToday,\n} from \"../../../../../packages/gantt\"\n\n// Seed faker to ensure consistent data between server and client\nfaker.seed(123)\n\nconst capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)\n\nconst statuses = [\n  { id: faker.string.uuid(), name: \"Updated Confirmed\", color: \"#10B981\" },\n  { id: faker.string.uuid(), name: \"Updated Pending\", color: \"#F59E0B\" },\n  { id: faker.string.uuid(), name: \"Updated Cancelled\", color: \"#EF4444\" },\n]\n\nconst guests = Array.from({ length: 8 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    name: faker.person.fullName(),\n    image: faker.image.avatar(),\n  }))\n\n// Hotel rooms\nconst hotelRooms = Array.from({ length: 5 })\n  .fill(null)\n  .map((_, index) => ({\n    id: faker.string.uuid(),\n    name: `Room ${101 + index}`,\n  }))\n\n// Generate hotel reservations - multiple guests can book the same room for different periods\nconst hotelReservations = Array.from({ length: 12 })\n  .fill(null)\n  .map(() => {\n    const startDate = faker.date.future({ years: 0.3, refDate: new Date() })\n    const endDate = faker.date.future({ years: 0.1, refDate: startDate })\n    const room = faker.helpers.arrayElement(hotelRooms)\n    const guest = faker.helpers.arrayElement(guests)\n\n    return {\n      id: faker.string.uuid(),\n      name: `${guest.name} - ${faker.helpers.arrayElement([\"Business Trip\", \"Vacation\", \"Conference\", \"Weekend Getaway\"])}`,\n      startAt: startDate,\n      endAt: endDate,\n      status: faker.helpers.arrayElement(statuses),\n      lane: room.id, // This groups reservations by room\n      // Store additional data that's not part of core GanttFeature\n      metadata: {\n        guest,\n        room,\n        group: { name: \"Updated Hotel Reservations\" },\n      },\n    }\n  })\n\nconst exampleMarkers = Array.from({ length: 3 })\n  .fill(null)\n  .map(() => ({\n    id: faker.string.uuid(),\n    date: faker.date.future({ years: 0.2, refDate: new Date() }),\n    label: faker.helpers.arrayElement([\n      \"Holiday Period\",\n      \"Conference Week\",\n      \"Peak Season\",\n    ]),\n    className: faker.helpers.arrayElement([\n      \"bg-blue-100 text-blue-900\",\n      \"bg-green-100 text-green-900\",\n      \"bg-purple-100 text-purple-900\",\n    ]),\n  }))\n\nconst Example = () => {\n  const [reservations, setReservations] = useState(hotelReservations)\n\n  // Group reservations by room (lane), then by group\n  const groupedReservations = groupBy(reservations, \"metadata.group.name\")\n  const roomGroupedReservations = Object.fromEntries(\n    Object.entries(groupedReservations).map(\n      ([groupName, groupReservations]) => [\n        groupName,\n        groupBy(groupReservations, \"lane\"),\n      ]\n    )\n  )\n\n  const handleViewReservation = (id: string) =>\n    console.log(`Reservation selected: ${id}`)\n\n  const handleCopyLink = (id: string) => console.log(`Copy link: ${id}`)\n\n  const handleRemoveReservation = (id: string) =>\n    setReservations((prev) =>\n      prev.filter((reservation) => reservation.id !== id)\n    )\n\n  const handleRemoveMarker = (id: string) => console.log(`Remove marker: ${id}`)\n\n  const handleCreateMarker = (date: Date) =>\n    console.log(`Create marker: ${date.toISOString()}`)\n\n  const handleMoveReservation = (\n    id: string,\n    startAt: Date,\n    endAt: Date | null\n  ) => {\n    if (!endAt) {\n      return\n    }\n\n    setReservations((prev) =>\n      prev.map((reservation) =>\n        reservation.id === id ? { ...reservation, startAt, endAt } : reservation\n      )\n    )\n\n    console.log(`Move reservation: ${id} from ${startAt} to ${endAt}`)\n  }\n\n  const handleAddReservation = (date: Date) =>\n    console.log(`Add reservation: ${date.toISOString()}`)\n\n  return (\n    <GanttProvider\n      className=\"border\"\n      onAddItem={handleAddReservation}\n      range=\"monthly\"\n      zoom={100}\n    >\n      <GanttSidebar>\n        {Object.entries(roomGroupedReservations).map(\n          ([groupName, roomReservations]) => (\n            <GanttSidebarGroup key={groupName} name={groupName}>\n              {Object.entries(roomReservations).map(\n                ([roomId, roomReservationList]) => {\n                  const room = hotelRooms.find((r) => r.id === roomId)\n                  // Create a representative feature for the sidebar\n                  const representativeReservation = {\n                    id: roomId,\n                    name: room?.name || \"Unknown Room\",\n                    startAt: new Date(\n                      Math.min(\n                        ...roomReservationList.map((r) => r.startAt.getTime())\n                      )\n                    ),\n                    endAt: new Date(\n                      Math.max(\n                        ...roomReservationList.map((r) => r.endAt.getTime())\n                      )\n                    ),\n                    status: roomReservationList[0].status,\n                  }\n\n                  return (\n                    <GanttSidebarItem\n                      feature={representativeReservation}\n                      key={roomId}\n                      onSelectItem={() => handleViewReservation(roomId)}\n                    />\n                  )\n                }\n              )}\n            </GanttSidebarGroup>\n          )\n        )}\n      </GanttSidebar>\n      <GanttTimeline>\n        <GanttHeader />\n        <GanttFeatureList>\n          {Object.entries(roomGroupedReservations).map(\n            ([groupName, roomReservations]) => (\n              <GanttFeatureListGroup key={groupName}>\n                {Object.entries(roomReservations).map(\n                  ([roomId, roomReservationList]) => (\n                    <div key={roomId}>\n                      <GanttFeatureRow\n                        features={roomReservationList}\n                        onMove={handleMoveReservation}\n                      >\n                        {(reservation) => (\n                          <ContextMenu>\n                            <ContextMenuTrigger asChild>\n                              <div className=\"flex w-full items-center gap-2\">\n                                <p className=\"flex-1 truncate text-xs\">\n                                  {reservation.name}\n                                </p>\n                                {(reservation as any).metadata?.guest && (\n                                  <Avatar className=\"h-4 w-4\">\n                                    <AvatarImage\n                                      src={\n                                        (reservation as any).metadata.guest\n                                          .image\n                                      }\n                                    />\n                                    <AvatarFallback>\n                                      {(\n                                        reservation as any\n                                      ).metadata.guest.name?.slice(0, 2)}\n                                    </AvatarFallback>\n                                  </Avatar>\n                                )}\n                              </div>\n                            </ContextMenuTrigger>\n                            <ContextMenuContent>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2\"\n                                onClick={() =>\n                                  handleViewReservation(reservation.id)\n                                }\n                              >\n                                <EyeIcon\n                                  className=\"text-muted-foreground\"\n                                  size={16}\n                                />\n                                Updated View reservation\n                              </ContextMenuItem>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2\"\n                                onClick={() => handleCopyLink(reservation.id)}\n                              >\n                                <LinkIcon\n                                  className=\"text-muted-foreground\"\n                                  size={16}\n                                />\n                                Updated Copy link\n                              </ContextMenuItem>\n                              <ContextMenuItem\n                                className=\"flex items-center gap-2 text-destructive\"\n                                onClick={() =>\n                                  handleRemoveReservation(reservation.id)\n                                }\n                              >\n                                <TrashIcon size={16} />\n                                Updated Cancel reservation\n                              </ContextMenuItem>\n                            </ContextMenuContent>\n                          </ContextMenu>\n                        )}\n                      </GanttFeatureRow>\n                    </div>\n                  )\n                )}\n              </GanttFeatureListGroup>\n            )\n          )}\n        </GanttFeatureList>\n        {exampleMarkers.map((marker) => (\n          <GanttMarker\n            key={marker.id}\n            {...marker}\n            onRemove={handleRemoveMarker}\n          />\n        ))}\n        <GanttToday />\n        <GanttCreateMarkerTrigger onCreateMarker={handleCreateMarker} />\n      </GanttTimeline>\n    </GanttProvider>\n  )\n}\n\nexport default Example\n",
       "type": "registry:example"
     }
   ],