@alpic-ai/ui 0.0.0-dev.g00dcac1 → 0.0.0-dev.g014cfc8

package/dist/components/stat.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useChartContext } from "./chart-container.mjs";
+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", {
+	variants: { sentiment: {
+		positive: "text-success bg-success/12",
+		negative: "text-destructive bg-destructive/12"
+	} },
+	defaultVariants: { sentiment: "positive" }
+});
+const toSparkData = (sparkline) => (sparkline ?? []).map((point, index) => typeof point === "number" ? {
+	index,
+	value: point
+} : {
+	index,
+	value: point.value
+});
+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 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",
+		className: cn("flex flex-col gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline gap-3",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "type-display-sm font-bold leading-none tracking-tight tabular-nums text-foreground",
+					children: value
+				}),
+				unit && /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5",
+					children: unit
+				}),
+				delta && /* @__PURE__ */ jsxs(DeltaPill, {
+					sentiment,
+					className: "mb-0.5",
+					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }), delta.label ?? `${delta.value}%`]
+				})
+			]
+		}), 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: {
+						top: 4,
+						right: 2,
+						bottom: 0,
+						left: 2
+					},
+					children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id: gradientId,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: sparkColor,
+							stopOpacity: .4
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: sparkColor,
+							stopOpacity: 0
+						})]
+					}) }), /* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: "value",
+						stroke: sparkColor,
+						strokeWidth: 1.6,
+						fill: `url(#${gradientId})`,
+						isAnimationActive: false,
+						dot: ({ cx, cy, index }) => {
+							return index === sparkData.length - 1 && cx != null && cy != null ? /* @__PURE__ */ jsx("circle", {
+								cx,
+								cy,
+								r: 2.5,
+								fill: sparkColor
+							}, index) : /* @__PURE__ */ jsx("g", {}, index);
+						}
+					})]
+				})
+			})
+		})]
+	});
+}
+function DeltaPill({ sentiment, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(statDeltaVariants({ sentiment }), className),
+		...props
+	});
+}
+//#endregion
+export { Stat, statDeltaVariants };

package/dist/components/wizard.d.mts

@@ -1,24 +1,6 @@
 import * as React$1 from "react";
 
 //#region src/components/wizard.d.ts
