@thewhatmatters/wmds 0.2.0

package/dist/components/molecules/TextSequence/TextSequence.js

@@ -0,0 +1,242 @@
+"use client";
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { riveHandEnteredAttr as t, riveHandSequenceOrigin as n } from "../../atoms/RiveHand/riveHandUtils.js";
+import { textSequenceShapeTones as r, textSequenceShapeVariants as i } from "../../atoms/TextSequenceShape/textSequenceShapeStyles.js";
+import { TextSequenceShape as a } from "../../atoms/TextSequenceShape/TextSequenceShape.js";
+import { textSequenceRootClasses as o, textSequenceWordBoldClasses as s, textSequenceWordRegularClasses as c } from "./textSequenceStyles.js";
+import { Children as l, Fragment as u, isValidElement as d, useRef as f, useState as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import h from "gsap";
+import { SplitText as g } from "gsap/SplitText";
+import { useGSAP as _ } from "@gsap/react";
+//#region src/components/molecules/TextSequence/TextSequence.tsx
+h.registerPlugin(g, _);
+var v = ["mount", "inView"], y = ["alternate", "none"], b = .07, x = 0, S = .72, C = .55, w = 8, T = 1.4;
+function E(e) {
+	return d(e) && e.type === a;
+}
+function D(e) {
+	if (!d(e) || e.type !== "span") return !1;
+	let t = e.props.className;
+	return typeof t == "string" && t.split(/\s+/).includes("whitespace-nowrap");
+}
+function O(e) {
+	return k(e, "none").plain;
+}
+function k(e, t) {
+	let n = [], r = [], i = 0, o = (e) => {
+		let a = t === "alternate" ? i % 2 == 1 ? s : c : void 0;
+		n.push(/* @__PURE__ */ m("span", {
+			"data-text-sequence-word": "",
+			className: a,
+			children: e
+		}, `w-${i}`)), r.push(e), i += 1;
+	}, f = (e) => {
+		if (e != null && typeof e != "boolean") {
+			if (typeof e == "string" || typeof e == "number") {
+				let t = String(e).split(/(\s+)/);
+				for (let e of t) e && (/^\s+$/.test(e) ? n.push(e) : o(e));
+				return;
+			}
+			if (Array.isArray(e)) {
+				e.forEach(f);
+				return;
+			}
+			if (d(e)) {
+				if (e.type === u) {
+					f(e.props.children);
+					return;
+				}
+				if (D(e)) {
+					let t = n.length;
+					f(e.props.children);
+					let r = n.splice(t);
+					n.push(/* @__PURE__ */ m("span", {
+						className: "whitespace-nowrap",
+						children: r
+					}, `keep-${i}`));
+					return;
+				}
+				if (E(e)) {
+					n.push(e.key == null ? /* @__PURE__ */ m(a, { ...e.props }, `s-${n.length}`) : e);
+					return;
+				}
+				n.push(e);
+			}
+		}
+	};
+	return l.forEach(e, f), {
+		nodes: n,
+		plain: r.join(" "),
+		signature: `${t}:${r.join("
")}:${n.length}`
+	};
+}
+function A() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function j(e, t) {
+	let n = 0;
+	for (let r of t) if (e.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING) n += 1;
+	else break;
+	return n;
+}
+function M(e, t) {
+	return e <= 0 ? 0 : (e - .5) * t;
+}
+var N = "data-text-sequence-hand-anchor";
+function P(e) {
+	let t = [...e.querySelectorAll("[data-rive-hand-slot]")];
+	for (let e of t) {
+		let t = document.createElement("span");
+		t.setAttribute(N, e.getAttribute("data-rive-hand-slot") ?? ""), t.setAttribute("aria-hidden", "true"), t.className = e.className, t.style.width = e.style.width, e.replaceWith(t);
+	}
+	return t;
+}
+function F(e, t) {
+	[...e.querySelectorAll(`[${N}]`)].forEach((e, n) => {
+		let r = t[n];
+		r && e.replaceWith(r);
+	});
+}
+function I(e) {
+	for (let n of e) n.removeAttribute(t);
+}
+function L(e, r) {
+	let { stagger: i, delay: a, idle: o, lines: s, plain: c, hands: l } = r;
+	return g.create(e, {
+		type: s ? "words,lines" : "words",
+		mask: "words",
+		tag: "span",
+		autoSplit: s,
+		aria: "auto",
+		reduceWhiteSpace: !0,
+		ignore: `[${N}]`,
+		onSplit(r) {
+			F(e, l), r.elements.forEach((e) => {
+				let t = e.closest("h1, h2, h3, h4, h5, h6");
+				if (t instanceof HTMLElement && t !== e) {
+					let n = [...t.querySelectorAll("[data-text-sequence]")].map((e) => e.getAttribute("data-plain")).filter((e) => !!e);
+					t.setAttribute("aria-label", n.length > 0 ? n.join(" ") : c), e.removeAttribute("aria-label"), e.removeAttribute("role");
+					return;
+				}
+				e.setAttribute("aria-label", c), /^H[1-6]$/.test(e.tagName) || e.setAttribute("role", "paragraph");
+			});
+			for (let e of r.lines) e.style.display = "block";
+			for (let e of r.words) {
+				let t = e;
+				t.style.display = "inline-block", t.style.position = "relative";
+			}
+			for (let e of r.masks) {
+				let t = e;
+				t.style.display = "inline-block", t.style.position = "relative", t.style.verticalAlign = "baseline";
+			}
+			let s = [...e.querySelectorAll("[data-text-sequence-shape]")], u = h.timeline({ delay: a });
+			if (r.words.forEach((e, t) => {
+				u.from(e, {
+					yPercent: 110,
+					duration: S,
+					ease: "power3.out",
+					immediateRender: !0
+				}, t * i);
+			}), s.forEach((e) => {
+				let t = j(e, r.words), n = e.dataset.variant === "asterisk";
+				u.from(e, {
+					scale: 0,
+					rotation: n ? -80 : -16,
+					duration: C,
+					ease: "back.out(1.8)",
+					transformOrigin: "50% 50%",
+					immediateRender: !0
+				}, M(t, i));
+			}), [...e.querySelectorAll("[data-rive-hand-pop]")].forEach((e) => {
+				let a = e.closest("[data-rive-hand-slot]") ?? e;
+				a.removeAttribute(t);
+				let o = j(a, r.words);
+				u.from(e, {
+					scale: 0,
+					rotation: -16,
+					duration: C,
+					ease: "back.out(1.8)",
+					transformOrigin: n,
+					immediateRender: !0,
+					onComplete() {
+						Number(h.getProperty(e, "scale")) > .99 && a.setAttribute(t, "true");
+					}
+				}, M(o, i));
+			}), o && s.length > 0) {
+				let e = u.duration(), t = s.filter((e) => e.dataset.variant === "asterisk"), n = s.filter((e) => e.dataset.variant === "pill" || e.dataset.variant === "double-pill");
+				t.length > 0 && u.to(t, {
+					rotation: "+=360",
+					duration: w,
+					ease: "none",
+					repeat: -1,
+					transformOrigin: "50% 50%"
+				}, e), n.length > 0 && u.to(n, {
+					scaleX: 1.12,
+					duration: T,
+					ease: "sine.inOut",
+					yoyo: !0,
+					repeat: -1,
+					transformOrigin: "50% 50%"
+				}, e);
+			}
+			return e.dataset.textSequenceState = "playing", u;
+		}
+	});
+}
+function R({ children: t, stagger: n = b, delay: r = 0, trigger: i = "mount", idle: a = !1, lines: s = !0, emphasis: c = "alternate", className: l }) {
+	let u = f(null), [d] = p(() => k(t, c)), h = Math.max(0, n), g = Math.max(0, r);
+	return _(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = window.matchMedia("(prefers-reduced-motion: reduce)"), n, r, o = [], c = () => {
+			r?.disconnect(), r = void 0, n?.revert(), n = void 0, F(e, o), I(o), delete e.dataset.textSequenceState, e.dataset.textSequenceState = "rest";
+		}, l = () => {
+			if (n || A()) {
+				e.dataset.textSequenceState = "rest";
+				return;
+			}
+			let t = P(e);
+			t.length > 0 && (o = t), n = L(e, {
+				stagger: h,
+				delay: g,
+				idle: a,
+				lines: s,
+				plain: d.plain,
+				hands: o
+			});
+		}, f = () => {
+			if (t.matches) {
+				c();
+				return;
+			}
+			i === "mount" && l();
+		};
+		return A() ? e.dataset.textSequenceState = "rest" : i === "inView" ? (e.dataset.textSequenceState = "rest", typeof IntersectionObserver == "function" && (r = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && (r?.disconnect(), r = void 0, l());
+		}, { threshold: .35 }), r.observe(e))) : l(), t.addEventListener("change", f), () => {
+			t.removeEventListener("change", f), r?.disconnect(), n?.revert(), F(e, o), I(o);
+		};
+	}, {
+		scope: u,
+		dependencies: [
+			h,
+			g,
+			i,
+			a,
+			s,
+			d.plain
+		],
+		revertOnUpdate: !0
+	}), /* @__PURE__ */ m("span", {
+		ref: u,
+		"data-text-sequence": "",
+		"data-plain": d.plain,
+		className: e(o, l),
+		children: d.nodes
+	});
+}
+var z = Object.assign(R, { Shape: a });
+//#endregion
+export { z as TextSequence, O as sequencePlainText, x as textSequenceDefaultDelay, b as textSequenceDefaultStagger, y as textSequenceEmphases, r as textSequenceShapeTones, i as textSequenceShapeVariants, v as textSequenceTriggers };

