{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "A shadcn-style tabs component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/tabs.tsx",
      "content": "\"use client\";\n\nimport {\n  Tabs as TabsPrimitive,\n  useTabs,\n  useTabsContext,\n} from \"@ark-ui/react/tabs\";\nimport type { ReactNode } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport { useTabs, useTabsContext };\n\nexport type TabsVariant = \"default\" | \"underline\";\n\ntype TabsChrome = {\n  variant: TabsVariant;\n  orientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsChromeContext = createContext<TabsChrome | null>(null);\n\nconst useTabsChrome = (): TabsChrome => {\n  const ctx = useContext(TabsChromeContext);\n  if (!ctx) {\n    throw new Error(\n      \"Tabs components must be used within <Tabs> or <TabsRootProvider>.\",\n    );\n  }\n  return ctx;\n};\n\nexport type TabsProps = TabsPrimitive.RootProps & { variant?: TabsVariant };\n\nexport const Tabs = ({\n  orientation = \"horizontal\",\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: TabsProps) => (\n  <TabsPrimitive.Root\n    data-slot=\"tabs\"\n    data-variant={variant}\n    data-orientation={orientation}\n    orientation={orientation}\n    className={cn(\n      \"flex w-full data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsChromeContext.Provider value={{ variant, orientation }}>\n      {children}\n    </TabsChromeContext.Provider>\n  </TabsPrimitive.Root>\n);\n\nexport type TabsRootProviderProps = TabsPrimitive.RootProviderProps & {\n  variant?: TabsVariant;\n  orientation?: TabsPrimitive.RootProps[\"orientation\"];\n};\n\nexport const TabsRootProvider = ({\n  variant = \"default\",\n  orientation = \"horizontal\",\n  className,\n  children,\n  ...props\n}: TabsRootProviderProps) => (\n  <TabsPrimitive.RootProvider\n    data-slot=\"tabs-root-provider\"\n    data-variant={variant}\n    data-orientation={orientation}\n    className={cn(\n      \"flex w-full data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n      className,\n    )}\n    {...props}\n  >\n    <TabsChromeContext.Provider\n      value={{\n        variant,\n        orientation: orientation as TabsChrome[\"orientation\"],\n      }}\n    >\n      {children}\n    </TabsChromeContext.Provider>\n  </TabsPrimitive.RootProvider>\n);\n\nexport type TabsListProps = TabsPrimitive.ListProps & {\n  withIndicator?: boolean;\n  indicatorClassName?: string;\n};\n\nexport const TabsList = ({\n  className,\n  withIndicator = true,\n  indicatorClassName,\n  children,\n  ...props\n}: TabsListProps) => {\n  const { variant, orientation } = useTabsChrome();\n\n  return (\n    <TabsPrimitive.List\n      {...props}\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      data-orientation={orientation}\n      className={cn(\n        \"relative isolate inline-flex w-fit items-center gap-1 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        \"data-[variant=default]:rounded-lg data-[variant=default]:bg-muted data-[variant=default]:p-1\",\n        \"data-[variant=underline]:rounded-none data-[variant=underline]:bg-transparent data-[variant=underline]:p-0 data-[variant=underline]:data-[orientation=horizontal]:border-b data-[variant=underline]:data-[orientation=vertical]:border-s data-[variant=underline]:border-border\",\n        className,\n      )}\n    >\n      {children}\n      {withIndicator ? (\n        <TabsPrimitive.Indicator\n          data-slot=\"tabs-indicator\"\n          data-variant={variant}\n          data-orientation={orientation}\n          className={cn(\n            \"absolute z-0\",\n            \"start-(--left) top-(--top) h-(--height) w-(--width)\",\n            \"transition-[width,height,left,top] duration-200 ease-in-out motion-reduce:transition-none\",\n            \"data-[variant=default]:rounded-md data-[variant=default]:bg-background data-[variant=default]:shadow-sm/5 data-[variant=default]:dark:bg-input\",\n            \"data-[variant=underline]:rounded-full data-[variant=underline]:bg-primary\",\n            \"data-[variant=underline]:data-[orientation=horizontal]:top-auto data-[variant=underline]:data-[orientation=horizontal]:bottom-0 data-[variant=underline]:data-[orientation=horizontal]:h-0.5 data-[variant=underline]:data-[orientation=horizontal]:translate-y-px\",\n            \"data-[variant=underline]:data-[orientation=vertical]:start-0 data-[variant=underline]:data-[orientation=vertical]:w-0.5 data-[variant=underline]:data-[orientation=vertical]:-translate-x-px rtl:data-[variant=underline]:data-[orientation=vertical]:translate-x-px\",\n            indicatorClassName,\n          )}\n        />\n      ) : null}\n    </TabsPrimitive.List>\n  );\n};\n\nexport const TabsTrigger = ({\n  className,\n  ...props\n}: TabsPrimitive.TriggerProps) => {\n  const { variant } = useTabsChrome();\n\n  return (\n    <TabsPrimitive.Trigger\n      {...props}\n      data-slot=\"tabs-trigger\"\n      data-variant={variant}\n      className={cn(\n        \"cursor-pointer disabled:cursor-default data-disabled:cursor-default relative z-10 inline-flex min-h-8 items-center justify-center whitespace-nowrap rounded-md px-3 font-medium text-sm outline-none transition-[color,background-color,box-shadow] select-none\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        \"data-[variant=default]:text-muted-foreground data-[variant=default]:data-selected:text-foreground\",\n        \"data-[variant=underline]:rounded-none data-[variant=underline]:text-muted-foreground data-[variant=underline]:data-selected:text-foreground\",\n        className,\n      )}\n    />\n  );\n};\n\nexport const TabsContent = ({\n  className,\n  ...props\n}: TabsPrimitive.ContentProps) => (\n  <TabsPrimitive.Content\n    data-slot=\"tabs-content\"\n    className={cn(\n      \"mt-3 w-full rounded-lg text-sm outline-none\",\n      \"data-[orientation=vertical]:mt-0 data-[orientation=vertical]:ms-4\",\n      \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const TabsIndicator = ({\n  className,\n  ...props\n}: TabsPrimitive.IndicatorProps) => (\n  <TabsPrimitive.Indicator\n    data-slot=\"tabs-indicator-raw\"\n    className={cn(className)}\n    {...props}\n  />\n);\n\nexport const TabsContext = (props: TabsPrimitive.ContextProps) => (\n  <TabsPrimitive.Context {...props} />\n);\n\nexport const TabsRoot = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => (\n  <div className={cn(\"flex w-full flex-col gap-3\", className)}>{children}</div>\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/tabs.tsx"
    }
  ],
  "type": "registry:ui"
}