@psnext/design-system 2.5.0 → 2.7.0

package/dist/primitives/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"w-full items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"\",\n      vertical: \"h-fit flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  return (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, size, orientation }), className)}\n      {...props}\n    >\n      {tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {tabSuffix}\n    </TabsPrimitive.List>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn","Icon"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\nimport { Icon } from \"../Icon\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"w-max min-w-full\",\n      vertical: \"h-fit w-full flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n  const [scrollAffordance, setScrollAffordance] = React.useState({\n    hasOverflow: false,\n    canScrollLeft: false,\n    canScrollRight: false,\n  });\n\n  const revealTrigger = React.useCallback(\n    (trigger: HTMLElement | null) => {\n      if (!trigger || orientation !== \"horizontal\") return;\n      trigger.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n    },\n    [orientation],\n  );\n\n  React.useEffect(() => {\n    if (orientation !== \"horizontal\") return;\n    const list = listRef.current;\n    if (!list) return;\n\n    const revealActive = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      revealTrigger(active);\n    };\n\n    const onFocusIn = (event: FocusEvent) => {\n      const target = event.target;\n      if (!(target instanceof HTMLElement)) return;\n      if (!target.matches('[data-slot=\"tabs-trigger\"]')) return;\n      revealTrigger(target);\n    };\n\n    revealActive();\n    list.addEventListener(\"focusin\", onFocusIn);\n\n    const mutation = new MutationObserver(revealActive);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n\n    return () => {\n      list.removeEventListener(\"focusin\", onFocusIn);\n      mutation.disconnect();\n    };\n  }, [orientation, revealTrigger]);\n\n  // Layout effect (not a plain effect) so the very first paint already\n  // reflects real overflow — a plain effect fires after paint, so the\n  // arrows would mount hidden for one frame and then pop in, which is both\n  // a visible flash and a race automated screenshot tools can catch mid-flight.\n  React.useLayoutEffect(() => {\n    if (orientation !== \"horizontal\") {\n      setScrollAffordance({ hasOverflow: false, canScrollLeft: false, canScrollRight: false });\n      return;\n    }\n\n    const container = scrollContainerRef.current;\n    const list = listRef.current;\n    if (!container || !list) return;\n\n    const update = () => {\n      const hasOverflow = container.scrollWidth - container.clientWidth > 1;\n      // Measured from rendered position rather than `scrollLeft` — `scrollLeft`'s\n      // zero point and sign flip in RTL, so a direct comparison would mislabel\n      // which edge is scrollable. Comparing rects stays correct in both directions.\n      const containerRect = container.getBoundingClientRect();\n      const listRect = list.getBoundingClientRect();\n      setScrollAffordance({\n        hasOverflow,\n        canScrollLeft: hasOverflow && listRect.left < containerRect.left - 1,\n        canScrollRight: hasOverflow && listRect.right > containerRect.right + 1,\n      });\n    };\n\n    update();\n    // `list`'s size reacts to content changes (tabs added/removed, prefix/suffix\n    // toggled), so observing it also covers those cases without depending on\n    // `children`/`tabPrefix`/`tabSuffix` directly.\n    const resize = new ResizeObserver(update);\n    resize.observe(container);\n    resize.observe(list);\n    container.addEventListener(\"scroll\", update, { passive: true });\n\n    // Web fonts can still be swapping in when this first `update()` runs, so\n    // it may measure with fallback-font (narrower) text metrics and miss real\n    // overflow. `list`'s width changes once the real font lands, which the\n    // ResizeObserver above will also catch — this just makes the correction\n    // immediate instead of waiting on that indirect signal.\n    document.fonts?.ready.then(update);\n\n    return () => {\n      resize.disconnect();\n      container.removeEventListener(\"scroll\", update);\n    };\n  }, [orientation]);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  const scrollLeft = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: -scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  const scrollRight = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  // TabsList's own styling only ever needs the \"reduced\" (gap-only, no\n  // bg/padding/rounding) look for horizontal orientation now — the track\n  // background/padding lives on the always-mounted wrapper below instead, so\n  // `tabPrefix`/`tabSuffix` (rendered as wrapper children, not list children)\n  // sit on the same surface as the tabs whether or not there's overflow.\n  // `h-full` fills the scroll container's height (itself stretched to the\n  // wrapper's content box, see the wrapper below), giving TabsList a definite\n  // height again — triggers size themselves via `h-[calc(100%-1px)]`, which\n  // resolves to `auto` (collapsing to their own content height, shorter than\n  // the track) against an indefinite parent height.\n  const getListClassName = () => {\n    if (orientation === \"horizontal\") {\n      return cn(\n        \"relative inline-flex h-full items-center text-muted-txt\",\n        variant === \"line\" && \"gap-1 bg-transparent\",\n        variant === \"pill\" && \"gap-0.5\",\n        variant === \"segmented\" && \"gap-0.5\",\n        variant === \"fancy\" && \"items-stretch gap-1 bg-transparent\",\n        \"w-max min-w-full\",\n        className,\n      );\n    }\n    return cn(tabsListVariants({ variant, size, orientation }), className);\n  };\n\n  // `tabPrefix`/`tabSuffix` only render inline in the (non-scrolling)\n  // vertical list; for horizontal they're rendered as fixed wrapper children\n  // outside the scroll container below, so they never scroll with the tabs.\n  const list = (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={getListClassName()}\n      {...props}\n    >\n      {orientation !== \"horizontal\" && tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {orientation !== \"horizontal\" && tabSuffix}\n    </TabsPrimitive.List>\n  );\n\n  if (orientation === \"vertical\") {\n    return list;\n  }\n\n  const { hasOverflow } = scrollAffordance;\n\n  // Arrows and the scroll container are always mounted (never conditionally\n  // swapped) so `scrollContainerRef`/`listRef` stay attached to the same DOM\n  // nodes across overflow toggles — the ResizeObserver/MutationObserver\n  // effects below only run once per `orientation` and would otherwise end up\n  // watching detached elements after a remount. Arrows collapse to 0 width\n  // instead of unmounting when there's no overflow. Track background/padding\n  // is unconditional (not gated on `hasOverflow`) since it now lives here\n  // rather than on TabsList, so `tabPrefix`/`tabSuffix` share the same\n  // surface as the tabs regardless of overflow state.\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-stretch\",\n        variant === \"pill\" && \"rounded-10 bg-muted-bg p-0.75\",\n        variant === \"segmented\" && \"rounded-12 bg-muted-bg p-1\",\n        variant === \"pill\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"pill\" && size === \"md\" && \"h-8.75\",\n        variant === \"pill\" && size === \"lg\" && \"h-10 p-1\",\n        variant === \"segmented\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"segmented\" && size === \"md\" && \"h-8.75\",\n        variant === \"segmented\" && size === \"lg\" && \"h-10 p-1\",\n      )}\n      data-slot=\"tabs-wrapper\"\n    >\n      {/* Fixed prefix — sits outside the scroll container, never scrolls */}\n      {tabPrefix && (\n        <div data-slot=\"tabs-prefix\" className=\"flex shrink-0 items-center px-1\">\n          {tabPrefix}\n        </div>\n      )}\n\n      {/* Left scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollLeft}\n        disabled={!scrollAffordance.canScrollLeft}\n        aria-label=\"Scroll tabs left\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"mr-0.5 border-r border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-left\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Scrollable container - flex-1 to fill space between arrows */}\n      <div\n        ref={scrollContainerRef}\n        data-slot=\"tabs-scroll-container\"\n        className={cn(\n          \"min-w-0 flex-1 touch-pan-x overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]\",\n          // Hide scrollbar\n          \"[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\",\n          variant === \"line\" && \"pb-1.5\",\n        )}\n      >\n        {list}\n      </div>\n\n      {/* Right scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollRight}\n        disabled={!scrollAffordance.canScrollRight}\n        aria-label=\"Scroll tabs right\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"ml-0.5 border-l border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-right\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Fixed suffix — sits outside the scroll container, never scrolls */}\n      {tabSuffix && (\n        <div data-slot=\"tabs-suffix\" className=\"flex shrink-0 items-center px-1\">\n          {tabSuffix}\n        </div>\n      )}\n    </div>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}

package/dist/primitives/Tabs/index.d.cts

@@ -1,2 +1,2 @@
-import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index64.cjs";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index65.cjs";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

package/dist/primitives/Tabs/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index64.js";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index65.js";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

package/dist/primitives/Tabs/index.js

@@ -1,4 +1,5 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -42,11 +43,11 @@ const tabsListVariants = cva("relative inline-flex items-center text-muted-txt",
 			line: "gap-1 bg-transparent",
 			pill: "justify-center rounded-10 bg-muted-bg p-0.75",
 			segmented: "justify-center rounded-12 bg-muted-bg p-1",
-			fancy: "w-full items-stretch gap-1 bg-transparent"
+			fancy: "items-stretch gap-1 bg-transparent"
 		},
 		orientation: {
-			horizontal: "",
-			vertical: "h-fit flex-col"
+			horizontal: "w-max min-w-full",
+			vertical: "h-fit w-full flex-col"
 		},
 		size: {
 			sm: "",
@@ -85,7 +86,79 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 	const { variant, size, orientation } = React.useContext(TabsContext);
 	const isSegmented = variant === "segmented";
 	const listRef = React.useRef(null);
+	const scrollContainerRef = React.useRef(null);
 	const [indicator, setIndicator] = React.useState(null);
+	const [scrollAffordance, setScrollAffordance] = React.useState({
+		hasOverflow: false,
+		canScrollLeft: false,
+		canScrollRight: false
+	});
+	const revealTrigger = React.useCallback((trigger) => {
+		if (!trigger || orientation !== "horizontal") return;
+		trigger.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [orientation]);
+	React.useEffect(() => {
+		if (orientation !== "horizontal") return;
+		const list = listRef.current;
+		if (!list) return;
+		const revealActive = () => {
+			revealTrigger(list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]"));
+		};
+		const onFocusIn = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (!target.matches("[data-slot=\"tabs-trigger\"]")) return;
+			revealTrigger(target);
+		};
+		revealActive();
+		list.addEventListener("focusin", onFocusIn);
+		const mutation = new MutationObserver(revealActive);
+		mutation.observe(list, {
+			attributes: true,
+			attributeFilter: ["data-state"],
+			subtree: true
+		});
+		return () => {
+			list.removeEventListener("focusin", onFocusIn);
+			mutation.disconnect();
+		};
+	}, [orientation, revealTrigger]);
+	React.useLayoutEffect(() => {
+		if (orientation !== "horizontal") {
+			setScrollAffordance({
+				hasOverflow: false,
+				canScrollLeft: false,
+				canScrollRight: false
+			});
+			return;
+		}
+		const container = scrollContainerRef.current;
+		const list = listRef.current;
+		if (!container || !list) return;
+		const update = () => {
+			const hasOverflow = container.scrollWidth - container.clientWidth > 1;
+			const containerRect = container.getBoundingClientRect();
+			const listRect = list.getBoundingClientRect();
+			setScrollAffordance({
+				hasOverflow,
+				canScrollLeft: hasOverflow && listRect.left < containerRect.left - 1,
+				canScrollRight: hasOverflow && listRect.right > containerRect.right + 1
+			});
+		};
+		update();
+		const resize = new ResizeObserver(update);
+		resize.observe(container);
+		resize.observe(list);
+		container.addEventListener("scroll", update, { passive: true });
+		document.fonts?.ready.then(update);
+		return () => {
+			resize.disconnect();
+			container.removeEventListener("scroll", update);
+		};
+	}, [orientation]);
 	React.useEffect(() => {
 		if (!isSegmented) return;
 		const list = listRef.current;
@@ -117,17 +190,39 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 			resize.disconnect();
 		};
 	}, [isSegmented]);
-	return /* @__PURE__ */ jsxs(Tabs$1.List, {
-		ref: listRef,
-		"data-slot": "tabs-list",
-		className: cn(tabsListVariants({
+	const scrollLeft = React.useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const scrollAmount = container.clientWidth * .8;
+		container.scrollBy({
+			left: -scrollAmount,
+			behavior: "smooth"
+		});
+	}, []);
+	const scrollRight = React.useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const scrollAmount = container.clientWidth * .8;
+		container.scrollBy({
+			left: scrollAmount,
+			behavior: "smooth"
+		});
+	}, []);
+	const getListClassName = () => {
+		if (orientation === "horizontal") return cn("relative inline-flex h-full items-center text-muted-txt", variant === "line" && "gap-1 bg-transparent", variant === "pill" && "gap-0.5", variant === "segmented" && "gap-0.5", variant === "fancy" && "items-stretch gap-1 bg-transparent", "w-max min-w-full", className);
+		return cn(tabsListVariants({
 			variant,
 			size,
 			orientation
-		}), className),
+		}), className);
+	};
+	const list = /* @__PURE__ */ jsxs(Tabs$1.List, {
+		ref: listRef,
+		"data-slot": "tabs-list",
+		className: getListClassName(),
 		...props,
 		children: [
-			tabPrefix,
+			orientation !== "horizontal" && tabPrefix,
 			isSegmented && indicator && /* @__PURE__ */ jsx("span", {
 				"data-slot": "tabs-indicator",
 				"aria-hidden": true,
@@ -145,7 +240,55 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 				}
 			}),
 			children,
-			tabSuffix
+			orientation !== "horizontal" && tabSuffix
+		]
+	});
+	if (orientation === "vertical") return list;
+	const { hasOverflow } = scrollAffordance;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full items-stretch", variant === "pill" && "rounded-10 bg-muted-bg p-0.75", variant === "segmented" && "rounded-12 bg-muted-bg p-1", variant === "pill" && size === "sm" && "h-6 p-0.5", variant === "pill" && size === "md" && "h-8.75", variant === "pill" && size === "lg" && "h-10 p-1", variant === "segmented" && size === "sm" && "h-6 p-0.5", variant === "segmented" && size === "md" && "h-8.75", variant === "segmented" && size === "lg" && "h-10 p-1"),
+		"data-slot": "tabs-wrapper",
+		children: [
+			tabPrefix && /* @__PURE__ */ jsx("div", {
+				"data-slot": "tabs-prefix",
+				className: "flex shrink-0 items-center px-1",
+				children: tabPrefix
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: scrollLeft,
+				disabled: !scrollAffordance.canScrollLeft,
+				"aria-label": "Scroll tabs left",
+				tabIndex: hasOverflow ? 0 : -1,
+				className: cn("flex shrink-0 items-center justify-center overflow-hidden transition-all", hasOverflow ? "w-8" : "w-0", hasOverflow && (variant === "pill" || variant === "segmented") && "mr-0.5 border-r border-border/30", "disabled:cursor-not-allowed disabled:opacity-40", "enabled:hover:opacity-70 enabled:active:scale-95", "focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset"),
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "chevron-left",
+					className: "size-4 shrink-0 text-muted-txt"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				"data-slot": "tabs-scroll-container",
+				className: cn("min-w-0 flex-1 touch-pan-x overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]", "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", variant === "line" && "pb-1.5"),
+				children: list
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: scrollRight,
+				disabled: !scrollAffordance.canScrollRight,
+				"aria-label": "Scroll tabs right",
+				tabIndex: hasOverflow ? 0 : -1,
+				className: cn("flex shrink-0 items-center justify-center overflow-hidden transition-all", hasOverflow ? "w-8" : "w-0", hasOverflow && (variant === "pill" || variant === "segmented") && "ml-0.5 border-l border-border/30", "disabled:cursor-not-allowed disabled:opacity-40", "enabled:hover:opacity-70 enabled:active:scale-95", "focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset"),
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "chevron-right",
+					className: "size-4 shrink-0 text-muted-txt"
+				})
+			}),
+			tabSuffix && /* @__PURE__ */ jsx("div", {
+				"data-slot": "tabs-suffix",
+				className: "flex shrink-0 items-center px-1",
+				children: tabSuffix
+			})
 		]
 	});
 }

