@alpic-ai/ui 0.0.0-staging.gcd4957c → 0.0.0-staging.gcd7c19c

package/dist/components/bar-chart.mjs

@@ -0,0 +1,238 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { ChartLegend } from "./chart-legend.mjs";
+import { computeNumericMax, makeChartAxis, makeLegendItems, renderMarkers, renderReferenceLine } from "./chart-primitives.mjs";
+import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, 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, 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);
+	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(() => computeNumericMax(data, series, stacked), [
+		data,
+		series,
+		stacked
+	]);
+	const topSlotByRow = React$1.useMemo(() => {
+		if (!stacked) return [];
+		return data.map((row) => {
+			for (let slot = rendered.length - 1; slot >= 0; slot -= 1) {
+				const value = Number(row[rendered[slot]?.key ?? ""]);
+				if (Number.isFinite(value) && value > 0) return slot;
+			}
+			return -1;
+		});
+	}, [
+		data,
+		rendered,
+		stacked
+	]);
+	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);
+	const legendItems = makeLegendItems(resolved);
+	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", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-full",
+			style: { height },
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : 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: 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
+							})]
+						})] }),
+						!bare && /* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: false,
+							stroke: theme.grid,
+							strokeDasharray: "2 4"
+						}),
+						/* @__PURE__ */ jsx(XAxis, {
+							dataKey: index,
+							...axis,
+							hide: bare,
+							height: bare ? 0 : void 0,
+							tick: makeXAxisTick(theme),
+							interval: "preserveStartEnd",
+							minTickGap: 56
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							...axis,
+							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)
+						}),
+						!bare && /* @__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
+							})
+						}),
+						!bare && renderReferenceLine({
+							referenceLine,
+							numericMax,
+							theme
+						}),
+						rendered.map((entry, slot) => /* @__PURE__ */ jsxs(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: false,
+							isAnimationActive: false,
+							animationDuration: 650,
+							animationEasing: "ease-out",
+							children: [(stacked || partialLastBar) && data.map((row, rowIndex) => {
+								const roundedTop = stacked ? topSlotByRow[rowIndex] === slot : true;
+								const isPartial = partialLastBar && rowIndex === data.length - 1;
+								return /* @__PURE__ */ jsx(Cell, {
+									radius: roundedTop ? [
+										BAR_RADIUS,
+										BAR_RADIUS,
+										0,
+										0
+									] : [
+										0,
+										0,
+										0,
+										0
+									],
+									fillOpacity: isPartial ? .15 : 1,
+									stroke: isPartial ? entry.color : void 0,
+									strokeWidth: isPartial ? 1.25 : 0,
+									strokeDasharray: isPartial ? "3 2" : void 0
+								}, `${entry.key}-${row[index] ?? rowIndex}`);
+							}), valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: entry.key,
+								content: renderValueLabel(entry.color)
+							})]
+						}, entry.key)),
+						!bare && renderMarkers(markers, theme)
+					]
+				})
+			})
+		}), legend && !bare && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
+			items: legendItems,
+			align: legendAlign,
+			insetLeft: yAxisWidth
+		})]
+	});
+}
+//#endregion
+export { BarChart };

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

@@ -0,0 +1,19 @@
+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,104 @@
+"use client";
+import { cn } from "../lib/cn.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 [active, setActive] = React$1.useState(null);
+	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 = `${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
+						},
+						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,14 @@
-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;
-declare function BreadcrumbList({
-  className,
-  ...props
-}: React.ComponentProps<"ol">): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<"a"> & {
+declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): React$1.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React$1.ComponentProps<"a"> & {
   asChild?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbPage({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbChevron({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
-declare function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}): React$1.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbChevron({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: 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,31 +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,
-  variant,
-  size,
-  type,
-  asChild,
-  loading,
-  icon,
-  iconTrailing,
-  disabled,
-  children,
-  ...props
-}: ButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare function Button({ className, variant, size, type, asChild, loading, icon, iconTrailing, disabled, children, ...props }: ButtonProps): React$1.JSX.Element;
 //#endregion
 export { Button, type ButtonProps, buttonVariants };

package/dist/components/card.d.mts

@@ -1,37 +1,13 @@
-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"> & {
+declare function Card({ className, hoverable, ...props }: React$1.ComponentProps<"div"> & {
   hoverable?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function CardHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function CardTitle({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function CardDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function CardAction({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function CardContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-declare function CardFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: 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,14 @@
+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,15 @@
+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 };

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

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

package/dist/components/chart-legend.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-legend.tsx
+const ALIGN_CLASS = {
+	left: "justify-start",
+	center: "justify-center",
+	right: "justify-end"
+};
+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, align = "left", insetLeft, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className),
+		style: {
+			paddingLeft: align === "left" ? insetLeft : void 0,
+			...style
+		},
+		...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 };