@alpic-ai/ui 1.155.0 → 1.157.0

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

@@ -13,6 +13,8 @@ interface BarChartProps {
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
+  bare?: boolean;
+  barCategoryGap?: number | string;
   palette?: ChartPaletteName;
   referenceLine?: {
     y: number;
@@ -27,6 +29,6 @@ interface BarChartProps {
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function BarChart({ data, index, series, variant, legend, legendAlign, valueLabels, height, yAxisWidth, palette, referenceLine, markers, texture, partialLastBar, loading, valueFormatter, labelFormatter, className }: BarChartProps): React$1.JSX.Element;
+declare function BarChart({ data, index, series, variant, legend, legendAlign, valueLabels, height, yAxisWidth, bare, barCategoryGap, palette, referenceLine, markers, texture, partialLastBar, loading, valueFormatter, labelFormatter, className }: BarChartProps): React$1.JSX.Element;
 //#endregion
 export { BarChart, BarChartProps };

package/dist/components/bar-chart.mjs

@@ -12,7 +12,7 @@ import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, Responsive
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
-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 }) {
+function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, bare = false, barCategoryGap, 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 resolved = resolveSeries(series, paletteColors, theme);
@@ -39,7 +39,12 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 		rendered,
 		stacked
 	]);
-	const margin = {
+	const margin = bare ? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	} : {
 		top: markers?.length || valueLabels ? 18 : 8,
 		right: 8,
 		bottom: 2,
@@ -100,7 +105,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 					data,
 					stackOffset: variant === "expand" ? "expand" : "none",
 					margin,
-					barCategoryGap: stacked ? "20%" : "16%",
+					barCategoryGap: barCategoryGap ?? (stacked ? "20%" : "16%"),
 					children: [
 						/* @__PURE__ */ jsxs("defs", { children: [!stacked && rendered.map((entry, slot) => /* @__PURE__ */ jsxs("linearGradient", {
 							id: `bar-${reactId}-${slot}`,
@@ -138,7 +143,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								strokeOpacity: .65
 							})]
 						})] }),
-						/* @__PURE__ */ jsx(CartesianGrid, {
+						!bare && /* @__PURE__ */ jsx(CartesianGrid, {
 							vertical: false,
 							stroke: theme.grid,
 							strokeDasharray: "2 4"
@@ -146,17 +151,20 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 						/* @__PURE__ */ jsx(XAxis, {
 							dataKey: index,
 							...axis,
+							hide: bare,
+							height: bare ? 0 : void 0,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
 							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
-							width: yAxisWidth,
+							hide: bare,
+							width: bare ? 0 : yAxisWidth,
 							domain: referenceLine && variant !== "expand" ? [0, Math.ceil(Math.max(numericMax, referenceLine.y) * 1.15)] : void 0,
 							tickFormatter: (value) => variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
 						}),
-						/* @__PURE__ */ jsx(Tooltip, {
+						!bare && /* @__PURE__ */ jsx(Tooltip, {
 							offset: 12,
 							allowEscapeViewBox: {
 								x: false,
@@ -172,7 +180,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								showTotal: withTotal
 							})
 						}),
-						renderReferenceLine({
+						!bare && renderReferenceLine({
 							referenceLine,
 							numericMax,
 							theme
@@ -215,11 +223,11 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								content: renderValueLabel(entry.color)
 							})]
 						}, entry.key)),
-						renderMarkers(markers, theme)
+						!bare && renderMarkers(markers, theme)
 					]
 				})
 			})
-		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
+		}), legend && !bare && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
 			align: legendAlign,
 			insetLeft: yAxisWidth

package/dist/components/form.d.mts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 //#region src/components/form.d.ts
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;

package/dist/components/skeleton.d.mts

