@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/agents/report-rules.json

@@ -0,0 +1,7 @@
+[
+  "Never paint html or body beyond the base styles report.css sets.",
+  "Fluid width. No outer card and no banner title.",
+  "A panel with its own background gets 16px padding and var(--radius).",
+  "Charts get fixed pixel heights.",
+  "Never use 100vh."
+]

package/dist/components/registry/charts/area-chart-card.js

@@ -1,21 +1,39 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
-import { jsx } from "react/jsx-runtime";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
 function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		...props,
-		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
+		children: [/* @__PURE__ */ jsx("defs", { children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsxs("linearGradient", {
+			id: `${id}-${index}`,
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0%",
+				stopColor: color,
+				stopOpacity: stacked ? .5 : .32
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "100%",
+				stopColor: color,
+				stopOpacity: stacked ? .15 : .02
+			})]
+		}, key)) }), props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
 			type: curve,
-			fill: color,
-			fillOpacity: stacked ? .4 : .2,
+			fill: stacked || index === 0 ? `url(#${id}-${index})` : "none",
 			stroke: color,
+			strokeWidth: 2,
+			dot: endDot(color, props.data.length),
 			stackId: stacked ? "stack" : void 0
-		}, key))
+		}, key))]
 	});
 }
 //#endregion

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -10,6 +10,5 @@ export interface BarChartCardProps<T extends object, K extends keyof T> extends
   /** Called with a clicked category's x value, or null when the picked one is clicked again. */
   onSelect?: (value: T[K] | null) => void;
 }
-/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
 export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/bar-chart-card.js

@@ -1,39 +1,53 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
+const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
+const dimUnselected = (color, isSelected) => isSelected ? color : `color-mix(in oklab, ${color} 55%, var(--card))`;
+const signedFill = (color, isSelected) => `color-mix(in oklab, ${color} ${isSelected ? 35 : 15}%, var(--card))`;
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...props,
+		yDomain: props.yDomain ?? (props.data.some((row) => props.series.some(({ key }) => Number(row[key]) > 0)) ? void 0 : DOWN_FROM_ZERO),
 		stackOffset: stacked ? "sign" : void 0,
-		children: props.series.map(({ key, color, negativeColor }, index) => /* @__PURE__ */ jsx(Bar, {
-			dataKey: key,
-			fill: color,
-			stackId: stacked ? "stack" : void 0,
-			radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
-				0,
-				2,
-				2,
-				0
-			] : [
-				2,
-				2,
-				0,
-				0
-			] : 0,
-			className: onSelect ? "cursor-pointer" : void 0,
-			onClick: onSelect && ((bar) => {
-				const value = bar.payload?.[props.xKey];
-				if (value !== void 0) onSelect(value === selected ? null : value);
-			}),
-			children: (negativeColor || selected !== null) && props.data.map((row, i) => /* @__PURE__ */ jsx(Cell, {
-				fill: negativeColor && Number(row[key]) < 0 ? negativeColor : color,
-				fillOpacity: selected === null || row[props.xKey] === selected ? 1 : .35
-			}, i))
-		}, key))
+		onClick: onSelect ? ({ activeTooltipIndex, isTooltipActive }) => {
+			if (!isTooltipActive || activeTooltipIndex == null) return;
+			const row = props.data[Number(activeTooltipIndex)];
+			if (row) onSelect(row[props.xKey] === selected ? null : row[props.xKey]);
+		} : void 0,
+		children: props.series.map((item, index) => {
+			const { key, label, color, negativeColor } = item;
+			return /* @__PURE__ */ jsx(Bar, {
+				dataKey: key,
+				name: label,
+				fill: seriesFill(item, props.data),
+				maxBarSize: props.horizontal ? 24 : void 0,
+				stackId: stacked ? "stack" : void 0,
+				radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
+					0,
+					2,
+					2,
+					0
+				] : [
+					2,
+					2,
+					0,
+					0
+				] : 0,
+				children: (negativeColor || selected !== null) && props.data.map((row, i) => {
+					const isSelected = selected === null || row[props.xKey] === selected;
+					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
+					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
+						fill: signedFill(tone, isSelected),
+						stroke: dimUnselected(tone, isSelected),
+						strokeWidth: 1.5
+					}, i) : /* @__PURE__ */ jsx(Cell, { fill: dimUnselected(tone, isSelected) }, i);
+				})
+			}, key);
+		})
 	});
 }
 //#endregion

