@alpic-ai/ui 0.0.0-dev.g16d80c2 → 0.0.0-dev.g172fb9f

package/dist/components/bar-list.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { rampColor } from "../lib/chart-palette.mjs";
+import { formatShare } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/bar-list.tsx
+const PLACEHOLDER_HEIGHT = 168;
+const RAMP_CEILING = .8;
+const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
+function BarList({ data, index, dataKey = "value", maxItems, palette, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { paletteName } = useChartContext(palette);
+	const reducedMotion = useReducedMotion();
+	const [mounted, setMounted] = React$1.useState(false);
+	const [active, setActive] = React$1.useState(null);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const total = React$1.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
+	const rows = React$1.useMemo(() => {
+		const mapped = data.map((row) => ({
+			name: String(row[index] ?? ""),
+			value: Number(row[dataKey]) || 0
+		}));
+		mapped.sort((lower, upper) => upper.value - lower.value);
+		const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
+		return capped.map((row, rank) => ({
+			...row,
+			color: rampColor(paletteName, (capped.length > 1 ? rank / (capped.length - 1) : 0) * RAMP_CEILING)
+		}));
+	}, [
+		data,
+		index,
+		dataKey,
+		maxItems,
+		paletteName
+	]);
+	const maxValue = rows.reduce((max, row) => row.value > max ? row.value : max, 0);
+	const isEmpty = rows.length === 0;
+	const formatName = (name) => labelFormatter ? labelFormatter(name) : name;
+	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 },
+		children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+	});
+	if (isEmpty) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs", className),
+		style: { minHeight: PLACEHOLDER_HEIGHT },
+		children: "no data in range"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bar-list",
+		className: cn("flex w-full flex-col gap-2", className),
+		children: rows.map((row, slot) => {
+			const fraction = maxValue > 0 ? row.value / maxValue : 0;
+			const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
+			const dimmed = active !== null && active !== slot;
+			const isActive = active === slot;
+			return /* @__PURE__ */ jsxs("div", {
+				onMouseEnter: () => setActive(slot),
+				onMouseLeave: () => setActive(null),
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground",
+						children: formatName(row.name)
+					}), /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md motion-safe:transition-[width,opacity] motion-safe:duration-700 motion-safe:ease-out",
+						style: {
+							width: fillWidth,
+							background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
+							boxShadow: `inset 0 0 0 1px ${row.color}`,
+							opacity: dimmed ? .45 : 1
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: "pointer-events-none absolute top-1/2 -translate-y-1/2 truncate type-text-xs font-medium text-white",
+							style: {
+								left: 12,
+								width: `calc(${100 / Math.max(fraction, 1e-4)}% - 24px)`,
+								textShadow: IN_FILL_SHADOW
+							},
+							children: formatName(row.name)
+						})
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "w-16 shrink-0 text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors",
+					style: { color: isActive ? row.color : void 0 },
+					children: isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)
+				})]
+			}, row.name);
+		})
+	});
+}
+//#endregion
+export { BarList };

package/dist/components/button.d.mts

@@ -3,7 +3,7 @@ import * as React$1 from "react";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
   size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof buttonVariants> {

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

@@ -0,0 +1,25 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/chart-card.d.ts
+interface ChartCardProps extends Omit<React$1.ComponentProps<"section">, "title"> {
+  palette?: ChartPaletteName;
+  kicker?: React$1.ReactNode;
+  title?: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  action?: React$1.ReactNode;
+  accent?: "top" | "left";
+}
+declare function ChartCard({
+  palette,
+  kicker,
+  title,
+  description,
+  action,
+  accent,
+  className,
+  children,
+  ...props
+}: ChartCardProps): React$1.JSX.Element;
+//#endregion
+export { ChartCard, ChartCardProps };

package/dist/components/chart-card.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { CHART_PALETTES } from "../lib/chart-palette.mjs";
+import { ChartContainer } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-card.tsx
+function ChartCard({ palette = "magenta", kicker, title, description, action, accent = "top", className, children, ...props }) {
+	const lead = CHART_PALETTES[palette][0];
+	const isLeft = accent === "left";
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "chart-card",
+		className: cn("chart-rise relative overflow-hidden rounded-xl border bg-card p-5 text-card-foreground shadow-shadow", isLeft && "pl-6", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]"),
+				style: { background: lead }
+			}),
+			(kicker || title || action) && /* @__PURE__ */ jsxs("header", {
+				className: "mb-4 flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [
+						kicker && /* @__PURE__ */ jsx("span", {
+							className: "font-mono text-[10px] text-primary uppercase tracking-[0.18em]",
+							children: kicker
+						}),
+						title && /* @__PURE__ */ jsx("h3", {
+							className: "type-text-md font-semibold leading-none tracking-tight",
+							children: title
+						}),
+						description && /* @__PURE__ */ jsx("p", {
+							className: "type-text-xs text-muted-foreground",
+							children: description
+						})
+					]
+				}), action]
+			}),
+			/* @__PURE__ */ jsx(ChartContainer, {
+				palette,
+				children
+			})
+		]
+	});
+}
+//#endregion
+export { ChartCard };

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

