@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.15

package/dist/components/Skeleton/SkeletonText2.js

@@ -1,28 +1,33 @@
-import { Skeleton as e } from "./Skeleton2.js";
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+import { SkeletonShape as t } from "./SkeletonShape2.js";
 /* empty css             */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonText.tsx
-function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
-	let s = [
-		"skeleton-text",
-		`skeleton-text--${r}`,
-		i
-	].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
-	return /* @__PURE__ */ t("div", {
-		className: s,
-		"data-testid": a,
+function r(e, t) {
+	return e === t - 1 ? "60%" : e % 2 == 0 ? "100%" : "95%";
+}
+function i({ lines: i = 3, spacing: a = "normal", className: o = "", testId: s, loadingLabel: c }) {
+	let l = e(), u = [
+		"uic-skeleton-text",
+		`uic-skeleton-text--${a}`,
+		o
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: u,
+		"data-testid": s,
 		role: "status",
 		"aria-busy": "true",
-		children: c.map((n, r) => /* @__PURE__ */ t(e, {
-			loadingLabel: o,
-			width: n,
+		"aria-label": c ?? l("uic.SkeletonText.loading"),
+		children: Array.from({ length: Math.max(0, i) }, (e, a) => /* @__PURE__ */ n(t, {
+			width: r(a, i),
 			height: "1em",
-			variant: "text"
-		}, r))
+			shape: "text",
+			index: a
+		}, a))
 	});
 }
 //#endregion
-export { n as SkeletonText, n as default };
+export { i as SkeletonText, i as default };
 
 //# sourceMappingURL=SkeletonText2.js.map
 import "../../assets/components/Skeleton/SkeletonText.css";

package/dist/components/Skeleton/SkeletonText2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton\n          loadingLabel={loadingLabel}\n          key={index}\n          width={width}\n          height=\"1em\"\n          variant=\"text\"\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAuCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GACgB;GAEP;GACP,QAAO;GACP,SAAQ;EACT,GAJM,CAIN,CACF;CACE,CAAA;AAET"}
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText\n *\n * Loading placeholder for a block of text: `lines` lines, alternating full and\n * slightly short, with a shorter last line.\n *\n * @example\n * <SkeletonText />\n * <SkeletonText lines={5} spacing=\"compact\" />\n */\nimport { useUicTranslator } from \"../../i18n/useUicTranslator\";\nimport { SkeletonShape } from \"./SkeletonShape\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /**\n   * Accessible name announced for the placeholder as a whole. Defaults to the\n   * catalog's `uic.SkeletonText.loading` (\"Loading\").\n   */\n  loadingLabel?: string;\n}\n\n/** The width of line `i` of `lines`: the last is short, the rest alternate. */\nfunction lineWidth(i: number, lines: number): string {\n  if (i === lines - 1) return \"60%\";\n  return i % 2 === 0 ? \"100%\" : \"95%\";\n}\n\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const t = useUicTranslator();\n  const classNames = [\"uic-skeleton-text\", `uic-skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? t(\"uic.SkeletonText.loading\")}\n    >\n      {Array.from({ length: Math.max(0, lines) }, (_, index) => (\n        <SkeletonShape\n          key={index}\n          width={lineWidth(index, lines)}\n          height=\"1em\"\n          shape=\"text\"\n          index={index}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;;AA+BA,SAAS,EAAU,GAAW,GAAuB;CAEnD,OADI,MAAM,IAAQ,IAAU,QACrB,IAAI,KAAM,IAAI,SAAS;AAChC;AAEA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAI,EAAiB,GACrB,IAAa;EAAC;EAAqB,sBAAsB;EAAW;CAAS,CAAC,CACjF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB,EAAE,0BAA0B;EAEvD,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAK,EAAE,IAAI,GAAG,MAC9C,kBAAC,GAAD;GAEE,OAAO,EAAU,GAAO,CAAK;GAC7B,QAAO;GACP,OAAM;GACC;EACR,GALM,CAKN,CACF;CACE,CAAA;AAET"}

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

@@ -1,10 +1,8 @@
 /**
- * Skeleton Components
- *
- * Loading state components with shimmer animations.
+ * Skeleton composites: loading placeholders for a card, a text block, a list
+ * row and a chart, each drawn with Astryx `Skeleton`. The base shape is
+ * Astryx's own `Skeleton` (`@lablup/ui-common/Skeleton`).
  */
-export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';
 export { SkeletonCard } from './SkeletonCard';
 export type { SkeletonCardProps } from './SkeletonCard';
 export { SkeletonText } from './SkeletonText';

package/dist/components/Skeleton/index.js

@@ -1,6 +1,5 @@
-import { Skeleton as e } from "./Skeleton2.js";
+import { SkeletonText as e } from "./SkeletonText2.js";
 import { SkeletonCard as t } from "./SkeletonCard2.js";
-import { SkeletonText as n } from "./SkeletonText2.js";
-import { SkeletonChart as r } from "./SkeletonChart2.js";
-import { SkeletonRow as i } from "./SkeletonRow2.js";
-export { e as Skeleton, t as SkeletonCard, r as SkeletonChart, i as SkeletonRow, n as SkeletonText };
+import { SkeletonChart as n } from "./SkeletonChart2.js";
+import { SkeletonRow as r } from "./SkeletonRow2.js";
+export { t as SkeletonCard, n as SkeletonChart, r as SkeletonRow, e as SkeletonText };

package/dist/components/SmoothHeight/SmoothHeight2.js

@@ -24,10 +24,10 @@ function i({ active: i, children: a, className: o }) {
 		};
 	}, [i]), /* @__PURE__ */ n("div", {
 		ref: s,
-		className: `smooth-height${i ? " smooth-height--active" : ""}${o ? ` ${o}` : ""}`,
+		className: `uic-smooth-height${i ? " uic-smooth-height--active" : ""}${o ? ` ${o}` : ""}`,
 		children: /* @__PURE__ */ n("div", {
 			ref: c,
-			className: "smooth-height__content",
+			className: "uic-smooth-height__content",
 			children: a
 		})
 	});

