{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-tabs",
  "type": "registry:ui",
  "description": "Base UI tabs with gradient indicator: underline or pill variant aligned with Halo Card rim colors",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/default/ui/halo-tabs.tsx",
      "content": "\"use client\"\n\n/**\n * Tabs aligned with `HaloCardPolished` rim language: gradient indicator (underline or pill)\n * using the magenta / violet / cyan family from the card border trails.\n */\nimport type { ComponentProps } from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\n/** Ambient gradient (pill indicator glow) — same hue family as `HaloCardBorderTrail`. */\nconst TAB_GRADIENT_GLOW =\n  \"linear-gradient(90deg, transparent 0%, rgba(255,0,128,0.35) 22%, rgba(121,40,202,0.45) 50%, rgba(0,212,255,0.38) 78%, transparent 100%)\"\n\nexport type HaloTabsVariant = \"underline\" | \"pill\"\n\nexport function HaloTabs({\n  className,\n  ...props\n}: ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      {...props}\n      className={cn(\n        // `flex-1 min-w-0` so the root fills centered flex previews (e.g. docs ComponentPreview) instead of\n        // shrink-wrapping to the active panel. Grid column `minmax(0,1fr)` keeps tab + panel width stable.\n        \"group/halo-tabs grid w-full min-w-0 max-w-full flex-1 grid-cols-[minmax(0,1fr)] gap-3\",\n        \"data-[orientation=vertical]:flex data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-4\",\n        className\n      )}\n      data-slot=\"halo-tabs\"\n    />\n  )\n}\n\nexport function HaloTabsList({\n  className,\n  variant = \"underline\",\n  ...props\n}: ComponentProps<typeof TabsPrimitive.List> & {\n  variant?: HaloTabsVariant\n}) {\n  return (\n    <TabsPrimitive.List\n      {...props}\n      className={cn(\n        \"group/halo-tabs-list relative flex w-fit min-w-0 flex-wrap items-center gap-1\",\n        variant === \"underline\" &&\n          \"w-full gap-6 border-border/50 border-b pb-px data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-2 data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-l data-[orientation=vertical]:pb-0 data-[orientation=vertical]:pl-px\",\n        variant === \"pill\" &&\n          \"gap-0 rounded-full border border-border/80 bg-muted/35 p-1 shadow-[0_1px_0_rgba(255,255,255,0.08)_inset] backdrop-blur-md dark:border-border dark:bg-muted/25\",\n        className\n      )}\n      data-slot=\"halo-tabs-list\"\n      data-variant={variant}\n    />\n  )\n}\n\nexport function HaloTabsTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof TabsPrimitive.Tab>) {\n  return (\n    <TabsPrimitive.Tab\n      {...props}\n      className={cn(\n        \"relative z-1 inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-md px-3 py-2\",\n        \"font-medium text-muted-foreground text-sm tracking-tight antialiased\",\n        \"outline-none transition-colors duration-200 ease-out\",\n        \"focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        \"data-active:text-foreground\",\n        \"group-data-[variant=pill]/halo-tabs-list:rounded-full group-data-[variant=pill]/halo-tabs-list:px-4 group-data-[variant=pill]/halo-tabs-list:py-2\",\n        \"group-data-[variant=underline]/halo-tabs-list:data-active:bg-transparent\",\n        className\n      )}\n      data-slot=\"halo-tabs-trigger\"\n    />\n  )\n}\n\nexport function HaloTabsIndicator({\n  className,\n  variant = \"underline\",\n  ...props\n}: ComponentProps<typeof TabsPrimitive.Indicator> & {\n  variant?: HaloTabsVariant\n}) {\n  return (\n    <TabsPrimitive.Indicator\n      {...props}\n      className={cn(\n        \"pointer-events-none absolute z-0\",\n        variant === \"underline\" &&\n          \"-bottom-px left-(--active-tab-left) h-0.5 w-(--active-tab-width) rounded-none shadow-[0_0_12px_rgba(121,40,202,0.35),0_0_24px_rgba(0,212,255,0.2)] transition-[left,width] duration-300 ease-out [background:linear-gradient(90deg,transparent_0%,rgba(255,0,128,0.85)_18%,rgba(121,40,202,0.92)_50%,rgba(0,212,255,0.88)_82%,transparent_100%)] motion-reduce:transition-none\",\n        variant === \"pill\" &&\n          \"top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-full transition-[left,width,top,height] duration-300 ease-out motion-reduce:transition-none\",\n        className\n      )}\n      data-slot=\"halo-tabs-indicator\"\n    >\n      {variant === \"pill\" ? (\n        <span\n          aria-hidden\n          className={cn(\n            \"absolute inset-0 overflow-hidden rounded-full\",\n            // Hairline “ring” + softer lift: layered shadows (no heavy 10px blur) for edge definition on any background.\n            \"shadow-[inset_0_1px_0_rgba(255,255,255,0.11),0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.045)]\",\n            \"dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_0_0_1px_rgba(255,255,255,0.08),0_1px_2px_rgba(0,0,0,0.22)]\"\n          )}\n          style={{\n            background:\n              \"linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent), color-mix(in oklch, var(--card) 72%, transparent))\",\n          }}\n        />\n      ) : null}\n      {variant === \"pill\" ? (\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 rounded-full opacity-90\"\n          style={{\n            background:\n              \"linear-gradient(90deg, rgba(255,0,128,0.2), rgba(121,40,202,0.28), rgba(0,212,255,0.22))\",\n            mixBlendMode: \"multiply\",\n          }}\n        />\n      ) : null}\n      {variant === \"pill\" ? (\n        <span\n          aria-hidden\n          className=\"-bottom-px pointer-events-none absolute inset-x-0 h-1/2 rounded-b-full opacity-55 blur-sm dark:opacity-75\"\n          style={{ background: TAB_GRADIENT_GLOW }}\n        />\n      ) : null}\n    </TabsPrimitive.Indicator>\n  )\n}\n\nexport function HaloTabsContent({\n  className,\n  ...props\n}: ComponentProps<typeof TabsPrimitive.Panel>) {\n  return (\n    <TabsPrimitive.Panel\n      {...props}\n      className={cn(\n        \"w-full min-w-0 text-pretty text-foreground text-sm/relaxed outline-none\",\n        className\n      )}\n      data-slot=\"halo-tabs-content\"\n    />\n  )\n}\n\nexport type HaloTabsProps = ComponentProps<typeof TabsPrimitive.Root>\n",
      "type": "registry:ui"
    }
  ]
}