@alfadocs/ui-kit 0.32.1 → 0.32.3

package/dist/_chunks/{benefit-card-_Sc-MGha.js → benefit-card-Xnxj4Gmo.js}

@@ -1,7 +1,7 @@
 import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { forwardRef as _, useContext as k, Children as w, createContext as y } from "react";
+import { forwardRef as b, useContext as k, Children as w, createContext as y } from "react";
 import { c as s } from "./index-D2ZczOXr.js";
-const b = [
+const _ = [
   "violet",
   "purple",
   "magenta",
@@ -44,17 +44,17 @@ const b = [
         // matches Card.elevated and PublicFooter compact. The thicker
         // line reads as a deliberate boundary rather than a hairline.
         //
-        // 0.31.9: `border-t-0` on both variants — the 4px accent strip
-        // (absolutely positioned at top:0 inside the border-box) sits
-        // BELOW the top border, so visually you see a thin grey
-        // hairline, then the brand strip. That dilutes the brand
-        // marker. Dropping the top border lets the accent strip BE the
-        // card's top edge. The 3px-and-up strip carries enough
-        // contrast (~5:1 on white in light theme, similar in dark) to
-        // satisfy the accessible theme's ≥3:1 boundary requirement
-        // without the extra hairline.
-        elevated: "ds:shadow-[var(--shadow-card)] ds:border ds:border-t-0 ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:[.theme-accessible_&]:border-t-0",
-        outlined: "ds:border ds:border-t-0 ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:[.theme-accessible_&]:border-t-0"
+        // 0.32.3: restored full 4-sided border. 0.31.9 dropped
+        // `border-top` so the accent strip would be the card's literal
+        // top edge — but with `border-radius: lg` on all 4 corners the
+        // side borders curve toward a non-existent top edge, leaving
+        // the top corners visually "open" (visible page-bg slivers
+        // where the rounded corner outline should close). The 1px
+        // hairline above the accent strip is the cheaper visual cost
+        // — subtle in light theme (14% black) and matches dark-theme
+        // chrome where shadow alone loses contrast.
+        elevated: "ds:shadow-[var(--shadow-card)] ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+        outlined: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2"
       }
     },
     defaultVariants: { variant: "elevated" }
@@ -153,9 +153,9 @@ const b = [
   }
 );
 function S(a, o) {
-  return a !== "auto" ? a : o ? b[o.index % b.length] : "primary";
+  return a !== "auto" ? a : o ? _[o.index % _.length] : "primary";
 }