@@ -0,0 +1,20 @@
+import { ChartTheme } from "../hooks/use-chart-theme.mjs";
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/chart-container.d.ts
+interface ChartContextValue {
+  palette: readonly string[];
+  paletteName: ChartPaletteName;
+  theme: ChartTheme;
+}
+declare function ChartContainer({
+  palette,
+  className,
+  ...props
+}: React$1.ComponentProps<"div"> & {
+  palette?: ChartPaletteName;
+}): React$1.JSX.Element;
+declare function useChartContext(paletteOverride?: ChartPaletteName): ChartContextValue;
+//#endregion
+export { ChartContainer, type ChartContextValue, useChartContext };

package/dist/components/chart-container.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { CHART_PALETTES } from "../lib/chart-palette.mjs";
+import { useChartTheme } from "../hooks/use-chart-theme.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/chart-container.tsx
+const ChartContext = React$1.createContext(null);
+function ChartContainer({ palette = "magenta", className, ...props }) {
+	const theme = useChartTheme();
+	const value = React$1.useMemo(() => ({
+		palette: CHART_PALETTES[palette],
+		paletteName: palette,
+		theme
+	}), [palette, theme]);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart-container",
+			className: cn("flex flex-col gap-4", className),
+			...props
+		})
+	});
+}
+function useChartContext(paletteOverride) {
+	const provided = React$1.useContext(ChartContext);
+	const fallbackTheme = useChartTheme();
+	if (provided && !paletteOverride) return provided;
+	const paletteName = paletteOverride ?? provided?.paletteName ?? "magenta";
+	return {
+		palette: CHART_PALETTES[paletteName],
+		paletteName,
+		theme: provided?.theme ?? fallbackTheme
+	};
+}
+//#endregion
+export { ChartContainer, useChartContext };

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

@@ -0,0 +1,16 @@
+//#region src/components/chart-legend.d.ts
+interface ChartLegendItem {
+  name: string;
+  color: string;
+  dashed?: boolean;
+}
+interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: ChartLegendItem[];
+}
+declare function ChartLegend({
+  items,
+  className,
+  ...props
+}: ChartLegendProps): import("react").JSX.Element;
+//#endregion
+export { ChartLegend, ChartLegendItem, ChartLegendProps };

package/dist/components/chart-legend.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-legend.tsx
+function Swatch({ color, dashed }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "size-2 shrink-0 rounded-full",
+		style: dashed ? { border: `1.5px solid ${color}` } : { background: color }
+	});
+}
+function ChartLegend({ items, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]",
+			children: [/* @__PURE__ */ jsx(Swatch, {
+				color: item.color,
+				dashed: item.dashed
+			}), item.name]
+		}, item.name))
+	});
+}
+//#endregion
+export { ChartLegend };

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

