@alpic-ai/ui 1.144.0 → 1.145.1

package/dist/components/heatmap-chart.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.mjs";
 import { HEAT_EMPTY, heatColor, heatRamp } from "../lib/chart-palette.mjs";
 import { useChartContext } from "./chart-container.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/heatmap-chart.tsx
 const PLACEHOLDER_HEIGHT = 168;
@@ -31,7 +31,7 @@ const uniqueInOrder = (values) => {
 	}
 	return ordered;
 };
-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 }) {
+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, tooltipTitleKey, colorScale = "linear", showLegend = false, ariaLabel = "Activity heatmap", className }) {
 	const { paletteName, theme } = useChartContext(palette);
 	const [hovered, setHovered] = React$1.useState(null);
 	const [mounted, setMounted] = React$1.useState(false);
@@ -81,6 +81,19 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		yLabels
 	]);
 	const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+	const colorFractionOf = React$1.useMemo(() => {
+		if (colorScale === "rank") {
+			const sorted = [...new Set(cells.map((cell) => cell.value).filter((value) => value > 0))].sort((lower, upper) => lower - upper);
+			const RANK_FLOOR = .18;
+			const fractionByValue = new Map(sorted.map((value, index) => [value, sorted.length > 1 ? RANK_FLOOR + (1 - RANK_FLOOR) * (index / (sorted.length - 1)) : 1]));
+			return (value) => value > 0 ? fractionByValue.get(value) ?? 0 : 0;
+		}
+		return (value) => maxValue > 0 ? value / maxValue : 0;
+	}, [
+		cells,
+		colorScale,
+		maxValue
+	]);
 	if (loading) return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs", className),
 		style: { minHeight: PLACEHOLDER_HEIGHT },
@@ -91,7 +104,7 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		style: { minHeight: PLACEHOLDER_HEIGHT },
 		children: "no data in range"
 	});
-	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light, theme.isDark);
 	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 = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
