{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tabs","title":"Tabs","description":"A set of layered panels where selecting a tab in the list shows its panel and hides the others.","dependencies":["cn","@base-ui/react","class-variance-authority"],"files":[{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list relative isolate inline-flex w-fit items-center justify-center rounded-lg p-0.5 text-muted-foreground data-[variant=line]:rounded-none data-horizontal:h-8 data-horizontal:has-data-[layout=stacked]:h-auto data-horizontal:data-[size=lg]:h-9 data-vertical:h-fit data-vertical:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-fill-2\",\n        secondary: \"bg-transparent\",\n        primary: \"bg-transparent\",\n        line: \"bg-transparent\",\n      },\n      size: {\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst tabsIndicatorVariants = cva(\"absolute -z-10\", {\n  variants: {\n    variant: {\n      default:\n        \"top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-raised shadow-xs transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none\",\n      secondary:\n        \"top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-fill-2 transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none\",\n      primary:\n        \"top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-md bg-primary transition-[top,left,width,height] duration-200 ease-out motion-reduce:transition-none\",\n      line: \"bg-foreground [--tab-line-x:--spacing(2)] [--tab-line-y:--spacing(1)] group-has-data-[layout=stacked]/tabs-list:[--tab-line-x:--spacing(2.5)] group-has-data-[layout=stacked]/tabs-list:[--tab-line-y:--spacing(2)] group-data-[size=lg]/tabs-list:[--tab-line-x:--spacing(2.5)] group-data-[size=lg]/tabs-list:[--tab-line-y:--spacing(1.5)] data-horizontal:bottom-0 data-horizontal:left-[calc(var(--active-tab-left)+var(--tab-line-x))] data-horizontal:h-0.5 data-horizontal:w-[calc(var(--active-tab-width)-2*var(--tab-line-x))] data-vertical:top-[calc(var(--active-tab-top)+var(--tab-line-y))] data-vertical:right-0 data-vertical:h-[calc(var(--active-tab-height)-2*var(--tab-line-y))] data-vertical:w-0.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  size = \"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      data-size={size}\n      className={cn(tabsListVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        data-slot=\"tabs-indicator\"\n        renderBeforeHydration\n        className={tabsIndicatorVariants({ variant })}\n      />\n    </TabsPrimitive.List>\n  )\n}\n\nconst tabsTriggerVariants = cva(\n  \"group/tabs-trigger relative inline-flex rounded-md border border-transparent! text-xs font-medium whitespace-nowrap text-muted-foreground transition-all hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 focus-visible:outline-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 data-vertical:w-full [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      layout: {\n        inline:\n          \"h-7 items-center justify-center gap-1 px-1.75 group-data-[size=lg]/tabs-list:h-8 group-data-[size=lg]/tabs-list:gap-1.5 group-data-[size=lg]/tabs-list:px-2.25 data-vertical:justify-start\",\n        stacked:\n          \"flex-col items-start justify-start gap-2 px-2.25 py-1.75 text-left\",\n      },\n      align: {\n        start: \"\",\n        center: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        layout: \"stacked\",\n        align: \"center\",\n        class: \"items-center text-center\",\n      },\n    ],\n    defaultVariants: {\n      layout: \"inline\",\n      align: \"start\",\n    },\n  }\n)\n\nfunction TabsTrigger({\n  className,\n  layout = \"inline\",\n  align = \"start\",\n  ...props\n}: TabsPrimitive.Tab.Props & VariantProps<typeof tabsTriggerVariants>) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      data-layout={layout}\n      className={cn(\n        tabsTriggerVariants({ layout, align }),\n        \"group-data-[variant=line]/tabs-list:rounded-none data-active:text-foreground group-data-[variant=primary]/tabs-list:data-active:text-primary-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A secondary line in a trigger: an eyebrow above the label or a description under it. */\nfunction TabsTriggerDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-trigger-description\"\n      className={cn(\n        \"text-2xs font-normal text-muted-foreground group-data-[variant=primary]/tabs-list:group-data-active/tabs-trigger:text-primary-foreground/70\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** A count after the label. */\nfunction TabsTriggerCount({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-trigger-count\"\n      className={cn(\n        \"font-normal text-muted-foreground tabular-nums group-data-[variant=primary]/tabs-list:group-data-active/tabs-trigger:text-primary-foreground/70\",\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 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerDescription,\n  TabsTriggerCount,\n  TabsContent,\n  tabsListVariants,\n}\n","type":"registry:ui"}],"cssVars":{"theme":{"color-fill-2":"var(--fill-2)","color-raised":"var(--raised)","text-2xs--letter-spacing":"-0.005em","text-xs--letter-spacing":"-0.005em","text-sm--letter-spacing":"-0.005em","text-2xs":"0.75rem","text-2xs--line-height":"calc(1 / 0.75)","text-xs":"0.8125rem","text-xs--line-height":"calc(1.25 / 0.8125)"},"light":{"fill-2":"oklch(0.556 0 0 / 8%)","raised":"oklch(1 0 0)"},"dark":{"fill-2":"oklch(1 0 0 / 10%)","raised":"oklch(1 0 0 / 10%)"}},"categories":["navigation"],"type":"registry:ui"}