@alpic-ai/ui 0.0.0-dev.g19c2d9f → 0.0.0-dev.g1a5d5ed

package/dist/components/bar-chart.mjs

@@ -0,0 +1,262 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { ChartLegend } from "./chart-legend.mjs";
+import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Bar, BarChart as BarChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#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, 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 resolved = resolveSeries(series, paletteColors, theme);
+	const stacked = variant === "stacked" || variant === "expand";
+	const rendered = stacked ? orderByLuminance(resolved) : resolved;
+	const lead = resolved[0];
+	const withTotal = stacked && rendered.length > 1;
+	const numericMax = React$1.useMemo(() => {
+		let max = 0;
+		for (const row of data) {
+			let rowTotal = 0;
+			for (const entry of series) {
+				const value = Number(row[entry.key]);
+				if (Number.isFinite(value)) {
+					rowTotal += value;
+					if (!stacked && value > max) max = value;
+				}
+			}
+			if (stacked && rowTotal > max) max = rowTotal;
+		}
+		return max;
+	}, [
+		data,
+		series,
+		stacked
+	]);
+	const margin = {
+		top: markers?.length || valueLabels ? 18 : 8,
+		right: 8,
+		bottom: 2,
+		left: 0
+	};
+	const axis = {
+		stroke: theme.border,
+		tick: {
+			fill: theme.axisForeground,
+			fontSize: 10,
+			fontFamily: theme.fontMono
+		},
+		tickLine: false,
+		axisLine: {
+			stroke: theme.border,
+			strokeOpacity: .6
+		}
+	};
+	const legendItems = resolved.map((entry) => ({
+		name: entry.name,
+		color: entry.color,
+		dashed: entry.dashed
+	}));
+	const radiusFor = (slot) => {
+		if (!stacked || slot === rendered.length - 1) return [
+			BAR_RADIUS,
+			BAR_RADIUS,
+			0,
+			0
+		];
+		return [
+			0,
+			0,
+			0,
+			0
+		];
+	};
+	const fillFor = (entry, slot) => {
+		if (texture && lead && entry.key === lead.key) return `url(#bar-hatch-${reactId})`;
+		if (stacked) return entry.color;
+		return `url(#bar-${reactId}-${slot})`;
+	};
+	const renderValueLabel = (color) => (props) => {
+		if (props.x == null || props.y == null) return null;
+		return /* @__PURE__ */ jsx("text", {
+			x: Number(props.x) + Number(props.width ?? 0) / 2,
+			y: Number(props.y) - 5,
+			textAnchor: "middle",
+			fill: color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(props.value ?? 0))
+		});
+	};
+	const isEmpty = data.length === 0 || rendered.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "bar-chart",
+		className: cn("flex w-full flex-col gap-3", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-full",
+			style: { height },
+			children: loading ? /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+				children: "no data in range"
+			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				initialDimension: {
+					width: 0,
+					height
+				},
+				children: /* @__PURE__ */ jsxs(BarChart$1, {
+					data,
+					stackOffset: variant === "expand" ? "expand" : "none",
+					margin,
+					barCategoryGap: stacked ? "20%" : "16%",
+					children: [
+						/* @__PURE__ */ jsxs("defs", { children: [!stacked && rendered.map((entry, slot) => /* @__PURE__ */ jsxs("linearGradient", {
+							id: `bar-${reactId}-${slot}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor: entry.color,
+								stopOpacity: .95
+							}), /* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor: entry.color,
+								stopOpacity: .5
+							})]
+						}, entry.key)), texture && lead && /* @__PURE__ */ jsxs("pattern", {
+							id: `bar-hatch-${reactId}`,
+							patternUnits: "userSpaceOnUse",
+							width: 6,
+							height: 6,
+							patternTransform: "rotate(45)",
+							children: [/* @__PURE__ */ jsx("rect", {
+								width: 6,
+								height: 6,
+								fill: lead.color,
+								fillOpacity: .22
+							}), /* @__PURE__ */ jsx("line", {
+								x1: 0,
+								y1: 0,
+								x2: 0,
+								y2: 6,
+								stroke: lead.color,
+								strokeWidth: 1.2,
+								strokeOpacity: .65
+							})]
+						})] }),
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: false,
+							stroke: theme.grid,
+							strokeDasharray: "2 4"
+						}),
+						/* @__PURE__ */ jsx(XAxis, {
+							dataKey: index,
+							...axis,
+							tick: makeXAxisTick(theme),
+							interval: "preserveStartEnd",
+							minTickGap: 44
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							...axis,
+							width: 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, {
+							offset: 12,
+							allowEscapeViewBox: {
+								x: false,
+								y: false
+							},
+							cursor: {
+								fill: lead?.color ?? theme.mutedForeground,
+								fillOpacity: theme.isDark ? .1 : .06
+							},
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								valueFormatter,
+								labelFormatter,
+								showTotal: withTotal
+							})
+						}),
+						referenceLine?.band && /* @__PURE__ */ jsx(ReferenceArea, {
+							y1: referenceLine.y,
+							y2: numericMax,
+							fill: theme.warning,
+							fillOpacity: .06,
+							ifOverflow: "extendDomain"
+						}),
+						referenceLine && /* @__PURE__ */ jsx(ReferenceLine, {
+							y: referenceLine.y,
+							stroke: theme.warning,
+							strokeDasharray: "4 4",
+							strokeOpacity: .6,
+							label: referenceLine.label ? {
+								value: referenceLine.label,
+								fill: theme.warning,
+								fontSize: 9,
+								fontFamily: theme.fontMono,
+								position: "insideBottomRight"
+							} : void 0
+						}),
+						rendered.map((entry, slot) => /* @__PURE__ */ jsx(Bar, {
+							dataKey: entry.key,
+							name: entry.name,
+							stackId: stacked ? "stack" : void 0,
+							fill: fillFor(entry, slot),
+							stroke: entry.color,
+							strokeWidth: 0,
+							radius: radiusFor(slot),
+							maxBarSize: MAX_BAR_SIZE,
+							activeBar: {
+								fillOpacity: 1,
+								stroke: theme.card,
+								strokeWidth: 1
+							},
+							isAnimationActive: animated,
+							animationDuration: 650,
+							animationEasing: "ease-out",
+							children: valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: entry.key,
+								content: renderValueLabel(entry.color)
+							})
+						}, entry.key)),
+						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
+							x: marker.x,
+							y: marker.y,
+							r: 3.5,
+							fill: marker.color ?? theme.foreground,
+							stroke: theme.card,
+							strokeWidth: 2,
+							label: marker.label ? {
+								value: marker.label,
+								fill: marker.color ?? theme.foreground,
+								fontSize: 9,
+								fontFamily: theme.fontMono,
+								position: "top"
+							} : void 0
+						}, `${marker.x}-${marker.y}`))
+					]
+				})
+			})
+		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems,
+			align: legendAlign,
+			insetLeft: yAxisWidth
+		})]
+	});
+}
+//#endregion
+export { BarChart };

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

@@ -0,0 +1,31 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/bar-list.d.ts
+interface BarListProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  dataKey?: string;
+  maxItems?: number;
+  palette?: ChartPaletteName;
+  /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
+  semantic?: "error" | "warning" | "success";
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function BarList({
+  data,
+  index,
+  dataKey,
+  maxItems,
+  palette,
+  semantic,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: BarListProps): React$1.JSX.Element;
+//#endregion
+export { BarList, BarListProps };

package/dist/components/bar-list.mjs

@@ -0,0 +1,111 @@
+"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 SEMANTIC_KEY = {
+	error: "destructive",
+	warning: "warning",
+	success: "success"
+};
+const PLACEHOLDER_HEIGHT = 168;
+const RAMP_CEILING = .8;
+const SEMANTIC_FLOOR = .62;
+const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
+function BarList({ data, index, dataKey = "value", maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { paletteName, theme } = useChartContext(palette);
+	const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
+	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) => {
+			const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
+			const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+			return {
+				...row,
+				color: accent ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)` : rampColor(paletteName, rankFraction * RAMP_CEILING)
+			};
+		});
+	}, [
+		data,
+		index,
+		dataKey,
+		maxItems,
+		paletteName,
+		accent
+	]);
+	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", 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 py-1",
+				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",
+						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,
+							transition: reducedMotion ? void 0 : "width 700ms ease-out"
+						},
+						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: "min-w-[4rem] shrink-0 whitespace-nowrap 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/breadcrumb.d.mts

@@ -1,42 +1,41 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/components/breadcrumb.d.ts
 declare function Breadcrumb({
   className,
   ...props
-}: React.ComponentProps<"nav">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"nav">): React$1.JSX.Element;
 declare function BreadcrumbList({
   className,
   ...props
-}: React.ComponentProps<"ol">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"ol">): React$1.JSX.Element;
 declare function BreadcrumbItem({
   className,
   ...props
-}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"li">): React$1.JSX.Element;
 declare function BreadcrumbLink({
   asChild,
   className,
   ...props
-}: React.ComponentProps<"a"> & {
+}: React$1.ComponentProps<"a"> & {
   asChild?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
+}): React$1.JSX.Element;
 declare function BreadcrumbPage({
   className,
   ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
 declare function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"li">): React$1.JSX.Element;
 declare function BreadcrumbChevron({
   className,
   ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
 declare function BreadcrumbEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
 //#endregion
 export { Breadcrumb, BreadcrumbChevron, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/button.d.mts

@@ -1,18 +1,16 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as React from "react";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+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;
   size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   loading?: boolean;
-  icon?: React.ReactNode;
-  iconTrailing?: React.ReactNode;
+  icon?: React$1.ReactNode;
+  iconTrailing?: React$1.ReactNode;
 }
 declare function Button({
   className,
@@ -26,6 +24,6 @@ declare function Button({
   disabled,
   children,
   ...props
-}: ButtonProps): _$react_jsx_runtime0.JSX.Element;
+}: ButtonProps): React$1.JSX.Element;
 //#endregion
 export { Button, type ButtonProps, buttonVariants };

package/dist/components/card.d.mts

@@ -1,37 +1,36 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/components/card.d.ts
 declare function Card({
   className,
   hoverable,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React$1.ComponentProps<"div"> & {
   hoverable?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
+}): React$1.JSX.Element;
 declare function CardHeader({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function CardTitle({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function CardDescription({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function CardAction({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function CardContent({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function CardFooter({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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" | "none";
+}
+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: [
+			accent !== "none" && /* @__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, type ChartPaletteName, 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 };