{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-tabs",
  "type": "registry:component",
  "title": "Scroll Tabs",
  "description": "Scrollable tab strip — the MUI scrollable-tabs use case without the Tabs coupling. Active tab centers itself; arrows and drag-to-scroll from scroll-menu.",
  "author": "asmyshlyaev177 <https://asmyshlyaev177.dev>",
  "dependencies": [
    "react-horizontal-scrolling-menu"
  ],
  "registryDependencies": [
    "https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json"
  ],
  "files": [
    {
      "path": "components/ui/scroll-tabs.tsx",
      "target": "components/ui/scroll-tabs.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { ScrollMenu, useScrollMenu } from '@/components/ui/scroll-menu';\nimport { cn } from '@/lib/utils';\n\ninterface ScrollTab {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  /** Extra classes for this one trigger. */\n  className?: string;\n}\n\n/**\n * Scrollable tab strip; the active tab centers itself on click and first\n * paint. Plain buttons with `aria-current`, not `role=\"tab\"` — a tablist\n * demands roving focus and tabpanel wiring this row does not own.\n */\nfunction ScrollTabs({\n  tabs,\n  value,\n  onValueChange,\n  className,\n  tabClassName,\n  ...props\n}: Omit<React.ComponentProps<typeof ScrollMenu>, 'children' | 'onInit'> & {\n  tabs: ScrollTab[];\n  value: string;\n  onValueChange: (value: string) => void;\n  /** Extra classes for every trigger — sizing, typography, radius. */\n  tabClassName?: string;\n}) {\n  return (\n    <ScrollMenu\n      className={cn('max-w-full', className)}\n      onInit={(api) => {\n        const active = api.getItemElementById(value);\n        if (active) api.scrollToItem(active, 'auto', 'center');\n      }}\n      {...props}\n    >\n      {tabs.map((tab) => (\n        <ScrollTabsTrigger\n          key={tab.value}\n          itemId={tab.value}\n          tab={tab}\n          active={tab.value === value}\n          onSelect={onValueChange}\n          className={tabClassName}\n        />\n      ))}\n    </ScrollMenu>\n  );\n}\n\nfunction ScrollTabsTrigger({\n  tab,\n  active,\n  onSelect,\n  className,\n}: {\n  /** Read by the menu to track visibility; same as tab.value. */\n  itemId: string;\n  tab: ScrollTab;\n  active: boolean;\n  onSelect: (value: string) => void;\n  className?: string;\n}) {\n  const api = useScrollMenu();\n\n  return (\n    <button\n      type=\"button\"\n      aria-current={active || undefined}\n      disabled={tab.disabled}\n      onClick={() => {\n        onSelect(tab.value);\n        const el = api.getItemElementById(tab.value);\n        if (el) api.scrollToItem(el, 'smooth', 'center');\n      }}\n      className={cn(\n        'inline-flex h-9 shrink-0 items-center justify-center whitespace-nowrap',\n        'rounded-md px-3 text-sm font-medium transition-colors',\n        'text-muted-foreground hover:text-foreground',\n        'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n        'disabled:pointer-events-none disabled:opacity-50',\n        active && 'bg-muted text-foreground',\n        className,\n        tab.className,\n      )}\n    >\n      {tab.label}\n    </button>\n  );\n}\n\nexport { type ScrollTab, ScrollTabs };\n"
    }
  ],
  "docs": "Controlled: pass tabs, value and onValueChange. Examples: https://react-horizontal-scrolling-menu.dev"
}