@alpic-ai/ui 0.0.0-staging.g59da2b5 → 0.0.0-staging.g5be6afb

package/dist/components/area-chart.d.mts

@@ -21,6 +21,7 @@ interface AreaChartProps {
   variant?: "stacked" | "grouped" | "expand";
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -45,6 +46,7 @@ declare function AreaChart({
   variant,
   curve,
   legend,
+  legendAlign,
   valueFlags,
   height,
   yAxisWidth,

package/dist/components/area-chart.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
-import { orderByLuminance, resolveSeries } from "../lib/chart.mjs";
+import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Area, AreaChart as AreaChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
@@ -14,10 +14,9 @@ const CURVE_TYPE = {
 	linear: "linear",
 	step: "stepAfter"
 };
-function AreaChart({ data, index, series, variant = "stacked", curve = "monotone", legend = false, valueFlags = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, texture = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function AreaChart({ data, index, series, variant = "stacked", curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, texture = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
-	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
 	const stacked = variant === "stacked" || variant === "expand";
 	const rendered = stacked ? orderByLuminance(resolved) : resolved;
@@ -115,19 +114,20 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 	const isEmpty = data.length === 0 || rendered.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "area-chart",
-		className: cn("flex w-full flex-col gap-3", className),
+		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { height },
-			children: loading ? /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
-			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
 				children: "no data in range"
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
 				children: /* @__PURE__ */ jsxs(AreaChart$1, {
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
@@ -177,8 +177,9 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
@@ -233,7 +234,7 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 							fill: fillFor(entry, slot),
 							dot: false,
 							activeDot: activeDotFor(entry),
-							isAnimationActive: animated,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {
@@ -261,7 +262,8 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 			})
 		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
-			style: { paddingLeft: yAxisWidth }
+			align: legendAlign,
+			insetLeft: yAxisWidth
 		})]
 	});
 }

package/dist/components/bar-chart.d.mts

@@ -10,6 +10,7 @@ interface BarChartProps {
   series: ChartSeries[];
   variant?: "stacked" | "grouped" | "expand";
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -21,6 +22,7 @@ interface BarChartProps {
   };
   markers?: ChartMarker[];
   texture?: boolean;
+  partialLastBar?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
@@ -32,6 +34,7 @@ declare function BarChart({
   series,
   variant,
   legend,
+  legendAlign,
   valueLabels,
   height,
   yAxisWidth,
@@ -39,6 +42,7 @@ declare function BarChart({
   referenceLine,
   markers,
   texture,
+  partialLastBar,
   loading,
   valueFormatter,
   labelFormatter,

package/dist/components/bar-chart.mjs

@@ -1,20 +1,19 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
-import { orderByLuminance, resolveSeries } from "../lib/chart.mjs";
+import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Bar, BarChart as BarChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
-function BarChart({ data, index, series, variant = "stacked", legend = false, valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, texture = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, texture = false, partialLastBar = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
-	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
 	const stacked = variant === "stacked" || variant === "expand";
 	const rendered = stacked ? orderByLuminance(resolved) : resolved;
@@ -39,6 +38,20 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 		series,
 		stacked
 	]);
+	const topSlotByRow = React$1.useMemo(() => {
+		if (!stacked) return [];
+		return data.map((row) => {
+			for (let slot = rendered.length - 1; slot >= 0; slot -= 1) {
+				const value = Number(row[rendered[slot]?.key ?? ""]);
+				if (Number.isFinite(value) && value > 0) return slot;
+			}
+			return -1;
+		});
+	}, [
+		data,
+		rendered,
+		stacked
+	]);
 	const margin = {
 		top: markers?.length || valueLabels ? 18 : 8,
 		right: 8,
@@ -98,19 +111,20 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 	const isEmpty = data.length === 0 || rendered.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "bar-chart",
-		className: cn("flex w-full flex-col gap-3", className),
+		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { height },
-			children: loading ? /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
-			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
 				children: "no data in range"
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
 				children: /* @__PURE__ */ jsxs(BarChart$1, {
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
@@ -161,8 +175,9 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
@@ -206,7 +221,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 								position: "insideBottomRight"
 							} : void 0
 						}),
-						rendered.map((entry, slot) => /* @__PURE__ */ jsx(Bar, {
+						rendered.map((entry, slot) => /* @__PURE__ */ jsxs(Bar, {
 							dataKey: entry.key,
 							name: entry.name,
 							stackId: stacked ? "stack" : void 0,
@@ -215,18 +230,34 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 							strokeWidth: 0,
 							radius: radiusFor(slot),
 							maxBarSize: MAX_BAR_SIZE,
-							activeBar: {
-								fillOpacity: 1,
-								stroke: theme.card,
-								strokeWidth: 1
-							},
-							isAnimationActive: animated,
+							activeBar: false,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
-							children: valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
+							children: [(stacked || partialLastBar) && data.map((row, rowIndex) => {
+								const roundedTop = stacked ? topSlotByRow[rowIndex] === slot : true;
+								const isPartial = partialLastBar && rowIndex === data.length - 1;
+								return /* @__PURE__ */ jsx(Cell, {
+									radius: roundedTop ? [
+										BAR_RADIUS,
+										BAR_RADIUS,
+										0,
+										0
+									] : [
+										0,
+										0,
+										0,
+										0
+									],
+									fillOpacity: isPartial ? .15 : 1,
+									stroke: isPartial ? entry.color : void 0,
+									strokeWidth: isPartial ? 1.25 : 0,
+									strokeDasharray: isPartial ? "3 2" : void 0
+								}, `${entry.key}-${row[index] ?? rowIndex}`);
+							}), valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
 								dataKey: entry.key,
 								content: renderValueLabel(entry.color)
-							})
+							})]
 						}, entry.key)),
 						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
 							x: marker.x,
@@ -248,7 +279,8 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 			})
 		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
-			style: { paddingLeft: yAxisWidth }
+			align: legendAlign,
+			insetLeft: yAxisWidth
 		})]
 	});
 }

