{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/ui/tabs.tsx",
      "content": "'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@/lib/utils';\n\ntype TabsVariant = 'default' | 'underline';\n\nfunction Tabs({ className, ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot='tabs'\n      className={cn(\n        'flex flex-col gap-2 data-[orientation=vertical]:flex-row',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({\n  variant = 'default',\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n}) {\n  return (\n    <TabsPrimitive.List\n      data-slot='tabs-list'\n      className={cn(\n        'relative z-0 flex w-fit items-center justify-center gap-x-0.5',\n        'data-[orientation=vertical]:flex-col',\n        variant === 'default'\n          ? 'rounded-lg bg-muted p-0.5 text-foreground'\n          : 'text-foreground/50 hover:text-foreground data-[orientation=horizontal]:py-1 data-[orientation=vertical]:px-1 *:data-[slot=tabs-trigger]:data-active:text-foreground',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        data-slot='tab-indicator'\n        className={cn(\n          'absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out',\n          variant === 'underline'\n            ? 'z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:translate-y-px data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px'\n            : '-z-1 rounded-md bg-background/70 shadow-sm dark:bg-background/50'\n        )}\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot='tabs-trigger'\n      className={cn(\n        \"flex flex-1 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-sm font-medium whitespace-nowrap shadow-none transition-[color,background-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        'gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]',\n        'data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot='tabs-content'\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}