package/dist/components/molecules/TextSequence/textSequenceStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * TextSequence shell. Word weight lives here so the molecule TSX does not
+ * carry raw type utilities. The parent owns the type step.
+ */
+export declare const textSequenceRootClasses = "block w-full";
+/** Even words when `emphasis` is `alternate`. */
+export declare const textSequenceWordRegularClasses = "font-normal";
+/** Odd words when `emphasis` is `alternate`. */
+export declare const textSequenceWordBoldClasses = "font-bold";
+//# sourceMappingURL=textSequenceStyles.d.ts.map

package/dist/components/molecules/TextSequence/textSequenceStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textSequenceStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TextSequence/textSequenceStyles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,uBAAuB,iBAAiB,CAAC;AAEtD,iDAAiD;AACjD,eAAO,MAAM,8BAA8B,gBAAgB,CAAC;AAE5D,gDAAgD;AAChD,eAAO,MAAM,2BAA2B,cAAc,CAAC"}

package/dist/components/molecules/TextSequence/textSequenceStyles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/molecules/TextSequence/textSequenceStyles.ts
+var e = "block w-full", t = "font-normal", n = "font-bold";
+//#endregion
+export { e as textSequenceRootClasses, n as textSequenceWordBoldClasses, t as textSequenceWordRegularClasses };

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