@@ -0,0 +1,33 @@
+//#region src/components/chart-tooltip.d.ts
+interface ChartTooltipItem {
+  name?: string | number;
+  value?: number | string;
+  color?: string;
+  stroke?: string;
+  fill?: string;
+  dataKey?: string | number;
+}
+interface ChartTooltipContentProps {
+  active?: boolean;
+  payload?: ChartTooltipItem[];
+  label?: string | number;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  hideLabel?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  className?: string;
+}
+declare function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  valueFormatter,
+  labelFormatter,
+  hideLabel,
+  showTotal,
+  totalLabel,
+  className
+}: ChartTooltipContentProps): import("react").JSX.Element | null;
+//#endregion
+export { ChartTooltipContent, ChartTooltipContentProps, ChartTooltipItem };

package/dist/components/chart-tooltip.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-tooltip.tsx
+function ChartTooltipContent({ active, payload, label, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, hideLabel, showTotal, totalLabel = "Total", className }) {
+	const { theme } = useChartContext();
+	if (!active || !payload?.length) return null;
+	const total = payload.reduce((sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)), 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-w-[130px] rounded-lg border px-3 py-2.5 shadow-lg", "border-border bg-popover text-popover-foreground", className),
+		children: [!hideLabel && label !== void 0 && /* @__PURE__ */ jsx("p", {
+			className: "font-mono text-[10px] uppercase tracking-wider text-quaternary-foreground mb-1.5",
+			children: labelFormatter ? labelFormatter(label) : label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [payload.map((item, index) => {
+				const swatch = [
+					item.color,
+					item.stroke,
+					item.fill
+				].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
+				const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+				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: swatch }
+						}), item.name]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-foreground",
+						children: valueFormatter(numeric)
+					})]
+				}, `${item.dataKey ?? index}`);
+			}), showTotal && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
+					children: totalLabel
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono font-semibold tabular-nums text-foreground",
+					children: valueFormatter(total)
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartTooltipContent };

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