@@ -1,7 +1,7 @@
 import { VariantProps } from "class-variance-authority";
 //#region src/components/skeleton.d.ts
 declare const skeletonVariants: (props?: ({
-  shape?: "rectangle" | "circle" | null | undefined;
+  shape?: "circle" | "rectangle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}
 declare function Skeleton({ className, shape, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/stat.d.mts

@@ -8,6 +8,7 @@ interface StatDelta {
   direction: "up" | "down";
   invert?: boolean;
   label?: React$1.ReactNode;
+  indicator?: "arrow" | "sign";
 }
 interface StatProps extends React$1.ComponentProps<"div"> {
   value: React$1.ReactNode;
@@ -17,7 +18,11 @@ interface StatProps extends React$1.ComponentProps<"div"> {
     value: number;
   }>;
   semantic?: "error" | "warning" | "success";
+  compact?: boolean;
 }
-declare function Stat({ value, unit, delta, sparkline, semantic, className, ...props }: StatProps): React$1.JSX.Element;
+declare function Stat({ value, unit, delta, sparkline, semantic, compact, className, ...props }: StatProps): React$1.JSX.Element;
+declare function StatSparkline({ sparkline, semantic, className }: Pick<StatProps, "sparkline" | "semantic"> & {
+  className?: string;
+}): React$1.JSX.Element | null;
 //#endregion
-export { Stat, StatDelta, StatProps, statDeltaVariants };
+export { Stat, StatDelta, StatProps, StatSparkline, statDeltaVariants };

package/dist/components/stat.mjs

@@ -2,7 +2,7 @@
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React$1 from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
@@ -26,85 +26,92 @@ const SEMANTIC_KEY = {
 	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];
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, 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 min-w-0 flex-col gap-2.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-baseline gap-x-2.5",
+			className: cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5"),
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "type-display-sm min-w-0 truncate font-bold leading-none tracking-tight tabular-nums text-foreground",
+					className: cn("min-w-0 font-bold leading-none tracking-tight tabular-nums text-foreground", compact ? "type-display-xs whitespace-nowrap" : "type-display-sm truncate"),
 					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, {
+				delta && /* @__PURE__ */ jsx(DeltaPill, {
 					sentiment,
-					className: "mb-0.5",
-					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }), delta.label ?? `${delta.value}%`]
+					className: cn("mb-0.5 shrink-0", compact && "px-1.5"),
+					children: delta.indicator === "sign" ? /* @__PURE__ */ jsxs(Fragment, { children: [delta.direction === "up" ? "+" : "-", delta.label ?? `${delta.value}%`] }) : /* @__PURE__ */ jsxs(Fragment, { children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }), delta.label ?? `${delta.value}%`] })
 				})
 			]
-		}), hasSpark && /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none h-9 w-full",
-			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
-				width: "100%",
-				height: "100%",
-				initialDimension: {
-					width: 0,
-					height: 36
+		}), /* @__PURE__ */ jsx(StatSparkline, {
+			sparkline,
+			semantic
+		})]
+	});
+}
+function StatSparkline({ sparkline, semantic, className }) {
+	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];
+	if (!hasSpark) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("pointer-events-none h-9 w-full", className),
+		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__ */ 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);
-						}
+				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 }) {
@@ -114,4 +121,4 @@ function DeltaPill({ sentiment, className, ...props }) {
 	});
 }
 //#endregion
-export { Stat, statDeltaVariants };
+export { Stat, StatSparkline, statDeltaVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.155.0",
+  "version": "1.157.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,12 +23,12 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.25.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-hook-form": "^7.81.0",
+    "react-hook-form": "^7.82.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.2",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
@@ -57,15 +57,15 @@
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.3.2",
+    "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.24.0",
-    "react-hook-form": "^7.81.0",
+    "lucide-react": "^1.25.0",
+    "react-hook-form": "^7.82.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.2",
-    "tsdown": "^0.22.5",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "^0.22.9",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },

package/src/components/bar-chart.tsx