package/dist/primitives/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TabsPrimitive"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"w-full items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"\",\n      vertical: \"h-fit flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  return (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, size, orientation }), className)}\n      {...props}\n    >\n      {tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {tabSuffix}\n    </TabsPrimitive.List>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["TabsPrimitive"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\nimport { Icon } from \"../Icon\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"items-stretch gap-1 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"w-max min-w-full\",\n      vertical: \"h-fit w-full flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n  const [scrollAffordance, setScrollAffordance] = React.useState({\n    hasOverflow: false,\n    canScrollLeft: false,\n    canScrollRight: false,\n  });\n\n  const revealTrigger = React.useCallback(\n    (trigger: HTMLElement | null) => {\n      if (!trigger || orientation !== \"horizontal\") return;\n      trigger.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n    },\n    [orientation],\n  );\n\n  React.useEffect(() => {\n    if (orientation !== \"horizontal\") return;\n    const list = listRef.current;\n    if (!list) return;\n\n    const revealActive = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      revealTrigger(active);\n    };\n\n    const onFocusIn = (event: FocusEvent) => {\n      const target = event.target;\n      if (!(target instanceof HTMLElement)) return;\n      if (!target.matches('[data-slot=\"tabs-trigger\"]')) return;\n      revealTrigger(target);\n    };\n\n    revealActive();\n    list.addEventListener(\"focusin\", onFocusIn);\n\n    const mutation = new MutationObserver(revealActive);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n\n    return () => {\n      list.removeEventListener(\"focusin\", onFocusIn);\n      mutation.disconnect();\n    };\n  }, [orientation, revealTrigger]);\n\n  // Layout effect (not a plain effect) so the very first paint already\n  // reflects real overflow — a plain effect fires after paint, so the\n  // arrows would mount hidden for one frame and then pop in, which is both\n  // a visible flash and a race automated screenshot tools can catch mid-flight.\n  React.useLayoutEffect(() => {\n    if (orientation !== \"horizontal\") {\n      setScrollAffordance({ hasOverflow: false, canScrollLeft: false, canScrollRight: false });\n      return;\n    }\n\n    const container = scrollContainerRef.current;\n    const list = listRef.current;\n    if (!container || !list) return;\n\n    const update = () => {\n      const hasOverflow = container.scrollWidth - container.clientWidth > 1;\n      // Measured from rendered position rather than `scrollLeft` — `scrollLeft`'s\n      // zero point and sign flip in RTL, so a direct comparison would mislabel\n      // which edge is scrollable. Comparing rects stays correct in both directions.\n      const containerRect = container.getBoundingClientRect();\n      const listRect = list.getBoundingClientRect();\n      setScrollAffordance({\n        hasOverflow,\n        canScrollLeft: hasOverflow && listRect.left < containerRect.left - 1,\n        canScrollRight: hasOverflow && listRect.right > containerRect.right + 1,\n      });\n    };\n\n    update();\n    // `list`'s size reacts to content changes (tabs added/removed, prefix/suffix\n    // toggled), so observing it also covers those cases without depending on\n    // `children`/`tabPrefix`/`tabSuffix` directly.\n    const resize = new ResizeObserver(update);\n    resize.observe(container);\n    resize.observe(list);\n    container.addEventListener(\"scroll\", update, { passive: true });\n\n    // Web fonts can still be swapping in when this first `update()` runs, so\n    // it may measure with fallback-font (narrower) text metrics and miss real\n    // overflow. `list`'s width changes once the real font lands, which the\n    // ResizeObserver above will also catch — this just makes the correction\n    // immediate instead of waiting on that indirect signal.\n    document.fonts?.ready.then(update);\n\n    return () => {\n      resize.disconnect();\n      container.removeEventListener(\"scroll\", update);\n    };\n  }, [orientation]);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  const scrollLeft = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: -scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  const scrollRight = React.useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    // Scroll by 80% of visible width for smooth navigation\n    const scrollAmount = container.clientWidth * 0.8;\n    container.scrollBy({ left: scrollAmount, behavior: \"smooth\" });\n  }, []);\n\n  // TabsList's own styling only ever needs the \"reduced\" (gap-only, no\n  // bg/padding/rounding) look for horizontal orientation now — the track\n  // background/padding lives on the always-mounted wrapper below instead, so\n  // `tabPrefix`/`tabSuffix` (rendered as wrapper children, not list children)\n  // sit on the same surface as the tabs whether or not there's overflow.\n  // `h-full` fills the scroll container's height (itself stretched to the\n  // wrapper's content box, see the wrapper below), giving TabsList a definite\n  // height again — triggers size themselves via `h-[calc(100%-1px)]`, which\n  // resolves to `auto` (collapsing to their own content height, shorter than\n  // the track) against an indefinite parent height.\n  const getListClassName = () => {\n    if (orientation === \"horizontal\") {\n      return cn(\n        \"relative inline-flex h-full items-center text-muted-txt\",\n        variant === \"line\" && \"gap-1 bg-transparent\",\n        variant === \"pill\" && \"gap-0.5\",\n        variant === \"segmented\" && \"gap-0.5\",\n        variant === \"fancy\" && \"items-stretch gap-1 bg-transparent\",\n        \"w-max min-w-full\",\n        className,\n      );\n    }\n    return cn(tabsListVariants({ variant, size, orientation }), className);\n  };\n\n  // `tabPrefix`/`tabSuffix` only render inline in the (non-scrolling)\n  // vertical list; for horizontal they're rendered as fixed wrapper children\n  // outside the scroll container below, so they never scroll with the tabs.\n  const list = (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={getListClassName()}\n      {...props}\n    >\n      {orientation !== \"horizontal\" && tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n      {orientation !== \"horizontal\" && tabSuffix}\n    </TabsPrimitive.List>\n  );\n\n  if (orientation === \"vertical\") {\n    return list;\n  }\n\n  const { hasOverflow } = scrollAffordance;\n\n  // Arrows and the scroll container are always mounted (never conditionally\n  // swapped) so `scrollContainerRef`/`listRef` stay attached to the same DOM\n  // nodes across overflow toggles — the ResizeObserver/MutationObserver\n  // effects below only run once per `orientation` and would otherwise end up\n  // watching detached elements after a remount. Arrows collapse to 0 width\n  // instead of unmounting when there's no overflow. Track background/padding\n  // is unconditional (not gated on `hasOverflow`) since it now lives here\n  // rather than on TabsList, so `tabPrefix`/`tabSuffix` share the same\n  // surface as the tabs regardless of overflow state.\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-stretch\",\n        variant === \"pill\" && \"rounded-10 bg-muted-bg p-0.75\",\n        variant === \"segmented\" && \"rounded-12 bg-muted-bg p-1\",\n        variant === \"pill\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"pill\" && size === \"md\" && \"h-8.75\",\n        variant === \"pill\" && size === \"lg\" && \"h-10 p-1\",\n        variant === \"segmented\" && size === \"sm\" && \"h-6 p-0.5\",\n        variant === \"segmented\" && size === \"md\" && \"h-8.75\",\n        variant === \"segmented\" && size === \"lg\" && \"h-10 p-1\",\n      )}\n      data-slot=\"tabs-wrapper\"\n    >\n      {/* Fixed prefix — sits outside the scroll container, never scrolls */}\n      {tabPrefix && (\n        <div data-slot=\"tabs-prefix\" className=\"flex shrink-0 items-center px-1\">\n          {tabPrefix}\n        </div>\n      )}\n\n      {/* Left scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollLeft}\n        disabled={!scrollAffordance.canScrollLeft}\n        aria-label=\"Scroll tabs left\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"mr-0.5 border-r border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-left\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Scrollable container - flex-1 to fill space between arrows */}\n      <div\n        ref={scrollContainerRef}\n        data-slot=\"tabs-scroll-container\"\n        className={cn(\n          \"min-w-0 flex-1 touch-pan-x overflow-x-auto overscroll-x-contain [-webkit-overflow-scrolling:touch]\",\n          // Hide scrollbar\n          \"[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\",\n          variant === \"line\" && \"pb-1.5\",\n        )}\n      >\n        {list}\n      </div>\n\n      {/* Right scroll arrow - collapses to 0 width when there's no overflow */}\n      <button\n        type=\"button\"\n        onClick={scrollRight}\n        disabled={!scrollAffordance.canScrollRight}\n        aria-label=\"Scroll tabs right\"\n        tabIndex={hasOverflow ? 0 : -1}\n        className={cn(\n          \"flex shrink-0 items-center justify-center overflow-hidden transition-all\",\n          // Width\n          hasOverflow ? \"w-8\" : \"w-0\",\n          // Divider for pill/segmented variants\n          hasOverflow &&\n            (variant === \"pill\" || variant === \"segmented\") &&\n            \"ml-0.5 border-l border-border/30\",\n          // Disabled state\n          \"disabled:cursor-not-allowed disabled:opacity-40\",\n          // Hover state (only when enabled)\n          \"enabled:hover:opacity-70 enabled:active:scale-95\",\n          // Focus state\n          \"focus:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-inset\",\n        )}\n      >\n        <Icon icon=\"chevron-right\" className=\"size-4 shrink-0 text-muted-txt\" />\n      </button>\n\n      {/* Fixed suffix — sits outside the scroll container, never scrolls */}\n      {tabSuffix && (\n        <div data-slot=\"tabs-suffix\" className=\"flex shrink-0 items-center px-1\">\n          {tabSuffix}\n        </div>\n      )}\n    </div>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":"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"}

