@rinzai/zen 0.8.6 → 0.10.0

package/dist/animated-number/index.d.ts

@@ -2,9 +2,11 @@ import { Money } from '../utils/money';
 /**
  * A number that counts smoothly to each new value (and up from zero when it
  * first appears). Rounds to whole numbers while moving, so money in minor
- * units never shows fractions. Instant with reduced motion.
+ * units never shows fractions. With `roll`, each digit rolls to its new one
+ * instead, like an odometer: easier to read when a total changes. Instant
+ * with reduced motion.
  */
-export default function AnimatedNumber({ value, format, duration, fromZero, className, }: AnimatedNumberProps): import('react').JSX.Element;
+export default function AnimatedNumber({ value, format, duration, fromZero, roll, className, }: AnimatedNumberProps): import('react').JSX.Element;
 /** An amount of money (minor units) that counts to each new value. */
 export declare function AnimatedMoney({ value, currency, locale, showDecimals, ...rest }: Omit<AnimatedNumberProps, 'format' | 'value'> & {
     value: Money;
@@ -20,6 +22,8 @@ export interface AnimatedNumberProps {
     duration?: number;
     /** Count up from zero when first shown (default), or start at the value. */
     fromZero?: boolean;
+    /** Roll each digit to its new one, like an odometer, instead of counting. */
+    roll?: boolean;
     className?: string;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/animated-number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAM3D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,KAAK,EACL,MAAe,EACf,QAAc,EACd,QAAe,EACf,SAAS,GACZ,EAAE,mBAAmB,+BA0BrB;AAED,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,GAAG,IAAI,EACV,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,+BAIA;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAO3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,KAAK,EACL,MAAe,EACf,QAAc,EACd,QAAe,EACf,IAAY,EACZ,SAAS,GACZ,EAAE,mBAAmB,+BAiDrB;AAoBD,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,GAAG,IAAI,EACV,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,+BAIA;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/animated-number/index.js

@@ -1,33 +1,85 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { formatMoney as t } from "../utils/money.js";
-import { useEffect as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { reducedMotion as n } from "../utils/motion.js";
+import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/animated-number/index.tsx
-var s = typeof window > "u" ? n : r, c = (e) => 1 - (1 - e) ** 3;
-function l({ value: t, format: n = String, duration: r = 650, fromZero: l = !0, className: u }) {
-	let [d, f] = a(l ? 0 : t), p = i(l ? 0 : t);
-	return s(() => {
-		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("reduce-motion") || r <= 0) {
-			p.current = t, f(t);
+var l = typeof window > "u" ? r : i, u = (e) => 1 - (1 - e) ** 3;
+function d({ value: t, format: i = String, duration: d = 650, fromZero: f = !0, roll: m = !1, className: h }) {
+	let [g, _] = o(f ? 0 : t), v = a(f ? 0 : t), [y, b] = o(!f);
+	if (r(() => {
+		if (!m || y) return;
+		let e = requestAnimationFrame(() => b(!0));
+		return () => cancelAnimationFrame(e);
+	}, [m, y]), l(() => {
+		if (m) return;
+		if (n() || d <= 0) {
+			v.current = t, _(t);
 			return;
 		}
-		let e = p.current, n = performance.now(), i = requestAnimationFrame(function a(o) {
-			let s = Math.min(1, (o - n) / r), l = Math.round(e + (t - e) * c(s));
-			p.current = l, f(l), s < 1 && (i = requestAnimationFrame(a));
+		let e = v.current, r = performance.now(), i = requestAnimationFrame(function n(a) {
+			let o = Math.min(1, (a - r) / d), s = Math.round(e + (t - e) * u(o));
+			v.current = s, _(s), o < 1 && (i = requestAnimationFrame(n));
 		});
 		return () => cancelAnimationFrame(i);
-	}, [t, r]), /* @__PURE__ */ o("span", {
-		className: e("zen__animated-number tabular-nums", u),
-		children: n(d)
+	}, [
+		t,
+		d,
+		m
+	]), m) {
+		let n = i(t);
+		return /* @__PURE__ */ c("span", {
+			className: e("zen__animated-number inline-flex items-start tabular-nums", h),
+			children: [/* @__PURE__ */ s("span", {
+				className: "sr-only",
+				children: n
+			}), /* @__PURE__ */ s("span", {
+				"aria-hidden": !0,
+				className: "inline-flex items-start",
+				children: n.split("").map((e, t) => /\d/.test(e) ? /* @__PURE__ */ s(p, {
+					digit: y ? Number(e) : 0,
+					duration: d
+				}, n.length - t) : /* @__PURE__ */ s("span", { children: e }, n.length - t))
+			})]
+		});
+	}
+	return /* @__PURE__ */ s("span", {
+		className: e("zen__animated-number tabular-nums", h),
+		children: i(g)
+	});
+}
+var f = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+function p({ digit: e, duration: t }) {
+	return /* @__PURE__ */ s("span", {
+		className: "inline-block h-[1lh] overflow-hidden",
+		children: /* @__PURE__ */ s("span", {
+			className: "zen__digit ease-out-soft flex flex-col transition-[translate]",
+			style: {
+				translate: `0 ${-e * 10}%`,
+				transitionDuration: `${t}ms`
+			},
+			children: f.map((e) => /* @__PURE__ */ s("span", { children: e }, e))
+		})
 	});
 }
-function u({ value: e, currency: n, locale: r, showDecimals: i = !1, ...a }) {
-	return /* @__PURE__ */ o(l, {
+function m({ value: e, currency: n, locale: r, showDecimals: i = !1, ...a }) {
+	return /* @__PURE__ */ s(d, {
 		value: e,
 		format: (e) => t(e, n, r, { showDecimals: i }),
 		...a
 	});
 }
 //#endregion
-export { u as AnimatedMoney, l as default };
+export { m as AnimatedMoney, d as default };

package/dist/breadcrumbs/index.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+/** Where a page sits: its parents as links, then the page itself. Give the last crumb `current`. */
+export default function Breadcrumbs({ className, children, 'aria-label': label, ...rest }: ComponentProps<'nav'>): import('react').JSX.Element;
+/**
+ * One crumb: a link, or with `current`, the page you're on (not a link). With
+ * `asChild`, the styles go onto your own link element (a router's Link).
+ */
+export declare function Breadcrumb({ current, asChild, className, ...rest }: BreadcrumbProps): import('react').JSX.Element;
+export interface BreadcrumbProps extends ComponentProps<'a'> {
+    /** The page you're on: the last crumb. */
+    current?: boolean;
+    /** Style the single child element (e.g. a router link) instead of rendering an <a>. */
+    asChild?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/breadcrumbs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAA4B,MAAM,OAAO,CAAC;AAE3E,oGAAoG;AACpG,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,KAAoB,EAClC,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,KAAK,CAAC,+BAkBvB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAQnF;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/breadcrumbs/index.js

@@ -0,0 +1,39 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import n from "../icons/micro/chevron-right.js";
+import { Children as r, Fragment as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/breadcrumbs/index.tsx
+function c({ className: t, children: c, "aria-label": l = "Breadcrumb", ...u }) {
+	let d = r.toArray(c).filter(a);
+	return /* @__PURE__ */ o("nav", {
+		"aria-label": l,
+		className: e("zen__breadcrumbs", t),
+		...u,
+		children: /* @__PURE__ */ o("ol", {
+			className: "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm",
+			children: d.map((e, t) => /* @__PURE__ */ s(i, { children: [t > 0 && /* @__PURE__ */ o("li", {
+				"aria-hidden": !0,
+				className: "text-muted-foreground/60 flex",
+				children: /* @__PURE__ */ o(n, { className: "size-3.5" })
+			}), /* @__PURE__ */ o("li", {
+				className: "flex min-w-0",
+				children: e
+			})] }, e.key ?? t))
+		})
+	});
+}
+function l({ current: n, asChild: r, className: i, ...a }) {
+	let s = e("truncate rounded-sm outline-hidden transition-colors focus-visible:ring-2 focus-visible:ring-ring/50", n ? "text-foreground font-medium" : "hover:text-foreground touch-target", i);
+	return n ? /* @__PURE__ */ o("span", {
+		"aria-current": "page",
+		className: s,
+		...a
+	}) : o(r ? t : "a", {
+		className: s,
+		...a
+	});
+}
+//#endregion
+export { l as Breadcrumb, c as default };

package/dist/calendar-heatmap/index.d.ts

@@ -0,0 +1,25 @@
+import { DateString } from '../utils/date';
+import { Month } from '../utils/month';
+/**
+ * A month as a grid of days, each shaded by its value (e.g. what was spent
+ * that day): busy days stand out at a glance. Hover a day for its figure;
+ * with `onSelect`, days are buttons.
+ */
+export default function CalendarHeatmap({ month, values, locale, format, weekStartsOn, onSelect, selected, label, className, }: CalendarHeatmapProps): import('react').JSX.Element;
+export interface CalendarHeatmapProps {
+    month: Month;
+    /** Each day's value, by date ("2026-09-03"); days missing have none. */
+    values: Partial<Record<DateString, number>>;
+    locale: string;
+    /** Turns a value into text for its label, e.g. as money. */
+    format?: (value: number) => string;
+    /** 0 for Sunday … 6 for Saturday (default: the locale's). */
+    weekStartsOn?: number;
+    /** Makes the days buttons. */
+    onSelect?: (day: DateString) => void;
+    selected?: DateString | null;
+    /** Accessible name (default: the month, e.g. "September 2026"). */
+    label?: string;
+    className?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/calendar-heatmap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar-heatmap/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAA+D,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAe,EACf,YAAgC,EAChC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,oBAAoB,+BAsFtB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/calendar-heatmap/index.js

@@ -0,0 +1,48 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { formatMonth as t } from "../utils/month.js";
+import { dayOfWeek as n, daysInMonth as r, formatDate as i, weekStart as a, weekdayNames as o } from "../utils/date.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/calendar-heatmap/index.tsx
+function u({ month: u, values: d, locale: f, format: p = String, weekStartsOn: m = a(f), onSelect: h, selected: g, label: _, className: v }) {
+	let y = r(u), b = Array.from({ length: y }, (e, t) => `${u}-${String(t + 1).padStart(2, "0")}`), x = (n(b[0]) - m + 7) % 7, S = [...Array(x).fill(null), ...b];
+	for (; S.length % 7;) S.push(null);
+	let C = Array.from({ length: S.length / 7 }, (e, t) => S.slice(t * 7, t * 7 + 7)), w = o(f, "narrow"), T = o(f, "long"), E = Array.from({ length: 7 }, (e, t) => (m + t) % 7), D = Math.max(0, ...b.map((e) => d[e] ?? 0));
+	return /* @__PURE__ */ l("table", {
+		"aria-label": _ ?? t(u, f, "long"),
+		className: e("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", v),
+		children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: E.map((e) => /* @__PURE__ */ c("th", {
+			scope: "col",
+			abbr: T[e],
+			className: "text-muted-foreground pb-1 text-xs font-normal",
+			children: w[e]
+		}, e)) }) }), /* @__PURE__ */ c("tbody", { children: C.map((t, n) => /* @__PURE__ */ c("tr", { children: t.map((t, n) => {
+			if (!t) return /* @__PURE__ */ c("td", {}, n);
+			let r = d[t], a = D > 0 && r ? Math.sqrt(r / D) : 0, o = `${i(t, f, "day")}: ${p(r || 0)}`, u = e("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", a ? a > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", t === g && "ring-ring ring-2"), m = a ? { background: `oklch(var(--primary) / ${+(.14 + .81 * a).toFixed(2)})` } : void 0, _ = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+				"aria-hidden": !0,
+				children: Number(t.slice(8))
+			}), /* @__PURE__ */ c("span", {
+				className: "sr-only",
+				children: o
+			})] });
+			return /* @__PURE__ */ c("td", {
+				title: o,
+				className: "p-0",
+				children: h ? /* @__PURE__ */ c("button", {
+					type: "button",
+					"aria-pressed": t === g,
+					onClick: () => h(t),
+					className: e(u, "focus-visible:ring-ring/60 cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-visible:ring-2"),
+					style: m,
+					children: _
+				}) : /* @__PURE__ */ c("span", {
+					className: u,
+					style: m,
+					children: _
+				})
+			}, t);
+		}) }, n)) })]
+	});
+}
+//#endregion
+export { u as default };

package/dist/card/index.d.ts

@@ -11,7 +11,7 @@ export declare function CardDescription({ className, ...rest }: ComponentProps<'
 /** The card's title: an h4 by default; with `asChild`, your own heading (an h2, say) gets its look. */
 export declare function CardTitle({ asChild, className, children, ...rest }: CardTitleProps): import('react').JSX.Element;
 /** A single figure with a label, e.g. "Revenue  $12,400". */
-export declare function Stat({ label, value, hint, tone, className }: StatProps): import('react').JSX.Element;
+export declare function Stat({ label, value, hint, tone, className, children }: StatProps): import('react').JSX.Element;
 /** Row of stats: two columns on phones (an odd last one spans both), three from `sm` up. */
 export declare function StatRow({ children, className }: {
     children: ReactNode;
@@ -28,5 +28,7 @@ export interface StatProps {
     hint?: ReactNode;
     tone?: 'default' | 'positive' | 'negative';
     className?: string;
+    /** Under the figure: how it got there, like a Sparkline. */
+    children?: ReactNode;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAO7D;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAE1E;AAED,6GAA6G;AAC7G,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,+BAE1E;AAED,uGAAuG;AACvG,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAIlF;AAED,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,SAAS,EAAE,EAAE,SAAS,+BAkBlF;AAED,4FAA4F;AAC5F,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3F;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IACxD,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAO7D;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAE1E;AAED,6GAA6G;AAC7G,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,+BAE1E;AAED,uGAAuG;AACvG,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAIlF;AAED,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAmB5F;AAED,4FAA4F;AAC5F,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3F;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IACxD,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB"}

package/dist/card/index.js

@@ -31,7 +31,7 @@ function s({ asChild: r, className: i, children: a, ...o }) {
 		children: a
 	});
 }
-function c({ label: t, value: i, hint: a, tone: o = "default", className: s }) {
+function c({ label: t, value: i, hint: a, tone: o = "default", className: s, children: c }) {
 	return /* @__PURE__ */ r("div", {
 		className: e("zen__stat glass glow-edge flex flex-col gap-1 rounded-xl p-3.5 md:p-4", s),
 		children: [
@@ -46,7 +46,8 @@ function c({ label: t, value: i, hint: a, tone: o = "default", className: s }) {
 			a && /* @__PURE__ */ n("span", {
 				className: "text-muted-foreground text-xs",
 				children: a
-			})
+			}),
+			c
 		]
 	});
 }

package/dist/chart/allocation.d.ts

@@ -0,0 +1,30 @@
+import { ChartPalette } from './palette';
+/**
+ * Where a whole went, as one bar split into its parts (e.g. income across
+ * spending, savings and bills), with a legend of each part's value and share.
+ * Pointing at a part, in the bar or the legend, picks it out; screen readers
+ * hear every part's value and share from the bar's label. Sweeps in from
+ * the start the first time it's seen. Colours default to the chart palette in
+ * order, like DonutChart's.
+ */
+export default function AllocationBar({ items, label, palette, formatValue, locale, legend, className, }: AllocationBarProps): import('react').JSX.Element;
+export interface AllocationItem {
+    key: string;
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface AllocationBarProps {
+    items: AllocationItem[];
+    /** What the whole is, e.g. "Income in September", for screen readers. */
+    label: string;
+    /** Colours for items that don't give their own: the categorical palette (default), or shades of the theme's glow. */
+    palette?: ChartPalette;
+    formatValue?: (value: number) => string;
+    /** For the shares' percent format. */
+    locale?: string;
+    /** The list of parts under the bar (default on). */
+    legend?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=allocation.d.ts.map

package/dist/chart/allocation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"allocation.d.ts","sourceRoot":"","sources":["../../packages/chart/allocation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,KAAK,EACL,KAAK,EACL,OAAiB,EACjB,WAAoB,EACpB,MAAM,EACN,MAAa,EACb,SAAS,GACZ,EAAE,kBAAkB,+BAuEpB;AAED,MAAM,WAAW,cAAc;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/chart/allocation.js

@@ -0,0 +1,69 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useSeen as t } from "../utils/useSeen.js";
+import { paletteColor as n } from "./palette.js";
+import { useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/chart/allocation.tsx
+function s({ items: s, label: c, palette: l = "chart", formatValue: u = String, locale: d, legend: f = !0, className: p }) {
+	let [m, h] = i(null), g = r(null), _ = t(g), v = s.filter((e) => e.value > 0), y = v.reduce((e, t) => e + t.value, 0), b = (e) => {
+		let t = s.findIndex((t) => t.key === e);
+		return s[t].color ?? n(l, t, s.length);
+	}, x = new Intl.NumberFormat(d, {
+		style: "percent",
+		maximumFractionDigits: 0
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: g,
+		"data-zen-unseen": _ ? void 0 : "",
+		className: e("zen__allocation flex flex-col gap-3", p),
+		children: [/* @__PURE__ */ a("div", {
+			role: "img",
+			"aria-label": `${c}. ${v.map((e) => `${e.label}: ${u(e.value)}, ${x.format(y ? e.value / y : 0)}`).join("; ")}`,
+			className: "zen__chart-sweep flex h-3 gap-0.5 overflow-hidden rounded-full",
+			children: v.map((e) => /* @__PURE__ */ a("span", {
+				"data-active": m === e.key || void 0,
+				"data-dimmed": m !== null && m !== e.key || void 0,
+				onPointerEnter: () => h(e.key),
+				onPointerLeave: () => h(null),
+				className: "min-w-1 transition-[opacity,filter] duration-200 first:rounded-s-full last:rounded-e-full data-active:[filter:drop-shadow(0_0_8px_var(--part))] data-dimmed:opacity-35",
+				style: {
+					flexGrow: e.value,
+					flexBasis: 0,
+					background: b(e.key),
+					"--part": b(e.key)
+				}
+			}, e.key))
+		}), f && /* @__PURE__ */ a("ul", {
+			"aria-hidden": !0,
+			className: "grid gap-x-6 gap-y-1.5 text-sm sm:grid-cols-2",
+			children: s.map((e) => /* @__PURE__ */ o("li", {
+				onPointerEnter: () => h(e.key),
+				onPointerLeave: () => h(null),
+				"data-dimmed": m !== null && m !== e.key || void 0,
+				className: "flex items-center gap-2 transition-opacity duration-200 data-dimmed:opacity-50",
+				children: [
+					/* @__PURE__ */ a("span", {
+						"aria-hidden": !0,
+						className: "size-2.5 shrink-0 rounded-full",
+						style: { background: b(e.key) }
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: e.label
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "tabular-nums",
+						children: u(e.value)
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "text-muted-foreground w-10 text-end tabular-nums",
+						children: x.format(y ? Math.max(0, e.value) / y : 0)
+					})
+				]
+			}, e.key))
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/dist/chart/donut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"donut.d.ts","sourceRoot":"","sources":["../../packages/chart/donut.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAG5D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAU,EACV,SAAgB,EAChB,OAAiB,EACjB,WAAoB,EACpB,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,+BAiIjB;AA+FD,MAAM,WAAW,eAAe;IAC5B,0DAA0D;IAC1D,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"donut.d.ts","sourceRoot":"","sources":["../../packages/chart/donut.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAG5D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAU,EACV,SAAgB,EAChB,OAAiB,EACjB,WAAoB,EACpB,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,+BAuIjB;AA+FD,MAAM,WAAW,eAAe;IAC5B,0DAA0D;IAC1D,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}