@@ -0,0 +1,76 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type ChartSegmentFillVariant, type ChartSegmentPreset, type ChartTone } from "../../../lib/chartTheme";
+import { ChartLegend } from "./ChartLegend";
+import { ChartTooltipContent } from "./ChartTooltipContent";
+import { ChartLoading } from "./ChartLoading";
+import { ChartRankedBars } from "./ChartRankedBars";
+import { ChartUnitGrid } from "./ChartUnitGrid";
+import { ChartDistributionStrip } from "./ChartDistributionStrip";
+import { ChartHeatmap } from "./ChartHeatmap";
+import { type ChartSegmentedBarAnimate } from "./chartSegmentedBarMotion";
+import { ChartCartesian, ChartCartesianAreaSeries, ChartCartesianAxisBottom, ChartCartesianAxisLeft, ChartCartesianGrid, ChartCartesianNoData, ChartCartesianTooltipLayer } from "./ChartCartesian";
+export { chartKpiHeroRowClasses, chartKpiHeroValueClasses, chartKpiTrendLabelClasses, chartKpiTrendRowClasses, chartKpiTrendValueClasses, } from "./chartStyles";
+export type { ChartSegmentFillVariant, ChartSegmentPreset, ChartTone } from "../../../lib/chartTheme";
+export type { ChartSegmentedBarAnimate } from "./chartSegmentedBarMotion";
+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;
+export interface ChartSegmentedBarProps {
+    /** Filled amount — e.g. occupied units. */
+    value: number;
+    /** Capacity — e.g. total units. */
+    max: number;
+    /** Semantic fill for filled segments. */
+    tone?: ChartTone;
+    /** `solid` | `velocity` (tone fade) | `semantic` (RAG red → orange → yellow → green). */
+    fill?: ChartSegmentFillVariant;
+    /** Tick count target — defaults to 60; bar fills card width with fixed 5px ticks + flex gap (min 1px). */
+    segments?: number;
+    preset?: ChartSegmentPreset;
+    /** Accessible name — defaults to percent of max. */
+    label?: string;
+    /** Spring fill on mount — `initial` when data replaces **Chart.Loading**; not for retrieving UI. */
+    animate?: ChartSegmentedBarAnimate;
+    className?: ChartLayoutClassName;
+}
+export interface ChartFrameProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** CSS length for segment marks — defaults to preset height via inline var. */
+    segmentHeight?: number;
+    className?: ChartLayoutClassName;
+}
+declare function ChartFrameRoot({ children, segmentHeight, className, style, ...props }: ChartFrameProps): import("react").JSX.Element;
+declare function ChartSegmentedBar({ value, max, tone, fill, segments, preset, label, animate, className, }: ChartSegmentedBarProps): import("react").JSX.Element;
+/** Dashboard charts — axis-agnostic shell + scalar / Cartesian patterns. See ADR-0012, ADR-0015, ADR-0027. */
+export declare const Chart: typeof ChartFrameRoot & {
+    Frame: typeof ChartFrameRoot;
+    SegmentedBar: typeof ChartSegmentedBar;
+    RankedBars: typeof ChartRankedBars;
+    UnitGrid: typeof ChartUnitGrid;
+    DistributionStrip: typeof ChartDistributionStrip;
+    Heatmap: typeof ChartHeatmap;
+    Loading: typeof ChartLoading;
+    Cartesian: typeof ChartCartesian & {
+        Grid: typeof ChartCartesianGrid;
+        AxisBottom: typeof ChartCartesianAxisBottom;
+        AxisLeft: typeof ChartCartesianAxisLeft;
+        NoData: typeof ChartCartesianNoData;
+        Area: typeof ChartCartesianAreaSeries;
+        Tooltip: typeof ChartCartesianTooltipLayer;
+    };
+    Legend: typeof ChartLegend;
+    Tooltip: {
+        Content: typeof ChartTooltipContent;
+    };
+};
+export { ChartCartesian, ChartCartesianAreaSeries, ChartCartesianAxisBottom, ChartCartesianAxisLeft, ChartCartesianGrid, ChartCartesianNoData, ChartCartesianTooltipLayer, chartCartesianDefinedSegments, chartCartesianGapBands, chartCartesianGapRuns, chartCartesianHasPlottableValues, chartCartesianNoDataLabelDefault, isChartCartesianNumber, isChartCartesianSeriesDefined, resolveChartCartesianGapKeys, resolveChartCartesianNoData, } from "./ChartCartesian";
+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 { ChartRankedBarItem, ChartRankedBarsAnimate, ChartRankedBarsLayoutClassName, ChartRankedBarsProps, } from "./ChartRankedBars";
+export type { ChartUnitGridLayoutClassName, ChartUnitGridPart, ChartUnitGridProps, } from "./ChartUnitGrid";
+export type { ChartDistributionItem, ChartDistributionReference, ChartDistributionStripLayoutClassName, ChartDistributionStripProps, } from "./ChartDistributionStrip";
+export type { ChartHeatmapAxisItem, ChartHeatmapCell, ChartHeatmapLayoutClassName, ChartHeatmapProps, } from "./ChartHeatmap";
+export type { ChartTooltipContentProps, ChartTooltipContentLayoutClassName, } from "./ChartTooltipContent";
+//# sourceMappingURL=Chart.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,152 @@
+"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";
+//#region src/components/organisms/Chart/Chart.tsx
+function $({ children: t, segmentHeight: n = o.default.height, className: r, style: i, ...a }) {
+	return /* @__PURE__ */ J("div", {
+		className: e(f, r),
+		style: {
+			...i,
+			"--chart-segment-height": `${n}px`
+		},
+		...a,
+		children: t
+	});
+}
+function re({ 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 }) {
+	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", {
+		width: y,
+		height: b,
+		role: "meter",
+		"aria-label": T,
+		"aria-valuenow": D,
+		"aria-valuemin": 0,
+		"aria-valuemax": S,
+		className: "block w-full max-w-full",
+		children: [j ? /* @__PURE__ */ J("defs", { children: /* @__PURE__ */ J("linearGradient", {
+			id: p,
+			x1: 0,
+			x2: y,
+			y1: 0,
+			y2: 0,
+			gradientUnits: "userSpaceOnUse",
+			children: o === "velocity" ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("stop", {
+				offset: "0%",
+				stopColor: k,
+				stopOpacity: i.velocity.startOpacity
+			}), /* @__PURE__ */ J("stop", {
+				offset: "100%",
+				stopColor: k,
+				stopOpacity: i.velocity.endOpacity
+			})] }) : i.semantic.stops.map((e) => /* @__PURE__ */ J("stop", {
+				offset: `${e.offset * 100}%`,
+				stopColor: e.color
+			}, e.offset))
+		}) }) : null, /* @__PURE__ */ J(Q, { children: O.map((e) => {
+			let t = a(e, _, v);
+			return /* @__PURE__ */ J("rect", {
+				x: t,
+				y: 0,
+				width: _,
+				height: b,
+				rx: x,
+				ry: x,
+				fill: re({
+					isFilled: e < E,
+					usesBarGradient: j,
+					gradientId: p,
+					fillColor: k,
+					trackColor: A
+				})
+			}, e);
+		}) })]
+	});
+}
+function ae() {
+	let e = G(null), [t, n] = K(0);
+	return U(() => {
+		let t = e.current;
+		if (!t) return;
+		let r = () => {
+			n(t.getBoundingClientRect().width);
+		};
+		r();
+		let i = new ResizeObserver(r);
+		return i.observe(t), () => i.disconnect();
+	}, []), {
+		hostRef: e,
+		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, {
+		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);
+	});
+	let C = h ? y : x;
+	return /* @__PURE__ */ J("div", {
+		ref: d,
+		className: e(v, l),
+		style: { "--chart-segment-height": `${m}px` },
+		children: f > 0 ? /* @__PURE__ */ J(ie, {
+			width: f,
+			value: t,
+			max: n,
+			tone: r,
+			fill: i,
+			segments: a,
+			preset: o,
+			label: s,
+			gradientId: p,
+			fillProgress: C
+		}) : null
+	});
+}
+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
+	}),
+	Legend: y,
+	Tooltip: { Content: b }
+});
+//#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 };

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

