@alfadocs/ui-kit-debug 1.41.1 → 1.43.0

package/dist/_chunks/tab-bar-Cw9UK18Z.js

@@ -0,0 +1,228 @@
+import { jsx as a, jsxs as d, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as F, Fragment as O } from "react";
+import { c } from "./index-D2ZczOXr.js";
+import { useTranslation as E } from "react-i18next";
+import { B as M } from "./badge-BudgzTe_.js";
+import { D as o } from "./dropdown-menu-DU-Hrf33.js";
+import { u as P } from "./use-media-query-CcAx5SMM.js";
+import { u as Q, a as q } from "./use-scroll-overflow-UbLrUfBo.js";
+import { C as G } from "./chevron-down-DWE7GSq9.js";
+import { C as H } from "./check-DrFSN__t.js";
+import { C as I } from "./chevron-left-B8cOyH-V.js";
+import { C as J } from "./chevron-right-I9AeSxH2.js";
+function K(r) {
+  return r > 99 ? "99+" : String(r);
+}
+const U = c("ds:shrink-0", {
+  variants: {
+    position: {
+      top: "ds:pt-[var(--spacing-md)]",
+      bottom: "ds:pb-[var(--spacing-md)]"
+    },
+    fill: {
+      false: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+      true: ""
+    }
+  },
+  defaultVariants: { position: "top", fill: !1 }
+}), W = "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]", X = [
+  "ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:py-[var(--spacing-xs)]",
+  "ds:[--tabbar-mask-start:black] ds:[--tabbar-mask-end:black]",
+  "ds:ltr:data-[fade-start=true]:[--tabbar-mask-start:transparent]",
+  "ds:ltr:data-[fade-end=true]:[--tabbar-mask-end:transparent]",
+  "ds:rtl:data-[fade-start=true]:[--tabbar-mask-end:transparent]",
+  "ds:rtl:data-[fade-end=true]:[--tabbar-mask-start:transparent]",
+  "ds:[mask-image:linear-gradient(to_right,var(--tabbar-mask-start)_0,black_var(--tabbar-fade-distance,var(--spacing-lg)),black_calc(100%-var(--tabbar-fade-distance,var(--spacing-lg))),var(--tabbar-mask-end)_100%)]",
+  "ds:motion-reduce:[mask-image:none]",
+  "ds:[.theme-accessible_&]:[mask-image:none]",
+  "ds:forced-colors:[mask-image:none]"
+].join(" "), Y = c(
+  "ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+  {
+    variants: {
+      fill: { false: "ds:shrink-0", true: "ds:w-full" }
+    },
+    defaultVariants: { fill: !1 }
+  }
+), w = c(
+  "ds:group ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:whitespace-nowrap ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:no-underline ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]",
+  {
+    variants: {
+      fill: {
+        // Responsive: label under the icon below `sm`, beside it at `sm`+.
+        false: "ds:flex-col ds:sm:flex-row ds:sm:gap-[var(--spacing-sm)]",
+        // Fill the bar, always icon-over-label. No `min-w-0`, so a tab never
+        // shrinks below its label (labels never overlap); if the full set can't
+        // fit, the pill scrolls instead.
+        true: "ds:flex-1 ds:basis-0 ds:flex-col"
+      }
+    },
+    defaultVariants: { fill: !1 }
+  }
+), N = "ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4", Z = "ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]", L = "ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", y = "ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]", S = "ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]", ss = "ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]", z = "ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100", as = F(
+  ({
+    items: r,
+    id: B,
+    ariaLabel: f,
+    onSelect: n,
+    renderLink: u,
+    fill: t = !1,
+    position: T = "top",
+    collapseToMenu: p = !1,
+    className: v
+  }, $) => {
+    const { t: g } = E(), j = P("(max-width: 640px)"), { containerRef: A, contentRef: _, isOverflowing: R } = Q(p), b = p && (j || R), {
+      ref: V,
+      canScrollStart: m,
+      canScrollEnd: h,
+      scrollByPage: x
+    } = q(!b), e = r.find((s) => s.isActive) ?? r[0];
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: $,
+        "data-component": "tab-bar",
+        "data-component-id": B,
+        className: `${U({ position: T, fill: t })}${v ? ` ${v}` : ""}`,
+        children: /* @__PURE__ */ d("div", { className: "ds:relative", children: [
+          /* @__PURE__ */ a("div", { ref: A, className: W, children: b ? /* @__PURE__ */ a("nav", { "aria-label": f, className: "ds:w-full", children: /* @__PURE__ */ d(o.Root, { children: [
+            /* @__PURE__ */ d(o.Trigger, { className: L, children: [
+              e != null && e.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: N, children: e.icon }) : null,
+              /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:truncate ds:text-start", children: e == null ? void 0 : e.label }),
+              /* @__PURE__ */ a(
+                G,
+                {
+                  "aria-hidden": "true",
+                  className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(
+              o.Content,
+              {
+                align: "start",
+                className: "ds:min-w-[12rem]",
+                children: r.map((s) => /* @__PURE__ */ a(
+                  o.Item,
+                  {
+                    "data-tab-id": s.id,
+                    startIcon: s.icon,
+                    endIcon: s.isActive ? /* @__PURE__ */ a(
+                      H,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:text-[color:var(--accent)]"
+                      }
+                    ) : void 0,
+                    "aria-current": s.isActive ? "page" : void 0,
+                    onSelect: () => {
+                      s.href ? window.location.assign(s.href) : n == null || n(s.id);
+                    },
+                    children: s.label
+                  },
+                  s.id
+                ))
+              }
+            )
+          ] }) }) : /* @__PURE__ */ a(
+            "div",
+            {
+              ref: V,
+              "data-fade-start": m ? "true" : void 0,
+              "data-fade-end": h ? "true" : void 0,
+              className: X,
+              children: /* @__PURE__ */ a(
+                "nav",
+                {
+                  ref: _,
+                  "aria-label": f,
+                  className: Y({ fill: t }),
+                  children: r.map((s) => {
+                    const C = typeof s.badgeCount == "number" && s.badgeCount > 0 ? s.badgeCount : void 0, i = s.isActive ? "page" : void 0, l = /* @__PURE__ */ d(D, { children: [
+                      s.icon ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: N, children: s.icon }) : null,
+                      /* @__PURE__ */ d("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                        /* @__PURE__ */ a("span", { className: Z, children: s.label }),
+                        C !== void 0 ? /* @__PURE__ */ a(M, { variant: "neutral", children: K(C) }) : null
+                      ] })
+                    ] });
+                    if (s.href !== void 0) {
+                      const k = w({ fill: t });
+                      return u ? /* @__PURE__ */ a(O, { children: u({
+                        href: s.href,
+                        className: k,
+                        children: l,
+                        "aria-current": i,
+                        "data-tab-id": s.id,
+                        onClick: s.onClick
+                      }) }, s.id) : /* @__PURE__ */ a(
+                        "a",
+                        {
+                          href: s.href,
+                          "data-tab-id": s.id,
+                          "aria-current": i,
+                          className: k,
+                          ...s.onClick ? { onClick: s.onClick } : {},
+                          children: l
+                        },
+                        s.id
+                      );
+                    }
+                    return /* @__PURE__ */ a(
+                      "button",
+                      {
+                        type: "button",
+                        "data-tab-id": s.id,
+                        "aria-current": i,
+                        className: w({ fill: t }),
+                        onClick: () => n == null ? void 0 : n(s.id),
+                        children: l
+                      },
+                      s.id
+                    );
+                  })
+                }
+              )
+            }
+          ) }),
+          m ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": g("navigation.tabBar.scrollBack"),
+              onClick: () => x(-1),
+              className: `${y} ${S}`,
+              children: /* @__PURE__ */ a(
+                I,
+                {
+                  "aria-hidden": "true",
+                  className: z
+                }
+              )
+            }
+          ) : null,
+          h ? /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": g("navigation.tabBar.scrollForward"),
+              onClick: () => x(1),
+              className: `${y} ${ss}`,
+              children: /* @__PURE__ */ a(
+                J,
+                {
+                  "aria-hidden": "true",
+                  className: z
+                }
+              )
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+as.displayName = "TabBar";
+export {
+  as as T
+};
+//# sourceMappingURL=tab-bar-Cw9UK18Z.js.map

package/dist/_chunks/tab-bar-Cw9UK18Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-Cw9UK18Z.js","sources":["../../src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/**\n * TabBar — a floating-pill bar of page-level navigation tabs.\n *\n * Each tab is an icon + label (+ optional count badge); the active tab is\n * marked with `aria-current=\"page\"` and an `--accent` underline. The bar is a\n * glassy `--card` pill that floats on whatever canvas the consumer provides\n * (the strip area itself is transparent, so it blends with the surrounding\n * surface).\n *\n * Two layouts:\n * - default (`fill` off): content-width tabs that **centre** when they fit and\n *   scroll from the inline-start (`safe center`) when they overflow, with a\n *   gutter preserved at both ends. The label stacks under the icon below `sm`.\n *   Use this when the tab set is open-ended (e.g. a marketplace app's routes).\n * - `fill`: equal-width tabs that fill the bar and always stack the label under\n *   the icon — a fixed, always-visible set that fits any column width without\n *   scrolling (e.g. a patient portal's handful of sections).\n *\n * Tabs render as links when given an `href` (real navigation) or as buttons\n * otherwise (in-app view switching via `onSelect`). Use it as a header (top,\n * default) for section navigation; `position=\"bottom\"` floats it from the\n * bottom edge for a footer.\n *\n * With `collapseToMenu`, the strip folds into a single DropdownMenu whenever the\n * tabs don't fit — below the `sm` breakpoint OR when they overflow their\n * container at any width (a narrow column on a wide screen, e.g. a page squeezed\n * between two sidebars, clips the tabs just the same as a small viewport).\n *\n * SPA / consumer-router links: pass `renderLink` and TabBar hands each `href`\n * tab off to your router's `<Link>` instead of rendering its own `<a>` — the\n * embedded MarketplaceAppShell strip uses this so a tab click is a client-side\n * route change, not a full page navigation. The kit forwards the same\n * `className` + `aria-current` so the accent-underline active styling and the\n * `aria-current=\"page\"` marker survive in both modes. With `renderLink`\n * omitted the output is the plain `<a href>` exactly as before.\n */\nimport { forwardRef, Fragment, type MouseEvent, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { Check, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Badge } from '../badge';\nimport { DropdownMenu } from '../dropdown-menu';\nimport { useMediaQuery } from '../../hooks/use-media-query';\nimport { useScrollOverflow } from '../../hooks/use-scroll-overflow';\nimport { useOverflowCollapse } from '../../hooks/use-overflow-collapse';\n\nexport interface TabBarItem {\n  /** Stable id; also the value handed to `onSelect` for button tabs. */\n  id: string;\n  /** Pre-translated label — consumers localise their own nav copy. */\n  label: string;\n  /** Optional leading icon (a lucide-react element or equivalent), tinted with `--accent`. */\n  icon?: ReactNode;\n  /** Optional unseen-item count rendered as a pill badge. */\n  badgeCount?: number;\n  /** Mark the tab as the current page (`aria-current='page'` + accent underline). */\n  isActive?: boolean;\n  /** When set, the tab renders as a link to this href; otherwise it's a button. */\n  href?: string;\n  /**\n   * Optional click handler threaded onto the link tab's `<a>` (or, when\n   * `renderLink` is supplied, available to the consumer's router element). Use\n   * it to intercept a same-origin click and route client-side without a full\n   * navigation. Only applies to `href` (link) tabs — button tabs use `onSelect`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/**\n * Props the kit hands to `renderLink` for each `href` tab. The consumer returns\n * their router's `<Link to={href}>` carrying the same `className` (the active\n * accent-underline styling) and `aria-current` (`'page'` on the active tab).\n */\nexport interface TabBarRenderLinkProps {\n  /** The tab's destination — feed it to your router's `to` / `href`. */\n  href: string;\n  /** The kit's tab classes (CVA output) — apply verbatim to the link element. */\n  className: string;\n  /** Icon + label + badge — render as the link's children. */\n  children: ReactNode;\n  /** `'page'` on the active tab, otherwise omitted — forward to the link. */\n  'aria-current'?: 'page';\n  /**\n   * The tab's stable `TabBarItem.id`, as the agent / automation DOM hook.\n   * Spread it onto your router link (`{...rest}`) so the tab stays addressable\n   * by `[data-tab-id]` the same way the kit's own `<a>` / `<button>` tabs are —\n   * see PRS §26 §6.\n   */\n  'data-tab-id'?: string;\n  /** Optional per-item click handler (the item's `onClick`), if supplied. */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport interface TabBarProps {\n  /** The tabs, in order. */\n  items: TabBarItem[];\n  /**\n   * Opaque instance id, emitted on the strip as `data-component-id`. Pass it\n   * when more than one TabBar can be on screen so an agent / automation tool\n   * can scope its `[data-tab-id]` lookup to one bar (PRS §26 §6).\n   */\n  id?: string;\n  /** Accessible name for the `<nav>` landmark. */\n  ariaLabel: string;\n  /** Fires with the tab `id` when a button tab (one without `href`) is chosen. */\n  onSelect?: (id: string) => void;\n  /**\n   * Render an `href` tab via the consumer's router instead of the kit's own\n   * `<a>`. TabBar calls it for each link tab and renders the returned node; the\n   * consumer returns their `<Link to={href}>` carrying the supplied `className`\n   * + `aria-current` so the active accent underline and the `aria-current=\"page\"`\n   * marker are preserved. Use it for SPA navigation (e.g. the MarketplaceAppShell\n   * strip) so a tab click is a client-side route change, not a full page load.\n   * Omit it to render the plain `<a href>` exactly as before. Button tabs (no\n   * `href`) ignore `renderLink` and continue to use `onSelect`.\n   */\n  renderLink?: (props: TabBarRenderLinkProps) => ReactNode;\n  /**\n   * Equal-width tabs that fill the bar and always stack the label under the\n   * icon (for a fixed, always-visible set). Off (default) = content-width tabs\n   * that centre when they fit and scroll when they overflow.\n   */\n  fill?: boolean;\n  /**\n   * Float side. `'top'` (default) gutters from the top edge for a header;\n   * `'bottom'` gutters from the bottom edge for a footer.\n   */\n  position?: 'top' | 'bottom';\n  /**\n   * Collapse the tab strip into a single DropdownMenu whenever the tabs don't\n   * fit — below the `sm` breakpoint (≤640px) OR when they overflow their\n   * container at any viewport width (a narrow column between two sidebars clips\n   * the tabs the same as a small screen). The trigger shows the active tab; the\n   * menu lists them all. Off (default) keeps the content-width / scroll\n   * behaviour at every width, so existing consumers are unaffected. Designed for\n   * button (`onSelect`) tabs; in the collapsed menu an `href` tab navigates with\n   * a full page load, so `renderLink` (SPA routing) and a per-item `onClick`\n   * apply only to the expanded strip.\n   */\n  collapseToMenu?: boolean;\n  /** Extra classes merged onto the outer strip (e.g. sticky/fixed positioning). */\n  className?: string;\n}\n\nfunction formatBadgeCount(count: number): string {\n  return count > 99 ? '99+' : String(count);\n}\n\n/* Transparent strip area — provides the floating gutter on the active side. The\n   default layout also insets the pill horizontally so it reads as a floating\n   strip; `fill` drops that inset so the pill spans the full width and aligns\n   with the consumer's content (e.g. a portal's cards). */\nconst stripVariants = cva('ds:shrink-0', {\n  variants: {\n    position: {\n      top: 'ds:pt-[var(--spacing-md)]',\n      bottom: 'ds:pb-[var(--spacing-md)]',\n    },\n    fill: {\n      false: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n      true: '',\n    },\n  },\n  defaultVariants: { position: 'top', fill: false },\n});\n\n/* The pill is the glass chrome — the bordered, blurred, rounded surface. The\n   scrollable tab row is a separate inner element (`pillScrollClasses`) so the\n   edge-fade mask touches only the tabs, never the pill's border. It is also the\n   overflow-collapse MEASUREMENT container: it stays mounted in both the scroll\n   and the dropdown render, and (carrying no padding) its `clientWidth` is\n   exactly the width the tab row has to fit. */\nconst pillClasses =\n  'ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)]';\n\n/* The inner scroll container. `safe center` centres the tabs when they fit but\n   falls back to start-alignment the moment they overflow, so the row stays fully\n   scrollable end to end. Inline-edge MASK: the leading / trailing edge fades only\n   when tabs are hidden past it (`data-fade-start` / `data-fade-end`), so a clipped\n   tab dissolves into the glass under the accent chevron — alpha-based, so no seam\n   with the translucent pill. Logical via `--tabbar-mask-*` (RTL-mapped); `black`\n   is the mask-opaque sentinel, not a colour. Disabled under reduced motion, the\n   accessible theme, and forced-colors so content is never hidden from those\n   users. `--tabbar-fade-distance` (default `--spacing-lg`) is per-instance. */\nconst pillScrollClasses = [\n  'ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:py-[var(--spacing-xs)]',\n  'ds:[--tabbar-mask-start:black] ds:[--tabbar-mask-end:black]',\n  'ds:ltr:data-[fade-start=true]:[--tabbar-mask-start:transparent]',\n  'ds:ltr:data-[fade-end=true]:[--tabbar-mask-end:transparent]',\n  'ds:rtl:data-[fade-start=true]:[--tabbar-mask-end:transparent]',\n  'ds:rtl:data-[fade-end=true]:[--tabbar-mask-start:transparent]',\n  'ds:[mask-image:linear-gradient(to_right,var(--tabbar-mask-start)_0,black_var(--tabbar-fade-distance,var(--spacing-lg)),black_calc(100%-var(--tabbar-fade-distance,var(--spacing-lg))),var(--tabbar-mask-end)_100%)]',\n  'ds:motion-reduce:[mask-image:none]',\n  'ds:[.theme-accessible_&]:[mask-image:none]',\n  'ds:forced-colors:[mask-image:none]',\n].join(' ');\n\n/* The nav's inline padding is the start/end gutter — it scrolls WITH the tabs,\n   so the gutter survives a full scroll. Content width (`shrink-0`) by default so\n   it overflows and scrolls; `w-full` in fill mode so the tabs spread to fit. */\nconst navVariants = cva(\n  'ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  {\n    variants: {\n      fill: { false: 'ds:shrink-0', true: 'ds:w-full' },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\n/* Each tab is a centred flex box so the icon + label sit centred on both axes.\n   Regular weight; the active state is carried by the accent underline + accent\n   icon, not a heavier weight. */\nconst tabVariants = cva(\n  'ds:group ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:whitespace-nowrap ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:no-underline ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]',\n  {\n    variants: {\n      fill: {\n        // Responsive: label under the icon below `sm`, beside it at `sm`+.\n        false: 'ds:flex-col ds:sm:flex-row ds:sm:gap-[var(--spacing-sm)]',\n        // Fill the bar, always icon-over-label. No `min-w-0`, so a tab never\n        // shrinks below its label (labels never overlap); if the full set can't\n        // fit, the pill scrolls instead.\n        true: 'ds:flex-1 ds:basis-0 ds:flex-col',\n      },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\nconst iconClasses =\n  'ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4';\n\n/* The accent underline rides the label text itself (not the whole tab), so it\n   never reaches the icon or badge and never has to propagate through flex. */\nconst labelClasses =\n  'ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]';\n\n/* The mobile collapse trigger — a full-width button styled like a tab, showing\n   the active tab's icon + label with a trailing chevron. */\nconst menuTriggerClasses =\n  'ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]';\n\n/* Scroll affordance — an accent chevron pinned to a scrollable edge of the pill,\n   shown only when there are tabs hidden past that edge. No button chrome: the\n   edge tab fades into the glass via the inner scroll's mask (above); the chevron\n   just points the way and pages the strip on click. A `--min-target-size` hit\n   area keeps it tappable. Block axis spans the pill (`top`/`bottom` px-inset past\n   the border); the inline edge (`start`/`end`) and the chevron flip mirror RTL. */\nconst scrollAffordanceClasses =\n  'ds:absolute ds:top-px ds:bottom-px ds:z-10 ds:flex ds:min-w-[var(--min-target-size)] ds:items-center ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]';\n\n/* Pin the chevron to its inline edge, over the faded tab. */\nconst scrollAffordanceStartClasses =\n  'ds:start-px ds:justify-start ds:ps-[var(--spacing-xs)]';\n\nconst scrollAffordanceEndClasses =\n  'ds:end-px ds:justify-end ds:pe-[var(--spacing-xs)]';\n\n/* The chevron is the only visible mark — accent-tinted (matching the tab icons),\n   mirrored under RTL. Decorative (`aria-hidden`); the button carries the label. */\nconst scrollChevronClasses =\n  'ds:size-4 ds:shrink-0 ds:text-[color:var(--accent)] ds:rtl:-scale-x-100';\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  (\n    {\n      items,\n      id,\n      ariaLabel,\n      onSelect,\n      renderLink,\n      fill = false,\n      position = 'top',\n      collapseToMenu = false,\n      className,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    // Collapse is twofold, OR'd: the documented mobile floor (≤sm) AND actual\n    // container overflow (a narrow column on a wide screen clips the tabs just\n    // the same). Both hooks run every render (hook order); only consulted when\n    // collapseToMenu is on. The pill (containerRef) stays mounted across the\n    // collapse so the overflow hook can still tell when the column has grown\n    // back; the tab row (contentRef) carries the natural width.\n    const isNarrow = useMediaQuery('(max-width: 640px)');\n    const { containerRef, contentRef, isOverflowing } = useOverflowCollapse<\n      HTMLDivElement,\n      HTMLElement\n    >(collapseToMenu);\n    const isDropdown = collapseToMenu && (isNarrow || isOverflowing);\n\n    // Edge scroll affordances for the scroll layout. Disabled in dropdown mode\n    // (no scroll box), so the observer tears down / re-attaches across the flip.\n    const {\n      ref: pillRef,\n      canScrollStart,\n      canScrollEnd,\n      scrollByPage,\n    } = useScrollOverflow<HTMLDivElement>(!isDropdown);\n\n    const activeItem = items.find((item) => item.isActive) ?? items[0];\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"tab-bar\"\n        data-component-id={id}\n        className={`${stripVariants({ position, fill })}${className ? ` ${className}` : ''}`}\n      >\n        {/* Relative wrapper: the scroll affordances are absolutely positioned\n            against it, NOT inside the scroll box (absolute children of a scroller\n            scroll away with the content). */}\n        <div className=\"ds:relative\">\n          {/* The pill doubles as the overflow-collapse measurement container —\n              rendered in BOTH branches (same element, same width) so the hook\n              can keep measuring after the tab row is swapped for the menu. */}\n          <div ref={containerRef} className={pillClasses}>\n            {isDropdown ? (\n              <nav aria-label={ariaLabel} className=\"ds:w-full\">\n                <DropdownMenu.Root>\n                  <DropdownMenu.Trigger className={menuTriggerClasses}>\n                    {activeItem?.icon ? (\n                      <span aria-hidden=\"true\" className={iconClasses}>\n                        {activeItem.icon}\n                      </span>\n                    ) : null}\n                    <span className=\"ds:flex-1 ds:truncate ds:text-start\">\n                      {activeItem?.label}\n                    </span>\n                    <ChevronDown\n                      aria-hidden=\"true\"\n                      className=\"ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)]\"\n                    />\n                  </DropdownMenu.Trigger>\n                  <DropdownMenu.Content\n                    align=\"start\"\n                    className=\"ds:min-w-[12rem]\"\n                  >\n                    {items.map((item) => (\n                      <DropdownMenu.Item\n                        key={item.id}\n                        data-tab-id={item.id}\n                        startIcon={item.icon}\n                        endIcon={\n                          item.isActive ? (\n                            <Check\n                              aria-hidden=\"true\"\n                              className=\"ds:text-[color:var(--accent)]\"\n                            />\n                          ) : undefined\n                        }\n                        aria-current={item.isActive ? 'page' : undefined}\n                        onSelect={() => {\n                          if (item.href) {\n                            window.location.assign(item.href);\n                          } else {\n                            onSelect?.(item.id);\n                          }\n                        }}\n                      >\n                        {item.label}\n                      </DropdownMenu.Item>\n                    ))}\n                  </DropdownMenu.Content>\n                </DropdownMenu.Root>\n              </nav>\n            ) : (\n              <div\n                ref={pillRef}\n                data-fade-start={canScrollStart ? 'true' : undefined}\n                data-fade-end={canScrollEnd ? 'true' : undefined}\n                className={pillScrollClasses}\n              >\n                <nav\n                  ref={contentRef}\n                  aria-label={ariaLabel}\n                  className={navVariants({ fill })}\n                >\n                  {items.map((item) => {\n                    const badge =\n                      typeof item.badgeCount === 'number' && item.badgeCount > 0\n                        ? item.badgeCount\n                        : undefined;\n                    const ariaCurrent = item.isActive ? 'page' : undefined;\n                    const inner = (\n                      <>\n                        {item.icon ? (\n                          <span aria-hidden=\"true\" className={iconClasses}>\n                            {item.icon}\n                          </span>\n                        ) : null}\n                        {/* Label + badge stay paired; they sit under the icon when\n                          the tab stacks to a column. */}\n                        <span className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n                          <span className={labelClasses}>{item.label}</span>\n                          {badge !== undefined ? (\n                            <Badge variant=\"neutral\">\n                              {formatBadgeCount(badge)}\n                            </Badge>\n                          ) : null}\n                        </span>\n                      </>\n                    );\n                    if (item.href !== undefined) {\n                      const tabClassName = tabVariants({ fill });\n                      // Consumer-router mode: hand the tab to the consumer's <Link>,\n                      // forwarding the same className + aria-current (+ the item's\n                      // onClick) so the active styling and `aria-current=\"page\"`\n                      // marker carry over and clicking routes client-side.\n                      if (renderLink) {\n                        return (\n                          <Fragment key={item.id}>\n                            {renderLink({\n                              href: item.href,\n                              className: tabClassName,\n                              children: inner,\n                              'aria-current': ariaCurrent,\n                              'data-tab-id': item.id,\n                              onClick: item.onClick,\n                            })}\n                          </Fragment>\n                        );\n                      }\n                      // Default: plain anchor — byte-identical to before when no\n                      // per-item onClick is supplied (onClick is omitted entirely,\n                      // not passed as undefined, so the rendered <a> is unchanged).\n                      return (\n                        <a\n                          key={item.id}\n                          href={item.href}\n                          data-tab-id={item.id}\n                          aria-current={ariaCurrent}\n                          className={tabClassName}\n                          {...(item.onClick ? { onClick: item.onClick } : {})}\n                        >\n                          {inner}\n                        </a>\n                      );\n                    }\n                    return (\n                      <button\n                        key={item.id}\n                        type=\"button\"\n                        data-tab-id={item.id}\n                        aria-current={ariaCurrent}\n                        className={tabVariants({ fill })}\n                        onClick={() => onSelect?.(item.id)}\n                      >\n                        {inner}\n                      </button>\n                    );\n                  })}\n                </nav>\n              </div>\n            )}\n          </div>\n          {canScrollStart ? (\n            <button\n              type=\"button\"\n              aria-label={t('navigation.tabBar.scrollBack')}\n              onClick={() => scrollByPage(-1)}\n              className={`${scrollAffordanceClasses} ${scrollAffordanceStartClasses}`}\n            >\n              <ChevronLeft\n                aria-hidden=\"true\"\n                className={scrollChevronClasses}\n              />\n            </button>\n          ) : null}\n          {canScrollEnd ? (\n            <button\n              type=\"button\"\n              aria-label={t('navigation.tabBar.scrollForward')}\n              onClick={() => scrollByPage(1)}\n              className={`${scrollAffordanceClasses} ${scrollAffordanceEndClasses}`}\n            >\n              <ChevronRight\n                aria-hidden=\"true\"\n                className={scrollChevronClasses}\n              />\n            </button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\nTabBar.displayName = 'TabBar';\n"],"names":["formatBadgeCount","count","stripVariants","cva","pillClasses","pillScrollClasses","navVariants","tabVariants","iconClasses","labelClasses","menuTriggerClasses","scrollAffordanceClasses","scrollAffordanceStartClasses","scrollAffordanceEndClasses","scrollChevronClasses","TabBar","forwardRef","items","id","ariaLabel","onSelect","renderLink","fill","position","collapseToMenu","className","ref","t","useTranslation","isNarrow","useMediaQuery","containerRef","contentRef","isOverflowing","useOverflowCollapse","isDropdown","pillRef","canScrollStart","canScrollEnd","scrollByPage","useScrollOverflow","activeItem","item","jsx","jsxs","DropdownMenu","ChevronDown","Check","badge","ariaCurrent","inner","Fragment","Badge","tabClassName","ChevronLeft","ChevronRight"],"mappings":"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"}