package/dist/components/bar-list.d.mts

@@ -8,6 +8,8 @@ interface BarListProps {
   dataKey?: string;
   maxItems?: number;
   palette?: ChartPaletteName;
+  /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
+  semantic?: "error" | "warning" | "success";
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
@@ -19,6 +21,7 @@ declare function BarList({
   dataKey,
   maxItems,
   palette,
+  semantic,
   loading,
   valueFormatter,
   labelFormatter,

package/dist/components/bar-list.mjs

@@ -1,23 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { rampColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/bar-list.tsx
+const SEMANTIC_KEY = {
+	error: "destructive",
+	warning: "warning",
+	success: "success"
+};
 const PLACEHOLDER_HEIGHT = 168;
 const RAMP_CEILING = .8;
+const SEMANTIC_FLOOR = .62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
-function BarList({ data, index, dataKey = "value", maxItems, palette, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
-	const { paletteName } = useChartContext(palette);
-	const reducedMotion = useReducedMotion();
-	const [mounted, setMounted] = React$1.useState(false);
+function BarList({ data, index, dataKey = "value", maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { paletteName, theme } = useChartContext(palette);
+	const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
 	const [active, setActive] = React$1.useState(null);
-	React$1.useEffect(() => {
-		setMounted(true);
-	}, []);
 	const total = React$1.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
 	const rows = React$1.useMemo(() => {
 		const mapped = data.map((row) => ({
@@ -26,16 +27,21 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
 		}));
 		mapped.sort((lower, upper) => upper.value - lower.value);
 		const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
-		return capped.map((row, rank) => ({
-			...row,
-			color: rampColor(paletteName, (capped.length > 1 ? rank / (capped.length - 1) : 0) * RAMP_CEILING)
-		}));
+		return capped.map((row, rank) => {
+			const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
+			const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+			return {
+				...row,
+				color: accent ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)` : rampColor(paletteName, rankFraction * RAMP_CEILING)
+			};
+		});
 	}, [
 		data,
 		index,
 		dataKey,
 		maxItems,
-		paletteName
+		paletteName,
+		accent
 	]);
 	const maxValue = rows.reduce((max, row) => row.value > max ? row.value : max, 0);
 	const isEmpty = rows.length === 0;
@@ -55,7 +61,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
 		className: cn("flex w-full flex-col", className),
 		children: rows.map((row, slot) => {
 			const fraction = maxValue > 0 ? row.value / maxValue : 0;
-			const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
+			const fillWidth = `${fraction * 100}%`;
 			const dimmed = active !== null && active !== slot;
 			const isActive = active === slot;
 			return /* @__PURE__ */ jsxs("div", {
@@ -73,8 +79,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, loading =
 							width: fillWidth,
 							background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
 							boxShadow: `inset 0 0 0 1px ${row.color}`,
-							opacity: dimmed ? .45 : 1,
-							transition: reducedMotion ? void 0 : "width 700ms ease-out"
+							opacity: dimmed ? .45 : 1
 						},
 						children: /* @__PURE__ */ jsx("span", {
 							className: "pointer-events-none absolute top-1/2 -translate-y-1/2 truncate type-text-xs font-medium text-white",

package/dist/components/chart-card.d.mts

@@ -8,7 +8,7 @@ interface ChartCardProps extends Omit<React$1.ComponentProps<"section">, "title"
   title?: React$1.ReactNode;
   description?: React$1.ReactNode;
   action?: React$1.ReactNode;
-  accent?: "top" | "left";
+  accent?: "top" | "left" | "none";
 }
 declare function ChartCard({
   palette,

package/dist/components/chart-card.mjs

@@ -12,7 +12,7 @@ function ChartCard({ palette = "magenta", kicker, title, description, action, ac
 		className: cn("chart-rise relative overflow-hidden rounded-xl border bg-card p-5 text-card-foreground shadow-shadow", isLeft && "pl-6", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("span", {
+			accent !== "none" && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]"),
 				style: { background: lead }

package/dist/components/chart-container.d.mts

@@ -17,4 +17,4 @@ declare function ChartContainer({
 }): React$1.JSX.Element;
 declare function useChartContext(paletteOverride?: ChartPaletteName): ChartContextValue;
 //#endregion
-export { ChartContainer, type ChartContextValue, useChartContext };
+export { ChartContainer, type ChartContextValue, type ChartPaletteName, useChartContext };

package/dist/components/chart-legend.d.mts

@@ -6,10 +6,15 @@ interface ChartLegendItem {
 }
 interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
+  align?: "left" | "center" | "right";
+  insetLeft?: number;
 }
 declare function ChartLegend({
   items,
+  align,
+  insetLeft,
   className,
+  style,
   ...props
 }: ChartLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/components/chart-legend.mjs

@@ -2,6 +2,11 @@
 import { cn } from "../lib/cn.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart-legend.tsx
+const ALIGN_CLASS = {
+	left: "justify-start",
+	center: "justify-center",
+	right: "justify-end"
+};
 function Swatch({ color, dashed }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
@@ -9,9 +14,13 @@ function Swatch({ color, dashed }) {
 		style: dashed ? { border: `1.5px solid ${color}` } : { background: color }
 	});
 }
-function ChartLegend({ items, className, ...props }) {
+function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", className),
+		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className),
+		style: {
+			paddingLeft: align === "left" ? insetLeft : void 0,
+			...style
+		},
 		...props,
 		children: items.map((item) => /* @__PURE__ */ jsxs("span", {
 			className: "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]",

package/dist/components/chart-tooltip.mjs

@@ -3,10 +3,16 @@ import { cn } from "../lib/cn.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart-tooltip.tsx
+const MAX_TOOLTIP_ROWS = 8;
 function ChartTooltipContent({ active, payload, label, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, hideLabel, showTotal, totalLabel = "Total", className }) {
 	const { theme } = useChartContext();
 	if (!active || !payload?.length) return null;
-	const total = payload.reduce((sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)), 0);
+	const toNumber = (value) => typeof value === "number" ? value : Number(value ?? 0);
+	const total = payload.reduce((sum, item) => sum + toNumber(item.value), 0);
+	const sorted = [...payload].sort((lower, upper) => toNumber(upper.value) - toNumber(lower.value));
+	const rows = sorted.slice(0, MAX_TOOLTIP_ROWS);
+	const overflow = sorted.slice(MAX_TOOLTIP_ROWS);
+	const overflowTotal = overflow.reduce((sum, item) => sum + toNumber(item.value), 0);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("min-w-[130px] rounded-lg border px-3 py-2.5 shadow-lg", "border-border bg-popover text-popover-foreground", className),
 		children: [!hideLabel && label !== void 0 && /* @__PURE__ */ jsx("p", {
@@ -14,37 +20,58 @@ function ChartTooltipContent({ active, payload, label, valueFormatter = (value)
 			children: labelFormatter ? labelFormatter(label) : label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1",
-			children: [payload.map((item, index) => {
-				const swatch = [
-					item.color,
-					item.stroke,
-					item.fill
-				].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
-				const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
-				return /* @__PURE__ */ jsxs("div", {
+			children: [
+				rows.map((item, index) => {
+					const swatch = [
+						item.color,
+						item.stroke,
+						item.fill
+					].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
+					const numeric = toNumber(item.value);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-4 text-text-xs",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "inline-flex items-center gap-2 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2 shrink-0 rounded-[2px]",
+								style: { background: swatch }
+							}), item.name]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-semibold tabular-nums text-foreground",
+							children: valueFormatter(numeric)
+						})]
+					}, `${item.dataKey ?? index}`);
+				}),
+				overflow.length > 0 && /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between gap-4 text-text-xs",
 					children: [/* @__PURE__ */ jsxs("span", {
-						className: "inline-flex items-center gap-2 text-muted-foreground",
-						children: [/* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							className: "size-2 shrink-0 rounded-[2px]",
-							style: { background: swatch }
-						}), item.name]
+						className: "inline-flex items-center gap-2 text-quaternary-foreground",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2 shrink-0"
+							}),
+							"+",
+							overflow.length,
+							" more"
+						]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-quaternary-foreground",
+						children: valueFormatter(overflowTotal)
+					})]
+				}),
+				showTotal && /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
+						children: totalLabel
 					}), /* @__PURE__ */ jsx("span", {
 						className: "font-mono font-semibold tabular-nums text-foreground",
-						children: valueFormatter(numeric)
+						children: valueFormatter(total)
 					})]
-				}, `${item.dataKey ?? index}`);
-			}), showTotal && /* @__PURE__ */ jsxs("div", {
-				className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
-					children: totalLabel
-				}), /* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold tabular-nums text-foreground",
-					children: valueFormatter(total)
-				})]
-			})]
+				})
+			]
 		})]
 	});
 }

package/dist/components/donut-chart.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { paletteColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
@@ -21,7 +20,6 @@ const GEOMETRY = {
 function DonutChart({ data, index, dataKey = "value", variant = "donut", legend = false, paddingAngle = 1, height = 220, palette, centerLabel = "total", loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
-	const animated = !useReducedMotion();
 	const [active, setActive] = React$1.useState(null);
 	const rowRefs = React$1.useRef([]);
 	const slices = React$1.useMemo(() => {
@@ -73,6 +71,10 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
 				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
 					width: "100%",
 					height: "100%",
+					initialDimension: {
+						width: 0,
+						height
+					},
 					children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx("defs", { children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("linearGradient", {
 						id: `donut-${reactId}-${slot}`,
 						x1: "0",
@@ -100,7 +102,7 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
 						cornerRadius: 2,
 						stroke: theme.card,
 						strokeWidth: 1.5,
-						isAnimationActive: animated,
+						isAnimationActive: false,
 						animationDuration: 650,
 						animationEasing: "ease-out",
 						onMouseEnter: (_entry, sliceIndex) => setActive(sliceIndex),

package/dist/components/form.mjs

@@ -41,10 +41,12 @@ const useFormField = () => {
 const FormItemContext = React$1.createContext({});
 function FormItem({ className, ...props }) {
 	const id = React$1.useId();
+	const { name } = React$1.useContext(FormFieldContext);
 	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
 		value: { id },
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "form-item",
+			"data-field-name": name,
 			className: cn("grid gap-2", className),
 			...props
 		})
@@ -65,7 +67,7 @@ function FormLabel({ className, required, tooltip, children, ...props }) {
 			}),
 			required && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: "type-text-sm font-medium text-required",
+				className: "type-text-sm font-medium text-required leading-none",
 				children: "*"
 			}),
 			tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {

package/dist/components/heatmap-chart.d.mts

@@ -11,11 +11,20 @@ interface HeatmapChartProps {
   palette?: ChartPaletteName;
   xLabels?: readonly string[];
   yLabels?: readonly string[];
+  showAllXLabels?: boolean;
   highlightPeak?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   xTickFormatter?: (label: string) => string;
   yTickFormatter?: (label: string) => string;
+  tooltipMetrics?: ReadonlyArray<{
+    key: string;
+    label: string;
+    format?: (value: number) => string;
+  }>;
+  tooltipTitleKey?: string;
+  colorScale?: "linear" | "rank";
+  showLegend?: boolean;
   ariaLabel?: string;
   className?: string;
 }
@@ -28,11 +37,16 @@ declare function HeatmapChart({
   palette,
   xLabels,
   yLabels,
+  showAllXLabels,
   highlightPeak,
   loading,
   valueFormatter,
   xTickFormatter,
   yTickFormatter,
+  tooltipMetrics,
+  tooltipTitleKey,
+  colorScale,
+  showLegend,
   ariaLabel,
   className
 }: HeatmapChartProps): React$1.JSX.Element;