{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "overflow-tabs",
  "dependencies": [
    "react-aria-components",
    "lucide-react"
  ],
  "registryDependencies": [
    "@seamless/utils",
    "@seamless/dropdown-menu"
  ],
  "files": [
    {
      "path": "src/components/ui/overflow-tabs.tsx",
      "content": "import { ChevronDownIcon } from \"lucide-react\"\nimport { Button as ButtonPrimitive } from \"react-aria-components\"\n\nimport { cn, type Styled } from \"@/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\ntype OverflowTabItem = {\n  id: string\n  label: string\n}\n\ntype OverflowTabsProps = {\n  items: OverflowTabItem[]\n  selectedId: string\n  onSelect: (id: string) => void\n  /** CONSTRAINT: the strip never wraps; growth goes to the overflow menu. */\n  maxVisible?: number\n  \"aria-label\": string\n  className?: string\n  /** Trailing slot after the overflow menu — compose with OverflowTabsAction. */\n  children?: React.ReactNode\n}\n\nconst pillClass =\n  \"inline-flex max-w-33 shrink-0 items-center gap-1 rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-[550] whitespace-nowrap text-ink-2 outline-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50 [&>span]:overflow-hidden [&>span]:text-ellipsis\"\n\nfunction OverflowTabs({\n  items,\n  selectedId,\n  onSelect,\n  maxVisible = 3,\n  \"aria-label\": ariaLabel,\n  className,\n  children,\n}: OverflowTabsProps) {\n  const selectedIndex = items.findIndex((d) => d.id === selectedId)\n  const visible = items.slice(0, maxVisible)\n  if (selectedIndex >= maxVisible) {\n    visible[maxVisible - 1] = items[selectedIndex]\n  }\n  const hidden = items.filter((d) => !visible.some((v) => v.id === d.id))\n\n  return (\n    <div\n      data-slot=\"overflow-tabs\"\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex min-w-0 flex-nowrap items-center gap-1 border-b border-border-soft bg-card px-2.5 py-2\",\n        className\n      )}\n    >\n      {visible.map((item) => (\n        <ButtonPrimitive\n          key={item.id}\n          data-slot=\"overflow-tab\"\n          aria-pressed={item.id === selectedId}\n          onPress={() => onSelect(item.id)}\n          className={cn(\n            pillClass,\n            item.id === selectedId &&\n              \"border-primary font-semibold text-primary-hover hover:bg-card\"\n          )}\n        >\n          <span>{item.label}</span>\n        </ButtonPrimitive>\n      ))}\n      {hidden.length > 0 && (\n        <DropdownMenuTrigger>\n          <ButtonPrimitive\n            data-slot=\"overflow-tabs-more\"\n            className={cn(pillClass, \"border-dashed text-muted-foreground\")}\n          >\n            <span>+{hidden.length} more</span>\n            <ChevronDownIcon className=\"size-3 shrink-0\" />\n          </ButtonPrimitive>\n          <DropdownMenu\n            className=\"w-auto min-w-44\"\n            aria-label={`More: ${ariaLabel}`}\n            selectionMode=\"single\"\n            selectedKeys={[selectedId]}\n            onAction={(key) => onSelect(String(key))}\n          >\n            {hidden.map((item) => (\n              <DropdownMenuItem key={item.id} id={item.id}>\n                {item.label}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenu>\n        </DropdownMenuTrigger>\n      )}\n      {children}\n    </div>\n  )\n}\n\ntype OverflowTabsActionProps = Styled<\n  React.ComponentProps<typeof ButtonPrimitive>\n>\n\nfunction OverflowTabsAction({ className, ...props }: OverflowTabsActionProps) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"overflow-tabs-action\"\n      className={cn(\n        pillClass,\n        \"border-dashed text-muted-foreground hover:border-primary hover:bg-card hover:text-primary-hover [&_svg]:size-3 [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  OverflowTabs,\n  OverflowTabsAction,\n  type OverflowTabItem,\n  type OverflowTabsActionProps,\n  type OverflowTabsProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}