@rinzai/zen 0.5.0 → 0.6.1

package/dist/card/index.js

@@ -0,0 +1,60 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region packages/card/index.tsx
+function i({ className: t, ...r }) {
+	return /* @__PURE__ */ n("section", {
+		className: e("zen__card glass glow-edge text-card-foreground rounded-xl p-4 md:p-5", t),
+		...r
+	});
+}
+function a({ className: t, ...r }) {
+	return /* @__PURE__ */ n("header", {
+		className: e("mb-4 flex items-center justify-between gap-4", t),
+		...r
+	});
+}
+function o({ className: t, ...r }) {
+	return /* @__PURE__ */ n("p", {
+		className: e("text-muted-foreground text-xs", t),
+		...r
+	});
+}
+function s({ asChild: r, className: i, children: a, ...o }) {
+	let s = {
+		...o,
+		className: e("text-base font-semibold tracking-tight", i)
+	};
+	return n(r ? t : "h4", {
+		...s,
+		children: a
+	});
+}
+function c({ label: t, value: i, hint: a, tone: o = "default", className: s }) {
+	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: [
+			/* @__PURE__ */ n("span", {
+				className: "text-muted-foreground truncate text-[0.68rem] tracking-[0.1em] uppercase sm:text-xs",
+				children: t
+			}),
+			/* @__PURE__ */ n("span", {
+				className: e("truncate text-lg font-semibold tracking-tight tabular-nums sm:text-xl md:text-2xl", o === "positive" && "text-primary text-glow", o === "negative" && "text-destructive"),
+				children: i
+			}),
+			a && /* @__PURE__ */ n("span", {
+				className: "text-muted-foreground text-xs",
+				children: a
+			})
+		]
+	});
+}
+function l({ children: t, className: r }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 [&>*]:min-w-0", "[&>*:last-child:nth-child(odd)]:col-span-2 sm:[&>*:last-child:nth-child(odd)]:col-span-1", r),
+		children: t
+	});
+}
+//#endregion
+export { o as CardDescription, a as CardHeader, s as CardTitle, c as Stat, l as StatRow, i as default };

