ajo-ui 0.1.0

package/dist/chart.js

@@ -0,0 +1,790 @@
+import { text } from "./utils.js";
+import { n as position, t as pointReference } from "./chunks/position-D6_i_SRn.js";
+import { callRef, clamp, dom, id, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/chart.tsx
+var ChartContext = context(null);
+/** Read the stable identity resolved by the nearest ChartContainer. */
+var ChartIdContext = context(null);
+var DEFAULT_MARGIN = {
+	bottom: 32,
+	left: 40,
+	right: 16,
+	top: 16
+};
+var DEFAULT_WIDTH = 640;
+var DEFAULT_HEIGHT = 240;
+var resolveRootChartId = (value, fallback) => value ? `chart-${encodeURIComponent(String(value))}` : fallback;
+var resolve = (value, state) => typeof value === "function" ? value(state) : value;
+var number = (value) => {
+	const next = Number(value);
+	return Number.isFinite(next) ? next : void 0;
+};
+var colorFor = (key, index, config, palette, override) => override ?? (config[key]?.color || config[key]?.theme ? `var(--color-${key})` : palette[index % palette.length]);
+var seriesEntries = (config, series, data, xKey, palette) => {
+	return (series?.length ? series : Object.keys(config).length ? Object.keys(config) : Object.keys(data?.[0] ?? {}).filter((key) => key !== xKey && number(data?.[0]?.[key]) != null)).map((item, index) => {
+		const entry = typeof item === "string" ? { key: item } : item;
+		return {
+			...entry,
+			color: colorFor(entry.key, index, config, palette, entry.color),
+			label: entry.label ?? config[entry.key]?.label ?? entry.key
+		};
+	});
+};
+var defaultFormatLabel = (value, _row, index) => value == null ? `Item ${index + 1}` : String(value);
+var numberFormatter;
+var defaultFormatValue = (value) => (numberFormatter ??= new Intl.NumberFormat()).format(value);
+var labelFor = (chart, row, index) => chart.formatLabel(chart.xKey ? row[chart.xKey] : void 0, row, index);
+var payloadFor = (chart, index, series = chart.series, colors) => {
+	const row = chart.data[index] ?? {};
+	return series.map((entry, entryIndex) => {
+		const value = number(row[entry.key]);
+		if (value == null) return void 0;
+		return {
+			color: colors?.[entryIndex] ?? entry.color,
+			formattedValue: chart.formatValue(value, entry.key, row, index),
+			index,
+			key: entry.key,
+			label: entry.label,
+			row,
+			value
+		};
+	}).filter(Boolean);
+};
+var sameActiveKeys = (current, index, keys) => current?.index === index && current.items.length === keys.length && current.items.every((item, itemIndex) => item.key === keys[itemIndex]);
+var sameActiveTarget = (current, index, keys) => current?.index === index && current.items.every((item) => keys.includes(item.key));
+var sameActiveValue = (current, next) => {
+	if (!current || !next) return current === next;
+	return sameActiveKeys(current, next.index, next.items.map((item) => item.key));
+};
+var extent = (chart) => {
+	const values = chart.data.flatMap((row) => chart.series.map((entry) => number(row[entry.key])).filter((value) => value != null));
+	const min = Math.min(0, ...values);
+	const max = Math.max(0, ...values);
+	return min === max ? {
+		max: max + 1,
+		min: min - 1
+	} : {
+		max,
+		min
+	};
+};
+var scaled = (value, min, max, top, bottom) => bottom - (value - min) / (max - min) * (bottom - top);
+var plotBox = (chart) => ({
+	bottom: chart.height - chart.margin.bottom,
+	left: chart.margin.left,
+	right: chart.width - chart.margin.right,
+	top: chart.margin.top
+});
+var clientPoint = (svg, x, y) => {
+	if (!svg.isConnected) return null;
+	const matrix = svg.getScreenCTM();
+	if (!matrix) return null;
+	const point = {
+		x: matrix.a * x + matrix.c * y + matrix.e,
+		y: matrix.b * x + matrix.d * y + matrix.f
+	};
+	return Number.isFinite(point.x) && Number.isFinite(point.y) ? point : null;
+};
+var svgPoint = (svg, clientX, clientY) => {
+	const matrix = svg.getScreenCTM();
+	if (!matrix) return null;
+	const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+	if (!Number.isFinite(determinant) || determinant === 0) return null;
+	const x = clientX - matrix.e;
+	const y = clientY - matrix.f;
+	return {
+		x: (matrix.d * x - matrix.c * y) / determinant,
+		y: (-matrix.b * x + matrix.a * y) / determinant
+	};
+};
+var referencePoint = (svg, point) => ({
+	svg,
+	x: point.x,
+	y: point.y
+});
+var plotRef = (chart, ref) => {
+	let current = null;
+	return (element) => {
+		if (current && current !== element) chart.releasePlot(current);
+		current = element;
+		callRef(ref, element);
+	};
+};
+var svgFromEvent = (event) => {
+	const current = event.currentTarget;
+	if (current instanceof SVGSVGElement) return current;
+	if (current?.ownerSVGElement) return current.ownerSVGElement;
+	const target = event.target;
+	if (target instanceof SVGSVGElement) return target;
+	return target?.ownerSVGElement ?? null;
+};
+var renderIcon = (icon, classes) => typeof icon === "function" ? icon({ class: classes }) : icon;
+var axis = (chart, type, yTicks, min, max, axisStroke, axisStrokeOpacity, gridStroke) => {
+	const box = plotBox(chart);
+	const groupWidth = (box.right - box.left) / chart.data.length;
+	const xStep = chart.data.length > 1 ? (box.right - box.left) / (chart.data.length - 1) : 0;
+	const rowCenter = (index) => type === "bar" ? box.left + groupWidth * index + groupWidth / 2 : chart.data.length > 1 ? box.left + xStep * index : (box.left + box.right) / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "chart-axis",
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: box.left,
+				x2: box.right,
+				y1: box.bottom,
+				y2: box.bottom,
+				stroke: axisStroke,
+				"stroke-opacity": axisStrokeOpacity
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: box.left,
+				x2: box.left,
+				y1: box.top,
+				y2: box.bottom,
+				stroke: axisStroke,
+				"stroke-opacity": axisStrokeOpacity
+			}),
+			yTicks.map((tick) => {
+				const y = scaled(tick, min, max, box.top, box.bottom);
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+					x1: box.left,
+					x2: box.right,
+					y1: y,
+					y2: y,
+					stroke: gridStroke
+				}), /* @__PURE__ */ jsx("text", {
+					x: box.left - 8,
+					y: y + 3,
+					fill: "currentColor",
+					style: "text-anchor:end",
+					children: chart.formatValue(tick, "", {}, 0)
+				})] }, tick);
+			}),
+			chart.data.map((row, index) => {
+				return /* @__PURE__ */ jsx("text", {
+					x: rowCenter(index),
+					y: chart.height - 8,
+					fill: "currentColor",
+					style: "text-anchor:middle",
+					children: text(labelFor(chart, row, index)).slice(0, 12)
+				}, index);
+			})
+		]
+	});
+};
+var linePath = (points) => points.map((point, index) => `${index ? "L" : "M"} ${point.x} ${point.y}`).join(" ");
+var areaPath = (points, baseline) => points.length ? `${linePath(points)} L ${points[points.length - 1].x} ${baseline} L ${points[0].x} ${baseline} Z` : "";
+var anglePoint = (center, radius, angle) => ({
+	x: center + radius * Math.cos(angle),
+	y: center + radius * Math.sin(angle)
+});
+var slicePath = (center, radius, innerRadius, start, end) => {
+	const outerStart = anglePoint(center, radius, start);
+	const outerEnd = anglePoint(center, radius, end);
+	const large = end - start > Math.PI ? 1 : 0;
+	if (innerRadius > 0) {
+		const innerStart = anglePoint(center, innerRadius, start);
+		const innerEnd = anglePoint(center, innerRadius, end);
+		return [
+			`M ${outerStart.x} ${outerStart.y}`,
+			`A ${radius} ${radius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}`,
+			`L ${innerEnd.x} ${innerEnd.y}`,
+			`A ${innerRadius} ${innerRadius} 0 ${large} 0 ${innerStart.x} ${innerStart.y}`,
+			"Z"
+		].join(" ");
+	}
+	return [
+		`M ${center} ${center}`,
+		`L ${outerStart.x} ${outerStart.y}`,
+		`A ${radius} ${radius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}`,
+		"Z"
+	].join(" ");
+};
+var ChartContainerRoot = function* () {
+	let active = null;
+	const fallbackId = id("chart");
+	let tooltip = null;
+	const root = dom(this) ? this : null;
+	let activePoint = null;
+	let lastClientPoint = null;
+	const reference = root ? pointReference(() => activePoint?.svg ?? root, () => {
+		const next = activePoint ? clientPoint(activePoint.svg, activePoint.x, activePoint.y) : null;
+		if (next) lastClientPoint = next;
+		if (lastClientPoint) return lastClientPoint;
+		const rect = root.getBoundingClientRect();
+		return {
+			x: rect.left,
+			y: rect.top
+		};
+	}) : null;
+	const geometry = position(this, {
+		profile: "chart",
+		boundary: () => root,
+		elements: () => ({
+			reference,
+			floating: tooltip,
+			arrow: null
+		})
+	});
+	let geometryScheduled = false;
+	let geometryRestart = false;
+	const report = (error) => {
+		if (this.signal.aborted) return;
+		queueMicrotask(() => {
+			if (!this.signal.aborted) this.throw(error);
+		});
+	};
+	const scheduleGeometry = (restart = false) => {
+		geometryRestart ||= restart;
+		if (geometryScheduled || this.signal.aborted) return;
+		geometryScheduled = true;
+		queueMicrotask(() => {
+			geometryScheduled = false;
+			const shouldRestart = geometryRestart;
+			geometryRestart = false;
+			if (!active || !activePoint || !tooltip || this.signal.aborted) return;
+			(shouldRestart ? geometry.start() : geometry.update()).catch(report);
+		});
+	};
+	const setTooltip = (element) => {
+		if (element === tooltip) return;
+		geometry.stop();
+		tooltip = element;
+		if (active && activePoint && element) scheduleGeometry(true);
+	};
+	const movePoint = (next) => {
+		if (!next) return 0;
+		if (activePoint?.svg === next.svg && activePoint.x === next.x && activePoint.y === next.y) return 0;
+		const retargeted = activePoint != null && activePoint.svg !== next.svg;
+		activePoint = next;
+		return retargeted ? 2 : 1;
+	};
+	const setActive = (next, at) => {
+		const movement = next ? movePoint(at) : 0;
+		const retargeted = movement === 2;
+		if (retargeted) geometry.stop();
+		if (!next) {
+			activePoint = null;
+			lastClientPoint = null;
+			geometry.stop();
+		}
+		if (sameActiveValue(active, next)) {
+			if (next && movement) scheduleGeometry(movement === 2);
+			return;
+		}
+		const first = active == null && next != null;
+		this.next(() => active = next);
+		if (next && at) scheduleGeometry(first || retargeted);
+	};
+	const clearActive = () => setActive(null);
+	const releasePlot = (plot) => {
+		if (this.signal.aborted || activePoint?.svg !== plot) return;
+		const releasedPoint = activePoint;
+		geometry.stop();
+		activePoint = null;
+		lastClientPoint = null;
+		queueMicrotask(() => {
+			if (this.signal.aborted || activePoint) return;
+			if (plot.isConnected) {
+				activePoint = releasedPoint;
+				if (active && tooltip) scheduleGeometry(true);
+				return;
+			}
+			if (active) clearActive();
+		});
+	};
+	for (const args of this) {
+		const chartId = args.chartId ?? resolveRootChartId(args.rootId, fallbackId);
+		const data = args.data ?? [];
+		const width = args.width ?? DEFAULT_WIDTH;
+		const height = args.height ?? DEFAULT_HEIGHT;
+		const margin = {
+			...DEFAULT_MARGIN,
+			...args.margin ?? {}
+		};
+		const type = args.type ?? "bar";
+		const chart = {
+			active,
+			clearActive,
+			config: args.config,
+			data,
+			description: args.description,
+			formatLabel: args.formatLabel ?? defaultFormatLabel,
+			formatValue: args.formatValue ?? defaultFormatValue,
+			height,
+			id: chartId,
+			label: args.label,
+			margin,
+			palette: args.palette,
+			releasePlot,
+			series: seriesEntries(args.config, args.series, data, args.xKey, args.palette),
+			setActive,
+			setTooltip,
+			type,
+			width,
+			xKey: args.xKey
+		};
+		ChartContext(chart);
+		ChartIdContext(chart.id);
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled chart root provider for config, data, tooltip, and legend state. */
+var ChartContainer = ({ chartId, children, class: classes, config, data, description, formatLabel, formatValue, height, id, label, margin, palette, series, type, width, xKey, ...attrs }) => {
+	return /* @__PURE__ */ jsx(ChartContainerRoot, {
+		...statefulRootAttrs(attrs),
+		chartId,
+		config,
+		data,
+		description,
+		formatLabel,
+		formatValue,
+		height,
+		margin,
+		palette,
+		rootId: id,
+		series,
+		type,
+		width,
+		xKey,
+		"attr:class": classes,
+		"attr:data-slot": "chart",
+		"attr:id": id,
+		label,
+		children
+	});
+};
+var ChartPlot = ({ axis: showAxis = true, axisStroke, axisStrokeOpacity, barClass, class: classes, grid: showGrid = true, gridStroke, pointClass, pointFill, ref, type, ...attrs }) => {
+	const chart = ChartContext();
+	if (!chart || !chart.data.length || !chart.series.length) return null;
+	const box = plotBox(chart);
+	const { max, min } = extent(chart);
+	const yTicks = Array.from({ length: 4 }, (_, index) => min + (max - min) / 3 * index);
+	const groupWidth = (box.right - box.left) / chart.data.length;
+	const xStep = chart.data.length > 1 ? (box.right - box.left) / (chart.data.length - 1) : 0;
+	const baseline = scaled(0, min, max, box.top, box.bottom);
+	const rowCenter = (index) => type === "bar" ? box.left + groupWidth * index + groupWidth / 2 : chart.data.length > 1 ? box.left + xStep * index : (box.left + box.right) / 2;
+	const seriesKeys = chart.series.map((entry) => entry.key);
+	const rowY = (index) => Math.min(...chart.series.map((entry) => scaled(number(chart.data[index]?.[entry.key]) ?? 0, min, max, box.top, box.bottom)));
+	const rowPoint = (index) => ({
+		x: rowCenter(index),
+		y: rowY(index)
+	});
+	const points = (entry) => chart.data.map((row, index) => ({
+		x: rowCenter(index),
+		y: scaled(number(row[entry.key]) ?? 0, min, max, box.top, box.bottom)
+	}));
+	const activate = (index, at) => {
+		if (sameActiveTarget(chart.active, index, seriesKeys)) {
+			chart.setActive(chart.active, at);
+			return;
+		}
+		const items = payloadFor(chart, index);
+		if (!items.length) {
+			chart.clearActive();
+			return;
+		}
+		const point = rowPoint(index);
+		chart.setActive({
+			index,
+			items,
+			label: labelFor(chart, chart.data[index], index),
+			x: point.x,
+			y: point.y
+		}, at);
+	};
+	const pointerMove = (event) => {
+		const svg = event.currentTarget;
+		const cursor = svgPoint(svg, event.clientX, event.clientY);
+		if (!cursor) {
+			chart.clearActive();
+			return;
+		}
+		const sx = cursor.x;
+		const index = type === "bar" ? clamp(Math.floor((sx - box.left) / groupWidth), 0, chart.data.length - 1) : xStep === 0 ? 0 : clamp(Math.round((sx - box.left) / xStep), 0, chart.data.length - 1);
+		activate(index, referencePoint(svg, rowPoint(index)));
+	};
+	const focusIn = (event) => {
+		const target = event.target;
+		const index = Number(target?.getAttribute("data-chart-index"));
+		const svg = svgFromEvent(event);
+		if (!svg || !Number.isInteger(index)) return;
+		activate(index, referencePoint(svg, rowPoint(index)));
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...attrs,
+		"aria-describedby": chart.description ? `${chart.id}-description` : void 0,
+		"aria-label": chart.label,
+		class: classes,
+		"data-slot": `chart-${type}`,
+		height: chart.height,
+		role: "img",
+		ref: plotRef(chart, ref),
+		viewBox: `0 0 ${chart.width} ${chart.height}`,
+		width: "100%",
+		xmlns: "http://www.w3.org/2000/svg",
+		"set:onfocusin": focusIn,
+		"set:onpointerleave": chart.clearActive,
+		"set:onpointermove": pointerMove,
+		children: [
+			chart.label ? /* @__PURE__ */ jsx("title", { children: chart.label }) : null,
+			chart.description ? /* @__PURE__ */ jsx("desc", {
+				id: `${chart.id}-description`,
+				children: chart.description
+			}) : null,
+			showGrid ? axis(chart, type, yTicks, min, max, axisStroke, axisStrokeOpacity, gridStroke) : showAxis ? axis(chart, type, [], min, max, axisStroke, axisStrokeOpacity, gridStroke) : null,
+			type === "bar" ? chart.data.map((row, index) => {
+				const barWidth = clamp(groupWidth * .68 / chart.series.length, 6, 42);
+				const groupStart = box.left + groupWidth * index + (groupWidth - barWidth * chart.series.length) / 2;
+				return chart.series.map((entry, seriesIndex) => {
+					const value = number(row[entry.key]) ?? 0;
+					const sign = value === 0 ? "zero" : value < 0 ? "negative" : "positive";
+					const y = scaled(Math.max(0, value), min, max, box.top, box.bottom);
+					const yZero = scaled(Math.min(0, value), min, max, box.top, box.bottom);
+					const height = Math.max(1, Math.abs(yZero - y));
+					const x = groupStart + seriesIndex * barWidth;
+					return /* @__PURE__ */ jsx("rect", {
+						"aria-label": `${text(labelFor(chart, row, index))} ${text(entry.label)} ${chart.formatValue(value, entry.key, row, index)}`,
+						class: barClass,
+						"data-active": chart.active?.index === index ? "true" : void 0,
+						"data-chart-index": index,
+						"data-chart-sign": sign,
+						"data-chart-series": entry.key,
+						fill: entry.color,
+						focusable: "true",
+						height,
+						style: `--chart-index:${index}`,
+						tabindex: "0",
+						width: Math.max(2, barWidth - 2),
+						x,
+						y: Math.min(y, yZero),
+						"set:onfocus": (event) => {
+							const svg = svgFromEvent(event);
+							const point = rowPoint(index);
+							if (svg) activate(index, referencePoint(svg, point));
+						},
+						"set:onpointerenter": (event) => {
+							const svg = svgFromEvent(event);
+							const point = rowPoint(index);
+							if (svg) activate(index, referencePoint(svg, point));
+						}
+					}, `${entry.key}-${index}`);
+				});
+			}) : chart.series.map((entry) => {
+				const entryPoints = points(entry);
+				return /* @__PURE__ */ jsxs("g", {
+					"data-chart-series": entry.key,
+					children: [
+						type === "area" ? /* @__PURE__ */ jsx("path", {
+							d: areaPath(entryPoints, baseline),
+							fill: entry.color,
+							"fill-opacity": "0.18"
+						}) : null,
+						/* @__PURE__ */ jsx("path", {
+							d: linePath(entryPoints),
+							fill: "none",
+							pathLength: 1,
+							stroke: entry.color,
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2"
+						}),
+						entryPoints.map((point, index) => {
+							const row = chart.data[index];
+							const value = number(row[entry.key]) ?? 0;
+							return /* @__PURE__ */ jsx("circle", {
+								"aria-label": `${text(labelFor(chart, row, index))} ${text(entry.label)} ${chart.formatValue(value, entry.key, row, index)}`,
+								class: pointClass,
+								cx: point.x,
+								cy: point.y,
+								"data-active": chart.active?.index === index ? "true" : void 0,
+								"data-chart-index": index,
+								fill: pointFill,
+								focusable: "true",
+								r: "4",
+								style: `--chart-index:${index}`,
+								stroke: entry.color,
+								"stroke-width": "2",
+								tabindex: "0",
+								"set:onfocus": (event) => {
+									const svg = svgFromEvent(event);
+									const activePoint = rowPoint(index);
+									if (svg) activate(index, referencePoint(svg, activePoint));
+								},
+								"set:onpointerenter": (event) => {
+									const svg = svgFromEvent(event);
+									const activePoint = rowPoint(index);
+									if (svg) activate(index, referencePoint(svg, activePoint));
+								}
+							}, `${entry.key}-${index}`);
+						})
+					]
+				}, entry.key);
+			})
+		]
+	});
+};
+/** Unstyled SVG bar chart primitive for use inside ChartContainer. */
+var ChartBar = (attrs) => /* @__PURE__ */ jsx(ChartPlot, {
+	...attrs,
+	type: "bar"
+});
+/** Unstyled SVG line chart primitive for use inside ChartContainer. */
+var ChartLine = (attrs) => /* @__PURE__ */ jsx(ChartPlot, {
+	...attrs,
+	type: "line"
+});
+/** Unstyled SVG area chart primitive for use inside ChartContainer. */
+var ChartArea = (attrs) => /* @__PURE__ */ jsx(ChartPlot, {
+	...attrs,
+	type: "area"
+});
+/** Unstyled SVG pie/donut chart primitive for use inside ChartContainer. */
+var ChartPie = ({ centerLabelClass, centerLabelFill, class: classes, innerRadius = 0, ref, sliceStroke, ...attrs }) => {
+	const chart = ChartContext();
+	if (!chart || !chart.data.length || !chart.series.length) return null;
+	const entry = chart.series[0];
+	const values = chart.data.map((row) => Math.max(0, number(row[entry.key]) ?? 0));
+	const total = values.reduce((sum, value) => sum + value, 0) || 1;
+	const size = Math.min(chart.width, chart.height);
+	const center = size / 2;
+	const radius = center - 12;
+	let start = -Math.PI / 2;
+	const activate = (index, angle, color, at) => {
+		if (sameActiveTarget(chart.active, index, [entry.key])) {
+			chart.setActive(chart.active, at);
+			return;
+		}
+		const point = anglePoint(center, radius * .78, angle);
+		const row = chart.data[index];
+		const value = values[index] ?? 0;
+		chart.setActive({
+			index,
+			items: [{
+				color,
+				formattedValue: chart.formatValue(value, entry.key, row, index),
+				index,
+				key: entry.key,
+				label: labelFor(chart, row, index),
+				row,
+				value
+			}],
+			label: labelFor(chart, row, index),
+			x: point.x,
+			y: point.y
+		}, at);
+	};
+	const focusIn = (event) => {
+		const target = event.target;
+		const index = Number(target?.getAttribute("data-chart-index"));
+		if (!Number.isInteger(index)) return;
+		const svg = svgFromEvent(event);
+		if (!svg) return;
+		const totalBefore = values.slice(0, index).reduce((sum, value) => sum + value, 0);
+		const value = values[index] ?? 0;
+		const middle = -Math.PI / 2 + totalBefore / total * Math.PI * 2 + value / total * Math.PI * 2 / 2;
+		const point = anglePoint(center, radius * .78, middle);
+		activate(index, middle, chart.palette[index % chart.palette.length], referencePoint(svg, point));
+	};
+	const pointerMove = (event) => {
+		const svg = event.currentTarget;
+		const cursorPoint = svgPoint(svg, event.clientX, event.clientY);
+		if (!cursorPoint) {
+			chart.clearActive();
+			return;
+		}
+		const { x, y } = cursorPoint;
+		const distance = Math.hypot(x - center, y - center);
+		if (distance > radius || distance < innerRadius) {
+			chart.clearActive();
+			return;
+		}
+		let angle = Math.atan2(y - center, x - center) + Math.PI / 2;
+		if (angle < 0) angle += Math.PI * 2;
+		let cursor = 0;
+		for (let index = 0; index < values.length; index++) {
+			const span = (values[index] ?? 0) / total * Math.PI * 2;
+			if (angle <= cursor + span || index === values.length - 1) {
+				const middle = -Math.PI / 2 + cursor + span / 2;
+				const point = anglePoint(center, radius * .78, middle);
+				activate(index, middle, chart.palette[index % chart.palette.length], referencePoint(svg, point));
+				return;
+			}
+			cursor += span;
+		}
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		...attrs,
+		"aria-describedby": chart.description ? `${chart.id}-description` : void 0,
+		"aria-label": chart.label,
+		class: classes,
+		"data-slot": "chart-pie",
+		height: chart.height,
+		role: "img",
+		ref: plotRef(chart, ref),
+		viewBox: `0 0 ${size} ${size}`,
+		width: "100%",
+		xmlns: "http://www.w3.org/2000/svg",
+		"set:onfocusin": focusIn,
+		"set:onpointerleave": chart.clearActive,
+		"set:onpointermove": pointerMove,
+		children: [
+			chart.label ? /* @__PURE__ */ jsx("title", { children: chart.label }) : null,
+			chart.description ? /* @__PURE__ */ jsx("desc", {
+				id: `${chart.id}-description`,
+				children: chart.description
+			}) : null,
+			values.map((value, index) => {
+				const angle = value / total * Math.PI * 2;
+				const end = start + angle;
+				const middle = start + angle / 2;
+				const color = chart.palette[index % chart.palette.length];
+				const path = slicePath(center, radius, innerRadius, start, end);
+				const row = chart.data[index];
+				start = end;
+				return /* @__PURE__ */ jsx("path", {
+					"aria-label": `${text(labelFor(chart, row, index))} ${chart.formatValue(value, entry.key, row, index)}`,
+					d: path,
+					"data-active": chart.active?.index === index ? "true" : void 0,
+					"data-chart-index": index,
+					fill: color,
+					focusable: "true",
+					style: `--chart-index:${index}`,
+					stroke: sliceStroke,
+					"stroke-width": "2",
+					tabindex: "0",
+					"set:onfocus": (event) => {
+						const svg = svgFromEvent(event);
+						const point = anglePoint(center, radius * .78, middle);
+						if (svg) activate(index, middle, color, referencePoint(svg, point));
+					},
+					"set:onpointerenter": (event) => {
+						const svg = svgFromEvent(event);
+						const point = anglePoint(center, radius * .78, middle);
+						if (svg) activate(index, middle, color, referencePoint(svg, point));
+					}
+				}, index);
+			}),
+			innerRadius > 0 ? /* @__PURE__ */ jsx("text", {
+				x: center,
+				y: center,
+				fill: centerLabelFill,
+				class: centerLabelClass,
+				style: "text-anchor:middle;dominant-baseline:middle",
+				children: chart.formatValue(total, entry.key, {}, 0)
+			}) : null
+		]
+	});
+};
+/** Unstyled absolute tooltip layer for native chart primitives. */
+var ChartTooltip = ({ children, class: classes, content, ...attrs }) => {
+	const chart = ChartContext();
+	if (!chart) return null;
+	if (!chart.active?.items.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "chart-tooltip",
+		ref: chart.setTooltip,
+		style: "left:0;top:0",
+		children: content ?? children ?? /* @__PURE__ */ jsx(ChartTooltipContent, {})
+	}, "chart-tooltip");
+};
+/** Unstyled tooltip body for native chart payloads. */
+var ChartTooltipContent = ({ class: classes, formattedValueClass, formatter, hideIndicator, hideLabel, iconClass, iconWrapperClass, indicator = "dot", indicatorClass, itemClass, itemLabelClass, itemsClass, labelClass, labelFormatter, nestedLabelClass, valueLabelGroupClass, valueRowClass, ...attrs }) => {
+	const chart = ChartContext();
+	const active = chart?.active;
+	if (!chart || !active?.items.length) return null;
+	const nestLabel = active.items.length === 1 && indicator !== "dot";
+	const state = {
+		indicator,
+		nestLabel
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "chart-tooltip-content",
+		children: [!hideLabel && !nestLabel ? /* @__PURE__ */ jsx("div", {
+			class: labelClass,
+			"data-slot": "chart-tooltip-label",
+			children: labelFormatter ? labelFormatter(active.label, active.items) : active.label
+		}) : null, /* @__PURE__ */ jsx("div", {
+			class: itemsClass,
+			children: active.items.map((item, index) => {
+				const icon = chart.config[item.key]?.icon;
+				return /* @__PURE__ */ jsx("div", {
+					class: resolve(itemClass, state),
+					"data-slot": "chart-tooltip-item",
+					children: formatter ? formatter(item.value, item.key, item, index) : /* @__PURE__ */ jsxs(Fragment, { children: [icon && !hideIndicator ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						class: iconWrapperClass,
+						children: renderIcon(icon, iconClass)
+					}) : !hideIndicator ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						class: resolve(indicatorClass, state),
+						style: `--chart-indicator:${item.color}`
+					}) : null, /* @__PURE__ */ jsxs("div", {
+						class: resolve(valueRowClass, { nestLabel }),
+						children: [/* @__PURE__ */ jsxs("div", {
+							class: valueLabelGroupClass,
+							children: [!hideLabel && nestLabel ? /* @__PURE__ */ jsx("div", {
+								class: nestedLabelClass,
+								children: labelFormatter ? labelFormatter(active.label, active.items) : active.label
+							}) : null, /* @__PURE__ */ jsx("span", {
+								class: itemLabelClass,
+								children: item.label
+							})]
+						}), /* @__PURE__ */ jsx("span", {
+							class: formattedValueClass,
+							children: item.formattedValue
+						})]
+					})] })
+				}, `${item.key}-${index}`);
+			})
+		})]
+	});
+};
+/** Unstyled legend layer for native chart primitives. */
+var ChartLegend = ({ children, class: classes, content, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "chart-legend",
+	children: content ?? children ?? /* @__PURE__ */ jsx(ChartLegendContent, {})
+}, "chart-legend");
+/** Unstyled legend content for native chart payloads. */
+var ChartLegendContent = ({ class: classes, hideIcon, iconClass, iconWrapperClass, itemClass, swatchClass, ...attrs }) => {
+	const chart = ChartContext();
+	if (!chart) return null;
+	const entries = chart.type === "pie" ? chart.data.map((row, index) => ({
+		color: chart.palette[index % chart.palette.length],
+		icon: void 0,
+		key: String(index),
+		label: labelFor(chart, row, index)
+	})) : chart.series.map((entry) => ({
+		color: entry.color,
+		icon: chart.config[entry.key]?.icon,
+		key: entry.key,
+		label: entry.label
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "chart-legend-content",
+		children: entries.map((entry) => /* @__PURE__ */ jsxs("div", {
+			class: itemClass,
+			"data-slot": "chart-legend-item",
+			children: [entry.icon && !hideIcon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: iconWrapperClass,
+				children: renderIcon(entry.icon, iconClass)
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				class: swatchClass,
+				style: `background:${entry.color}`
+			}), /* @__PURE__ */ jsx("span", { children: entry.label })]
+		}, entry.key))
+	});
+};
+//#endregion
+export { ChartArea, ChartBar, ChartContainer, ChartIdContext, ChartLegend, ChartLegendContent, ChartLine, ChartPie, ChartTooltip, ChartTooltipContent };