@alpic-ai/ui 1.154.0 → 1.155.0

package/dist/components/line-chart.mjs

@@ -3,11 +3,12 @@ import { cn } from "../lib/cn.mjs";
 import { makeXAxisTick, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
+import { computeNumericMax, makeActiveDot, makeChartAxis, makeLastValueLabel, 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 { CartesianGrid, LabelList, Line, LineChart as LineChart$1, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { CartesianGrid, LabelList, Line, LineChart as LineChart$1, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/line-chart.tsx
 const CURVE_TYPE = {
 	monotone: "monotone",
@@ -17,14 +18,7 @@ const CURVE_TYPE = {
 function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const resolved = resolveSeries(series, paletteColors, theme);
-	const numericMax = React$1.useMemo(() => {
-		let max = 0;
-		for (const row of data) for (const entry of series) {
-			const value = Number(row[entry.key]);
-			if (Number.isFinite(value) && value > max) max = value;
-		}
-		return max;
-	}, [data, series]);
+	const numericMax = React$1.useMemo(() => computeNumericMax(data, series, false), [data, series]);
 	const curveType = CURVE_TYPE[curve];
 	const margin = {
 		top: markers?.length ? 18 : 8,
@@ -32,63 +26,8 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 		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 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 axis = makeChartAxis(theme);
+	const legendItems = makeLegendItems(resolved);
 	const isEmpty = data.length === 0 || resolved.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "line-chart",
@@ -144,25 +83,10 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 								labelFormatter
 							})
 						}),
-						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
+						renderReferenceLine({
+							referenceLine,
+							numericMax,
+							theme
 						}),
 						resolved.map((entry) => /* @__PURE__ */ jsx(Line, {
 							type: curveType,
@@ -176,30 +100,24 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 								fill: entry.color,
 								strokeWidth: 0
 							} : false,
-							activeDot: activeDotFor(entry),
+							activeDot: makeActiveDot(entry, {
+								valueFlags,
+								theme,
+								valueFormatter
+							}),
 							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {
 								dataKey: entry.key,
-								content: renderLastLabel(entry.color)
+								content: makeLastValueLabel(entry.color, {
+									dataLength: data.length,
+									theme,
+									valueFormatter
+								})
 							})
 						}, 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}`))
+						renderMarkers(markers, theme)
 					]
 				})
 			})

package/dist/components/textarea.mjs

@@ -1,52 +1,28 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
-import { Label } from "./label.mjs";
-import { Info } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "./field.mjs";
+import { jsx } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/textarea.tsx
 function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
 	const generatedId = React$1.useId();
 	const fieldId = id ?? generatedId;
-	const textarea = /* @__PURE__ */ jsx("textarea", {
-		id: fieldId,
-		"data-slot": "textarea",
-		className: cn("block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
+	return /* @__PURE__ */ jsx(Field, {
+		fieldId,
+		label,
 		required,
-		"aria-invalid": error ? true : void 0,
-		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
-		...props
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
-		children: [
-			label && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-0.5",
-				children: [
-					/* @__PURE__ */ jsx(Label, {
-						htmlFor: fieldId,
-						className: "type-text-sm font-medium text-muted-foreground",
-						children: label
-					}),
-					required && /* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: "type-text-sm font-medium text-required",
-						children: "*"
-					}),
-					tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Info, { className: "size-4 text-muted-foreground" })
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] })
-				]
-			}),
-			textarea,
-			(hint || error) && /* @__PURE__ */ jsx("p", {
-				id: fieldId ? `${fieldId}-description` : void 0,
-				className: cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground"),
-				children: error ?? hint
-			})
-		]
+		hint,
+		error,
+		tooltip,
+		children: /* @__PURE__ */ jsx("textarea", {
+			id: fieldId,
+			"data-slot": "textarea",
+			className: cn("block w-full min-h-[120px] max-h-[480px] resize-y [field-sizing:content]", "px-3.5 py-3", "type-text-md text-foreground placeholder:text-placeholder", "bg-background border border-border rounded-md", "transition-colors", "outline-none focus-visible:border-ring focus-visible:border-2", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed", "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error", error && "border-border-error [@media(hover:hover)]:hover:border-border-error", className),
+			required,
+			"aria-invalid": error ? true : void 0,
+			"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
+			...props
+		})
 	});
 }
 //#endregion

package/dist/lib/chart.d.mts

@@ -11,5 +11,9 @@ interface ChartSeries {
   semantic?: "error" | "warning" | "success";
   dashed?: boolean;
 }
+interface ResolvedSeries extends ChartSeries {
+  name: string;
+  color: string;
+}
 //#endregion
-export { ChartSeries };
+export { ChartSeries, ResolvedSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.154.0",
+  "version": "1.155.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/area-chart.tsx

@@ -6,9 +6,6 @@ import {
   CartesianGrid,
   LabelList,
   AreaChart as RechartsAreaChart,
-  ReferenceArea,
-  ReferenceDot,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -20,6 +17,15 @@ import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
+import {
+  computeNumericMax,
+  makeActiveDot,
+  makeChartAxis,
+  makeLastValueLabel,
+  makeLegendItems,
+  renderMarkers,
+  renderReferenceLine,
+} from "./chart-primitives";
 import { ChartTooltipContent } from "./chart-tooltip";
 import { Skeleton } from "./skeleton";
 
@@ -87,71 +93,14 @@ function AreaChart({
   const lead = resolved[0];
   const withTotal = stacked && rendered.length > 1;
 
-  // Stacked bands must reach the stack height (sum per x-point), not the tallest
-  // single series, or the reference band stops short of the chart top.
-  const numericMax = React.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 numericMax = React.useMemo(() => computeNumericMax(data, series, stacked), [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 as const,
-    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
-  };
+  const axis = makeChartAxis(theme);
 
-  const legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
-
-  const activeDotFor = (entry: (typeof rendered)[number]) =>
-    valueFlags
-      ? (dotProps: { cx?: number; cy?: number; value?: number | string }) => {
-          if (dotProps.cx == null || dotProps.cy == null) {
-            return <g />;
-          }
-          return (
-            <g>
-              <circle
-                cx={dotProps.cx}
-                cy={dotProps.cy}
-                r={3.5}
-                fill={entry.color}
-                stroke={theme.card}
-                strokeWidth={2}
-              />
-              <text
-                x={dotProps.cx}
-                y={dotProps.cy - 8}
-                textAnchor="middle"
-                fill={entry.color}
-                fontFamily={theme.fontMono}
-                fontSize={10}
-                style={{ fontVariantNumeric: "tabular-nums" }}
-              >
-                {valueFormatter(Number(dotProps.value ?? 0))}
-              </text>
-            </g>
-          );
-        }
-      : { r: 3.5, fill: entry.color, stroke: theme.card, strokeWidth: 2 };
+  const legendItems = makeLegendItems(resolved);
 
   const fillFor = (entry: (typeof rendered)[number], slot: number) => {
     if (!filled) {
@@ -163,33 +112,6 @@ function AreaChart({
     return `url(#area-${reactId}-${slot})`;
   };
 
-  const renderLastLabel =
-    (color: string) =>
-    (props: {
-      x?: string | number;
-      y?: string | number;
-      value?: string | number | boolean | Array<string | number | boolean> | null;
-      index?: number;
-    }) => {
-      if (props.index !== data.length - 1 || props.x == null || props.y == null) {
-        return null;
-      }
-      return (
-        <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" }}
-        >
-          {valueFormatter(Number(props.value ?? 0))}
-        </text>
-      );
-    };
-
   const isEmpty = data.length === 0 || rendered.length === 0;
 
   return (
@@ -264,34 +186,7 @@ function AreaChart({
                   />
                 }
               />
-              {referenceLine?.band && (
-                <ReferenceArea
-                  y1={referenceLine.y}
-                  y2={numericMax}
-                  fill={theme.warning}
-                  fillOpacity={0.06}
-                  ifOverflow="extendDomain"
-                />
-              )}
-              {referenceLine && (
-                <ReferenceLine
-                  y={referenceLine.y}
-                  stroke={theme.warning}
-                  strokeDasharray="4 4"
-                  strokeOpacity={0.6}
-                  label={
-                    referenceLine.label
-                      ? {
-                          value: referenceLine.label,
-                          fill: theme.warning,
-                          fontSize: 9,
-                          fontFamily: theme.fontMono,
-                          position: "insideBottomRight",
-                        }
-                      : undefined
-                  }
-                />
-              )}
+              {renderReferenceLine({ referenceLine, numericMax, theme })}
 
               {rendered.map((entry, slot) => (
                 <Area
@@ -305,37 +200,21 @@ function AreaChart({
                   strokeDasharray={entry.dashed ? "5 3" : undefined}
                   fill={fillFor(entry, slot)}
                   dot={false}
-                  activeDot={activeDotFor(entry)}
+                  activeDot={makeActiveDot(entry, { valueFlags, theme, valueFormatter })}
                   isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >
-                  {lastValueLabel && <LabelList dataKey={entry.key} content={renderLastLabel(entry.color)} />}
+                  {lastValueLabel && (
+                    <LabelList
+                      dataKey={entry.key}
+                      content={makeLastValueLabel(entry.color, { dataLength: data.length, theme, valueFormatter })}
+                    />
+                  )}
                 </Area>
               ))}
 
-              {markers?.map((marker) => (
-                <ReferenceDot
-                  key={`${marker.x}-${marker.y}`}
-                  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",
-                        }
-                      : undefined
-                  }
-                />
-              ))}
+              {renderMarkers(markers, theme)}
             </RechartsAreaChart>
           </ResponsiveContainer>
         )}

package/src/components/bar-chart.tsx

@@ -7,9 +7,6 @@ import {
   Cell,
   LabelList,
   BarChart as RechartsBarChart,
-  ReferenceArea,
-  ReferenceDot,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -22,6 +19,13 @@ import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
+import {
+  computeNumericMax,
+  makeChartAxis,
+  makeLegendItems,
+  renderMarkers,
+  renderReferenceLine,
+} from "./chart-primitives";
 import { ChartTooltipContent } from "./chart-tooltip";
 import { Skeleton } from "./skeleton";
 
@@ -78,27 +82,7 @@ function BarChart({
   const lead = resolved[0];
   const withTotal = stacked && rendered.length > 1;
 
-  // Stacked bars reach the stack height (sum per x-point), not the tallest single
-  // series, so the explicit YAxis domain must not clip a tall stack short.
-  const numericMax = React.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 numericMax = React.useMemo(() => computeNumericMax(data, series, stacked), [data, series, stacked]);
 
   const topSlotByRow = React.useMemo(() => {
     if (!stacked) {
@@ -117,14 +101,9 @@ function BarChart({
 
   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 as const,
-    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
-  };
+  const axis = makeChartAxis(theme);
 
-  const legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+  const legendItems = makeLegendItems(resolved);
 
   const radiusFor = (slot: number): [number, number, number, number] => {
     if (!stacked || slot === rendered.length - 1) {
@@ -251,34 +230,7 @@ function BarChart({
                   />
                 }
               />
-              {referenceLine?.band && (
-                <ReferenceArea
-                  y1={referenceLine.y}
-                  y2={numericMax}
-                  fill={theme.warning}
-                  fillOpacity={0.06}
-                  ifOverflow="extendDomain"
-                />
-              )}
-              {referenceLine && (
-                <ReferenceLine
-                  y={referenceLine.y}
-                  stroke={theme.warning}
-                  strokeDasharray="4 4"
-                  strokeOpacity={0.6}
-                  label={
-                    referenceLine.label
-                      ? {
-                          value: referenceLine.label,
-                          fill: theme.warning,
-                          fontSize: 9,
-                          fontFamily: theme.fontMono,
-                          position: "insideBottomRight",
-                        }
-                      : undefined
-                  }
-                />
-              )}
+              {renderReferenceLine({ referenceLine, numericMax, theme })}
 
               {rendered.map((entry, slot) => (
                 <Bar
@@ -320,28 +272,7 @@ function BarChart({
                 </Bar>
               ))}
 
-              {markers?.map((marker) => (
-                <ReferenceDot
-                  key={`${marker.x}-${marker.y}`}
-                  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",
-                        }
-                      : undefined
-                  }
-                />
-              ))}
+              {renderMarkers(markers, theme)}
             </RechartsBarChart>
           </ResponsiveContainer>
         )}