@alpic-ai/ui 0.0.0-dev.g19fc228 → 0.0.0-dev.g1a5d5ed

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,7 +1,7 @@
 "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";
@@ -14,7 +14,7 @@ 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();
@@ -128,6 +128,10 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
 				children: /* @__PURE__ */ jsxs(AreaChart$1, {
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
@@ -177,6 +181,7 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
 							minTickGap: 44
 						}),
@@ -261,7 +266,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;
@@ -32,6 +33,7 @@ declare function BarChart({
   series,
   variant,
   legend,
+  legendAlign,
   valueLabels,
   height,
   yAxisWidth,

package/dist/components/bar-chart.mjs

@@ -1,7 +1,7 @@
 "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";
@@ -11,7 +11,7 @@ import { Bar, BarChart as BarChart$1, CartesianGrid, LabelList, ReferenceArea, R
 //#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, 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();
@@ -111,6 +111,10 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
 				children: /* @__PURE__ */ jsxs(BarChart$1, {
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
@@ -161,6 +165,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, va
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
 							minTickGap: 44
 						}),
@@ -248,7 +253,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

@@ -7,11 +7,18 @@ 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);
+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 reducedMotion = useReducedMotion();
 	const [mounted, setMounted] = React$1.useState(false);
 	const [active, setActive] = React$1.useState(null);
@@ -26,16 +33,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;

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/donut-chart.mjs

@@ -73,6 +73,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",

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

@@ -11,11 +11,17 @@ 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;
+  }>;
   ariaLabel?: string;
   className?: string;
 }
@@ -28,11 +34,13 @@ declare function HeatmapChart({
   palette,
   xLabels,
   yLabels,
+  showAllXLabels,
   highlightPeak,
   loading,
   valueFormatter,
   xTickFormatter,
   yTickFormatter,
+  tooltipMetrics,
   ariaLabel,
   className
 }: HeatmapChartProps): React$1.JSX.Element;

package/dist/components/heatmap-chart.mjs

@@ -31,7 +31,7 @@ const uniqueInOrder = (values) => {
 	}
 	return ordered;
 };
-function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square", palette, xLabels, yLabels, highlightPeak = true, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), xTickFormatter, yTickFormatter, ariaLabel = "Activity heatmap", className }) {
+function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square", palette, xLabels, yLabels, showAllXLabels = false, highlightPeak = true, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), xTickFormatter, yTickFormatter, tooltipMetrics, ariaLabel = "Activity heatmap", className }) {
 	const { paletteName, theme } = useChartContext(palette);
 	const [hovered, setHovered] = React$1.useState(null);
 	const [mounted, setMounted] = React$1.useState(false);
@@ -42,24 +42,31 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
 		const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
 		const valueAt = /* @__PURE__ */ new Map();
-		for (const row of data) valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+		const recordAt = /* @__PURE__ */ new Map();
+		for (const row of data) {
+			const key = pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? ""));
+			valueAt.set(key, Number(row[dataKey]) || 0);
+			recordAt.set(key, row);
+		}
 		let maxValue = 0;
 		let peakKey = "";
 		return {
 			columns,
 			rows,
 			cells: rows.flatMap((rowLabel, rowIndex) => columns.map((colLabel, colIndex) => {
-				const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+				const key = pairKey(rowLabel, colLabel);
+				const value = valueAt.get(key) ?? 0;
 				if (value > maxValue) {
 					maxValue = value;
-					peakKey = pairKey(rowLabel, colLabel);
+					peakKey = key;
 				}
 				return {
 					rowLabel,
 					colLabel,
 					rowIndex,
 					colIndex,
-					value
+					value,
+					record: recordAt.get(key) ?? null
 				};
 			})),
 			maxValue,
@@ -87,7 +94,7 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
 	const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
 	const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
-	const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+	const xStride = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
 	const cellX = (col) => PAD.left + col * 25;
 	const cellY = (row) => PAD.top + row * 25;
 	const formatX = (label) => xTickFormatter ? xTickFormatter(label) : label;
@@ -159,7 +166,8 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 							y: event.clientY,
 							rowLabel: cell.rowLabel,
 							colLabel: cell.colLabel,
-							value: cell.value
+							value: cell.value,
+							record: cell.record
 						})
 					}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
 				]
@@ -177,7 +185,30 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 					" · ",
 					formatX(hovered.colLabel)
 				]
-			}), /* @__PURE__ */ jsxs("div", {
+			}), tooltipMetrics && tooltipMetrics.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-1",
+				children: tooltipMetrics.map((metric) => {
+					const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
+					const isActive = metric.key === dataKey;
+					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: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
+									opacity: isActive ? 1 : .35
+								}
+							}), metric.label]
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn("font-mono tabular-nums", isActive ? "font-semibold text-foreground" : "text-muted-foreground"),
+							children: (metric.format ?? valueFormatter)(raw)
+						})]
+					}, metric.key);
+				})
+			}) : /* @__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",

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

@@ -15,6 +15,7 @@ interface LineChartProps {
   series: ChartSeries[];
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   dots?: boolean;
   height?: number;
@@ -38,6 +39,7 @@ declare function LineChart({
   series,
   curve,
   legend,
+  legendAlign,
   valueFlags,
   dots,
   height,

package/dist/components/line-chart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
-import { resolveSeries } from "../lib/chart.mjs";
+import { makeXAxisTick, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
@@ -14,7 +14,7 @@ const CURVE_TYPE = {
 	linear: "linear",
 	step: "stepAfter"
 };
-function LineChart({ data, index, series, curve = "monotone", legend = false, valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
@@ -106,6 +106,10 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, va
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
 				children: /* @__PURE__ */ jsxs(LineChart$1, {
 					data,
 					margin,
@@ -118,12 +122,14 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, va
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
 							minTickGap: 44
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
 							width: yAxisWidth,
+							domain: ["auto", "auto"],
 							tickFormatter: (value) => valueFormatter(value)
 						}),
 						/* @__PURE__ */ jsx(Tooltip, {
@@ -203,7 +209,8 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, va
 			})
 		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