package/dist/primitives/Text/index.d.cts

@@ -1,2 +1,2 @@
-import { n as TextProps, r as textVariants, t as Text } from "../../index65.cjs";
+import { n as TextProps, r as textVariants, t as Text } from "../../index66.cjs";
 export { Text, TextProps, textVariants };

package/dist/primitives/Text/index.d.ts

@@ -1,2 +1,2 @@
-import { n as TextProps, r as textVariants, t as Text } from "../../index65.js";
+import { n as TextProps, r as textVariants, t as Text } from "../../index66.js";
 export { Text, TextProps, textVariants };

package/dist/primitives/Textarea/index.d.cts

@@ -1,2 +1,2 @@
-import { n as textareaVariants, t as Textarea } from "../../index66.cjs";
+import { n as textareaVariants, t as Textarea } from "../../index67.cjs";
 export { Textarea, textareaVariants };

package/dist/primitives/Textarea/index.d.ts

@@ -1,2 +1,2 @@
-import { n as textareaVariants, t as Textarea } from "../../index66.js";
+import { n as textareaVariants, t as Textarea } from "../../index67.js";
 export { Textarea, textareaVariants };

package/dist/primitives/ThemeProvider/index.d.cts

@@ -1,2 +1,2 @@
-import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index67.cjs";
+import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index68.cjs";
 export { ThemeContext, ThemeMode, ThemeProduct, ThemeProvider, useTheme };

