@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/donut-chart/donut-chart.js

@@ -0,0 +1,593 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { useCountTo } from "../lib/count-to.js";
+import { REVEAL, SETTLE, SNAPPY, live, retarget } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/donut-chart/donut-chart.tsx
+const OTHER = "__other";
+const TAU = Math.PI * 2;
+/** Neutral steps after the four series colours, and the quietest step for Other. */
+const NEUTRAL = [
+	56,
+	42,
+	32
+];
+const seriesColor = (index) => index < 4 ? `var(--color-chart-${index + 1})` : `color-mix(in oklab, var(--color-foreground) ${NEUTRAL[(index - 4) % NEUTRAL.length]}%, var(--color-surface))`;
+const OTHER_COLOR = "color-mix(in oklab, var(--color-foreground) 26%, var(--color-surface))";
+/** Room outside the ring for the lift; growth, margin, the gap between segments and their corner radius, in pixels. */
+const LIFT = 4;
+const GROW = 2;
+const MARGIN = 7;
+const GAP = 3;
+const CORNER = 4;
+/** Stagger of the trailing edges on the first sweep. */
+const STAGGER_MS = 35;
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const PERCENT = new Intl.NumberFormat("en-US", {
+	style: "percent",
+	maximumFractionDigits: 0
+});
+const shareText = (share) => share > 0 && share < .01 ? "<1%" : PERCENT.format(share);
+const n2 = (value) => (Math.round(value * 100) / 100).toString();
+/** Small parts join one "Other" segment, but only when at least two would; grouping a single part hides it for nothing. */
+function sliceData(data, groupBelow, maxSegments, otherLabel) {
+	const parts = data.filter((item) => item.value > 0);
+	const total = parts.reduce((sum, item) => sum + item.value, 0);
+	if (!total) return [];
+	const ranked = [...parts].sort((a, b) => b.value - a.value);
+	const keep = new Set(ranked.filter((item, rank) => item.value / total >= groupBelow && rank < maxSegments - 1).map((item) => item.key));
+	const rest = parts.filter((item) => !keep.has(item.key));
+	if (rest.length < 2) return parts.map((item) => ({ ...item }));
+	return [...parts.filter((item) => keep.has(item.key)).map((item) => ({ ...item })), {
+		key: OTHER,
+		label: otherLabel,
+		value: rest.reduce((sum, item) => sum + item.value, 0),
+		members: rest
+	}];
+}
+/** Turns of the ring for each slice in data order; a hidden slice closes to a point where it sits. */
+function layout(slices, hidden) {
+	const total = slices.reduce((sum, item) => sum + (hidden.has(item.key) ? 0 : item.value), 0) || 1;
+	let at = 0;
+	return new Map(slices.map((item) => {
+		const arc = {
+			start: at,
+			end: at + (hidden.has(item.key) ? 0 : item.value / total)
+		};
+		at = arc.end;
+		return [item.key, arc];
+	}));
+}
+/** Half the width, in pixels, of a sector's outer edge once the gap is cut; below a couple of pixels a segment fades rather than drawing a hairline. */
+function breadth(R, t0, t1, gap) {
+	const turns = t1 - t0;
+	if (turns >= 1 - 1e-6) return Infinity;
+	return Math.sin(Math.min(turns * Math.PI, Math.PI / 2)) * R - Math.min(gap / 2, (1 - turns) * TAU * R / 2);
+}
+/**
+* An annular sector between two turns of the ring, clockwise from the top, with
+* rounded corners. Its sides run parallel to the radius at a fixed distance, so
+* the gap between neighbours is the same width from the inner edge to the outer.
+* A thin sector narrows to a wedge and then to nothing, so a closing one never pops.
+*/
+function sector(c, R, r, t0, t1, gap, corner) {
+	const turns = t1 - t0;
+	if (turns <= 1e-6) return "";
+	const at = (radius, angle) => `${n2(c + radius * Math.cos(angle))} ${n2(c + radius * Math.sin(angle))}`;
+	if (turns >= 1 - 1e-6) return `M${at(R, -Math.PI / 2)}A${n2(R)} ${n2(R)} 0 1 1 ${at(R, Math.PI / 2)}A${n2(R)} ${n2(R)} 0 1 1 ${at(R, -Math.PI / 2)}ZM${at(r, -Math.PI / 2)}A${n2(r)} ${n2(r)} 0 1 0 ${at(r, Math.PI / 2)}A${n2(r)} ${n2(r)} 0 1 0 ${at(r, -Math.PI / 2)}Z`;
+	const p = Math.min(gap / 2, (1 - turns) * TAU * R / 2);
+	const a0 = t0 * TAU - Math.PI / 2;
+	const a1 = t1 * TAU - Math.PI / 2;
+	const half = (a1 - a0) / 2;
+	const s = Math.sin(Math.min(half, Math.PI / 2));
+	if (s * R <= p + 1e-6) return "";
+	const side = (t, angle, sign) => `${n2(c + t * Math.cos(angle) - sign * p * Math.sin(angle))} ${n2(c + t * Math.sin(angle) + sign * p * Math.cos(angle))}`;
+	const band = (R - r) / 2;
+	const ro = Math.max(0, Math.min(corner, band, s >= .9999 ? Infinity : (s * R - p) / (1 + s)));
+	const dO = Math.asin(Math.min(1, (p + ro) / (R - ro)));
+	const tO = Math.sqrt(Math.max(0, (R - ro) ** 2 - (p + ro) ** 2));
+	const bigO = a1 - a0 - 2 * dO > Math.PI ? 1 : 0;
+	let d = `M${side(tO, a0, 1)}`;
+	if (ro > .01) d += `A${n2(ro)} ${n2(ro)} 0 0 1 ${at(R, a0 + dO)}`;
+	d += `A${n2(R)} ${n2(R)} 0 ${bigO} 1 ${at(R, a1 - dO)}`;
+	if (ro > .01) d += `A${n2(ro)} ${n2(ro)} 0 0 1 ${side(tO, a1, -1)}`;
+	if (s * r > p + 1e-6 || s >= .9999) {
+		const ri = Math.max(0, Math.min(corner, band, s >= .9999 ? Infinity : (s * r - p) / (1 - s)));
+		const dI = Math.asin(Math.min(1, (p + ri) / (r + ri)));
+		const tI = Math.sqrt(Math.max(0, (r + ri) ** 2 - (p + ri) ** 2));
+		const bigI = a1 - a0 - 2 * dI > Math.PI ? 1 : 0;
+		d += `L${side(tI, a1, -1)}`;
+		if (ri > .01) d += `A${n2(ri)} ${n2(ri)} 0 0 1 ${at(r, a1 - dI)}`;
+		d += `A${n2(r)} ${n2(r)} 0 ${bigI} 0 ${at(r, a0 + dI)}`;
+		if (ri > .01) d += `A${n2(ri)} ${n2(ri)} 0 0 1 ${side(tI, a0, 1)}`;
+	} else d += `L${at(p / s, (a0 + a1) / 2)}`;
+	return `${d}Z`;
+}
+/**
+* A number that counts to each new value on the smooth spring. useCountTo counts
+* in whole steps, so a fraction (a share) is counted in ten-thousandths.
+*/
+function Count({ value, format }) {
+	const fine = !Number.isInteger(value);
+	const shown = useCountTo(fine ? value * 1e4 : value);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: format(fine ? shown / 1e4 : shown) });
+}
+const DonutChart = forwardRef(function DonutChart({ data, label, unit = "", formatValue = (value) => GROUPED.format(value), totalLabel = "Total", center = "total", size = 208, thickness = 24, groupBelow = .04, maxSegments = 6, otherLabel = "Other", activeKey, defaultActiveKey = null, onActiveChange, hiddenKeys, defaultHiddenKeys, onHiddenKeysChange, legendAction = "toggle", legend = true, emptyLabel = "No data yet", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const legendId = useId();
+	const slices = sliceData(data, groupBelow, maxSegments, otherLabel);
+	const [ownHidden, setOwnHidden] = useState(defaultHiddenKeys ?? []);
+	const hiddenList = hiddenKeys ?? ownHidden;
+	const hidden = new Set(hiddenList.filter((key) => slices.some((item) => item.key === key)));
+	const visible = slices.filter((item) => !hidden.has(item.key));
+	const total = visible.reduce((sum, item) => sum + item.value, 0);
+	const signature = slices.map((item) => `${item.key}:${item.value}${hidden.has(item.key) ? "h" : ""}`).join("|");
+	const suffix = unit ? ` ${unit}` : "";
+	const [palette, setPalette] = useState(() => new Map(data.map((item, index) => [item.key, index])));
+	if (data.some((item) => !palette.has(item.key))) {
+		const next = new Map(palette);
+		for (const item of data) if (!next.has(item.key)) next.set(item.key, next.size);
+		setPalette(next);
+	}
+	const colorFor = (item) => item.color ?? (item.key === OTHER ? OTHER_COLOR : seriesColor(palette.get(item.key) ?? 0));
+	const [drawn, setDrawn] = useState(slices);
+	const [seen, setSeen] = useState(signature);
+	if (seen !== signature) {
+		setSeen(signature);
+		const next = [...slices];
+		drawn.forEach((item, index) => {
+			if (next.some((slice) => slice.key === item.key)) return;
+			const before = drawn.slice(0, index).reverse().find((prior) => next.some((slice) => slice.key === prior.key));
+			next.splice(before ? next.findIndex((slice) => slice.key === before.key) + 1 : 0, 0, {
+				...item,
+				value: 0
+			});
+		});
+		setDrawn(next);
+	}
+	const [ownActive, setOwnActive] = useState(defaultActiveKey);
+	const selected = activeKey !== void 0 ? activeKey : ownActive;
+	const [preview, setPreview] = useState(null);
+	const select = (key) => {
+		if (activeKey === void 0) setOwnActive(key);
+		onActiveChange?.(key);
+	};
+	const current = [preview, selected].find((key) => key && visible.some((item) => item.key === key)) ?? null;
+	const activeSlice = visible.find((item) => item.key === current) ?? null;
+	const [announcement, setAnnouncement] = useState("");
+	const setHidden = (key) => {
+		const isHidden = hidden.has(key);
+		if (!isHidden && visible.length <= 1) return;
+		const next = isHidden ? hiddenList.filter((item) => item !== key) : [...hiddenList, key];
+		if (hiddenKeys === void 0) setOwnHidden(next);
+		onHiddenKeysChange?.(next);
+		const item = slices.find((slice) => slice.key === key);
+		const nextTotal = slices.reduce((sum, slice) => sum + (next.includes(slice.key) ? 0 : slice.value), 0);
+		const totalText = center === "total" ? ` ${totalLabel} ${formatValue(nextTotal)}${suffix}.` : "";
+		if (item) setAnnouncement(`${item.label} ${isHidden ? "shown" : "hidden"}.${totalText}`);
+	};
+	const c = size / 2;
+	const outer = c - MARGIN;
+	const inner = Math.max(8, outer - thickness);
+	const corner = Math.min(CORNER, thickness / 4);
+	const geometry = useRef({
+		c,
+		outer,
+		inner,
+		corner
+	});
+	const segments = useRef(/* @__PURE__ */ new Map());
+	const svg = useRef(null);
+	/** One writer: every path's shape, opacity and lift, straight onto the elements. */
+	const paint = useCallback(() => {
+		const root = svg.current;
+		if (!root) return;
+		const { c, outer, inner, corner } = geometry.current;
+		for (const node of root.querySelectorAll("[data-key]")) {
+			const segment = segments.current.get(node.dataset.key);
+			if (!segment) {
+				node.setAttribute("d", "");
+				continue;
+			}
+			const start = segment.start.value;
+			const end = segment.end.value;
+			const lift = Math.max(0, segment.lift.value);
+			const R = outer + lift * GROW;
+			node.setAttribute("d", sector(c, R, inner - lift * GROW * .5, start, end, GAP, corner));
+			node.setAttribute("fill-opacity", n2(Math.min(1, Math.max(0, (breadth(R, start, end, GAP) - 1) / 3))));
+			const middle = (start + end) / 2 * TAU - Math.PI / 2;
+			node.setAttribute("transform", `translate(${n2(Math.cos(middle) * lift * LIFT)} ${n2(Math.sin(middle) * lift * LIFT)})`);
+		}
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		geometry.current = {
+			c,
+			outer,
+			inner,
+			corner
+		};
+		paint();
+	});
+	useEffect(() => () => {
+		for (const segment of segments.current.values()) {
+			segment.start.stop();
+			segment.end.stop();
+			segment.lift.stop();
+		}
+	}, []);
+	const [shown, setShown] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setShown(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setShown(true);
+		}, { threshold: .35 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const targets = useRef(/* @__PURE__ */ new Map());
+	const latest = useRef({
+		drawn,
+		slices
+	});
+	useIsomorphicLayoutEffect(() => {
+		latest.current = {
+			drawn,
+			slices
+		};
+	});
+	useEffect(() => {
+		if (!shown) return;
+		const { drawn: order, slices: now } = latest.current;
+		const goal = layout(now, hidden);
+		targets.current = goal;
+		const first = segments.current.size === 0;
+		const place = (index) => {
+			const before = order.slice(0, index).reverse().find((item) => goal.has(item.key));
+			return before ? goal.get(before.key).end : 0;
+		};
+		const drop = (key) => {
+			if (latest.current.slices.some((item) => item.key === key)) return;
+			segments.current.delete(key);
+			setDrawn((list) => list.filter((item) => item.key !== key));
+		};
+		order.forEach((item, index) => {
+			const leaving = !goal.has(item.key);
+			const to = goal.get(item.key) ?? {
+				start: place(index),
+				end: place(index)
+			};
+			let segment = segments.current.get(item.key);
+			if (!segment) {
+				const prior = order.slice(0, index).reverse().map((entry) => segments.current.get(entry.key)).find(Boolean);
+				const from = first ? 0 : prior ? prior.end.value : 0;
+				segment = {
+					start: live(from),
+					end: live(from),
+					lift: live(0)
+				};
+				segments.current.set(item.key, segment);
+			}
+			if (first) {
+				retarget(segment.start, to.start, REVEAL, paint);
+				retarget(segment.end, to.end, REVEAL, paint, 40 + index * STAGGER_MS);
+				return;
+			}
+			retarget(segment.start, to.start, SETTLE, paint);
+			retarget(segment.end, to.end, SETTLE, paint, 0, leaving ? () => drop(item.key) : void 0);
+		});
+		paint();
+	}, [
+		shown,
+		signature,
+		paint
+	]);
+	useEffect(() => {
+		for (const [key, segment] of segments.current) retarget(segment.lift, key === current ? 1 : 0, SNAPPY, paint);
+	}, [
+		current,
+		drawn,
+		shown,
+		paint
+	]);
+	const hit = (event) => {
+		const box = svg.current?.getBoundingClientRect();
+		if (!box?.width) return void 0;
+		const scale = size / box.width;
+		const x = (event.clientX - box.left) * scale - c;
+		const y = (event.clientY - box.top) * scale - c;
+		const radius = Math.hypot(x, y);
+		if (radius < inner - 6 || radius > c) return null;
+		let turn = (Math.atan2(y, x) + Math.PI / 2) / TAU;
+		if (turn < 0) turn += 1;
+		for (const [key, arc] of targets.current) if (arc.end > arc.start && turn >= arc.start && turn < arc.end && visible.some((item) => item.key === key)) return key;
+	};
+	const onRingMove = (event) => {
+		if (event.pointerType !== "mouse") return;
+		const key = hit(event);
+		if (key !== void 0 && key !== preview) setPreview(key);
+	};
+	const onRingClick = (event) => {
+		const key = hit(event);
+		if (key) select(selected === key ? null : key);
+	};
+	const format = (value) => `${formatValue(value)}${suffix}`;
+	const showShare = center === "total";
+	const shareOf = (value) => showShare ? `, ${shareText(value / (total || 1))}` : "";
+	const describe = (item) => `${item.label}, ${format(item.value)}${shareOf(item.value)}${item.members ? `. Includes ${item.members.map((member) => member.label).join(", ")}` : ""}`;
+	const rows = useRef([]);
+	const step = (key, index, count) => {
+		return {
+			ArrowDown: index + 1,
+			ArrowRight: index + 1,
+			ArrowUp: index - 1,
+			ArrowLeft: index - 1,
+			Home: 0,
+			End: count - 1
+		}[key];
+	};
+	const onLegendKey = (event, index) => {
+		if (event.key === "Escape" && selected) {
+			event.preventDefault();
+			select(null);
+			return;
+		}
+		const next = step(event.key, index, slices.length);
+		if (next === void 0) return;
+		event.preventDefault();
+		rows.current[(next + slices.length) % slices.length]?.focus();
+	};
+	const onRingKey = (event) => {
+		if (!visible.length) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			setPreview(null);
+			if (selected) select(null);
+			return;
+		}
+		if ((event.key === "Enter" || event.key === " ") && current) {
+			event.preventDefault();
+			select(selected === current ? null : current);
+			return;
+		}
+		const index = visible.findIndex((item) => item.key === current);
+		const next = step(event.key, index < 0 ? event.key.endsWith("Up") || event.key.endsWith("Left") ? 0 : -1 : index, visible.length);
+		if (next === void 0) return;
+		event.preventDefault();
+		const item = visible[(next + visible.length) % visible.length];
+		setPreview(item.key);
+		setAnnouncement(describe(item));
+	};
+	const onLegendBlur = (event) => {
+		if (!(event.relatedTarget instanceof Node && event.currentTarget.closest("ul")?.contains(event.relatedTarget))) setPreview(null);
+	};
+	const rest = center === "total" ? {
+		label: totalLabel,
+		value: total
+	} : center === "none" ? {
+		label: " ",
+		value: ""
+	} : center;
+	const identity = activeSlice ? activeSlice.key : "__total";
+	const custom = typeof center === "object" && total > 0;
+	const readouts = [{
+		key: "__total",
+		label: total ? rest.label : emptyLabel,
+		value: total ? rest.value : 0,
+		meta: null,
+		custom
+	}, ...slices.map((item) => ({
+		key: item.key,
+		label: item.label,
+		value: item.value,
+		meta: item,
+		custom: false
+	}))];
+	const activeIndex = Math.max(0, readouts.findIndex((item) => item.key === identity));
+	const restValue = (value) => typeof value === "number" ? format(value) : value;
+	const restText = center === "total" ? `${totalLabel} ${format(total)}. ` : center === "none" ? "" : `${[center.label, restValue(center.value)].filter(Boolean).join(" ")}. `;
+	const summary = total ? `${label}. ${restText}${visible.map(describe).join(". ")}.` : `${label}. ${emptyLabel}.`;
+	const members = (item) => item.members ? item.members.length > 2 ? `${item.members.slice(0, 2).map((member) => member.label).join(", ")} and ${item.members.length - 2} more` : item.members.map((member) => member.label).join(" and ") : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "donut-chart",
+		"aria-label": label,
+		"data-legend": legend || void 0,
+		className: cn("donut-chart box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "donut-chart-ring",
+				className: "donut-chart-ring",
+				style: {
+					width: size,
+					"--inner": `${inner * 2 / size * 100}%`
+				},
+				tabIndex: legend ? void 0 : 0,
+				role: legend ? void 0 : "application",
+				"aria-label": legend ? void 0 : `${label}. Use the arrow keys to read each segment.`,
+				onKeyDown: legend ? void 0 : onRingKey,
+				onBlur: legend ? void 0 : () => setPreview(null),
+				children: [/* @__PURE__ */ jsxs("svg", {
+					ref: svg,
+					viewBox: `0 0 ${size} ${size}`,
+					"aria-hidden": "true",
+					focusable: "false",
+					onPointerMove: onRingMove,
+					onPointerLeave: () => setPreview(null),
+					onClick: onRingClick,
+					"data-hovering": current !== null || void 0,
+					className: "block size-full overflow-visible data-[hovering]:cursor-pointer",
+					children: [/* @__PURE__ */ jsx("circle", {
+						className: "donut-chart-track",
+						cx: c,
+						cy: c,
+						r: (outer + inner) / 2,
+						strokeWidth: outer - inner,
+						"data-idle": !shown || !total || void 0
+					}), drawn.map((item) => /* @__PURE__ */ jsx("path", {
+						"data-key": item.key,
+						"data-active": item.key === current || void 0,
+						"data-dim": current !== null && item.key !== current || void 0,
+						className: "donut-chart-segment",
+						style: { "--slice": colorFor(item) }
+					}, item.key))]
+				}), /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					"data-center": center === "total" || center === "none" ? center : "custom",
+					className: "donut-chart-center",
+					children: readouts.map((item, index) => /* @__PURE__ */ jsxs("span", {
+						"data-place": Math.sign(index - activeIndex),
+						className: "donut-chart-readout",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "block w-full min-h-5 truncate text-xs text-text-secondary",
+								children: item.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "block max-w-full min-h-8 truncate text-h3 font-medium tabular-nums",
+								children: typeof item.value === "string" ? item.value || " " : item.value || item.meta || item.custom ? /* @__PURE__ */ jsx(Count, {
+									value: item.value,
+									format: formatValue
+								}) : " "
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "block w-full min-h-5 truncate text-xs tabular-nums text-muted-foreground",
+								children: item.meta && showShare ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx(Count, {
+										value: total && !hidden.has(item.key) ? item.meta.value / total : 0,
+										format: shareText
+									}),
+									" ",
+									"of ",
+									totalLabel.toLowerCase()
+								] }) : typeof item.value === "number" ? unit || " " : " "
+							})
+						]
+					}, item.key))
+				})]
+			}),
+			legend && slices.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				id: legendId,
+				"aria-label": `${label}, segments${legendAction === "toggle" ? ". Press a segment to show or hide it" : ""}`,
+				onPointerLeave: () => setPreview(null),
+				className: "m-0 -mb-0.5 grid list-none p-0",
+				children: slices.map((item, index) => {
+					const off = hidden.has(item.key);
+					return /* @__PURE__ */ jsx("li", {
+						className: "overflow-hidden motion-safe:animate-fade-in",
+						children: /* @__PURE__ */ jsxs("button", {
+							ref: (node) => {
+								rows.current[index] = node;
+							},
+							type: "button",
+							"data-slot": "donut-chart-row",
+							"aria-pressed": legendAction === "toggle" ? !off : selected === item.key,
+							"aria-label": off ? `${item.label}, hidden` : describe(item),
+							"data-active": item.key === current || void 0,
+							"data-pinned": selected === item.key || void 0,
+							"data-hidden": off || void 0,
+							"data-share": showShare ? void 0 : "none",
+							style: { "--slice": colorFor(item) },
+							onClick: () => legendAction === "toggle" ? setHidden(item.key) : select(selected === item.key ? null : item.key),
+							onPointerEnter: (event) => {
+								if (event.pointerType === "mouse") setPreview(off ? null : item.key);
+							},
+							onFocus: (event) => {
+								if (event.currentTarget.matches(":focus-visible")) setPreview(off ? null : item.key);
+							},
+							onBlur: onLegendBlur,
+							onKeyDown: (event) => onLegendKey(event, index),
+							className: "donut-chart-row",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "donut-chart-dot"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "grid min-w-0",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "donut-chart-row-label truncate",
+										children: item.label
+									}), item.members ? /* @__PURE__ */ jsx("span", {
+										className: "truncate text-xs text-muted-foreground",
+										children: members(item)
+									}) : null]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "donut-chart-row-value justify-self-end tabular-nums text-text-secondary",
+									children: /* @__PURE__ */ jsx(Count, {
+										value: item.value,
+										format: formatValue
+									})
+								}),
+								showShare ? /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "donut-chart-row-value justify-self-end font-medium tabular-nums",
+									children: /* @__PURE__ */ jsx(Count, {
+										value: off || !total ? 0 : item.value / total,
+										format: shareText
+									})
+								}) : null
+							]
+						})
+					}, item.key);
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: announcement
+			}),
+			total > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Segment"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Value"
+						}),
+						showShare ? /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Share"
+						}) : null
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: visible.flatMap((item) => item.members ? item.members.map((member) => ({
+						key: member.key,
+						label: `${member.label} (${otherLabel})`,
+						value: member.value
+					})) : [item]).map((item) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("td", { children: format(item.value) }),
+						showShare ? /* @__PURE__ */ jsx("td", { children: shareText(item.value / total) }) : null
+					] }, item.key)) })
+				] })
+			}) : null
+		]
+	});
+});
+//#endregion
+export { DonutChart };
+
+//# sourceMappingURL=donut-chart.js.map