{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-expandable-tabs",
  "title": "Expandable Tabs Demo",
  "description": "Pill tab bar expanding into a floating profile/notifications/settings panel.",
  "registryDependencies": ["@soralabs/expandable-tabs"],
  "files": [
    {
      "path": "registry/demo/primitives/disclosure/expandable-tabs/index.tsx",
      "content": "\"use client\";\n\nimport {\n  BadgeCheck,\n  Brush,\n  CalendarClock,\n  ChartSpline,\n  ChevronRight,\n  ClipboardCheck,\n  CloudUpload,\n  FileText,\n  Gauge,\n  GitBranch,\n  Images,\n  Inbox,\n  type LucideIcon,\n  Megaphone,\n  MessageCircle,\n  PackageOpen,\n  RefreshCw,\n  Rocket,\n  Siren,\n  SwatchBook,\n  UploadCloud,\n  Users,\n  Webhook,\n  Workflow,\n} from \"lucide-react\";\nimport {\n  type ExpandableTab,\n  ExpandableTabs,\n} from \"@/components/sora-ui/disclosure/expandable-tabs\";\n\nfunction Row({ icon: Icon, label }: { icon: LucideIcon; label: string }) {\n  return (\n    <button\n      className=\"flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-foreground text-sm transition-colors hover:bg-muted\"\n      type=\"button\"\n    >\n      <Icon className=\"h-4 w-4 text-muted-foreground\" />\n      <span className=\"flex-1\">{label}</span>\n      <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n    </button>\n  );\n}\n\nfunction Menu({ rows }: { rows: { icon: LucideIcon; label: string }[] }) {\n  return (\n    <div className=\"flex w-68.5 flex-col gap-0.5\">\n      {rows.map((row) => (\n        <Row icon={row.icon} key={row.label} label={row.label} />\n      ))}\n    </div>\n  );\n}\n\nconst TABS: ExpandableTab[] = [\n  {\n    id: \"launch\",\n    label: \"Launch\",\n    icon: Rocket,\n    content: (\n      <Menu\n        rows={[\n          { icon: FileText, label: \"Release Brief\" },\n          { icon: ClipboardCheck, label: \"Launch Checklist\" },\n          { icon: Megaphone, label: \"Campaign Notes\" },\n          { icon: CalendarClock, label: \"Rollout Calendar\" },\n          { icon: CloudUpload, label: \"Ship Build\" },\n        ]}\n      />\n    ),\n  },\n  {\n    id: \"inbox\",\n    label: \"Inbox\",\n    icon: Inbox,\n    content: (\n      <Menu\n        rows={[\n          { icon: MessageCircle, label: \"Client Feedback\" },\n          { icon: Users, label: \"Team Requests\" },\n          { icon: BadgeCheck, label: \"Approval Notes\" },\n        ]}\n      />\n    ),\n  },\n  {\n    id: \"flows\",\n    label: \"Flows\",\n    icon: Workflow,\n    content: (\n      <Menu\n        rows={[\n          { icon: GitBranch, label: \"Trigger Map\" },\n          { icon: Webhook, label: \"Webhook Runs\" },\n          { icon: RefreshCw, label: \"Retry Queue\" },\n        ]}\n      />\n    ),\n  },\n  {\n    id: \"assets\",\n    label: \"Assets\",\n    icon: PackageOpen,\n    content: (\n      <Menu\n        rows={[\n          { icon: SwatchBook, label: \"Brand Kit\" },\n          { icon: Images, label: \"Mockup Library\" },\n          { icon: Brush, label: \"Design Tokens\" },\n          { icon: UploadCloud, label: \"Export Queue\" },\n        ]}\n      />\n    ),\n  },\n  {\n    id: \"status\",\n    label: \"Status\",\n    icon: ChartSpline,\n    content: (\n      <Menu\n        rows={[\n          { icon: Gauge, label: \"Activation\" },\n          { icon: ChartSpline, label: \"Conversion\" },\n          { icon: Siren, label: \"Incidents\" },\n        ]}\n      />\n    ),\n  },\n];\n\nexport default function ExpandableTabsExample() {\n  return (\n    <div className=\"flex min-h-88 w-full items-end justify-center bg-muted/50 p-8 dark:bg-muted/30\">\n      <ExpandableTabs\n        classNames={{\n          content: \"bg-card/90\",\n          toolbar: \"border border-border bg-card shadow-sm\",\n        }}\n        tabs={TABS}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/sora-ui/demo/disclosure/expandable-tabs.tsx"
    }
  ],
  "type": "registry:ui"
}