package/dist/primitives/ThemeProvider/index.d.ts

@@ -1,2 +1,2 @@
-import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index67.js";
+import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index68.js";
 export { ThemeContext, ThemeMode, ThemeProduct, ThemeProvider, useTheme };

package/dist/primitives/Toggle/index.d.cts

@@ -1,2 +1,2 @@
-import { n as toggleVariants, t as Toggle } from "../../index68.cjs";
+import { n as toggleVariants, t as Toggle } from "../../index69.cjs";
 export { Toggle, toggleVariants };

package/dist/primitives/Toggle/index.d.ts

@@ -1,2 +1,2 @@
-import { n as toggleVariants, t as Toggle } from "../../index68.js";
+import { n as toggleVariants, t as Toggle } from "../../index69.js";
 export { Toggle, toggleVariants };

package/dist/primitives/ToggleGroup/index.d.cts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItem, t as ToggleGroup } from "../../index69.cjs";
+import { n as ToggleGroupItem, t as ToggleGroup } from "../../index70.cjs";
 export { ToggleGroup, ToggleGroupItem };

package/dist/primitives/ToggleGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItem, t as ToggleGroup } from "../../index69.js";
+import { n as ToggleGroupItem, t as ToggleGroup } from "../../index70.js";
 export { ToggleGroup, ToggleGroupItem };

