@alfadocs/ui-kit-debug 0.66.0 → 0.67.0

package/dist/_chunks/{suggestion-chip-C4kxWUIs.js → suggestion-chip-Bk4PmYTg.js}

@@ -23,9 +23,9 @@ const Q = q(
   {
     variants: {
       intent: {
-        default: "ds:bg-muted/20 ds:text-foreground ds:border-transparent ds:hover:bg-accent/10",
-        suggestion: "ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-transparent ds:hover:bg-[color:var(--primary)]/15",
-        followup: "ds:bg-muted/30 ds:text-foreground ds:border-transparent ds:hover:bg-muted/40"
+        default: "ds:bg-muted/20 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-accent/10",
+        suggestion: "ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-[color:var(--foreground)] ds:hover:bg-[color:var(--primary)]/15",
+        followup: "ds:bg-muted/30 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-muted/40"
       },
       // Weight, family, tracking, line-height all come from `.type-label` on the base.
       // Size variants override --type-label-size to shift the ramp step.
@@ -38,34 +38,34 @@ const Q = q(
     defaultVariants: { intent: "default", size: "md" }
   }
 ), F = B(null), W = V(({ label: k, className: I, children: A, ...C }, g) => {
-  const { t: p, i18n: a } = J(), v = a.dir() === "rtl", [n, m] = T([]), [i, d] = T(null), l = j(/* @__PURE__ */ new Map()), x = f((t) => {
+  const { t: p, i18n: d } = J(), v = d.dir() === "rtl", [o, m] = T([]), [i, a] = T(null), l = j(/* @__PURE__ */ new Map()), x = f((t) => {
     m((r) => r.includes(t) ? r : [...r, t]);
   }, []), z = f((t) => {
     m((r) => r.filter((u) => u !== t)), l.current.delete(t);
-  }, []), o = f((t) => d(t), []);
+  }, []), n = f((t) => a(t), []);
   G(() => {
-    !i && n.length > 0 && d(n[0]), i && !n.includes(i) && d(n[0] ?? null);
-  }, [i, n]);
+    !i && o.length > 0 && a(o[0]), i && !o.includes(i) && a(o[0] ?? null);
+  }, [i, o]);
   const e = f(
     (t, r) => {
-      const u = n.indexOf(t);
+      const u = o.indexOf(t);
       if (u === -1) return;
       let c = u;
-      r === "next" && (c = (u + 1) % n.length), r === "prev" && (c = (u - 1 + n.length) % n.length), r === "first" && (c = 0), r === "last" && (c = n.length - 1);
-      const b = n[c];
-      d(b);
+      r === "next" && (c = (u + 1) % o.length), r === "prev" && (c = (u - 1 + o.length) % o.length), r === "first" && (c = 0), r === "last" && (c = o.length - 1);
+      const b = o[c];
+      a(b);
       const w = l.current.get(b);
       w == null || w.focus();
     },
-    [n]
+    [o]
   ), h = f(
     (t, r) => {
       r ? l.current.set(t, r) : l.current.delete(t);
     },
     []
   ), N = U(
-    () => ({ register: x, unregister: z, focusedId: i, setFocus: o, onArrowMove: e, isRTL: v }),
-    [x, z, i, o, e, v]
+    () => ({ register: x, unregister: z, focusedId: i, setFocus: n, onArrowMove: e, isRTL: v }),
+    [x, z, i, n, e, v]
   );
   return /* @__PURE__ */ y(E.Provider, { value: h, children: /* @__PURE__ */ y(F.Provider, { value: N, children: /* @__PURE__ */ y(
     "div",
@@ -92,28 +92,28 @@ const E = B(null), X = V(
     startIcon: C,
     children: g,
     onSelect: p,
-    onRemove: a,
+    onRemove: d,
     keepOnSelect: v = !1,
-    className: n,
+    className: o,
     disabled: m,
     onKeyDown: i,
-    onFocus: d,
+    onFocus: a,
     onClick: l,
     ...x
   }, z) => {
-    const o = O(), e = L(F), h = L(E), [N, t] = T(!1), r = j(null), u = (s) => {
-      r.current = s, h == null || h(o, s);
+    const n = O(), e = L(F), h = L(E), [N, t] = T(!1), r = j(null), u = (s) => {
+      r.current = s, h == null || h(n, s);
     }, c = j(e);
     c.current = e, G(() => {
       const s = c.current;
       if (s)
-        return s.register(o), () => s.unregister(o);
-    }, [o]);
-    const b = e ? e.focusedId === o : !0, w = e ? b ? 0 : -1 : 0, M = typeof A == "string" ? A : typeof g == "string" ? g : "", R = f(() => {
-      p == null || p(M), a ? a() : v || t(!0);
-    }, [p, M, a, v]), D = f(() => {
-      a ? a() : t(!0);
-    }, [a]);
+        return s.register(n), () => s.unregister(n);
+    }, [n]);
+    const b = e ? e.focusedId === n : !0, w = e ? b ? 0 : -1 : 0, M = typeof A == "string" ? A : typeof g == "string" ? g : "", R = f(() => {
+      p == null || p(M), d ? d() : v || t(!0);
+    }, [p, M, d, v]), D = f(() => {
+      d ? d() : t(!0);
+    }, [d]);
     return S(
       z,
       () => ({
@@ -135,14 +135,14 @@ const E = B(null), X = V(
         onKeyDown: (s) => {
           if (i == null || i(s), !e) return;
           const H = e.isRTL ? "ArrowLeft" : "ArrowRight", P = e.isRTL ? "ArrowRight" : "ArrowLeft";
-          s.key === H || s.key === "ArrowDown" ? (s.preventDefault(), e.onArrowMove(o, "next")) : s.key === P || s.key === "ArrowUp" ? (s.preventDefault(), e.onArrowMove(o, "prev")) : s.key === "Home" ? (s.preventDefault(), e.onArrowMove(o, "first")) : s.key === "End" && (s.preventDefault(), e.onArrowMove(o, "last"));
+          s.key === H || s.key === "ArrowDown" ? (s.preventDefault(), e.onArrowMove(n, "next")) : s.key === P || s.key === "ArrowUp" ? (s.preventDefault(), e.onArrowMove(n, "prev")) : s.key === "Home" ? (s.preventDefault(), e.onArrowMove(n, "first")) : s.key === "End" && (s.preventDefault(), e.onArrowMove(n, "last"));
         },
         onFocus: (s) => {
-          d == null || d(s), e && !b && e.setFocus(o);
+          a == null || a(s), e && !b && e.setFocus(n);
         },
         "data-component": "suggestion-chip",
         "data-component-id": x.id,
-        className: Q({ intent: k, size: I, className: n }),
+        className: Q({ intent: k, size: I, className: o }),
         ...x,
         children: [
           C ? /* @__PURE__ */ y(
@@ -164,4 +164,4 @@ export {
   X as S,
   W as a
 };
-//# sourceMappingURL=suggestion-chip-C4kxWUIs.js.map
+//# sourceMappingURL=suggestion-chip-Bk4PmYTg.js.map

package/dist/_chunks/suggestion-chip-Bk4PmYTg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-chip-Bk4PmYTg.js","sources":["../../src/components/suggestion-chip/suggestion-chip.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                  */\n/* ------------------------------------------------------------------ */\n\nconst chipVariants = cva(\n  [\n    // `max-w-full` keeps a chip from blowing past its container when the\n    // label is long and the container is narrow (e.g. a 22rem Alia sidebar\n    // dock). Labels wrap onto multiple lines via `whitespace-normal` +\n    // `break-words` so the full text stays legible — rounded pills grow\n    // taller rather than hiding content behind an ellipsis.\n    'ds:inline-flex ds:items-center ds:justify-start ds:text-start ds:whitespace-normal ds:break-words ds:max-w-full',\n    'ds:rounded-[var(--radius-full)] ds:border',\n    'ds:min-h-[var(--min-target-size)]',\n    'ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]',\n    'type-label',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:disabled:cursor-not-allowed ds:disabled:opacity-50',\n    'ds:forced-colors:border-[ButtonText] ds:forced-colors:text-[ButtonText]',\n  ].join(' '),\n  {\n    variants: {\n      intent: {\n        default:\n          'ds:bg-muted/20 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-accent/10',\n        suggestion:\n          'ds:bg-[color:var(--primary)]/10 ds:text-foreground ds:border-[color:var(--foreground)] ds:hover:bg-[color:var(--primary)]/15',\n        followup:\n          'ds:bg-muted/30 ds:text-foreground ds:border-[color:var(--border)] ds:hover:bg-muted/40',\n      },\n      // Weight, family, tracking, line-height all come from `.type-label` on the base.\n      // Size variants override --type-label-size to shift the ramp step.\n      size: {\n        sm: 'ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-label-size:var(--font-size-xs)]',\n        md: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n        lg: 'ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:[--type-label-size:var(--font-size-base)]',\n      },\n    },\n    defaultVariants: { intent: 'default', size: 'md' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Group context — roving tabIndex                                     */\n/* ------------------------------------------------------------------ */\n\ninterface ChipGroupCtxValue {\n  register: (id: string) => void;\n  unregister: (id: string) => void;\n  focusedId: string | null;\n  setFocus: (id: string) => void;\n  onArrowMove: (\n    id: string,\n    direction: 'prev' | 'next' | 'first' | 'last',\n  ) => void;\n  isRTL: boolean;\n}\n\nconst ChipGroupCtx = createContext<ChipGroupCtxValue | null>(null);\n\n/* ------------------------------------------------------------------ */\n/* SuggestionChipGroup                                                  */\n/* ------------------------------------------------------------------ */\n\nexport interface SuggestionChipGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'role' | 'aria-label'\n> {\n  /** Override the default group label (ui.chat.suggestions). */\n  label?: string;\n}\n\nexport const SuggestionChipGroup = forwardRef<\n  HTMLDivElement,\n  SuggestionChipGroupProps\n>(({ label, className, children, ...rest }, ref) => {\n  const { t, i18n } = useTranslation();\n  const isRTL = i18n.dir() === 'rtl';\n  const [order, setOrder] = useState<string[]>([]);\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const nodeMap = useRef<Map<string, HTMLButtonElement>>(new Map());\n\n  const register = useCallback((id: string) => {\n    setOrder((prev) => (prev.includes(id) ? prev : [...prev, id]));\n  }, []);\n  const unregister = useCallback((id: string) => {\n    setOrder((prev) => prev.filter((x) => x !== id));\n    nodeMap.current.delete(id);\n  }, []);\n\n  const setFocus = useCallback((id: string) => setFocusedId(id), []);\n\n  useEffect(() => {\n    // Ensure focusedId stays valid — default to first registered.\n    if (!focusedId && order.length > 0) setFocusedId(order[0]);\n    if (focusedId && !order.includes(focusedId)) {\n      setFocusedId(order[0] ?? null);\n    }\n  }, [focusedId, order]);\n\n  const onArrowMove: ChipGroupCtxValue['onArrowMove'] = useCallback(\n    (id, direction) => {\n      const idx = order.indexOf(id);\n      if (idx === -1) return;\n      let next = idx;\n      if (direction === 'next') next = (idx + 1) % order.length;\n      if (direction === 'prev') next = (idx - 1 + order.length) % order.length;\n      if (direction === 'first') next = 0;\n      if (direction === 'last') next = order.length - 1;\n      const nextId = order[next];\n      setFocusedId(nextId);\n      const el = nodeMap.current.get(nextId);\n      el?.focus();\n    },\n    [order],\n  );\n\n  // Wrapped in useCallback so the context value reference is stable across\n  // renders — otherwise every chip re-runs its ref-registering effect on\n  // every focus change.\n  const registerNode = useCallback(\n    (id: string, el: HTMLButtonElement | null) => {\n      if (el) nodeMap.current.set(id, el);\n      else nodeMap.current.delete(id);\n    },\n    [],\n  );\n\n  // Memoise the context value so child chips don't see a new `group`\n  // reference on every render — otherwise their register/unregister\n  // effect re-runs each render, driving setOrder in the parent and\n  // producing an infinite render loop.\n  const ctxValue = useMemo(\n    () => ({ register, unregister, focusedId, setFocus, onArrowMove, isRTL }),\n    [register, unregister, focusedId, setFocus, onArrowMove, isRTL],\n  );\n\n  return (\n    <ChipGroupCtxNodeContext.Provider value={registerNode}>\n      <ChipGroupCtx.Provider value={ctxValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={label ?? t('chat.suggestions')}\n          className={[\n            'ds:flex ds:flex-wrap ds:items-center',\n            'ds:gap-y-[var(--spacing-xs)] ds:gap-x-[var(--spacing-sm)]',\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...rest}\n        >\n          {children}\n        </div>\n      </ChipGroupCtx.Provider>\n    </ChipGroupCtxNodeContext.Provider>\n  );\n});\n\nSuggestionChipGroup.displayName = 'SuggestionChipGroup';\n\n// Separate context to register the DOM node from the chip without tripping\n// eslint `react-hooks/exhaustive-deps`.\nconst ChipGroupCtxNodeContext = createContext<\n  ((id: string, el: HTMLButtonElement | null) => void) | null\n>(null);\n\n/* ------------------------------------------------------------------ */\n/* SuggestionChip                                                       */\n/* ------------------------------------------------------------------ */\n\ntype NativeButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'onSelect' | 'children'\n>;\n\n/** Curated imperative handle for agent / external automation. */\nexport interface SuggestionChipHandle {\n  getValue: () => string;\n  select: () => void;\n  dismiss: () => void;\n}\n\nexport interface SuggestionChipProps\n  extends NativeButtonProps, VariantProps<typeof chipVariants> {\n  /** Value emitted on activation. Falls back to children when a string. */\n  value?: string;\n  startIcon?: ReactNode;\n  children: ReactNode;\n  /** Activation handler. */\n  onSelect?: (value: string) => void;\n  /** When provided, parent owns removal. Otherwise the chip manages its own\n   *  `removed` state and unmounts after selection. */\n  onRemove?: () => void;\n  /** Opt out of self-removal — useful inside controlled lists. */\n  keepOnSelect?: boolean;\n}\n\nexport const SuggestionChip = forwardRef<\n  SuggestionChipHandle,\n  SuggestionChipProps\n>(\n  (\n    {\n      intent = 'default',\n      size = 'md',\n      value,\n      startIcon,\n      children,\n      onSelect,\n      onRemove,\n      keepOnSelect = false,\n      className,\n      disabled,\n      onKeyDown,\n      onFocus,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const group = useContext(ChipGroupCtx);\n    const registerNode = useContext(ChipGroupCtxNodeContext);\n    const [removed, setRemoved] = useState(false);\n    const localRef = useRef<HTMLButtonElement | null>(null);\n\n    const setRef = (node: HTMLButtonElement | null) => {\n      localRef.current = node;\n      registerNode?.(id, node);\n    };\n\n    // Keep register/unregister in a ref so the effect runs only on\n    // mount / unmount. Depending on `group` directly would re-fire the\n    // effect on every parent render (focusedId changes invalidate the\n    // group context value), which in turn mutates the parent's `order`\n    // state and loops.\n    const groupRef = useRef(group);\n    groupRef.current = group;\n\n    useEffect(() => {\n      const g = groupRef.current;\n      if (!g) return;\n      g.register(id);\n      return () => g.unregister(id);\n    }, [id]);\n\n    const isFocused = group ? group.focusedId === id : true;\n    const tabIndex = group ? (isFocused ? 0 : -1) : 0;\n\n    const resolvedValue =\n      typeof value === 'string'\n        ? value\n        : typeof children === 'string'\n          ? children\n          : '';\n\n    const performSelect = useCallback(() => {\n      onSelect?.(resolvedValue);\n      if (onRemove) onRemove();\n      else if (!keepOnSelect) setRemoved(true);\n    }, [onSelect, resolvedValue, onRemove, keepOnSelect]);\n\n    const performDismiss = useCallback(() => {\n      if (onRemove) onRemove();\n      else setRemoved(true);\n    }, [onRemove]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        getValue: () => resolvedValue,\n        select: performSelect,\n        dismiss: performDismiss,\n      }),\n      [resolvedValue, performSelect, performDismiss],\n    );\n\n    if (removed) return null;\n\n    const handleClick: NonNullable<NativeButtonProps['onClick']> = (e) => {\n      onClick?.(e);\n      performSelect();\n    };\n\n    const handleKeyDown: NonNullable<NativeButtonProps['onKeyDown']> = (e) => {\n      onKeyDown?.(e);\n      if (!group) return;\n      // Arrow navigation inside a group — RTL inverts Left/Right.\n      const nextKey = group.isRTL ? 'ArrowLeft' : 'ArrowRight';\n      const prevKey = group.isRTL ? 'ArrowRight' : 'ArrowLeft';\n      if (e.key === nextKey || e.key === 'ArrowDown') {\n        e.preventDefault();\n        group.onArrowMove(id, 'next');\n      } else if (e.key === prevKey || e.key === 'ArrowUp') {\n        e.preventDefault();\n        group.onArrowMove(id, 'prev');\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        group.onArrowMove(id, 'first');\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        group.onArrowMove(id, 'last');\n      }\n    };\n\n    const handleFocus: NonNullable<NativeButtonProps['onFocus']> = (e) => {\n      onFocus?.(e);\n      if (group && !isFocused) group.setFocus(id);\n    };\n\n    return (\n      <button\n        ref={setRef}\n        type=\"button\"\n        tabIndex={tabIndex}\n        disabled={disabled}\n        onClick={disabled ? undefined : handleClick}\n        onKeyDown={\n          handleKeyDown as unknown as (\n            e: KeyboardEvent<HTMLButtonElement>,\n          ) => void\n        }\n        onFocus={handleFocus}\n        data-component=\"suggestion-chip\"\n        data-component-id={rest.id}\n        className={chipVariants({ intent, size, className })}\n        {...rest}\n      >\n        {startIcon ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:me-[var(--spacing-xs)] ds:inline-flex ds:items-center ds:[&>svg]:size-4\"\n          >\n            {startIcon}\n          </span>\n        ) : null}\n        <span>{children}</span>\n      </button>\n    );\n  },\n);\n\nSuggestionChip.displayName = 'SuggestionChip';\n"],"names":["chipVariants","cva","ChipGroupCtx","createContext","SuggestionChipGroup","forwardRef","label","className","children","rest","ref","t","i18n","useTranslation","isRTL","order","setOrder","useState","focusedId","setFocusedId","nodeMap","useRef","register","useCallback","id","prev","unregister","x","setFocus","useEffect","onArrowMove","direction","idx","next","nextId","el","registerNode","ctxValue","useMemo","jsx","ChipGroupCtxNodeContext","SuggestionChip","intent","size","value","startIcon","onSelect","onRemove","keepOnSelect","disabled","onKeyDown","onFocus","onClick","useId","group","useContext","removed","setRemoved","localRef","setRef","node","groupRef","g","isFocused","tabIndex","resolvedValue","performSelect","performDismiss","useImperativeHandle","jsxs","e","nextKey","prevKey"],"mappings":"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"}

package/dist/_chunks/{tab-bar-Xetknddo.js → tab-bar-B1ovILzh.js}

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as u, Fragment as b } from "react/jsx-runtime";
 import { forwardRef as h, Fragment as x } from "react";
 import { c as o } from "./index-D2ZczOXr.js";
-import { B as C } from "./badge-zsf5i5bH.js";
+import { B as C } from "./badge-CqGsX32l.js";
 function w(r) {
   return r > 99 ? "99+" : String(r);
 }
@@ -102,4 +102,4 @@ j.displayName = "TabBar";
 export {
   j as T
 };
-//# sourceMappingURL=tab-bar-Xetknddo.js.map
+//# sourceMappingURL=tab-bar-B1ovILzh.js.map

package/dist/_chunks/{tab-bar-Xetknddo.js.map → tab-bar-B1ovILzh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-bar-Xetknddo.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 four 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 * 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';\n\nimport { Badge } from '../badge';\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  /** 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  /** 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  /** 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 flex scroll container. `safe center` centres the tabs when\n   they fit but falls back to start-alignment the moment they overflow, so the\n   row stays fully scrollable end to end with nothing clipped. */\nconst pillClasses =\n  'ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto 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)] ds:py-[var(--spacing-xs)]';\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\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  (\n    {\n      items,\n      ariaLabel,\n      onSelect,\n      renderLink,\n      fill = false,\n      position = 'top',\n      className,\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-component=\"tab-bar\"\n        className={`${stripVariants({ position, fill })}${className ? ` ${className}` : ''}`}\n      >\n        <div className={pillClasses}>\n          <nav aria-label={ariaLabel} className={navVariants({ fill })}>\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 the\n                      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\">{formatBadgeCount(badge)}</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                        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                    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                  aria-current={ariaCurrent}\n                  className={tabVariants({ fill })}\n                  onClick={() => onSelect?.(item.id)}\n                >\n                  {inner}\n                </button>\n              );\n            })}\n          </nav>\n        </div>\n      </div>\n    );\n  },\n);\nTabBar.displayName = 'TabBar';\n"],"names":["formatBadgeCount","count","stripVariants","cva","pillClasses","navVariants","tabVariants","iconClasses","labelClasses","TabBar","forwardRef","items","ariaLabel","onSelect","renderLink","fill","position","className","ref","jsx","item","badge","ariaCurrent","inner","jsxs","Fragment","Badge","tabClassName"],"mappings":"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"}
+{"version":3,"file":"tab-bar-B1ovILzh.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 four 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 * 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';\n\nimport { Badge } from '../badge';\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  /** 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  /** 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  /** 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 flex scroll container. `safe center` centres the tabs when\n   they fit but falls back to start-alignment the moment they overflow, so the\n   row stays fully scrollable end to end with nothing clipped. */\nconst pillClasses =\n  'ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto 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)] ds:py-[var(--spacing-xs)]';\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\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  (\n    {\n      items,\n      ariaLabel,\n      onSelect,\n      renderLink,\n      fill = false,\n      position = 'top',\n      className,\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-component=\"tab-bar\"\n        className={`${stripVariants({ position, fill })}${className ? ` ${className}` : ''}`}\n      >\n        <div className={pillClasses}>\n          <nav aria-label={ariaLabel} className={navVariants({ fill })}>\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 the\n                      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\">{formatBadgeCount(badge)}</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                        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                    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                  aria-current={ariaCurrent}\n                  className={tabVariants({ fill })}\n                  onClick={() => onSelect?.(item.id)}\n                >\n                  {inner}\n                </button>\n              );\n            })}\n          </nav>\n        </div>\n      </div>\n    );\n  },\n);\nTabBar.displayName = 'TabBar';\n"],"names":["formatBadgeCount","count","stripVariants","cva","pillClasses","navVariants","tabVariants","iconClasses","labelClasses","TabBar","forwardRef","items","ariaLabel","onSelect","renderLink","fill","position","className","ref","jsx","item","badge","ariaCurrent","inner","jsxs","Fragment","Badge","tabClassName"],"mappings":"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"}

package/dist/_chunks/{tag-CdA0s_VV.js → tag-BQXwuJq1.js}

@@ -1,9 +1,9 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as q, useRef as F, useState as E, useEffect as G } from "react";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as X, useRef as q, useState as E, useEffect as F } from "react";
 import { c as B } from "./index-D2ZczOXr.js";
-import { useTranslation as H } from "react-i18next";
+import { useTranslation as G } from "react-i18next";
 import { T as v } from "./tooltip-DvmfrNvB.js";
-import { X as J } from "./x-CCcI3eJp.js";
+import { X as H } from "./x-CCcI3eJp.js";
 const V = B(
   [
     "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
@@ -26,7 +26,10 @@ const V = B(
         brand: ""
       },
       fill: {
-        solid: "",
+        // Solid chips carry a subtle, theme-aware border (a low-opacity
+        // foreground mix) so they read as a defined chip on any surface, not a
+        // floating fill — works across every colour variant, light and dark.
+        solid: "ds:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)]",
         outline: "ds:border ds:border-[color:var(--border)] ds:bg-transparent"
       },
       size: {
@@ -43,7 +46,7 @@ const V = B(
       {
         fill: "solid",
         variant: "neutral",
-        className: "ds:bg-muted/20 ds:text-muted-foreground"
+        className: "ds:bg-muted/20 ds:text-muted-foreground ds:border-[color:var(--border)]"
       },
       {
         fill: "solid",
@@ -74,7 +77,7 @@ const V = B(
       {
         fill: "outline",
         variant: "neutral",
-        className: "ds:border-muted ds:text-muted-foreground"
+        className: "ds:border-[color:var(--border)] ds:text-muted-foreground"
       },
       {
         fill: "outline",
@@ -108,7 +111,7 @@ const V = B(
       size: "md"
     }
   }
-), L = B(
+), J = B(
   [
     "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0 ds:rounded-full",
     // Negative end margin keeps the button flush with the pill edge
@@ -129,48 +132,48 @@ const V = B(
     },
     defaultVariants: { size: "md" }
   }
-), M = q(
+), L = X(
   ({
     label: o,
     variant: g = "neutral",
     fill: p = "solid",
-    size: a = "md",
+    size: t = "md",
     leading: m,
-    onRemove: t,
+    onRemove: a,
     onClick: b,
-    disabled: e = !1,
+    disabled: r = !1,
     maxInlineSize: n = "none",
     className: h
   }, i) => {
-    const { t: w } = H(), y = F(null), [D, C] = E(!1), [O, R] = E("");
-    G(() => {
+    const { t: w } = G(), y = q(null), [D, C] = E(!1), [O, R] = E("");
+    F(() => {
       const s = y.current;
       if (!s || n === "none") return;
       const z = () => C(s.scrollWidth > s.clientWidth), j = new ResizeObserver(z);
       return j.observe(s), z(), () => j.disconnect();
     }, [n]);
     const W = (s) => {
-      (s.key === "Backspace" || s.key === "Delete") && t && !e && (s.preventDefault(), x(), setTimeout(t, 100));
+      (s.key === "Backspace" || s.key === "Delete") && a && !r && (s.preventDefault(), x(), setTimeout(a, 100));
     }, x = () => {
       R(w("tag.removed", { label: o }));
     }, K = () => {
-      !e && t && (x(), setTimeout(t, 100));
-    }, d = !!t, N = !!b && !d, T = V({
+      !r && a && (x(), setTimeout(a, 100));
+    }, d = !!a, N = !!b && !d, T = V({
       variant: g,
       fill: p,
-      size: a,
+      size: t,
       className: [
-        N && !e ? "ds:hover:brightness-90 ds:cursor-pointer" : "",
+        N && !r ? "ds:hover:brightness-90 ds:cursor-pointer" : "",
         h ?? ""
       ].filter(Boolean).join(" ")
-    }), l = m ? /* @__PURE__ */ r(
+    }), l = m ? /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": "true",
         className: "ds:shrink-0 ds:inline-flex ds:items-center ds:[&>svg]:size-3.5",
         children: m
       }
-    ) : null, c = /* @__PURE__ */ r(
+    ) : null, c = /* @__PURE__ */ e(
       "span",
       {
         ref: y,
@@ -178,16 +181,16 @@ const V = B(
         style: n !== "none" ? { maxInlineSize: n } : void 0,
         children: o
       }
-    ), A = /* @__PURE__ */ r("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: O }), X = d ? /* @__PURE__ */ r(
+    ), _ = /* @__PURE__ */ e("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: O }), A = d ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         "aria-label": w("tag.remove", { label: o }),
         onClick: K,
-        disabled: e,
+        disabled: r,
         tabIndex: -1,
-        className: L({ size: a }),
-        children: /* @__PURE__ */ r(J, { "aria-hidden": "true" })
+        className: J({ size: t }),
+        children: /* @__PURE__ */ e(H, { "aria-hidden": "true" })
       }
     ) : null, u = n !== "none" && D;
     if (N) {
@@ -196,8 +199,8 @@ const V = B(
         {
           ref: i,
           type: "button",
-          onClick: e ? void 0 : b,
-          disabled: e,
+          onClick: r ? void 0 : b,
+          disabled: r,
           "data-component": "tag",
           className: T,
           children: [
@@ -206,7 +209,7 @@ const V = B(
           ]
         }
       );
-      return u ? /* @__PURE__ */ r(v, { label: o, children: s }) : s;
+      return u ? /* @__PURE__ */ e(v, { label: o, children: s }) : s;
     }
     if (d) {
       const s = (
@@ -217,39 +220,39 @@ const V = B(
             ref: i,
             role: "group",
             "aria-label": o,
-            tabIndex: e ? -1 : 0,
-            "aria-disabled": e || void 0,
+            tabIndex: r ? -1 : 0,
+            "aria-disabled": r || void 0,
             onKeyDown: W,
             "data-component": "tag",
             className: T,
             children: [
-              A,
+              _,
               l,
               c,
-              X
+              A
             ]
           }
         )
       );
-      return u ? /* @__PURE__ */ r(v, { label: o, children: s }) : s;
+      return u ? /* @__PURE__ */ e(v, { label: o, children: s }) : s;
     }
     const k = /* @__PURE__ */ f(
       "span",
       {
         ref: i,
         "data-component": "tag",
-        className: V({ variant: g, fill: p, size: a, className: h }),
+        className: V({ variant: g, fill: p, size: t, className: h }),
         children: [
           l,
           c
         ]
       }
     );
-    return u ? /* @__PURE__ */ r(v, { label: o, children: k }) : k;
+    return u ? /* @__PURE__ */ e(v, { label: o, children: k }) : k;
   }
 );
-M.displayName = "Tag";
+L.displayName = "Tag";
 export {
-  M as T
+  L as T
 };
-//# sourceMappingURL=tag-CdA0s_VV.js.map
+//# sourceMappingURL=tag-BQXwuJq1.js.map

package/dist/_chunks/tag-BQXwuJq1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-BQXwuJq1.js","sources":["../../src/components/tag/tag.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, useEffect, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { Tooltip } from '../tooltip';\n\n/* ------------------------------------------------------------------ */\n/* CVA — tag pill                                                       */\n/* ------------------------------------------------------------------ */\n\nconst tagVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]',\n    'ds:rounded-[var(--radius-full)]',\n    'type-eyebrow ds:whitespace-nowrap',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50',\n    'ds:disabled:cursor-not-allowed ds:disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        neutral: '',\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        brand: '',\n      },\n      fill: {\n        // Solid chips carry a subtle, theme-aware border (a low-opacity\n        // foreground mix) so they read as a defined chip on any surface, not a\n        // floating fill — works across every colour variant, light and dark.\n        solid:\n          'ds:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)]',\n        outline: 'ds:border ds:border-[color:var(--border)] ds:bg-transparent',\n      },\n      size: {\n        // Symmetric start/end padding — close button uses negative margin to stay flush.\n        // Size is the only eyebrow-role axis that varies per Tag size; weight, transform,\n        // tracking, line-height, and features all come from `.type-eyebrow` on the base.\n        sm: 'ds:h-[calc(var(--spacing)*4)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        md: 'ds:h-[calc(var(--spacing)*5)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        lg: 'ds:h-[calc(var(--spacing)*6)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-xs)]',\n      },\n    },\n    compoundVariants: [\n      // Solid fills — foreground tokens adapt per theme\n      {\n        fill: 'solid',\n        variant: 'neutral',\n        className:\n          'ds:bg-muted/20 ds:text-muted-foreground ds:border-[color:var(--border)]',\n      },\n      {\n        fill: 'solid',\n        variant: 'info',\n        className: 'ds:bg-info ds:text-[color:var(--info-solid-foreground)]',\n      },\n      {\n        fill: 'solid',\n        variant: 'success',\n        className:\n          'ds:bg-success ds:text-[color:var(--success-solid-foreground)]',\n      },\n      {\n        fill: 'solid',\n        variant: 'warning',\n        className: 'ds:bg-warning ds:text-foreground',\n      },\n      {\n        fill: 'solid',\n        variant: 'error',\n        className: 'ds:bg-destructive ds:text-destructive-foreground',\n      },\n      {\n        fill: 'solid',\n        variant: 'brand',\n        className: 'ds:bg-primary ds:text-primary-foreground',\n      },\n      // Outline fills\n      {\n        fill: 'outline',\n        variant: 'neutral',\n        className: 'ds:border-[color:var(--border)] ds:text-muted-foreground',\n      },\n      {\n        fill: 'outline',\n        variant: 'info',\n        className: 'ds:border-info ds:text-[var(--info-foreground)]',\n      },\n      {\n        fill: 'outline',\n        variant: 'success',\n        className: 'ds:border-success ds:text-[var(--success-foreground)]',\n      },\n      {\n        fill: 'outline',\n        variant: 'warning',\n        className: 'ds:border-warning ds:text-[var(--warning-foreground)]',\n      },\n      {\n        fill: 'outline',\n        variant: 'error',\n        className: 'ds:border-destructive ds:text-[var(--error-foreground)]',\n      },\n      {\n        fill: 'outline',\n        variant: 'brand',\n        className: 'ds:border-primary ds:text-primary',\n      },\n    ],\n    defaultVariants: {\n      variant: 'neutral',\n      fill: 'solid',\n      size: 'md',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* CVA — close button                                                   */\n/* ------------------------------------------------------------------ */\n\nconst closeButtonVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:justify-center ds:shrink-0 ds:rounded-full',\n    // Negative end margin keeps the button flush with the pill edge\n    'ds:-me-[var(--spacing-xs)]',\n    'ds:hover:bg-foreground/10',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:disabled:cursor-not-allowed ds:disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'ds:p-1 ds:[&>svg]:size-3',\n        md: 'ds:p-1 ds:[&>svg]:size-3.5',\n        lg: 'ds:p-1.5 ds:[&>svg]:size-4',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* TagProps                                                             */\n/* ------------------------------------------------------------------ */\n\nexport interface TagProps {\n  /** The visible label text */\n  label: string;\n  /** Semantic colour variant */\n  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'brand';\n  /** Visual fill style */\n  fill?: 'solid' | 'outline';\n  /** Size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Leading slot — icon element or dot */\n  leading?: ReactNode;\n  /** Called when the tag is removed (enables close button + Backspace/Delete) */\n  onRemove?: () => void;\n  /** Called when the tag is clicked (non-removable interactive tag) */\n  onClick?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Max inline size before truncation with tooltip — default 'none' */\n  maxInlineSize?: string | 'none';\n  /** Additional class names */\n  className?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Tag                                                                  */\n/* ------------------------------------------------------------------ */\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      variant = 'neutral',\n      fill = 'solid',\n      size = 'md',\n      leading,\n      onRemove,\n      onClick,\n      disabled = false,\n      maxInlineSize = 'none',\n      className,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const labelRef = useRef<HTMLSpanElement>(null);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n    const [announcement, setAnnouncement] = useState('');\n\n    useEffect(() => {\n      const el = labelRef.current;\n      if (!el || maxInlineSize === 'none') return;\n\n      const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);\n      const observer = new ResizeObserver(check);\n      observer.observe(el);\n      check();\n      return () => observer.disconnect();\n    }, [maxInlineSize]);\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (\n        (e.key === 'Backspace' || e.key === 'Delete') &&\n        onRemove &&\n        !disabled\n      ) {\n        e.preventDefault();\n        announce();\n        // Delay gives the live region one render cycle before unmount\n        setTimeout(onRemove, 100);\n      }\n    };\n\n    const announce = () => {\n      setAnnouncement(t('tag.removed', { label }));\n    };\n\n    const handleRemove = () => {\n      if (!disabled && onRemove) {\n        announce();\n        setTimeout(onRemove, 100);\n      }\n    };\n\n    const isRemovable = !!onRemove;\n    const isClickable = !!onClick && !isRemovable;\n\n    const rootClasses = tagVariants({\n      variant,\n      fill,\n      size,\n      className: [\n        isClickable && !disabled\n          ? 'ds:hover:brightness-90 ds:cursor-pointer'\n          : '',\n        className ?? '',\n      ]\n        .filter(Boolean)\n        .join(' '),\n    });\n\n    const leadingEl = leading ? (\n      <span\n        aria-hidden=\"true\"\n        className=\"ds:shrink-0 ds:inline-flex ds:items-center ds:[&>svg]:size-3.5\"\n      >\n        {leading}\n      </span>\n    ) : null;\n\n    // Consumer-controlled layout constraint — not a design token.\n    // maxInlineSize is an arbitrary caller-supplied value that cannot be expressed\n    // as a static Tailwind class; the style prop is the only cross-browser option.\n    const labelEl = (\n      <span\n        ref={labelRef}\n        className={\n          maxInlineSize !== 'none'\n            ? 'ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap'\n            : undefined\n        }\n        // eslint-disable-next-line react/forbid-dom-props -- caller-supplied maxInlineSize, runtime-computed\n        style={maxInlineSize !== 'none' ? { maxInlineSize } : undefined}\n      >\n        {label}\n      </span>\n    );\n\n    // Live region — only for removable tags; must be a sibling outside the button.\n    const liveRegion = (\n      <span role=\"status\" aria-live=\"polite\" className=\"ds:sr-only\">\n        {announcement}\n      </span>\n    );\n\n    const closeButton = isRemovable ? (\n      <button\n        type=\"button\"\n        aria-label={t('tag.remove', { label })}\n        onClick={handleRemove}\n        disabled={disabled}\n        // Intentionally excluded from tab order: Backspace/Delete on the focused\n        // group element provides the same keyboard action.\n        tabIndex={-1}\n        className={closeButtonVariants({ size })}\n      >\n        <X aria-hidden=\"true\" />\n      </button>\n    ) : null;\n\n    const shouldWrapTooltip = maxInlineSize !== 'none' && isOverflowing;\n\n    // Clickable tag — renders as <button>; live region is a sibling, not inside button\n    if (isClickable) {\n      const tagEl = (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={!disabled ? onClick : undefined}\n          disabled={disabled}\n          data-component=\"tag\"\n          className={rootClasses}\n        >\n          {leadingEl}\n          {labelEl}\n        </button>\n      );\n      return shouldWrapTooltip ? (\n        <Tooltip label={label}>{tagEl}</Tooltip>\n      ) : (\n        tagEl\n      );\n    }\n\n    // Removable tag — focusable <span> with embedded close button\n    if (isRemovable) {\n      const tagEl = (\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- removable tag is focusable as a group; Backspace/Delete keyboard removal handled via onKeyDown\n        <span\n          ref={ref as React.Ref<HTMLSpanElement>}\n          role=\"group\"\n          aria-label={label}\n          tabIndex={disabled ? -1 : 0}\n          aria-disabled={disabled || undefined}\n          onKeyDown={handleKeyDown}\n          data-component=\"tag\"\n          className={rootClasses}\n        >\n          {liveRegion}\n          {leadingEl}\n          {labelEl}\n          {closeButton}\n        </span>\n      );\n      return shouldWrapTooltip ? (\n        <Tooltip label={label}>{tagEl}</Tooltip>\n      ) : (\n        tagEl\n      );\n    }\n\n    // Decorative tag — plain <span>, no interactive role\n    const tagEl = (\n      <span\n        ref={ref as React.Ref<HTMLSpanElement>}\n        data-component=\"tag\"\n        className={tagVariants({ variant, fill, size, className })}\n      >\n        {leadingEl}\n        {labelEl}\n      </span>\n    );\n    return shouldWrapTooltip ? <Tooltip label={label}>{tagEl}</Tooltip> : tagEl;\n  },\n);\n\nTag.displayName = 'Tag';\n"],"names":["tagVariants","cva","closeButtonVariants","Tag","forwardRef","label","variant","fill","size","leading","onRemove","onClick","disabled","maxInlineSize","className","ref","t","useTranslation","labelRef","useRef","isOverflowing","setIsOverflowing","useState","announcement","setAnnouncement","useEffect","el","check","observer","handleKeyDown","e","announce","handleRemove","isRemovable","isClickable","rootClasses","leadingEl","jsx","labelEl","liveRegion","closeButton","X","shouldWrapTooltip","tagEl","jsxs","Tooltip"],"mappings":"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"}

package/dist/_chunks/{transaction-chip-BZCa6XDn.js → transaction-chip-BrW8P50O.js}

@@ -65,15 +65,15 @@ const L = [
         // Text uses the deeper `*-foreground` token (matching Badge / Tag) so
         // small chip text clears WCAG AA (4.5:1) against the 10% tinted
         // background. The surface and border use the lighter alias.
-        debt: "ds:bg-destructive/10 ds:text-[color:var(--error-foreground)] ds:border-destructive/20",
-        credit: "ds:bg-success/10 ds:text-[color:var(--success-foreground)] ds:border-success/20",
+        debt: "ds:bg-destructive/10 ds:text-[color:var(--error-foreground)] ds:border-[color:var(--error-foreground)]",
+        credit: "ds:bg-success/10 ds:text-[color:var(--success-foreground)] ds:border-[color:var(--success-foreground)]",
         // The orange "to-invoice" tint has no kit-wide semantic alias — see
         // src/tokens/index.css §Transaction-chip-scoped tokens. The component
         // owns the alias because the customer-anchored "Da fatturare" orange
         // is distinct from `--warning` (yellow) and from `--destructive`.
-        "to-invoice": "ds:bg-transaction-chip-to-invoice/10 ds:text-[color:var(--transaction-chip-to-invoice-foreground)] ds:border-transaction-chip-to-invoice/20",
-        "to-deliver": "ds:bg-info/10 ds:text-[color:var(--info-foreground)] ds:border-info/20",
-        settled: "ds:bg-muted/30 ds:text-muted-foreground ds:border-muted/40"
+        "to-invoice": "ds:bg-transaction-chip-to-invoice/10 ds:text-[color:var(--transaction-chip-to-invoice-foreground)] ds:border-[color:var(--transaction-chip-to-invoice-foreground)]",
+        "to-deliver": "ds:bg-info/10 ds:text-[color:var(--info-foreground)] ds:border-[color:var(--info-foreground)]",
+        settled: "ds:bg-muted/30 ds:text-muted-foreground ds:border-[color:var(--border)]"
       },
       size: {
         // Heights tuned for table-cell density (sm), default app surfaces (md),
@@ -116,24 +116,24 @@ const L = [
 ), G = T(
   ({
     state: e,
-    amount: m,
-    currency: t = D,
-    locale: v,
-    size: r = "md",
+    amount: v,
+    currency: r = D,
+    locale: m,
+    size: t = "md",
     showLabel: f = !1,
-    className: p,
-    "aria-label": u,
+    className: u,
+    "aria-label": p,
     ...g
   }, b) => {
-    const { t: o, i18n: h } = C(), a = v ?? h.language ?? "en", x = F[e], i = M[e], n = Math.abs(m), y = new Intl.NumberFormat(a, {
+    const { t: o, i18n: h } = C(), a = m ?? h.language ?? "en", x = F[e], i = M[e], n = Math.abs(v), y = new Intl.NumberFormat(a, {
       style: "currency",
-      currency: t,
+      currency: r,
       signDisplay: "never"
     }).format(n), d = o(`financial.state.${S[e]}`), w = new Intl.NumberFormat(a, {
       style: "currency",
-      currency: t,
+      currency: r,
       signDisplay: e === "debt" ? "always" : "auto"
-    }).format(n * V[e]), z = u ?? o("financial.aria.label", {
+    }).format(n * V[e]), z = p ?? o("financial.aria.label", {
       state: d,
       amount: w
     });
@@ -147,13 +147,13 @@ const L = [
         "data-state": e,
         className: U({
           state: e,
-          size: r,
+          size: t,
           bold: e !== "settled",
-          className: p
+          className: u
         }),
         ...g,
         children: [
-          /* @__PURE__ */ s("span", { "aria-hidden": "true", className: j({ size: r }), children: /* @__PURE__ */ s(x, {}) }),
+          /* @__PURE__ */ s("span", { "aria-hidden": "true", className: j({ size: t }), children: /* @__PURE__ */ s(x, {}) }),
           f && /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "type-eyebrow", children: d }),
           i && /* @__PURE__ */ s(
             "span",
@@ -182,4 +182,4 @@ export {
   G as T,
   R as a
 };
-//# sourceMappingURL=transaction-chip-BZCa6XDn.js.map
+//# sourceMappingURL=transaction-chip-BrW8P50O.js.map