{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Switches between related views that share a context, showing one panel at a time without leaving the page.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://www.prfct.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-4 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  // Orientation styles key off each part's own `data-orientation` (set by\n  // Base UI), never an ancestor group — so tabs nested inside another set of\n  // tabs keep their own layout.\n  \"group/tabs-list relative isolate inline-flex w-fit items-center text-muted-foreground data-vertical:h-fit data-vertical:flex-col data-vertical:items-stretch\",\n  {\n    variants: {\n      variant: {\n        // A segmented control: the active tab rides on a sliding pill.\n        default: \"h-9 gap-0.5 rounded-lg bg-muted p-0.5\",\n        // Underlined tabs: a hairline rail with a sliding indicator.\n        line: \"gap-5 data-horizontal:h-10 data-horizontal:w-full data-horizontal:justify-start data-horizontal:border-b data-vertical:gap-1 data-vertical:border-l\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  children,\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        data-slot=\"tabs-indicator\"\n        renderBeforeHydration\n        className={cn(\n          \"absolute -z-10 transition-[translate,width,height] duration-moderate ease-standard\",\n          variant === \"line\"\n            ? \"bg-foreground data-horizontal:bottom-[-1px] data-horizontal:left-0 data-horizontal:h-0.5 data-horizontal:w-(--active-tab-width) data-horizontal:translate-x-(--active-tab-left) data-vertical:top-0 data-vertical:left-[-1px] data-vertical:h-(--active-tab-height) data-vertical:w-0.5 data-vertical:translate-y-(--active-tab-top)\"\n            : \"top-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) rounded-md bg-surface-raised shadow-sm ring-1 ring-edge\"\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        \"relative inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap text-muted-foreground outline-none select-none\",\n        \"transition-colors duration-fast ease-standard hover:text-foreground data-active:text-foreground\",\n        \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\",\n        \"disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50\",\n        // Segmented\n        \"group-data-[variant=default]/tabs-list:h-full group-data-[variant=default]/tabs-list:flex-1 group-data-[variant=default]/tabs-list:rounded-md group-data-[variant=default]/tabs-list:px-3\",\n        \"data-vertical:justify-start data-vertical:group-data-[variant=default]/tabs-list:h-8\",\n        // Line\n        \"group-data-[variant=line]/tabs-list:h-full group-data-[variant=line]/tabs-list:px-0.5\",\n        \"data-vertical:group-data-[variant=line]/tabs-list:h-8 data-vertical:group-data-[variant=line]/tabs-list:px-3\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\n        \"flex-1 text-sm outline-none focus-visible:rounded-md focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}