{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-card",
  "title": "Bento Card",
  "description": "An interactive bento card with animated tabs and workspace preview.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/bento-card.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useMemo } from \"react\";\nimport { motion, AnimatePresence, LayoutGroup } from \"motion/react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n  DashboardSquare01Icon,\n  UserGroupIcon,\n  Message01Icon,\n  Folder02Icon,\n  Add01Icon,\n  CircleArrowUpRight02Icon,\n  Search01Icon,\n  BarChartIcon,\n  Tick01Icon,\n  Settings02Icon,\n  InformationCircleIcon,\n  DatabaseIcon,\n  Mail01Icon,\n  LeftToRightListDashIcon,\n  UserIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabConfig {\n  id: string;\n  label: string;\n  icon: any;\n  badge?: string;\n  header: string;\n  description: string;\n}\n\nconst TABS: TabConfig[] = [\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    icon: DashboardSquare01Icon,\n    header: \"Project Overview\",\n    description: \"Daily summary of your team performance.\",\n  },\n  {\n    id: \"management\",\n    label: \"Management\",\n    icon: UserGroupIcon,\n    header: \"Team Management\",\n    description: \"Manage roles and user permissions.\",\n    badge: \"10\",\n  },\n  {\n    id: \"threads\",\n    label: \"Threads\",\n    icon: Message01Icon,\n    header: \"Communications\",\n    description: \"High-priority team discussions.\",\n    badge: \"12\",\n  },\n  {\n    id: \"resources\",\n    label: \"Resources\",\n    icon: Folder02Icon,\n    header: \"System Assets\",\n    description: \"Shared documentation and media logs.\",\n  },\n];\n\nconst BentoCard = () => {\n  const [activeTab, setActiveTab] = useState(TABS[0]);\n\n  const content = useMemo(() => {\n    switch (activeTab.id) {\n      case \"dashboard\":\n        return <OverviewDashboard />;\n      case \"management\":\n        return <ManagementDashboard />;\n      case \"threads\":\n        return <ThreadsDashboard />;\n      case \"resources\":\n        return <ResourcesDashboard />;\n      default:\n        return null;\n    }\n  }, [activeTab.id]);\n\n  return (\n    <div className=\"flex items-center justify-center w-full antialiased\">\n      <div className=\"group relative w-full max-w-xl overflow-hidden rounded-3xl sm:rounded-4xl border bg-card shadow-2xl shadow-primary/5 transition-all duration-500 hover:shadow-primary/10 hover:-translate-y-1 m-0\">\n        <div className=\"p-4 sm:p-6 space-y-1.5 z-10 relative\">\n          <h2 className=\"text-xs text-muted-foreground uppercase \">\n            Project Dashboard\n          </h2>\n          <p className=\"text-lg sm:text-2xl text-foreground font-medium leading-snug max-w-[480px]\">\n            High-performance analytics and team collaboration tools in one\n            place.\n          </p>\n        </div>\n\n        <div className=\"relative w-full h-[260px] sm:h-[300px] overflow-hidden rounded-2xl sm:rounded-[2rem] \">\n          <div className=\"absolute top-16 left-16 w-full h-full bg-muted rounded-3xl border border-border/50  opacity-80\" />\n\n          <div className=\"absolute top-8 left-24 w-full h-full bg-background rounded-tl-3xl shadow-xl flex flex-col overflow-hidden ring-6 ring-border\">\n            <div className=\"px-5 py-4 rounded-tl-3xl border-b border-border/70 flex items-center relative backdrop-blur-sm\">\n              <div className=\"flex gap-1.5\">\n                <div className=\"w-2 h-2 rounded-full bg-muted-foreground/20\" />\n                <div className=\"w-2 h-2 rounded-full bg-muted-foreground/20\" />\n                <div className=\"w-2 h-2 rounded-full bg-muted-foreground/20\" />\n              </div>\n              <div className=\"absolute left-1/2 -translate-x-1/2 flex items-center gap-2\">\n                <span className=\"text-xs  text-muted-foreground/50  uppercase\">\n                  Workspace\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-1 overflow-hidden\">\n              <div className=\"w-36 border-r border-border/30 p-2 flex flex-col gap-1 pt-6 bg-muted/5\">\n                <LayoutGroup>\n                  {TABS.map((tab) => {\n                    const isActive = activeTab.id === tab.id;\n                    const Icon = tab.icon;\n\n                    return (\n                      <button\n                        key={tab.id}\n                        onClick={() => setActiveTab(tab)}\n                        className={cn(\n                          \"relative flex items-center gap-1.5 p-2 rounded-xl text-xs transition-colors cursor-pointer\",\n                          isActive\n                            ? \"text-foreground\"\n                            : \"text-muted-foreground hover:text-foreground\",\n                        )}\n                      >\n                        <HugeiconsIcon\n                          icon={Icon}\n                          size={14}\n                          className=\"z-20 shrink-0 relative\"\n                        />\n                        <span className=\"truncate z-20 relative font-medium\">\n                          {tab.label}\n                        </span>\n                        {tab.badge && (\n                          <span\n                            className={cn(\n                              \"ml-auto text-[8px] leading-none py-0.5 px-1 rounded-md tabular-nums transition-all z-20 relative\",\n                              isActive\n                                ? \"bg-primary/10 text-primary border border-primary/20\"\n                                : \"bg-muted text-muted-foreground border border-transparent\",\n                            )}\n                          >\n                            {tab.badge}\n                          </span>\n                        )}\n\n                        {isActive && (\n                          <motion.div\n                            layoutId=\"sidebar-pill\"\n                            className=\"absolute left-0 w-[2px] h-4 rounded-full bg-primary z-30 border border-primary/20\"\n                            transition={{\n                              type: \"spring\",\n                              bounce: 0.2,\n                              duration: 0.6,\n                            }}\n                          />\n                        )}\n                        {isActive && (\n                          <motion.div\n                            layoutId=\"backgroundIndicator\"\n                            className=\"absolute inset-0 rounded-lg bg-muted border border-border/40\"\n                            transition={{\n                              type: \"spring\",\n                              bounce: 0.2,\n                              duration: 0.6,\n                            }}\n                          />\n                        )}\n                      </button>\n                    );\n                  })}\n                </LayoutGroup>\n              </div>\n\n              <div className=\"flex-1 bg-background p-5 pt-6 flex flex-col gap-4 overflow-hidden relative\">\n                <header className=\"flex flex-col gap-0.5\">\n                  <h3 className=\"text-xs font-semibold text-foreground tracking-tight line-clamp-1 uppercase opacity-60\">\n                    {activeTab.header}\n                  </h3>\n                  <p className=\"text-[10px] text-muted-foreground font-normal leading-tight line-clamp-1\">\n                    {activeTab.description}\n                  </p>\n                </header>\n\n                <AnimatePresence mode=\"popLayout\" initial={false}>\n                  <motion.div\n                    key={activeTab.id}\n                    initial={{ opacity: 0, y: 8, filter: \"blur(4px)\" }}\n                    animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n                    exit={{ opacity: 0, y: -8, filter: \"blur(4px)\" }}\n                    transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}\n                    className=\"flex-1\"\n                  >\n                    {content}\n                  </motion.div>\n                </AnimatePresence>\n\n                <div className=\"absolute bottom-0 left-0 right-0 h-10 bg-linear-to-t from-background to-transparent pointer-none z-20\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default BentoCard;\n\nconst OverviewDashboard = () => (\n  <div className=\"flex flex-col gap-3 h-full\">\n    <div className=\"relative p-3.5 rounded-xl border border-border/40 bg-linear-to-br from-background to-muted/20 overflow-hidden\">\n      <div className=\"flex flex-col gap-2 relative z-10\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-[9px] font-medium text-muted-foreground\">\n            Team Performance\n          </span>\n          <HugeiconsIcon\n            icon={CircleArrowUpRight02Icon}\n            size={12}\n            className=\"text-primary\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-xl font-medium tracking-tight text-foreground\">\n            94.2%\n          </span>\n          <div className=\"w-full h-1 bg-muted rounded-full overflow-hidden mt-1\">\n            <motion.div\n              initial={{ width: 0 }}\n              animate={{ width: \"94.2%\" }}\n              className=\"h-full bg-primary rounded-full\"\n            />\n          </div>\n        </div>\n        <span className=\"text-[9px] text-muted-foreground\">\n          Score for Search & Delivery campaigns\n        </span>\n      </div>\n      <div className=\"absolute -right-2 -bottom-2 opacity-5 scale-150 rotate-12\">\n        <HugeiconsIcon icon={BarChartIcon} size={64} />\n      </div>\n    </div>\n\n    <div className=\"grid grid-cols-2 gap-2\">\n      <div className=\"p-3 rounded-xl border border-border/40 bg-background/50 flex items-center justify-between\">\n        <div className=\"flex flex-col\">\n          <span className=\"text-[10px] font-medium text-foreground\">1,070</span>\n          <span className=\"text-[8px] text-muted-foreground uppercase font-medium\">\n            Keywords\n          </span>\n        </div>\n        <HugeiconsIcon icon={Search01Icon} size={14} className=\"opacity-20\" />\n      </div>\n      <div className=\"p-3 rounded-xl border border-border/40 bg-background/50 flex items-center justify-between\">\n        <div className=\"flex flex-col\">\n          <span className=\"text-[10px] font-medium text-foreground\">2.3M</span>\n          <span className=\"text-[8px] text-muted-foreground uppercase font-medium\">\n            Credits\n          </span>\n        </div>\n        <HugeiconsIcon\n          icon={InformationCircleIcon}\n          size={14}\n          className=\"opacity-20\"\n        />\n      </div>\n    </div>\n  </div>\n);\n\nconst ManagementDashboard = () => (\n  <div className=\"flex flex-col h-full not-prose\">\n    <div className=\"rounded-xl border border-border/40 overflow-hidden flex flex-col h-full bg-background/50\">\n      <div className=\"bg-muted/30 px-3 py-2 border-b border-border/40 flex items-center justify-between\">\n        <span className=\"text-[9px] font-semibold text-muted-foreground uppercase tracking-wider\">\n          Active Users\n        </span>\n        <div className=\"flex items-center gap-1.5 px-1.5 py-0.5 rounded-md bg-background border border-border/40\">\n          <HugeiconsIcon\n            icon={Search01Icon}\n            size={10}\n            className=\"text-muted-foreground/50\"\n          />\n          <span className=\"text-[8px] text-muted-foreground font-medium\">\n            Search\n          </span>\n        </div>\n      </div>\n      <div className=\"p-1 flex flex-col gap-0.5\">\n        {[\n          {\n            name: \"Anthony Dionne\",\n            role: \"Pending admin approval\",\n            status: \"Waitlist\",\n            color: \"bg-amber-400\",\n          },\n          {\n            name: \"Nick Yahodin\",\n            role: \"Dealership group admin\",\n            status: \"Active\",\n            color: \"bg-emerald-400\",\n          },\n          {\n            name: \"Mujeeb Aimaq\",\n            role: \"Dealership group user\",\n            status: \"Active\",\n            color: \"bg-emerald-400\",\n          },\n        ].map((user, i) => (\n          <div\n            key={i}\n            className=\"flex items-center gap-3 p-2 rounded-lg hover:bg-muted/30 transition-colors group\"\n          >\n            <div className=\"w-6 h-6 rounded-full bg-muted border border-border/40 flex items-center justify-center relative\">\n              <HugeiconsIcon\n                icon={UserIcon}\n                size={10}\n                className=\"text-muted-foreground\"\n              />\n              <div\n                className={cn(\n                  \"absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full border border-background\",\n                  user.color,\n                )}\n              />\n            </div>\n            <div className=\"flex flex-col min-w-0 flex-1\">\n              <span className=\"text-[10px] font-medium text-foreground truncate\">\n                {user.name}\n              </span>\n              <span className=\"text-[8px] text-muted-foreground truncate\">\n                {user.role}\n              </span>\n            </div>\n            <div className=\"opacity-0 group-hover:opacity-100 transition-opacity\">\n              <HugeiconsIcon\n                icon={Settings02Icon}\n                size={12}\n                className=\"text-muted-foreground\"\n              />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nconst ThreadsDashboard = () => (\n  <div className=\"flex flex-col gap-3 h-full\">\n    <div className=\"grid grid-cols-2 gap-3\">\n      {[\n        {\n          title: \"Create a Page\",\n          desc: \"Build your project base.\",\n          icon: Folder02Icon,\n        },\n        {\n          title: \"Create a Task\",\n          desc: \"Organize with team.\",\n          icon: Tick01Icon,\n        },\n      ].map((card, i) => (\n        <div\n          key={i}\n          className=\"p-3.5 rounded-xl border border-border/40 bg-background/50 flex flex-col gap-3 relative overflow-hidden group\"\n        >\n          <div className=\"flex flex-col gap-1 z-10\">\n            <span className=\"text-[12px] font-medium text-foreground leading-tight\">\n              {card.title}\n            </span>\n            <span className=\"text-[9px] text-muted-foreground leading-tight\">\n              {card.desc}\n            </span>\n          </div>\n          <button className=\"w-fit flex items-center gap-1.5 px-2 py-1 rounded-md bg-foreground text-background text-[8px] font-semibold transition-transform active:scale-95 group-hover:bg-primary z-10\">\n            <HugeiconsIcon icon={Add01Icon} size={8} strokeWidth={3} />\n            Create\n          </button>\n        </div>\n      ))}\n    </div>\n\n    <div className=\"mt-auto p-3 rounded-xl bg-muted/20 border border-border/30 flex items-center justify-between\">\n      <div className=\"flex items-center gap-2\">\n        <div className=\"p-1 px-1.5 rounded-md bg-background border border-border/40\">\n          <HugeiconsIcon\n            icon={InformationCircleIcon}\n            size={10}\n            className=\"text-muted-foreground\"\n          />\n        </div>\n        <span className=\"text-[9px] text-muted-foreground font-medium\">\n          Pin a new item\n        </span>\n      </div>\n      <HugeiconsIcon\n        icon={Add01Icon}\n        size={12}\n        className=\"text-muted-foreground/50\"\n      />\n    </div>\n  </div>\n);\n\nconst ResourcesDashboard = () => (\n  <div className=\"flex flex-col gap-3 h-full overflow-hidden\">\n    <div className=\"flex-1 rounded-xl border border-border/40 flex flex-col bg-background/50 overflow-hidden\">\n      <div className=\"bg-muted/30 px-3 py-2 border-b border-border/40 flex items-center justify-between\">\n        <span className=\"text-[9px] font-semibold text-muted-foreground uppercase tracking-wider\">\n          Archives & Logs\n        </span>\n        <HugeiconsIcon\n          icon={DatabaseIcon}\n          size={12}\n          className=\"text-muted-foreground/30\"\n        />\n      </div>\n      <div className=\"flex-1 p-1 overflow-y-auto scrollbar-hide\">\n        {[\n          {\n            file: \"design_spec_v2.pdf\",\n            size: \"2.4 MB\",\n            type: \"PDF\",\n            icon: Mail01Icon,\n          },\n          {\n            file: \"q4_performance.xls\",\n            size: \"1.1 MB\",\n            type: \"XLS\",\n            icon: BarChartIcon,\n          },\n          {\n            file: \"branding_assets.zip\",\n            size: \"48 MB\",\n            type: \"ZIP\",\n            icon: Folder02Icon,\n          },\n          {\n            file: \"system_logs.json\",\n            size: \"4 KB\",\n            type: \"JSON\",\n            icon: Folder02Icon,\n          },\n        ].map((item, i) => (\n          <div\n            key={i}\n            className=\"flex items-center gap-2.5 p-2 rounded-lg hover:bg-muted/30 transition-colors cursor-pointer group\"\n          >\n            <div className=\"w-6 h-6 rounded-md bg-muted/50 border border-border/40 flex items-center justify-center text-muted-foreground/60 group-hover:text-primary group-hover:bg-primary/5 transition-colors\">\n              <HugeiconsIcon icon={item.icon} size={12} />\n            </div>\n            <div className=\"flex flex-col min-w-0 flex-1\">\n              <span className=\"text-[10px] font-medium text-foreground truncate\">\n                {item.file}\n              </span>\n              <span className=\"text-[8px] text-muted-foreground tabular-nums uppercase\">\n                {item.size} • {item.type}\n              </span>\n            </div>\n            <HugeiconsIcon\n              icon={CircleArrowUpRight02Icon}\n              size={10}\n              className=\"text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\"\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}