{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-manager",
  "title": "File Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/file-manager/FileManager.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport {\n  Download,\n  FileArchive,\n  FileImage,\n  FileSpreadsheet,\n  FileText,\n  FileVideo,\n  Folder,\n  LayoutGrid,\n  List,\n  MoreVertical,\n  Pencil,\n  Search,\n  Share2,\n  Trash2,\n  Upload,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\ntype FileKind = 'pdf' | 'image' | 'sheet' | 'video' | 'archive'\n\ninterface FolderItem {\n  id: string\n  name: string\n  count: number\n}\n\ninterface FileItem {\n  id: string\n  name: string\n  kind: FileKind\n  size: string\n  modified: string\n}\n\nexport interface FileManagerProps {\n  variant?: 'grid' | 'list'\n  className?: string\n}\n\nconst folders: FolderItem[] = [\n  { id: 'folder-design-assets', name: 'Design Assets', count: 24 },\n  { id: 'folder-client-files', name: 'Client Files', count: 12 },\n  { id: 'folder-brand-kit', name: 'Brand Kit', count: 8 },\n  { id: 'folder-archive', name: 'Archive', count: 56 },\n]\n\nconst files: FileItem[] = [\n  { id: 'file-brand-guidelines', name: 'brand-guidelines.pdf', kind: 'pdf', size: '4.2 MB', modified: 'Mar 14, 2026' },\n  { id: 'file-homepage-hero', name: 'homepage-hero.png', kind: 'image', size: '2.8 MB', modified: 'Mar 12, 2026' },\n  { id: 'file-logo-final', name: 'logo-final.svg', kind: 'image', size: '48 KB', modified: 'Mar 10, 2026' },\n  { id: 'file-pricing-model', name: 'pricing-model.xlsx', kind: 'sheet', size: '316 KB', modified: 'Mar 8, 2026' },\n  { id: 'file-launch-video', name: 'launch-video.mp4', kind: 'video', size: '184 MB', modified: 'Mar 5, 2026' },\n  { id: 'file-app-iconset', name: 'app-iconset.zip', kind: 'archive', size: '12.4 MB', modified: 'Feb 27, 2026' },\n]\n\nconst fileKindIcons: Record<FileKind, typeof FileText> = {\n  pdf: FileText,\n  image: FileImage,\n  sheet: FileSpreadsheet,\n  video: FileVideo,\n  archive: FileArchive,\n}\n\nexport function FileManager({ variant = 'grid', className }: FileManagerProps) {\n  const [view, setView] = useState<'grid' | 'list'>(variant)\n  const rows = [...folders.map((f) => ({ ...f, isFolder: true })), ...files.map((f) => ({ ...f, isFolder: false }))]\n\n  return (\n    <div data-slot=\"file-manager\" className={cn('w-full', className)}>\n      <div className=\"bg-card text-card-foreground rounded-xl border shadow-xs\">\n        <div className=\"flex flex-wrap items-center gap-3 border-b p-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink href=\"#\" className=\"inline-flex min-h-6 items-center\">\n                  Home\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink href=\"#\" className=\"inline-flex min-h-6 items-center\">\n                  Documents\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Design</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n\n          <div className=\"relative ml-auto w-full max-w-56 sm:w-auto\">\n            <Search\n              aria-hidden=\"true\"\n              className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\"\n            />\n            <Input type=\"search\" placeholder=\"Search files…\" className=\"pl-8\" />\n          </div>\n\n          <ToggleGroup\n            type=\"single\"\n            size=\"sm\"\n            value={view}\n            className=\"bg-muted items-center gap-0.5 rounded-md p-0.5\"\n            aria-label=\"View mode\"\n            onValueChange={(v) => v && setView(v as 'grid' | 'list')}\n          >\n            <ToggleGroupItem\n              value=\"grid\"\n              className=\"data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm\"\n              title=\"Grid view\"\n              aria-label=\"Grid view\"\n            >\n              <LayoutGrid aria-hidden=\"true\" className=\"size-4\" />\n            </ToggleGroupItem>\n            <ToggleGroupItem\n              value=\"list\"\n              className=\"data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm\"\n              title=\"List view\"\n              aria-label=\"List view\"\n            >\n              <List aria-hidden=\"true\" className=\"size-4\" />\n            </ToggleGroupItem>\n          </ToggleGroup>\n\n          <Button size=\"sm\">\n            <Upload aria-hidden=\"true\" className=\"size-4\" />\n            Upload\n          </Button>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 border-b px-4 py-3\">\n          <Progress value={36.4} className=\"h-1.5 min-w-40 flex-1 sm:max-w-xs\" aria-label=\"Storage used\" />\n          <p className=\"text-muted-foreground text-xs\">18.2 GB of 50 GB used</p>\n        </div>\n\n        {view === 'grid' ? (\n          <div className=\"grid grid-cols-2 gap-3 p-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {folders.map((folder) => (\n              <button\n                key={folder.id}\n                type=\"button\"\n                className=\"hover:bg-muted/50 focus-visible:ring-ring flex flex-col items-start gap-3 rounded-lg border p-3 text-left shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <span className=\"bg-warning/10 text-warning grid size-9 place-items-center rounded-md\">\n                  <Folder className=\"size-5\" />\n                </span>\n                <span className=\"min-w-0\">\n                  <span className=\"block truncate text-sm font-medium\">{folder.name}</span>\n                  <span className=\"text-muted-foreground block text-xs\">{folder.count} items</span>\n                </span>\n              </button>\n            ))}\n\n            {files.map((file) => {\n              const Icon = fileKindIcons[file.kind]\n              return (\n                <button\n                  key={file.id}\n                  type=\"button\"\n                  className=\"hover:bg-muted/50 focus-visible:ring-ring group flex flex-col items-start gap-3 rounded-lg border p-3 text-left shadow-xs transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <span className=\"bg-muted text-muted-foreground group-hover:bg-background grid size-9 place-items-center rounded-md transition-colors\">\n                    <Icon className=\"size-5\" />\n                  </span>\n                  <span className=\"w-full min-w-0\">\n                    <span className=\"block truncate text-sm font-medium\">{file.name}</span>\n                    <span className=\"text-muted-foreground block text-xs\">\n                      {file.size} · {file.modified}\n                    </span>\n                  </span>\n                </button>\n              )\n            })}\n          </div>\n        ) : (\n          <div role=\"table\" aria-label=\"Files and folders\">\n            <div role=\"row\" className=\"text-muted-foreground hidden border-b px-4 py-2 text-xs sm:flex\">\n              <span role=\"columnheader\" className=\"flex-1 pl-9\">\n                Name\n              </span>\n              <span role=\"columnheader\" className=\"w-20 text-right\">\n                Size\n              </span>\n              <span role=\"columnheader\" className=\"w-28 text-right\">\n                Modified\n              </span>\n              <span className=\"w-9\" />\n            </div>\n            <ul role=\"rowgroup\" className=\"divide-y\">\n              {rows.map((item) => {\n                const Icon = item.isFolder ? Folder : fileKindIcons[(item as FileItem).kind]\n                return (\n                  <li\n                    key={item.id}\n                    role=\"row\"\n                    className=\"hover:bg-muted/50 flex items-center gap-3 px-4 py-2.5 transition-colors\"\n                  >\n                    <span\n                      className={cn(\n                        'grid size-6 shrink-0 place-items-center rounded-md',\n                        item.isFolder ? 'bg-warning/10 text-warning' : 'bg-muted text-muted-foreground',\n                      )}\n                    >\n                      <Icon className=\"size-4\" />\n                    </span>\n                    <span role=\"cell\" className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n                      {item.name}\n                    </span>\n                    <span\n                      role=\"cell\"\n                      className=\"text-muted-foreground hidden w-20 shrink-0 text-right text-xs sm:block\"\n                    >\n                      {item.isFolder ? `${(item as FolderItem).count} items` : (item as FileItem).size}\n                    </span>\n                    <span\n                      role=\"cell\"\n                      className=\"text-muted-foreground hidden w-28 shrink-0 text-right text-xs md:block\"\n                    >\n                      {item.isFolder ? '—' : (item as FileItem).modified}\n                    </span>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"shrink-0\"\n                          aria-label={`Actions for ${item.name}`}\n                        >\n                          <MoreVertical className=\"size-4\" />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\">\n                        <DropdownMenuItem>\n                          <Download className=\"size-4\" />\n                          Download\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Pencil className=\"size-4\" />\n                          Rename\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share2 className=\"size-4\" />\n                          Share link\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem variant=\"destructive\">\n                          <Trash2 className=\"size-4\" />\n                          Delete\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </li>\n                )\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FileManager.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/breadcrumb.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/toggle-group.json"
  ],
  "description": "Storage/files page with breadcrumbs, search, grid/list view toggle, upload action, and a storage meter over hardcoded folders and files.",
  "categories": [
    "media",
    "app"
  ]
}