{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-tabs"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/tabs/tabs.tsx",
      "content": "import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./tabs.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabsVariant = \"underline\" | \"pill\"\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant\n  size: \"sm\" | \"md\"\n}>({ variant: \"underline\", size: \"md\" })\n\n/* ------------------------------------------------------------------ */\n/*  CVA                                                                */\n/* ------------------------------------------------------------------ */\n\nconst tabsListVariants = cva(\"tabs-list inline-flex items-center\", {\n  variants: {\n    variant: {\n      underline: \"tabs-list-underline gap-[var(--layout-gap-lg)]\",\n      pill: \"tabs-list-pill w-fit gap-[var(--layout-gap-xs)] p-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-lg)]\",\n    },\n  },\n  defaultVariants: {\n    variant: \"underline\",\n  },\n})\n\nconst tabsTriggerVariants = cva(\n  \"tabs-trigger inline-flex items-center justify-center whitespace-nowrap font-accent cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        underline: \"tabs-trigger-underline\",\n        pill: \"tabs-trigger-pill rounded-[var(--layout-radius-md)]\",\n      },\n      size: {\n        sm: \"h-[var(--layout-size-lg)] px-[var(--layout-padding-xs)] text-content-caption\",\n        md: \"h-[var(--layout-size-xl)] px-[var(--layout-padding-md)] text-content-note\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"pill\", size: \"sm\", className: \"h-[var(--layout-size-md)]\" },\n      { variant: \"pill\", size: \"md\", className: \"h-[var(--layout-size-lg)]\" },\n    ],\n    defaultVariants: {\n      variant: \"underline\",\n      size: \"md\",\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  Tabs                                                               */\n/* ------------------------------------------------------------------ */\n\nfunction Tabs({\n  className,\n  variant = \"underline\",\n  size = \"md\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  variant?: TabsVariant\n  size?: \"sm\" | \"md\"\n}) {\n  return (\n    <TabsContext.Provider value={{ variant, size }}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        className={cn(\"flex flex-col gap-[var(--layout-gap-xl)]\", className)}\n        {...props}\n      />\n    </TabsContext.Provider>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  TabsList                                                           */\n/* ------------------------------------------------------------------ */\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const { variant } = React.useContext(TabsContext)\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  TabsTrigger                                                        */\n/* ------------------------------------------------------------------ */\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size } = React.useContext(TabsContext)\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  TabsContent                                                        */\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(\"tabs-content\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  tabsListVariants,\n  tabsTriggerVariants,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/tabs/tabs.css",
      "content": "/* ================================================================\n * TABS — Variant & State Styles\n * Structure (flex, height, gap, radius) lives in tabs.tsx via cva.\n * Theming (colors, borders, states) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Transition\n * -------------------------------- */\n@media (prefers-reduced-motion: no-preference) {\n  .tabs-trigger {\n    transition:\n      color 150ms ease,\n      background 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n}\n\n/* ================================\n * UNDERLINE variant\n * ================================ */\n\n/* List — bottom border */\n.tabs-list-underline {\n  border-bottom: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* Trigger — base */\n.tabs-trigger-underline {\n  position: relative;\n  color: var(--text-base-moderate);\n  border-bottom: var(--layout-border-thick) solid transparent;\n  margin-bottom: calc(-1 * var(--layout-border-thin));\n}\n\n.tabs-trigger-underline:hover {\n  color: var(--text-base-strong);\n}\n\n/* Trigger — active */\n.tabs-trigger-underline[data-state=\"active\"] {\n  color: var(--text-base-strong);\n  border-bottom-color: var(--border-selected);\n}\n\n/* Trigger — disabled */\n.tabs-trigger-underline:disabled {\n  color: var(--text-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ================================\n * PILL variant\n * ================================ */\n\n/* List — container background */\n.tabs-list-pill {\n  background: var(--background-neutral-lighter-default);\n}\n\n/* Trigger — base */\n.tabs-trigger-pill {\n  color: var(--text-base-moderate);\n}\n\n.tabs-trigger-pill:hover {\n  color: var(--text-base-strong);\n}\n\n/* Trigger — active */\n.tabs-trigger-pill[data-state=\"active\"] {\n  background: var(--background-surface-raised);\n  color: var(--text-base-strong);\n  box-shadow:\n    0 1px 2px var(--shadow-neutral-strong),\n    0 0 1px var(--shadow-neutral-strong);\n}\n\n/* Trigger — disabled */\n.tabs-trigger-pill:disabled {\n  color: var(--text-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ================================\n * Focus ring (both variants)\n * ================================ */\n.tabs-trigger:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--border-selected);\n}\n\n/* Pill active + focus needs combined shadow */\n.tabs-trigger-pill[data-state=\"active\"]:focus-visible {\n  box-shadow:\n    0 1px 2px var(--shadow-neutral-strong),\n    0 0 1px var(--shadow-neutral-strong),\n    0 0 0 2px var(--background-surface-raised),\n    0 0 0 4px var(--border-selected);\n}\n\n/* ================================\n * Content\n * ================================ */\n.tabs-content:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--border-selected);\n  border-radius: var(--layout-radius-md);\n}\n",
      "type": "registry:ui"
    }
  ]
}