{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-in-scroll-area-demo",
  "registryDependencies": [
    "tabs",
    "scroll-area",
    "@delta/tabs"
  ],
  "files": [
    {
      "path": "examples/tabs-in-scroll-area-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef } from \"react\"\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"\n\nexport function TabsInScrollAreaDemo() {\n  const scrollViewportRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollTabToCenter = (tabValue: string) => {\n    const tabElement = tabRefs.current.get(tabValue)\n    const scrollContainer = scrollViewportRef.current\n\n    if (tabElement && scrollContainer) {\n      const containerWidth = scrollContainer.offsetWidth\n      const tabWidth = tabElement.offsetWidth\n      const tabLeft = tabElement.offsetLeft\n\n      const scrollTarget = tabLeft - containerWidth / 2 + tabWidth / 2\n\n      scrollContainer.scrollTo({\n        left: Math.max(0, scrollTarget),\n        behavior: \"smooth\",\n      })\n    }\n  }\n\n  useEffect(() => {\n    const viewport = document.querySelector(\n      \"[data-radix-scroll-area-viewport]\"\n    ) as HTMLDivElement\n    if (viewport) {\n      scrollViewportRef.current = viewport\n    }\n  }, [])\n\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      onValueChange={(value) => {\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => scrollTabToCenter(value))\n        })\n      }}\n      variant=\"underline\"\n      className=\"w-[400px]\"\n    >\n      <ScrollArea className=\"w-full [&>div]:[-ms-overflow-style:none] [&>div]:[scrollbar-width:none] [&>div::-webkit-scrollbar]:hidden\">\n        <TabsList className=\"w-max\">\n          {Array.from({ length: 12 }, (_, i) => {\n            const tabValue = `tab${i + 1}`\n            return (\n              <TabsTrigger\n                key={tabValue}\n                value={tabValue}\n                ref={(el) => {\n                  if (el) {\n                    tabRefs.current.set(tabValue, el)\n                  }\n                }}\n              >\n                Tab {i + 1}\n              </TabsTrigger>\n            )\n          })}\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" className=\"hidden\" />\n      </ScrollArea>\n      <div className=\"relative min-h-[60px]\">\n        {Array.from({ length: 12 }, (_, i) => {\n          const tabValue = `tab${i + 1}`\n          return (\n            <TabsContent\n              key={tabValue}\n              value={tabValue}\n              className=\"absolute inset-x-0 top-0\"\n            >\n              <div className=\"rounded-lg border p-6\">\n                <p className=\"text-muted-foreground text-sm\">\n                  Content for Tab {i + 1}. Click different tabs to see the\n                  active tab scroll into view automatically.\n                </p>\n              </div>\n            </TabsContent>\n          )\n        })}\n      </div>\n    </Tabs>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}