{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browse-folder-shadcnui",
  "type": "registry:component",
  "title": "Browse Folder",
  "description": "Folder browser with animated tabs and content",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/browse-folder.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { motion } from \"framer-motion\";\nimport { ChevronRight, Folder } from \"lucide-react\";\nimport type React from \"react\";\nimport { useState } from \"react\";\n\ninterface FolderItem {\n  name: string;\n  content: React.ReactNode;\n}\n\ninterface FolderBrowserProps {\n  folders?: FolderItem[];\n  initialFolder?: string;\n}\n\nexport function FolderBrowser({\n  folders = [],\n  initialFolder,\n}: FolderBrowserProps) {\n  const [activeTab, setActiveTab] = useState(() => {\n    if (initialFolder) return initialFolder;\n    if (folders && folders.length > 0 && folders[0]?.name) {\n      return folders[0].name;\n    }\n    return \"\";\n  });\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4 }}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n      role=\"region\"\n      aria-label=\"Folder browser\"\n    >\n      {/* Gradient overlay */}\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      {/* Content */}\n      <div className=\"relative\">\n        <Tabs value={activeTab} onValueChange={setActiveTab} className=\"w-full\">\n          <TabsList className=\"relative flex h-10 w-full items-end justify-start overflow-x-auto overflow-y-hidden border-b border-border/40 bg-transparent p-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n            {folders?.map((folder) => (\n              <TabsTrigger\n                key={folder.name}\n                value={folder.name}\n                className=\"group/trigger relative flex h-10 flex-shrink-0 items-center gap-2 px-3 text-xs font-medium text-foreground/70 transition-all sm:px-4 sm:text-sm data-[state=active]:h-[calc(2.5rem+1px)] data-[state=active]:rounded-t-lg data-[state=active]:border data-[state=active]:border-border/40 data-[state=active]:border-b-transparent data-[state=active]:bg-background/60 data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground\"\n              >\n                <Folder\n                  className=\"h-4 w-4 text-foreground/40 group-hover/trigger:text-foreground/70\"\n                  aria-hidden=\"true\"\n                />\n                {folder.name}\n                <ChevronRight\n                  className=\"h-4 w-4 text-foreground/40 opacity-0 transition-opacity group-hover/trigger:opacity-100\"\n                  aria-hidden=\"true\"\n                />\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {folders?.map((folder) => (\n            <TabsContent\n              key={folder.name}\n              value={folder.name}\n              className=\"p-6\"\n              role=\"tabpanel\"\n              aria-labelledby={`tab-${folder.name}`}\n            >\n              <motion.div\n                initial={{ opacity: 0, y: 10 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"space-y-4\"\n              >\n                <div className=\"flex items-center justify-between\">\n                  <h3 className=\"text-2xl font-semibold tracking-tight text-foreground\">\n                    {folder.name} Contents\n                  </h3>\n                  <Badge\n                    variant=\"outline\"\n                    className=\"rounded-full border-border/50 bg-background/55 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n                  >\n                    {folder.name.split(\" \").pop()}\n                  </Badge>\n                </div>\n                <div className=\"text-foreground/70\">{folder.content}</div>\n                <Button\n                  variant=\"default\"\n                  className=\"gap-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90\"\n                  aria-label={`Explore ${folder.name}`}\n                >\n                  Explore More\n                  <ChevronRight className=\"h-4 w-4\" aria-hidden=\"true\" />\n                </Button>\n              </motion.div>\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </motion.div>\n  );\n}\n\n// Example usage (remove if not needed, this is for demonstration)\nexport const BrowseFolder = () => {\n  const sampleFolders: FolderItem[] = [\n    {\n      name: \"Documents\",\n      content: (\n        <ul className=\"list-disc space-y-2 pl-4\">\n          <li>Report.pdf</li>\n          <li>Notes.txt</li>\n          <li>Spreadsheet.xlsx</li>\n        </ul>\n      ),\n    },\n    {\n      name: \"Images\",\n      content: (\n        <ul className=\"list-disc space-y-2 pl-4\">\n          <li>Photo1.jpg</li>\n          <li>Photo2.png</li>\n          <li>Graphic.svg</li>\n        </ul>\n      ),\n    },\n    {\n      name: \"Projects\",\n      content: (\n        <ul className=\"list-disc space-y-2 pl-4\">\n          <li>App.zip</li>\n          <li>Design.fig</li>\n          <li>Code.ts</li>\n        </ul>\n      ),\n    },\n  ];\n\n  return <FolderBrowser folders={sampleFolders} initialFolder=\"Documents\" />;\n};\n",
      "type": "registry:component",
      "target": "components/uitripled/browse-folder-shadcnui.tsx"
    }
  ]
}