{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs",
  "type": "registry:block",
  "title": "Tabs",
  "description": "Tabbed navigation for sections, settings, and segmented controls.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/tabs.tsx",
      "type": "registry:component",
      "target": "@components/wensity/tabs.tsx",
      "content": "\"use client\";\n\n/**\n * Tabs — Base UI Tabs foundation (Phase 5).\n * Base UI owns tablist/tab/tabpanel roles, roving focus, and aria-selected;\n * the Framer indicator (layoutId glide) reads the mirrored active value from\n * context and is gated by `useReducedMotion` → instant swap under RM\n * (closes PRIM-MOTION-002 for tabs).\n *\n * NOTE (PRIM-API-002): `variant=\"vertical\"` is orientation, not a pure style.\n * It stays as a variant for shipped API compat and internally sets the Base UI\n * Root orientation.\n */\n\nimport * as React from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { LayoutGroup, motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\n/* ─── Types ─────────────────────────────────────────────────── */\n\nexport type TabsVariant =\n  | \"default\"\n  | \"underline\"\n  | \"pills\"\n  | \"segmented\"\n  | \"vertical\";\n\nexport type TabsSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface TabsProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseTabs.Root>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"orientation\"\n  > {\n  variant?: TabsVariant;\n  size?: TabsSize;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>;\n\nexport interface TabsTriggerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>,\n    \"value\"\n  > {\n  value: string;\n}\n\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>;\n\n/* ─── Context (variant/size + mirrored active value) ────────── */\n\ntype TabsContextValue = {\n  variant: TabsVariant;\n  size: TabsSize;\n  activeValue: string | null;\n  layoutId: string;\n};\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const ctx = React.useContext(TabsContext);\n  if (!ctx) {\n    throw new Error(\"Tabs subcomponents must be used within <Tabs>\");\n  }\n  return ctx;\n}\n\n/* ─── Size / list / trigger visual maps ─────────────────────── */\n\nconst triggerSizes: Record<TabsSize, string> = {\n  sm: \"h-7 px-2.5 text-xs gap-1.5 [&_svg]:size-3\",\n  md: \"h-8 px-3 text-sm gap-2 [&_svg]:size-3.5\",\n  lg: \"h-9 px-3.5 text-[15px] gap-2 [&_svg]:size-4\",\n};\n\nconst listGaps: Record<TabsSize, string> = {\n  sm: \"gap-0.5\",\n  md: \"gap-1\",\n  lg: \"gap-1\",\n};\n\nconst listVariantClasses: Record<TabsVariant, string> = {\n  default: \"\",\n  underline: \"border-b border-[var(--border)]\",\n  pills: \"\",\n  segmented: cn(\n    \"rounded-[var(--primitive-radius-surface)] p-1\",\n    \"bg-[var(--primitive-surface-hover)]\",\n    \"border border-[var(--border)]\",\n  ),\n  vertical: cn(\n    \"flex-col items-stretch\",\n    \"border-l border-[var(--border)]\",\n    \"pl-0\",\n  ),\n};\n\nconst triggerBase = cn(\n  \"relative inline-flex shrink-0 items-center justify-center whitespace-nowrap\",\n  \"font-medium leading-none tracking-[-0.01em] select-none touch-manipulation\",\n  \"rounded-[var(--primitive-radius-item)] outline-none cursor-default\",\n  \"transition-[color,background-color] duration-[180ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"motion-reduce:transition-none\",\n  \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n  \"data-disabled:pointer-events-none data-disabled:opacity-45\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n);\n\nfunction triggerVariantClasses(\n  variant: TabsVariant,\n  isActive: boolean,\n): string {\n  switch (variant) {\n    case \"default\":\n      return isActive\n        ? \"text-[var(--foreground)]\"\n        : \"text-[var(--muted-foreground)]\";\n    case \"underline\":\n      return isActive\n        ? \"text-[var(--foreground)] rounded-none\"\n        : \"text-[var(--muted-foreground)] rounded-none\";\n    case \"pills\":\n      return isActive\n        ? \"text-[var(--foreground)] rounded-full\"\n        : \"text-[var(--muted-foreground)] rounded-full\";\n    case \"segmented\":\n      return isActive\n        ? \"text-[var(--foreground)] z-[1]\"\n        : \"text-[var(--muted-foreground)] z-[1]\";\n    case \"vertical\":\n      return isActive\n        ? \"text-[var(--foreground)] justify-start rounded-none\"\n        : \"text-[var(--muted-foreground)] justify-start rounded-none\";\n    default:\n      return \"\";\n  }\n}\n\nconst hoverClasses: Record<TabsVariant, string> = {\n  default:\n    \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n  underline: \"hover:text-[var(--foreground)]\",\n  pills:\n    \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n  segmented: \"hover:text-[var(--foreground)]\",\n  vertical:\n    \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n};\n\nconst indicatorSpring = {\n  type: \"spring\" as const,\n  duration: 0.26,\n  bounce: 0.08,\n};\n\n/* ─── <Tabs> ────────────────────────────────────────────────── */\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    variant = \"default\",\n    size = \"md\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const isControlled = valueProp !== undefined;\n  const [internal, setInternal] = React.useState<string | null>(\n    defaultValue ?? null,\n  );\n  const activeValue: string | null = isControlled\n    ? (valueProp ?? null)\n    : internal;\n  const layoutId = React.useId();\n\n  const handleValueChange = React.useCallback(\n    (value: unknown) => {\n      const next = (value ?? null) as string | null;\n      if (!isControlled) setInternal(next);\n      if (typeof next === \"string\") onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const ctx = React.useMemo<TabsContextValue>(\n    () => ({ variant, size, activeValue, layoutId }),\n    [variant, size, activeValue, layoutId],\n  );\n\n  return (\n    <TabsContext.Provider value={ctx}>\n      <BaseTabs.Root data-wensity-primitive=\"\"\n        ref={ref}\n        value={activeValue as never}\n        defaultValue={defaultValue as never}\n        onValueChange={handleValueChange}\n        orientation={variant === \"vertical\" ? \"vertical\" : \"horizontal\"}\n        data-variant={variant}\n        className={cn(\n          variant === \"vertical\" ? \"flex gap-4\" : \"flex flex-col\",\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={layoutId}>{children}</LayoutGroup>\n      </BaseTabs.Root>\n    </TabsContext.Provider>\n  );\n});\n\n/* ─── <TabsList> ────────────────────────────────────────────── */\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n  function TabsList({ className, children, ...props }, ref) {\n    const { variant, size } = useTabsContext();\n    return (\n      <BaseTabs.List\n        ref={ref}\n        data-variant={variant}\n        className={cn(\n          \"inline-flex items-center\",\n          listGaps[size],\n          listVariantClasses[variant],\n          variant === \"vertical\" && \"min-w-[140px]\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </BaseTabs.List>\n    );\n  },\n);\n\n/* ─── <TabsTrigger> ─────────────────────────────────────────── */\n\nfunction TabIndicator({\n  layoutKey,\n  layoutId,\n  className,\n  style,\n}: {\n  layoutKey: string;\n  layoutId: string;\n  className?: string;\n  style?: React.CSSProperties;\n}) {\n  const prefersReducedMotion = useReducedMotion();\n  if (prefersReducedMotion) {\n    return <span aria-hidden=\"true\" className={className} style={style} />;\n  }\n  return (\n    <motion.span\n      aria-hidden=\"true\"\n      layoutId={`${layoutKey}-${layoutId}`}\n      transition={indicatorSpring}\n      className={className}\n      style={style}\n    />\n  );\n}\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  TabsTriggerProps\n>(function TabsTrigger({ value, className, children, ...props }, ref) {\n  const { variant, size, activeValue, layoutId } = useTabsContext();\n  const isActive = activeValue === value;\n\n  return (\n    <BaseTabs.Tab\n      ref={ref}\n      value={value}\n      data-variant={variant}\n      className={cn(\n        triggerBase,\n        triggerSizes[size],\n        triggerVariantClasses(variant, isActive),\n        !isActive && hoverClasses[variant],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n\n      {variant === \"default\" && isActive && (\n        <TabIndicator\n          layoutKey=\"tabs-default-pill\"\n          layoutId={layoutId}\n          className={cn(\n            \"absolute inset-0 rounded-[var(--primitive-radius-item)]\",\n            \"bg-[var(--primitive-surface-selected)]\",\n            \"border border-[var(--border)]\",\n          )}\n          style={{ zIndex: -1 }}\n        />\n      )}\n\n      {variant === \"underline\" && isActive && (\n        <TabIndicator\n          layoutKey=\"tabs-underline\"\n          layoutId={layoutId}\n          className=\"absolute inset-x-0 -bottom-px h-[2px] bg-[var(--foreground)]\"\n          style={{ borderRadius: 1 }}\n        />\n      )}\n\n      {variant === \"pills\" && isActive && (\n        <TabIndicator\n          layoutKey=\"tabs-pill\"\n          layoutId={layoutId}\n          className={cn(\n            \"absolute inset-0 rounded-full\",\n            \"bg-[var(--primitive-surface-selected)]\",\n            \"border border-[var(--border)]\",\n          )}\n          style={{ zIndex: -1 }}\n        />\n      )}\n\n      {variant === \"segmented\" && isActive && (\n        <TabIndicator\n          layoutKey=\"tabs-segment\"\n          layoutId={layoutId}\n          className={cn(\n            \"absolute inset-0 rounded-[var(--primitive-radius-item)]\",\n            \"bg-[var(--primitive-surface-elevated)]\",\n            \"border border-[var(--border)]\",\n            \"[box-shadow:var(--primitive-shadow-raised)]\",\n          )}\n          style={{ zIndex: -1 }}\n        />\n      )}\n\n      {variant === \"vertical\" && isActive && (\n        <TabIndicator\n          layoutKey=\"tabs-vertical-bar\"\n          layoutId={layoutId}\n          className=\"absolute -left-px top-1 bottom-1 w-[2px] rounded-full bg-[var(--foreground)]\"\n        />\n      )}\n    </BaseTabs.Tab>\n  );\n});\n\n/* ─── <TabsContent> ─────────────────────────────────────────── */\n\nexport const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n  function TabsContent({ className, ...props }, ref) {\n    return (\n      <BaseTabs.Panel\n        ref={ref}\n        className={cn(\n          \"flex-1 outline-none\",\n          \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2\",\n          \"transition-opacity duration-150 ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n          \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n          \"motion-reduce:transition-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-heading": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/tabs.tsx. For Pro components and updates, use pnpm dlx wensity@latest add tabs.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "tabs",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/tabs",
      "shadcnUrl": "https://ui.wensity.com/r/tabs",
      "cliInstall": "pnpm dlx wensity@latest add tabs"
    }
  }
}