package/dist/components/SmoothHeight/SmoothHeight2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothHeight2.js","names":[],"sources":["../../../src/components/SmoothHeight/SmoothHeight.tsx"],"sourcesContent":["/**\n * SmoothHeight Component\n *\n * Animates a container's height toward its content's natural height, so\n * content that grows in discrete jumps (streaming text wrapping onto new\n * lines) expands smoothly instead of snapping one line at a time.\n *\n * While `active`, the inner content is measured with a ResizeObserver and\n * the outer wrapper gets an explicit pixel height with a CSS height\n * transition. CSS cannot transition to `height: auto` (and the\n * `interpolate-size` opt-in is not available in WebKit), so the explicit\n * measurement is what makes the animation possible cross-platform.\n *\n * The very first activation does not animate: the wrapper goes from\n * `auto` to a pixel height, which CSS treats as non-interpolable and\n * applies instantly. Only subsequent pixel-to-pixel growth animates.\n *\n * When `active` turns off, the pixel height is kept just long enough for\n * the in-flight transition to settle, then released back to `auto` so\n * later reflows (window resizing, images loading) are unaffected.\n *\n * Degrades gracefully: without ResizeObserver (test environments), it\n * renders plain pass-through wrappers with auto height.\n */\n\nimport { useLayoutEffect, useRef, type ReactNode } from \"react\";\nimport \"./SmoothHeight.css\";\n\nexport interface SmoothHeightProps {\n  /** Whether height changes should currently be animated */\n  active: boolean;\n  children: ReactNode;\n  /** Additional class for the outer wrapper */\n  className?: string;\n}\n\n/**\n * Delay before releasing the explicit height after deactivation, covering\n * the height transition duration (--token-motionDurationMid = 0.2s).\n */\nconst RELEASE_DELAY_MS = 250;\n\nexport function SmoothHeight({ active, children, className }: SmoothHeightProps) {\n  const outerRef = useRef<HTMLDivElement>(null);\n  const innerRef = useRef<HTMLDivElement>(null);\n  const releaseTimerRef = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    const outer = outerRef.current;\n    const inner = innerRef.current;\n    if (!outer || !inner) return;\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    if (!active) {\n      // Keep the last pixel height while the in-flight transition\n      // settles, then release to auto.\n      releaseTimerRef.current = window.setTimeout(() => {\n        outer.style.height = \"\";\n        releaseTimerRef.current = null;\n      }, RELEASE_DELAY_MS);\n      return () => {\n        if (releaseTimerRef.current !== null) {\n          window.clearTimeout(releaseTimerRef.current);\n          releaseTimerRef.current = null;\n        }\n      };\n    }\n\n    // (Re)activated: cancel any pending release and track the content.\n    if (releaseTimerRef.current !== null) {\n      window.clearTimeout(releaseTimerRef.current);\n      releaseTimerRef.current = null;\n    }\n\n    const measure = () => {\n      outer.style.height = `${inner.offsetHeight.toFixed(0)}px`;\n    };\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(inner);\n    return () => {\n      observer.disconnect();\n    };\n  }, [active]);\n\n  return (\n    <div\n      ref={outerRef}\n      className={`smooth-height${active ? \" smooth-height--active\" : \"\"}${className ? ` ${className}` : \"\"}`}\n    >\n      <div ref={innerRef} className=\"smooth-height__content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,IAAM,IAAmB;AAEzB,SAAgB,EAAa,EAAE,WAAQ,aAAU,gBAAgC;CAC/E,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAW,EAAuB,IAAI,GACtC,IAAkB,EAAsB,IAAI;CAyClD,OAvCA,QAAsB;EACpB,IAAM,IAAQ,EAAS,SACjB,IAAQ,EAAS;EAEvB,IADI,CAAC,KAAS,CAAC,KACX,OAAO,iBAAmB,KAAa;EAE3C,IAAI,CAAC,GAOH,OAJA,EAAgB,UAAU,OAAO,iBAAiB;GAEhD,AADA,EAAM,MAAM,SAAS,IACrB,EAAgB,UAAU;EAC5B,GAAG,CAAgB,SACN;GACX,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAE9B;EAIF,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAG5B,IAAM,UAAgB;GACpB,EAAM,MAAM,SAAS,GAAG,EAAM,aAAa,QAAQ,CAAC,EAAE;EACxD;EACA,EAAQ;EAER,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAK,SACT;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAAC,CAAM,CAAC,GAGT,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,gBAAgB,IAAS,2BAA2B,KAAK,IAAY,IAAI,MAAc;EAElG,UAAA,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"SmoothHeight2.js","names":[],"sources":["../../../src/components/SmoothHeight/SmoothHeight.tsx"],"sourcesContent":["/**\n * SmoothHeight Component\n *\n * Animates a container's height toward its content's natural height, so\n * content that grows in discrete jumps (streaming text wrapping onto new\n * lines) expands smoothly instead of snapping one line at a time.\n *\n * While `active`, the inner content is measured with a ResizeObserver and\n * the outer wrapper gets an explicit pixel height with a CSS height\n * transition. CSS cannot transition to `height: auto` (and the\n * `interpolate-size` opt-in is not available in WebKit), so the explicit\n * measurement is what makes the animation possible cross-platform.\n *\n * The very first activation does not animate: the wrapper goes from\n * `auto` to a pixel height, which CSS treats as non-interpolable and\n * applies instantly. Only subsequent pixel-to-pixel growth animates.\n *\n * When `active` turns off, the pixel height is kept just long enough for\n * the in-flight transition to settle, then released back to `auto` so\n * later reflows (window resizing, images loading) are unaffected.\n *\n * Degrades gracefully: without ResizeObserver (test environments), it\n * renders plain pass-through wrappers with auto height.\n */\n\nimport { useLayoutEffect, useRef, type ReactNode } from \"react\";\nimport \"./SmoothHeight.css\";\n\nexport interface SmoothHeightProps {\n  /** Whether height changes should currently be animated */\n  active: boolean;\n  children: ReactNode;\n  /** Additional class for the outer wrapper */\n  className?: string;\n}\n\n/**\n * Delay before releasing the explicit height after deactivation, covering\n * the height transition (--duration-fast-max, 230ms by default).\n */\nconst RELEASE_DELAY_MS = 250;\n\nexport function SmoothHeight({ active, children, className }: SmoothHeightProps) {\n  const outerRef = useRef<HTMLDivElement>(null);\n  const innerRef = useRef<HTMLDivElement>(null);\n  const releaseTimerRef = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    const outer = outerRef.current;\n    const inner = innerRef.current;\n    if (!outer || !inner) return;\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    if (!active) {\n      // Keep the last pixel height while the in-flight transition\n      // settles, then release to auto.\n      releaseTimerRef.current = window.setTimeout(() => {\n        outer.style.height = \"\";\n        releaseTimerRef.current = null;\n      }, RELEASE_DELAY_MS);\n      return () => {\n        if (releaseTimerRef.current !== null) {\n          window.clearTimeout(releaseTimerRef.current);\n          releaseTimerRef.current = null;\n        }\n      };\n    }\n\n    // (Re)activated: cancel any pending release and track the content.\n    if (releaseTimerRef.current !== null) {\n      window.clearTimeout(releaseTimerRef.current);\n      releaseTimerRef.current = null;\n    }\n\n    const measure = () => {\n      outer.style.height = `${inner.offsetHeight.toFixed(0)}px`;\n    };\n    measure();\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(inner);\n    return () => {\n      observer.disconnect();\n    };\n  }, [active]);\n\n  return (\n    <div\n      ref={outerRef}\n      className={`uic-smooth-height${active ? \" uic-smooth-height--active\" : \"\"}${className ? ` ${className}` : \"\"}`}\n    >\n      <div ref={innerRef} className=\"uic-smooth-height__content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,IAAM,IAAmB;AAEzB,SAAgB,EAAa,EAAE,WAAQ,aAAU,gBAAgC;CAC/E,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAW,EAAuB,IAAI,GACtC,IAAkB,EAAsB,IAAI;CAyClD,OAvCA,QAAsB;EACpB,IAAM,IAAQ,EAAS,SACjB,IAAQ,EAAS;EAEvB,IADI,CAAC,KAAS,CAAC,KACX,OAAO,iBAAmB,KAAa;EAE3C,IAAI,CAAC,GAOH,OAJA,EAAgB,UAAU,OAAO,iBAAiB;GAEhD,AADA,EAAM,MAAM,SAAS,IACrB,EAAgB,UAAU;EAC5B,GAAG,CAAgB,SACN;GACX,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAE9B;EAIF,AAAI,EAAgB,YAAY,SAC9B,OAAO,aAAa,EAAgB,OAAO,GAC3C,EAAgB,UAAU;EAG5B,IAAM,UAAgB;GACpB,EAAM,MAAM,SAAS,GAAG,EAAM,aAAa,QAAQ,CAAC,EAAE;EACxD;EACA,EAAQ;EAER,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAK,SACT;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAAC,CAAM,CAAC,GAGT,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,oBAAoB,IAAS,+BAA+B,KAAK,IAAY,IAAI,MAAc;EAE1G,UAAA,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC3B;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/StatCard/StatCard.d.ts

