@thewhatmatters/wmds 0.2.0

package/dist/components/organisms/Chart/ChartHeatmap.js

@@ -0,0 +1,163 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartStroke as t, chartUiTokens as n } from "../../../lib/chartTheme.js";
+import { chartExplorationEmptyClasses as r, chartExplorationLegendLabelClasses as i, chartExplorationPlotHostClasses as a, chartExplorationRootClasses as o, chartExplorationSummaryClasses as s, chartExplorationSvgClasses as c, chartHeatmapLegendScaleClasses as l, chartHeatmapLegendSwatchClasses as u } from "./chartStyles.js";
+import { normalizeHeatmapValue as d } from "./chartExploration.js";
+import { ChartHoverTooltip as f } from "./ChartHoverTooltip.js";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { ParentSize as g } from "@visx/responsive";
+import { useTooltip as _, useTooltipInPortal as v } from "@visx/tooltip";
+import { HeatmapRect as y } from "@visx/heatmap";
+//#region src/components/organisms/Chart/ChartHeatmap.tsx
+function b({ rows: b, columns: x, cells: S, "aria-label": C, tone: w = "primary", metricLabel: T = "Value", minHeight: E = 240, className: D }) {
+	let { containerRef: O, TooltipInPortal: k } = v({
+		scroll: !0,
+		detectBounds: !1
+	}), { tooltipOpen: A, tooltipLeft: j = 0, tooltipTop: M = 0, tooltipData: N, showTooltip: P, hideTooltip: F } = _();
+	if (b.length === 0 || x.length === 0 || S.length === 0) return /* @__PURE__ */ m("div", {
+		className: e(r, D),
+		children: "No heatmap data"
+	});
+	let I = new Map(S.map((e) => [`${e.columnKey}:${e.rowKey}`, e])), L = x.map((e) => ({
+		key: e.key,
+		bins: b.map((t) => {
+			let n = I.get(`${e.key}:${t.key}`);
+			return {
+				rowKey: t.key,
+				rowLabel: t.label,
+				columnKey: e.key,
+				columnLabel: e.label,
+				value: n?.value ?? 0,
+				valueLabel: n?.valueLabel
+			};
+		})
+	})), R = Math.max(1, ...S.map((e) => e.value)), z = t(w);
+	return /* @__PURE__ */ h("div", {
+		className: e(o, D),
+		children: [
+			/* @__PURE__ */ m("div", {
+				ref: O,
+				className: a,
+				style: {
+					height: E,
+					minHeight: E
+				},
+				children: /* @__PURE__ */ m(g, { children: ({ width: e, height: t }) => {
+					if (e <= 0 || t <= 0) return null;
+					let r = {
+						left: e < 420 ? 54 : 62,
+						right: 8,
+						top: 28,
+						bottom: 4
+					}, i = e - r.left - r.right, a = t - r.top - r.bottom, o = i / x.length, s = a / b.length, l = Math.min(8, o * .12, s * .12);
+					return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("svg", {
+						width: e,
+						height: t,
+						role: "img",
+						"aria-label": C,
+						className: c,
+						children: [
+							x.map((e, t) => /* @__PURE__ */ m("text", {
+								x: r.left + t * o + o / 2,
+								y: 15,
+								textAnchor: "middle",
+								fill: n.axis,
+								fontSize: 10,
+								children: e.label
+							}, e.key)),
+							b.map((e, t) => /* @__PURE__ */ m("text", {
+								x: r.left - 10,
+								y: r.top + t * s + s / 2,
+								textAnchor: "end",
+								dominantBaseline: "middle",
+								fill: n.axis,
+								fontSize: 10,
+								children: e.label
+							}, e.key)),
+							/* @__PURE__ */ m(y, {
+								data: L,
+								binWidth: o,
+								binHeight: s,
+								gap: l,
+								xScale: (e) => e * o,
+								yScale: (e) => e * s,
+								bins: (e) => e.bins,
+								count: (e) => e.value,
+								colorScale: () => z,
+								opacityScale: (e) => .16 + d(Number(e), R) * .68,
+								children: (e) => /* @__PURE__ */ m(p, { children: e.flatMap((e) => e.map((e) => {
+									let t = r.left + e.x, n = r.top + e.y, i = A && N?.cell.rowKey === e.bin.rowKey && N.cell.columnKey === e.bin.columnKey, a = () => {
+										P({
+											tooltipData: { cell: e.bin },
+											tooltipLeft: t + e.width / 2,
+											tooltipTop: n
+										});
+									};
+									return /* @__PURE__ */ m("rect", {
+										x: t,
+										y: n,
+										width: e.width,
+										height: e.height,
+										rx: Math.min(4, o * .08, s * .08),
+										fill: e.color,
+										fillOpacity: e.opacity,
+										stroke: i ? "var(--color-text-primary)" : "transparent",
+										strokeWidth: 1,
+										"aria-hidden": !0,
+										onPointerEnter: a,
+										onPointerMove: a,
+										onPointerLeave: F,
+										children: /* @__PURE__ */ m("title", { children: `${e.bin.rowLabel}, ${e.bin.columnLabel}: ${e.bin.valueLabel ?? e.bin.value}` })
+									}, `${e.bin.columnKey}:${e.bin.rowKey}`);
+								})) })
+							})
+						]
+					}), /* @__PURE__ */ m(f, {
+						TooltipInPortal: k,
+						open: A && N != null,
+						left: j,
+						top: M,
+						chartWidth: e,
+						label: N == null ? "" : `${N.cell.rowLabel} · ${N.cell.columnLabel}`,
+						items: N == null ? [] : [{
+							key: "value",
+							label: T,
+							value: N.cell.valueLabel ?? String(N.cell.value),
+							color: z
+						}]
+					})] });
+				} })
+			}),
+			/* @__PURE__ */ m("ul", {
+				className: s,
+				children: L.flatMap((e) => e.bins.map((e) => /* @__PURE__ */ m("li", { children: `${e.rowLabel}, ${e.columnLabel}: ${e.valueLabel ?? e.value}` }, `${e.columnKey}:${e.rowKey}`)))
+			}),
+			/* @__PURE__ */ h("div", {
+				className: l,
+				"aria-hidden": !0,
+				children: [
+					/* @__PURE__ */ m("span", {
+						className: i,
+						children: "Low"
+					}),
+					[
+						.16,
+						.33,
+						.5,
+						.67,
+						.84
+					].map((e) => /* @__PURE__ */ m("span", {
+						className: u,
+						style: { opacity: e }
+					}, e)),
+					/* @__PURE__ */ m("span", {
+						className: i,
+						children: "High"
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { b as ChartHeatmap };

package/dist/components/organisms/Chart/ChartHoverTooltip.d.ts

@@ -0,0 +1,13 @@
+import type { useTooltipInPortal } from "@visx/tooltip";
+import type { ChartTooltipItem } from "../../../lib/chartTheme";
+export interface ChartHoverTooltipProps {
+    TooltipInPortal: ReturnType<typeof useTooltipInPortal>["TooltipInPortal"];
+    open: boolean;
+    left: number;
+    top: number;
+    chartWidth: number;
+    label: string;
+    items: ChartTooltipItem[];
+}
+export declare function ChartHoverTooltip({ TooltipInPortal, open, left, top, chartWidth, label, items, }: ChartHoverTooltipProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ChartHoverTooltip.d.ts.map

package/dist/components/organisms/Chart/ChartHoverTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartHoverTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartHoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAWhE,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,iBAAiB,CAAC,CAAC;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,eAAe,EACf,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,UAAU,EACV,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,sCA6BxB"}

package/dist/components/organisms/Chart/ChartHoverTooltip.js

@@ -0,0 +1,29 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartTooltipAnchorAboveLeftClasses as t, chartTooltipAnchorAboveRightClasses as n, chartTooltipAnchorBelowLeftClasses as r, chartTooltipAnchorBelowRightClasses as i, chartTooltipPortalClasses as a } from "./chartStyles.js";
+import { ChartTooltipContent as o } from "./ChartTooltipContent.js";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/organisms/Chart/ChartHoverTooltip.tsx
+function c({ TooltipInPortal: c, open: l, left: u, top: d, chartWidth: f, label: p, items: m }) {
+	if (!l) return null;
+	let h = d < 56, g = u > f - 176;
+	return /* @__PURE__ */ s(c, {
+		unstyled: !0,
+		applyPositionStyle: !0,
+		left: u,
+		top: d,
+		offsetLeft: 0,
+		offsetTop: 0,
+		className: a,
+		style: { pointerEvents: "none" },
+		children: /* @__PURE__ */ s("div", {
+			className: e(h ? g ? r : i : g ? t : n, a),
+			children: /* @__PURE__ */ s(o, {
+				label: p,
+				items: m
+			})
+		})
+	});
+}
+//#endregion
+export { c as ChartHoverTooltip };

package/dist/components/organisms/Chart/ChartLegend.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "react";
+import type { ChartSeriesConfig } from "../../../lib/chartTheme";
+/** Layout-only — margin in Card.Body below plot. */
+export type ChartLegendLayoutClassName = string;
+export interface ChartLegendProps extends HTMLAttributes<HTMLDivElement> {
+    config: ChartSeriesConfig;
+    /** Subset and order — defaults to Object.keys(config). */
+    keys?: string[];
+    className?: ChartLegendLayoutClassName;
+}
+/** Series key row — same config as **Chart.Tooltip.Content** (ADR-0015). */
+export declare function ChartLegend({ config, keys, className, ...props }: ChartLegendProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/components/organisms/Chart/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AASjE,oDAAoD;AACpD,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,EAAE,iBAAiB,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAED,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAwBlF"}

package/dist/components/organisms/Chart/ChartLegend.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartLegendClasses as t, chartLegendItemClasses as n, chartLegendLabelClasses as r, chartLegendSwatchClasses as i } from "./chartStyles.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/organisms/Chart/ChartLegend.tsx
+function s({ config: s, keys: c, className: l, ...u }) {
+	let d = c ?? Object.keys(s);
+	return /* @__PURE__ */ a("div", {
+		...u,
+		className: e(t, l),
+		role: "list",
+		children: d.map((e) => {
+			let t = s[e];
+			return t == null ? null : /* @__PURE__ */ o("div", {
+				className: n,
+				role: "listitem",
+				children: [/* @__PURE__ */ a("span", {
+					className: i,
+					style: { backgroundColor: t.color },
+					"aria-hidden": !0
+				}), /* @__PURE__ */ a("span", {
+					className: r,
+					children: t.label
+				})]
+			}, e);
+		})
+	});
+}
+//#endregion
+export { s as ChartLegend };

package/dist/components/organisms/Chart/ChartLoading.d.ts

@@ -0,0 +1,12 @@
+/** Layout-only — width, min-height in dashboard grids. */
+export type ChartLoadingLayoutClassName = string;
+export interface ChartLoadingProps {
+    /** Status copy — defaults to "Retrieving data". */
+    label?: string;
+    /** Matches **Chart.Cartesian** host height in Card wells. */
+    minHeight?: number;
+    className?: ChartLoadingLayoutClassName;
+}
+/** Centered spinner + label while chart data resolves — use instead of animating marks. */
+export declare function ChartLoading({ label, minHeight, className, }: ChartLoadingProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartLoading.d.ts.map

package/dist/components/organisms/Chart/ChartLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartLoading.tsx"],"names":[],"mappings":"AAIA,0DAA0D;AAC1D,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAC3B,KAAyB,EACzB,SAAe,EACf,SAAS,GACV,EAAE,iBAAiB,+BAanB"}

package/dist/components/organisms/Chart/ChartLoading.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { ButtonSpinner as t } from "../../atoms/Button/ButtonSpinner.js";
+import { chartLoadingLabelClasses as n, chartLoadingPanelClasses as r } from "./chartStyles.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/organisms/Chart/ChartLoading.tsx
+function o({ label: o = "Retrieving data", minHeight: s = 240, className: c }) {
+	return /* @__PURE__ */ a("div", {
+		className: e(r, c),
+		style: {
+			minHeight: s,
+			height: s
+		},
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		children: [/* @__PURE__ */ i(t, { size: "sm" }), /* @__PURE__ */ i("span", {
+			className: n,
+			children: o
+		})]
+	});
+}
+//#endregion
+export { o as ChartLoading };

package/dist/components/organisms/Chart/ChartRankedBars.d.ts

@@ -0,0 +1,18 @@
+export interface ChartRankedBarItem {
+    label: string;
+    value: number;
+    valueLabel?: string;
+}
+/** Layout-only — width and margin in dashboard grids. */
+export type ChartRankedBarsLayoutClassName = string;
+export type ChartRankedBarsAnimate = "initial" | "none";
+export interface ChartRankedBarsProps {
+    items: ChartRankedBarItem[];
+    "aria-label": string;
+    max?: number;
+    /** Mount enter only — bars reveal from zero with a short stagger. */
+    animate?: ChartRankedBarsAnimate;
+    className?: ChartRankedBarsLayoutClassName;
+}
+export declare function ChartRankedBars({ items, "aria-label": ariaLabel, max, animate, className, }: ChartRankedBarsProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartRankedBars.d.ts.map

package/dist/components/organisms/Chart/ChartRankedBars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartRankedBars.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartRankedBars.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,yDAAyD;AACzD,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,CAAC;AAExD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,8BAA8B,CAAC;CAC5C;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,GAAS,EACT,OAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,+BAoDtB"}

package/dist/components/organisms/Chart/ChartRankedBars.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { motionTransitionProp as t, readMotionDurationSeconds as n } from "../../../lib/motion.js";
+import { chartRankedBarFillClasses as r, chartRankedBarHeaderClasses as i, chartRankedBarLabelClasses as a, chartRankedBarListClasses as o, chartRankedBarRowClasses as s, chartRankedBarTrackClasses as c, chartRankedBarValueClasses as l } from "./chartStyles.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { motion as f, useReducedMotion as p } from "motion/react";
+//#region src/components/organisms/Chart/ChartRankedBars.tsx
+function m({ items: m, "aria-label": h, max: g = 100, animate: _ = "none", className: v }) {
+	let y = g > 0 ? g : 100, b = p(), x = _ === "initial" && !b;
+	return /* @__PURE__ */ u("div", {
+		role: "list",
+		"aria-label": h,
+		className: e(o, v),
+		children: m.map((e, o) => {
+			let p = Math.min(Math.max(e.value, 0), y), m = `${p / y * 100}%`, h = e.valueLabel ?? `${e.value}%`;
+			return /* @__PURE__ */ d("div", {
+				role: "listitem",
+				className: s,
+				children: [/* @__PURE__ */ d("div", {
+					className: i,
+					children: [/* @__PURE__ */ u("span", {
+						className: a,
+						children: e.label
+					}), /* @__PURE__ */ u("span", {
+						className: l,
+						children: h
+					})]
+				}), /* @__PURE__ */ u("div", {
+					role: "meter",
+					"aria-label": `${e.label}: ${h}`,
+					"aria-valuemin": 0,
+					"aria-valuemax": y,
+					"aria-valuenow": p,
+					className: c,
+					children: /* @__PURE__ */ u(f.span, {
+						"aria-hidden": !0,
+						className: r,
+						style: { "--chart-ranked-bar-width": m },
+						initial: x ? { scaleX: 0 } : !1,
+						animate: { scaleX: 1 },
+						transition: x ? {
+							...t("medium"),
+							delay: o * n("fast") * .35
+						} : { duration: 0 }
+					})
+				})]
+			}, e.label);
+		})
+	});
+}
+//#endregion
+export { m as ChartRankedBars };

package/dist/components/organisms/Chart/ChartTooltipContent.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import type { ChartTooltipIndicator, ChartTooltipItem } from "../../../lib/chartTheme";
+/** Layout-only — positioning comes from Chart.Tooltip shell. */
+export type ChartTooltipContentLayoutClassName = string;
+export interface ChartTooltipContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Header — formatted date or category at crosshair. */
+    label?: string;
+    items: ChartTooltipItem[];
+    indicator?: ChartTooltipIndicator;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    className?: ChartTooltipContentLayoutClassName;
+}
+/**
+ * Tooltip panel rows — shadcn Chart parity on WMDS tokens (ADR-0015).
+ * Series name left; tabular mono value right (`justify-between`).
+ */
+export declare function ChartTooltipContent({ label, items, indicator, hideLabel, hideIndicator, className, ...props }: ChartTooltipContentProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartTooltipContent.d.ts.map

package/dist/components/organisms/Chart/ChartTooltipContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipContent.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartTooltipContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAavF,gEAAgE;AAChE,MAAM,MAAM,kCAAkC,GAAG,MAAM,CAAC;AAExD,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9E,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,kCAAkC,CAAC;CAChD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,KAAK,EACL,SAAiB,EACjB,SAAiB,EACjB,aAAqB,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA6B1B"}

package/dist/components/organisms/Chart/ChartTooltipContent.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartTooltipIndicatorClasses as t, chartTooltipLabelClasses as n, chartTooltipListClasses as r, chartTooltipNameClasses as i, chartTooltipPanelClasses as a, chartTooltipRowBodyClasses as o, chartTooltipRowClasses as s, chartTooltipValueClasses as c } from "./chartStyles.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/organisms/Chart/ChartTooltipContent.tsx
+function d({ label: d, items: f, indicator: p = "dot", hideLabel: m = !1, hideIndicator: h = !1, className: g, ..._ }) {
+	return /* @__PURE__ */ u("div", {
+		..._,
+		className: e(a, g),
+		children: [d != null && !m ? /* @__PURE__ */ l("p", {
+			className: n,
+			children: d
+		}) : null, /* @__PURE__ */ l("ul", {
+			className: e(r, "m-0 list-none p-0"),
+			children: f.map((e) => /* @__PURE__ */ u("li", {
+				className: s,
+				children: [h ? null : /* @__PURE__ */ l("span", {
+					className: t(p),
+					style: p === "dashed" ? { borderColor: e.color } : { backgroundColor: e.color },
+					"aria-hidden": !0
+				}), /* @__PURE__ */ u("span", {
+					className: o,
+					children: [/* @__PURE__ */ l("span", {
+						className: i,
+						children: e.label
+					}), /* @__PURE__ */ l("span", {
+						className: c,
+						children: e.value
+					})]
+				})]
+			}, e.key))
+		})]
+	});
+}
+//#endregion
+export { d as ChartTooltipContent };

package/dist/components/organisms/Chart/ChartUnitGrid.d.ts

@@ -0,0 +1,17 @@
+import { type ChartSeriesConfig } from "../../../lib/chartTheme";
+export interface ChartUnitGridPart {
+    key: string;
+    value: number;
+}
+export type ChartUnitGridLayoutClassName = string;
+export interface ChartUnitGridProps {
+    parts: ChartUnitGridPart[];
+    config: ChartSeriesConfig;
+    "aria-label": string;
+    total?: number;
+    columns?: number;
+    minHeight?: number;
+    className?: ChartUnitGridLayoutClassName;
+}
+export declare function ChartUnitGrid({ parts, config, "aria-label": ariaLabel, total, columns, minHeight, className, }: ChartUnitGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartUnitGrid.d.ts.map

package/dist/components/organisms/Chart/ChartUnitGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartUnitGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartUnitGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,4BAA4B,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,4BAA4B,CAAC;CAC1C;AAUD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,YAAY,EAAE,SAAS,EACvB,KAAW,EACX,OAAY,EACZ,SAAe,EACf,SAAS,GACV,EAAE,kBAAkB,+BAoIpB"}

package/dist/components/organisms/Chart/ChartUnitGrid.js

@@ -0,0 +1,95 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartUiTokens as t } from "../../../lib/chartTheme.js";
+import { chartExplorationEmptyClasses as n, chartExplorationPlotHostClasses as r, chartExplorationRootClasses as i, chartExplorationSummaryClasses as a, chartExplorationSvgClasses as o, chartUnitGridCellClasses as s } from "./chartStyles.js";
+import { ChartLegend as c } from "./ChartLegend.js";
+import { allocateChartUnits as l } from "./chartExploration.js";
+import { ChartHoverTooltip as u } from "./ChartHoverTooltip.js";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ParentSize as m } from "@visx/responsive";
+import { useTooltip as h, useTooltipInPortal as g } from "@visx/tooltip";
+//#region src/components/organisms/Chart/ChartUnitGrid.tsx
+function _({ parts: _, config: v, "aria-label": y, total: b = 100, columns: x = 10, minHeight: S = 240, className: C }) {
+	let w = Math.max(1, Math.round(x)), T = l(_, b), E = Math.ceil(T.length / w), D = T.some(Boolean), O = T.filter((e) => e == null).length, k = new Map(_.map((e) => [e.key, e])), { containerRef: A, TooltipInPortal: j } = g({
+		scroll: !0,
+		detectBounds: !1
+	}), { tooltipOpen: M, tooltipLeft: N = 0, tooltipTop: P = 0, tooltipData: F, showTooltip: I, hideTooltip: L } = h();
+	return D ? /* @__PURE__ */ p("div", {
+		className: e(i, C),
+		children: [
+			/* @__PURE__ */ f("div", {
+				ref: A,
+				className: r,
+				style: {
+					height: S,
+					minHeight: S
+				},
+				children: /* @__PURE__ */ f(m, { children: ({ width: e, height: n }) => {
+					if (e <= 0 || n <= 0) return null;
+					let r = e / w, i = n / E, a = Math.min(6, r * .18, i * .18);
+					return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
+						width: e,
+						height: n,
+						role: "img",
+						"aria-label": y,
+						className: o,
+						children: T.map((e, n) => {
+							let o = n % w, c = Math.floor(n / w), l = e == null ? t.placeholder : v[e]?.color, u = e == null ? void 0 : k.get(e), d = e == null ? "Unallocated" : v[e]?.label ?? e, p = l ?? t.placeholder, m = () => {
+								I({
+									tooltipData: {
+										index: n,
+										key: e,
+										label: d,
+										value: u?.value ?? O,
+										color: p
+									},
+									tooltipLeft: o * r + r / 2,
+									tooltipTop: c * i + a / 2
+								});
+							};
+							return /* @__PURE__ */ f("rect", {
+								x: o * r + a / 2,
+								y: c * i + a / 2,
+								width: Math.max(0, r - a),
+								height: Math.max(0, i - a),
+								rx: Math.min(4, r * .12, i * .12),
+								className: s,
+								fill: p,
+								fillOpacity: M && F?.key !== e ? .28 : 1,
+								stroke: M && F?.index === n ? "var(--color-text-primary)" : "transparent",
+								strokeWidth: 1,
+								"aria-hidden": !0,
+								onPointerEnter: m,
+								onPointerMove: m,
+								onPointerLeave: L
+							}, `${e ?? "empty"}-${n}`);
+						})
+					}), /* @__PURE__ */ f(u, {
+						TooltipInPortal: j,
+						open: M && F != null,
+						left: N,
+						top: P,
+						chartWidth: e,
+						label: F?.label ?? "",
+						items: F == null ? [] : [{
+							key: "composition",
+							label: "Composition",
+							value: `${F.value} of ${b}`,
+							color: F.color
+						}]
+					})] });
+				} })
+			}),
+			/* @__PURE__ */ f("p", {
+				className: a,
+				children: _.map((e) => `${v[e.key]?.label ?? e.key}: ${e.value} of ${b}`).join("; ")
+			}),
+			/* @__PURE__ */ f(c, { config: v })
+		]
+	}) : /* @__PURE__ */ f("div", {
+		className: e(n, C),
+		children: "No composition data"
+	});
+}
+//#endregion
+export { _ as ChartUnitGrid };

package/dist/components/organisms/Chart/chartCartesianContext.d.ts

@@ -0,0 +1,50 @@
+import type { UseTooltipInPortal } from "@visx/tooltip";
+import type { ScaleLinear, ScaleTime } from "@visx/vendor/d3-scale";
+import { type ReactNode } from "react";
+import type { ChartPeriodKind, ChartSeriesConfig, ChartVariant } from "../../../lib/chartTheme";
+import type { ChartCartesianGapBand } from "./chartCartesianGaps";
+export type ChartCartesianPoint = {
+    date: Date;
+    [seriesKey: string]: Date | number | null | undefined;
+};
+export type ChartCartesianTooltipDatum = {
+    point: ChartCartesianPoint;
+    index: number;
+};
+export type ChartCartesianContextValue = {
+    data: ChartCartesianPoint[];
+    config: ChartSeriesConfig;
+    seriesKeys: string[];
+    variant: ChartVariant;
+    periodKind?: ChartPeriodKind;
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    innerWidth: number;
+    innerHeight: number;
+    xScale: ScaleTime<number, number>;
+    yScale: ScaleLinear<number, number>;
+    xAccessor: (point: ChartCartesianPoint) => Date;
+    yAccessor: (point: ChartCartesianPoint, key: string) => number;
+    TooltipInPortal: UseTooltipInPortal["TooltipInPortal"];
+    /** When true, area series plays mount enter (path draw + fill fade). */
+    animateEnter: boolean;
+    /** Horizontal grid always; vertical dashed columns at x-axis ticks when true. */
+    verticalGrid: boolean;
+    /** Y-axis tick formatter — defaults to chartFormatAxisValue. */
+    yTickFormat?: (value: number) => string;
+    /** In-series hatch + pill — empty when `noData={false}` or no gaps. */
+    noDataLabel: string;
+    gapBands: ChartCartesianGapBand[];
+};
+export declare function ChartCartesianProvider({ value, children, }: {
+    value: ChartCartesianContextValue;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useChartCartesian(): ChartCartesianContextValue;
+//# sourceMappingURL=chartCartesianContext.d.ts.map

package/dist/components/organisms/Chart/chartCartesianContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartCartesianContext.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/chartCartesianContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,IAAI,CAAC;IACX,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,MAAM,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/D,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,wEAAwE;IACxE,YAAY,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,YAAY,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,uEAAuE;IACvE,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;CACnC,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAEA;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAM9D"}

package/dist/components/organisms/Chart/chartCartesianContext.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/organisms/Chart/chartCartesianContext.tsx
+var r = e(null);
+function i({ value: e, children: t }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: e,
+		children: t
+	});
+}
+function a() {
+	let e = t(r);
+	if (e == null) throw Error("[WMDS Chart] Cartesian subcomponents must render inside Chart.Cartesian.");
+	return e;
+}
+//#endregion
+export { i as ChartCartesianProvider, a as useChartCartesian };