@thewhatmatters/wmds 0.4.8 → 0.4.27

package/dist/components/molecules/NavList/NavList.js

@@ -2,102 +2,115 @@
 import { cn as e } from "../../../lib/cn.js";
 import { ButtonIcon as t } from "../../atoms/Button/ButtonIcon.js";
 import { Button as n } from "../../atoms/Button/Button.js";
-import { navListItemCountClasses as r, navListItemIconClasses as i, navListItemLabelClasses as a, navListItemWrapClasses as o, navListLabelAlignments as s, navListSectionBrandBandClasses as c, navListSectionClasses as l, navListSectionLabelBrandClasses as u, navListSectionLabelDefaultClasses as d, navListShellClasses as f } from "./navListStyles.js";
-import { cloneElement as p, createContext as m, isValidElement as h, useContext as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { navListItemCountClasses as r, navListItemIconClasses as i, navListItemLabelClasses as a, navListItemTrailClasses as o, navListItemWrapClasses as s, navListLabelAlignments as c, navListSectionBrandBandClasses as l, navListSectionClasses as u, navListSectionLabelBrandClasses as d, navListSectionLabelClasses as f, navListSectionLabelDefaultClasses as p, navListSectionLabelRowClasses as m, navListShellClasses as h } from "./navListStyles.js";
+import { cloneElement as g, createContext as _, createElement as v, isValidElement as y, useContext as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/molecules/NavList/NavList.tsx
-var y = m({});
-function b({ icon: n, selected: r }) {
-	let a = h(n) ? p(n, {
+var C = _({});
+function w({ icon: n, selected: r }) {
+	let a = y(n) ? g(n, {
 		strokeWidth: r ? 2.25 : 1.75,
 		...r ? {
 			fill: "currentColor",
 			fillOpacity: .12
 		} : { fill: "none" }
 	}) : n;
-	return /* @__PURE__ */ _("span", {
+	return /* @__PURE__ */ x("span", {
 		className: e("inline-flex shrink-0", i(r)),
-		children: /* @__PURE__ */ _(t, {
+		children: /* @__PURE__ */ x(t, {
 			size: "sm",
 			children: a
 		})
 	});
 }
-function x({ label: e, labelAlign: t = "section" }) {
-	return t === "brand" ? /* @__PURE__ */ _("div", {
-		className: c,
-		children: /* @__PURE__ */ _("p", {
-			className: u,
-			children: e
-		})
-	}) : /* @__PURE__ */ _("p", {
-		className: d,
-		children: e
+function T({ label: t, labelAlign: n = "section", action: r }) {
+	return n === "brand" ? /* @__PURE__ */ S("div", {
+		className: e(l, r != null && "justify-between gap-2"),
+		children: [/* @__PURE__ */ x("p", {
+			className: d,
+			children: t
+		}), r]
+	}) : /* @__PURE__ */ S("div", {
+		className: e(p, m),
+		children: [/* @__PURE__ */ x("p", {
+			className: f,
+			children: t
+		}), r]
 	});
 }
-function S({ label: t, labelAlign: n = "section", children: r, className: i }) {
-	return /* @__PURE__ */ v("div", {
-		className: e(l, i),
-		children: [t == null ? null : /* @__PURE__ */ _(x, {
+function E({ label: t, labelAlign: n = "section", action: r, children: i, className: a }) {
+	return /* @__PURE__ */ S("div", {
+		className: e(u, a),
+		children: [t == null ? null : /* @__PURE__ */ x(T, {
 			label: t,
-			labelAlign: n
-		}), r]
+			labelAlign: n,
+			action: r
+		}), i]
 	});
 }
-function C({ id: t, label: i, icon: s, count: c, selected: l, onSelect: u, className: d }) {
-	let f = g(y), p = l ?? f.activeId === t, m = u ?? f.onSelect;
-	return /* @__PURE__ */ _("div", {
-		className: e(o, d),
-		children: /* @__PURE__ */ v(n, {
+function D(e, t) {
+	if (t != null && e != null && console.warn("[WMDS NavList] Pass `href` or `render` on an item, not both. `render` is used."), t != null) return t;
+	if (e != null) return v("a", { href: e });
+}
+function O({ id: t, label: i, icon: c, count: l, href: u, render: d, trailing: f, selected: p, onSelect: m, className: h }) {
+	let g = b(C), _ = p ?? g.activeId === t, v = m ?? g.onSelect, y = D(u, d);
+	return /* @__PURE__ */ x("div", {
+		className: e(s, h),
+		children: /* @__PURE__ */ S(n, {
 			layout: "nav",
 			type: "button",
-			selected: p,
-			onClick: m == null ? void 0 : () => m(t),
+			selected: _,
+			render: y,
+			onClick: v == null ? void 0 : () => v(t),
 			children: [
-				s == null ? null : /* @__PURE__ */ _(b, {
-					icon: s,
-					selected: p
+				c == null ? null : /* @__PURE__ */ x(w, {
+					icon: c,
+					selected: _
 				}),
-				/* @__PURE__ */ _("span", {
+				/* @__PURE__ */ x("span", {
 					className: a,
 					children: i
 				}),
-				c == null ? null : /* @__PURE__ */ _("span", {
-					className: r,
-					children: c.toLocaleString()
-				})
+				l != null || f != null ? /* @__PURE__ */ S("span", {
+					className: o,
+					children: [l == null ? null : /* @__PURE__ */ x("span", {
+						className: r,
+						children: l.toLocaleString()
+					}), f]
+				}) : null
 			]
 		})
 	});
 }
-function w({ sections: t, activeId: n, onSelect: r, children: i, "aria-label": a = "Section", className: o }) {
+function k({ sections: t, activeId: n, onSelect: r, children: i, "aria-label": a = "Section", className: o }) {
 	let s = {
 		activeId: n,
 		onSelect: r
 	};
-	return t == null ? /* @__PURE__ */ _("nav", {
+	return t == null ? /* @__PURE__ */ x("nav", {
 		"aria-label": a,
-		className: e(f, o),
-		children: /* @__PURE__ */ _(y.Provider, {
+		className: e(h, o),
+		children: /* @__PURE__ */ x(C.Provider, {
 			value: s,
 			children: i
 		})
-	}) : /* @__PURE__ */ _("nav", {
+	}) : /* @__PURE__ */ x("nav", {
 		"aria-label": a,
-		className: e(f, o),
-		children: /* @__PURE__ */ _(y.Provider, {
+		className: e(h, o),
+		children: /* @__PURE__ */ x(C.Provider, {
 			value: s,
-			children: t.map((e, t) => /* @__PURE__ */ _(S, {
+			children: t.map((e, t) => /* @__PURE__ */ x(E, {
 				label: e.label,
+				action: e.action,
 				labelAlign: e.labelAlign ?? (t === 0 && e.label != null ? "brand" : "section"),
-				children: e.items.map((e) => /* @__PURE__ */ _(C, { ...e }, e.id))
+				children: e.items.map((e) => /* @__PURE__ */ x(O, { ...e }, e.id))
 			}, e.label ?? t))
 		})
 	});
 }
-var T = Object.assign(w, {
-	Section: S,
-	Item: C
+var A = Object.assign(k, {
+	Section: E,
+	Item: O
 });
 //#endregion
-export { T as NavList, s as navListLabelAlignments };
+export { A as NavList, c as navListLabelAlignments };

package/dist/components/molecules/NavList/navListStyles.d.ts

@@ -10,6 +10,8 @@ export declare const navListSectionLabelBrandClasses: string;
 export declare const navListSectionLabelDefaultClasses: string;
 export declare const navListItemWrapClasses = "relative w-full px-2";
 export declare const navListItemLabelClasses = "min-w-0 flex-1 truncate text-left";
+export declare const navListItemTrailClasses = "ml-auto flex shrink-0 items-center gap-2";
 export declare const navListItemCountClasses: string;
+export declare const navListSectionLabelRowClasses = "flex items-center justify-between gap-2";
 export declare function navListItemIconClasses(selected: boolean): "text-muted" | "text-fg";
 //# sourceMappingURL=navListStyles.d.ts.map

package/dist/components/molecules/NavList/navListStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NavList/navListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,+BAAgC,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,sCAAsC,CAAC;AAEvE,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,kFAAkF;AAClF,eAAO,MAAM,8BAA8B,QAG1C,CAAC;AAEF,eAAO,MAAM,0BAA0B,QAAgD,CAAC;AAExF,eAAO,MAAM,+BAA+B,QAA6B,CAAC;AAE1E,eAAO,MAAM,iCAAiC,QAG7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,eAAO,MAAM,uBAAuB,QAInC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,OAAO,4BAEvD"}
+{"version":3,"file":"navListStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NavList/navListStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,+BAAgC,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5E,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,sCAAsC,CAAC;AAEvE,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,kFAAkF;AAClF,eAAO,MAAM,8BAA8B,QAG1C,CAAC;AAEF,eAAO,MAAM,0BAA0B,QAAgD,CAAC;AAExF,eAAO,MAAM,+BAA+B,QAA6B,CAAC;AAE1E,eAAO,MAAM,iCAAiC,QAG7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,yBAAyB,CAAC;AAE7D,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,eAAO,MAAM,uBAAuB,6CAA6C,CAAC;AAElF,eAAO,MAAM,uBAAuB,QAInC,CAAC;AAEF,eAAO,MAAM,6BAA6B,4CAA4C,CAAC;AAEvF,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,OAAO,4BAEvD"}

package/dist/components/molecules/NavList/navListStyles.js

@@ -3,9 +3,9 @@ import { cn as e } from "../../../lib/cn.js";
 import { typographyClass as t } from "../../../lib/typography.js";
 import { pageHeaderAppBandHeightClasses as n } from "../PageHeader/pageHeaderStyles.js";
 //#region src/components/molecules/NavList/navListStyles.ts
-var r = ["brand", "section"], i = "flex h-full min-h-0 w-52 flex-col", a = "flex flex-col gap-1", o = e("box-border flex shrink-0 items-center px-4", n), s = e(t("overline"), "text-muted"), c = s, l = e(s, "px-4 pb-1 pt-3"), u = "relative w-full px-2", d = "min-w-0 flex-1 truncate text-left", f = e("ml-auto tabular-nums", t("caption"), "text-muted");
-function p(e) {
+var r = ["brand", "section"], i = "flex h-full min-h-0 w-52 flex-col", a = "flex flex-col gap-1", o = e("box-border flex shrink-0 items-center px-4", n), s = e(t("overline"), "text-muted"), c = s, l = e(s, "px-4 pb-1 pt-3"), u = "relative w-full px-2", d = "min-w-0 flex-1 truncate text-left", f = "ml-auto flex shrink-0 items-center gap-2", p = e("tabular-nums", t("caption"), "text-muted"), m = "flex items-center justify-between gap-2";
+function h(e) {
 	return e ? "text-fg" : "text-muted";
 }
 //#endregion
-export { f as navListItemCountClasses, p as navListItemIconClasses, d as navListItemLabelClasses, u as navListItemWrapClasses, r as navListLabelAlignments, o as navListSectionBrandBandClasses, a as navListSectionClasses, c as navListSectionLabelBrandClasses, s as navListSectionLabelClasses, l as navListSectionLabelDefaultClasses, i as navListShellClasses };
+export { p as navListItemCountClasses, h as navListItemIconClasses, d as navListItemLabelClasses, f as navListItemTrailClasses, u as navListItemWrapClasses, r as navListLabelAlignments, o as navListSectionBrandBandClasses, a as navListSectionClasses, c as navListSectionLabelBrandClasses, s as navListSectionLabelClasses, l as navListSectionLabelDefaultClasses, m as navListSectionLabelRowClasses, i as navListShellClasses };

package/dist/components/molecules/PageHeader/PageHeader.js

@@ -9,10 +9,10 @@ var l = {
 	toolbar: "span"
 };
 function u({ title: t, variant: o = "page", start: u, end: d, "aria-label": f, className: p }) {
-	let m = l[o], h = t != null && t.length > 0, g = h ? void 0 : f;
+	let m = l[o], h = t != null && t.length > 0;
 	return o === "toolbar" ? /* @__PURE__ */ c("div", {
 		role: "toolbar",
-		"aria-label": g,
+		"aria-label": h ? void 0 : f,
 		className: e(r.toolbar, p),
 		children: [u != null || h ? /* @__PURE__ */ c("div", {
 			className: i,
@@ -25,7 +25,7 @@ function u({ title: t, variant: o = "page", start: u, end: d, "aria-label": f, c
 			children: d
 		})]
 	}) : /* @__PURE__ */ c("header", {
-		"aria-label": g,
+		"aria-label": f,
 		className: e(r[o], p),
 		children: [/* @__PURE__ */ c("div", {
 			className: i,

package/dist/components/molecules/SegmentedControl/segmentedControlStyles.js

@@ -1,21 +1,21 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
-import { motionTransition as t } from "../../../lib/motion.js";
-import { clusterHeightClasses as n } from "../../../lib/clusterScale.js";
+import { clusterHeightClasses as t } from "../../../lib/clusterScale.js";
+import { motionTransition as n } from "../../../lib/motion.js";
 //#region src/components/molecules/SegmentedControl/segmentedControlStyles.ts
 var r = [
 	"sm",
 	"md",
 	"lg"
-], i = ["hug", "stretch"], a = e("relative inline-flex items-stretch rounded-full bg-body p-0.5 shadow-hairline", t("fast")), o = "flex w-full min-w-0", s = {
-	sm: n.sm,
-	md: n.md,
-	lg: n.lg
+], i = ["hug", "stretch"], a = e("relative inline-flex items-stretch rounded-full bg-body p-0.5 shadow-hairline", n("fast")), o = "flex w-full min-w-0", s = {
+	sm: t.sm,
+	md: t.md,
+	lg: t.lg
 }, c = {
 	sm: "px-2.5 text-xs leading-none",
 	md: "px-3 text-sm leading-none",
 	lg: "px-4 text-sm leading-none"
-}, l = e("relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-sans font-medium tracking-normal", "transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset", t("fast")), u = "min-w-0 flex-1", d = "relative z-10 inline-flex min-w-0 items-center justify-center", f = "w-full", p = {
+}, l = e("relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full font-sans font-medium tracking-normal", "transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset", n("fast")), u = "min-w-0 flex-1", d = "relative z-10 inline-flex min-w-0 items-center justify-center", f = "w-full", p = {
 	sm: "gap-1",
 	md: "gap-1.5",
 	lg: "gap-2"

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 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,qEAAqE,CAAC;AAEnG,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 = {
 	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 };