@franco_roura/module-01 0.0.0-stage → 1.0.0

package/dist/components/charts.js

@@ -0,0 +1,482 @@
+"use client";
+import { categoryColorVar } from "../lib/category-icons.js";
+import { formatMoney } from "../lib/money.js";
+import { cn } from "../lib/utils.js";
+import { CategoryIcon } from "./category-icon.js";
+import { ChartContainer, ChartTooltip } from "./chart.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, ReferenceLine, XAxis, YAxis } from "recharts";
+// src/components/charts.tsx
+const toNumber = (minor, units) => Number(minor) / 10 ** units;
+const axisProps = {
+	tickLine: false,
+	axisLine: false,
+	tick: {
+		fill: "var(--color-ink-soft)",
+		fontSize: 11,
+		fontFamily: "var(--font-mono)"
+	}
+};
+const compactFormat = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumSignificantDigits: 4
+});
+function compact(n) {
+	return compactFormat.format(n);
+}
+function TooltipCard({ title, rows }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-44 rounded-md border border-seam bg-shell px-3 py-2 shadow-float",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "hud-sm mb-1.5 text-ink-soft",
+			children: title
+		}), rows.map((r) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-4 text-body-sm",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5 text-ink-soft",
+				children: [r.swatch && /* @__PURE__ */ jsx("span", {
+					className: "size-2 rounded-full",
+					style: { background: r.swatch }
+				}), r.label]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "tabular text-ink",
+				children: r.value
+			})]
+		}, r.label))]
+	});
+}
+/** One series over time: the balance line with a soft area and a crosshair tooltip. */
+function BalanceChart({ points, money, className }) {
+	const data = points.map((p) => ({
+		...p,
+		value: toNumber(p.balance, money.minorUnits)
+	}));
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		config: { value: {
+			label: "Balance",
+			color: "var(--color-chart-line)"
+		} },
+		className: cn("aspect-auto h-56 w-full", className),
+		children: /* @__PURE__ */ jsxs(AreaChart, {
+			data,
+			margin: {
+				left: 4,
+				right: 20,
+				top: 8,
+				bottom: 0
+			},
+			children: [
+				/* @__PURE__ */ jsx(CartesianGrid, {
+					vertical: false,
+					stroke: "var(--color-seam)",
+					strokeDasharray: "2 4"
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "label",
+					...axisProps,
+					minTickGap: 24
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					...axisProps,
+					width: 48,
+					tickFormatter: compact,
+					domain: ["auto", "auto"]
+				}),
+				/* @__PURE__ */ jsx(ChartTooltip, {
+					cursor: {
+						stroke: "var(--color-hud-mark)",
+						strokeWidth: 1
+					},
+					content: ({ active, payload }) => {
+						const p = active && payload?.[0]?.payload;
+						if (!p) return null;
+						return /* @__PURE__ */ jsx(TooltipCard, {
+							title: p.tooltipLabel,
+							rows: [{
+								label: "Balance",
+								value: formatMoney(p.balance, money.currency, money.minorUnits, { sign: "always" })
+							}]
+						});
+					}
+				}),
+				/* @__PURE__ */ jsx(Area, {
+					dataKey: "value",
+					type: "linear",
+					stroke: "var(--color-chart-line)",
+					strokeWidth: 2,
+					fill: "var(--color-signal-tint)",
+					fillOpacity: .6,
+					dot: false,
+					activeDot: {
+						r: 4,
+						fill: "var(--color-chart-line)",
+						stroke: "var(--color-shell)",
+						strokeWidth: 2
+					},
+					isAnimationActive: false
+				})
+			]
+		})
+	});
+}
+/**
+* Income above the baseline, expenses below it, per bucket. With `only`, a single series (no
+* legend: the panel title names it).
+*/
+function FlowChart({ points, money, only, className }) {
+	const showIncome = only !== "expense";
+	const showExpense = only !== "income";
+	const data = points.map((p) => ({
+		...p,
+		incomeValue: toNumber(p.income, money.minorUnits),
+		expenseValue: -toNumber(p.expense, money.minorUnits)
+	}));
+	const config = {
+		incomeValue: {
+			label: "Income",
+			color: "var(--color-chart-income)"
+		},
+		expenseValue: {
+			label: "Expenses",
+			color: "var(--color-chart-expense)"
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: "aspect-auto h-56 w-full",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data,
+				stackOffset: "sign",
+				margin: {
+					left: 4,
+					right: 20,
+					top: 8,
+					bottom: 0
+				},
+				barCategoryGap: "20%",
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						vertical: false,
+						stroke: "var(--color-seam)",
+						strokeDasharray: "2 4"
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "label",
+						...axisProps,
+						minTickGap: 24
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						...axisProps,
+						width: 48,
+						tickFormatter: (v) => compact(Math.abs(v))
+					}),
+					/* @__PURE__ */ jsx(ReferenceLine, {
+						y: 0,
+						stroke: "var(--color-hud-mark)"
+					}),
+					/* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: {
+							fill: "var(--color-shell-recess)",
+							opacity: .6
+						},
+						content: ({ active, payload }) => {
+							const p = active && payload?.[0]?.payload;
+							if (!p) return null;
+							return /* @__PURE__ */ jsx(TooltipCard, {
+								title: p.tooltipLabel,
+								rows: [...showIncome ? [{
+									label: "Income",
+									swatch: "var(--color-chart-income)",
+									value: formatMoney(p.income, money.currency, money.minorUnits, { sign: "always" })
+								}] : [], ...showExpense ? [{
+									label: "Expenses",
+									swatch: "var(--color-chart-expense)",
+									value: formatMoney(0n - p.expense, money.currency, money.minorUnits)
+								}] : []]
+							});
+						}
+					}),
+					showIncome && /* @__PURE__ */ jsx(Bar, {
+						dataKey: "incomeValue",
+						stackId: "flow",
+						fill: "var(--color-chart-income)",
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						isAnimationActive: false
+					}),
+					showExpense && /* @__PURE__ */ jsx(Bar, {
+						dataKey: "expenseValue",
+						stackId: "flow",
+						fill: "var(--color-chart-expense)",
+						radius: [
+							0,
+							0,
+							4,
+							4
+						],
+						isAnimationActive: false
+					})
+				]
+			})
+		}), !only && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-4 pl-14",
+			children: ["incomeValue", "expenseValue"].map((k) => /* @__PURE__ */ jsxs("span", {
+				className: "hud-sm flex items-center gap-1.5 text-ink-soft",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "size-2 rounded-xs",
+					style: { background: config[k].color }
+				}), config[k].label]
+			}, k))
+		})]
+	});
+}
+const callout = {
+	leader: 12,
+	icon: 28,
+	dot: 12,
+	gap: 5,
+	charWidth: 7.8,
+	textHeight: 12,
+	minShare: 50n
+};
+const donutMaxRadius = 112;
+const donutMinRadius = 56;
+const TAU = 2 * Math.PI;
+/** Angles run clockwise from 12 o'clock, like the donut's slices. */
+function polar(cx, cy, r, angle) {
+	return {
+		x: cx + r * Math.sin(angle),
+		y: cy - r * Math.cos(angle)
+	};
+}
+/** Pushes sorted angles apart, the least it can, until neighbours are at least `min` apart. */
+function spreadAngles(angles, min) {
+	const p = [...angles];
+	const n = p.length;
+	if (n < 2) return p;
+	const step = Math.min(min, TAU / n);
+	for (let round = 0; round < 200; round++) {
+		let moved = false;
+		for (let i = 0; i < n; i++) {
+			const j = (i + 1) % n;
+			const a = p[i] ?? 0;
+			const b = (p[j] ?? 0) + (j === 0 ? TAU : 0);
+			if (b - a < step - 1e-6) {
+				const push = (step - (b - a)) / 2;
+				p[i] = a - push;
+				p[j] = (p[j] ?? 0) + push;
+				moved = true;
+			}
+		}
+		if (!moved) break;
+	}
+	return p;
+}
+function useWidth() {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry) setWidth(Math.floor(entry.contentRect.width));
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, width];
+}
+/**
+* Shares of a total, clockwise from 12 o'clock. Up to 7 slices plus "Other". Each slice of 2% or
+* more gets a callout outside the ring (its icon and share), so it reads without the legend; the
+* caller still shows the ranked list beside it.
+*/
+function DonutChart({ slices, money, centerLabel, className }) {
+	const [ref, width] = useWidth();
+	const sorted = [...slices].sort((a, b) => b.amount > a.amount ? 1 : b.amount < a.amount ? -1 : 0);
+	const withIcons = slices.some((s) => s.icon);
+	const top = sorted.slice(0, 7);
+	const rest = sorted.slice(7).reduce((s, x) => s + x.amount, 0n);
+	if (rest > 0n) top.push({
+		key: "other",
+		label: "Other",
+		color: "cat-slate",
+		amount: rest,
+		icon: withIcons ? "ellipsis" : void 0
+	});
+	const total = sorted.reduce((s, x) => s + x.amount, 0n);
+	const data = top.map((s) => ({
+		...s,
+		value: toNumber(s.amount, money.minorUnits)
+	}));
+	const sum = data.reduce((s, d) => s + d.value, 0);
+	let acc = 0;
+	const labelled = data.map((d) => {
+		const from = sum > 0 ? acc / sum * TAU : 0;
+		acc += d.value;
+		const share = total > 0n ? Number(d.amount * 1000n / total) / 10 : 0;
+		return {
+			...d,
+			from,
+			to: sum > 0 ? acc / sum * TAU : 0,
+			share: `${share.toFixed(1)}%`
+		};
+	}).filter((a) => a.amount * callout.minShare >= total && total > 0n);
+	const marker = withIcons ? callout.icon : callout.dot;
+	const textWidth = Math.max(0, ...labelled.map((a) => a.share.length)) * callout.charWidth;
+	const withShares = callout.leader + marker + callout.gap + textWidth;
+	const showShares = width === 0 || width / 2 - withShares >= donutMinRadius;
+	const marginX = showShares ? withShares : callout.leader + marker;
+	const marginY = callout.leader + marker + (showShares ? callout.gap + callout.textHeight : 0);
+	const radius = width === 0 ? donutMaxRadius : Math.max(32, Math.min(donutMaxRadius, width / 2 - marginX));
+	const height = Math.round(2 * (radius + marginY));
+	const cx = width / 2;
+	const cy = height / 2;
+	const inner = radius * .62;
+	const orbit = radius + callout.leader + marker / 2;
+	const clearance = Math.max(marker, showShares ? textWidth : 0) + 6;
+	const angles = spreadAngles(labelled.map((a) => (a.from + a.to) / 2), 2 * Math.asin(Math.min(1, clearance / 2 / orbit)));
+	const callouts = labelled.map((a, i) => {
+		const angle = angles[i] ?? 0;
+		const pad = Math.min(.05, (a.to - a.from) / 4);
+		const start = polar(cx, cy, radius + 3, Math.min(a.to - pad, Math.max(a.from + pad, angle)));
+		const center = polar(cx, cy, orbit, angle);
+		const dx = start.x - center.x;
+		const dy = start.y - center.y;
+		const len = Math.hypot(dx, dy) || 1;
+		const end = {
+			x: center.x + dx / len * (marker / 2 + 1),
+			y: center.y + dy / len * (marker / 2 + 1)
+		};
+		const text = polar(cx, cy, orbit + marker / 2 + callout.gap, angle);
+		const sx = Math.sin(angle);
+		const sy = -Math.cos(angle);
+		const tx = sx > .38 ? "0" : sx < -.38 ? "-100%" : "-50%";
+		const ty = sy > .38 ? "0" : sy < -.38 ? "-100%" : "-50%";
+		return {
+			...a,
+			start,
+			end,
+			center,
+			text,
+			align: `translate(${tx}, ${ty})`
+		};
+	});
+	const totalText = formatMoney(total, money.currency, money.minorUnits, { code: false });
+	const totalSize = Math.max(10, Math.min(15, Math.floor(inner * 2 * .84 / (totalText.length * .62))));
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("relative w-full [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden", className),
+		style: { height },
+		children: width > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-0",
+			children: [/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": true,
+				width,
+				height,
+				className: "absolute inset-0",
+				children: [
+					callouts.map((c) => /* @__PURE__ */ jsx("line", {
+						x1: c.start.x,
+						y1: c.start.y,
+						x2: c.end.x,
+						y2: c.end.y,
+						stroke: categoryColorVar(c.color),
+						strokeWidth: 1.5,
+						strokeLinecap: "round"
+					}, c.key)),
+					/* @__PURE__ */ jsx("text", {
+						x: cx,
+						y: cy - 6,
+						textAnchor: "middle",
+						className: "hud-sm",
+						fill: "var(--color-ink-soft)",
+						children: centerLabel
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: cx,
+						y: cy + 14,
+						textAnchor: "middle",
+						className: "tabular",
+						fontSize: totalSize,
+						fontWeight: 700,
+						fill: "var(--color-ink)",
+						children: totalText
+					})
+				]
+			}), callouts.map((c) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+				className: "absolute -translate-x-1/2 -translate-y-1/2",
+				style: {
+					left: c.center.x,
+					top: c.center.y
+				},
+				children: withIcons ? /* @__PURE__ */ jsx(CategoryIcon, {
+					icon: c.icon ?? "circle-help",
+					color: c.color,
+					size: "sm",
+					className: "flex"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "block size-3 rounded-full",
+					style: { background: categoryColorVar(c.color) }
+				})
+			}), showShares && /* @__PURE__ */ jsx("span", {
+				className: "hud-sm absolute whitespace-nowrap text-ink",
+				style: {
+					left: c.text.x,
+					top: c.text.y,
+					transform: c.align
+				},
+				children: c.share
+			})] }, c.key))]
+		}), /* @__PURE__ */ jsxs(PieChart, {
+			width,
+			height,
+			margin: {
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0
+			},
+			children: [/* @__PURE__ */ jsx(ChartTooltip, { content: ({ active, payload }) => {
+				const p = active && payload?.[0]?.payload;
+				if (!p) return null;
+				const share = total > 0n ? Number(p.amount * 1000n / total) / 10 : 0;
+				return /* @__PURE__ */ jsx(TooltipCard, {
+					title: p.label,
+					rows: [{
+						label: "Amount",
+						value: formatMoney(p.amount, money.currency, money.minorUnits)
+					}, {
+						label: "Share",
+						value: `${share.toFixed(1)}%`
+					}]
+				});
+			} }), /* @__PURE__ */ jsx(Pie, {
+				data,
+				dataKey: "value",
+				nameKey: "label",
+				cx,
+				cy,
+				innerRadius: inner,
+				outerRadius: radius,
+				startAngle: 90,
+				endAngle: -270,
+				stroke: data.length > 1 ? "var(--color-shell)" : "none",
+				strokeWidth: 2,
+				isAnimationActive: false,
+				children: data.map((s) => /* @__PURE__ */ jsx(Cell, { fill: categoryColorVar(s.color) }, s.key))
+			})]
+		})] })
+	});
+}
+export { BalanceChart, DonutChart, FlowChart };
+
+//# sourceMappingURL=charts.js.map

