{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browse-folder-baseui",
  "type": "registry:component",
  "title": "Browse Folder",
  "description": "Folder browser with animated tabs and content (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/browse-folder-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\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 FolderBrowserBaseuiProps {\n  folders?: FolderItem[];\n  initialFolder?: string;\n}\n\nexport function FolderBrowserBaseui({\n  folders = [],\n  initialFolder,\n}: FolderBrowserBaseuiProps) {\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  const activeFolder = folders.find((f) => f.name === activeTab);\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 -z-10 inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n      {/* Content */}\n      <div className=\"relative\">\n        {/* Tab List */}\n        <div\n          role=\"tablist\"\n          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        >\n          {folders?.map((folder) => (\n            <button\n              key={folder.name}\n              role=\"tab\"\n              type=\"button\"\n              aria-selected={activeTab === folder.name}\n              onClick={() => setActiveTab(folder.name)}\n              className={`group/trigger relative flex h-10 flex-shrink-0 items-center gap-2 px-3 text-xs font-medium transition-all sm:px-4 sm:text-sm hover:text-foreground ${\n                activeTab === folder.name\n                  ? \"h-[calc(2.5rem+1px)] rounded-t-lg border border-border/40 border-b-transparent bg-background/60 text-foreground shadow-sm\"\n                  : \"text-foreground/70\"\n              }`}\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            </button>\n          ))}\n        </div>\n\n        {/* Tab Panel */}\n        {activeFolder && (\n          <div role=\"tabpanel\" className=\"p-6\">\n            <motion.div\n              key={activeFolder.name}\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                  {activeFolder.name} Contents\n                </h3>\n                <span className=\"inline-flex items-center rounded-full border border-border/50 bg-background/55 px-3 py-1 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\">\n                  {activeFolder.name.split(\" \").pop()}\n                </span>\n              </div>\n              <div className=\"text-foreground/70\">{activeFolder.content}</div>\n              <Button\n                className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n                aria-label={`Explore ${activeFolder.name}`}\n              >\n                Explore More\n                <ChevronRight className=\"h-4 w-4\" aria-hidden=\"true\" />\n              </Button>\n            </motion.div>\n          </div>\n        )}\n      </div>\n    </motion.div>\n  );\n}\n\n// Example usage\nexport const BrowseFolderBaseui = () => {\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 (\n    <FolderBrowserBaseui folders={sampleFolders} initialFolder=\"Documents\" />\n  );\n};\n",
      "type": "registry:component",
      "target": "components/uitripled/browse-folder-baseui.tsx"
    }
  ]
}