@thewhatmatters/wmds 0.4.9 → 0.4.28

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

@@ -1,5 +1,6 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 import { type ChartSegmentFillVariant, type ChartSegmentPreset, type ChartTone } from "../../../lib/chartTheme";
+import { ChartSegmentedRing } from "./ChartSegmentedRing";
 import { ChartLegend } from "./ChartLegend";
 import { ChartTooltipContent } from "./ChartTooltipContent";
 import { ChartLoading } from "./ChartLoading";
@@ -12,6 +13,8 @@ import { ChartCartesian, ChartCartesianAreaSeries, ChartCartesianAxisBottom, Cha
 export { chartKpiHeroRowClasses, chartKpiHeroValueClasses, chartKpiTrendLabelClasses, chartKpiTrendRowClasses, chartKpiTrendValueClasses, } from "./chartStyles";
 export type { ChartSegmentFillVariant, ChartSegmentPreset, ChartTone } from "../../../lib/chartTheme";
 export type { ChartSegmentedBarAnimate } from "./chartSegmentedBarMotion";
+export type { ChartSegmentedRingProps, ChartSegmentedRingSize, ChartSegmentedRingUnavailable, } from "./ChartSegmentedRing";
+export { chartSegmentedRingSegmentDefault, chartSegmentedRingSizes } from "./ChartSegmentedRing";
 export { chartCategoricalCount, chartCategoricalPalette, chartFormatPercent, chartMaxTicksForWidth, chartSegmentBarWidth, chartSegmentFillVariants, chartSegmentPresets, chartSegmentTickSpec, resolveCapacityBarLayout, resolveSegmentBarConfig, } from "../../../lib/chartTheme";
 /** Layout-only — width, margin in dashboard grids. */
 export type ChartLayoutClassName = string;
@@ -45,6 +48,7 @@ declare function ChartSegmentedBar({ value, max, tone, fill, segments, preset, l
 export declare const Chart: typeof ChartFrameRoot & {
     Frame: typeof ChartFrameRoot;
     SegmentedBar: typeof ChartSegmentedBar;
+    SegmentedRing: typeof ChartSegmentedRing;
     RankedBars: typeof ChartRankedBars;
     UnitGrid: typeof ChartUnitGrid;
     DistributionStrip: typeof ChartDistributionStrip;
@@ -67,7 +71,7 @@ export { ChartCartesian, ChartCartesianAreaSeries, ChartCartesianAxisBottom, Cha
 export type { ChartCartesianDefinedSegment, ChartCartesianGapBand, ChartCartesianGapMode, ChartCartesianGapRange, ChartCartesianGapRun, ChartCartesianNoDataOptions, ChartCartesianNoDataProp, ChartCartesianPoint, ChartCartesianProps, } from "./ChartCartesian";
 export { ChartLoading, ChartLegend, ChartRankedBars, ChartUnitGrid, ChartDistributionStrip, ChartHeatmap, ChartTooltipContent };
 export type { ChartLoadingLayoutClassName, ChartLoadingProps } from "./ChartLoading";
-export type { ChartLegendProps, ChartLegendLayoutClassName } from "./ChartLegend";
+export type { ChartLegendProps, ChartLegendLayoutClassName, ChartLegendVariant } from "./ChartLegend";
 export type { ChartRankedBarItem, ChartRankedBarsAnimate, ChartRankedBarsLayoutClassName, ChartRankedBarsProps, } from "./ChartRankedBars";
 export type { ChartUnitGridLayoutClassName, ChartUnitGridPart, ChartUnitGridProps, } from "./ChartUnitGrid";
 export type { ChartDistributionItem, ChartDistributionReference, ChartDistributionStripLayoutClassName, ChartDistributionStripProps, } from "./ChartDistributionStrip";

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/Chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/Chart.tsx"],"names":[],"mappings":"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"}

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

@@ -1,24 +1,25 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { chartFormatPercent as t, chartMaxTicksForWidth as n, chartSegmentBarWidth as r, chartSegmentFillVariants as i, chartSegmentPosition as a, chartSegmentPresets as o, chartSegmentTickSpec as s, chartStroke as c, chartUiTokens as l, resolveCapacityBarLayout as u, resolveSegmentBarConfig as d } from "../../../lib/chartTheme.js";
-import { chartFrameClasses as f, chartKpiHeroRowClasses as p, chartKpiHeroValueClasses as m, chartKpiTrendLabelClasses as h, chartKpiTrendRowClasses as g, chartKpiTrendValueClasses as _, chartSegmentBarHostClasses as v } from "./chartStyles.js";
-import { ChartLegend as y } from "./ChartLegend.js";
-import { ChartTooltipContent as b } from "./ChartTooltipContent.js";
-import { ChartLoading as x } from "./ChartLoading.js";
-import { ChartRankedBars as S } from "./ChartRankedBars.js";
-import { ChartUnitGrid as C } from "./ChartUnitGrid.js";
-import { ChartDistributionStrip as w } from "./ChartDistributionStrip.js";
-import { ChartHeatmap as T } from "./ChartHeatmap.js";
-import { chartSegmentedBarSpringConfig as E } from "./chartSegmentedBarMotion.js";
-import { chartCartesianDefinedSegments as D, chartCartesianGapBands as O, chartCartesianGapRuns as k, chartCartesianHasPlottableValues as A, chartCartesianNoDataLabelDefault as j, isChartCartesianNumber as M, isChartCartesianSeriesDefined as N, resolveChartCartesianGapKeys as P, resolveChartCartesianNoData as F } from "./chartCartesianGaps.js";
-import { ChartCartesian as I, ChartCartesianAreaSeries as ee, ChartCartesianAxisBottom as te, ChartCartesianAxisLeft as L, ChartCartesianGrid as R, ChartCartesianNoData as z, ChartCartesianTooltipLayer as B } from "./ChartCartesian.js";
-import { useEffect as V, useId as H, useLayoutEffect as U, useMemo as W, useRef as G, useState as K } from "react";
-import { Fragment as q, jsx as J, jsxs as Y } from "react/jsx-runtime";
-import { useMotionValueEvent as X, useReducedMotion as Z, useSpring as ne } from "motion/react";
-import { Group as Q } from "@visx/group";
+import { chartFrameClasses as f, chartKpiHeroRowClasses as p, chartKpiHeroValueClasses as m, chartKpiTrendLabelClasses as h, chartKpiTrendRowClasses as g, chartKpiTrendValueClasses as _, chartSegmentBarFallbackClasses as v, chartSegmentBarFallbackTickClasses as y, chartSegmentBarHostClasses as b } from "./chartStyles.js";
+import { chartSegmentedBarSpringConfig as x } from "./chartSegmentedBarMotion.js";
+import { ChartSegmentedRing as S, chartSegmentedRingSegmentDefault as C, chartSegmentedRingSizes as w } from "./ChartSegmentedRing.js";
+import { ChartLegend as T } from "./ChartLegend.js";
+import { ChartTooltipContent as E } from "./ChartTooltipContent.js";
+import { ChartLoading as D } from "./ChartLoading.js";
+import { ChartRankedBars as O } from "./ChartRankedBars.js";
+import { ChartUnitGrid as k } from "./ChartUnitGrid.js";
+import { ChartDistributionStrip as A } from "./ChartDistributionStrip.js";
+import { ChartHeatmap as j } from "./ChartHeatmap.js";
+import { chartCartesianDefinedSegments as M, chartCartesianGapBands as N, chartCartesianGapRuns as P, chartCartesianHasPlottableValues as ee, chartCartesianNoDataLabelDefault as te, isChartCartesianNumber as ne, isChartCartesianSeriesDefined as re, resolveChartCartesianGapKeys as F, resolveChartCartesianNoData as I } from "./chartCartesianGaps.js";
+import { ChartCartesian as L, ChartCartesianAreaSeries as R, ChartCartesianAxisBottom as z, ChartCartesianAxisLeft as B, ChartCartesianGrid as V, ChartCartesianNoData as H, ChartCartesianTooltipLayer as U } from "./ChartCartesian.js";
+import { useEffect as W, useId as G, useLayoutEffect as K, useMemo as q, useRef as J, useState as Y } from "react";
+import { Fragment as ie, jsx as X, jsxs as Z } from "react/jsx-runtime";
+import { useMotionValueEvent as ae, useReducedMotion as oe, useSpring as se } from "motion/react";
+import { Group as ce } from "@visx/group";
 //#region src/components/organisms/Chart/Chart.tsx
-function $({ children: t, segmentHeight: n = o.default.height, className: r, style: i, ...a }) {
-	return /* @__PURE__ */ J("div", {
+function Q({ children: t, segmentHeight: n = o.default.height, className: r, style: i, ...a }) {
+	return /* @__PURE__ */ X("div", {
 		className: e(f, r),
 		style: {
 			...i,
@@ -28,15 +29,15 @@ function $({ children: t, segmentHeight: n = o.default.height, className: r, sty
 		children: t
 	});
 }
-function re({ isFilled: e, usesBarGradient: t, gradientId: n, fillColor: r, trackColor: i }) {
+function le({ isFilled: e, usesBarGradient: t, gradientId: n, fillColor: r, trackColor: i }) {
 	return e && t ? `url(#${n})` : e ? r : i;
 }
-function ie({ width: e, value: t, max: n, tone: r = "primary", fill: o = "solid", segments: s, preset: d = "default", label: f, gradientId: p, fillProgress: m }) {
+function $({ width: e, value: t, max: n, tone: r = "primary", fill: o = "solid", segments: s, preset: d = "default", label: f, gradientId: p, fillProgress: m }) {
 	let { config: h, displayCount: g, tickWidth: _, gap: v, barWidth: y } = u(e, {
 		preset: d,
 		segments: s
-	}), b = h.height, x = h.segmentRadius, S = n > 0 ? n : 1, C = Math.min(Math.max(t, 0), S), w = `${Math.round(C / S * 100)}%`, T = f ?? `${w} of capacity`, E = Math.min(g, Math.max(0, Math.round(m * g))), D = Math.round(m * C), O = W(() => Array.from({ length: g }, (e, t) => t), [g]), k = c(r), A = l.placeholder, j = o === "velocity" || o === "semantic";
-	return e <= 0 ? null : /* @__PURE__ */ Y("svg", {
+	}), b = h.height, x = h.segmentRadius, S = n > 0 ? n : 1, C = Math.min(Math.max(t, 0), S), w = `${Math.round(C / S * 100)}%`, T = f ?? `${w} of capacity`, E = Math.min(g, Math.max(0, Math.round(m * g))), D = Math.round(m * C), O = q(() => Array.from({ length: g }, (e, t) => t), [g]), k = c(r), A = l.placeholder, j = o === "velocity" || o === "semantic";
+	return e <= 0 ? null : /* @__PURE__ */ Z("svg", {
 		width: y,
 		height: b,
 		role: "meter",
@@ -45,35 +46,35 @@ function ie({ width: e, value: t, max: n, tone: r = "primary", fill: o = "solid"
 		"aria-valuemin": 0,
 		"aria-valuemax": S,
 		className: "block w-full max-w-full",
-		children: [j ? /* @__PURE__ */ J("defs", { children: /* @__PURE__ */ J("linearGradient", {
+		children: [j ? /* @__PURE__ */ X("defs", { children: /* @__PURE__ */ X("linearGradient", {
 			id: p,
 			x1: 0,
 			x2: y,
 			y1: 0,
 			y2: 0,
 			gradientUnits: "userSpaceOnUse",
-			children: o === "velocity" ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("stop", {
+			children: o === "velocity" ? /* @__PURE__ */ Z(ie, { children: [/* @__PURE__ */ X("stop", {
 				offset: "0%",
 				stopColor: k,
 				stopOpacity: i.velocity.startOpacity
-			}), /* @__PURE__ */ J("stop", {
+			}), /* @__PURE__ */ X("stop", {
 				offset: "100%",
 				stopColor: k,
 				stopOpacity: i.velocity.endOpacity
-			})] }) : i.semantic.stops.map((e) => /* @__PURE__ */ J("stop", {
+			})] }) : i.semantic.stops.map((e) => /* @__PURE__ */ X("stop", {
 				offset: `${e.offset * 100}%`,
 				stopColor: e.color
 			}, e.offset))
-		}) }) : null, /* @__PURE__ */ J(Q, { children: O.map((e) => {
+		}) }) : null, /* @__PURE__ */ X(ce, { children: O.map((e) => {
 			let t = a(e, _, v);
-			return /* @__PURE__ */ J("rect", {
+			return /* @__PURE__ */ X("rect", {
 				x: t,
 				y: 0,
 				width: _,
 				height: b,
 				rx: x,
 				ry: x,
-				fill: re({
+				fill: le({
 					isFilled: e < E,
 					usesBarGradient: j,
 					gradientId: p,
@@ -84,9 +85,63 @@ function ie({ width: e, value: t, max: n, tone: r = "primary", fill: o = "solid"
 		}) })]
 	});
 }
-function ae() {
-	let e = G(null), [t, n] = K(0);
-	return U(() => {
+function ue(e, t) {
+	let n = o[t];
+	return e ?? ("segments" in n ? n.segments : void 0) ?? o.default.segments;
+}
+function de(e, t, n, r, a) {
+	if (e >= n) return {
+		color: l.placeholder,
+		opacity: 1
+	};
+	if (a === "semantic") {
+		let n = t <= 1 ? 1 : e / (t - 1), r = i.semantic.stops, a = r[0].color;
+		for (let e of r) n + .001 >= e.offset && (a = e.color);
+		return {
+			color: a,
+			opacity: 1
+		};
+	}
+	if (a === "velocity") {
+		let n = t <= 1 ? 0 : e / (t - 1), { startOpacity: a, endOpacity: o } = i.velocity;
+		return {
+			color: c(r),
+			opacity: a + (o - a) * n
+		};
+	}
+	return {
+		color: c(r),
+		opacity: 1
+	};
+}
+function fe({ value: e, max: t, tone: n = "primary", fill: r = "solid", segments: i, preset: a = "default", label: o }) {
+	let s = ue(i, a), c = t > 0 ? t : 1, l = Math.min(Math.max(Number.isFinite(e) ? e : 0, 0), c), u = Math.round(l / c * s), d = `${Math.round(l / c * 100)}%`, f = o ?? `${d} of capacity`;
+	return /* @__PURE__ */ X("div", {
+		role: "meter",
+		"aria-label": f,
+		"aria-valuenow": Math.round(l),
+		"aria-valuemin": 0,
+		"aria-valuemax": c,
+		"aria-valuetext": d,
+		"data-chart-segment-fallback": "",
+		className: v,
+		children: Array.from({ length: s }, (e, t) => {
+			let i = de(t, s, u, n, r);
+			return /* @__PURE__ */ X("span", {
+				"data-segment": "",
+				"data-filled": t < u ? "true" : "false",
+				className: y,
+				style: {
+					backgroundColor: i.color,
+					opacity: i.opacity
+				}
+			}, t);
+		})
+	});
+}
+function pe() {
+	let e = J(null), [t, n] = Y(0);
+	return K(() => {
 		let t = e.current;
 		if (!t) return;
 		let r = () => {
@@ -100,22 +155,22 @@ function ae() {
 		width: t
 	};
 }
-function oe({ value: t, max: n, tone: r = "primary", fill: i = "solid", segments: a, preset: o = "default", label: s, animate: c = "initial", className: l }) {
-	let { hostRef: d, width: f } = ae(), p = H().replace(/:/g, ""), m = u(f, {
+function me({ value: t, max: n, tone: r = "primary", fill: i = "solid", segments: a, preset: o = "default", label: s, animate: c = "initial", className: l }) {
+	let { hostRef: d, width: f } = pe(), p = G().replace(/:/g, ""), m = u(f, {
 		preset: o,
 		segments: a
-	}).config.height, h = Z(), g = c === "initial" && !h, _ = n > 0 ? n : 1, y = Math.min(Math.max(t, 0), _) / _, b = ne(g ? 0 : y, E), [x, S] = K(g ? 0 : y);
-	V(() => {
-		b.set(y);
-	}, [b, y]), X(b, "change", (e) => {
-		S(e);
+	}).config.height, h = oe(), g = c === "initial" && !h, _ = n > 0 ? n : 1, v = Math.min(Math.max(t, 0), _) / _, y = se(g ? 0 : v, x), [S, C] = Y(g ? 0 : v);
+	W(() => {
+		y.set(v);
+	}, [y, v]), ae(y, "change", (e) => {
+		C(e);
 	});
-	let C = h ? y : x;
-	return /* @__PURE__ */ J("div", {
+	let w = h ? v : S;
+	return /* @__PURE__ */ X("div", {
 		ref: d,
-		className: e(v, l),
+		className: e(b, l),
 		style: { "--chart-segment-height": `${m}px` },
-		children: f > 0 ? /* @__PURE__ */ J(ie, {
+		children: f > 0 ? /* @__PURE__ */ X($, {
 			width: f,
 			value: t,
 			max: n,
@@ -125,28 +180,37 @@ function oe({ value: t, max: n, tone: r = "primary", fill: i = "solid", segments
 			preset: o,
 			label: s,
 			gradientId: p,
-			fillProgress: C
-		}) : null
+			fillProgress: w
+		}) : /* @__PURE__ */ X(fe, {
+			value: t,
+			max: n,
+			tone: r,
+			fill: i,
+			segments: a,
+			preset: o,
+			label: s
+		})
 	});
 }
-var se = Object.assign($, {
-	Frame: $,
-	SegmentedBar: oe,
-	RankedBars: S,
-	UnitGrid: C,
-	DistributionStrip: w,
-	Heatmap: T,
-	Loading: x,
-	Cartesian: Object.assign(I, {
-		Grid: R,
-		AxisBottom: te,
-		AxisLeft: L,
-		NoData: z,
-		Area: ee,
-		Tooltip: B
+var he = Object.assign(Q, {
+	Frame: Q,
+	SegmentedBar: me,
+	SegmentedRing: S,
+	RankedBars: O,
+	UnitGrid: k,
+	DistributionStrip: A,
+	Heatmap: j,
+	Loading: D,
+	Cartesian: Object.assign(L, {
+		Grid: V,
+		AxisBottom: z,
+		AxisLeft: B,
+		NoData: H,
+		Area: R,
+		Tooltip: U
 	}),
-	Legend: y,
-	Tooltip: { Content: b }
+	Legend: T,
+	Tooltip: { Content: E }
 });
 //#endregion
-export { se as Chart, I as ChartCartesian, z as ChartCartesianNoData, w as ChartDistributionStrip, T as ChartHeatmap, y as ChartLegend, x as ChartLoading, S as ChartRankedBars, b as ChartTooltipContent, C as ChartUnitGrid, D as chartCartesianDefinedSegments, O as chartCartesianGapBands, k as chartCartesianGapRuns, A as chartCartesianHasPlottableValues, j as chartCartesianNoDataLabelDefault, t as chartFormatPercent, p as chartKpiHeroRowClasses, m as chartKpiHeroValueClasses, h as chartKpiTrendLabelClasses, g as chartKpiTrendRowClasses, _ as chartKpiTrendValueClasses, n as chartMaxTicksForWidth, r as chartSegmentBarWidth, i as chartSegmentFillVariants, o as chartSegmentPresets, s as chartSegmentTickSpec, M as isChartCartesianNumber, N as isChartCartesianSeriesDefined, u as resolveCapacityBarLayout, P as resolveChartCartesianGapKeys, F as resolveChartCartesianNoData, d as resolveSegmentBarConfig };
+export { he as Chart, L as ChartCartesian, H as ChartCartesianNoData, A as ChartDistributionStrip, j as ChartHeatmap, T as ChartLegend, D as ChartLoading, O as ChartRankedBars, E as ChartTooltipContent, k as ChartUnitGrid, M as chartCartesianDefinedSegments, N as chartCartesianGapBands, P as chartCartesianGapRuns, ee as chartCartesianHasPlottableValues, te as chartCartesianNoDataLabelDefault, t as chartFormatPercent, p as chartKpiHeroRowClasses, m as chartKpiHeroValueClasses, h as chartKpiTrendLabelClasses, g as chartKpiTrendRowClasses, _ as chartKpiTrendValueClasses, n as chartMaxTicksForWidth, r as chartSegmentBarWidth, i as chartSegmentFillVariants, o as chartSegmentPresets, s as chartSegmentTickSpec, C as chartSegmentedRingSegmentDefault, w as chartSegmentedRingSizes, ne as isChartCartesianNumber, re as isChartCartesianSeriesDefined, u as resolveCapacityBarLayout, F as resolveChartCartesianGapKeys, I as resolveChartCartesianNoData, d as resolveSegmentBarConfig };

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

@@ -2,12 +2,19 @@ import type { HTMLAttributes } from "react";
 import type { ChartSeriesConfig } from "../../../lib/chartTheme";
 /** Layout-only — margin in Card.Body below plot. */
 export type ChartLegendLayoutClassName = string;
+export declare const chartLegendVariants: readonly ["series", "tabular"];
+export type ChartLegendVariant = (typeof chartLegendVariants)[number];
 export interface ChartLegendProps extends HTMLAttributes<HTMLDivElement> {
     config: ChartSeriesConfig;
     /** Subset and order — defaults to Object.keys(config). */
     keys?: string[];
+    /**
+     * `series` — swatch and label (Cartesian, unit grid).
+     * `tabular` — swatch, label, mono value, percent, delta.
+     */
+    variant?: ChartLegendVariant;
     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;
+export declare function ChartLegend({ config, keys, variant, className, ...props }: ChartLegendProps): import("react").JSX.Element;
 //# sourceMappingURL=ChartLegend.d.ts.map

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

@@ -1 +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"}
+{"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,EAA0B,MAAM,yBAAyB,CAAC;AAezF,oDAAoD;AACpD,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC;AAEhD,eAAO,MAAM,mBAAmB,gCAAiC,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,EAAE,iBAAiB,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,0BAA0B,CAAC;CACxC;AAMD,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,IAAI,EACJ,OAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA6ClB"}

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

@@ -1,24 +1,54 @@
 "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";
+import { chartLegendClasses as t, chartLegendItemClasses as n, chartLegendLabelClasses as r, chartLegendSwatchClasses as i, chartLegendTabularClasses as a, chartLegendTabularDeltaClasses as o, chartLegendTabularItemClasses as s, chartLegendTabularLabelClasses as c, chartLegendTabularPercentClasses as l, chartLegendTabularValueClasses as u } from "./chartStyles.js";
+import { jsx as d, jsxs as f } 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),
+var p = ["series", "tabular"];
+function m(e) {
+	return o[e?.direction ?? "flat"];
+}
+function h({ config: o, keys: p, variant: h = "series", className: g, ..._ }) {
+	let v = p ?? Object.keys(o), y = h === "tabular";
+	return /* @__PURE__ */ d("div", {
+		..._,
+		className: e(y ? a : t, g),
 		role: "list",
-		children: d.map((e) => {
-			let t = s[e];
-			return t == null ? null : /* @__PURE__ */ o("div", {
+		children: v.map((e) => {
+			let t = o[e];
+			return t == null ? null : y ? /* @__PURE__ */ f("div", {
+				className: s,
+				role: "listitem",
+				children: [
+					/* @__PURE__ */ d("span", {
+						className: i,
+						style: { backgroundColor: t.color },
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ d("span", {
+						className: c,
+						children: t.label
+					}),
+					/* @__PURE__ */ d("span", {
+						className: u,
+						children: t.value
+					}),
+					/* @__PURE__ */ d("span", {
+						className: l,
+						children: t.percent
+					}),
+					/* @__PURE__ */ d("span", {
+						className: m(t.delta),
+						children: t.delta?.label
+					})
+				]
+			}, e) : /* @__PURE__ */ f("div", {
 				className: n,
 				role: "listitem",
-				children: [/* @__PURE__ */ a("span", {
+				children: [/* @__PURE__ */ d("span", {
 					className: i,
 					style: { backgroundColor: t.color },
 					"aria-hidden": !0
-				}), /* @__PURE__ */ a("span", {
+				}), /* @__PURE__ */ d("span", {
 					className: r,
 					children: t.label
 				})]
@@ -27,4 +57,4 @@ function s({ config: s, keys: c, className: l, ...u }) {
 	});
 }
 //#endregion
-export { s as ChartLegend };
+export { h as ChartLegend, p as chartLegendVariants };

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

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import { type ChartTone } from "../../../lib/chartTheme";
+import { type ChartSegmentedBarAnimate } from "./chartSegmentedBarMotion";
+/** Discrete ticks around the ring. Channels uses a fine meter; 72 keeps the gaps visible. */
+export declare const chartSegmentedRingSegmentDefault = 72;
+export declare const chartSegmentedRingSizes: readonly ["sm", "md", "lg"];
+export type ChartSegmentedRingSize = (typeof chartSegmentedRingSizes)[number];
+/** Replaces the center figure when the source is unwired. The track stays empty. */
+export interface ChartSegmentedRingUnavailable {
+    /** Defaults to "Not connected". */
+    label?: string;
+    reason: string;
+}
+export interface ChartSegmentedRingProps {
+    /** Filled amount. Values above `max` clamp the arc and mark overflow. */
+    value: number;
+    /** Capacity. `0` is treated as 1 so the meter stays determinate. */
+    max: number;
+    /** Tick count. Default 72. */
+    segments?: number;
+    /** Semantic fill for filled ticks. */
+    tone?: ChartTone;
+    /** Figure in the hole — tabular. Hidden while `unavailable`. */
+    centerValue?: ReactNode;
+    /** Caption under `centerValue`. */
+    centerLabel?: ReactNode;
+    /** sm 96px, md 160px, lg 192px. */
+    size?: ChartSegmentedRingSize;
+    /** `initial` sweeps from empty on mount. Reduced motion stays on the final fill. */
+    animate?: ChartSegmentedBarAnimate;
+    /** Accessible name. Defaults to the percent of capacity. */
+    label?: string;
+    /** Source not wired — empty track, muted label and reason in the hole. */
+    unavailable?: ChartSegmentedRingUnavailable;
+    className?: string;
+}
+export declare function chartSegmentedRingModel(value: number, max: number, segments: number): {
+    count: number;
+    safeMax: number;
+    safeValue: number;
+    overflow: boolean;
+    clamped: number;
+    progress: number;
+};
+/** One tick as a wedge in a 100×100 viewBox, gap included, starting at 12 o'clock. */
+export declare function chartSegmentedRingTickPath(index: number, count: number): string;
+/**
+ * Segmented radial meter. A fixed viewBox, so the server HTML already has the ticks —
+ * unlike **Chart.SegmentedBar**, which measures the host.
+ */
+export declare function ChartSegmentedRing({ value, max, segments, tone, centerValue, centerLabel, size, animate, label, unavailable, className, }: ChartSegmentedRingProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartSegmentedRing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSegmentedRing.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartSegmentedRing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAYnC,6FAA6F;AAC7F,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD,eAAO,MAAM,uBAAuB,6BAA8B,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,oFAAoF;AACpF,MAAM,WAAW,6BAA6B;IAC5C,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,oFAAoF;IACpF,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;;;;;EAQnF;AAED,sFAAsF;AACtF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAgB/E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,GAAG,EACH,QAA2C,EAC3C,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BA6FzB"}

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

@@ -0,0 +1,95 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { chartStroke as t, chartUiTokens as n } from "../../../lib/chartTheme.js";
+import { chartSegmentedRingCenterClasses as r, chartSegmentedRingFrameClasses as i, chartSegmentedRingLabelClasses as a, chartSegmentedRingOverflowClasses as o, chartSegmentedRingSizeClasses as s, chartSegmentedRingUnavailableLabelClasses as c, chartSegmentedRingUnavailableReasonClasses as l, chartSegmentedRingValueClasses as u } from "./chartStyles.js";
+import { chartSegmentedBarSpringConfig as d } from "./chartSegmentedBarMotion.js";
+import { useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useMotionValueEvent as y, useReducedMotion as b, useSpring as x } from "motion/react";
+//#region src/components/organisms/Chart/ChartSegmentedRing.tsx
+var S = 72, C = [
+	"sm",
+	"md",
+	"lg"
+];
+function w(e, t, n) {
+	let r = Math.max(1, Math.round(n)), i = t > 0 ? t : 1, a = Number.isFinite(e) ? e : 0, o = a > i, s = Math.min(Math.max(a, 0), i);
+	return {
+		count: r,
+		safeMax: i,
+		safeValue: a,
+		overflow: o,
+		clamped: s,
+		progress: s / i
+	};
+}
+function T(e, t) {
+	let n = Math.PI * 2 / t, r = Math.min(n * .32, .08), i = -Math.PI / 2 + e * n + r / 2, a = -Math.PI / 2 + (e + 1) * n - r / 2, o = (e, t) => `${Math.round((50 + e * Math.cos(t)) * 1e3) / 1e3} ${Math.round((50 + e * Math.sin(t)) * 1e3) / 1e3}`, s = +(a - i > Math.PI);
+	return `M ${o(46, i)} A 46 46 0 ${s} 1 ${o(46, a)} L ${o(34, a)} A 34 34 0 ${s} 0 ${o(34, i)} Z`;
+}
+function E({ value: S, max: C, segments: E = 72, tone: D = "primary", centerValue: O, centerLabel: k, size: A = "md", animate: j = "initial", label: M, unavailable: N, className: P }) {
+	let F = w(S, C, E), I = b(), [L, R] = h(N ? 0 : F.progress), z = x(N ? 0 : F.progress, d), B = m(!1);
+	f(() => {
+		let e = N ? 0 : F.progress;
+		if (!B.current && (B.current = !0, j === "initial" && !I && !N)) {
+			z.jump(0), R(0), z.set(e);
+			return;
+		}
+		z.jump(e), R(e);
+	}, [
+		j,
+		F.progress,
+		I,
+		z,
+		N
+	]), y(z, "change", (e) => {
+		R(e);
+	});
+	let V = N ? 0 : Math.round(Math.min(Math.max(L, 0), 1) * F.count), H = p(() => Array.from({ length: F.count }, (e, t) => T(t, F.count)), [F.count]), U = t(D), W = n.placeholder, G = Math.round((N ? 0 : F.clamped / F.safeMax) * 100), K = Math.round(F.safeValue / F.safeMax * 100), q = N?.label ?? "Not connected", J = N ? `${q}. ${N.reason}` : M ?? `${G}% of capacity`, Y = N ? J : F.overflow ? `${K}% of capacity, over capacity` : `${G}% of capacity`;
+	return /* @__PURE__ */ v("div", {
+		className: e(i, s[A], P),
+		"data-size": A,
+		"data-overflow": F.overflow && !N ? "" : void 0,
+		"data-state": N ? "unavailable" : void 0,
+		children: [/* @__PURE__ */ _("svg", {
+			viewBox: "0 0 100 100",
+			role: "meter",
+			"aria-label": J,
+			"aria-valuetext": Y,
+			"aria-valuenow": N ? 0 : Math.round(F.clamped),
+			"aria-valuemin": 0,
+			"aria-valuemax": F.safeMax,
+			"data-filled": V,
+			className: "block size-full",
+			children: H.map((e, t) => /* @__PURE__ */ _("path", {
+				d: e,
+				"data-filled": t < V ? "true" : "false",
+				fill: t < V ? U : W
+			}, t))
+		}), /* @__PURE__ */ _("div", {
+			className: r,
+			children: N ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("p", {
+				className: c,
+				children: q
+			}), /* @__PURE__ */ _("p", {
+				className: l,
+				children: N.reason
+			})] }) : /* @__PURE__ */ v(g, { children: [
+				O == null ? null : /* @__PURE__ */ _("p", {
+					className: u[A],
+					children: O
+				}),
+				k == null ? null : /* @__PURE__ */ _("p", {
+					className: a,
+					children: k
+				}),
+				F.overflow ? /* @__PURE__ */ _("p", {
+					className: o,
+					children: "Over capacity"
+				}) : null
+			] })
+		})]
+	});
+}
+//#endregion
+export { E as ChartSegmentedRing, w as chartSegmentedRingModel, S as chartSegmentedRingSegmentDefault, C as chartSegmentedRingSizes, T as chartSegmentedRingTickPath };

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

@@ -2,6 +2,27 @@
 export declare const chartFrameClasses = "relative w-full";
 /** Segmented bar — fixed tick height; width comes from layout. */
 export declare const chartSegmentBarHostClasses = "relative block w-full min-w-0 [height:var(--chart-segment-height,2rem)]";
+/** CSS ticks drawn before the host has a width (SSR and the first paint). */
+export declare const chartSegmentBarFallbackClasses = "flex h-full w-full items-stretch gap-px";
+export declare const chartSegmentBarFallbackTickClasses = "min-w-0 flex-1 rounded-[2px]";
+/** Segmented ring — fixed box, ticks in a 100×100 viewBox. sm 96 / md 160 / lg 192. */
+export declare const chartSegmentedRingFrameClasses = "relative inline-flex shrink-0 flex-col items-center";
+export declare const chartSegmentedRingSizeClasses: {
+    readonly sm: "size-24";
+    readonly md: "size-40";
+    readonly lg: "size-48";
+};
+export declare const chartSegmentedRingCenterClasses = "pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-[16%] text-center";
+export declare const chartSegmentedRingValueClasses: {
+    readonly sm: `${string} tabular-nums`;
+    readonly md: `${string} tabular-nums`;
+    readonly lg: "type-display-3 tabular-nums tracking-tight text-fg";
+};
+export declare const chartSegmentedRingLabelClasses: string;
+/** Muted on purpose — `typographyClass("ui-label")` includes `text-fg`, which would win. */
+export declare const chartSegmentedRingUnavailableLabelClasses = "type-label text-muted";
+export declare const chartSegmentedRingUnavailableReasonClasses: string;
+export declare const chartSegmentedRingOverflowClasses = "type-caption text-destructive";
 /** Ranked percentage breakdown — audience fit, locations, and demographics. */
 export declare const chartRankedBarListClasses = "flex w-full min-w-0 flex-col gap-3";
 export declare const chartRankedBarRowClasses = "flex min-w-0 flex-col gap-1.5";
@@ -77,6 +98,17 @@ export declare const chartLegendClasses = "flex flex-wrap items-center gap-x-4 g
 export declare const chartLegendItemClasses = "flex items-center gap-2";
 export declare const chartLegendSwatchClasses = "size-2 shrink-0 rounded-full";
 export declare const chartLegendLabelClasses: string;
+/** Tabular legend — swatch, label, mono value, percent, delta. One row per series. */
+export declare const chartLegendTabularClasses = "flex w-full min-w-0 flex-col gap-2";
+export declare const chartLegendTabularItemClasses = "grid grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] items-baseline gap-x-3";
+export declare const chartLegendTabularLabelClasses: string;
+export declare const chartLegendTabularValueClasses = "text-right font-mono text-xs tabular-nums leading-none text-fg";
+export declare const chartLegendTabularPercentClasses = "text-right font-mono text-xs tabular-nums leading-none text-muted";
+export declare const chartLegendTabularDeltaClasses: {
+    readonly up: "text-right font-mono text-xs tabular-nums leading-none text-success";
+    readonly down: "text-right font-mono text-xs tabular-nums leading-none text-destructive";
+    readonly flat: "text-right font-mono text-xs tabular-nums leading-none text-muted";
+};
 /** @deprecated Use chartTooltipPanelClasses — ADR-0015 rename. */
 export declare const chartPeriodTooltipClasses: string;
 /** @deprecated Use chartTooltipLabelClasses. */