package/dist/components/registry/charts/line-chart-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
@@ -13,7 +13,7 @@ function LineChartCard({ curve = "monotone", ...props }) {
 			type: curve,
 			stroke: color,
 			strokeWidth: 2,
-			dot: false
+			dot: endDot(color, props.data.length)
 		}, key))
 	});
 }

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -6,6 +6,8 @@ export interface SectionCard {
   value: React$1.ReactNode;
   /** Outline badge, top right; usually a <Delta />. */
   badge?: React$1.ReactNode;
+  /** A small chart under the value, usually a <Sparkline /> of the recent run. */
+  trend?: React$1.ReactNode;
   /** Bold first footer line. */
   headline?: React$1.ReactNode;
   /** Muted second footer line. */

package/dist/components/registry/dashboard-01/section-cards.js

@@ -1,7 +1,8 @@
 "use client";
 import { Badge } from "../../ui/badge.js";
-import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
+import { useSurface } from "../../siyahi/siyahi-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboard-01/section-cards.tsx
@@ -13,43 +14,49 @@ const COLUMNS = {
 	6: "@3xl/main:grid-cols-3"
 };
 function SectionCards({ items, selected, onSelect }) {
+	const ruled = useSurface() === "ruled";
 	return /* @__PURE__ */ jsx("div", {
-		className: "@container/main",
+		className: cn("@container/main", ruled && "overflow-hidden border-y"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1 gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
-			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
-				className: cn("@container/card", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", onSelect && item.disabled && "opacity-60"),
-				children: [
-					onSelect && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": item.label,
-						"aria-pressed": item.label === selected,
-						disabled: item.disabled,
-						onClick: () => onSelect(item.label),
-						className: "absolute inset-0 z-10 rounded-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
-					}),
-					/* @__PURE__ */ jsxs(CardHeader, { children: [
-						/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
-						/* @__PURE__ */ jsx(CardTitle, {
-							className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
-							children: item.value
+			className: cn("grid grid-cols-1", ruled ? "-mt-px -ml-px" : "gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
+			children: items.map((item) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "section-card",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: /* @__PURE__ */ jsxs(Card, {
+					className: cn("@container/card h-full [--card-spacing:--spacing(3)]", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
+					children: [
+						onSelect && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": item.label,
+							"aria-pressed": item.label === selected,
+							disabled: item.disabled,
+							onClick: () => onSelect(item.label),
+							className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 						}),
-						item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-							variant: "outline",
-							children: item.badge
-						}) })
-					] }),
-					(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-						className: "flex-col items-start gap-1.5 text-sm",
-						children: [item.headline && /* @__PURE__ */ jsx("div", {
-							className: "line-clamp-1 flex gap-2 font-medium",
-							children: item.headline
-						}), item.detail && /* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground",
-							children: item.detail
-						})]
-					})
-				]
+						/* @__PURE__ */ jsxs(CardHeader, { children: [
+							/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
+							/* @__PURE__ */ jsx(CardTitle, {
+								className: "text-2xl font-semibold tabular-nums",
+								children: item.value
+							}),
+							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								children: item.badge
+							}) })
+						] }),
+						item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
+						(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
+							className: "flex-col items-start gap-1 text-sm",
+							children: [item.headline && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-2 font-medium",
+								children: item.headline
+							}), item.detail && /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground",
+								children: item.detail
+							})]
+						})
+					]
+				})
 			}, item.label))
 		})
 	});

package/dist/components/registry/dashboardcn/bar-list.js