@@ -0,0 +1,46 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/donut-chart.d.ts
+declare const GEOMETRY: {
+  readonly donut: {
+    readonly inner: "64%";
+    readonly outer: "92%";
+  };
+  readonly ring: {
+    readonly inner: "78%";
+    readonly outer: "92%";
+  };
+};
+interface DonutChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  dataKey?: string;
+  variant?: keyof typeof GEOMETRY;
+  legend?: boolean;
+  paddingAngle?: number;
+  height?: number;
+  palette?: ChartPaletteName;
+  centerLabel?: string;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function DonutChart({
+  data,
+  index,
+  dataKey,
+  variant,
+  legend,
+  paddingAngle,
+  height,
+  palette,
+  centerLabel,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: DonutChartProps): React$1.JSX.Element;
+//#endregion
+export { DonutChart, DonutChartProps };

package/dist/components/donut-chart.mjs

@@ -0,0 +1,185 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { paletteColor } from "../lib/chart-palette.mjs";
+import { formatShare } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+//#region src/components/donut-chart.tsx
+const GEOMETRY = {
+	donut: {
+		inner: "64%",
+		outer: "92%"
+	},
+	ring: {
+		inner: "78%",
+		outer: "92%"
+	}
+};
+function DonutChart({ data, index, dataKey = "value", variant = "donut", legend = false, paddingAngle = 1, height = 220, palette, centerLabel = "total", loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { palette: paletteColors, theme } = useChartContext(palette);
+	const reactId = React$1.useId().replace(/:/g, "");
+	const animated = !useReducedMotion();
+	const [active, setActive] = React$1.useState(null);
+	const rowRefs = React$1.useRef([]);
+	const slices = React$1.useMemo(() => {
+		const mapped = data.map((row) => ({
+			name: String(row[index] ?? ""),
+			value: Number(row[dataKey]) || 0
+		}));
+		mapped.sort((lower, upper) => upper.value - lower.value);
+		return mapped.map((slice, rank) => ({
+			...slice,
+			color: paletteColor(paletteColors, rank)
+		}));
+	}, [
+		data,
+		index,
+		dataKey,
+		paletteColors
+	]);
+	const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+	const maxValue = slices.reduce((max, slice) => slice.value > max ? slice.value : max, 0);
+	const geometry = GEOMETRY[variant] ?? GEOMETRY.donut;
+	const formatName = (name) => labelFormatter ? labelFormatter(name) : name;
+	const isEmpty = slices.length === 0 || total <= 0;
+	const activeSlice = active !== null ? slices[active] : void 0;
+	const centerTitle = activeSlice ? formatName(activeSlice.name) : centerLabel;
+	const centerValue = valueFormatter(activeSlice ? activeSlice.value : total);
+	React$1.useEffect(() => {
+		if (active !== null) rowRefs.current[active]?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "donut-chart",
+		className: cn("@container flex w-full flex-col gap-3", className),
+		children: loading ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: "no data in range"
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-5 @md:flex-row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative shrink-0",
+				style: {
+					width: height,
+					height
+				},
+				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx("defs", { children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `donut-${reactId}-${slot}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: slice.color,
+							stopOpacity: 1
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: slice.color,
+							stopOpacity: .7
+						})]
+					}, slice.name)) }), /* @__PURE__ */ jsx(Pie, {
+						data: slices,
+						dataKey: "value",
+						nameKey: "name",
+						innerRadius: geometry.inner,
+						outerRadius: geometry.outer,
+						paddingAngle,
+						startAngle: 90,
+						endAngle: -270,
+						cornerRadius: 2,
+						stroke: theme.card,
+						strokeWidth: 1.5,
+						isAnimationActive: animated,
+						animationDuration: 650,
+						animationEasing: "ease-out",
+						onMouseEnter: (_entry, sliceIndex) => setActive(sliceIndex),
+						onMouseLeave: () => setActive(null),
+						children: slices.map((slice, slot) => /* @__PURE__ */ jsx(Cell, {
+							className: "motion-safe:[transition:fill-opacity_180ms_ease-out]",
+							fill: `url(#donut-${reactId}-${slot})`,
+							fillOpacity: active === null || active === slot ? 1 : .55,
+							stroke: theme.card,
+							strokeWidth: 1.5
+						}, slice.name))
+					})] })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]",
+							children: centerTitle
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums",
+							children: centerValue
+						}),
+						activeSlice && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-[11px] tabular-nums",
+							style: { color: activeSlice.color },
+							children: formatShare(activeSlice.value / total)
+						})
+					]
+				})]
+			}), legend && /* @__PURE__ */ jsx("div", {
+				"data-slot": "donut-readout",
+				className: "flex min-w-0 flex-1 flex-col overflow-y-auto pr-1",
+				style: { maxHeight: height },
+				children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("div", {
+					ref: (node) => {
+						rowRefs.current[slot] = node;
+					},
+					onMouseEnter: () => setActive(slot),
+					onMouseLeave: () => setActive(null),
+					className: cn("flex flex-col gap-1.5 border-border/40 border-b px-2 py-2 text-text-xs last:border-b-0 motion-safe:transition-colors", active === slot ? "bg-muted/50" : "bg-transparent"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "inline-flex min-w-0 items-center gap-2 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "h-2 w-2.5 shrink-0 rounded-[3px]",
+								style: { background: slice.color }
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: formatName(slice.name)
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 items-center gap-3 font-mono tabular-nums",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-[3.5rem] text-right font-semibold text-foreground",
+								children: valueFormatter(slice.value)
+							}), /* @__PURE__ */ jsx("span", {
+								className: "w-10 text-right text-quaternary-foreground",
+								children: formatShare(slice.value / total)
+							})]
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "relative block h-[2px] w-full overflow-hidden rounded-full bg-border/40",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-y-0 left-0 rounded-full motion-safe:transition-[width] motion-safe:duration-500",
+							style: {
+								width: `${maxValue > 0 ? slice.value / maxValue * 100 : 0}%`,
+								background: slice.color,
+								opacity: active === null || active === slot ? 1 : .45
+							}
+						})
+					})]
+				}, slice.name))
+			})]
+		})
+	});
+}
+//#endregion
+export { DonutChart };

package/dist/components/grid-fx.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/grid-fx.d.ts
+declare function GridFx({
+  className,
+  cellSize,
+  style,
+  ...props
+}: React$1.ComponentProps<"canvas"> & {
+  cellSize?: number;
+}): React$1.JSX.Element | null;
+//#endregion
+export { GridFx };