{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "title": "Tabs",
  "description": "A customizable tabs component",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/tabs/index.tsx",
      "content": "\"use client\";\r\n\r\nimport { createContext, useContext, useEffect, useRef, useState } from \"react\";\r\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\ntype TabsVariant = \"segmented\" | \"underline\" | \"card\";\r\n\r\nfunction isValidVariant(variant: TabsVariant): variant is TabsVariant {\r\n  return (\r\n    variant === \"segmented\" || variant === \"underline\" || variant === \"card\"\r\n  );\r\n}\r\n\r\ninterface TabsContextType {\r\n  variant?: TabsVariant;\r\n}\r\n\r\nconst TabsContext = createContext<TabsContextType>({\r\n  variant: \"segmented\",\r\n});\r\n\r\nfunction useTabs() {\r\n  const context = useContext(TabsContext);\r\n  if (!context) {\r\n    throw new Error(\"useTabs must be used within a Tabs component\");\r\n  }\r\n  return context;\r\n}\r\n\r\ninterface TabsProps extends TabsPrimitive.Root.Props {\r\n  variant?: TabsVariant;\r\n}\r\n\r\nfunction Tabs({ className, variant = \"segmented\", ...props }: TabsProps) {\r\n  const finalVariant = isValidVariant(variant) ? variant : \"segmented\";\r\n\r\n  return (\r\n    <TabsContext.Provider value={{ variant: finalVariant }}>\r\n      <TabsPrimitive.Root\r\n        data-slot=\"tabs\"\r\n        className={cn(\r\n          \"flex gap-2 data-[orientation=vertical]:flex-row data-[orientation=horizontal]:flex-col\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </TabsContext.Provider>\r\n  );\r\n}\r\n\r\ninterface TabsListProps extends TabsPrimitive.List.Props {}\r\n\r\nfunction TabsList({ className, children, ...props }: TabsListProps) {\r\n  const { variant } = useTabs();\r\n\r\n  return (\r\n    <TabsPrimitive.List\r\n      data-slot=\"tabs-list\"\r\n      className={cn(\r\n        \"relative z-0 flex max-w-full w-fit items-center justify-start gap-x-0.5 text-muted-foreground data-[orientation=vertical]:flex-col max-sm:data-[orientation=horizontal]:overflow-x-auto max-sm:data-[orientation=horizontal]:overflow-y-hidden\",\r\n        variant === \"segmented\" && \"rounded-[12px] bg-muted p-1\",\r\n        variant === \"underline\" &&\r\n          \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1\",\r\n        variant === \"card\" && \"p-1\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <TabsPrimitive.Indicator\r\n        data-slot=\"tabs-indicator\"\r\n        className={cn(\r\n          \"-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[translate,width] duration-200 ease-[cubic-bezier(.25,.46,.45,.94)] will-change-[translate,width] transform-gpu\",\r\n          variant === \"segmented\" &&\r\n            \"h-(--active-tab-height) rounded-md bg-card dark:bg-secondary shadow-sm border border-border/10 -z-1\",\r\n          variant === \"underline\" &&\r\n            \"data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-[1.3px]\",\r\n          variant === \"card\" &&\r\n            \"rounded-md bg-secondary border border-border/10 -z-1\"\r\n        )}\r\n      />\r\n    </TabsPrimitive.List>\r\n  );\r\n}\r\n\r\ninterface TabsTriggerProps extends TabsPrimitive.Tab.Props {}\r\n\r\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\r\n  const { variant } = useTabs();\r\n\r\n  return (\r\n    <TabsPrimitive.Tab\r\n      data-slot=\"tabs-trigger\"\r\n      className={cn(\r\n        \"flex items-center justify-center gap-2 shrink-0 cursor-pointer whitespace-nowrap text-sm text-secondary-foreground/66 data-active:text-foreground hover:text-foreground px-3 py-1 font-medium break-keep outline-none [transition-property:color] duration-200 ease-[cubic-bezier(.25,.46,.45,.94)] data-[orientation=vertical]:w-full [&_svg]:size-4 [&_svg]:shrink-0\",\r\n        variant === \"segmented\" && \"rounded-md\",\r\n        variant === \"underline\" &&\r\n          \"data-[orientation=vertical]:px-2 data-[orientation=horizontal]:py-1.5 data-[orientation=vertical]:items-start data-[orientation=vertical]:justify-start\",\r\n        variant === \"card\" && \"rounded-md\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\ninterface TabsPanelWrapperProps {\r\n  children: React.ReactNode;\r\n}\r\n\r\nfunction TabsPanelsWrapper({ children }: TabsPanelWrapperProps) {\r\n  const contentContainerRef = useRef<HTMLDivElement>(null);\r\n  const [height, setHeight] = useState(0);\r\n\r\n  useEffect(() => {\r\n    const resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const rect = entry.target.getBoundingClientRect();\r\n\r\n        setHeight(rect.height);\r\n      }\r\n    });\r\n\r\n    if (contentContainerRef.current) {\r\n      resizeObserver.observe(contentContainerRef.current);\r\n    }\r\n\r\n    return () => {\r\n      if (contentContainerRef.current) {\r\n        resizeObserver.disconnect();\r\n      }\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <div\r\n      className=\"relative overflow-hidden [transition-property:height] duration-200 ease-[cubic-bezier(.25,.46,.45,.94)]\"\r\n      style={{ height: height ?? null }}\r\n    >\r\n      <div data-slot=\"tabs-panel-wrapper\" ref={contentContainerRef}>\r\n        {children}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface TabsPanelProps extends TabsPrimitive.Panel.Props {}\r\n\r\nfunction TabsPanel({ className, ...props }: TabsPanelProps) {\r\n  return (\r\n    <TabsPrimitive.Panel\r\n      data-slot=\"tabs-panel\"\r\n      className={cn(className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Tabs, TabsList, TabsTrigger, TabsPanelsWrapper, TabsPanel };\r\n",
      "type": "registry:ui",
      "target": "components/ui/tabs.tsx"
    }
  ]
}