@@ -1,15 +1,16 @@
-import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { pct } from "../../../lib/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/registry/dashboardcn/bar-list.tsx
 function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, max: scale, onItemClick, className, ...props }) {
 	const locale = useLocale();
-	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+	const defaultFormat = React$1.useMemo(() => new Intl.NumberFormat(locale.numberLocale, {
 		notation: "compact",
 		maximumFractionDigits: 1
-	}).format(value));
+	}).format, [locale.numberLocale]);
+	const format = valueFormatter ?? defaultFormat;
 	const items = React$1.useMemo(() => {
 		if (sortOrder === "none") return data;
 		const sorted = [...data].sort((a, b) => a.value - b.value);
@@ -19,7 +20,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",
-		className: cn("flex flex-col gap-1.5", className),
+		className: cn("@container/bar-list grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1.5", className),
 		...props,
 		children: items.map((item) => {
 			const width = max > 0 ? item.value / max * 100 : 0;
@@ -28,16 +29,22 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 			const Label = item.href ? "a" : onItemClick ? "button" : "div";
 			return /* @__PURE__ */ jsxs("div", {
 				"data-slot": "bar-list-row",
-				className: "flex items-center gap-3 text-sm",
+				className: "col-span-2 grid grid-cols-subgrid items-center text-sm @max-sm/bar-list:items-start",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "relative flex h-8 min-w-0 flex-1 items-center",
+					className: "relative flex h-8 min-w-0 flex-1 items-center @max-sm/bar-list:h-auto @max-sm/bar-list:min-h-8 @max-sm/bar-list:items-start @max-sm/bar-list:pb-3",
 					children: [
 						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-track",
+							"aria-hidden": "true",
+							className: "bg-muted/60 absolute inset-0 rounded-md @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"data-slot": "bar-list-bar",
 							"aria-hidden": "true",
-							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300",
+							className: "absolute inset-y-0 left-0 rounded-md transition-[width] duration-300 @max-sm/bar-list:inset-y-auto @max-sm/bar-list:bottom-0 @max-sm/bar-list:h-1.5",
 							style: {
 								width: `${width}%`,
-								backgroundColor: `color-mix(in oklab, ${color} 20%, transparent)`
+								backgroundColor: item.detail ? "color-mix(in oklab, var(--muted-foreground) 20%, transparent)" : `color-mix(in oklab, ${color} 32%, transparent)`
 							}
 						}),
 						/* @__PURE__ */ jsxs(Label, {
@@ -46,12 +53,12 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 								type: "button",
 								onClick: () => onItemClick(item)
 							} : {},
-							className: cn("relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
+							className: cn("text-foreground relative flex min-w-0 items-center gap-2 px-2 text-left", interactive && "hover:underline"),
 							children: [item.icon ? /* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground shrink-0 [&>svg]:size-4",
 								children: item.icon
 							}) : null, /* @__PURE__ */ jsx("span", {
-								className: "truncate",
+								className: "truncate @max-sm/bar-list:whitespace-normal",
 								children: item.name
 							})]
 						}),
@@ -62,7 +69,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 						}) : null
 					]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-2 tabular-nums",
+					className: "flex items-center justify-end gap-2 tabular-nums",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
 						children: format(item.value)

package/dist/components/registry/dashboardcn/distribution-bar.js

@@ -1,5 +1,5 @@
-import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { pct } from "../../../lib/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -0,0 +1,29 @@
+import { Card } from "../../ui/card.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.d.ts
+export interface MetricStripItem {
+  /** Muted label above the figure. */
+  label: string;
+  /** The figure, formatted by the page: money(4512300). */
+  value: React$1.ReactNode;
+  /** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
+  change?: number;
+  changeFormat?: "pct" | "money";
+  /** Muted words after the change, such as "vs last month". */
+  note?: React$1.ReactNode;
+  /** Recent values, oldest first, drawn as a sparkline beside the figure. */
+  trend?: number[];
+}
+export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
+  title?: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  /** A range toggle, top right, that changes every figure. */
+  action?: React$1.ReactNode;
+  items: MetricStripItem[];
+  /** Lines under the strip, such as what the figures cover. */
+  footer?: React$1.ReactNode;
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -0,0 +1,81 @@
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { cn } from "../../../lib/utils.js";
+import { Delta } from "../../siyahi/delta.js";
+import { Sparkline } from "./sparkline.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.tsx
+const COLUMNS = {
+	1: "basis-full",
+	2: "basis-full @2xs/strip:basis-1/2",
+	3: "basis-full @lg/strip:basis-1/3",
+	4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
+	5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
+	6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
+	8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
+};
+function trendColor(change) {
+	if (change === void 0) return "var(--chart-1)";
+	if (change > 0) return "var(--positive)";
+	if (change < 0) return "var(--negative)";
+	return "var(--muted-foreground)";
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+function MetricStrip({ title, description, action, items, footer, className, ...props }) {
+	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("gap-4", className),
+		...props,
+		children: [
+			(title || description || action) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+				title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				action && /* @__PURE__ */ jsx(CardAction, { children: action })
+			] }),
+			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "metric-strip",
+				className: "@container/strip -mx-4 -my-3 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "-mt-px -ml-px flex flex-wrap",
+					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+						"data-slot": "metric-strip-item",
+						className: cn("flex min-w-0 flex-col gap-1.5 border-t border-l px-4 py-4", columns),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: item.label
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-0.5",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xl font-semibold tracking-tight tabular-nums",
+									children: item.value
+								}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-wrap items-center gap-x-1.5 text-xs",
+									children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
+										value: item.change,
+										format: item.changeFormat
+									}), item.note && /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: item.note
+									})]
+								})]
+							}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+								data: item.trend,
+								variant: "line",
+								color: trendColor(item.change),
+								className: "h-9 w-20 shrink-0"
+							})]
+						})]
+					}, item.label))
+				})
+			}) }),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex-col items-start gap-2 text-sm",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/sparkline.d.ts