-const p = _(
+const p = b(
   ({ columns: a = 3, children: o, className: c, ...d }, l) => {
     const i = w.toArray(o);
     return /* @__PURE__ */ r(
@@ -171,7 +171,7 @@ const p = _(
   }
 );
 p.displayName = "BenefitCard.Row";
-const x = _(
+const x = b(
   ({
     step: a,
     icon: o,
@@ -241,4 +241,4 @@ const H = Object.assign(x, {
 export {
   H as B
 };
-//# sourceMappingURL=benefit-card-_Sc-MGha.js.map
+//# sourceMappingURL=benefit-card-Xnxj4Gmo.js.map

package/dist/_chunks/{stat-EC2Papj7.js → stat-Bs80Z6Yv.js}

@@ -1,9 +1,9 @@
 import { jsxs as z, jsx as i } from "react/jsx-runtime";
-import { forwardRef as Q, useId as X, useCallback as L, useRef as Z, useMemo as tt } from "react";
+import { forwardRef as X, useId as Z, useCallback as O, useRef as tt, useMemo as et } from "react";
 import { c as V } from "./index-D2ZczOXr.js";
-import { useTranslation as U } from "react-i18next";
-import { u as et } from "./use-count-up-BLLetaZ8.js";
-const O = V("ds:flex ds:flex-col ds:h-full", {
+import { useTranslation as B } from "react-i18next";
+import { u as st } from "./use-count-up-BLLetaZ8.js";
+const P = V("ds:flex ds:flex-col ds:h-full", {
   variants: {
     variant: {
       default: "ds:gap-[var(--spacing-xs)]",
@@ -14,14 +14,21 @@ const O = V("ds:flex ds:flex-col ds:h-full", {
         "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
         "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
       ].join(" "),
-      // White card surface with the shared card shadow — matches
-      // `Card variant="elevated"` tokens (`--card` + `--shadow-card`) so
-      // a grid of elevated Stats reads as a set of shaded panels without
-      // nesting a Card around each one.
+      // White card surface with the shared card shadow + border —
+      // matches `Card variant="elevated"` and `BenefitCard.elevated`
+      // tokens (`--card`, `--card-border`, `--shadow-card`,
+      // `--radius-lg`) so a grid of elevated Stats reads as a set of
+      // shaded panels without nesting a Card around each one. The
+      // border is essential in dark mode: shadow alone on a dark
+      // surface loses contrast and the card boundary disappears.
+      // Accessible theme bumps to `border-2` to match Card / Benefit-
+      // Card's 0.31.5 accessibility uplift.
       elevated: [
         "ds:gap-[var(--spacing-xs)]",
         "ds:bg-[var(--card)]",
         "ds:text-[var(--card-foreground)]",
+        "ds:border ds:border-[color:var(--card-border)]",
+        "ds:[.theme-accessible_&]:border-2",
         "ds:shadow-[var(--shadow-card)]",
         "ds:rounded-[var(--radius-lg)]",
         "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
@@ -48,7 +55,7 @@ const O = V("ds:flex ds:flex-col ds:h-full", {
     size: "md",
     align: "start"
   }
-}), P = V("type-metric ds:text-[var(--foreground)]", {
+}), U = V("type-metric", {
   variants: {
     size: {
       sm: "ds:[--type-metric-size:var(--font-size-xl)]",
@@ -60,6 +67,22 @@ const O = V("ds:flex ds:flex-col ds:h-full", {
       outlined: "",
       elevated: "",
       compact: ""
+    },
+    // Colour of the headline metric value. Defaults to `--foreground`
+    // (the existing render). `primary` / `accent` are the brand intents
+    // — use for hero / marketing stats where the number IS the visual
+    // marker. `success` / `destructive` / `info` / `warning` map to the
+    // semantic tokens for KPI tiles that want to signal status via the
+    // value colour itself (e.g. revenue green, debt red). The trend
+    // chevron and the label colour are independent of this prop.
+    intent: {
+      foreground: "ds:text-[var(--foreground)]",
+      primary: "ds:text-[var(--primary)]",
+      accent: "ds:text-[var(--accent)]",
+      success: "ds:text-[var(--success)]",
+      destructive: "ds:text-[var(--destructive)]",
+      info: "ds:text-[var(--info)]",
+      warning: "ds:text-[var(--warning)]"
     }
   },
   compoundVariants: [
@@ -81,9 +104,10 @@ const O = V("ds:flex ds:flex-col ds:h-full", {
   ],
   defaultVariants: {
     size: "md",
-    variant: "default"
+    variant: "default",
+    intent: "foreground"
   }
-}), st = V(
+}), rt = V(
   "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-label",
   {
     variants: {
@@ -97,76 +121,77 @@ const O = V("ds:flex ds:flex-col ds:h-full", {
       trend: "flat"
     }
   }
-), rt = { up: "↑", down: "↓", flat: "→" }, at = {
+), at = { up: "↑", down: "↓", flat: "→" }, nt = {
   up: "stat.trend.up",
   down: "stat.trend.down",
   flat: "stat.trend.flat"
 };
-function nt({
+function it({
   trend: d,
   delta: t,
   deltaFormat: c = "decimal",
   locale: a
 }) {
-  const { t: e, i18n: l } = U(), o = typeof t == "string" ? t : new Intl.NumberFormat(a ?? l.language, {
+  const { t: e, i18n: o } = B(), l = typeof t == "string" ? t : new Intl.NumberFormat(a ?? o.language, {
     style: c === "percent" ? "percent" : "decimal"
   }).format(c === "percent" ? t / 100 : t);
-  return /* @__PURE__ */ z("span", { className: st({ trend: d }), children: [
-    /* @__PURE__ */ i("span", { "aria-hidden": "true", children: rt[d] }),
-    /* @__PURE__ */ i("span", { className: "ds:sr-only", children: e(at[d]) }),
-    o
+  return /* @__PURE__ */ z("span", { className: rt({ trend: d }), children: [
+    /* @__PURE__ */ i("span", { "aria-hidden": "true", children: at[d] }),
+    /* @__PURE__ */ i("span", { className: "ds:sr-only", children: e(nt[d]) }),
+    l
   ] });
 }
-function it(d, t) {
+function dt(d, t) {
   const c = d.trim();
   if (c === "") return null;
   let a = "", e = c;
   e.startsWith("+") ? (a = "+", e = e.slice(1).trimStart()) : (e.startsWith("-") || e.startsWith("−")) && (a = "-", e = e.slice(1).trimStart());
-  let l = "";
-  const o = e.match(/[KMB]$/i);
-  o && (l = o[0], e = e.slice(0, -1).trimEnd());
-  let m = "", u = ".";
+  let o = "";
+  const l = e.match(/[KMB]$/i);
+  l && (o = l[0], e = e.slice(0, -1).trimEnd());
+  let u = "", m = ".";
   try {
     const b = new Intl.NumberFormat(t).formatToParts(12345.6);
     for (const n of b)
-      n.type === "group" ? m = n.value : n.type === "decimal" && (u = n.value);
+      n.type === "group" ? u = n.value : n.type === "decimal" && (m = n.value);
   } catch {
   }
   const g = e.match(/^(\d+)\.(\d+)$/);
-  if (g && !(g[2].length === 3 && m === ".")) {
+  if (g && !(g[2].length === 3 && u === ".")) {
     const n = Number.parseFloat(e);
     if (Number.isFinite(n))
-      return { target: n, sign: a, suffix: l };
+      return { target: n, sign: a, suffix: o };
   }
   let s = e;
-  m !== "" && (s = s.split(m).join("")), u !== "." && (s = s.split(u).join(".")), s = s.replace(/[\s\u00A0\u202F]/g, "");
+  u !== "" && (s = s.split(u).join("")), m !== "." && (s = s.split(m).join(".")), s = s.replace(/[\s\u00A0\u202F]/g, "");
   const v = Number.parseFloat(s);
-  return Number.isFinite(v) ? { target: v, sign: a, suffix: l } : null;
+  return Number.isFinite(v) ? { target: v, sign: a, suffix: o } : null;
 }
-const dt = Q(
+const ct = X(
   ({
     label: d,
     value: t,
     format: c,
     currency: a,
     locale: e,
-    trend: l,
-    delta: o,
-    deltaFormat: m = "decimal",
-    icon: u,
+    trend: o,
+    delta: l,
+    deltaFormat: u = "decimal",
+    icon: m,
     loading: g = !1,
     animate: s = !1,
     animateOnEveryView: v = !1,
     animateDurationMs: b = 1600,
     animateLocale: n,
-    animateSeparators: h,
-    variant: x = "default",
+    animateSeparators: x,
+    variant: h = "default",
     size: y = "md",
     align: I = "start",
-    className: M,
-    ...j
-  }, k) => {
-    const { i18n: B } = U(), R = X(), f = e ?? B.language, K = L(() => {
+    intent: M = "foreground",
+    className: j,
+    ...k
+  }, R) => {
+    const { i18n: K } = B(), T = Z(), f = e ?? K.language, _ = O(() => {
       if (typeof t == "string") return t;
       switch (c) {
         case "currency":
@@ -186,10 +211,10 @@ const dt = Q(
           return new Intl.NumberFormat(f).format(t);
       }
     }, [t, c, f, a])(), N = n ?? f;
-    Z(!1);
-    const r = tt(() => s ? typeof t == "number" ? Number.isFinite(t) ? { target: t, sign: "", suffix: "" } : null : it(t, N) : null, [s, t, N]), Y = s && r !== null, _ = (r == null ? void 0 : r.target) ?? 0, F = (r == null ? void 0 : r.sign) ?? "", T = (r == null ? void 0 : r.suffix) ?? "", q = L(
+    tt(!1);
+    const r = et(() => s ? typeof t == "number" ? Number.isFinite(t) ? { target: t, sign: "", suffix: "" } : null : dt(t, N) : null, [s, t, N]), Y = s && r !== null, q = (r == null ? void 0 : r.target) ?? 0, F = (r == null ? void 0 : r.sign) ?? "", $ = (r == null ? void 0 : r.suffix) ?? "", H = O(
       (w) => {
-        const C = (() => {
+        const E = (() => {
           try {
             return new Intl.NumberFormat(N, {
               useGrouping: !0
@@ -199,46 +224,46 @@ const dt = Q(
           }
         })();
         let p;
-        if (C)
-          if (h) {
-            const W = Math.abs(w), A = Math.trunc(W), D = W - A, H = h.thousand ?? "", S = String(A).replace(
+        if (E)
+          if (x) {
+            const A = Math.abs(w), D = Math.trunc(A), G = A - D, J = x.thousand ?? "", S = String(D).replace(
               /\B(?=(\d{3})+(?!\d))/g,
-              H
+              J
             );
-            if (D === 0)
+            if (G === 0)
               p = S;
             else {
-              const G = D.toFixed(6).replace(/0+$/, "").slice(2), J = h.decimal ?? ".";
-              p = G ? S + J + G : S;
+              const L = G.toFixed(6).replace(/0+$/, "").slice(2), Q = x.decimal ?? ".";
+              p = L ? S + Q + L : S;
             }
           } else
-            p = C.format(Math.abs(w));
+            p = E.format(Math.abs(w));
         else
           p = String(Math.abs(w));
-        let E = F;
-        return F === "" && w < 0 && (E = "-"), `${E}${p}${T}`;
+        let W = F;
+        return F === "" && w < 0 && (W = "-"), `${W}${p}${$}`;
       },
-      [N, h, F, T]
-    ), $ = et({
-      to: _,
+      [N, x, F, $]
+    ), C = st({
+      to: q,
       from: 0,
       durationMs: b,
       startOnVisible: !0,
       retriggerOnReEntry: v,
       // `formatter` is the only path we use — it owns both the locale
       // formatting and the sign/suffix re-application.
-      formatter: q
+      formatter: H
     });
     return g ? /* @__PURE__ */ z(
       "div",
       {
-        ref: k,
+        ref: R,
         role: "group",
         "aria-busy": "true",
         "aria-label": d,
         "data-component": "stat",
-        className: O({ variant: x, size: y, align: I, className: M }),
-        ...j,
+        className: P({ variant: h, size: y, align: I, className: j }),
+        ...k,
         children: [
           /* @__PURE__ */ i("div", { className: "ds:h-[var(--skeleton-label-h)] ds:w-[var(--skeleton-label-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" }),
           /* @__PURE__ */ i("div", { className: "ds:h-[var(--skeleton-value-h)] ds:w-[var(--skeleton-value-w)] ds:animate-pulse ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]" })
@@ -247,15 +272,15 @@ const dt = Q(
     ) : /* @__PURE__ */ z(
       "div",
       {
-        ref: k,
+        ref: R,
         role: "group",
-        "aria-labelledby": R,
+        "aria-labelledby": T,
         "data-component": "stat",
-        className: O({ variant: x, size: y, align: I, className: M }),
-        ...j,
+        className: P({ variant: h, size: y, align: I, className: j }),
+        ...k,
         children: [
           /* @__PURE__ */ z("span", { className: "ds:inline-flex ds:items-center", children: [
-            u && /* @__PURE__ */ i(
+            m && /* @__PURE__ */ i(
               "span",
               {
                 "aria-hidden": "true",
@@ -268,13 +293,13 @@ const dt = Q(
                   "ds:text-[color:var(--accent)]",
                   "ds:forced-colors:text-[CanvasText]"
                 ].join(" "),
-                children: u
+                children: m
               }
             ),
             /* @__PURE__ */ i(
               "span",
               {
-                id: R,
+                id: T,
                 className: "type-label ds:text-[var(--muted-foreground)]",
                 children: d
               }
@@ -289,19 +314,19 @@ const dt = Q(
             /* @__PURE__ */ i(
               "span",
               {
-                ref: $.ref,
+                ref: C.ref,
                 "aria-live": "off",
-                className: P({ size: y, variant: x }),
-                children: $.value
+                className: U({ size: y, variant: h, intent: M }),
+                children: C.value
               }
             )
-          ) : /* @__PURE__ */ i("span", { className: P({ size: y, variant: x }), children: K }),
-          l != null && o != null && /* @__PURE__ */ i(
-            nt,
+          ) : /* @__PURE__ */ i("span", { className: U({ size: y, variant: h, intent: M }), children: _ }),
+          o != null && l != null && /* @__PURE__ */ i(
+            it,
             {
-              trend: l,
-              delta: o,
-              deltaFormat: m,
+              trend: o,
+              delta: l,
+              deltaFormat: u,
               locale: e
             }
           )
@@ -310,8 +335,8 @@ const dt = Q(
     );
   }
 );
-dt.displayName = "Stat";
+ct.displayName = "Stat";
 export {
-  dt as S
+  ct as S
 };
-//# sourceMappingURL=stat-EC2Papj7.js.map
+//# sourceMappingURL=stat-Bs80Z6Yv.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.32.1",
+  "packageVersion": "0.32.3",
   "components": [
     {
       "kind": "component",

package/dist/components/benefit-card/index.js

@@ -1,4 +1,4 @@
-import { B as a } from "../../_chunks/benefit-card-_Sc-MGha.js";
+import { B as a } from "../../_chunks/benefit-card-Xnxj4Gmo.js";
 export {
   a as BenefitCard
 };

package/dist/components/stat/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../_chunks/stat-EC2Papj7.js";
+import { S as o } from "../../_chunks/stat-Bs80Z6Yv.js";
 export {
   o as Stat
 };

package/dist/components/stat/stat.d.ts

@@ -24,6 +24,15 @@ export interface StatProps extends HTMLAttributes<HTMLDivElement>, VariantProps<
     deltaFormat?: 'decimal' | 'percent';
     /** Optional leading icon rendered at the start of the label row. */
     icon?: ReactNode;
+    /**
+     * Colour of the headline value. Defaults to `foreground`. Brand
+     * intents (`primary`, `accent`) are for hero / marketing stats where
+     * the number is the visual marker. Semantic intents
+     * (`success`, `destructive`, `info`, `warning`) signal status via
+     * the value colour itself — e.g. revenue green, debt red on KPI
+     * tiles. Trend chevron and label colour are independent.
+     */
+    intent?: 'foreground' | 'primary' | 'accent' | 'success' | 'destructive' | 'info' | 'warning';
     /** Renders animated skeleton placeholders instead of content. */
     loading?: boolean;
     /**

package/dist/index.js

@@ -44,7 +44,7 @@ import { T as Te, t as be } from "./_chunks/time-picker-B5umYwfv.js";
 import { A as Re, a as Ie, b as he, c as Fe, d as Ee } from "./_chunks/accordion-bSU21uTV.js";
 import { A as Ne, g as ke, n as Oe } from "./_chunks/avatar-BNQNhoyL.js";
 import { B as ye } from "./_chunks/badge-zsf5i5bH.js";
-import { B as Me } from "./_chunks/benefit-card-_Sc-MGha.js";
+import { B as Me } from "./_chunks/benefit-card-Xnxj4Gmo.js";
 import { C as we } from "./_chunks/card-DPmk26CL.js";
 import { C as ve, c as He } from "./_chunks/carousel.agent-DrX96W-1.js";
 import { C as Ge } from "./_chunks/contact-card-Cf8Ktyt3.js";
@@ -60,7 +60,7 @@ import { M as vr } from "./_chunks/map-view-knHSNLoe.js";
 import { R as Wr } from "./_chunks/rating-BRD7O74e.js";
 import { S as Ur } from "./_chunks/skeleton-CZbwyJAA.js";
 import { S as Yr, s as jr, u as zr } from "./_chunks/sparkline-DEROcSl0.js";
-import { S as Qr } from "./_chunks/stat-EC2Papj7.js";
+import { S as Qr } from "./_chunks/stat-Bs80Z6Yv.js";
 import { T as Xr } from "./_chunks/tag-CyoaEmf_.js";
 import { T as $r, t as ao } from "./_chunks/timeline-DQa5Tyz4.js";
 import { T as ro } from "./_chunks/timestamp-BV2lC-wV.js";