@alfadocs/ui-kit 0.43.0 → 0.45.0

package/dist/_chunks/{unit-converter-CuXCXJhK.js → unit-converter-u3CwNDpP.js}

@@ -1,12 +1,12 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as j, useState as g, useMemo as _, useEffect as A } from "react";
-import { c as B } from "./index-D2ZczOXr.js";
-import { useTranslation as G } from "react-i18next";
+import { forwardRef as z, useState as p, useMemo as I, useEffect as A } from "react";
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as j } from "react-i18next";
 import { F as v } from "./form-field-BOm9hK35.js";
-import { N as Y } from "./number-input-Dj5L3pXK.js";
-import { S as y } from "./select-hsCaJSX3.js";
-import { I as D } from "./insert-result-DisOY2G-.js";
-const F = {
+import { N as B } from "./number-input-Dj5L3pXK.js";
+import { S as C } from "./select-hsCaJSX3.js";
+import { I as L } from "./insert-result-C5ABnzDl.js";
+const _ = {
   // weight → base kg
   kg: { id: "kg", category: "weight", factor: 1, offset: 0 },
   g: { id: "g", category: "weight", factor: 1e-3, offset: 0 },
@@ -23,133 +23,155 @@ const F = {
   // glucose → base mmol/L (1 mg/dL = 1/18.0156 mmol/L)
   mmol_l: { id: "mmol_l", category: "glucose", factor: 1, offset: 0 },
   mg_dl: { id: "mg_dl", category: "glucose", factor: 1 / 18.0156, offset: 0 }
-}, p = {
+}, h = {
   weight: ["kg", "g", "lb", "oz"],
   length: ["cm", "m", "in", "ft"],
   temperature: ["c", "f"],
   glucose: ["mmol_l", "mg_dl"]
-}, L = [
+}, D = [
   "weight",
   "length",
   "temperature",
   "glucose"
 ];
-function M(c, r, f) {
-  const o = F[r], n = F[f];
-  if (!o || !n) throw new Error(`Unknown unit: ${r} → ${f}`);
-  if (o.category !== n.category)
+function K(r, n, f) {
+  const o = _[n], a = _[f];
+  if (!o || !a) throw new Error(`Unknown unit: ${n} → ${f}`);
+  if (o.category !== a.category)
     throw new Error(
-      `Cannot convert across categories: ${o.category} → ${n.category}`
+      `Cannot convert across categories: ${o.category} → ${a.category}`
     );
-  return (c * o.factor + o.offset - n.offset) / n.factor;
+  return (r * o.factor + o.offset - a.offset) / a.factor;
 }
-const q = B("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
+const M = Y("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
   variants: {
     width: { full: "ds:w-full", auto: "ds:inline-flex" }
   },
   defaultVariants: { width: "full" }
-}), H = j(
+}), q = {
+  weight: "--info",
+  length: "--success",
+  temperature: "--warning-readable",
+  glucose: "--accent"
+};
+function J(r) {
+  return q[r];
+}
+const P = z(
   ({
-    defaultCategory: c = "weight",
-    onResultChange: r,
+    defaultCategory: r = "weight",
+    onResultChange: n,
     onInsert: f,
     insertVariant: o = "insert",
-    onCopy: n,
-    onError: C,
-    id: U,
-    width: E,
-    className: S
-  }, T) => {
-    const { t, i18n: b } = G(), [$, V] = g(c), [i, k] = g(null), [m, w] = g(
-      p[c][0]
-    ), [l, x] = g(
-      p[c][1]
-    ), O = (s) => {
-      const I = s, h = p[I];
-      V(I), w(h[0]), x(h[1] ?? h[0]);
-    }, a = _(
-      () => i === null ? null : M(i, m, l),
-      [i, m, l]
-    ), u = _(
-      () => new Intl.NumberFormat(b.language, { maximumFractionDigits: 3 }),
-      [b.language]
+    onCopy: a,
+    onError: b,
+    insertBrand: E,
+    id: F,
+    width: U,
+    className: k
+  }, O) => {
+    const { t, i18n: $ } = j(), [m, S] = p(r), [c, G] = p(null), [u, w] = p(
+      h[r][0]
+    ), [l, N] = p(
+      h[r][1]
+    ), V = (s) => {
+      const T = s, y = h[T];
+      S(T), w(y[0]), N(y[1] ?? y[0]);
+    }, i = I(
+      () => c === null ? null : K(c, u, l),
+      [c, u, l]
+    ), g = I(
+      () => new Intl.NumberFormat($.language, { maximumFractionDigits: 3 }),
+      [$.language]
     );
     A(() => {
-      r == null || r(a);
-    }, [a, r]);
-    const z = L.map((s) => ({
+      n == null || n(i);
+    }, [i, n]);
+    const H = D.map((s) => ({
       value: s,
       label: t(`unitConverter.category.${s}`)
-    })), N = p[$].map((s) => ({
+    })), x = h[m].map((s) => ({
       value: s,
       label: t(`unitConverter.units.${s}`)
     }));
     return /* @__PURE__ */ d(
       "div",
       {
-        ref: T,
+        ref: O,
         "data-component": "unit-converter",
-        "data-component-id": U,
-        className: q({ width: E, className: S }),
+        "data-component-id": F,
+        className: M({ width: U, className: k }),
         children: [
           /* @__PURE__ */ e(v, { label: t("unitConverter.categoryLabel"), children: /* @__PURE__ */ e(
-            y,
+            C,
             {
-              options: z,
-              value: $,
-              onValueChange: O
+              options: H,
+              value: m,
+              onValueChange: V
             }
           ) }),
           /* @__PURE__ */ d("div", { className: "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:sm:grid-cols-3", children: [
-            /* @__PURE__ */ e(v, { label: t("unitConverter.value"), children: /* @__PURE__ */ e(Y, { mode: "decimal", value: i, onChange: k }) }),
+            /* @__PURE__ */ e(v, { label: t("unitConverter.value"), children: /* @__PURE__ */ e(B, { mode: "decimal", value: c, onChange: G }) }),
             /* @__PURE__ */ e(v, { label: t("unitConverter.from"), children: /* @__PURE__ */ e(
-              y,
+              C,
               {
-                options: N,
-                value: m,
+                options: x,
+                value: u,
                 onValueChange: w
               }
             ) }),
             /* @__PURE__ */ e(v, { label: t("unitConverter.to"), children: /* @__PURE__ */ e(
-              y,
+              C,
               {
-                options: N,
+                options: x,
                 value: l,
-                onValueChange: x
+                onValueChange: N
               }
             ) })
           ] }),
-          /* @__PURE__ */ e("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: a !== null ? `${u.format(i ?? 0)} ${t(
-            `unitConverter.units.${m}`
-          )} = ${u.format(a)} ${t(
+          /* @__PURE__ */ e("p", { className: "ds:sr-only", role: "status", "aria-live": "polite", children: i !== null ? `${g.format(c ?? 0)} ${t(
+            `unitConverter.units.${u}`
+          )} = ${g.format(i)} ${t(
             `unitConverter.units.${l}`
           )}` : "" }),
-          a !== null ? /* @__PURE__ */ d("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          i !== null ? /* @__PURE__ */ d("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
             /* @__PURE__ */ e("span", { className: "type-label ds:text-muted-foreground", children: t("unitConverter.result") }),
             /* @__PURE__ */ d("span", { className: "type-metric ds:text-foreground", children: [
-              u.format(a),
+              g.format(i),
               " ",
               t(`unitConverter.units.${l}`)
             ] }),
             o === "copy" || f ? /* @__PURE__ */ e(
-              D,
+              L,
               {
                 variant: o,
                 onInsert: f,
-                onCopy: n,
-                onError: C,
+                onCopy: a,
+                onError: b,
                 card: {
                   title: t("insert.title.unitConverter"),
+                  icon: "ruler",
+                  highlight: t(`unitConverter.category.${m}`),
+                  // Chip tints by measurement family so the inserted card
+                  // signals the category at a glance — with the contrast-safe
+                  // orange override for the `--warning` temperature family.
+                  highlightToken: J(m),
+                  brand: E,
                   fields: [
                     {
+                      // Source measurement → ruler glyph (matches the header).
+                      icon: "ruler",
                       label: t("unitConverter.from"),
-                      value: `${u.format(i ?? 0)} ${t(
-                        `unitConverter.units.${m}`
+                      value: `${g.format(c ?? 0)} ${t(
+                        `unitConverter.units.${u}`
                       )}`
                     },
                     {
+                      // Converted result → trending-up (arrow) glyph signals the
+                      // conversion direction to the output value.
+                      icon: "trending-up",
                       label: t("unitConverter.to"),
-                      value: `${u.format(a)} ${t(
+                      value: `${g.format(i)} ${t(
                         `unitConverter.units.${l}`
                       )}`
                     }
@@ -163,12 +185,12 @@ const q = B("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
     );
   }
 );
-H.displayName = "UnitConverter";
+P.displayName = "UnitConverter";
 export {
-  L as C,
-  F as U,
-  p as a,
-  H as b,
-  M as c
+  D as C,
+  _ as U,
+  h as a,
+  P as b,
+  K as c
 };
-//# sourceMappingURL=unit-converter-CuXCXJhK.js.map
+//# sourceMappingURL=unit-converter-u3CwNDpP.js.map

package/dist/_chunks/{wallet-pay-button-DK4ESYge.js → wallet-pay-button-DuDPBlCO.js}

@@ -2,7 +2,7 @@ import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { forwardRef as B } from "react";
 import { c as S } from "./index-D2ZczOXr.js";
 import { useTranslation as H } from "react-i18next";
-import { S as P } from "./spinner-CCByyvcb.js";
+import { S as P } from "./spinner-OjQNn8oN.js";
 function V({ className: a }) {
   return /* @__PURE__ */ s(
     "svg",
@@ -247,4 +247,4 @@ R.displayName = "WalletPayButton";
 export {
   R as W
 };
-//# sourceMappingURL=wallet-pay-button-DK4ESYge.js.map
+//# sourceMappingURL=wallet-pay-button-DuDPBlCO.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.43.0",
+  "packageVersion": "0.45.0",
   "components": [
     {
       "kind": "component",

package/dist/components/_shared/banded-gauge.d.ts

@@ -0,0 +1,193 @@
+/** One coloured zone of the track, filled up to (and excluding) `upTo`. */
+export interface BandedGaugeBand {
+    /**
+     * Upper boundary of the band on the scale (exclusive). The final band's
+     * `upTo` is conventionally the scale `max` so it fills to the bar end.
+     */
+    upTo: number;
+    /**
+     * DS token NAME for the band fill — e.g. `'--info'`, `'--success'`,
+     * `'--warning-readable'`, `'--destructive'`. Resolved by the surface's
+     * `resolve` callback (concrete `rgb()` for the card, `var(<token>)` for the
+     * widget). Never a hex/rgb literal in source.
+     */
+    colorToken: string;
+}
+/**
+ * A banded-linear gauge. Every visible string (`valueLabel`, `categoryLabel`,
+ * `rangeLabel`, `ariaLabel`) arrives ALREADY TRANSLATED — this module is
+ * i18n-agnostic; the BMI calculator supplies `t()`-resolved text.
+ */
+export interface BandedGaugeModel {
+    /** The true value (printed verbatim even when clamped to a bar end). */
+    value: number;
+    /** Ascending coloured zones; the last `upTo` should equal `max`. */
+    bands: BandedGaugeBand[];
+    /** Low end of the drawn scale (maps to the bar's inline start). */
+    min: number;
+    /** High end of the drawn scale (maps to the bar's inline end). */
+    max: number;
+    /** Big number rendered above the marker (e.g. `'24.6'`). */
+    valueLabel: string;
+    /** Band name shown beside the value (e.g. `'normal'`). Pre-translated. */
+    categoryLabel?: string;
+    /** Range string for the band (e.g. `'18.5–24.9'`). Pre-translated. */
+    rangeLabel?: string;
+    /** Full accessible name, e.g. `'BMI 24.6 — normal (18.5–24.9)'`. */
+    ariaLabel: string;
+    /** Threshold tick values drawn under the bar (e.g. `[18.5, 25, 30]`). */
+    ticks?: number[];
+}
+/** Drawn BMI scale: 15 (deep underweight) → 40 (deep obesity). */
+export declare const BMI_BANDED_MIN = 15;
+export declare const BMI_BANDED_MAX = 40;
+/** WHO adult cut-offs drawn as ticks under the bar. */
+export declare const BMI_BAND_THRESHOLDS: readonly [18.5, 25, 30];
+/**
+ * The four WHO zones as `{ upTo, colorToken }`, plus the scale + ticks, so
+ * both the on-screen widget and the insert card share ONE definition:
+ *
+ *   underweight  < 18.5      → `--info`
+ *   normal       18.5–24.9   → `--success`
+ *   overweight   25–29.9     → `--warning-readable`  (contrast-safe orange)
+ *   obese        ≥ 30        → `--destructive`        (one obese zone)
+ *
+ * `--warning-readable` is the kit's contrast-safe orange token — it already
+ * resolves correctly per theme (orange-600 in light/non-accessible, `--warning`
+ * elsewhere), so NO `document.documentElement` JS override is needed here.
+ */
+export declare function bmiBands(): {
+    bands: BandedGaugeBand[];
+    min: number;
+    max: number;
+    ticks: number[];
+};
+/** One filled zone rect in card/widget coordinates. */
+export interface BandRect {
+    /** Inline-start x of the zone. */
+    x: number;
+    /** Zone width. */
+    w: number;
+    /** Token NAME to fill it with (resolved by the surface). */
+    colorToken: string;
+}
+/** The value marker: its drawn x plus the clamp envelope it lives in. */
+export interface MarkerGeometry {
+    /** Drawn x of the marker (clamped into `[clampedStart, clampedEnd]`). */
+    x: number;
+    /** Inline-start x the marker can reach (bar start). */
+    clampedStart: number;
+    /** Inline-end x the marker can reach (bar end). */
+    clampedEnd: number;
+    /**
+     * `'start'` when the true value sits below `min` (marker pinned to the bar
+     * start), `'end'` when it sits above `max`, `null` when it's in range. Drives
+     * the out-of-range caret/chevron.
+     */
+    overflow: 'start' | 'end' | null;
+}
+/** A threshold tick: its x plus the scale value it marks. */
+export interface TickGeometry {
+    x: number;
+    value: number;
+}
+/** Everything the two builders need, derived once. */
+export interface BandedGaugeGeometry {
+    /** Outer SVG width. */
+    width: number;
+    /** Outer SVG height. */
+    height: number;
+    /** Inline-start x of the bar. */
+    barStart: number;
+    /** Inline-end x of the bar. */
+    barEnd: number;
+    /** Bar top y. */
+    barY: number;
+    /** Bar thickness. */
+    barH: number;
+    /** Bar corner radius. */
+    barRadius: number;
+    /** Coloured zones, left → right. */
+    bands: BandRect[];
+    /** The value marker. */
+    marker: MarkerGeometry;
+    /** Threshold ticks under the bar. */
+    ticks: TickGeometry[];
+    /** Baseline y for the value label above the bar. */
+    valueLabelY: number;
+    /** Baseline y for the tick number labels under the bar. */
+    tickLabelY: number;
+    /** Pre-translated value label (verbatim from the model). */
+    valueLabel: string;
+    /** Optional `category (range)` summary shown beside the value. */
+    summaryLabel: string;
+    /** Full accessible name for `<title>` / `aria-label`. */
+    ariaLabel: string;
+}
+/** Layout knobs for {@link computeBandedGaugeGeometry}. */
+export interface BandedGaugeLayoutOptions {
+    /** Outer SVG width. */
+    width: number;
+    /** Outer SVG height. */
+    height: number;
+}
+export declare const INSET_X = 14;
+/**
+ * Pure geometry pass — the ONE place value→x mapping, band widths, marker
+ * clamping, and tick positions are computed. Both the SVG-string builder and
+ * the JSX component consume this so the two surfaces never drift.
+ *
+ * The marker x is CLAMPED to `[barStart, barEnd]`, but `valueLabel` always
+ * prints the true value; `marker.overflow` flags an out-of-range value so the
+ * surface can draw a caret at the clamped end.
+ */
+export declare function computeBandedGaugeGeometry(model: BandedGaugeModel, { width, height }: BandedGaugeLayoutOptions): BandedGaugeGeometry;
+/** A token-name → concrete-colour resolver supplied by each surface. */
+export type ColorResolver = (colorToken: string) => string;
+/** Theme colours + font + resolver for {@link buildBandedGaugeSvgString}. */
+export interface BandedGaugeSvgOptions {
+    /**
+     * Maps a band token NAME to the colour string painted into the markup. The
+     * card passes a probe-resolved `rgb(...)` resolver so the baked PNG carries
+     * theme-correct colours; never a literal in source.
+     */
+    resolve: ColorResolver;
+    /** Font family for the text (resolved from the theme, e.g. `--font-sans`). */
+    font: string;
+    /** Foreground colour for the value label + marker (concrete). */
+    fg: string;
+    /** Muted colour for the tick numbers + summary (concrete). */
+    muted: string;
+    /** Track / unfilled-rail colour, also used for tick rules (concrete). */
+    track: string;
+}
+export declare function buildBandedGaugeSvgString(geometry: BandedGaugeGeometry, options: BandedGaugeSvgOptions): string;
+export declare const DEFAULT_HEIGHT = 64;
+export interface BandedGaugeProps {
+    /** The gauge model (value, bands, scale, pre-translated labels). */
+    model: BandedGaugeModel;
+    /** SVG width. Defaults to {@link DEFAULT_WIDTH}. */
+    width?: number;
+    /** SVG height. Defaults to {@link DEFAULT_HEIGHT}. */
+    height?: number;
+    /** Extra class names on the root `<svg>`. */
+    className?: string;
+}
+/**
+ * Presentational banded-linear gauge for the on-screen widget. Renders the SAME
+ * geometry as {@link buildBandedGaugeSvgString} but as JSX, filling each band
+ * with `fill="var(<token>)"` so the live theme resolves the colour (and a theme
+ * switch repaints with no re-sample). Visually equivalent to the card string.
+ *
+ * The track + marker are decorative; the accessible name on the root carries
+ * the meaning (`role="img"` + `aria-label`, mirrored in `<title>`). All text in
+ * the model is pre-translated by the caller.
+ *
+ * The measurement axis runs low→high left-to-right regardless of document
+ * direction — SVG coordinates are inherently LTR (a `<rect x>` is unaffected by
+ * `direction`), and `direction="ltr"` is pinned on the root to keep any nested
+ * `<text>` directionality explicit. Logical properties govern the surrounding
+ * layout, never this axis.
+ */
+export declare const BandedGauge: import("react").ForwardRefExoticComponent<BandedGaugeProps & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=banded-gauge.d.ts.map

package/dist/components/_shared/index.d.ts

@@ -2,7 +2,7 @@ export { composeRefs } from './compose-refs';
 export { isSafeImageSrc, safeImageSrc } from './safe-image-src';
 export { SafeHtml, sanitiseHtml, type SafeHtmlProfile, type SafeHtmlProps, } from './safe-html';
 export { groupOptions } from './group-options';
-export { InsertButton, buildResultText, buildResultHtml, buildResultCardSvg, svgCardToPngDataUri, type InsertButtonProps, type InsertVariant, type InsertPayload, type InsertMode, type InsertCardData, type InsertCardField, type SvgCardToPngOptions, } from './insert-result';
+export { InsertButton, buildResultText, buildResultHtml, buildResultCardSvg, svgCardToPngDataUri, svgCardToPng, type InsertButtonProps, type InsertVariant, type InsertPayload, type InsertPngResult, type InsertMode, type InsertCardData, type InsertCardField, type InsertCardGauge, type SvgCardToPngOptions, } from './insert-result';
 export { normalizeDiacritics } from './normalize-diacritics';
 export { useDebouncedCallback } from './use-debounced-callback';
 export { useFocusTrap, type UseFocusTrapOptions } from './use-focus-trap';