package/dist/primitives/Tooltip/index.d.cts

@@ -1,2 +1,2 @@
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../../index56.cjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../../index57.cjs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../../index56.js";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../../index57.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/primitives/index.cjs

@@ -22,6 +22,9 @@ const require_primitives_CheckboxTree_index = require("./CheckboxTree/index.cjs"
 const require_primitives_Collapsible_index = require("./Collapsible/index.cjs");
 const require_primitives_Dialog_index = require("./Dialog/index.cjs");
 const require_primitives_Command_index = require("./Command/index.cjs");
+const require_primitives_Input_index = require("./Input/index.cjs");
+const require_primitives_Popover_index = require("./Popover/index.cjs");
+const require_primitives_Combobox_index = require("./Combobox/index.cjs");
 const require_primitives_ContextMenu_index = require("./ContextMenu/index.cjs");
 const require_primitives_Credits_index = require("./Credits/index.cjs");
 const require_primitives_Drawer_index = require("./Drawer/index.cjs");
@@ -35,7 +38,6 @@ const require_primitives_Form_index = require("./Form/index.cjs");
 const require_primitives_Heading_index = require("./Heading/index.cjs");
 const require_primitives_HoverCard_index = require("./HoverCard/index.cjs");
 const require_primitives_InfoBanner_index = require("./InfoBanner/index.cjs");
-const require_primitives_Input_index = require("./Input/index.cjs");
 const require_primitives_Textarea_index = require("./Textarea/index.cjs");
 const require_primitives_InputGroup_index = require("./InputGroup/index.cjs");
 const require_primitives_InputOtp_index = require("./InputOtp/index.cjs");
@@ -48,7 +50,6 @@ const require_primitives_Resizable_index = require("./Resizable/index.cjs");
 const require_Mosaic = require("../Mosaic.cjs");
 const require_primitives_NativeSelect_index = require("./NativeSelect/index.cjs");
 const require_primitives_NavigationMenu_index = require("./NavigationMenu/index.cjs");
-const require_primitives_Popover_index = require("./Popover/index.cjs");
 const require_primitives_Tooltip_index = require("./Tooltip/index.cjs");
 const require_patterns_NavRail_index = require("../patterns/NavRail/index.cjs");
 const require_primitives_NotchedCard_index = require("./NotchedCard/index.cjs");
@@ -133,6 +134,15 @@ exports.CircularProgress = require_primitives_CircularProgress_index.CircularPro
 exports.Collapsible = require_primitives_Collapsible_index.Collapsible;
 exports.CollapsibleContent = require_primitives_Collapsible_index.CollapsibleContent;
 exports.CollapsibleTrigger = require_primitives_Collapsible_index.CollapsibleTrigger;
+exports.Combobox = require_primitives_Combobox_index.Combobox;
+exports.ComboboxContent = require_primitives_Combobox_index.ComboboxContent;
+exports.ComboboxEmpty = require_primitives_Combobox_index.ComboboxEmpty;
+exports.ComboboxGroup = require_primitives_Combobox_index.ComboboxGroup;
+exports.ComboboxInput = require_primitives_Combobox_index.ComboboxInput;
+exports.ComboboxItem = require_primitives_Combobox_index.ComboboxItem;
+exports.ComboboxList = require_primitives_Combobox_index.ComboboxList;
+exports.ComboboxSeparator = require_primitives_Combobox_index.ComboboxSeparator;
+exports.ComboboxTrigger = require_primitives_Combobox_index.ComboboxTrigger;
 exports.Command = require_primitives_Command_index.Command;
 exports.CommandDialog = require_primitives_Command_index.CommandDialog;
 exports.CommandEmpty = require_primitives_Command_index.CommandEmpty;