{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/tabs/tabs.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cn } from '@/lib/utils'\nimport { tabsListVariants, tabsTriggerVariants } from './tabs.variants'\n\n// Make orientation reachable from descendants without each consumer having to\n// pass it manually. TabsList / TabsTrigger read this to apply variant CSS.\nconst TabsOrientationContext = React.createContext<'horizontal' | 'vertical'>('horizontal')\n\nexport interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(\n  ({ className, orientation = 'horizontal', ...props }, ref) => (\n    <TabsOrientationContext.Provider value={orientation}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"tabs\"\n        data-orientation={orientation}\n        orientation={orientation}\n        className={cn('flex w-full', orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-2', className)}\n        {...props}\n      />\n    </TabsOrientationContext.Provider>\n  ),\n)\nTabs.displayName = 'Tabs'\n\nexport interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  variant?: 'segmented' | 'pill' | 'underline'\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, variant, orientation, ...props }, ref) => {\n    const inherited = React.useContext(TabsOrientationContext)\n    const effectiveOrientation = orientation ?? inherited\n    return (\n      <TabsPrimitive.List\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"tabs-list\"\n        className={cn(tabsListVariants({ variant, orientation: effectiveOrientation }), className)}\n        {...props}\n      />\n    )\n  },\n)\nTabsList.displayName = 'TabsList'\n\nexport interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  size?: 'default' | 'sm' | 'lg'\n  variant?: 'segmented' | 'pill' | 'underline'\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, size, variant, orientation, ...props }, ref) => {\n    const inherited = React.useContext(TabsOrientationContext)\n    const effectiveOrientation = orientation ?? inherited\n    return (\n      <TabsPrimitive.Trigger\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"tabs-trigger\"\n        className={cn(\n          tabsTriggerVariants({ size, variant, orientation: effectiveOrientation }),\n          className,\n        )}\n        {...props}\n      />\n    )\n  },\n)\nTabsTrigger.displayName = 'TabsTrigger'\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    data-uipkge=\"\"\n    data-slot=\"tabs-content\"\n    className={cn(\n      'ring-offset-background focus-visible:border-ring focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:ring-[3px] focus-visible:outline-none',\n      className,\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n",
      "type": "registry:ui",
      "target": "~/components/ui/tabs/tabs.tsx"
    },
    {
      "path": "packages/registry-react/components/tabs/tabs.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const tabsListVariants = cva('inline-flex items-stretch text-muted-foreground', {\n  variants: {\n    variant: {\n      // Solid muted track with rounded inset triggers — the default look.\n      segmented: 'gap-1 rounded-md bg-muted p-1',\n      // Transparent track with rounded-full pill triggers.\n      pill: 'gap-2 bg-transparent p-0',\n      // Bottom-border bar (horizontal) or right-border bar (vertical), with\n      // an underline on the active trigger.\n      underline: 'gap-0 bg-transparent p-0',\n    },\n    orientation: {\n      horizontal: 'flex-row',\n      vertical: 'h-auto flex-col items-stretch',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'underline',\n      orientation: 'horizontal',\n      class: 'w-full justify-start border-b border-border',\n    },\n    {\n      variant: 'underline',\n      orientation: 'vertical',\n      class: 'border-r border-border',\n    },\n  ],\n  defaultVariants: {\n    variant: 'segmented',\n    orientation: 'horizontal',\n  },\n})\n\nexport const tabsTriggerVariants = cva(\n  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-[color,background-color,box-shadow,border-color] duration-150 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        segmented:\n          'rounded-sm data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',\n        pill: 'rounded-full border border-border bg-transparent data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary',\n        underline:\n          'rounded-none border-b-2 border-transparent -mb-px data-[state=active]:border-foreground data-[state=active]:text-foreground',\n      },\n      size: {\n        default: 'h-9 px-3 text-sm',\n        sm: 'h-8 px-2.5 text-xs',\n        lg: 'h-10 px-4 text-sm',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: 'w-full justify-start',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'underline',\n        orientation: 'vertical',\n        class: 'border-b-0 border-r-2 -mr-px',\n      },\n    ],\n    defaultVariants: {\n      variant: 'segmented',\n      size: 'default',\n      orientation: 'horizontal',\n    },\n  },\n)\n\nexport type TabsListVariants = VariantProps<typeof tabsListVariants>\n\nexport type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/tabs/tabs.variants.ts"
    },
    {
      "path": "packages/registry-react/components/tabs/index.ts",
      "content": "export {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n} from './tabs'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// component <-> index.ts circular import that broke dev SSR for Card).\nexport {\n  tabsListVariants,\n  tabsTriggerVariants,\n  type TabsListVariants,\n  type TabsTriggerVariants,\n} from './tabs.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/tabs/index.ts"
    }
  ],
  "dependencies": [
    "@radix-ui/react-tabs",
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Horizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on Radix UI with full keyboard navigation.",
  "categories": [
    "navigation"
  ]
}