@@ -1,7 +1,13 @@
-import { ReactNode, JSX } from 'react';
+import { JSX, ReactNode } from 'react';
 export type StatCardEmphasis = "compact" | "default" | "prominent";
 export type StatCardTone = "default" | "success" | "warning" | "danger" | "info";
 export type StatCardTrendDirection = "up" | "down" | "flat";
+/**
+ * How a numeric value arrives. `count` counts up from the previous value;
+ * `digits` pops each character of the formatted value in, staggered, and
+ * replays when the value changes.
+ */
+export type StatCardAnimation = "count" | "digits";
 export interface StatCardTrend {
     /** Direction indicator (up / down / flat) */
     direction: StatCardTrendDirection;
@@ -11,23 +17,31 @@ export interface StatCardTrend {
     ariaLabel?: string;
 }
 export interface StatCardProps {
-    /** Short label rendered above the value (UPPERCASE styled) */
+    /** Short label rendered above the value (uppercase) */
     label: string;
-    /** Primary metric value (number is coerced to localised string) */
+    /**
+     * Rendered in place of `label` when the label is not plain text: a glossary
+     * term carrying its definition, a unit badge, an info affordance.
+     *
+     * `label` stays required and stays the accessible name. Pass the same words
+     * in both.
+     */
+    labelNode?: ReactNode;
+    /** Primary metric value (a number is formatted with `toLocaleString`) */
     value: string | number;
     /** Optional suffix appended to the value (e.g. "/ 4", "GB") */
     valueSuffix?: string;
-    /** Optional helper line under the value (e.g. context, secondary metric) */
+    /** Optional helper line under the value */
     hint?: ReactNode;
     /** Optional leading icon node, rendered inside an accent badge */
     icon?: ReactNode;
-    /** Visual tone, mirrors Badge variants. Default: "default" */
+    /** Visual tone. Default: "default" */
     tone?: StatCardTone;
     /** Optional trend indicator under the value */
     trend?: StatCardTrend;
-    /** Click handler. Renders the card as keyboard-accessible button. */
+    /** Click handler. Renders the card as Astryx `ClickableCard`. */
     onClick?: () => void;
-    /** Render skeletons instead of value/label content while loading */
+    /** Render skeletons instead of the value while loading */
     loading?: boolean;
     /** Optional aria label override (defaults to label + value) */
     ariaLabel?: string;
@@ -41,19 +55,17 @@ export interface StatCardProps {
      */
     format?: (value: number) => string;
     /**
-     * Count up to a numeric value on mount and on change. Off by default so
-     * existing consumers render the final value immediately; opt in for
-     * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.
-     */
-    animate?: boolean;
-    /**
-     * Optional trailing visual on the value line (e.g. a sparkline). Kept as a
-     * slot so the card does not depend on any particular chart component.
+     * Animate a numeric value on mount and on change. `true` or `"count"`
+     * counts up to it; `"digits"` pops each character of the formatted value
+     * in. Suppressed under `prefers-reduced-motion`, and ignored for string
+     * values and while loading.
      */
+    animate?: boolean | StatCardAnimation;
+    /** Optional trailing visual on the value line (e.g. a sparkline) */
     sparkline?: ReactNode;
     /** Visual weight. Default: "default" */
     emphasis?: StatCardEmphasis;
 }
-declare function StatCardComponent({ label, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
+declare function StatCardComponent({ label, labelNode, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
 export declare const StatCard: import('react').MemoExoticComponent<typeof StatCardComponent>;
 export {};

package/dist/components/StatCard/StatCard2.js

@@ -1,112 +1,119 @@
-import { BaseCard as e } from "../BaseCard/BaseCard2.js";
-import { Skeleton as t } from "../Skeleton/Skeleton2.js";
-import { usePrefersReducedMotion as n } from "../../hooks/usePrefersReducedMotion.js";
+import { usePrefersReducedMotion as e } from "../../hooks/usePrefersReducedMotion.js";
+import { DigitPopIn as t } from "../DigitPopIn/DigitPopIn2.js";
 /* empty css         */
-import { memo as r, useEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { memo as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Text as o } from "@astryxdesign/core/Text";
+import { Skeleton as s } from "@astryxdesign/core/Skeleton";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Card as d } from "@astryxdesign/core/Card";
+import { ClickableCard as f } from "@astryxdesign/core/ClickableCard";
 //#region src/components/StatCard/StatCard.tsx
-var l = 800;
-function u(e, t) {
-	let [n, r] = o(t ? 0 : e), s = a(t ? 0 : e), c = a(null);
-	return i(() => {
+var p = 800;
+function m(e, t) {
+	let [n, o] = a(t ? 0 : e), s = i(t ? 0 : e), c = i(null);
+	return r(() => {
 		if (!t) {
-			s.current = e, r(e);
+			s.current = e, o(e);
 			return;
 		}
-		let n = s.current, i = performance.now(), a = (t) => {
-			let o = Math.min((t - i) / l, 1), u = 1 - (1 - o) ** 3;
-			r(Math.round(n + (e - n) * u)), o < 1 ? c.current = requestAnimationFrame(a) : s.current = e;
+		let n = s.current, r = performance.now(), i = (t) => {
+			let a = Math.min((t - r) / p, 1), l = 1 - (1 - a) ** 3;
+			o(Math.round(n + (e - n) * l)), a < 1 ? c.current = requestAnimationFrame(i) : s.current = e;
 		};
-		return c.current = requestAnimationFrame(a), () => {
+		return c.current = requestAnimationFrame(i), () => {
 			c.current !== null && cancelAnimationFrame(c.current);
 		};
 	}, [e, t]), t ? n : e;
 }
-var d = {
+var h = {
 	up: "▲",
 	down: "▼",
 	flat: "•"
+}, g = {
+	compact: 2,
+	default: 4,
+	prominent: 6
 };
-function f(e, t) {
+function _(e, t) {
 	return typeof e == "number" ? t ? t(e) : e.toLocaleString() : e;
 }
-function p({ label: r, value: i, valueSuffix: a, hint: o, icon: l, tone: p = "default", trend: m, onClick: h, loading: g = !1, ariaLabel: _, className: v = "", testId: y, format: b, animate: x = !1, sparkline: S, emphasis: C = "default" }) {
-	let w = n(), T = typeof i == "number", E = x && T && !g && !w, D = u(T ? i : 0, E), O = f(T && E ? D : i, b), k = _ ?? (g ? r : `${r}: ${f(i, b)}${a ?? ""}`), A = [
-		"stat-card",
-		"corner-accent",
-		`stat-card--tone-${p}`,
-		C === "default" ? "" : `stat-card--${C}`,
-		v
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ c(e, {
-		className: A,
-		onClick: h,
-		role: h ? void 0 : "group",
-		ariaLabel: k,
-		testId: y,
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: "stat-card__header",
-				children: [/* @__PURE__ */ s("span", {
-					className: "stat-card__label",
-					children: r
-				}), l && /* @__PURE__ */ s("span", {
-					className: "stat-card__icon",
-					"aria-hidden": "true",
-					children: l
-				})]
-			}),
-			/* @__PURE__ */ c("div", {
-				className: "stat-card__body",
-				children: [g ? /* @__PURE__ */ s(t, {
-					width: "60%",
-					height: "2rem"
-				}) : S ? /* @__PURE__ */ c("span", {
-					className: "stat-card__value-line",
-					children: [/* @__PURE__ */ c("span", {
-						className: "stat-card__value-row",
-						children: [/* @__PURE__ */ s("span", {
-							className: "stat-card__value",
-							children: O
-						}), a && /* @__PURE__ */ s("span", {
-							className: "stat-card__value-suffix",
-							children: a
-						})]
-					}), /* @__PURE__ */ s("span", {
-						className: "stat-card__sparkline",
-						children: S
-					})]
-				}) : /* @__PURE__ */ c("span", {
-					className: "stat-card__value-row",
-					children: [/* @__PURE__ */ s("span", {
-						className: "stat-card__value",
-						children: O
-					}), a && /* @__PURE__ */ s("span", {
-						className: "stat-card__value-suffix",
-						children: a
-					})]
-				}), m && !g && /* @__PURE__ */ c("span", {
-					className: `stat-card__trend stat-card__trend--${m.direction}`,
-					"aria-label": m.ariaLabel ?? m.label,
-					children: [/* @__PURE__ */ s("span", {
-						"aria-hidden": "true",
-						children: d[m.direction]
-					}), /* @__PURE__ */ s("span", { children: m.label })]
+function v({ label: n, labelNode: r, value: i, valueSuffix: a, hint: p, icon: v, tone: y = "default", trend: b, onClick: x, loading: S = !1, ariaLabel: C, className: w = "", testId: T, format: E, animate: D = !1, sparkline: O, emphasis: k = "default" }) {
+	let A = e(), j = typeof i == "number", M = D === !0 ? "count" : D === !1 ? null : D, N = j && !S && !A, P = M === "count" && N, F = M === "digits" && N, I = m(j ? i : 0, P), L = _(j && P ? I : i, E), R = F ? /* @__PURE__ */ l(t, { text: L }) : L, z = F ? "uic-stat-card__value uic-stat-card__value--digits" : "uic-stat-card__value", B = C ?? (S ? n : `${n}: ${_(i, E)}${a ?? ""}`), V = [
+		"uic-stat-card",
+		`uic-stat-card--tone-${y}`,
+		k === "default" ? "" : `uic-stat-card--${k}`,
+		w
+	].filter(Boolean).join(" "), H = /* @__PURE__ */ u("span", {
+		className: "uic-stat-card__value-row",
+		children: [/* @__PURE__ */ l("span", {
+			className: z,
+			children: R
+		}), a && /* @__PURE__ */ l("span", {
+			className: "uic-stat-card__value-suffix",
+			children: a
+		})]
+	}), U = /* @__PURE__ */ u(c, { children: [
+		/* @__PURE__ */ u("div", {
+			className: "uic-stat-card__header",
+			children: [/* @__PURE__ */ l(o, {
+				type: "label",
+				className: "uic-stat-card__label",
+				color: "secondary",
+				children: r ?? n
+			}), v && /* @__PURE__ */ l("span", {
+				className: "uic-stat-card__icon",
+				"aria-hidden": "true",
+				children: v
+			})]
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "uic-stat-card__body",
+			children: [S ? /* @__PURE__ */ l(s, {
+				width: "60%",
+				height: "2rem"
+			}) : O ? /* @__PURE__ */ u("span", {
+				className: "uic-stat-card__value-line",
+				children: [H, /* @__PURE__ */ l("span", {
+					className: "uic-stat-card__sparkline",
+					children: O
 				})]
-			}),
-			o != null && /* @__PURE__ */ s("div", {
-				className: "stat-card__hint",
-				children: g ? /* @__PURE__ */ s(t, {
-					width: "80%",
-					height: "0.85rem"
-				}) : o
-			})
-		]
+			}) : H, b && !S && /* @__PURE__ */ u("span", {
+				className: `uic-stat-card__trend uic-stat-card__trend--${b.direction}`,
+				"aria-label": b.ariaLabel ?? b.label,
+				children: [/* @__PURE__ */ l("span", {
+					"aria-hidden": "true",
+					children: h[b.direction]
+				}), /* @__PURE__ */ l("span", { children: b.label })]
+			})]
+		}),
+		p != null && /* @__PURE__ */ l("div", {
+			className: "uic-stat-card__hint",
+			children: S ? /* @__PURE__ */ l(s, {
+				width: "80%",
+				height: "0.85rem",
+				index: 1
+			}) : p
+		})
+	] });
+	return x ? /* @__PURE__ */ l(f, {
+		label: B,
+		onClick: () => x(),
+		padding: g[k],
+		className: V,
+		"data-testid": T,
+		children: U
+	}) : /* @__PURE__ */ l(d, {
+		padding: g[k],
+		className: V,
+		role: "group",
+		"aria-label": B,
+		"data-testid": T,
+		children: U
 	});
 }
-var m = r(p);
+var y = n(v);
 //#endregion
-export { m as StatCard };
+export { y as StatCard };
 
 //# sourceMappingURL=StatCard2.js.map
 import "../../assets/components/StatCard/StatCard.css";

package/dist/components/StatCard/StatCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard Component\n *\n * Compact metric card for dashboards. Renders a label, a large numeric\n * value (with optional unit/suffix), and optional icon, hint, trend, or\n * accent tone. Wraps `BaseCard` so it inherits hover/focus/click affordances\n * and design tokens consistently with the rest of the common library.\n *\n * Designed for cross-page reuse: Squad dashboard, Statistics page, Cowork\n * dashboard, etc.\n */\n\nimport { memo, useEffect, useRef, useState, type ReactNode, type JSX } from \"react\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { BaseCard } from \"../BaseCard\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (UPPERCASE styled) */\n  label: string;\n  /** Primary metric value (number is coerced to localised string) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value (e.g. context, secondary metric) */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone, mirrors Badge variants. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as keyboard-accessible button. */\n  onClick?: () => void;\n  /** Render skeletons instead of value/label content while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Count up to a numeric value on mount and on change. Off by default so\n   * existing consumers render the final value immediately; opt in for\n   * dashboard hero metrics. Suppressed under `prefers-reduced-motion`.\n   */\n  animate?: boolean;\n  /**\n   * Optional trailing visual on the value line (e.g. a sparkline). Kept as a\n   * slot so the card does not depend on any particular chart component.\n   */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const shouldAnimate = animate && isNumeric && !loading && !prefersReducedMotion;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldAnimate);\n\n  const displayValue = formatValue(\n    isNumeric && shouldAnimate ? animatedValue : value,\n    format,\n  );\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"stat-card\",\n    \"corner-accent\",\n    `stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseCard\n      className={rootClass}\n      onClick={onClick}\n      role={onClick ? undefined : \"group\"}\n      ariaLabel={composedAriaLabel}\n      testId={testId}\n    >\n      <div className=\"stat-card__header\">\n        <span className=\"stat-card__label\">{label}</span>\n        {icon && (\n          <span className=\"stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the exact DOM they had before the slot existed.\n          <span className=\"stat-card__value-line\">\n            <span className=\"stat-card__value-row\">\n              <span className=\"stat-card__value\">{displayValue}</span>\n              {valueSuffix && (\n                <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n              )}\n            </span>\n            <span className=\"stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          <span className=\"stat-card__value-row\">\n            <span className=\"stat-card__value\">{displayValue}</span>\n            {valueSuffix && (\n              <span className=\"stat-card__value-suffix\">{valueSuffix}</span>\n            )}\n          </span>\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`stat-card__trend stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" /> : hint}\n        </div>\n      )}\n    </BaseCard>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":"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"}
+{"version":3,"file":"StatCard2.js","names":[],"sources":["../../../src/components/StatCard/StatCard.tsx"],"sourcesContent":["/**\n * StatCard\n *\n * Compact metric card for dashboards: a label, a large value with an optional\n * suffix, and optional icon, hint, trend, sparkline or accent tone. Built on\n * Astryx `Card` (or `ClickableCard` when it has an `onClick`), `Text` and\n * `Skeleton`. The label can be a node (`labelNode`) while the accessible name\n * stays the plain `label` string.\n */\nimport { memo, useEffect, useRef, useState, type JSX, type ReactNode } from \"react\";\nimport { Card } from \"@astryxdesign/core/Card\";\nimport { ClickableCard } from \"@astryxdesign/core/ClickableCard\";\nimport { Skeleton } from \"@astryxdesign/core/Skeleton\";\nimport { Text } from \"@astryxdesign/core/Text\";\n\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\nimport { DigitPopIn } from \"../DigitPopIn\";\nimport \"./StatCard.css\";\n\nexport type StatCardEmphasis = \"compact\" | \"default\" | \"prominent\";\n\nexport type StatCardTone = \"default\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type StatCardTrendDirection = \"up\" | \"down\" | \"flat\";\n\n/**\n * How a numeric value arrives. `count` counts up from the previous value;\n * `digits` pops each character of the formatted value in, staggered, and\n * replays when the value changes.\n */\nexport type StatCardAnimation = \"count\" | \"digits\";\n\nexport interface StatCardTrend {\n  /** Direction indicator (up / down / flat) */\n  direction: StatCardTrendDirection;\n  /** Human-readable delta label (e.g. \"+12%\", \"-3\", \"0\") */\n  label: string;\n  /** Optional ARIA description for screen readers */\n  ariaLabel?: string;\n}\n\nexport interface StatCardProps {\n  /** Short label rendered above the value (uppercase) */\n  label: string;\n  /**\n   * Rendered in place of `label` when the label is not plain text: a glossary\n   * term carrying its definition, a unit badge, an info affordance.\n   *\n   * `label` stays required and stays the accessible name. Pass the same words\n   * in both.\n   */\n  labelNode?: ReactNode;\n  /** Primary metric value (a number is formatted with `toLocaleString`) */\n  value: string | number;\n  /** Optional suffix appended to the value (e.g. \"/ 4\", \"GB\") */\n  valueSuffix?: string;\n  /** Optional helper line under the value */\n  hint?: ReactNode;\n  /** Optional leading icon node, rendered inside an accent badge */\n  icon?: ReactNode;\n  /** Visual tone. Default: \"default\" */\n  tone?: StatCardTone;\n  /** Optional trend indicator under the value */\n  trend?: StatCardTrend;\n  /** Click handler. Renders the card as Astryx `ClickableCard`. */\n  onClick?: () => void;\n  /** Render skeletons instead of the value while loading */\n  loading?: boolean;\n  /** Optional aria label override (defaults to label + value) */\n  ariaLabel?: string;\n  /** Extra class name applied to the root */\n  className?: string;\n  /** Test id for unit tests */\n  testId?: string;\n  /**\n   * Formatter for numeric values (e.g. abbreviate to \"1.2K\", append \"%\").\n   * Defaults to `toLocaleString`. Ignored when `value` is a string.\n   */\n  format?: (value: number) => string;\n  /**\n   * Animate a numeric value on mount and on change. `true` or `\"count\"`\n   * counts up to it; `\"digits\"` pops each character of the formatted value\n   * in. Suppressed under `prefers-reduced-motion`, and ignored for string\n   * values and while loading.\n   */\n  animate?: boolean | StatCardAnimation;\n  /** Optional trailing visual on the value line (e.g. a sparkline) */\n  sparkline?: ReactNode;\n  /** Visual weight. Default: \"default\" */\n  emphasis?: StatCardEmphasis;\n}\n\nconst ANIMATION_DURATION_MS = 800;\n\n/**\n * Counts from the previous value to `target` with an ease-out-cubic curve.\n * When `enabled` is false the target is returned directly and no animation\n * frame is ever scheduled.\n */\nfunction useAnimatedValue(target: number, enabled: boolean): number {\n  const [displayValue, setDisplayValue] = useState(enabled ? 0 : target);\n  const previousValue = useRef(enabled ? 0 : target);\n  const frameRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousValue.current = target;\n      setDisplayValue(target);\n      return;\n    }\n\n    const startValue = previousValue.current;\n    const startTime = performance.now();\n\n    const step = (now: number): void => {\n      const progress = Math.min((now - startTime) / ANIMATION_DURATION_MS, 1);\n      const eased = 1 - Math.pow(1 - progress, 3);\n      setDisplayValue(Math.round(startValue + (target - startValue) * eased));\n\n      if (progress < 1) {\n        frameRef.current = requestAnimationFrame(step);\n      } else {\n        previousValue.current = target;\n      }\n    };\n\n    frameRef.current = requestAnimationFrame(step);\n\n    return () => {\n      if (frameRef.current !== null) {\n        cancelAnimationFrame(frameRef.current);\n      }\n    };\n  }, [target, enabled]);\n\n  return enabled ? displayValue : target;\n}\n\nconst TREND_GLYPH: Record<StatCardTrendDirection, string> = {\n  up: \"▲\",\n  down: \"▼\",\n  flat: \"•\",\n};\n\n/** Card padding per emphasis, on Astryx's spacing scale. */\nconst PADDING: Record<StatCardEmphasis, 2 | 4 | 6> = {\n  compact: 2,\n  default: 4,\n  prominent: 6,\n};\n\nfunction formatValue(\n  value: string | number,\n  format?: (value: number) => string,\n): string {\n  if (typeof value === \"number\") {\n    return format ? format(value) : value.toLocaleString();\n  }\n  return value;\n}\n\nfunction StatCardComponent({\n  label,\n  labelNode,\n  value,\n  valueSuffix,\n  hint,\n  icon,\n  tone = \"default\",\n  trend,\n  onClick,\n  loading = false,\n  ariaLabel,\n  className = \"\",\n  testId,\n  format,\n  animate = false,\n  sparkline,\n  emphasis = \"default\",\n}: StatCardProps): JSX.Element {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const isNumeric = typeof value === \"number\";\n  const animation: StatCardAnimation | null =\n    animate === true ? \"count\" : animate === false ? null : animate;\n  const canAnimate = isNumeric && !loading && !prefersReducedMotion;\n  const shouldCount = animation === \"count\" && canAnimate;\n  const shouldPopDigits = animation === \"digits\" && canAnimate;\n  const animatedValue = useAnimatedValue(isNumeric ? value : 0, shouldCount);\n\n  const displayValue = formatValue(\n    isNumeric && shouldCount ? animatedValue : value,\n    format,\n  );\n  const valueContent = shouldPopDigits ? (\n    <DigitPopIn text={displayValue} />\n  ) : (\n    displayValue\n  );\n  const valueClass = shouldPopDigits\n    ? \"uic-stat-card__value uic-stat-card__value--digits\"\n    : \"uic-stat-card__value\";\n\n  // The aria-label always describes the settled value, never an in-flight\n  // animation frame, so assistive tech is not read a counting-up number.\n  const composedAriaLabel =\n    ariaLabel ??\n    (loading ? label : `${label}: ${formatValue(value, format)}${valueSuffix ?? \"\"}`);\n\n  const rootClass = [\n    \"uic-stat-card\",\n    `uic-stat-card--tone-${tone}`,\n    emphasis !== \"default\" ? `uic-stat-card--${emphasis}` : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const valueRow = (\n    <span className=\"uic-stat-card__value-row\">\n      <span className={valueClass}>{valueContent}</span>\n      {valueSuffix && (\n        <span className=\"uic-stat-card__value-suffix\">{valueSuffix}</span>\n      )}\n    </span>\n  );\n\n  const body = (\n    <>\n      <div className=\"uic-stat-card__header\">\n        <Text type=\"label\" className=\"uic-stat-card__label\" color=\"secondary\">\n          {labelNode ?? label}\n        </Text>\n        {icon && (\n          <span className=\"uic-stat-card__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n      </div>\n\n      <div className=\"uic-stat-card__body\">\n        {loading ? (\n          <Skeleton width=\"60%\" height=\"2rem\" />\n        ) : sparkline ? (\n          // Only wrap when a sparkline is present, so cards without one keep\n          // the value row as a direct child of the body.\n          <span className=\"uic-stat-card__value-line\">\n            {valueRow}\n            <span className=\"uic-stat-card__sparkline\">{sparkline}</span>\n          </span>\n        ) : (\n          valueRow\n        )}\n\n        {trend && !loading && (\n          <span\n            className={`uic-stat-card__trend uic-stat-card__trend--${trend.direction}`}\n            aria-label={trend.ariaLabel ?? trend.label}\n          >\n            <span aria-hidden=\"true\">{TREND_GLYPH[trend.direction]}</span>\n            <span>{trend.label}</span>\n          </span>\n        )}\n      </div>\n\n      {hint !== undefined && hint !== null && (\n        <div className=\"uic-stat-card__hint\">\n          {loading ? <Skeleton width=\"80%\" height=\"0.85rem\" index={1} /> : hint}\n        </div>\n      )}\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <ClickableCard\n        label={composedAriaLabel}\n        onClick={() => onClick()}\n        padding={PADDING[emphasis]}\n        className={rootClass}\n        data-testid={testId}\n      >\n        {body}\n      </ClickableCard>\n    );\n  }\n\n  return (\n    <Card\n      padding={PADDING[emphasis]}\n      className={rootClass}\n      role=\"group\"\n      aria-label={composedAriaLabel}\n      data-testid={testId}\n    >\n      {body}\n    </Card>\n  );\n}\n\nexport const StatCard = memo(StatCardComponent);\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
 export { StatCard } from './StatCard';
 export { formatCompactNumber } from './formatters';
-export type { StatCardProps, StatCardEmphasis, StatCardTone, StatCardTrend, StatCardTrendDirection, } from './StatCard';
+export type { StatCardProps, StatCardAnimation, StatCardEmphasis, StatCardTone, StatCardTrend, StatCardTrendDirection, } from './StatCard';

package/dist/components/Statistic/Statistic.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    /** The caption. */
+    label: ReactNode;
+    /** The value. Not finite renders `unlimitedLabel`. */
+    value?: number;
+    /** What the value is measured against; the bar needs it. */
+    total?: number;
+    /** Unit after the value. */
+    unit?: string;
+    /** Decimal places, trailing zeros dropped. @default 2 */
+    precision?: number;
+    /** A non-finite value or total in the bar's tooltip. @default '∞' */
+    infinityLabel?: string;
+    /**
+     * The usage bar: `visible` draws it (with a `total`), `placeholder` keeps
+     * its space without painting it, `hidden` leaves it out. @default 'hidden'
+     */
+    progressMode?: "hidden" | "placeholder" | "visible";
+    /** Notches in the bar. @default 20 */
+    progressSteps?: number;
+    /** Colour of the value and of the bar's filled notches. */
+    color?: string;
+    /** Shown for a non-finite value. @default the catalog's uic.Statistic.unlimited ("Unlimited") */
+    unlimitedLabel?: string;
+}
+export declare function Statistic({ label, value, total, unit, precision, infinityLabel, progressMode, progressSteps, color, unlimitedLabel, className, ...divProps }: StatisticProps): import("react").JSX.Element;
+export declare namespace Statistic {
+    var displayName: string;
+}

package/dist/components/Statistic/Statistic.messages.d.ts

@@ -0,0 +1,6 @@
+export declare const statisticMessages: {
+    readonly "uic.Statistic.unlimited": {
+        readonly defaultMessage: "Unlimited";
+        readonly description: "Shown in place of a metric's value when the value has no limit";
+    };
+};

package/dist/components/Statistic/Statistic.messages.js

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/Statistic/Statistic.messages.ts
+var t = e({ "uic.Statistic.unlimited": {
+	defaultMessage: "Unlimited",
+	description: "Shown in place of a metric's value when the value has no limit"
+} });
+//#endregion
+export { t as statisticMessages };
+
+//# sourceMappingURL=Statistic.messages.js.map

package/dist/components/Statistic/Statistic.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.messages.js","names":[],"sources":["../../../src/components/Statistic/Statistic.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const statisticMessages = defineMessages({\n  \"uic.Statistic.unlimited\": {\n    defaultMessage: \"Unlimited\",\n    description: \"Shown in place of a metric's value when the value has no limit\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAoB,EAAe,EAC9C,2BAA2B;CACzB,gBAAgB;CAChB,aAAa;AACf,EACF,CAAC"}

package/dist/components/Statistic/Statistic2.js

@@ -0,0 +1,75 @@
+import { useUicTranslator as e } from "../../i18n/useUicTranslator.js";
+/* empty css          */
+import { HStack as t, VStack as n } from "@astryxdesign/core/Stack";
+import { Text as r } from "@astryxdesign/core/Text";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Tooltip as s } from "@astryxdesign/core/Tooltip";
+//#region src/components/Statistic/Statistic.tsx
+function c({ steps: e, percent: t, isPlaceholder: n, color: r, label: i }) {
+	let o = Math.round(t / 100 * e);
+	return /* @__PURE__ */ a("div", {
+		className: "uic-statistic__steps",
+		role: "progressbar",
+		"aria-label": i,
+		"aria-valuenow": t,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		children: Array.from({ length: e }, (e, t) => /* @__PURE__ */ a("span", {
+			className: n ? "uic-statistic__step uic-statistic__step--placeholder" : t < o ? "uic-statistic__step uic-statistic__step--filled" : "uic-statistic__step",
+			style: n || t >= o ? void 0 : { backgroundColor: r }
+		}, t))
+	});
+}
+function l({ label: l, value: u, total: d, unit: f = "", precision: p = 2, infinityLabel: m = "∞", progressMode: h = "hidden", progressSteps: g = 20, color: _, unlimitedLabel: v, className: y, ...b }) {
+	let x = e(), S = (e) => Number.isFinite(e) ? parseFloat(e.toFixed(p)).toString() : m, C = u === void 0 ? void 0 : S(u), w = d === void 0 ? void 0 : S(d), T = h === "hidden" || d === void 0 || d === Infinity ? 0 : d === 0 ? u === 0 ? 0 : 100 : u === void 0 || !Number.isFinite(u) || !Number.isFinite(d) ? 100 : Math.round(u / d * 100), E = typeof l == "string" ? l : "usage", D = _ ? { color: _ } : void 0;
+	return /* @__PURE__ */ o(n, {
+		align: "start",
+		className: ["uic-statistic", y].filter(Boolean).join(" "),
+		...b,
+		children: [
+			/* @__PURE__ */ a(r, {
+				size: "lg",
+				color: "secondary",
+				display: "block",
+				className: "uic-statistic__label",
+				children: l
+			}),
+			/* @__PURE__ */ a(t, {
+				gap: 1,
+				align: "end",
+				className: "uic-statistic__row",
+				children: u !== void 0 && !Number.isFinite(u) ? /* @__PURE__ */ a(r, {
+					className: "uic-statistic__value",
+					children: v ?? x("uic.Statistic.unlimited")
+				}) : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(r, {
+					className: "uic-statistic__value",
+					style: D,
+					children: C
+				}), f && /* @__PURE__ */ a(r, {
+					color: "secondary",
+					children: f
+				})] })
+			}),
+			h === "visible" && d !== void 0 ? /* @__PURE__ */ a(s, {
+				content: `${C} ${f} / ${w} ${f}`,
+				children: /* @__PURE__ */ a(c, {
+					steps: g,
+					percent: T,
+					color: _,
+					label: E
+				})
+			}) : h === "placeholder" ? /* @__PURE__ */ a(c, {
+				isPlaceholder: !0,
+				steps: g,
+				percent: 0,
+				label: E
+			}) : null
+		]
+	});
+}
+l.displayName = "Statistic";
+//#endregion
+export { l as Statistic };
+
+//# sourceMappingURL=Statistic2.js.map
+import "../../assets/components/Statistic/Statistic.css";