@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/sparkline/sparkline.d.ts

@@ -0,0 +1,46 @@
+//#region src/sparkline/sparkline.d.ts
+/**
+ * Sparkline: a small trend line with its label, an optional headline value and
+ * a line of context (the change). The line draws itself left to right the first
+ * time it is seen, the fill follows the pen, and the end dot lands. New data
+ * morphs the line from the shape on screen. Hovering, dragging or the arrow
+ * keys scrub through the points: a cursor rides the line, the stretch after it
+ * dims, and the headline and context show that point.
+ *
+ * Plain SVG, plain CSS transitions and one small spring tween for the two
+ * things CSS cannot animate (the shape, and the cursor riding it). No chart or
+ * animation library.
+ */
+export declare const sparklineVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type SparklineTone = "accent" | "success" | "warning" | "danger";
+export interface SparklineProps {
+  /** The series, oldest first. One value draws a flat line. */
+  data: number[];
+  /** What the line is. Its accessible name starts with it. */
+  label: string;
+  /** The headline figure, such as "1,284". Scrubbing replaces it with the scrubbed point. */
+  value?: string;
+  /** Context beside the headline, such as "+12% this week". Coloured by `tone`. */
+  change?: string;
+  /** @default "accent" */
+  tone?: SparklineTone;
+  /** Aspect of the drawing; the line fills the width and keeps this ratio. @default 160 */
+  width?: number;
+  /** @default 52 */
+  height?: number;
+  /** One label per point, such as a date. It replaces the change while that point is scrubbed. */
+  labels?: string[];
+  /** Formats a scrubbed point for the headline. Defaults to a grouped number. */
+  formatValue?: (value: number, index: number) => string;
+  /** A faint fill under the line. @default true */
+  area?: boolean;
+  /** Pointer and keyboard scrubbing through the points. @default true */
+  interactive?: boolean;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+/** The first draw: one stroke, slow at both ends like a pen (480ms x 1.75). */
+export declare const SPARKLINE_DRAW_MS = 840;
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=sparkline.d.ts.map

package/dist/sparkline/sparkline.js

@@ -0,0 +1,390 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { SMOOTH, SNAPPY, tween } from "../lib/spring-tween.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/sparkline/sparkline.tsx
+/**
+* Sparkline: a small trend line with its label, an optional headline value and
+* a line of context (the change). The line draws itself left to right the first
+* time it is seen, the fill follows the pen, and the end dot lands. New data
+* morphs the line from the shape on screen. Hovering, dragging or the arrow
+* keys scrub through the points: a cursor rides the line, the stretch after it
+* dims, and the headline and context show that point.
+*
+* Plain SVG, plain CSS transitions and one small spring tween for the two
+* things CSS cannot animate (the shape, and the cursor riding it). No chart or
+* animation library.
+*/
+const sparklineVariants = cva("grid min-w-0 gap-3 m-0 box-border font-sans text-foreground");
+/** Space kept above the highest and below the lowest point, and half the line width. */
+const INSET = 5;
+const CAP = 1.25;
+const GRID = Array.from({ length: 161 }, (_, index) => index / 160);
+const GROUPED = new Intl.NumberFormat("en-US");
+/** The first draw: one stroke, slow at both ends like a pen (480ms x 1.75). */
+const SPARKLINE_DRAW_MS = 840;
+/** A smooth line through every point, sampled densely in unit space (x and y 0 to 1, y up). Monotone cubic tangents keep it from swinging past the data. */
+function curveFor(data) {
+	const min = Math.min(...data);
+	const span = Math.max(...data) - min;
+	const ys = data.map((value) => span ? (value - min) / span : .5);
+	const last = ys.length - 1;
+	const step = 1 / last;
+	const slopes = ys.slice(1).map((y, index) => (y - ys[index]) / step);
+	const tangents = ys.map((_, index) => index === 0 || index === last ? slopes[0] : (Math.sign(slopes[index - 1]) + Math.sign(slopes[index])) * Math.min(Math.abs(slopes[index - 1]), Math.abs(slopes[index]), Math.abs(slopes[index - 1] + slopes[index]) / 4) || 0);
+	if (last > 1) {
+		tangents[0] = (3 * slopes[0] - tangents[1]) / 2;
+		tangents[last] = (3 * slopes[last - 1] - tangents[last - 1]) / 2;
+	}
+	const samples = Math.max(1, Math.min(16, Math.round(128 / last)));
+	const points = [];
+	for (let index = 0; index < last; index++) for (let sample = 0; sample < samples; sample++) {
+		const t = sample / samples;
+		const t2 = t * t;
+		const t3 = t2 * t;
+		const y = (2 * t3 - 3 * t2 + 1) * ys[index] + (t3 - 2 * t2 + t) * step * tangents[index] + (3 * t2 - 2 * t3) * ys[index + 1] + (t3 - t2) * step * tangents[index + 1];
+		points.push([(index + t) * step, Math.min(1, Math.max(0, y))]);
+	}
+	points.push([1, ys[last]]);
+	return points;
+}
+/** Height of the sampled line at x, straight between samples. */
+function heightAt(shape, x) {
+	let low = 0;
+	let high = shape.length - 1;
+	if (x <= shape[low][0]) return shape[low][1];
+	if (x >= shape[high][0]) return shape[high][1];
+	while (high - low > 1) {
+		const middle = low + high >> 1;
+		if (shape[middle][0] < x) low = middle;
+		else high = middle;
+	}
+	const [x0, y0] = shape[low];
+	const [x1, y1] = shape[high];
+	return x1 === x0 ? y1 : y0 + (y1 - y0) * (x - x0) / (x1 - x0);
+}
+/** Every drawn string for one frame, in the chart's own pixels so strokes and dots stay round at any width. */
+function geometryOf(shape, w, h, at) {
+	const toY = (y) => INSET + (1 - y) * (h - 10);
+	const pairs = shape.map(([x, y]) => `${(x * w).toFixed(2)},${toY(y).toFixed(2)}`);
+	const cx = at * w;
+	const cy = toY(heightAt(shape, at));
+	return {
+		line: pairs.join(" "),
+		trail: `M${pairs.join("L")}`,
+		fill: `M${pairs.join("L")}L${w},${h}L0,${h}Z`,
+		dot: `${cx},${cy} ${cx},${cy}`,
+		cx
+	};
+}
+const TONE = {
+	accent: "text-primary-strong [--spark-stroke:var(--color-primary)]",
+	success: "text-success-strong [--spark-stroke:var(--color-success-strong)]",
+	warning: "text-warning-strong [--spark-stroke:var(--color-warning-strong)]",
+	danger: "text-destructive-strong [--spark-stroke:var(--color-destructive-strong)]"
+};
+const Sparkline = forwardRef(function Sparkline({ data, label, value, change, tone = "accent", width = 160, height = 52, labels, formatValue, area = true, interactive = true, className }, ref) {
+	const series = data.length > 1 ? data : [data[0] ?? 0, data[0] ?? 0];
+	const last = series.length - 1;
+	const key = series.join(",");
+	const target = useMemo(() => curveFor(key.split(",").map(Number)), [key]);
+	const uid = `spark${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const plot = useRef(null);
+	const svg = useRef(null);
+	const shape = useRef(target);
+	const cursorAt = useRef(1);
+	const box = useRef({
+		w: width,
+		h: height
+	});
+	const [size, setSize] = useState({
+		w: width,
+		h: height
+	});
+	const [drawn, setDrawn] = useState(false);
+	const [landed, setLanded] = useState(false);
+	const [active, setActive] = useState(null);
+	const index = active === null ? null : Math.min(active, last);
+	const [moved, setMoved] = useState({
+		index,
+		dir: 1
+	});
+	if (moved.index !== index) setMoved({
+		index,
+		dir: index === null || moved.index === null ? 1 : Math.sign(index - moved.index) || 1
+	});
+	const [first] = useState(() => geometryOf(target, width, height, 1));
+	/** One writer for every drawn attribute, straight onto the elements: no re-render per frame. */
+	const paint = useCallback(() => {
+		const root = svg.current;
+		if (!root) return;
+		const { w, h } = box.current;
+		const g = geometryOf(shape.current, w, h, cursorAt.current);
+		const q = (name) => root.querySelector(`[data-part="${name}"]`);
+		q("line")?.setAttribute("points", g.line);
+		q("trail")?.setAttribute("d", g.trail);
+		q("area")?.setAttribute("d", g.fill);
+		q("dot")?.setAttribute("points", g.dot);
+		q("lit")?.setAttribute("width", String(g.cx + CAP + 16));
+		q("dim")?.setAttribute("x", String(g.cx + CAP));
+		q("cursor")?.setAttribute("x1", String(g.cx));
+		q("cursor")?.setAttribute("x2", String(g.cx));
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		const node = plot.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const w = node.clientWidth;
+			if (!w || Math.abs(box.current.w - w) < .5) return;
+			box.current = {
+				w,
+				h: w * height / width
+			};
+			setSize(box.current);
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [height, width]);
+	useIsomorphicLayoutEffect(paint, [size, paint]);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node) return;
+		if (prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setDrawn(true);
+			setLanded(true);
+			return;
+		}
+		let timer = 0;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setDrawn(true);
+			timer = window.setTimeout(() => setLanded(true), 840);
+		}, { threshold: .5 });
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			window.clearTimeout(timer);
+		};
+	}, []);
+	useEffect(() => {
+		const from = shape.current;
+		if (from === target) return;
+		const xs = [.../* @__PURE__ */ new Set([...GRID, ...target.map(([x]) => x)])].sort((a, b) => a - b);
+		const start = xs.map((x) => heightAt(from, x));
+		const goal = xs.map((x) => heightAt(target, x));
+		return tween(SMOOTH, (p) => {
+			shape.current = xs.map((x, at) => [x, start[at] + (goal[at] - start[at]) * p]);
+			paint();
+		}, () => {
+			shape.current = target;
+			paint();
+		});
+	}, [paint, target]);
+	useEffect(() => {
+		const from = cursorAt.current;
+		const to = index === null ? 1 : index / last;
+		if (from === to) return;
+		return tween(SNAPPY, (p) => {
+			cursorAt.current = from + (to - from) * p;
+			paint();
+		});
+	}, [
+		index,
+		last,
+		paint
+	]);
+	const scrubbing = index !== null;
+	const format = (at) => formatValue ? formatValue(series[at], at) : GROUPED.format(series[at]);
+	const point = format(index ?? last);
+	const when = labels?.[index ?? last];
+	const headline = value === void 0 ? void 0 : scrubbing ? point : value;
+	const aside = index === null ? change ?? "" : value === void 0 ? [point, when].filter(Boolean).join(" · ") : when ?? `${index + 1} of ${last + 1}`;
+	const description = `${label}: ${value ?? series[last]}. ${change ?? ""}`.trim();
+	const pointAt = (clientX) => {
+		const rect = plot.current?.getBoundingClientRect();
+		return rect?.width ? Math.max(0, Math.min(last, Math.round((clientX - rect.left) / rect.width * last))) : last;
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape" && scrubbing) {
+			event.preventDefault();
+			setActive(null);
+			return;
+		}
+		const from = index ?? last;
+		const page = Math.max(1, Math.round((last + 1) / 6));
+		const next = {
+			ArrowLeft: from - 1,
+			ArrowDown: from - 1,
+			ArrowRight: from + 1,
+			ArrowUp: from + 1,
+			PageDown: from - page,
+			PageUp: from + page,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		setActive(Math.max(0, Math.min(last, next)));
+	};
+	const scrub = interactive ? {
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": `${label}, explore values`,
+		"aria-valuemin": 1,
+		"aria-valuemax": last + 1,
+		"aria-valuenow": (index ?? last) + 1,
+		"aria-valuetext": `${when ?? (index === null ? "Latest" : `Point ${index + 1} of ${last + 1}`)}: ${point}`,
+		onPointerDown: (event) => setActive(pointAt(event.clientX)),
+		onPointerMove: (event) => {
+			if (event.pointerType === "mouse" || event.buttons) setActive(pointAt(event.clientX));
+		},
+		onPointerUp: (event) => {
+			if (event.pointerType !== "mouse") setActive(null);
+		},
+		onPointerLeave: () => setActive(null),
+		onPointerCancel: () => setActive(null),
+		onBlur: () => setActive(null),
+		onKeyDown
+	} : {};
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "sparkline",
+		"data-drawn": drawn || void 0,
+		"data-landed": landed || void 0,
+		"data-scrubbing": scrubbing || void 0,
+		"aria-label": description,
+		className: cn(sparklineVariants(), className),
+		children: [/* @__PURE__ */ jsxs("figcaption", {
+			className: "flex min-w-0 items-baseline gap-2 text-sm text-text-secondary",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "sparkline-label",
+					className: "min-w-0 truncate",
+					children: label
+				}),
+				headline === void 0 ? null : /* @__PURE__ */ jsx("strong", {
+					"data-slot": "sparkline-value",
+					className: "ms-auto text-lg font-medium tabular-nums text-foreground",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: headline,
+						dir: moved.dir,
+						motion: "rise",
+						children: headline
+					})
+				}),
+				/* @__PURE__ */ jsx("small", {
+					"data-slot": "sparkline-change",
+					className: cnAll("flex-none text-xs font-medium tabular-nums sparkline-change", scrubbing ? "text-text-secondary" : TONE[tone]),
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: aside,
+						dir: moved.dir,
+						motion: "rise",
+						children: aside
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: plot,
+			"data-slot": "sparkline-plot",
+			"data-interactive": interactive || void 0,
+			className: "sparkline-plot",
+			...scrub,
+			children: /* @__PURE__ */ jsxs("svg", {
+				ref: svg,
+				viewBox: `0 0 ${size.w} ${size.h}`,
+				"aria-hidden": "true",
+				focusable: "false",
+				className: cnAll("block h-auto w-full overflow-visible", TONE[tone]),
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [
+						/* @__PURE__ */ jsx("clipPath", {
+							id: `${uid}-lit`,
+							clipPathUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ jsx("rect", {
+								"data-part": "lit",
+								x: -16,
+								y: -16,
+								width: first.cx + CAP + 16,
+								height: size.h + 32
+							})
+						}),
+						/* @__PURE__ */ jsx("clipPath", {
+							id: `${uid}-dim`,
+							clipPathUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ jsx("rect", {
+								"data-part": "dim",
+								x: first.cx + CAP,
+								y: -16,
+								width: size.w + 32,
+								height: size.h + 32
+							})
+						}),
+						/* @__PURE__ */ jsx("clipPath", {
+							id: `${uid}-fill`,
+							clipPathUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ jsx("rect", {
+								"data-part": "reveal",
+								className: "sparkline-reveal",
+								x: -16,
+								y: -16,
+								height: size.h + 32,
+								style: { width: drawn ? size.w + 32 : 0 }
+							})
+						})
+					] }),
+					area ? /* @__PURE__ */ jsx("path", {
+						"data-part": "area",
+						className: "sparkline-area",
+						d: first.fill,
+						clipPath: `url(#${uid}-fill)`
+					}) : null,
+					/* @__PURE__ */ jsx("line", {
+						className: "sparkline-baseline",
+						x1: "0",
+						y1: size.h - .5,
+						x2: size.w,
+						y2: size.h - .5
+					}),
+					/* @__PURE__ */ jsx("path", {
+						"data-part": "trail",
+						className: "sparkline-trail",
+						d: first.trail,
+						clipPath: `url(#${uid}-dim)`
+					}),
+					/* @__PURE__ */ jsx("polyline", {
+						"data-part": "line",
+						className: "sparkline-line",
+						points: first.line,
+						pathLength: 1,
+						clipPath: `url(#${uid}-lit)`
+					}),
+					/* @__PURE__ */ jsx("line", {
+						"data-part": "cursor",
+						className: "sparkline-cursor",
+						x1: first.cx,
+						x2: first.cx,
+						y1: 0,
+						y2: size.h
+					}),
+					/* @__PURE__ */ jsx("polyline", {
+						"data-part": "dot",
+						className: "sparkline-dot",
+						points: first.dot
+					})
+				]
+			})
+		})]
+	});
+});
+//#endregion
+export { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants };
+
+//# sourceMappingURL=sparkline.js.map