package/dist/chart/donut.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/**
+ * A ring of parts of a whole (e.g. spending by category), with your content in
+ * the middle (e.g. the total). Segments are parted by a small gap, with
+ * rounded corners; pointing at one (or focusing it) lifts it and shows its
+ * value. Best for a handful of parts: past about six, use bars. Colours default
+ * to the chart palette in order.
+ */
+export default function DonutChart({ items, label, size, thickness, formatValue, children, className, }: DonutChartProps): import('react').JSX.Element;
+export interface DonutChartProps {
+    /** The parts, in order round the ring from 12 o'clock. */
+    items: {
+        key: string;
+        label: string;
+        value: number;
+        color?: string;
+    }[];
+    /** Names the chart for screen readers. */
+    label: string;
+    /** Diameter in px. */
+    size?: number;
+    /** Ring thickness as a share of the radius. */
+    thickness?: number;
+    /** Values in the tooltip and for screen readers. */
+    formatValue?: (value: number) => string;
+    /** Content in the middle, e.g. the total. */
+    children?: ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=donut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donut.d.ts","sourceRoot":"","sources":["../../packages/chart/donut.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAI3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAU,EACV,SAAgB,EAChB,WAAoB,EACpB,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,+BA+FjB;AAmDD,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,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/chart/donut.js

@@ -0,0 +1,107 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { ChartTooltipCard as t } from "./tooltip.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/chart/donut.tsx
+function a({ items: a, label: s, size: u = 200, thickness: d = .32, formatValue: f = String, children: p, className: m }) {
+	let [h, g] = n(null), _ = a.reduce((e, t) => e + Math.max(0, t.value), 0), v = u / 2, y = v * (1 - d), b = Math.min(4, (v - y) / 4), x = a.filter((e) => e.value > 0).length > 1 ? 1.5 : 0, S = -Math.PI / 2, C = a.map((e, t) => {
+		let n = _ ? Math.max(0, e.value) / _ * Math.PI * 2 : 0, r = {
+			start: S,
+			end: S + n,
+			color: e.color ?? `var(--chart-${Math.min(t + 1, 8)})`
+		};
+		return S += n, r;
+	}), w = h === null ? null : a[h];
+	return /* @__PURE__ */ i("div", {
+		className: e("zen__donut relative shrink-0", m),
+		style: {
+			width: u,
+			height: u
+		},
+		children: [
+			/* @__PURE__ */ r("svg", {
+				width: u,
+				height: u,
+				viewBox: `${-v} ${-v} ${u} ${u}`,
+				role: "list",
+				"aria-label": s,
+				className: "overflow-visible",
+				children: C.map((e, t) => {
+					let n = e.end - e.start >= Math.PI * 2 - 1e-6, i = n ? l(y, v, e.start, e.end) : c(y + b, v - b, e.start, e.end, x + b);
+					if (!i) return null;
+					let o = (e.start + e.end) / 2, s = h === t && !n ? 4 : 0, u = _ ? Math.round(a[t].value / _ * 100) : 0;
+					return /* @__PURE__ */ r("path", {
+						role: "listitem",
+						tabIndex: 0,
+						"aria-label": `${a[t].label}: ${f(a[t].value)} (${u}%)`,
+						d: i,
+						strokeWidth: n ? 0 : b * 2,
+						strokeLinejoin: "round",
+						onPointerEnter: () => g(t),
+						onPointerLeave: () => g(null),
+						onFocus: () => g(t),
+						onBlur: () => g(null),
+						className: "zen__chart-fade focus-visible:outline-hidden",
+						style: {
+							fill: e.color,
+							stroke: e.color,
+							opacity: h !== null && h !== t ? .55 : 1,
+							transform: `translate(${Math.cos(o) * s}px, ${Math.sin(o) * s}px)`,
+							transition: "transform 200ms ease-out, opacity 200ms",
+							animationDelay: `${t * 60}ms`,
+							filter: h === t ? `drop-shadow(0 0 10px ${e.color})` : void 0
+						}
+					}, a[t].key);
+				})
+			}),
+			p && /* @__PURE__ */ r("div", {
+				className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+				children: p
+			}),
+			w && h !== null && /* @__PURE__ */ r("div", {
+				className: "pointer-events-none absolute z-10 -translate-y-1/2",
+				style: o((C[h].start + C[h].end) / 2, v),
+				children: /* @__PURE__ */ r(t, {
+					title: w.label,
+					rows: [{
+						label: `${_ ? Math.round(w.value / _ * 100) : 0}%`,
+						value: f(w.value),
+						color: C[h].color
+					}]
+				})
+			})
+		]
+	});
+}
+function o(e, t) {
+	let n = t + Math.cos(e) * (t + 10), r = t + Math.sin(e) * (t + 10);
+	return Math.cos(e) >= 0 ? {
+		left: n,
+		top: r
+	} : {
+		right: 2 * t - n,
+		top: r
+	};
+}
+function s(e, t) {
+	let n = (e) => Math.round(e * 1e3) / 1e3;
+	return `${n(e * Math.cos(t))},${n(e * Math.sin(t))}`;
+}
+function c(e, t, n, r, i) {
+	let a = (e) => Math.asin(Math.min(1, i / e)), [o, c] = [n + a(t), r - a(t)];
+	if (c <= o) return "";
+	let [l, u] = [n + a(e), r - a(e)];
+	return u < l && (l = u = (n + r) / 2), `${`M${s(t, o)}A${t},${t} 0 ${+(c - o > Math.PI)} 1 ${s(t, c)}`}${u > l ? `L${s(e, u)}A${e},${e} 0 ${+(u - l > Math.PI)} 0 ${s(e, l)}` : `L${s(e, l)}`}Z`;
+}
+function l(e, t, n, r) {
+	if (r <= n) return "";
+	let i = +(r - n > Math.PI);
+	if (r - n >= Math.PI * 2 - 1e-6) {
+		let r = n + Math.PI;
+		return `M${s(t, n)}A${t},${t} 0 1 1 ${s(t, r)}A${t},${t} 0 1 1 ${s(t, n)}M${s(e, n)}A${e},${e} 0 1 0 ${s(e, r)}A${e},${e} 0 1 0 ${s(e, n)}Z`;
+	}
+	return `M${s(t, n)}A${t},${t} 0 ${i} 1 ${s(t, r)}L${s(e, r)}A${e},${e} 0 ${i} 0 ${s(e, n)}Z`;
+}
+//#endregion
+export { a as default };

package/dist/chart/index.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+type Row = Record<string, unknown>;
+/** A line with a soft fill down to the baseline. */
+export declare const ChartArea: (props: ChartAreaProps) => null;
+/** A 2px line. Gaps (null values) break it, so one series can be split into solid and dashed parts. */
+export declare const ChartLine: (props: ChartLineProps) => null;
+/** Bars, grouped with the other bar series, growing from the baseline. */
+export declare const ChartBar: (props: ChartBarProps) => null;
+/** A marker across the plot: a horizontal line at `y` (e.g. zero), or a vertical one at the row whose x is `x` (e.g. today). */
+export declare const ChartReference: (props: ChartReferenceProps) => null;
+/**
+ * A chart on one axis: areas, lines and bars over rows of data (e.g. months),
+ * with a recessive grid, a crosshair and a tooltip listing every series at the
+ * pointer (or keyboard: focus it and use the arrow keys), a legend for two or
+ * more series, and a table of the values for screen readers. Series draw in
+ * as they appear. Colours default to the chart palette (--chart-1…8) in the
+ * order the series are written; give each its own `color` for meaning (e.g.
+ * the theme's glow).
+ */
+export default function Chart<T extends Row, X extends keyof T & string = keyof T & string>({ data, x, label, summary, height, formatX, formatY, formatTooltipX, renderTooltip, legend, className, children, }: ChartProps<T, X>): import('react').JSX.Element;
+/** Round tick values covering [min, max]: 0 / 5k / 10k, never 0 / 3,127 / 6,254. */
+export declare function niceTicks(min: number, max: number, count?: number): number[];
+export interface ChartSeriesProps {
+    /** The row field holding this series' values (numbers; null for none). */
+    dataKey: string;
+    /** Its name in the legend, the tooltip and the table. */
+    label: string;
+    /** Any CSS colour. Defaults to the next of --chart-1…8. */
+    color?: string;
+    /** Dashed (e.g. a projection). */
+    dashed?: boolean;
+}
+export interface ChartAreaProps extends ChartSeriesProps {
+    /** Smooth (default) or straight between points. */
+    curve?: 'monotone' | 'linear';
+}
+export type ChartLineProps = ChartAreaProps;
+export interface ChartBarProps extends Omit<ChartSeriesProps, 'dashed'> {
+    /** Rows whose bar is faded, e.g. months still to come. */
+    dim?: (row: Row, index: number) => boolean;
+}
+export interface ChartReferenceProps {
+    /** A horizontal line at this value. */
+    y?: number;
+    /** A vertical line at the row whose x field equals this. */
+    x?: unknown;
+    /** Text beside a vertical line, e.g. "Today". */
+    label?: string;
+    /** Destructive for a line that warns (e.g. below zero). */
+    tone?: 'muted' | 'destructive';
+    /** Vertical lines are dashed unless `dashed={false}`; horizontal ones solid unless `dashed`. */
+    dashed?: boolean;
+}
+export interface ChartProps<T extends Row, X extends keyof T & string = keyof T & string> {
+    /** One row per point on the x axis (e.g. a month). */
+    data: readonly T[];
+    /** The row field placed along the x axis. */
+    x: X;
+    /** Names the chart for screen readers. */
+    label: string;
+    /** A sentence on what the chart shows, for screen readers (e.g. its highest and lowest points). */
+    summary?: string;
+    /** Height in px, including the axis labels. */
+    height?: number;
+    /** Axis labels for x values. */
+    formatX?: (value: T[X]) => string;
+    /** The tooltip's title for an x value (defaults to formatX). */
+    formatTooltipX?: (value: T[X]) => string;
+    /** Axis ticks and tooltip values (defaults to compact numbers: 1.2K). */
+    formatY?: (value: number) => string;
+    /** Your own tooltip for a row (build it from ChartTooltipCard). */
+    renderTooltip?: (row: T, index: number) => ReactNode;
+    /** Show the legend. Defaults to on for two or more series. */
+    legend?: boolean;
+    className?: string;
+    /** ChartArea, ChartLine, ChartBar and ChartReference parts. */
+    children: ReactNode;
+}
+export { ChartTooltipCard, type ChartTooltipCardProps } from './tooltip';
+export { default as DonutChart, type DonutChartProps } from './donut';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/chart/index.tsx"],"names":[],"mappings":"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"}

package/dist/chart/index.js

@@ -0,0 +1,364 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { ChartTooltipCard as t, Key as n } from "./tooltip.js";
+import r from "./donut.js";
+import { Children as i, isValidElement as a, useEffect as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region packages/chart/index.tsx
+var m = () => null, h = () => null, g = () => null, _ = () => null, ee = /* @__PURE__ */ new Map([
+	[m, "area"],
+	[h, "line"],
+	[g, "bar"]
+]), v = {
+	top: 12,
+	right: 8,
+	bottom: 26
+}, y = 11;
+function b({ data: n, x: r, label: o, summary: m, height: h = 240, formatX: g = String, formatY: b = D, formatTooltipX: E, renderTooltip: k, legend: A, className: j, children: M }) {
+	let N = s().replace(/[^\w-]/g, ""), P = l(null), F = w(P), [I, L] = u(null), [R, z] = u(null), B = c(() => {
+		let e = i.toArray(M).filter(a), t = 0, o = [], s = [];
+		for (let n of e) {
+			n.type === _ && s.push(n.props);
+			let e = ee.get(n.type);
+			if (!e) continue;
+			let r = n.props;
+			t++, o.push({
+				...r,
+				kind: e,
+				color: r.color ?? `var(--chart-${Math.min(t, 8)})`
+			});
+		}
+		let c = n, l = o.flatMap((e) => c.map((t) => x(t, e.dataKey))).filter((e) => e !== null);
+		for (let e of s) e.y !== void 0 && l.push(e.y);
+		o.some((e) => e.kind !== "line") && l.push(0);
+		let u = T(l.length ? Math.min(...l) : 0, l.length ? Math.max(...l) : 1), [m, S] = [u[0], u[u.length - 1]], C = u.map((e) => b(e)), w = Math.ceil(Math.max(...C.map((e) => e.length)) * y * .62) + 10, E = Math.max(0, F - w - v.right), D = Math.max(0, h - v.top - v.bottom), O = c.length, k = o.filter((e) => e.kind === "bar"), A = k.length > 0 || O === 1, j = O ? A ? E / O : E / (O - 1) : 0, P = (e) => w + (A ? (e + .5) * j : e * j), I = (e) => v.top + (S === m ? D / 2 : (S - e) / (S - m) * D), L = I(Math.min(Math.max(0, m), S)), R = k.length ? Math.max(2, Math.min(24, j * .72 / k.length - 2)) : 0, z = (e, t) => P(e) - (k.length * (R + 2) - 2) / 2 + t * (R + 2), B = c.map((e) => g(e[r])), V = Math.max(1, ...B.map((e) => e.length)) * y * .6 + 12, H = j ? Math.max(1, Math.ceil(V / j)) : 1;
+		return {
+			series: o,
+			rows: c,
+			n: O,
+			bars: k,
+			banded: A,
+			step: j,
+			left: w,
+			plotH: D,
+			cx0: P,
+			cy: I,
+			base: L,
+			barW: R,
+			barX: z,
+			back: /* @__PURE__ */ p(d, { children: [
+				/* @__PURE__ */ f("defs", { children: o.map((e, t) => e.kind === "area" ? /* @__PURE__ */ p("linearGradient", {
+					id: `${N}-fill-${t}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ f("stop", {
+						offset: "0%",
+						style: { stopColor: e.color },
+						stopOpacity: e.dashed ? .16 : .32
+					}), /* @__PURE__ */ f("stop", {
+						offset: "100%",
+						style: { stopColor: e.color },
+						stopOpacity: 0
+					})]
+				}, t) : null) }),
+				u.map((e, t) => /* @__PURE__ */ p("g", { children: [/* @__PURE__ */ f("line", {
+					x1: w,
+					x2: w + E,
+					y1: I(e),
+					y2: I(e),
+					className: "stroke-tint/[0.07]",
+					shapeRendering: "crispEdges"
+				}), /* @__PURE__ */ f("text", {
+					x: w - 8,
+					y: I(e),
+					dy: "0.32em",
+					textAnchor: "end",
+					className: "fill-muted-foreground tabular-nums",
+					style: { fontSize: y },
+					children: C[t]
+				})] }, e)),
+				B.map((e, t) => t % H === 0 ? /* @__PURE__ */ f("text", {
+					x: P(t),
+					y: h - 8,
+					textAnchor: !k.length && O > 1 && t === 0 ? "start" : !k.length && t === O - 1 ? "end" : "middle",
+					className: "fill-muted-foreground",
+					style: { fontSize: y },
+					children: e
+				}, t) : null)
+			] }),
+			front: /* @__PURE__ */ p(d, { children: [o.map((e, t) => e.kind === "bar" ? null : te(c.map((t, n) => {
+				let r = x(t, e.dataKey);
+				return r === null ? null : [P(n), I(r)];
+			})).map((n, r) => {
+				let i = (e.curve === "linear" ? ne : re)(n);
+				return /* @__PURE__ */ p("g", { children: [e.kind === "area" && /* @__PURE__ */ f("path", {
+					d: `${i}L${n[n.length - 1][0]},${L}L${n[0][0]},${L}Z`,
+					fill: `url(#${N}-fill-${t})`,
+					className: "zen__chart-fade"
+				}), /* @__PURE__ */ f("path", {
+					d: i,
+					fill: "none",
+					strokeWidth: e.kind === "area" && !e.dashed ? 2.5 : 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					pathLength: e.dashed ? void 0 : 1,
+					strokeDasharray: e.dashed ? "5 5" : void 0,
+					className: e.dashed ? "zen__chart-fade" : "zen__chart-draw",
+					style: { stroke: e.color }
+				})] }, `${t}-${r}`);
+			})), s.map((e, t) => {
+				let n = e.tone === "destructive" ? "stroke-destructive/45" : "stroke-muted-foreground/60";
+				if (e.y !== void 0) return /* @__PURE__ */ f("line", {
+					x1: w,
+					x2: w + E,
+					y1: I(e.y),
+					y2: I(e.y),
+					className: n,
+					strokeDasharray: e.dashed ? "3 4" : void 0,
+					shapeRendering: "crispEdges"
+				}, t);
+				let i = c.findIndex((t) => t[r] === e.x);
+				if (i < 0) return null;
+				let a = !!e.label && P(i) - 6 - e.label.length * y * .6 < w;
+				return /* @__PURE__ */ p("g", { children: [/* @__PURE__ */ f("line", {
+					x1: P(i),
+					x2: P(i),
+					y1: v.top,
+					y2: v.top + D,
+					className: n,
+					strokeDasharray: e.dashed === !1 ? void 0 : "3 4"
+				}), e.label && /* @__PURE__ */ f("text", {
+					x: P(i) + (a ? 6 : -6),
+					y: v.top + 4,
+					dy: "0.7em",
+					textAnchor: a ? "start" : "end",
+					className: "fill-muted-foreground",
+					style: { fontSize: y },
+					children: e.label
+				})] }, t);
+			})] })
+		};
+	}, [
+		M,
+		n,
+		r,
+		F,
+		h,
+		g,
+		b,
+		N
+	]), { series: V, rows: H, n: U, bars: W, banded: ie, step: G, left: K, plotH: q, cx0: J, cy: Y, base: X, barW: Z, barX: ae } = B, oe = c(() => W.map((e, t) => H.map((n, r) => {
+		let i = x(n, e.dataKey);
+		if (i === null) return null;
+		let a = Y(i), o = Math.abs(X - a), s = i < 0;
+		return /* @__PURE__ */ f("path", {
+			d: O(ae(r, t), s ? X : a, Z, o, s),
+			"data-negative": s || void 0,
+			className: "zen__chart-grow transition-opacity duration-200",
+			style: {
+				fill: e.color,
+				opacity: (e.dim?.(n, r) ? .35 : .9) * (I !== null && I !== r ? .7 : 1),
+				animationDelay: `${Math.min(r * 25, 400)}ms`
+			}
+		}, `${t}-${r}`);
+	})), [
+		W,
+		H,
+		Y,
+		X,
+		ae,
+		Z,
+		I
+	]), se = c(() => /* @__PURE__ */ p("table", {
+		className: "sr-only",
+		children: [
+			/* @__PURE__ */ f("caption", { children: o }),
+			/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("th", {
+				scope: "col",
+				children: String(r)
+			}), V.map((e) => /* @__PURE__ */ f("th", {
+				scope: "col",
+				children: e.label
+			}, e.dataKey))] }) }),
+			/* @__PURE__ */ f("tbody", { children: H.map((e, t) => /* @__PURE__ */ p("tr", { children: [/* @__PURE__ */ f("th", {
+				scope: "row",
+				children: (E ?? g)(e[r])
+			}), V.map((t) => {
+				let n = x(e, t.dataKey);
+				return /* @__PURE__ */ f("td", { children: n === null ? "" : b(n) }, t.dataKey);
+			})] }, t)) })
+		]
+	}), [
+		o,
+		r,
+		V,
+		H,
+		E,
+		g,
+		b
+	]), ce = (e) => {
+		if (!U || !G) return null;
+		let t = ie ? Math.floor((e - K) / G) : Math.round((e - K) / G);
+		return Math.min(U - 1, Math.max(0, t));
+	}, le = (e) => {
+		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = Math.round(e.clientY - t.top);
+		L(ce(n)), z((e) => e?.y === r ? e : { y: r });
+	}, ue = (e) => {
+		if (!U) return;
+		let t = {
+			ArrowRight: 1,
+			ArrowLeft: -1
+		}[e.key];
+		if (e.key === "Escape") return L(null);
+		if (e.key === "Home" || e.key === "End") return e.preventDefault(), z(null), L(e.key === "Home" ? 0 : U - 1);
+		t && (e.preventDefault(), z(null), L((e) => e === null ? t > 0 ? 0 : U - 1 : Math.min(U - 1, Math.max(0, e + t))));
+	}, de = A ?? V.length > 1, Q = I === null ? null : H[I], $ = I === null ? 0 : J(I), fe = R?.y ?? v.top;
+	return /* @__PURE__ */ p("figure", {
+		"aria-label": o,
+		className: e("zen__chart m-0 flex flex-col gap-3", j),
+		children: [
+			de && /* @__PURE__ */ f(S, { series: V }),
+			/* @__PURE__ */ p("div", {
+				ref: P,
+				tabIndex: 0,
+				"aria-label": `${o}: use the arrow keys to read values`,
+				onPointerMove: le,
+				onPointerLeave: () => {
+					L(null), z(null);
+				},
+				onKeyDown: ue,
+				onBlur: () => L(null),
+				className: "focus-visible:ring-ring/50 relative rounded-lg outline-hidden focus-visible:ring-2",
+				style: { height: h },
+				children: [F > 0 && /* @__PURE__ */ p("svg", {
+					width: F,
+					height: h,
+					"aria-hidden": !0,
+					className: "block overflow-visible",
+					children: [
+						B.back,
+						I !== null && (W.length ? /* @__PURE__ */ f("rect", {
+							x: J(I) - G / 2,
+							y: v.top,
+							width: G,
+							height: q,
+							className: "fill-tint/[0.04]"
+						}) : /* @__PURE__ */ f("line", {
+							x1: $,
+							x2: $,
+							y1: v.top,
+							y2: v.top + q,
+							className: "stroke-glow/40"
+						})),
+						oe,
+						B.front,
+						I !== null && V.map((e, t) => {
+							if (e.kind === "bar") return null;
+							let n = x(H[I], e.dataKey);
+							return n === null ? null : /* @__PURE__ */ f("circle", {
+								cx: $,
+								cy: Y(n),
+								r: 4,
+								strokeWidth: 2,
+								className: "stroke-card",
+								style: { fill: e.color }
+							}, t);
+						})
+					]
+				}), Q && I !== null && /* @__PURE__ */ f("div", {
+					className: "pointer-events-none absolute top-0 z-10 transition-[translate] duration-75",
+					style: C($, fe, F, h),
+					children: k ? k(Q, I) : /* @__PURE__ */ f(t, {
+						title: (E ?? g)(Q[r]),
+						rows: V.map((e) => ({
+							s: e,
+							v: x(Q, e.dataKey)
+						})).filter(({ v: e }) => e !== null).map(({ s: e, v: t }) => ({
+							label: e.label,
+							value: b(t),
+							color: e.color,
+							dashed: e.dashed
+						}))
+					})
+				})]
+			}),
+			m && /* @__PURE__ */ f("figcaption", {
+				className: "sr-only",
+				children: m
+			}),
+			se
+		]
+	});
+}
+function x(e, t) {
+	let n = e[t];
+	return typeof n == "number" && Number.isFinite(n) ? n : null;
+}
+function S({ series: e }) {
+	return /* @__PURE__ */ f("ul", {
+		className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-xs",
+		"aria-label": "Legend",
+		children: e.map((e) => /* @__PURE__ */ p("li", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ f(n, {
+				color: e.color,
+				dashed: e.dashed,
+				kind: e.kind
+			}), e.label]
+		}, e.dataKey))
+	});
+}
+function C(e, t, n, r) {
+	let i = e > n / 2, a = Math.round(Math.min(Math.max(0, t - 20), r - 80));
+	return i ? {
+		right: 0,
+		translate: `${Math.round(e - 12 - n)}px ${a}px`
+	} : {
+		left: 0,
+		translate: `${Math.round(e + 12)}px ${a}px`
+	};
+}
+function w(e) {
+	let [t, n] = u(0);
+	return o(() => {
+		let t = e.current;
+		if (!t || (n(t.clientWidth), typeof ResizeObserver > "u")) return;
+		let r = new ResizeObserver(() => n(t.clientWidth));
+		return r.observe(t), () => r.disconnect();
+	}, [e]), t;
+}
+function T(e, t, n = 5) {
+	e === t && ([e, t] = e === 0 ? [0, 1] : [Math.min(0, e), Math.max(0, t)]);
+	let r = (t - e) / n, i = 10 ** Math.floor(Math.log10(r)), a = r / i, o = i * (a >= 7.5 ? 10 : a >= 3.5 ? 5 : a >= 1.5 ? 2 : 1), s = Math.floor(e / o), c = Math.ceil(t / o);
+	return Array.from({ length: c - s + 1 }, (e, t) => Number(((s + t) * o).toPrecision(12)));
+}
+var E = new Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}), D = (e) => E.format(e);
+function te(e) {
+	let t = [], n = [];
+	for (let r of e) r ? n.push(r) : n.length && (t.push(n), n = []);
+	return n.length && t.push(n), t;
+}
+function ne(e) {
+	return e.map(([e, t], n) => `${n ? "L" : "M"}${e},${t}`).join("");
+}
+function re(e) {
+	let t = e.length;
+	if (t < 3) return ne(e);
+	let n = e.slice(1).map((t, n) => t[0] - e[n][0]), r = e.slice(1).map((t, r) => (t[1] - e[r][1]) / n[r]), i = e.map((e, i) => i === 0 ? r[0] : i === t - 1 ? r[t - 2] : r[i - 1] * r[i] <= 0 ? 0 : 3 * (n[i - 1] + n[i]) / ((2 * n[i] + n[i - 1]) / r[i - 1] + (n[i] + 2 * n[i - 1]) / r[i])), a = `M${e[0][0]},${e[0][1]}`;
+	for (let r = 0; r < t - 1; r++) {
+		let t = n[r] / 3;
+		a += `C${e[r][0] + t},${e[r][1] + i[r] * t},${e[r + 1][0] - t},${e[r + 1][1] - i[r + 1] * t},${e[r + 1][0]},${e[r + 1][1]}`;
+	}
+	return a;
+}
+function O(e, t, n, r, i) {
+	let a = Math.min(4, n / 2, r);
+	return i ? `M${e},${t}V${t + r - a}Q${e},${t + r} ${e + a},${t + r}H${e + n - a}Q${e + n},${t + r} ${e + n},${t + r - a}V${t}Z` : `M${e},${t + r}V${t + a}Q${e},${t} ${e + a},${t}H${e + n - a}Q${e + n},${t} ${e + n},${t + a}V${t + r}Z`;
+}
+//#endregion
+export { m as ChartArea, g as ChartBar, h as ChartLine, _ as ChartReference, t as ChartTooltipCard, r as DonutChart, b as default, T as niceTicks };

package/dist/chart/tooltip.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export type Kind = 'area' | 'line' | 'bar';
+/**
+ * The tooltip's card: a title and one row per series, the value first and the
+ * series keyed by a short stroke of its colour. Use it in `renderTooltip` to
+ * show your own rows.
+ */
+export declare function ChartTooltipCard({ title, rows, className }: ChartTooltipCardProps): import('react').JSX.Element;
+/** A series' key: a short line for lines (dashed if the series is), a rounded swatch for bars and areas. */
+export declare function Key({ color, dashed, kind }: {
+    color: string;
+    dashed?: boolean;
+    kind?: Kind;
+}): import('react').JSX.Element;
+export interface ChartTooltipCardProps {
+    title: ReactNode;
+    rows: {
+        label: string;
+        value: string;
+        color?: string;
+        dashed?: boolean;
+    }[];
+    className?: string;
+}
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../packages/chart/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BAiBjF;AAED,4GAA4G;AAC5G,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAa,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,+BAiBrG;AAED,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}