{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "type": "registry:primitives",
  "description": "Layered content views supporting Segmented, Underline, and Pill trigger styles.",
  "dependencies": [
    "@radix-ui/react-tabs",
    "class-variance-authority"
  ],
  "usage": "import { Tabs, TabsList, TabsTrigger, TabsContent } from \"@etherealui/react\"\n\nexport function TabsDemo() {\n  return (\n    <Tabs defaultValue=\"overview\" className=\"w-80\">\n      <TabsList variant=\"segmented\">\n        <TabsTrigger variant=\"segmented\" value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger variant=\"segmented\" value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger variant=\"segmented\" value=\"reports\">Reports</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\" className=\"text-xs text-zinc-500 pt-2\">\n        Overview metrics and recent activity.\n      </TabsContent>\n    </Tabs>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/tabs.tsx",
      "target": "components/ui/tabs.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"../utils/cn\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst tabsListVariants = cva(\"inline-flex items-center text-zinc-500 dark:text-zinc-400\", {\n  variants: {\n    variant: {\n      segmented:\n        \"h-9 rounded-lg border border-zinc-200 bg-zinc-100/80 p-1 gap-1 dark:border-zinc-800 dark:bg-zinc-900\",\n      underline:\n        \"w-full justify-start border-b border-zinc-200 bg-transparent gap-6 px-1 dark:border-zinc-800\",\n      pills: \"gap-1.5 bg-transparent\",\n    },\n  },\n  defaultVariants: {\n    variant: \"segmented\",\n  },\n})\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(tabsListVariants({ variant, className }))}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst tabsTriggerVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-xs font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none\",\n  {\n    variants: {\n      variant: {\n        segmented:\n          \"rounded-md px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-zinc-900 data-[state=active]:shadow-2xs hover:text-zinc-900 dark:data-[state=active]:bg-zinc-800 dark:data-[state=active]:text-zinc-100 dark:hover:text-zinc-200\",\n        underline:\n          \"border-b-2 border-transparent pb-2.5 pt-1 text-zinc-500 data-[state=active]:border-blue-600 data-[state=active]:text-zinc-900 hover:text-zinc-800 dark:text-zinc-400 dark:data-[state=active]:border-blue-500 dark:data-[state=active]:text-zinc-100 dark:hover:text-zinc-200\",\n        pills:\n          \"rounded-lg px-3 py-1.5 border border-transparent data-[state=active]:bg-blue-50 data-[state=active]:text-blue-700 data-[state=active]:border-blue-200 hover:bg-zinc-100 dark:data-[state=active]:bg-blue-500/15 dark:data-[state=active]:text-blue-300 dark:data-[state=active]:border-blue-500/30 dark:hover:bg-zinc-800\",\n      },\n    },\n    defaultVariants: {\n      variant: \"segmented\",\n    },\n  }\n)\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(tabsTriggerVariants({ variant, className }))}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\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    className={cn(\"mt-3 focus-visible:outline-none\", className)}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
    }
  ]
}