@alfadocs/ui-kit 0.32.1 → 0.32.2

package/dist/_chunks/{stat-EC2Papj7.js → stat-DhAA5ltU.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)]",
@@ -48,7 +48,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 +60,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 +97,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 +114,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);
+    const x = new Intl.NumberFormat(t).formatToParts(12345.6);
+    for (const n of x)
+      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,
+    animateDurationMs: x = 1600,
     animateLocale: n,
-    animateSeparators: h,
-    variant: x = "default",
+    animateSeparators: b,
+    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, Y = O(() => {
       if (typeof t == "string") return t;
       switch (c) {
         case "currency":
@@ -186,10 +204,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]), _ = 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 +217,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 (b) {
+            const A = Math.abs(w), D = Math.trunc(A), G = A - D, J = b.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 = b.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, b, F, $]
+    ), C = st({
+      to: q,
       from: 0,
-      durationMs: b,
+      durationMs: x,
       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 +265,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,19 +286,19 @@ 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
               }
             )
           ] }),
-          Y ? (
+          _ ? (
             // The animated number is wrapped in an `aria-live="off"` span
             // so screen readers don't announce every interpolated frame.
             // The `role="group"` ancestor (with `aria-labelledby` pointing
@@ -289,19 +307,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: Y }),
+          o != null && l != null && /* @__PURE__ */ i(
+            it,
             {
-              trend: l,
-              delta: o,
-              deltaFormat: m,
+              trend: o,
+              delta: l,
+              deltaFormat: u,
               locale: e
             }
           )
@@ -310,8 +328,8 @@ const dt = Q(
     );
   }
 );
-dt.displayName = "Stat";
+ct.displayName = "Stat";
 export {
-  dt as S
+  ct as S
 };
-//# sourceMappingURL=stat-EC2Papj7.js.map
+//# sourceMappingURL=stat-DhAA5ltU.js.map

package/dist/agent-catalog.json

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

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-DhAA5ltU.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

@@ -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-DhAA5ltU.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit",
-  "version": "0.32.1",
+  "version": "0.32.2",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe.",
   "license": "BUSL-1.1",