@@ -0,0 +1,22 @@
+import { ChartColor } from "../../../lib/chart-series.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/sparkline.d.ts
+export interface SparklineProps extends React$1.ComponentProps<"div"> {
+  /** Series to plot, oldest first. */
+  data: number[];
+  variant?: "area" | "line";
+  /**
+   * The last step and the dot on the latest value: a chart slot, or var(--positive) or var(--negative) for a gain or
+   * a loss. Defaults to var(--chart-1). The run before it is muted.
+   */
+  color?: ChartColor;
+  curve?: "monotone" | "linear" | "step";
+  /** The run's line; the last step is 2px. */
+  strokeWidth?: number;
+  /** Animate after hydration and when data changes. Respects reduced motion. */
+  animate?: boolean;
+  animationDuration?: number;
+}
+declare function Sparkline({ data, variant, color, curve, strokeWidth, animate, animationDuration, className, ...props }: SparklineProps): React$1.JSX.Element;
+//#endregion
+export { Sparkline };

package/dist/components/registry/dashboardcn/sparkline.js

@@ -0,0 +1,117 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Area, AreaChart, Line, LineChart, ResponsiveContainer, YAxis } from "recharts";
+//#region src/components/registry/dashboardcn/sparkline.tsx
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onChange) {
+	const query = window.matchMedia(reducedMotionQuery);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function getReducedMotionSnapshot() {
+	return window.matchMedia(reducedMotionQuery).matches;
+}
+function getReducedMotionServerSnapshot() {
+	return true;
+}
+function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "linear", strokeWidth = 1.25, animate = true, animationDuration = 500, className, ...props }) {
+	const id = React$1.useId();
+	const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
+	const animationActive = animate && !reducedMotion;
+	const points = React$1.useMemo(() => data.map((y, i) => ({
+		i,
+		y,
+		now: i >= data.length - 2 ? y : void 0
+	})), [data]);
+	const margin = {
+		top: 3,
+		right: 3,
+		bottom: 3,
+		left: 0
+	};
+	const axis = /* @__PURE__ */ jsx(YAxis, {
+		hide: true,
+		domain: ["dataMin", "dataMax"]
+	});
+	const now = /* @__PURE__ */ jsx(Line, {
+		className: "sparkline-now",
+		type: curve,
+		dataKey: "now",
+		stroke: color,
+		strokeWidth: 2,
+		dot: (dot) => dot.index === data.length - 1 ? /* @__PURE__ */ jsx("circle", {
+			cx: dot.cx,
+			cy: dot.cy,
+			r: 3,
+			fill: color
+		}, "now") : /* @__PURE__ */ jsx("g", {}, dot.index),
+		isAnimationActive: animationActive,
+		animationBegin: animationDuration,
+		animationDuration: 150
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sparkline",
+		"aria-hidden": "true",
+		className: cn("h-10 w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin,
+				children: [
+					axis,
+					/* @__PURE__ */ jsx(Line, {
+						type: curve,
+						dataKey: "y",
+						stroke: "var(--muted-foreground)",
+						strokeWidth,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					}),
+					now
+				]
+			}) : /* @__PURE__ */ jsxs(AreaChart, {
+				data: points,
+				margin,
+				children: [
+					axis,
+					/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: color,
+							stopOpacity: .18
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: color,
+							stopOpacity: 0
+						})]
+					}) }),
+					/* @__PURE__ */ jsx(Area, {
+						type: curve,
+						dataKey: "y",
+						stroke: "var(--muted-foreground)",
+						strokeWidth,
+						fill: `url(#${id})`,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					}),
+					now
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { Sparkline };

package/dist/components/registry/heatmap/calendar-heatmap.d.ts

@@ -75,8 +75,10 @@ export type CalendarHeatmapProps = HTMLAttributes<HTMLDivElement> & {
  * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
  * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
  */
-export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export declare const CalendarHeatmap: ({ data, weekStart, continuousMonths, hasEmptyColumn, blockSize: blockSizeProp, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, style, className, children, ...props }: CalendarHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  /** The cell the page has picked: drawn with a ring and announced as pressed. */
+  selected?: boolean;
   activity: ActivityWithLevel;
   dayIndex: number;
   weekIndex: number;
@@ -84,7 +86,7 @@ export type CalendarHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
   onCellClick?: (activity: ActivityWithLevel) => void;
   onCellHover?: (activity: ActivityWithLevel | null) => void;
 };
-export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
+export declare function CalendarHeatmapBlock({ ref, activity, dayIndex, weekIndex, highlighted, selected, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: CalendarHeatmapBlockProps & {
   ref?: React.RefObject<SVGRectElement | null>;
 }): import("react").JSX.Element;
 export declare namespace CalendarHeatmapBlock {