{
  "name": "vercel-tabs",
  "files": [
    {
      "path": "ui/vercel-tabs.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\ninterface TabData {\n  label: string;\n  value: string;\n  content: React.ReactNode;\n}\n\ninterface VercelTabsProps {\n  tabs: TabData[];\n  defaultTab?: string;\n  className?: string;\n}\n\nexport function VercelTabs({ tabs, defaultTab, className }: VercelTabsProps) {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.value);\n  const [hoverStyle, setHoverStyle] = useState({});\n  const [activeStyle, setActiveStyle] = useState({ left: \"0px\", width: \"0px\" });\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);\n\n  useEffect(() => {\n    if (hoveredIndex !== null) {\n      const hoveredElement = tabRefs.current[hoveredIndex];\n      if (hoveredElement) {\n        const { offsetLeft, offsetWidth } = hoveredElement;\n        setHoverStyle({\n          left: `${offsetLeft}px`,\n          width: `${offsetWidth}px`,\n        });\n      }\n    }\n  }, [hoveredIndex]);\n\n  useEffect(() => {\n    const activeElement = tabRefs.current[activeIndex];\n    if (activeElement) {\n      const { offsetLeft, offsetWidth } = activeElement;\n      setActiveStyle({\n        left: `${offsetLeft}px`,\n        width: `${offsetWidth}px`,\n      });\n    }\n  }, [activeIndex]);\n\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      const activeElement = tabRefs.current[activeIndex];\n      if (activeElement) {\n        const { offsetLeft, offsetWidth } = activeElement;\n        setActiveStyle({\n          left: `${offsetLeft}px`,\n          width: `${offsetWidth}px`,\n        });\n      }\n    });\n  }, [activeIndex]);\n\n  return (\n    <Tabs\n      defaultValue={activeTab}\n      onValueChange={setActiveTab}\n      className={`flex w-full flex-col items-center ${className}`}\n    >\n      <TabsList className=\"relative h-auto select-none gap-[6px] bg-transparent p-0\">\n        {/* Hover Highlight */}\n        <div\n          className=\"absolute top-0 left-0 flex h-[30px] items-center rounded-[6px] bg-[#0e0f1114] transition-all duration-300 ease-out dark:bg-[#ffffff1a]\"\n          style={{\n            ...hoverStyle,\n            opacity: hoveredIndex !== null ? 1 : 0,\n          }}\n        />\n\n        {/* Active Indicator */}\n        <div\n          className=\"absolute bottom-[-6px] h-[2px] bg-[#0e0f11] transition-all duration-300 ease-out dark:bg-white\"\n          style={activeStyle}\n        />\n\n        {tabs.map((tab, index) => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            ref={(el) => {\n              tabRefs.current[index] = el;\n            }}\n            className={`z-10 h-[30px] cursor-pointer rounded-md border-0 bg-transparent px-3 py-2 outline-none transition-colors duration-300 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=active]:bg-transparent data-[state=active]:shadow-none ${\n              activeTab === tab.value\n                ? \"text-[#0e0e10] dark:text-white\"\n                : \"text-[#0e0f1199] dark:text-[#ffffff99]\"\n            }`}\n            onMouseEnter={() => setHoveredIndex(index)}\n            onMouseLeave={() => setHoveredIndex(null)}\n          >\n            <span className=\"whitespace-nowrap font-medium text-sm leading-5\">\n              {tab.label}\n            </span>\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      {/* Content Area */}\n      <div className=\"mt-8 w-full px-4\">\n        {tabs.map((tab) => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className=\"fade-in-50 w-full animate-in duration-500\"\n          >\n            {tab.content}\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}