-			style: { paddingLeft: yAxisWidth }
+			align: legendAlign,
+			insetLeft: yAxisWidth
 		})]
 	});
 }

package/dist/components/stat.d.mts

@@ -13,16 +13,18 @@ interface StatDelta {
 interface StatProps extends React$1.ComponentProps<"div"> {
   value: React$1.ReactNode;
   unit?: string;
-  delta?: StatDelta;
+  delta?: StatDelta | null;
   sparkline?: number[] | Array<{
     value: number;
   }>;
+  semantic?: "error" | "warning" | "success";
 }
 declare function Stat({
   value,
   unit,
   delta,
   sparkline,
+  semantic,
   className,
   ...props
 }: StatProps): React$1.JSX.Element;

package/dist/components/stat.mjs

@@ -21,11 +21,17 @@ const toSparkData = (sparkline) => (sparkline ?? []).map((point, index) => typeo
 	index,
 	value: point.value
 });
-function Stat({ value, unit, delta, sparkline, className, ...props }) {
-	const { palette } = useChartContext();
+const SEMANTIC_KEY = {
+	error: "destructive",
+	warning: "warning",
+	success: "success"
+};
+function Stat({ value, unit, delta, sparkline, semantic, className, ...props }) {
+	const { palette, theme } = useChartContext();
 	const gradientId = React$1.useId().replace(/:/g, "");
 	const sparkData = React$1.useMemo(() => toSparkData(sparkline), [sparkline]);
-	const sparkColor = palette[0];
+	const hasSpark = sparkData.some((point) => point.value > 0);
+	const sparkColor = semantic ? theme[SEMANTIC_KEY[semantic]] : palette[0];
 	const sentiment = delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "stat",
@@ -48,11 +54,15 @@ function Stat({ value, unit, delta, sparkline, className, ...props }) {
 					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }), delta.label ?? `${delta.value}%`]
 				})
 			]
-		}), sparkData.length > 0 && /* @__PURE__ */ jsx("div", {
+		}), hasSpark && /* @__PURE__ */ jsx("div", {
 			className: "h-9 w-full",
 			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
+				initialDimension: {
+					width: 0,
+					height: 36
+				},
 				children: /* @__PURE__ */ jsxs(AreaChart, {
 					data: sparkData,
 					margin: {

package/dist/components/textarea.mjs

@@ -12,7 +12,7 @@ function Textarea({ className, id, label, required, hint, error, tooltip, ...pro
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: fieldId,
 		"data-slot": "textarea",
-		className: cn("block w-full min-h-[120px] resize-none", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
+		className: cn("block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
 		required,
 		"aria-invalid": error ? true : void 0,
 		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,

package/dist/lib/chart.mjs

@@ -1,4 +1,5 @@
 import { luminance, paletteColor } from "./chart-palette.mjs";
+import * as React$1 from "react";
 //#region src/lib/chart.ts
 const formatShare = (fraction) => `${(fraction * 100).toFixed(fraction >= .1 ? 0 : 1)}%`;
 const semanticColor = (theme, semantic) => {
@@ -23,5 +24,19 @@ const resolveSeries = (series, palette, theme) => series.map((entry, index) => (
 * stack order in Recharts — first entry sits at the bottom.
 */
 const orderByLuminance = (series) => [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
+const makeXAxisTick = (theme) => ({ x, y, payload, index, visibleTicksCount }) => {
+	const isFirst = index === 0;
+	const isLast = visibleTicksCount != null && index === visibleTicksCount - 1;
+	const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+	return React$1.createElement("text", {
+		x: Number(x ?? 0),
+		y: Number(y ?? 0),
+		dy: 12,
+		textAnchor: anchor,
+		fill: theme.axisForeground,
+		fontFamily: theme.fontMono,
+		fontSize: 10
+	}, String(payload?.value ?? ""));
+};
 //#endregion
-export { formatShare, orderByLuminance, resolveSeries };
+export { formatShare, makeXAxisTick, orderByLuminance, resolveSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.g19fc228",
+  "version": "0.0.0-dev.g1a5d5ed",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,32 +23,32 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.18.0",
+    "lucide-react": "^1.21.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-hook-form": "^7.79.0",
+    "react-hook-form": "^7.80.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.1",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.13",
-    "@radix-ui/react-avatar": "^1.1.12",
-    "@radix-ui/react-checkbox": "^1.3.4",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-label": "^2.1.9",
-    "@radix-ui/react-popover": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.0",
-    "@radix-ui/react-scroll-area": "^1.2.11",
-    "@radix-ui/react-select": "^2.3.0",
-    "@radix-ui/react-separator": "^1.1.9",
-    "@radix-ui/react-slot": "^1.2.5",
-    "@radix-ui/react-switch": "^1.3.0",
-    "@radix-ui/react-tabs": "^1.1.14",
-    "@radix-ui/react-toggle-group": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-collapsible": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-dropdown-menu": "^2.1.18",
+    "@radix-ui/react-label": "^2.1.10",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-radio-group": "^1.4.1",
+    "@radix-ui/react-scroll-area": "^1.2.12",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-separator": "^1.1.10",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/react-toggle-group": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -60,12 +60,12 @@
     "@tailwindcss/postcss": "^4.3.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.18.0",
-    "react-hook-form": "^7.79.0",
+    "lucide-react": "^1.21.0",
+    "react-hook-form": "^7.80.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.1",
-    "tsdown": "^0.22.2",
+    "tsdown": "^0.22.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },