{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "title": "Tabs",
  "description": "Flag tabs: segmented control (default) and underlined page tabs (line).",
  "dependencies": [
    "radix-ui@^1.6.7",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@flag/utils"
  ],
  "files": [
    {
      "path": "registry/flag/ui/tabs.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-3 data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// default: Flag's segmented control (pill track, selected option on the\n// primary fill). line: Flag page tabs (accent underline on the active tab).\n// Tier A: .seg / .seg-option, and .tabs / .tab.\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"rounded-full border border-border\",\n        line: \"gap-1 border-b border-border group-data-[orientation=vertical]/tabs:border-r group-data-[orientation=vertical]/tabs:border-b-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  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  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap text-muted-foreground [transition:var(--transition-fast)] outline-none group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--color-accent) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        // default (segmented): overline text, primary fill when selected.\n        \"group-data-[variant=default]/tabs-list:rounded-full group-data-[variant=default]/tabs-list:px-3 group-data-[variant=default]/tabs-list:py-1 group-data-[variant=default]/tabs-list:text-caption group-data-[variant=default]/tabs-list:data-[state=active]:bg-primary group-data-[variant=default]/tabs-list:data-[state=active]:text-primary-foreground group-data-[variant=default]/tabs-list:data-[state=inactive]:hover:text-foreground\",\n        // line (page tabs): accent underline (a right-edge bar when vertical)\n        // and primary text when active.\n        \"group-data-[variant=line]/tabs-list:border-transparent group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:-mb-px group-data-[orientation=horizontal]/tabs:group-data-[variant=line]/tabs-list:border-b-2 group-data-[orientation=vertical]/tabs:group-data-[variant=line]/tabs-list:-mr-px group-data-[orientation=vertical]/tabs:group-data-[variant=line]/tabs-list:border-r-2 group-data-[variant=line]/tabs-list:px-3 group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:text-body-md group-data-[variant=line]/tabs-list:hover:bg-(--color-overlay-soft) group-data-[variant=line]/tabs-list:hover:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:border-(--color-accent) group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 rounded-md outline-none focus-visible:shadow-(--focus-ring)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}