package/dist/components/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.js","names":[],"sources":["../../src/components/charts.tsx"],"sourcesContent":["\"use client\";\n\nimport { categoryColorVar } from \"../lib/category-icons\";\nimport { formatMoney } from \"../lib/money\";\nimport { cn } from \"../lib/utils\";\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  Pie,\n  PieChart,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { CategoryIcon } from \"./category-icon\";\nimport { type ChartConfig, ChartContainer, ChartTooltip } from \"./chart\";\n\n// Module/01 charts. Marks are thin, axes and grid recede (seam / hud-mark), text uses ink tokens,\n// and series colors come from tokens: chart-line (single series), chart-income / chart-expense\n// (paired with position above/below the baseline), category palette for categories.\n\ntype Money = { currency: string; minorUnits: number };\n\nconst toNumber = (minor: bigint, units: number) => Number(minor) / 10 ** units;\n\nconst axisProps = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fill: \"var(--color-ink-soft)\", fontSize: 11, fontFamily: \"var(--font-mono)\" },\n} as const;\n\n// Enough digits that neighbouring ticks never read the same (11.38K, 11.42K).\nconst compactFormat = new Intl.NumberFormat(\"en-US\", {\n  notation: \"compact\",\n  maximumSignificantDigits: 4,\n});\n\nfunction compact(n: number) {\n  return compactFormat.format(n);\n}\n\nfunction TooltipCard({\n  title,\n  rows,\n}: {\n  title: string;\n  rows: { label: string; value: string; swatch?: string }[];\n}) {\n  return (\n    <div className=\"min-w-44 rounded-md border border-seam bg-shell px-3 py-2 shadow-float\">\n      <div className=\"hud-sm mb-1.5 text-ink-soft\">{title}</div>\n      {rows.map((r) => (\n        <div key={r.label} className=\"flex items-center justify-between gap-4 text-body-sm\">\n          <span className=\"flex items-center gap-1.5 text-ink-soft\">\n            {r.swatch && <span className=\"size-2 rounded-full\" style={{ background: r.swatch }} />}\n            {r.label}\n          </span>\n          <span className=\"tabular text-ink\">{r.value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport type BalancePoint = { label: string; tooltipLabel: string; balance: bigint };\n\n/** One series over time: the balance line with a soft area and a crosshair tooltip. */\nexport function BalanceChart({\n  points,\n  money,\n  className,\n}: {\n  points: BalancePoint[];\n  money: Money;\n  className?: string;\n}) {\n  const data = points.map((p) => ({ ...p, value: toNumber(p.balance, money.minorUnits) }));\n  const config = {\n    value: { label: \"Balance\", color: \"var(--color-chart-line)\" },\n  } satisfies ChartConfig;\n  return (\n    <ChartContainer config={config} className={cn(\"aspect-auto h-56 w-full\", className)}>\n      <AreaChart data={data} margin={{ left: 4, right: 20, top: 8, bottom: 0 }}>\n        <CartesianGrid vertical={false} stroke=\"var(--color-seam)\" strokeDasharray=\"2 4\" />\n        <XAxis dataKey=\"label\" {...axisProps} minTickGap={24} />\n        <YAxis {...axisProps} width={48} tickFormatter={compact} domain={[\"auto\", \"auto\"]} />\n        <ChartTooltip\n          cursor={{ stroke: \"var(--color-hud-mark)\", strokeWidth: 1 }}\n          content={({ active, payload }) => {\n            const p = active && payload?.[0]?.payload;\n            if (!p) return null;\n            return (\n              <TooltipCard\n                title={p.tooltipLabel}\n                rows={[\n                  {\n                    label: \"Balance\",\n                    value: formatMoney(p.balance, money.currency, money.minorUnits, {\n                      sign: \"always\",\n                    }),\n                  },\n                ]}\n              />\n            );\n          }}\n        />\n        <Area\n          dataKey=\"value\"\n          type=\"linear\"\n          stroke=\"var(--color-chart-line)\"\n          strokeWidth={2}\n          fill=\"var(--color-signal-tint)\"\n          fillOpacity={0.6}\n          dot={false}\n          activeDot={{\n            r: 4,\n            fill: \"var(--color-chart-line)\",\n            stroke: \"var(--color-shell)\",\n            strokeWidth: 2,\n          }}\n          isAnimationActive={false}\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n\nexport type FlowPoint = { label: string; tooltipLabel: string; income: bigint; expense: bigint };\n\n/**\n * Income above the baseline, expenses below it, per bucket. With `only`, a single series (no\n * legend: the panel title names it).\n */\nexport function FlowChart({\n  points,\n  money,\n  only,\n  className,\n}: {\n  points: FlowPoint[];\n  money: Money;\n  only?: \"income\" | \"expense\";\n  className?: string;\n}) {\n  const showIncome = only !== \"expense\";\n  const showExpense = only !== \"income\";\n  const data = points.map((p) => ({\n    ...p,\n    incomeValue: toNumber(p.income, money.minorUnits),\n    expenseValue: -toNumber(p.expense, money.minorUnits),\n  }));\n  const config = {\n    incomeValue: { label: \"Income\", color: \"var(--color-chart-income)\" },\n    expenseValue: { label: \"Expenses\", color: \"var(--color-chart-expense)\" },\n  } satisfies ChartConfig;\n  return (\n    <div className={cn(\"flex flex-col gap-2\", className)}>\n      <ChartContainer config={config} className=\"aspect-auto h-56 w-full\">\n        <BarChart\n          data={data}\n          stackOffset=\"sign\"\n          margin={{ left: 4, right: 20, top: 8, bottom: 0 }}\n          barCategoryGap=\"20%\"\n        >\n          <CartesianGrid vertical={false} stroke=\"var(--color-seam)\" strokeDasharray=\"2 4\" />\n          <XAxis dataKey=\"label\" {...axisProps} minTickGap={24} />\n          <YAxis {...axisProps} width={48} tickFormatter={(v: number) => compact(Math.abs(v))} />\n          <ReferenceLine y={0} stroke=\"var(--color-hud-mark)\" />\n          <ChartTooltip\n            cursor={{ fill: \"var(--color-shell-recess)\", opacity: 0.6 }}\n            content={({ active, payload }) => {\n              const p = active && payload?.[0]?.payload;\n              if (!p) return null;\n              return (\n                <TooltipCard\n                  title={p.tooltipLabel}\n                  rows={[\n                    ...(showIncome\n                      ? [\n                          {\n                            label: \"Income\",\n                            swatch: \"var(--color-chart-income)\",\n                            value: formatMoney(p.income, money.currency, money.minorUnits, {\n                              sign: \"always\",\n                            }),\n                          },\n                        ]\n                      : []),\n                    ...(showExpense\n                      ? [\n                          {\n                            label: \"Expenses\",\n                            swatch: \"var(--color-chart-expense)\",\n                            value: formatMoney(\n                              0n - (p.expense as bigint),\n                              money.currency,\n                              money.minorUnits,\n                            ),\n                          },\n                        ]\n                      : []),\n                  ]}\n                />\n              );\n            }}\n          />\n          {showIncome && (\n            <Bar\n              dataKey=\"incomeValue\"\n              stackId=\"flow\"\n              fill=\"var(--color-chart-income)\"\n              radius={[4, 4, 0, 0]}\n              isAnimationActive={false}\n            />\n          )}\n          {showExpense && (\n            <Bar\n              dataKey=\"expenseValue\"\n              stackId=\"flow\"\n              fill=\"var(--color-chart-expense)\"\n              radius={[0, 0, 4, 4]}\n              isAnimationActive={false}\n            />\n          )}\n        </BarChart>\n      </ChartContainer>\n      {!only && (\n        <div className=\"flex gap-4 pl-14\">\n          {([\"incomeValue\", \"expenseValue\"] as const).map((k) => (\n            <span key={k} className=\"hud-sm flex items-center gap-1.5 text-ink-soft\">\n              <span className=\"size-2 rounded-xs\" style={{ background: config[k].color }} />\n              {config[k].label}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DonutSlice = {\n  key: string;\n  label: string;\n  color: string;\n  amount: bigint;\n  /** Category icon for the slice's callout. Charts without icons get color dots. */\n  icon?: string;\n};\n\n// Donut callouts, in px: a leader from the ring to a marker (the category icon, or a dot), then\n// the share past the marker. Slices under 2% get none; the tooltip and the list still name them.\nconst callout = {\n  leader: 12,\n  icon: 28, // CategoryIcon \"sm\"\n  dot: 12,\n  gap: 5,\n  charWidth: 7.8, // hud-sm: 10px mono plus tracking\n  textHeight: 12,\n  minShare: 50n, // amount * 50 >= total\n};\nconst donutMaxRadius = 112;\n// Below this the shares drop out first, so the total still fits in the hole.\nconst donutMinRadius = 56;\nconst TAU = 2 * Math.PI;\n\n/** Angles run clockwise from 12 o'clock, like the donut's slices. */\nfunction polar(cx: number, cy: number, r: number, angle: number) {\n  return { x: cx + r * Math.sin(angle), y: cy - r * Math.cos(angle) };\n}\n\n/** Pushes sorted angles apart, the least it can, until neighbours are at least `min` apart. */\nfunction spreadAngles(angles: number[], min: number): number[] {\n  const p = [...angles];\n  const n = p.length;\n  if (n < 2) return p;\n  const step = Math.min(min, TAU / n);\n  for (let round = 0; round < 200; round++) {\n    let moved = false;\n    for (let i = 0; i < n; i++) {\n      const j = (i + 1) % n;\n      const a = p[i] ?? 0;\n      const b = (p[j] ?? 0) + (j === 0 ? TAU : 0);\n      if (b - a < step - 1e-6) {\n        const push = (step - (b - a)) / 2;\n        p[i] = a - push;\n        p[j] = (p[j] ?? 0) + push;\n        moved = true;\n      }\n    }\n    if (!moved) break;\n  }\n  return p;\n}\n\nfunction useWidth() {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const observer = new ResizeObserver(([entry]) => {\n      if (entry) setWidth(Math.floor(entry.contentRect.width));\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n  return [ref, width] as const;\n}\n\n/**\n * Shares of a total, clockwise from 12 o'clock. Up to 7 slices plus \"Other\". Each slice of 2% or\n * more gets a callout outside the ring (its icon and share), so it reads without the legend; the\n * caller still shows the ranked list beside it.\n */\nexport function DonutChart({\n  slices,\n  money,\n  centerLabel,\n  className,\n}: {\n  slices: DonutSlice[];\n  money: Money;\n  centerLabel: string;\n  className?: string;\n}) {\n  const [ref, width] = useWidth();\n  const sorted = [...slices].sort((a, b) =>\n    b.amount > a.amount ? 1 : b.amount < a.amount ? -1 : 0,\n  );\n  const withIcons = slices.some((s) => s.icon);\n  const top = sorted.slice(0, 7);\n  const rest = sorted.slice(7).reduce((s, x) => s + x.amount, 0n);\n  if (rest > 0n) {\n    top.push({\n      key: \"other\",\n      label: \"Other\",\n      color: \"cat-slate\",\n      amount: rest,\n      icon: withIcons ? \"ellipsis\" : undefined,\n    });\n  }\n  const total = sorted.reduce((s, x) => s + x.amount, 0n);\n  const data = top.map((s) => ({ ...s, value: toNumber(s.amount, money.minorUnits) }));\n\n  const sum = data.reduce((s, d) => s + d.value, 0);\n  let acc = 0;\n  const arcs = data.map((d) => {\n    const from = sum > 0 ? (acc / sum) * TAU : 0;\n    acc += d.value;\n    const share = total > 0n ? Number((d.amount * 1000n) / total) / 10 : 0;\n    return { ...d, from, to: sum > 0 ? (acc / sum) * TAU : 0, share: `${share.toFixed(1)}%` };\n  });\n  const labelled = arcs.filter((a) => a.amount * callout.minShare >= total && total > 0n);\n\n  // The ring gets the room the callouts leave, up to its maximum size.\n  const marker = withIcons ? callout.icon : callout.dot;\n  const textWidth = Math.max(0, ...labelled.map((a) => a.share.length)) * callout.charWidth;\n  const withShares = callout.leader + marker + callout.gap + textWidth;\n  const showShares = width === 0 || width / 2 - withShares >= donutMinRadius;\n  const marginX = showShares ? withShares : callout.leader + marker;\n  const marginY = callout.leader + marker + (showShares ? callout.gap + callout.textHeight : 0);\n  const radius =\n    width === 0 ? donutMaxRadius : Math.max(32, Math.min(donutMaxRadius, width / 2 - marginX));\n  const height = Math.round(2 * (radius + marginY));\n  const cx = width / 2;\n  const cy = height / 2;\n  const inner = radius * 0.62;\n\n  const orbit = radius + callout.leader + marker / 2;\n  const clearance = Math.max(marker, showShares ? textWidth : 0) + 6;\n  const angles = spreadAngles(\n    labelled.map((a) => (a.from + a.to) / 2),\n    2 * Math.asin(Math.min(1, clearance / 2 / orbit)),\n  );\n  const callouts = labelled.map((a, i) => {\n    const angle = angles[i] ?? 0;\n    // The leader leaves the ring inside its own slice, as close to the marker as it can.\n    const pad = Math.min(0.05, (a.to - a.from) / 4);\n    const start = polar(cx, cy, radius + 3, Math.min(a.to - pad, Math.max(a.from + pad, angle)));\n    const center = polar(cx, cy, orbit, angle);\n    const dx = start.x - center.x;\n    const dy = start.y - center.y;\n    const len = Math.hypot(dx, dy) || 1;\n    const end = {\n      x: center.x + (dx / len) * (marker / 2 + 1),\n      y: center.y + (dy / len) * (marker / 2 + 1),\n    };\n    // The share sits past the marker, aligned away from the ring.\n    const text = polar(cx, cy, orbit + marker / 2 + callout.gap, angle);\n    const sx = Math.sin(angle);\n    const sy = -Math.cos(angle);\n    const tx = sx > 0.38 ? \"0\" : sx < -0.38 ? \"-100%\" : \"-50%\";\n    const ty = sy > 0.38 ? \"0\" : sy < -0.38 ? \"-100%\" : \"-50%\";\n    return { ...a, start, end, center, text, align: `translate(${tx}, ${ty})` };\n  });\n\n  const totalText = formatMoney(total, money.currency, money.minorUnits, { code: false });\n  // Shrink the total until it fits the hole (mono digits are about 0.6em wide).\n  const totalSize = Math.max(\n    10,\n    Math.min(15, Math.floor((inner * 2 * 0.84) / (totalText.length * 0.62))),\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative w-full [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden\",\n        className,\n      )}\n      style={{ height }}\n    >\n      {width > 0 && (\n        <>\n          <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n            <svg aria-hidden width={width} height={height} className=\"absolute inset-0\">\n              {callouts.map((c) => (\n                <line\n                  key={c.key}\n                  x1={c.start.x}\n                  y1={c.start.y}\n                  x2={c.end.x}\n                  y2={c.end.y}\n                  stroke={categoryColorVar(c.color)}\n                  strokeWidth={1.5}\n                  strokeLinecap=\"round\"\n                />\n              ))}\n              <text\n                x={cx}\n                y={cy - 6}\n                textAnchor=\"middle\"\n                className=\"hud-sm\"\n                fill=\"var(--color-ink-soft)\"\n              >\n                {centerLabel}\n              </text>\n              <text\n                x={cx}\n                y={cy + 14}\n                textAnchor=\"middle\"\n                className=\"tabular\"\n                fontSize={totalSize}\n                fontWeight={700}\n                fill=\"var(--color-ink)\"\n              >\n                {totalText}\n              </text>\n            </svg>\n            {callouts.map((c) => (\n              <div key={c.key}>\n                <span\n                  className=\"absolute -translate-x-1/2 -translate-y-1/2\"\n                  style={{ left: c.center.x, top: c.center.y }}\n                >\n                  {withIcons ? (\n                    <CategoryIcon\n                      icon={c.icon ?? \"circle-help\"}\n                      color={c.color}\n                      size=\"sm\"\n                      className=\"flex\"\n                    />\n                  ) : (\n                    <span\n                      className=\"block size-3 rounded-full\"\n                      style={{ background: categoryColorVar(c.color) }}\n                    />\n                  )}\n                </span>\n                {showShares && (\n                  <span\n                    className=\"hud-sm absolute whitespace-nowrap text-ink\"\n                    style={{ left: c.text.x, top: c.text.y, transform: c.align }}\n                  >\n                    {c.share}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n          <PieChart width={width} height={height} margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>\n            <ChartTooltip\n              content={({ active, payload }) => {\n                const p = active && payload?.[0]?.payload;\n                if (!p) return null;\n                const share = total > 0n ? Number((p.amount * 1000n) / total) / 10 : 0;\n                return (\n                  <TooltipCard\n                    title={p.label}\n                    rows={[\n                      {\n                        label: \"Amount\",\n                        value: formatMoney(p.amount, money.currency, money.minorUnits),\n                      },\n                      { label: \"Share\", value: `${share.toFixed(1)}%` },\n                    ]}\n                  />\n                );\n              }}\n            />\n            <Pie\n              data={data}\n              dataKey=\"value\"\n              nameKey=\"label\"\n              cx={cx}\n              cy={cy}\n              innerRadius={inner}\n              outerRadius={radius}\n              startAngle={90}\n              endAngle={-270}\n              stroke={data.length > 1 ? \"var(--color-shell)\" : \"none\"}\n              strokeWidth={2}\n              isAnimationActive={false}\n            >\n              {data.map((s) => (\n                <Cell key={s.key} fill={categoryColorVar(s.color)} />\n              ))}\n            </Pie>\n          </PieChart>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox } from "radix-ui";
+import * as React from "react";
+declare function Checkbox$1({ className, ...props }: React.ComponentProps<typeof Checkbox.Root>): React.JSX.Element;
+export { Checkbox$1 as Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Checkbox } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+// src/components/checkbox.tsx
+function Checkbox$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-press transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+		})
+	});
+}
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 rounded-[4px] border border-input shadow-press transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAOA,SAASA,WAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,sZACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACN,CAAA;CACP,CAAA;AAE5B"}