package/dist/sparkline/sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.js","names":[],"sources":["../../src/sparkline/sparkline.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SMOOTH, SNAPPY, tween } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Sparkline: a small trend line with its label, an optional headline value and\n * a line of context (the change). The line draws itself left to right the first\n * time it is seen, the fill follows the pen, and the end dot lands. New data\n * morphs the line from the shape on screen. Hovering, dragging or the arrow\n * keys scrub through the points: a cursor rides the line, the stretch after it\n * dims, and the headline and context show that point.\n *\n * Plain SVG, plain CSS transitions and one small spring tween for the two\n * things CSS cannot animate (the shape, and the cursor riding it). No chart or\n * animation library.\n */\nexport const sparklineVariants = cva(\"grid min-w-0 gap-3 m-0 box-border font-sans text-foreground\");\n\nexport type SparklineTone = \"accent\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface SparklineProps {\n  /** The series, oldest first. One value draws a flat line. */\n  data: number[];\n  /** What the line is. Its accessible name starts with it. */\n  label: string;\n  /** The headline figure, such as \"1,284\". Scrubbing replaces it with the scrubbed point. */\n  value?: string;\n  /** Context beside the headline, such as \"+12% this week\". Coloured by `tone`. */\n  change?: string;\n  /** @default \"accent\" */\n  tone?: SparklineTone;\n  /** Aspect of the drawing; the line fills the width and keeps this ratio. @default 160 */\n  width?: number;\n  /** @default 52 */\n  height?: number;\n  /** One label per point, such as a date. It replaces the change while that point is scrubbed. */\n  labels?: string[];\n  /** Formats a scrubbed point for the headline. Defaults to a grouped number. */\n  formatValue?: (value: number, index: number) => string;\n  /** A faint fill under the line. @default true */\n  area?: boolean;\n  /** Pointer and keyboard scrubbing through the points. @default true */\n  interactive?: boolean;\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\ntype Point = [number, number];\n\n/** Space kept above the highest and below the lowest point, and half the line width. */\nconst INSET = 5;\nconst CAP = 1.25;\nconst GRID = Array.from({ length: 161 }, (_, index) => index / 160);\nconst GROUPED = new Intl.NumberFormat(\"en-US\");\n/** The first draw: one stroke, slow at both ends like a pen (480ms x 1.75). */\nexport const SPARKLINE_DRAW_MS = 840;\n\n/** A smooth line through every point, sampled densely in unit space (x and y 0 to 1, y up). Monotone cubic tangents keep it from swinging past the data. */\nfunction curveFor(data: number[]): Point[] {\n  const min = Math.min(...data);\n  const span = Math.max(...data) - min;\n  const ys = data.map((value) => (span ? (value - min) / span : 0.5));\n  const last = ys.length - 1;\n  const step = 1 / last;\n  const slopes = ys.slice(1).map((y, index) => (y - ys[index]!) / step);\n  const tangents = ys.map((_, index) =>\n    index === 0 || index === last\n      ? slopes[0]!\n      : (Math.sign(slopes[index - 1]!) + Math.sign(slopes[index]!)) *\n          Math.min(\n            Math.abs(slopes[index - 1]!),\n            Math.abs(slopes[index]!),\n            Math.abs(slopes[index - 1]! + slopes[index]!) / 4,\n          ) || 0,\n  );\n  if (last > 1) {\n    tangents[0] = (3 * slopes[0]! - tangents[1]!) / 2;\n    tangents[last] = (3 * slopes[last - 1]! - tangents[last - 1]!) / 2;\n  }\n  const samples = Math.max(1, Math.min(16, Math.round(128 / last)));\n  const points: Point[] = [];\n  for (let index = 0; index < last; index++) {\n    for (let sample = 0; sample < samples; sample++) {\n      const t = sample / samples;\n      const t2 = t * t;\n      const t3 = t2 * t;\n      const y =\n        (2 * t3 - 3 * t2 + 1) * ys[index]! +\n        (t3 - 2 * t2 + t) * step * tangents[index]! +\n        (3 * t2 - 2 * t3) * ys[index + 1]! +\n        (t3 - t2) * step * tangents[index + 1]!;\n      points.push([(index + t) * step, Math.min(1, Math.max(0, y))]);\n    }\n  }\n  points.push([1, ys[last]!]);\n  return points;\n}\n\n/** Height of the sampled line at x, straight between samples. */\nfunction heightAt(shape: Point[], x: number) {\n  let low = 0;\n  let high = shape.length - 1;\n  if (x <= shape[low]![0]) return shape[low]![1];\n  if (x >= shape[high]![0]) return shape[high]![1];\n  while (high - low > 1) {\n    const middle = (low + high) >> 1;\n    if (shape[middle]![0] < x) low = middle;\n    else high = middle;\n  }\n  const [x0, y0] = shape[low]!;\n  const [x1, y1] = shape[high]!;\n  return x1 === x0 ? y1 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0);\n}\n\n/** Every drawn string for one frame, in the chart's own pixels so strokes and dots stay round at any width. */\nfunction geometryOf(shape: Point[], w: number, h: number, at: number) {\n  const toY = (y: number) => INSET + (1 - y) * (h - INSET * 2);\n  const pairs = shape.map(([x, y]) => `${(x * w).toFixed(2)},${toY(y).toFixed(2)}`);\n  const cx = at * w;\n  const cy = toY(heightAt(shape, at));\n  return {\n    line: pairs.join(\" \"),\n    trail: `M${pairs.join(\"L\")}`,\n    fill: `M${pairs.join(\"L\")}L${w},${h}L0,${h}Z`,\n    dot: `${cx},${cy} ${cx},${cy}`,\n    cx,\n  };\n}\n\nconst TONE: Record<SparklineTone, string> = {\n  accent: \"text-primary-strong [--spark-stroke:var(--color-primary)]\",\n  success: \"text-success-strong [--spark-stroke:var(--color-success-strong)]\",\n  warning: \"text-warning-strong [--spark-stroke:var(--color-warning-strong)]\",\n  danger: \"text-destructive-strong [--spark-stroke:var(--color-destructive-strong)]\",\n};\n\nexport const Sparkline = forwardRef<HTMLElement, SparklineProps>(function Sparkline(\n  {\n    data,\n    label,\n    value,\n    change,\n    tone = \"accent\",\n    width = 160,\n    height = 52,\n    labels,\n    formatValue,\n    area = true,\n    interactive = true,\n    className,\n  },\n  ref,\n) {\n  const series = data.length > 1 ? data : [data[0] ?? 0, data[0] ?? 0];\n  const last = series.length - 1;\n  const key = series.join(\",\");\n  const target = useMemo(() => curveFor(key.split(\",\").map(Number)), [key]);\n  const uid = `spark${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const plot = useRef<HTMLDivElement>(null);\n  const svg = useRef<SVGSVGElement>(null);\n  const shape = useRef(target);\n  const cursorAt = useRef(1);\n  const box = useRef({ w: width, h: height });\n  const [size, setSize] = useState({ w: width, h: height });\n  const [drawn, setDrawn] = useState(false);\n  const [landed, setLanded] = useState(false);\n  const [active, setActive] = useState<number | null>(null);\n  const index = active === null ? null : Math.min(active, last);\n  const [moved, setMoved] = useState({ index, dir: 1 });\n  if (moved.index !== index) {\n    setMoved({\n      index,\n      dir: index === null || moved.index === null ? 1 : Math.sign(index - moved.index) || 1,\n    });\n  }\n\n  // The first frame, also what the server renders.\n  const [first] = useState(() => geometryOf(target, width, height, 1));\n\n  /** One writer for every drawn attribute, straight onto the elements: no re-render per frame. */\n  const paint = useCallback(() => {\n    const root = svg.current;\n    if (!root) return;\n    const { w, h } = box.current;\n    const g = geometryOf(shape.current, w, h, cursorAt.current);\n    const q = (name: string) => root.querySelector<SVGElement>(`[data-part=\"${name}\"]`);\n    q(\"line\")?.setAttribute(\"points\", g.line);\n    q(\"trail\")?.setAttribute(\"d\", g.trail);\n    q(\"area\")?.setAttribute(\"d\", g.fill);\n    q(\"dot\")?.setAttribute(\"points\", g.dot);\n    q(\"lit\")?.setAttribute(\"width\", String(g.cx + CAP + 16));\n    q(\"dim\")?.setAttribute(\"x\", String(g.cx + CAP));\n    q(\"cursor\")?.setAttribute(\"x1\", String(g.cx));\n    q(\"cursor\")?.setAttribute(\"x2\", String(g.cx));\n  }, []);\n\n  // The chart draws in its own pixels: measure the width, keep the height in proportion.\n  useIsomorphicLayoutEffect(() => {\n    const node = plot.current;\n    if (!node || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const w = node.clientWidth;\n      if (!w || Math.abs(box.current.w - w) < 0.5) return;\n      box.current = { w, h: (w * height) / width };\n      setSize(box.current);\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [height, width]);\n  useIsomorphicLayoutEffect(paint, [size, paint]);\n\n  // The line draws once it is half in view; the fill follows the pen, then the end dot lands.\n  useEffect(() => {\n    const node = figure.current;\n    if (!node) return;\n    if (prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setDrawn(true);\n      setLanded(true);\n      return;\n    }\n    let timer = 0;\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setDrawn(true);\n        timer = window.setTimeout(() => setLanded(true), SPARKLINE_DRAW_MS);\n      },\n      { threshold: 0.5 },\n    );\n    observer.observe(node);\n    return () => {\n      observer.disconnect();\n      window.clearTimeout(timer);\n    };\n  }, []);\n\n  // New data morphs the line from the shape on screen, sampled on shared x positions so a series that gains or loses points still flows.\n  useEffect(() => {\n    const from = shape.current;\n    if (from === target) return;\n    const xs = [...new Set([...GRID, ...target.map(([x]) => x)])].sort((a, b) => a - b);\n    const start = xs.map((x) => heightAt(from, x));\n    const goal = xs.map((x) => heightAt(target, x));\n    return tween(\n      SMOOTH,\n      (p) => {\n        shape.current = xs.map((x, at): Point => [x, start[at]! + (goal[at]! - start[at]!) * p]);\n        paint();\n      },\n      () => {\n        shape.current = target;\n        paint();\n      },\n    );\n  }, [paint, target]);\n\n  // The cursor springs to the scrubbed point and rides the line; leaving sends it home to the latest value.\n  useEffect(() => {\n    const from = cursorAt.current;\n    const to = index === null ? 1 : index / last;\n    if (from === to) return;\n    return tween(SNAPPY, (p) => {\n      cursorAt.current = from + (to - from) * p;\n      paint();\n    });\n  }, [index, last, paint]);\n\n  const scrubbing = index !== null;\n  const format = (at: number) =>\n    formatValue ? formatValue(series[at]!, at) : GROUPED.format(series[at]!);\n  const point = format(index ?? last);\n  const when = labels?.[index ?? last];\n  const headline = value === undefined ? undefined : scrubbing ? point : value;\n  const aside =\n    index === null\n      ? (change ?? \"\")\n      : value === undefined\n        ? [point, when].filter(Boolean).join(\" · \")\n        : (when ?? `${index + 1} of ${last + 1}`);\n  const description = `${label}: ${value ?? series[last]}. ${change ?? \"\"}`.trim();\n\n  const pointAt = (clientX: number) => {\n    const rect = plot.current?.getBoundingClientRect();\n    return rect?.width\n      ? Math.max(0, Math.min(last, Math.round(((clientX - rect.left) / rect.width) * last)))\n      : last;\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"Escape\" && scrubbing) {\n      event.preventDefault();\n      setActive(null);\n      return;\n    }\n    const from = index ?? last;\n    const page = Math.max(1, Math.round((last + 1) / 6));\n    const next = (\n      {\n        ArrowLeft: from - 1,\n        ArrowDown: from - 1,\n        ArrowRight: from + 1,\n        ArrowUp: from + 1,\n        PageDown: from - page,\n        PageUp: from + page,\n        Home: 0,\n        End: last,\n      } as Record<string, number>\n    )[event.key];\n    if (next === undefined) return;\n    event.preventDefault();\n    setActive(Math.max(0, Math.min(last, next)));\n  };\n  const scrub = interactive\n    ? {\n        role: \"slider\",\n        tabIndex: 0,\n        \"aria-label\": `${label}, explore values`,\n        \"aria-valuemin\": 1,\n        \"aria-valuemax\": last + 1,\n        \"aria-valuenow\": (index ?? last) + 1,\n        \"aria-valuetext\": `${when ?? (index === null ? \"Latest\" : `Point ${index + 1} of ${last + 1}`)}: ${point}`,\n        onPointerDown: (event: PointerEvent<HTMLDivElement>) => setActive(pointAt(event.clientX)),\n        onPointerMove: (event: PointerEvent<HTMLDivElement>) => {\n          if (event.pointerType === \"mouse\" || event.buttons) setActive(pointAt(event.clientX));\n        },\n        onPointerUp: (event: PointerEvent<HTMLDivElement>) => {\n          if (event.pointerType !== \"mouse\") setActive(null);\n        },\n        onPointerLeave: () => setActive(null),\n        onPointerCancel: () => setActive(null),\n        onBlur: () => setActive(null),\n        onKeyDown,\n      }\n    : {};\n\n  return (\n    <figure\n      ref={refs}\n      data-slot=\"sparkline\"\n      data-drawn={drawn || undefined}\n      data-landed={landed || undefined}\n      data-scrubbing={scrubbing || undefined}\n      aria-label={description}\n      className={cn(sparklineVariants(), className)}\n    >\n      <figcaption className=\"flex min-w-0 items-baseline gap-2 text-sm text-text-secondary\">\n        <span data-slot=\"sparkline-label\" className=\"min-w-0 truncate\">\n          {label}\n        </span>\n        {headline === undefined ? null : (\n          <strong\n            data-slot=\"sparkline-value\"\n            className=\"ms-auto text-lg font-medium tabular-nums text-foreground\"\n          >\n            <SwapText swapKey={headline} dir={moved.dir} motion=\"rise\">\n              {headline}\n            </SwapText>\n          </strong>\n        )}\n        <small\n          data-slot=\"sparkline-change\"\n          // The scrubbed date is context, not a change, so it turns neutral.\n          className={cnAll(\n            \"flex-none text-xs font-medium tabular-nums sparkline-change\",\n            scrubbing ? \"text-text-secondary\" : TONE[tone],\n          )}\n        >\n          <SwapText swapKey={aside} dir={moved.dir} motion=\"rise\">\n            {aside}\n          </SwapText>\n        </small>\n      </figcaption>\n      <div\n        ref={plot}\n        data-slot=\"sparkline-plot\"\n        data-interactive={interactive || undefined}\n        className=\"sparkline-plot\"\n        {...scrub}\n      >\n        <svg\n          ref={svg}\n          viewBox={`0 0 ${size.w} ${size.h}`}\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          className={cnAll(\"block h-auto w-full overflow-visible\", TONE[tone])}\n        >\n          <defs>\n            <clipPath id={`${uid}-lit`} clipPathUnits=\"userSpaceOnUse\">\n              <rect data-part=\"lit\" x={-16} y={-16} width={first.cx + CAP + 16} height={size.h + 32} />\n            </clipPath>\n            <clipPath id={`${uid}-dim`} clipPathUnits=\"userSpaceOnUse\">\n              <rect data-part=\"dim\" x={first.cx + CAP} y={-16} width={size.w + 32} height={size.h + 32} />\n            </clipPath>\n            <clipPath id={`${uid}-fill`} clipPathUnits=\"userSpaceOnUse\">\n              <rect\n                data-part=\"reveal\"\n                className=\"sparkline-reveal\"\n                x={-16}\n                y={-16}\n                height={size.h + 32}\n                style={{ width: drawn ? size.w + 32 : 0 }}\n              />\n            </clipPath>\n          </defs>\n          {area ? (\n            <path data-part=\"area\" className=\"sparkline-area\" d={first.fill} clipPath={`url(#${uid}-fill)`} />\n          ) : null}\n          <line\n            className=\"sparkline-baseline\"\n            x1=\"0\"\n            y1={size.h - 0.5}\n            x2={size.w}\n            y2={size.h - 0.5}\n          />\n          {/* While scrubbing, the stretch after the cursor dims, as if the later points have not happened yet. */}\n          <path data-part=\"trail\" className=\"sparkline-trail\" d={first.trail} clipPath={`url(#${uid}-dim)`} />\n          <polyline\n            data-part=\"line\"\n            className=\"sparkline-line\"\n            points={first.line}\n            pathLength={1}\n            clipPath={`url(#${uid}-lit)`}\n          />\n          <line data-part=\"cursor\" className=\"sparkline-cursor\" x1={first.cx} x2={first.cx} y1={0} y2={size.h} />\n          {/* A zero-length round-capped stroke is a true circle in the line's colour; it rests on the latest point and becomes the scrub handle. */}\n          <polyline data-part=\"dot\" className=\"sparkline-dot\" points={first.dot} />\n        </svg>\n      </div>\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/split-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { SplitBar, SplitBarProps, SplitSegment } from "./split-bar.js";
+export { SplitBar, type SplitBarProps, type SplitSegment };

package/dist/split-bar/index.js

@@ -0,0 +1,2 @@
+import { SplitBar } from "./split-bar.js";
+export { SplitBar };

package/dist/split-bar/split-bar.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties } from "react";
+//#region src/split-bar/split-bar.d.ts
+/**
+ * SplitBar: one 100% bar split into shares, for traffic sources, budgets,
+ * storage or votes. Resting on a segment (or arrowing onto it) widens it a little
+ * (a small one widens enough to show its own label) while the others give way
+ * proportionally and lose their colour, and the readout above names it: share,
+ * value and unit.
+ *
+ * A label sits inside its segment when it fits, as name and percent or percent
+ * alone, and otherwise moves to a lane under the bar on a soft leader line,
+ * pushed apart so labels never overlap. The legend switches segments off and on:
+ * an off segment collapses in place and the rest reflow to fill the bar, their
+ * percentages rolling digit by digit to the new shares. New data does the same,
+ * so switching a period is one continuous reflow. The last visible segment
+ * cannot be switched off: its legend item shakes and the reason is announced.
+ *
+ * Segment edges, leader lines and outside labels are written straight to the DOM
+ * by one small spring tween (a new target mid flight retargets from where the
+ * edges are); name, fit and colour changes are CSS transitions.
+ */
+export interface SplitSegment {
+  /** Stable identity. Segments are matched by id when the data changes. */
+  id: string;
+  label: string;
+  /** Shares are each value over the total of the visible segments; zero and negative values are left out. */
+  value: number;
+  /** Any CSS colour. Defaults to chart-1 to chart-4 in order, then two neutrals meant for catch-all shares. */
+  color?: string;
+}
+export interface SplitBarProps {
+  /** The shares in display order. */
+  segments: readonly SplitSegment[];
+  /** Heading above the bar and the accessible name unless `label` is set. */
+  title?: string;
+  /** One line under the title. */
+  description?: string;
+  /** Number format for values in the readout, such as currency for a budget. Shares always read as percentages with one decimal. */
+  format?: Intl.NumberFormatOptions;
+  /** Word after values in the readout, such as "sessions". */
+  unit?: string;
+  /** Label of the readout when nothing is highlighted. @default "Total" */
+  totalLabel?: string;
+  /** Ids of segments that are switched off (controlled). */
+  hidden?: readonly string[];
+  /** Ids switched off at first (uncontrolled). */
+  defaultHidden?: readonly string[];
+  /** Called with the new list when the legend or the keyboard switches a segment. */
+  onHiddenChange?: (hidden: string[]) => void;
+  /** The legend. Each item toggles its segment and highlights it on hover. @default true */
+  legend?: boolean;
+  /** Formatting locale. Fixed by default so server and client render the same digits. @default "en-US" */
+  locale?: string;
+  /** Accessible name. Defaults to the title. */
+  label?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+  style?: CSSProperties;
+}
+export declare const SplitBar: import("react").ForwardRefExoticComponent<SplitBarProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=split-bar.d.ts.map