@@ -42,6 +42,8 @@ export interface BarChartProps {
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
+  bare?: boolean;
+  barCategoryGap?: number | string;
   palette?: ChartPaletteName;
   referenceLine?: { y: number; label?: string; band?: boolean };
   markers?: ChartMarker[];
@@ -63,6 +65,8 @@ function BarChart({
   valueLabels = false,
   height = 200,
   yAxisWidth = 48,
+  bare = false,
+  barCategoryGap,
   palette,
   referenceLine,
   markers,
@@ -99,7 +103,9 @@ function BarChart({
     });
   }, [data, rendered, stacked]);
 
-  const margin = { top: markers?.length || valueLabels ? 18 : 8, right: 8, bottom: 2, left: 0 };
+  const margin = bare
+    ? { top: 0, right: 0, bottom: 0, left: 0 }
+    : { top: markers?.length || valueLabels ? 18 : 8, right: 8, bottom: 2, left: 0 };
 
   const axis = makeChartAxis(theme);
 
@@ -174,7 +180,7 @@ function BarChart({
               data={data as Record<string, string | number>[]}
               stackOffset={variant === "expand" ? "expand" : "none"}
               margin={margin}
-              barCategoryGap={stacked ? "20%" : "16%"}
+              barCategoryGap={barCategoryGap ?? (stacked ? "20%" : "16%")}
             >
               <defs>
                 {!stacked &&
@@ -198,17 +204,20 @@ function BarChart({
                 )}
               </defs>
 
-              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              {!bare && <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />}
               <XAxis
                 dataKey={index}
                 {...axis}
+                hide={bare}
+                height={bare ? 0 : undefined}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
                 minTickGap={56}
               />
               <YAxis
                 {...axis}
-                width={yAxisWidth}
+                hide={bare}
+                width={bare ? 0 : yAxisWidth}
                 domain={
                   referenceLine && variant !== "expand"
                     ? [0, Math.ceil(Math.max(numericMax, referenceLine.y) * 1.15)]
@@ -218,19 +227,21 @@ function BarChart({
                   variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
                 }
               />
-              <Tooltip
-                offset={12}
-                allowEscapeViewBox={{ x: false, y: false }}
-                cursor={{ fill: lead?.color ?? theme.mutedForeground, fillOpacity: theme.isDark ? 0.1 : 0.06 }}
-                content={
-                  <ChartTooltipContent
-                    valueFormatter={valueFormatter}
-                    labelFormatter={labelFormatter}
-                    showTotal={withTotal}
-                  />
-                }
-              />
-              {renderReferenceLine({ referenceLine, numericMax, theme })}
+              {!bare && (
+                <Tooltip
+                  offset={12}
+                  allowEscapeViewBox={{ x: false, y: false }}
+                  cursor={{ fill: lead?.color ?? theme.mutedForeground, fillOpacity: theme.isDark ? 0.1 : 0.06 }}
+                  content={
+                    <ChartTooltipContent
+                      valueFormatter={valueFormatter}
+                      labelFormatter={labelFormatter}
+                      showTotal={withTotal}
+                    />
+                  }
+                />
+              )}
+              {!bare && renderReferenceLine({ referenceLine, numericMax, theme })}
 
               {rendered.map((entry, slot) => (
                 <Bar
@@ -272,13 +283,13 @@ function BarChart({
                 </Bar>
               ))}
 
-              {renderMarkers(markers, theme)}
+              {!bare && renderMarkers(markers, theme)}
             </RechartsBarChart>
           </ResponsiveContainer>
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
+      {legend && !bare && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/stat.tsx

@@ -26,6 +26,7 @@ export interface StatDelta {
   direction: "up" | "down";
   invert?: boolean;
   label?: React.ReactNode;
+  indicator?: "arrow" | "sign";
 }
 
 export interface StatProps extends React.ComponentProps<"div"> {
@@ -34,6 +35,7 @@ export interface StatProps extends React.ComponentProps<"div"> {
   delta?: StatDelta | null;
   sparkline?: number[] | Array<{ value: number }>;
   semantic?: "error" | "warning" | "success";
+  compact?: boolean;
 }
 
 const toSparkData = (sparkline: StatProps["sparkline"]) =>
@@ -43,61 +45,87 @@ const toSparkData = (sparkline: StatProps["sparkline"]) =>
 
 const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
 
-function Stat({ value, unit, delta, sparkline, semantic, className, ...props }: StatProps) {
-  const { palette, theme } = useChartContext();
-  const gradientId = React.useId().replace(/:/g, "");
-  const sparkData = React.useMemo(() => toSparkData(sparkline), [sparkline]);
-  const hasSpark = sparkData.some((point) => point.value > 0);
-  // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
-  const sparkColor = semantic ? theme[SEMANTIC_KEY[semantic]] : palette[0]!;
-
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, ...props }: StatProps) {
   const sentiment =
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
 
   return (
     <div data-slot="stat" className={cn("flex min-w-0 flex-col gap-2.5", className)} {...props}>
-      <div className="flex min-w-0 items-baseline gap-x-2.5">
-        <span className="type-display-sm min-w-0 truncate font-bold leading-none tracking-tight tabular-nums text-foreground">
+      <div className={cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5")}>
+        <span
+          className={cn(
+            "min-w-0 font-bold leading-none tracking-tight tabular-nums text-foreground",
+            compact ? "type-display-xs whitespace-nowrap" : "type-display-sm truncate",
+          )}
+        >
           {value}
         </span>
         {unit && <span className="font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5">{unit}</span>}
         {delta && (
-          <DeltaPill sentiment={sentiment} className="mb-0.5">
-            {delta.direction === "up" ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />}
-            {delta.label ?? `${delta.value}%`}
+          <DeltaPill sentiment={sentiment} className={cn("mb-0.5 shrink-0", compact && "px-1.5")}>
+            {delta.indicator === "sign" ? (
+              <>
+                {delta.direction === "up" ? "+" : "-"}
+                {delta.label ?? `${delta.value}%`}
+              </>
+            ) : (
+              <>
+                {delta.direction === "up" ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />}
+                {delta.label ?? `${delta.value}%`}
+              </>
+            )}
           </DeltaPill>
         )}
       </div>
-      {hasSpark && (
-        <div className="pointer-events-none h-9 w-full">
-          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height: 36 }}>
-            <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
-              <defs>
-                <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor={sparkColor} stopOpacity={0.4} />
-                  <stop offset="100%" stopColor={sparkColor} stopOpacity={0} />
-                </linearGradient>
-              </defs>
-              <Area
-                type="monotone"
-                dataKey="value"
-                stroke={sparkColor}
-                strokeWidth={1.6}
-                fill={`url(#${gradientId})`}
-                isAnimationActive={false}
-                dot={({ cx, cy, index }) => {
-                  const isLast = index === sparkData.length - 1;
-                  return isLast && cx != null && cy != null ? (
-                    <circle key={index} cx={cx} cy={cy} r={2.5} fill={sparkColor} />
-                  ) : (
-                    <g key={index} />
-                  );
-                }}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </div>
-      )}
+      <StatSparkline sparkline={sparkline} semantic={semantic} />
+    </div>
+  );
+}
+
+function StatSparkline({
+  sparkline,
+  semantic,
+  className,
+}: Pick<StatProps, "sparkline" | "semantic"> & { className?: string }) {
+  const { palette, theme } = useChartContext();
+  const gradientId = React.useId().replace(/:/g, "");
+  const sparkData = React.useMemo(() => toSparkData(sparkline), [sparkline]);
+  const hasSpark = sparkData.some((point) => point.value > 0);
+  // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
+  const sparkColor = semantic ? theme[SEMANTIC_KEY[semantic]] : palette[0]!;
+
+  if (!hasSpark) {
+    return null;
+  }
+
+  return (
+    <div className={cn("pointer-events-none h-9 w-full", className)}>
+      <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height: 36 }}>
+        <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={sparkColor} stopOpacity={0.4} />
+              <stop offset="100%" stopColor={sparkColor} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <Area
+            type="monotone"
+            dataKey="value"
+            stroke={sparkColor}
+            strokeWidth={1.6}
+            fill={`url(#${gradientId})`}
+            isAnimationActive={false}
+            dot={({ cx, cy, index }) => {
+              const isLast = index === sparkData.length - 1;
+              return isLast && cx != null && cy != null ? (
+                <circle key={index} cx={cx} cy={cy} r={2.5} fill={sparkColor} />
+              ) : (
+                <g key={index} />
+              );
+            }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
     </div>
   );
 }
@@ -110,4 +138,4 @@ function DeltaPill({
   return <span className={cn(statDeltaVariants({ sentiment }), className)} {...props} />;
 }
 
-export { Stat, statDeltaVariants };
+export { Stat, StatSparkline, statDeltaVariants };