@@ -104,125 +117,142 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "heatmap-chart",
 		className: cn("w-full", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "overflow-x-auto",
-			children: /* @__PURE__ */ jsxs("svg", {
-				viewBox: `0 0 ${totalWidth} ${totalHeight}`,
-				className: "block min-w-[480px]",
-				style: {
-					width: "100%",
-					height: "auto"
-				},
-				role: "img",
-				"aria-label": ariaLabel,
-				onMouseLeave: () => setHovered(null),
-				children: [
-					columns.map((label, col) => col % xStride === 0 ? /* @__PURE__ */ jsx("text", {
-						x: cellX(col) + CELL / 2,
-						y: PAD.top - 7,
-						textAnchor: "middle",
-						className: "fill-quaternary-foreground font-mono text-[8.5px]",
-						children: formatX(label)
-					}, `x-${label}`) : null),
-					rows.map((label, row) => /* @__PURE__ */ jsx("text", {
-						x: PAD.left - 8,
-						y: cellY(row) + CELL / 2 + 3,
-						textAnchor: "end",
-						className: "fill-quaternary-foreground font-mono text-[8.5px]",
-						children: formatY(label)
-					}, `y-${label}`)),
-					cells.map((cell) => {
-						const fraction = cell.value / maxValue;
-						const fill = heatColor(ramp, fraction);
-						const key = pairKey(cell.rowLabel, cell.colLabel);
-						const isPeak = highlightPeak && key === peakKey;
-						if (variant === "dot") return /* @__PURE__ */ jsx("circle", {
-							cx: cellX(cell.colIndex) + CELL / 2,
-							cy: cellY(cell.rowIndex) + CELL / 2,
-							r: CELL / 2 * (DOT_MIN + DOT_RANGE * fraction),
-							fill,
-							stroke: isPeak ? theme.foreground : void 0,
-							strokeWidth: isPeak ? 1.4 : void 0
-						}, key);
-						return /* @__PURE__ */ jsx("rect", {
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${totalWidth} ${totalHeight}`,
+					className: "block min-w-[480px]",
+					style: {
+						width: "100%",
+						height: "auto"
+					},
+					role: "img",
+					"aria-label": ariaLabel,
+					onMouseLeave: () => setHovered(null),
+					children: [
+						columns.map((label, col) => col % xStride === 0 ? /* @__PURE__ */ jsx("text", {
+							x: cellX(col) + CELL / 2,
+							y: PAD.top - 7,
+							textAnchor: "middle",
+							className: "fill-quaternary-foreground font-mono text-[8.5px]",
+							children: formatX(label)
+						}, `x-${label}`) : null),
+						rows.map((label, row) => /* @__PURE__ */ jsx("text", {
+							x: PAD.left - 8,
+							y: cellY(row) + CELL / 2 + 3,
+							textAnchor: "end",
+							className: "fill-quaternary-foreground font-mono text-[8.5px]",
+							children: formatY(label)
+						}, `y-${label}`)),
+						cells.map((cell) => {
+							const fraction = colorFractionOf(cell.value);
+							const fill = heatColor(ramp, fraction);
+							const key = pairKey(cell.rowLabel, cell.colLabel);
+							const isPeak = highlightPeak && key === peakKey;
+							if (variant === "dot") return /* @__PURE__ */ jsx("circle", {
+								cx: cellX(cell.colIndex) + CELL / 2,
+								cy: cellY(cell.rowIndex) + CELL / 2,
+								r: CELL / 2 * (DOT_MIN + DOT_RANGE * fraction),
+								fill,
+								stroke: isPeak ? theme.foreground : void 0,
+								strokeWidth: isPeak ? 1.4 : void 0
+							}, key);
+							return /* @__PURE__ */ jsx("rect", {
+								x: cellX(cell.colIndex),
+								y: cellY(cell.rowIndex),
+								width: CELL,
+								height: CELL,
+								rx: 2.5,
+								fill,
+								stroke: isPeak ? theme.foreground : void 0,
+								strokeWidth: isPeak ? 1.4 : void 0
+							}, key);
+						}),
+						cells.map((cell) => /* @__PURE__ */ jsx("rect", {
 							x: cellX(cell.colIndex),
 							y: cellY(cell.rowIndex),
-							width: CELL,
-							height: CELL,
-							rx: 2.5,
-							fill,
-							stroke: isPeak ? theme.foreground : void 0,
-							strokeWidth: isPeak ? 1.4 : void 0
-						}, key);
-					}),
-					cells.map((cell) => /* @__PURE__ */ jsx("rect", {
-						x: cellX(cell.colIndex),
-						y: cellY(cell.rowIndex),
-						width: 25,
-						height: 25,
-						fill: "transparent",
-						onMouseMove: (event) => setHovered({
-							x: event.clientX,
-							y: event.clientY,
-							rowLabel: cell.rowLabel,
-							colLabel: cell.colLabel,
-							value: cell.value,
-							record: cell.record
-						})
-					}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
-				]
-			})
-		}), mounted && hovered && createPortal(/* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg",
-			style: {
-				left: tooltipLeft,
-				top: tooltipTop
-			},
-			children: [/* @__PURE__ */ jsxs("p", {
-				className: "mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider",
-				children: [
-					formatY(hovered.rowLabel),
-					" · ",
-					formatX(hovered.colLabel)
-				]
-			}), 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);
+							width: 25,
+							height: 25,
+							fill: "transparent",
+							onMouseMove: (event) => setHovered({
+								x: event.clientX,
+								y: event.clientY,
+								rowLabel: cell.rowLabel,
+								colLabel: cell.colLabel,
+								value: cell.value,
+								record: cell.record
+							})
+						}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
+					]
 				})
-			}) : /* @__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", {
+			}),
+			showLegend && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center justify-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]",
+						children: "Less"
+					}),
+					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "size-2 shrink-0 rounded-[2px]",
-						style: { background: heatColor(ramp, hovered.value / maxValue) }
-					}), "activity"]
-				}), /* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold tabular-nums text-foreground",
-					children: valueFormatter(hovered.value)
+						className: "h-2 w-24 rounded-full border border-border",
+						style: { background: `linear-gradient(90deg, ${ramp.join(", ")})` }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]",
+						children: "More"
+					})
+				]
+			}),
+			mounted && hovered && createPortal(/* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg",
+				style: {
+					left: tooltipLeft,
+					top: tooltipTop
+				},
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider",
+					children: tooltipTitleKey && typeof hovered.record?.[tooltipTitleKey] === "string" ? hovered.record[tooltipTitleKey] : `${formatY(hovered.rowLabel)} · ${formatX(hovered.colLabel)}`
+				}), 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, colorFractionOf(hovered.value)) : 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",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2 shrink-0 rounded-[2px]",
+							style: { background: heatColor(ramp, colorFractionOf(hovered.value)) }
+						}), "activity"]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-foreground",
+						children: valueFormatter(hovered.value)
+					})]
 				})]
-			})]
-		}), document.body)]
+			}), document.body)
+		]
 	});
 }
 //#endregion

package/dist/components/input-group.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 
 //#region src/components/input-group.d.ts
 declare function InputGroup({

package/dist/components/input.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Label } from "./label.mjs";
+import * as React$1 from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React$1 from "react";
 //#region src/components/input.tsx
 const inputSizeStyles = {
 	sm: {

package/dist/components/line-chart.mjs

@@ -4,8 +4,9 @@ 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";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "./skeleton.mjs";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CartesianGrid, LabelList, Line, LineChart as LineChart$1, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/line-chart.tsx
 const CURVE_TYPE = {
@@ -91,14 +92,11 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 	const isEmpty = data.length === 0 || resolved.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "line-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, {
@@ -122,7 +120,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 							...axis,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,

package/dist/components/select.d.mts

@@ -1,6 +1,6 @@
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 //#region src/components/select.d.ts

package/dist/components/sidebar.d.mts

@@ -1,7 +1,7 @@
 import { Button } from "./button.mjs";
 import { TooltipContent } from "./tooltip.mjs";
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 
 //#region src/components/sidebar.d.ts
 type SidebarContextProps = {

package/dist/components/sidebar.mjs

@@ -1,14 +1,14 @@
 "use client";
+import { useIsMobile } from "../hooks/use-mobile.mjs";
 import { cn } from "../lib/cn.mjs";
+import { Skeleton } from "./skeleton.mjs";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Separator } from "./separator.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
-import { useIsMobile } from "../hooks/use-mobile.mjs";
-import { Skeleton } from "./skeleton.mjs";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";

package/dist/components/skeleton.mjs

@@ -3,7 +3,7 @@ import { cn } from "../lib/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/skeleton.tsx
-const skeletonVariants = cva("bg-accent motion-safe:animate-pulse", {
+const skeletonVariants = cva("bg-foreground/10 motion-safe:animate-pulse", {
 	variants: { shape: {
 		rectangle: "rounded-md",
 		circle: "rounded-full"

package/dist/components/stat.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { useChartContext } from "./chart-container.mjs";
+import * as React$1 from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import * as React$1 from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
 //#region src/components/stat.tsx
 const statDeltaVariants = cva("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none", {
@@ -35,13 +35,13 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 	const sentiment = delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "stat",
-		className: cn("flex flex-col gap-2.5", className),
+		className: cn("flex min-w-0 flex-col gap-2.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline gap-3",
+			className: "flex min-w-0 items-baseline gap-x-2.5",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "type-display-sm font-bold leading-none tracking-tight tabular-nums text-foreground",
+					className: "type-display-sm min-w-0 truncate font-bold leading-none tracking-tight tabular-nums text-foreground",
 					children: value
 				}),
 				unit && /* @__PURE__ */ jsx("span", {
@@ -55,7 +55,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 				})
 			]
 		}), hasSpark && /* @__PURE__ */ jsx("div", {
-			className: "h-9 w-full",
+			className: "pointer-events-none h-9 w-full",
 			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",

package/dist/components/tabs.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 //#region src/components/tabs.d.ts

package/dist/components/tabs.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
+import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { createContext, use } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 //#region src/components/tabs.tsx

package/dist/components/textarea.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Label } from "./label.mjs";
+import * as React$1 from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React$1 from "react";
 //#region src/components/textarea.tsx
 function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
 	const generatedId = React$1.useId();

package/dist/components/toggle-group.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
 //#region src/components/toggle-group.d.ts

package/dist/components/toggle-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import * as React$1 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group.tsx
 const toggleGroupItemVariants = cva([

package/dist/components/tooltip-icon-button.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Slottable } from "@radix-ui/react-slot";
 //#region src/components/tooltip-icon-button.tsx
 const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", ...rest }, ref) => {

package/dist/lib/chart-palette.mjs

@@ -42,7 +42,10 @@ const HEAT_RAMPS = {
 	magenta: heatRampMagenta,
 	cyan: heatRampMint
 };
-const heatRamp = (palette, empty) => HEAT_RAMPS[palette](empty);
+const heatRamp = (palette, empty, isDark = true) => {
+	const [, ...colored] = HEAT_RAMPS[palette](empty);
+	return [empty, ...isDark ? colored : colored.reverse()];
+};
 const hexToRgb = (hex) => {
 	const value = Number.parseInt(hex.slice(1), 16);
 	return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.144.0",
+  "version": "1.145.1",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -52,7 +52,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "recharts": "^3.8.1",
+    "recharts": "^3.9.0",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {

package/src/components/area-chart.tsx

@@ -21,6 +21,7 @@ import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
 import { ChartTooltipContent } from "./chart-tooltip";
+import { Skeleton } from "./skeleton";
 
 const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
 
@@ -192,13 +193,17 @@ function AreaChart({
   const isEmpty = data.length === 0 || rendered.length === 0;
 
   return (
-    <div data-slot="area-chart" className={cn("flex w-full flex-col gap-3", className)}>
+    <div
+      data-slot="area-chart"
+      className={cn(
+        "flex w-full flex-col gap-3",
+        "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+        className,
+      )}
+    >
       <div className="w-full" style={{ height }}>
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
-            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
-            loading…
-          </div>
+          <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (
           <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
             no data in range
@@ -238,7 +243,7 @@ function AreaChart({
                 {...axis}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
-                minTickGap={44}
+                minTickGap={56}
               />
               <YAxis
                 {...axis}

package/src/components/bar-chart.tsx

@@ -22,6 +22,7 @@ import type { ChartMarker } from "./area-chart";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
 import { ChartTooltipContent } from "./chart-tooltip";
+import { Skeleton } from "./skeleton";
 
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
@@ -155,13 +156,17 @@ function BarChart({
   const isEmpty = data.length === 0 || rendered.length === 0;
 
   return (
-    <div data-slot="bar-chart" className={cn("flex w-full flex-col gap-3", className)}>
+    <div
+      data-slot="bar-chart"
+      className={cn(
+        "flex w-full flex-col gap-3",
+        "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+        className,
+      )}
+    >
       <div className="w-full" style={{ height }}>
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
-            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
-            loading…
-          </div>
+          <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (
           <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
             no data in range
@@ -202,7 +207,7 @@ function BarChart({
                 {...axis}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
-                minTickGap={44}
+                minTickGap={56}
               />
               <YAxis
                 {...axis}
@@ -268,7 +273,7 @@ function BarChart({
                   strokeWidth={0}
                   radius={radiusFor(slot)}
                   maxBarSize={MAX_BAR_SIZE}
-                  activeBar={{ fillOpacity: 1, stroke: theme.card, strokeWidth: 1 }}
+                  activeBar={false}
                   isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"