@@ -0,0 +1,54 @@
+import { type ReactNode } from "react";
+import { type ChartPeriodKind, type ChartSeriesConfig, type ChartVariant } from "../../../lib/chartTheme";
+import { type ChartCartesianPoint } from "./chartCartesianContext";
+import { type ChartCartesianNoDataProp } from "./chartCartesianGaps";
+import { type ChartCartesianAnimate } from "./chartCartesianMotion";
+export type { ChartCartesianAnimate } from "./chartCartesianMotion";
+export type { ChartCartesianPoint } from "./chartCartesianContext";
+export type { ChartCartesianDefinedSegment, ChartCartesianGapBand, ChartCartesianGapMode, ChartCartesianGapRange, ChartCartesianGapRun, ChartCartesianNoDataOptions, ChartCartesianNoDataProp, } from "./chartCartesianGaps";
+export { chartCartesianDefinedSegments, chartCartesianGapBands, chartCartesianGapRuns, chartCartesianHasPlottableValues, chartCartesianNoDataLabelDefault, isChartCartesianNumber, isChartCartesianSeriesDefined, resolveChartCartesianGapKeys, resolveChartCartesianNoData, } from "./chartCartesianGaps";
+/** Layout-only — width, min-height in dashboard grids. */
+export type ChartCartesianLayoutClassName = string;
+export interface ChartCartesianProps {
+    data: ChartCartesianPoint[];
+    config: ChartSeriesConfig;
+    /** Subset and z-order — defaults to Object.keys(config). */
+    seriesKeys?: string[];
+    variant?: ChartVariant;
+    /** Minimum host height — ParentSize fills width. */
+    minHeight?: number;
+    periodKind?: ChartPeriodKind;
+    xAccessor?: (point: ChartCartesianPoint) => Date;
+    yAccessor?: (point: ChartCartesianPoint, key: string) => number;
+    /**
+     * In-series no-data hatch. Default **on** — contiguous `null` / `undefined`
+     * runs get a hatched band + centered **Badge**. `false` disables.
+     */
+    noData?: ChartCartesianNoDataProp;
+    /** Accessible chart summary. */
+    "aria-label"?: string;
+    /** Mount enter — `initial` fades the plot in once; `none` for static Storybook layouts. Period changes do not re-run. */
+    animate?: ChartCartesianAnimate;
+    /** Horizontal grid always; vertical dashed columns at x-axis ticks when true (default). */
+    verticalGrid?: boolean;
+    /** Y-axis tick labels — default locale-aware integers / compact 10k+. */
+    yTickFormat?: (value: number) => string;
+    className?: ChartCartesianLayoutClassName;
+    children?: ReactNode;
+}
+export declare function ChartCartesian({ data, config, seriesKeys, variant, minHeight, periodKind, xAccessor, yAccessor, noData, animate, verticalGrid, yTickFormat, className, children, "aria-label": ariaLabel, }: ChartCartesianProps): import("react").JSX.Element;
+export declare namespace ChartCartesian {
+    var Grid: typeof ChartCartesianGrid;
+    var AxisBottom: typeof ChartCartesianAxisBottom;
+    var AxisLeft: typeof ChartCartesianAxisLeft;
+    var NoData: typeof ChartCartesianNoData;
+    var Area: typeof ChartCartesianAreaSeries;
+    var Tooltip: typeof ChartCartesianTooltipLayer;
+}
+export declare function ChartCartesianGrid(): import("react").JSX.Element;
+export declare function ChartCartesianAxisBottom(): import("react").JSX.Element;
+export declare function ChartCartesianAxisLeft(): import("react").JSX.Element;
+export declare function ChartCartesianNoData(): import("react").JSX.Element | null;
+export declare function ChartCartesianAreaSeries(): import("react").JSX.Element;
+export declare function ChartCartesianTooltipLayer(): import("react").JSX.Element;
+//# sourceMappingURL=ChartCartesian.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCartesian.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartCartesian.tsx"],"names":[],"mappings":"AAYA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAOL,KAAK,wBAAwB,EAC9B,MAAM,sBAAsB,CAAC;AAgB9B,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAEpE,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,YAAY,EACV,4BAA4B,EAC5B,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,6BAA6B,EAC7B,sBAAsB,EACtB,qBAAqB,EACrB,gCAAgC,EAChC,gCAAgC,EAChC,sBAAsB,EACtB,6BAA6B,EAC7B,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,sBAAsB,CAAC;AAE9B,0DAA0D;AAC1D,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AAEnD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE;;;OAGG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yHAAyH;IACzH,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2FAA2F;IAC3F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,6BAA6B,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4LD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,UAAU,EACV,OAAgB,EAChB,SAAe,EACf,UAAU,EACV,SAAiC,EACjC,SAA4B,EAC5B,MAAM,EACN,OAAmB,EACnB,YAAmB,EACnB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAA+B,GAC9C,EAAE,mBAAmB,+BAsCrB;yBAtDe,cAAc;;;;;;;;AAsE9B,wBAAgB,kBAAkB,gCAgBjC;AAED,wBAAgB,wBAAwB,gCA0BvC;AAED,wBAAgB,sBAAsB,gCA0BrC;AAID,wBAAgB,oBAAoB,uCAsDnC;AAmCD,wBAAgB,wBAAwB,gCAqFvC;AAoDD,wBAAgB,0BAA0B,gCAqLzC"}