-interface WizardStep {
-  id: string;
-  label: string;
-}
-interface WizardStepsProps {
-  steps: readonly WizardStep[];
-  activeIdx: number;
-  onSelect: (idx: number) => void;
-  ariaLabel?: string;
-  className?: string;
-}
-declare function WizardSteps({
-  steps,
-  activeIdx,
-  onSelect,
-  ariaLabel,
-  className
-}: WizardStepsProps): React$1.JSX.Element;
 interface WizardProgressProps extends React$1.ComponentProps<"div"> {
   current: number;
   total: number;
@@ -30,4 +12,4 @@ declare function WizardProgress({
   ...props
 }: WizardProgressProps): React$1.JSX.Element;
 //#endregion
-export { WizardProgress, type WizardStep, WizardSteps };
+export { WizardProgress };

package/dist/components/wizard.mjs

@@ -1,25 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/wizard.tsx
-function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }) {
-	return /* @__PURE__ */ jsx(TabsNav, {
-		orientation: "vertical",
-		"aria-label": ariaLabel,
-		className,
-		children: /* @__PURE__ */ jsx(TabsNavList, { children: steps.map((step, idx) => /* @__PURE__ */ jsx(TabsNavTrigger, {
-			active: idx === activeIdx,
-			asChild: true,
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => onSelect(idx),
-				className: "w-full justify-start text-left",
-				children: step.label
-			})
-		}, step.id)) })
-	});
-}
 function WizardProgress({ current, total, className, ...props }) {
 	const percent = total > 0 ? Math.round(current / total * 100) : 0;
 	return /* @__PURE__ */ jsxs("div", {
@@ -43,4 +25,4 @@ function WizardProgress({ current, total, className, ...props }) {
 	});
 }
 //#endregion
-export { WizardProgress, WizardSteps };
+export { WizardProgress };

package/dist/hooks/use-chart-theme.d.mts

@@ -0,0 +1,18 @@
+//#region src/hooks/use-chart-theme.d.ts
+interface ChartTheme {
+  foreground: string;
+  mutedForeground: string;
+  axisForeground: string;
+  grid: string;
+  border: string;
+  card: string;
+  popover: string;
+  destructive: string;
+  warning: string;
+  success: string;
+  fontMono: string;
+  isDark: boolean;
+}
+declare function useChartTheme(): ChartTheme;
+//#endregion
+export { ChartTheme, useChartTheme };

package/dist/hooks/use-chart-theme.mjs

@@ -0,0 +1,57 @@
+"use client";
+import * as React$1 from "react";
+//#region src/hooks/use-chart-theme.ts
+const TOKEN_MAP = {
+	foreground: "--color-foreground",
+	mutedForeground: "--color-muted-foreground",
+	axisForeground: "--color-quaternary-foreground",
+	grid: "--color-sidebar-border",
+	border: "--color-border",
+	card: "--color-card",
+	popover: "--color-popover",
+	destructive: "--color-destructive",
+	warning: "--color-warning",
+	success: "--color-success",
+	fontMono: "--font-mono"
+};
+const FALLBACK = {
+	foreground: "#121e1e",
+	mutedForeground: "#3a4848",
+	axisForeground: "#6f7f7f",
+	grid: "#e3eaea",
+	border: "#acb8b8",
+	card: "#f8fafa",
+	popover: "#ffffff",
+	destructive: "#d92d20",
+	warning: "#dc6803",
+	success: "#079455",
+	fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	isDark: false
+};
+const readTheme = () => {
+	if (typeof window === "undefined") return FALLBACK;
+	const styles = window.getComputedStyle(document.documentElement);
+	const entries = Object.entries(TOKEN_MAP).map(([key, token]) => {
+		return [key, styles.getPropertyValue(token).trim() || FALLBACK[key]];
+	});
+	return {
+		...Object.fromEntries(entries),
+		isDark: document.documentElement.classList.contains("dark")
+	};
+};
+function useChartTheme() {
+	const [theme, setTheme] = React$1.useState(readTheme);
+	React$1.useEffect(() => {
+		const update = () => setTheme(readTheme());
+		update();
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	return theme;
+}
+//#endregion
+export { useChartTheme };

package/dist/hooks/use-reduced-motion.d.mts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-reduced-motion.d.ts
+declare function useReducedMotion(): boolean;
+//#endregion
+export { useReducedMotion };

package/dist/hooks/use-reduced-motion.mjs

@@ -0,0 +1,16 @@
+"use client";
+import * as React$1 from "react";
+//#region src/hooks/use-reduced-motion.ts
+function useReducedMotion() {
+	const [reduced, setReduced] = React$1.useState(false);
+	React$1.useEffect(() => {
+		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const update = () => setReduced(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return reduced;
+}
+//#endregion
+export { useReducedMotion };

package/dist/lib/chart-palette.d.mts

@@ -0,0 +1,4 @@
+//#region src/lib/chart-palette.d.ts
+type ChartPaletteName = "magenta" | "cyan";
+//#endregion
+export { ChartPaletteName };

package/dist/lib/chart-palette.mjs

@@ -0,0 +1,95 @@
+const CHART_PALETTES = {
+	magenta: [
+		"#e90060",
+		"#ff7eb6",
+		"#9b5de5",
+		"#5b8def",
+		"#36c5f0",
+		"#6eece7",
+		"#d98a3d",
+		"#2bb6a3"
+	],
+	cyan: [
+		"#17b8cf",
+		"#41ddc9",
+		"#3f8ff0",
+		"#8b6cf0",
+		"#c46bf0",
+		"#ff7eb6",
+		"#e90060",
+		"#c98be0"
+	]
+};
+const heatRampMagenta = (empty) => [
+	empty,
+	"#5b0a31",
+	"#a3034a",
+	"#e90060",
+	"#ff7eb6"
+];
+const heatRampMint = (empty) => [
+	empty,
+	"#0c4a52",
+	"#17b8cf",
+	"#41ddc9",
+	"#6eece7"
+];
+const HEAT_EMPTY = {
+	light: "#eef3f3",
+	dark: "#102222"
+};
+const HEAT_RAMPS = {
+	magenta: heatRampMagenta,
+	cyan: heatRampMint
+};
+const heatRamp = (palette, empty) => HEAT_RAMPS[palette](empty);
+const hexToRgb = (hex) => {
+	const value = Number.parseInt(hex.slice(1), 16);
+	return [
+		value >> 16 & 255,
+		value >> 8 & 255,
+		value & 255
+	];
+};
+const luminance = (hex) => {
+	const linear = hexToRgb(hex).map((channel) => {
+		const normalized = channel / 255;
+		return normalized <= .03928 ? normalized / 12.92 : ((normalized + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * linear[0] + .7152 * linear[1] + .0722 * linear[2];
+};
+const paletteColor = (palette, index) => {
+	return palette[(index % palette.length + palette.length) % palette.length];
+};
+const RAMP_ENDS = {
+	magenta: ["#e90060", "#ff7eb6"],
+	cyan: ["#17b8cf", "#6eece7"]
+};
+const mixHex = (from, to, fraction) => {
+	const [fromR, fromG, fromB] = hexToRgb(from);
+	const [toR, toG, toB] = hexToRgb(to);
+	const ratio = Math.min(1, Math.max(0, fraction));
+	const channel = (start, end) => Math.round(start + (end - start) * ratio);
+	return `#${[
+		channel(fromR, toR),
+		channel(fromG, toG),
+		channel(fromB, toB)
+	].map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+};
+const rampColor = (palette, fraction) => {
+	const [from, to] = RAMP_ENDS[palette];
+	return mixHex(from, to, fraction);
+};
+/**
+* Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
+* so a normalized 0..1 value reads as a smooth single-hue gradient rather than
+* the five discrete bands.
+*/
+const heatColor = (stops, fraction) => {
+	const clamped = Math.min(1, Math.max(0, fraction));
+	const segment = (stops.length - 1) * clamped;
+	const lowerIndex = Math.min(stops.length - 2, Math.floor(segment));
+	return mixHex(stops[lowerIndex], stops[lowerIndex + 1], segment - lowerIndex);
+};
+//#endregion
+export { CHART_PALETTES, HEAT_EMPTY, heatColor, heatRamp, luminance, paletteColor, rampColor };

package/dist/lib/chart.d.mts

@@ -0,0 +1,14 @@
+//#region src/lib/chart.d.ts
+/**
+ * Declarative description of one plotted series. The same shape drives area,
+ * line and bar charts — what differs is how each chart renders it.
+ */
+interface ChartSeries {
+  key: string;
+  name?: string;
+  color?: string;
+  semantic?: "error" | "warning" | "success";
+  dashed?: boolean;
+}
+//#endregion
+export { ChartSeries };

package/dist/lib/chart.mjs

@@ -0,0 +1,42 @@
+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) => {
+	if (semantic === "error") return theme.destructive;
+	if (semantic === "warning") return theme.warning;
+	return theme.success;
+};
+/**
+* Resolve each series to a concrete color and name. Color precedence:
+* explicit `color` → `semantic` token → palette slot by declared index (so the
+* lead series keeps the lead color even after the bands are reordered).
+*/
+const resolveSeries = (series, palette, theme) => series.map((entry, index) => ({
+	...entry,
+	name: entry.name ?? entry.key,
+	color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index))
+}));
+/**
+* Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
+* lightest at the top edge. Sorting by luminance enforces that for any palette
+* (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
+* 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, makeXAxisTick, orderByLuminance, resolveSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.g00dcac1",
+  "version": "0.0.0-dev.g014cfc8",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,35 +23,36 @@
     "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",
+    "recharts": "^3.8.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
@@ -59,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"
   },