package/dist/components/combobox.d.ts

@@ -0,0 +1,32 @@
+export type ComboboxGroup<T> = {
+  heading?: string;
+  options: T[];
+};
+/**
+ * Searchable single-choice picker. Part of the form flow: typing on the focused trigger opens it
+ * with that text as the search, and picking an option moves focus to the next field.
+ */
+export declare function Combobox<T>({ id, value, onChange, options, groups, getKey, getSearchText, renderOption, renderValue, placeholder, searchPlaceholder, emptyText, footer, invalid, disabled, className, contentClassName }: {
+  id?: string;
+  value: string;
+  onChange: (key: string) => void;
+  /** Flat options; or pass `groups` for headed sections. */
+  options?: T[];
+  groups?: ComboboxGroup<T>[];
+  getKey: (option: T) => string;
+  /** Text the search matches against (defaults to the key). */
+  getSearchText?: (option: T) => string;
+  renderOption: (option: T) => React.ReactNode;
+  /** The selected option on the trigger (defaults to renderOption). */
+  renderValue?: (option: T) => React.ReactNode;
+  placeholder?: React.ReactNode;
+  searchPlaceholder?: string;
+  emptyText?: React.ReactNode;
+  /** Shown under the list, e.g. a link to manage the options. */
+  footer?: React.ReactNode;
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+  contentClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=combobox.d.ts.map