@thewhatmatters/wmds 0.4.9 → 0.4.28

package/dist/components/molecules/Select/Select.js

@@ -1,137 +1,93 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { Dropdown as t } from "../Dropdown/Dropdown.js";
-import { measureSelectMenuStyle as n } from "./selectMenuPosition.js";
-import { selectDescriptionClasses as r, selectFieldStackClasses as i, selectLabelClasses as a, selectRootClasses as ee, selectShellClasses as o, selectSizes as s, selectTriggerCaretRotateClasses as c, selectTriggerCaretSlotClasses as l, selectTriggerInnerClasses as te, selectTriggerLabelClasses as ne } from "./selectStyles.js";
-import { useCallback as u, useEffect as d, useId as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
-import { ChevronDown as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useDropdownMenu as n } from "../Dropdown/useDropdownMenu.js";
+import { measureSelectMenuStyle as r } from "./selectMenuPosition.js";
+import { selectDescriptionClasses as i, selectFieldStackClasses as a, selectLabelClasses as o, selectRootClasses as s, selectShellClasses as c, selectSizes as l, selectTriggerCaretRotateClasses as u, selectTriggerCaretSlotClasses as d, selectTriggerInnerClasses as f, selectTriggerLabelClasses as p } from "./selectStyles.js";
+import { useId as m, useRef as h, useState as g } from "react";
+import { ChevronDown as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/molecules/Select/Select.tsx
-function y(e) {
+function b(e) {
 	e.label == null && e["aria-label"] == null && console.warn("[WMDS Select] Provide `label` or `aria-label`."), e.options.length === 0 && console.warn("[WMDS Select] `options` must not be empty.");
 }
-function b(e, t) {
+function x(e, t) {
 	if (t != null) return e.find((e) => e.value === t)?.label;
 }
-function x({ options: s, value: x, defaultValue: S, onValueChange: C, placeholder: re = "Select…", label: w, description: T, disabled: E = !1, size: D = "md", className: O, id: k, "aria-label": A }) {
-	let j = f(), M = k ?? j, N = `${M}-listbox`, P = T == null ? void 0 : `${M}-description`, F = m(null), I = m(null), [L, R] = h(!1), [z, B] = h(null), [V, H] = h(S), [U, W] = h(() => {
-		let e = x ?? S, t = s.findIndex((t) => t.value === e);
-		return t >= 0 ? t : 0;
-	}), G = x !== void 0, K = G ? x : V;
-	y({
-		label: w,
-		"aria-label": A,
-		options: s
+function S({ options: l, value: S, defaultValue: C, onValueChange: w, placeholder: T = "Select…", label: E, description: D, disabled: O = !1, size: k = "md", className: A, id: j, "aria-label": M, "aria-describedby": N }) {
+	let P = m(), F = j ?? P, I = D == null ? void 0 : `${F}-description`, L = [N, I].filter(Boolean).join(" ") || void 0, R = h(null), z = h(null), [B, V] = g(C), H = S !== void 0, U = H ? S : B;
+	b({
+		label: E,
+		"aria-label": M,
+		options: l
 	});
-	let q = b(s, K), J = u(() => {
-		R(!1), B(null);
-	}, []), Y = u(() => {
-		let e = I.current;
-		e != null && B(n(e, s)), R(!0);
-	}, [s]), X = u((e) => {
-		G || H(e), C?.(e), J();
-	}, [
-		J,
-		G,
-		C
-	]), Z = u(() => {
-		let e = I.current;
-		e != null && B(n(e, s));
-	}, [s]);
-	p(() => {
-		if (L) return Z(), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0), () => {
-			window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0);
-		};
-	}, [L, Z]), d(() => {
-		if (!L) return;
-		function e(e) {
-			F.current != null && !F.current.contains(e.target) && J();
-		}
-		return document.addEventListener("mousedown", e), () => {
-			document.removeEventListener("mousedown", e);
-		};
-	}, [J, L]), d(() => {
-		let e = s.findIndex((e) => e.value === K);
-		e >= 0 && W(e);
-	}, [s, K]);
-	function Q(e) {
-		W((t) => s.length === 0 ? 0 : (t + e + s.length) % s.length);
+	let W = x(l, U);
+	function G(e) {
+		H || V(e), w?.(e), K.close({ returnFocus: !0 });
 	}
-	function ie(e) {
-		if (!E) switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), L ? Q(1) : Y();
-				break;
-			case "ArrowUp":
-				e.preventDefault(), L ? Q(-1) : Y();
-				break;
-			case "Enter":
-			case " ":
-				if (e.preventDefault(), L) {
-					let e = s[U];
-					e != null && X(e.value);
-				} else Y();
-				break;
-			case "Escape": e.preventDefault(), J();
+	let K = n({
+		rows: l,
+		triggerRef: z,
+		focus: "trigger",
+		initialIndex: l.findIndex((e) => e.value === U),
+		measure: () => R.current == null ? null : r(R.current, l),
+		onChoose: (e) => {
+			let t = l[e];
+			t != null && G(t.value);
 		}
-	}
-	let $ = /* @__PURE__ */ v("div", {
-		ref: F,
-		className: e(ee, O),
-		children: [/* @__PURE__ */ _("div", {
-			ref: I,
-			className: e(o[D], E && "pointer-events-none opacity-50"),
-			"data-open": L ? "true" : "false",
-			children: /* @__PURE__ */ v("button", {
+	}), q = /* @__PURE__ */ y("div", {
+		...K.rootProps,
+		className: e(s, A),
+		children: [/* @__PURE__ */ v("div", {
+			ref: R,
+			className: e(c[k], O && "pointer-events-none opacity-50"),
+			"data-open": K.open ? "true" : "false",
+			children: /* @__PURE__ */ y("button", {
+				ref: z,
 				type: "button",
-				id: M,
-				disabled: E,
-				"aria-label": w == null ? A : void 0,
-				"aria-labelledby": w == null ? void 0 : `${M}-label`,
-				"aria-describedby": P,
+				id: F,
+				role: "combobox",
+				disabled: O,
+				"aria-label": E == null ? M : void 0,
+				"aria-labelledby": E == null ? void 0 : `${F}-label`,
+				"aria-describedby": L,
 				"aria-haspopup": "listbox",
-				"aria-expanded": L,
-				"aria-controls": N,
+				...K.triggerProps,
 				onClick: () => {
-					E || (L ? J() : Y());
+					O || K.toggle();
 				},
-				onKeyDown: ie,
-				className: te[D],
-				children: [/* @__PURE__ */ _("span", {
-					className: e(ne, q == null && "text-disabled"),
-					children: q ?? re
-				}), /* @__PURE__ */ _("span", {
-					className: l[D],
+				className: f[k],
+				children: [/* @__PURE__ */ v("span", {
+					className: e(p, W == null && "text-disabled"),
+					children: W ?? T
+				}), /* @__PURE__ */ v("span", {
+					className: d[k],
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ _("span", {
-						className: e(c, L && "rotate-180"),
-						children: /* @__PURE__ */ _(g, { strokeWidth: 2 })
+					children: /* @__PURE__ */ v("span", {
+						className: e(u, K.open && "rotate-180"),
+						children: /* @__PURE__ */ v(_, { strokeWidth: 2 })
 					})
 				})]
 			})
-		}), L && z != null ? /* @__PURE__ */ _(t.Menu, {
-			id: N,
+		}), K.open && K.menuStyle != null ? /* @__PURE__ */ v(t.Menu, {
+			...K.menuProps,
 			role: "listbox",
-			"aria-labelledby": M,
-			style: z,
-			children: s.map((e, n) => {
-				let r = e.value === K, i = n === U;
-				return /* @__PURE__ */ _("li", {
+			"aria-labelledby": F,
+			children: l.map((e, n) => {
+				let r = e.value === U;
+				return /* @__PURE__ */ v("li", {
 					role: "presentation",
-					children: /* @__PURE__ */ _(t.Item, {
+					children: /* @__PURE__ */ v(t.Item, {
+						...K.rowProps(n),
 						role: "option",
 						"aria-selected": r,
-						tabIndex: -1,
 						selected: r,
-						active: i,
 						truncate: !1,
 						start: e.start,
 						end: e.end,
-						onMouseEnter: () => {
-							W(n);
-						},
+						onMouseDown: (e) => e.preventDefault(),
 						onClick: () => {
-							X(e.value);
+							G(e.value);
 						},
 						children: e.label
 					})
@@ -139,23 +95,23 @@ function x({ options: s, value: x, defaultValue: S, onValueChange: C, placeholde
 			})
 		}) : null]
 	});
-	return w == null && T == null ? $ : /* @__PURE__ */ v("div", {
-		className: i,
+	return E == null && D == null ? q : /* @__PURE__ */ y("div", {
+		className: a,
 		children: [
-			w == null ? null : /* @__PURE__ */ _("label", {
-				id: `${M}-label`,
-				htmlFor: M,
-				className: e(a, E && "opacity-50"),
-				children: w
+			E == null ? null : /* @__PURE__ */ v("label", {
+				id: `${F}-label`,
+				htmlFor: F,
+				className: e(o, O && "opacity-50"),
+				children: E
 			}),
-			$,
-			T == null ? null : /* @__PURE__ */ _("p", {
-				id: P,
-				className: r,
-				children: T
+			q,
+			D == null ? null : /* @__PURE__ */ v("p", {
+				id: I,
+				className: i,
+				children: D
 			})
 		]
 	});
 }
 //#endregion
-export { x as Select, s as selectSizes };
+export { S as Select, l as selectSizes };

package/dist/components/molecules/Select/selectStyles.js

@@ -5,9 +5,9 @@ import { focusRingTransitionClasses as n, motionTransition as r } from "../../..
 import { inputDisabledClasses as i, inputSizes as a, inputSoloRadiusClasses as o } from "../../atoms/Input/inputShellStyles.js";
 //#region src/components/molecules/Select/selectStyles.ts
 var s = a, c = "flex w-full flex-col gap-1.5", l = "relative w-full min-w-0", u = e("outline-none ring-2 ring-transparent ring-inset ring-offset-0", "focus-within:ring-focus-ring", "data-[open=true]:ring-focus-ring", n), d = {
-	sm: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.sm, "h-8", u),
-	md: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.md, "h-11", u),
-	lg: e("relative flex w-full min-w-0 items-center rounded-full border border-border-control bg-surface shadow-raised", o.lg, "min-h-12", u)
+	sm: e("relative flex w-full min-w-0 items-center rounded-[var(--radius-control)] border border-border-control bg-surface shadow-raised", o.sm, "h-8", u),
+	md: e("relative flex w-full min-w-0 items-center rounded-[var(--radius-control)] border border-border-control bg-surface shadow-raised", o.md, "h-11", u),
+	lg: e("relative flex w-full min-w-0 items-center rounded-[var(--radius-control)] border border-border-control bg-surface shadow-raised", o.lg, "min-h-12", u)
 }, f = "pointer-events-none opacity-50", p = {
 	sm: e("flex h-full w-full min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-2.5 text-left text-xs leading-none font-sans font-normal tracking-normal text-fg", "pr-2.5 shadow-none outline-none focus:outline-none focus-visible:outline-none", i),
 	md: e("flex h-full w-full min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-3 text-left text-sm leading-none font-sans font-normal tracking-normal text-fg", "pr-3 shadow-none outline-none focus:outline-none focus-visible:outline-none", i),

package/dist/components/molecules/Stat/Stat.d.ts

@@ -7,10 +7,18 @@ export type StatLayoutClassName = string;
 export interface StatTrend {
     /** Trend copy — e.g. `+2.1%` or `-0.8%`. */
     value: string;
+    /** `up` / `down` tint the badge. `neutral` and `flat` stay muted. */
     direction?: StatTrendDirection;
-    /** Optional context — exposed as `title` on the trend badge for sighted tooltips. */
+    /** Optional tooltip on the trend badge. Visible "vs" copy belongs on `context`. */
     label?: string;
 }
+/** Replaces the figure when the metric source is not wired. */
+export interface StatUnavailable {
+    /** Stand-in for the figure. Default `Not connected`. */
+    label?: string;
+    /** Why the figure is missing — visible under the stand-in. */
+    reason: string;
+}
 export interface StatProps {
     /** Metric name — e.g. Followers, ER, Reach. */
     label: string;
@@ -18,9 +26,25 @@ export interface StatProps {
     value: ReactNode;
     /** Compact delta — **Badge** `emphasis="muted"` in the value row. */
     trend?: StatTrend;
-    /** Leading slot — inline with the label row. */
+    /**
+     * Visible secondary line under the figure — e.g. `vs $14,850` or `of $1M goal`.
+     * Tabular figures. Hidden while `unavailable` is set (the reason takes this line).
+     */
+    context?: ReactNode;
+    /**
+     * One tabular line under the figure — for example "3 new" or "vs last scan".
+     * Hidden while `loading` or `unavailable`.
+     */
+    detail?: ReactNode;
+    /** Leading tile — pass a Lucide glyph. Composed with **ButtonIcon**. */
+    icon?: ReactNode;
+    /** Label-row action — pass **Button** `size="sm"` (e.g. View details). */
+    action?: ReactNode;
+    /** Replaces the figure and hides `trend`, `context`, and `detail` when the source is not wired. */
+    unavailable?: StatUnavailable;
+    /** Leading slot — inline with the label row, after `icon`. */
     start?: ReactNode;
-    /** Trailing slot — inline with the label row (e.g. share, kebab). */
+    /** Trailing slot — inline with the label row, before `action`. */
     end?: ReactNode;
     size?: StatSize;
     /** Skeleton label + value — sets `aria-busy` on the tile. */
@@ -35,11 +59,13 @@ export interface StatGroupProps {
     columns?: StatGroupColumns;
     className?: StatLayoutClassName;
 }
-declare function StatRoot({ label, value, trend, start, end, size, loading, className, }: StatProps): import("react").JSX.Element;
+declare function StatRoot({ label, value, trend, context, detail, icon, action, unavailable, start, end, size, loading, className, }: StatProps): import("react").JSX.Element;
 declare function StatGroup({ children, "aria-label": ariaLabel, columns, className, }: StatGroupProps): import("react").JSX.Element;
 /**
  * At-a-glance metric tile — label, headline value, optional muted trend badge.
- * Compose in **Stat.Group** for insights rows; pair **Card** + **Chart** below for history.
+ * `size="lg"` is the hero figure (`type-display-3`, tabular). `context` is the visible
+ * "vs" line. `detail` is one tabular line under the figure. Compose in **Stat.Group**
+ * for insights rows; pair **Card** + **Chart** below for history.
  */
 export declare const Stat: typeof StatRoot & {
     Group: typeof StatGroup;

package/dist/components/molecules/Stat/Stat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAeL,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,gBAAgB,EAChB,QAAQ,EACR,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAEtB,2EAA2E;AAC3E,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qEAAqE;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAiCD,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,GAAG,EACH,IAAW,EACX,OAAe,EACf,SAAS,GACV,EAAE,SAAS,+BA0BX;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,OAAW,EACX,SAAS,GACV,EAAE,cAAc,+BAUhB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Stat/Stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAyBL,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,gBAAgB,EAChB,QAAQ,EACR,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,SAAS,EACT,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAEtB,2EAA2E;AAC3E,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mGAAmG;IACnG,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAoCD,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,EACH,IAAW,EACX,OAAe,EACf,SAAS,GACV,EAAE,SAAS,+BAmDX;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,OAAW,EACX,SAAS,GACV,EAAE,cAAc,+BAUhB;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/molecules/Stat/Stat.js

@@ -1,76 +1,110 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { Badge as t } from "../../atoms/Badge/Badge.js";
-import { Skeleton as n } from "../../atoms/Skeleton/Skeleton.js";
-import { statContentClasses as r, statGroupColumns as i, statGroupGridClasses as a, statLabelClasses as o, statLabelEndClasses as s, statLabelRowClasses as c, statLabelStartClasses as l, statLabelTextClasses as u, statLoadingLabelHeights as d, statLoadingValueHeights as f, statShellClasses as p, statShellSizeClasses as m, statSizes as h, statTrendBadgeVariant as g, statTrendDirections as _, statValueRowClasses as v, statValueSizeClasses as y } from "./statStyles.js";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { ButtonIcon as n } from "../../atoms/Button/ButtonIcon.js";
+import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
+import { statContentClasses as i, statContextClasses as a, statDetailClasses as o, statGroupColumns as s, statGroupGridClasses as c, statIconButtonSize as l, statIconTileClasses as u, statIconTileSizeClasses as d, statLabelClasses as f, statLabelEndClasses as p, statLabelLgClasses as m, statLabelRowClasses as h, statLabelStartClasses as g, statLabelTextClasses as _, statLabelTrailClasses as v, statLoadingLabelHeights as y, statLoadingValueHeights as b, statShellClasses as x, statShellSizeClasses as S, statSizes as C, statTrendBadgeVariant as w, statTrendDirections as T, statUnavailableClasses as E, statValueRowClasses as D, statValueSizeClasses as O } from "./statStyles.js";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/components/molecules/Stat/Stat.tsx
-function C({ trend: e }) {
+function M({ trend: e }) {
 	let n = e.direction ?? "neutral";
-	return /* @__PURE__ */ x("span", {
+	return /* @__PURE__ */ A("span", {
 		title: e.label,
-		children: /* @__PURE__ */ x(t, {
+		children: /* @__PURE__ */ A(t, {
 			size: "sm",
 			emphasis: "muted",
-			variant: g(n),
+			variant: w(n),
 			children: e.value
 		})
 	});
 }
-function w({ size: e, index: t = 0 }) {
-	return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(n, {
-		width: "45%",
-		height: d[e],
-		radius: "inner",
-		index: t
-	}), /* @__PURE__ */ x(n, {
-		width: "70%",
-		height: f[e],
-		radius: "inner",
-		index: t + 1
-	})] });
+function N({ size: e, index: t = 0 }) {
+	return /* @__PURE__ */ j(k, { children: [
+		/* @__PURE__ */ A(r, {
+			width: "45%",
+			height: y[e],
+			radius: "inner",
+			index: t
+		}),
+		/* @__PURE__ */ A(r, {
+			width: "70%",
+			height: b[e],
+			radius: "inner",
+			index: t + 1
+		}),
+		e === "lg" ? /* @__PURE__ */ A(r, {
+			width: "40%",
+			height: 16,
+			radius: "inner",
+			index: t + 2
+		}) : null
+	] });
 }
-function T({ label: t, value: n, trend: i, start: a, end: d, size: f = "sm", loading: h = !1, className: g }) {
-	return /* @__PURE__ */ x("article", {
-		className: e(p, m[f], g),
-		"aria-busy": h || void 0,
-		"aria-label": h ? t : void 0,
-		children: /* @__PURE__ */ x("div", {
-			className: r,
-			children: h ? /* @__PURE__ */ x(w, { size: f }) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ S("div", {
-				className: c,
+function P({ label: t, value: r, trend: s, context: c, detail: y, icon: b, action: C, unavailable: w, start: T, end: P, size: F = "sm", loading: I = !1, className: L }) {
+	let R = P != null || C != null;
+	return /* @__PURE__ */ A("article", {
+		className: e(x, S[F], L),
+		"aria-busy": I || void 0,
+		"aria-label": I ? t : void 0,
+		children: /* @__PURE__ */ A("div", {
+			className: e(i, F === "lg" && "gap-2"),
+			children: I ? /* @__PURE__ */ A(N, { size: F }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ j("div", {
+				className: h,
 				children: [
-					a == null ? null : /* @__PURE__ */ x("div", {
-						className: l,
-						children: a
+					b == null ? null : /* @__PURE__ */ A("span", {
+						className: e(u, d[F]),
+						children: /* @__PURE__ */ A(n, {
+							size: l[F],
+							children: b
+						})
 					}),
-					/* @__PURE__ */ x("span", {
-						className: e(o, u),
+					T == null ? null : /* @__PURE__ */ A("div", {
+						className: g,
+						children: T
+					}),
+					/* @__PURE__ */ A("span", {
+						className: F === "lg" ? m : e(f, _),
 						children: t
 					}),
-					d == null ? null : /* @__PURE__ */ x("div", {
-						className: s,
-						children: d
-					})
+					R ? /* @__PURE__ */ j("div", {
+						className: C == null ? p : v,
+						children: [P, C]
+					}) : null
 				]
-			}), /* @__PURE__ */ S("div", {
-				className: v,
-				children: [/* @__PURE__ */ x("span", {
-					className: y[f],
-					children: n
-				}), i == null ? null : /* @__PURE__ */ x(C, { trend: i })]
-			})] })
+			}), w == null ? /* @__PURE__ */ j(k, { children: [
+				/* @__PURE__ */ j("div", {
+					className: D,
+					children: [/* @__PURE__ */ A("span", {
+						className: O[F],
+						children: r
+					}), s == null ? null : /* @__PURE__ */ A(M, { trend: s })]
+				}),
+				c == null ? null : /* @__PURE__ */ A("p", {
+					className: a,
+					children: c
+				}),
+				y == null ? null : /* @__PURE__ */ A("p", {
+					className: o,
+					children: y
+				})
+			] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A("p", {
+				className: E,
+				children: w.label ?? "Not connected"
+			}), /* @__PURE__ */ A("p", {
+				className: a,
+				children: w.reason
+			})] })] })
 		})
 	});
 }
-function E({ children: t, "aria-label": n, columns: r = 4, className: i }) {
-	return /* @__PURE__ */ x("div", {
-		className: e(a(r), i),
+function F({ children: t, "aria-label": n, columns: r = 4, className: i }) {
+	return /* @__PURE__ */ A("div", {
+		className: e(c(r), i),
 		role: n == null ? void 0 : "group",
 		"aria-label": n,
 		children: t
 	});
 }
-var D = Object.assign(T, { Group: E });
+var I = Object.assign(P, { Group: F });
 //#endregion
-export { D as Stat, i as statGroupColumns, a as statGroupGridClasses, h as statSizes, _ as statTrendDirections };
+export { I as Stat, s as statGroupColumns, c as statGroupGridClasses, C as statSizes, T as statTrendDirections };

package/dist/components/molecules/Stat/statStyles.d.ts

@@ -1,23 +1,43 @@
 import type { BadgeVariant } from "../../atoms/Badge/Badge";
-export declare const statSizes: readonly ["sm", "md"];
+import type { ButtonSize } from "../../atoms/Button/buttonStyles";
+export declare const statSizes: readonly ["sm", "md", "lg"];
 export type StatSize = (typeof statSizes)[number];
-export declare const statTrendDirections: readonly ["up", "down", "neutral"];
+export declare const statTrendDirections: readonly ["up", "down", "neutral", "flat"];
 export type StatTrendDirection = (typeof statTrendDirections)[number];
 export declare const statGroupColumns: readonly [2, 3, 4];
 export type StatGroupColumns = (typeof statGroupColumns)[number];
 /** Bordered metric tile — insights row and hero KPI. */
-export declare const statShellClasses = "flex min-w-0 flex-col rounded-xl border border-border bg-surface";
+export declare const statShellClasses = "flex min-w-0 flex-col rounded-[var(--radius-surface-md)] border border-border bg-surface";
 export declare const statShellSizeClasses: Record<StatSize, string>;
-export declare const statLabelRowClasses = "flex items-center gap-2";
+export declare const statLabelRowClasses = "flex flex-wrap items-center gap-2";
 export declare const statLabelStartClasses = "shrink-0";
 export declare const statLabelTextClasses = "min-w-0 flex-1";
 export declare const statLabelEndClasses = "ml-auto shrink-0";
+/** Trailing cluster when `end` and `action` share the label row. */
+export declare const statLabelTrailClasses = "ml-auto flex shrink-0 items-center gap-2";
 export declare const statContentClasses = "flex min-w-0 flex-col gap-1";
+export declare const statContentLgClasses = "gap-2";
 export declare const statLabelClasses: string;
+/** Hero label — sentence case. `sm` / `md` stay on the overline. */
+export declare const statLabelLgClasses = "type-label min-w-0 flex-1 text-muted";
+/**
+ * Leading glyph tile. `text-brand-outline` is navy in light (`--color-brand`) and the
+ * lifted navy in dark, where `#011272` disappears on the surface.
+ */
+export declare const statIconTileClasses = "inline-flex shrink-0 items-center justify-center rounded-lg bg-brand-tint text-brand-outline";
+export declare const statIconTileSizeClasses: Record<StatSize, string>;
+export declare const statIconButtonSize: Record<StatSize, ButtonSize>;
 export declare const statValueRowClasses = "flex flex-wrap items-center gap-x-2 gap-y-1";
 export declare const statValueSizeClasses: Record<StatSize, string>;
+/** Visible secondary line — "vs $14,850", "of $1M goal". Figures stay tabular. */
+export declare const statContextClasses: string;
+/** One line under the figure — "3 new" or "vs last scan". Figures stay tabular. */
+export declare const statDetailClasses: string;
+/** Stand-in figure when the source is not wired. */
+export declare const statUnavailableClasses = "type-body text-muted";
 export declare const statLoadingLabelHeights: Record<StatSize, number>;
 export declare const statLoadingValueHeights: Record<StatSize, number>;
+export declare const statLoadingContextHeight = 16;
 export declare function statGroupGridClasses(columns: StatGroupColumns): string;
 export declare function statTrendBadgeVariant(direction: StatTrendDirection): BadgeVariant;
 //# sourceMappingURL=statStyles.d.ts.map

package/dist/components/molecules/Stat/statStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"statStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Stat/statStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,eAAO,MAAM,SAAS,uBAAwB,CAAC;AAE/C,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,mBAAmB,oCAAqC,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,eAAO,MAAM,gBAAgB,oBAAqB,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,qEAAqE,CAAC;AAEnG,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,mBAAmB,4BAA4B,CAAC;AAE7D,eAAO,MAAM,qBAAqB,aAAa,CAAC;AAEhD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAEhE,eAAO,MAAM,gBAAgB,QAA8C,CAAC;AAE5E,eAAO,MAAM,mBAAmB,gDAAgD,CAAC;AAEjF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAGzD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAG5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAG5D,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAQtE;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,kBAAkB,GAAG,YAAY,CAQjF"}
+{"version":3,"file":"statStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Stat/statStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAElE,eAAO,MAAM,SAAS,6BAA8B,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,mBAAmB,4CAA6C,CAAC;AAE9E,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,eAAO,MAAM,gBAAgB,oBAAqB,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,6FAA6F,CAAC;AAE3H,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAIzD,CAAC;AAEF,eAAO,MAAM,mBAAmB,sCAAsC,CAAC;AAEvE,eAAO,MAAM,qBAAqB,aAAa,CAAC;AAEhD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD,oEAAoE;AACpE,eAAO,MAAM,qBAAqB,6CAA6C,CAAC;AAEhF,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAEhE,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAE5C,eAAO,MAAM,gBAAgB,QAA8C,CAAC;AAE5E,oEAAoE;AACpE,eAAO,MAAM,kBAAkB,yCAAyC,CAAC;AAEzE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGACgE,CAAC;AAEjG,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAI5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,QAAQ,EAAE,UAAU,CAI3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,gDAAgD,CAAC;AAEjF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAIzD,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,QAA+C,CAAC;AAE/E,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,QAA0D,CAAC;AAEzF,oDAAoD;AACpD,eAAO,MAAM,sBAAsB,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAI5D,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAI5D,CAAC;AAEF,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAQtE;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,kBAAkB,GAAG,YAAY,CAQjF"}

package/dist/components/molecules/Stat/statStyles.js

@@ -2,36 +2,53 @@
 import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
 //#region src/components/molecules/Stat/statStyles.ts
-var n = ["sm", "md"], r = [
+var n = [
+	"sm",
+	"md",
+	"lg"
+], r = [
 	"up",
 	"down",
-	"neutral"
+	"neutral",
+	"flat"
 ], i = [
 	2,
 	3,
 	4
-], a = "flex min-w-0 flex-col rounded-xl border border-border bg-surface", o = {
+], a = "flex min-w-0 flex-col rounded-[var(--radius-surface-md)] border border-border bg-surface", o = {
 	sm: "gap-2 p-4",
-	md: "gap-3 p-5"
-}, s = "flex items-center gap-2", c = "shrink-0", l = "min-w-0 flex-1", u = "ml-auto shrink-0", d = "flex min-w-0 flex-col gap-1", f = `${t("overline")} text-muted`, p = "flex flex-wrap items-center gap-x-2 gap-y-1", m = {
+	md: "gap-3 p-5",
+	lg: "gap-3 p-5"
+}, s = "flex flex-wrap items-center gap-2", c = "shrink-0", l = "min-w-0 flex-1", u = "ml-auto shrink-0", d = "ml-auto flex shrink-0 items-center gap-2", f = "flex min-w-0 flex-col gap-1", p = "gap-2", m = `${t("overline")} text-muted`, h = "type-label min-w-0 flex-1 text-muted", g = "inline-flex shrink-0 items-center justify-center rounded-lg bg-brand-tint text-brand-outline", _ = {
+	sm: "size-7",
+	md: "size-8",
+	lg: "size-9"
+}, v = {
+	sm: "xs",
+	md: "sm",
+	lg: "sm"
+}, y = "flex flex-wrap items-center gap-x-2 gap-y-1", b = {
 	sm: `${t("section-heading")} tabular-nums tracking-tight text-fg`,
-	md: `${t("page-heading")} tabular-nums tracking-tight text-fg`
-}, h = {
+	md: `${t("page-heading")} tabular-nums tracking-tight text-fg`,
+	lg: "type-display-3 tabular-nums tracking-tight text-fg"
+}, x = `${t("caption")} tabular-nums`, S = `${t("caption")} tabular-nums text-muted`, C = "type-body text-muted", w = {
 	sm: 12,
-	md: 14
-}, g = {
+	md: 14,
+	lg: 16
+}, T = {
 	sm: 28,
-	md: 36
+	md: 36,
+	lg: 40
 };
-function _(t) {
+function E(t) {
 	return e("grid grid-cols-2 gap-4", {
 		2: "lg:grid-cols-2",
 		3: "lg:grid-cols-3",
 		4: "lg:grid-cols-4"
 	}[t]);
 }
-function v(e) {
+function D(e) {
 	return e === "up" ? "success" : e === "down" ? "destructive" : "neutral";
 }
 //#endregion
-export { d as statContentClasses, i as statGroupColumns, _ as statGroupGridClasses, f as statLabelClasses, u as statLabelEndClasses, s as statLabelRowClasses, c as statLabelStartClasses, l as statLabelTextClasses, h as statLoadingLabelHeights, g as statLoadingValueHeights, a as statShellClasses, o as statShellSizeClasses, n as statSizes, v as statTrendBadgeVariant, r as statTrendDirections, p as statValueRowClasses, m as statValueSizeClasses };
+export { f as statContentClasses, p as statContentLgClasses, x as statContextClasses, S as statDetailClasses, i as statGroupColumns, E as statGroupGridClasses, v as statIconButtonSize, g as statIconTileClasses, _ as statIconTileSizeClasses, m as statLabelClasses, u as statLabelEndClasses, h as statLabelLgClasses, s as statLabelRowClasses, c as statLabelStartClasses, l as statLabelTextClasses, d as statLabelTrailClasses, w as statLoadingLabelHeights, T as statLoadingValueHeights, a as statShellClasses, o as statShellSizeClasses, n as statSizes, D as statTrendBadgeVariant, r as statTrendDirections, C as statUnavailableClasses, y as statValueRowClasses, b as statValueSizeClasses };