@alpic-ai/ui 0.0.0-staging.gdf8e504 → 0.0.0-staging.gdfe3a14

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

@@ -0,0 +1,64 @@
+import { ChartSeries } from "../lib/chart.mjs";
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/area-chart.d.ts
+declare const CURVE_TYPE: {
+  readonly monotone: "monotone";
+  readonly linear: "linear";
+  readonly step: "stepAfter";
+};
+interface ChartMarker {
+  x: string | number;
+  y: number;
+  label?: string;
+  color?: string;
+}
+interface AreaChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  variant?: "stacked" | "grouped" | "expand";
+  curve?: keyof typeof CURVE_TYPE;
+  legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
+  valueFlags?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: {
+    y: number;
+    label?: string;
+    band?: boolean;
+  };
+  markers?: ChartMarker[];
+  lastValueLabel?: boolean;
+  texture?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function AreaChart({
+  data,
+  index,
+  series,
+  variant,
+  curve,
+  legend,
+  legendAlign,
+  valueFlags,
+  height,
+  yAxisWidth,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel,
+  texture,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: AreaChartProps): React$1.JSX.Element;
+//#endregion
+export { AreaChart, AreaChartProps, ChartMarker };

package/dist/components/area-chart.mjs

@@ -0,0 +1,271 @@
+"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 { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Area, AreaChart as AreaChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+//#region src/components/area-chart.tsx
+const CURVE_TYPE = {
+	monotone: "monotone",
+	linear: "linear",
+	step: "stepAfter"
+};
+function AreaChart({ data, index, series, variant = "stacked", curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, 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 resolved = resolveSeries(series, paletteColors, theme);
+	const stacked = variant === "stacked" || variant === "expand";
+	const rendered = stacked ? orderByLuminance(resolved) : resolved;
+	const filled = !(variant === "grouped" && rendered.length > 1);
+	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 curveType = CURVE_TYPE[curve];
+	const margin = {
+		top: markers?.length ? 18 : 8,
+		right: lastValueLabel ? 56 : 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 activeDotFor = (entry) => valueFlags ? (dotProps) => {
+		if (dotProps.cx == null || dotProps.cy == null) return /* @__PURE__ */ jsx("g", {});
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+			cx: dotProps.cx,
+			cy: dotProps.cy,
+			r: 3.5,
+			fill: entry.color,
+			stroke: theme.card,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("text", {
+			x: dotProps.cx,
+			y: dotProps.cy - 8,
+			textAnchor: "middle",
+			fill: entry.color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(dotProps.value ?? 0))
+		})] });
+	} : {
+		r: 3.5,
+		fill: entry.color,
+		stroke: theme.card,
+		strokeWidth: 2
+	};
+	const fillFor = (entry, slot) => {
+		if (!filled) return "none";
+		if (texture && lead && entry.key === lead.key) return `url(#hatch-${reactId})`;
+		return `url(#area-${reactId}-${slot})`;
+	};
+	const renderLastLabel = (color) => (props) => {
+		if (props.index !== data.length - 1 || props.x == null || props.y == null) return null;
+		return /* @__PURE__ */ jsx("text", {
+			x: Number(props.x) + 6,
+			y: Number(props.y),
+			dy: 3,
+			fill: color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			textAnchor: "start",
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(props.value ?? 0))
+		});
+	};
+	const isEmpty = data.length === 0 || rendered.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "area-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(AreaChart$1, {
+					data,
+					stackOffset: variant === "expand" ? "expand" : "none",
+					margin,
+					children: [
+						/* @__PURE__ */ jsxs("defs", { children: [filled && rendered.map((entry, slot) => /* @__PURE__ */ jsxs("linearGradient", {
+							id: `area-${reactId}-${slot}`,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor: entry.color,
+								stopOpacity: stacked ? .78 : .5
+							}), /* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor: entry.color,
+								stopOpacity: stacked ? .32 : .04
+							})]
+						}, entry.key)), texture && filled && lead && /* @__PURE__ */ jsxs("pattern", {
+							id: `hatch-${reactId}`,
+							patternUnits: "userSpaceOnUse",
+							width: 6,
+							height: 6,
+							patternTransform: "rotate(45)",
+							children: [/* @__PURE__ */ jsx("rect", {
+								width: 6,
+								height: 6,
+								fill: lead.color,
+								fillOpacity: .18
+							}), /* @__PURE__ */ jsx("line", {
+								x1: 0,
+								y1: 0,
+								x2: 0,
+								y2: 6,
+								stroke: lead.color,
+								strokeWidth: 1.2,
+								strokeOpacity: .6
+							})]
+						})] }),
+						/* @__PURE__ */ jsx(CartesianGrid, {
+							vertical: false,
+							stroke: theme.grid,
+							strokeDasharray: "2 4"
+						}),
+						/* @__PURE__ */ jsx(XAxis, {
+							dataKey: index,
+							...axis,
+							tick: makeXAxisTick(theme),
+							interval: "preserveStartEnd",
+							minTickGap: 56
+						}),
+						/* @__PURE__ */ jsx(YAxis, {
+							...axis,
+							width: yAxisWidth,
+							tickFormatter: (value) => variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
+						}),
+						/* @__PURE__ */ jsx(Tooltip, {
+							offset: 12,
+							allowEscapeViewBox: {
+								x: false,
+								y: false
+							},
+							cursor: {
+								stroke: theme.axisForeground,
+								strokeWidth: 1,
+								strokeDasharray: "3 3"
+							},
+							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(Area, {
+							type: curveType,
+							dataKey: entry.key,
+							name: entry.name,
+							stackId: stacked ? "stack" : void 0,
+							stroke: entry.color,
+							strokeWidth: entry.dashed ? 2 : 1.6,
+							strokeDasharray: entry.dashed ? "5 3" : void 0,
+							fill: fillFor(entry, slot),
+							dot: false,
+							activeDot: activeDotFor(entry),
+							isAnimationActive: false,
+							animationDuration: 650,
+							animationEasing: "ease-out",
+							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {
+								dataKey: entry.key,
+								content: renderLastLabel(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 { AreaChart };

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

@@ -0,0 +1,50 @@
+import { ChartSeries } from "../lib/chart.mjs";
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import { ChartMarker } from "./area-chart.mjs";
+import * as React$1 from "react";
+
+//#region src/components/bar-chart.d.ts
+interface BarChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  variant?: "stacked" | "grouped" | "expand";
+  legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
+  valueLabels?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: {
+    y: number;
+    label?: string;
+    band?: boolean;
+  };
+  markers?: ChartMarker[];
+  texture?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function BarChart({
+  data,
+  index,
+  series,
+  variant,
+  legend,
+  legendAlign,
+  valueLabels,
+  height,
+  yAxisWidth,
+  palette,
+  referenceLine,
+  markers,
+  texture,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: BarChartProps): React$1.JSX.Element;
+//#endregion
+export { BarChart, BarChartProps };

package/dist/components/bar-chart.mjs

@@ -0,0 +1,254 @@
+"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 { 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, 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 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", "[&_.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: 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: 56
+						}),
+						/* @__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: false,
+							isAnimationActive: false,
+							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 };