@alpic-ai/ui 1.153.0 → 1.154.1

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>
         )}

package/src/components/chart-primitives.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { ReferenceArea, ReferenceDot, ReferenceLine } from "recharts";
+import type { ChartTheme } from "../hooks/use-chart-theme";
+import type { ChartSeries, ResolvedSeries } from "../lib/chart";
+import type { ChartMarker } from "./area-chart";
+
+export type ReferenceLineConfig = { y: number; label?: string; band?: boolean };
+
+type ChartData = ReadonlyArray<Record<string, string | number | null | undefined>>;
+
+export function makeChartAxis(theme: ChartTheme) {
+  return {
+    stroke: theme.border,
+    tick: { fill: theme.axisForeground, fontSize: 10, fontFamily: theme.fontMono },
+    tickLine: false as const,
+    axisLine: { stroke: theme.border, strokeOpacity: 0.6 },
+  };
+}
+
+export function makeLegendItems(resolved: ResolvedSeries[]) {
+  return resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+}
+
+/**
+ * Stacked series must reach the stack height (sum per x-point), not the tallest
+ * single series, or reference bands and explicit Y domains clip a tall stack short.
+ */
+export function computeNumericMax(data: ChartData, series: ChartSeries[], stacked: boolean) {
+  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;
+}
+
+export function makeActiveDot(
+  entry: ResolvedSeries,
+  {
+    valueFlags,
+    theme,
+    valueFormatter,
+  }: { valueFlags: boolean; theme: ChartTheme; valueFormatter: (value: number) => string },
+) {
+  if (!valueFlags) {
+    return { r: 3.5, fill: entry.color, stroke: theme.card, strokeWidth: 2 };
+  }
+  return (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>
+    );
+  };
+}
+
+export function makeLastValueLabel(
+  color: string,
+  {
+    dataLength,
+    theme,
+    valueFormatter,
+  }: { dataLength: number; theme: ChartTheme; valueFormatter: (value: number) => string },
+) {
+  return (props: {
+    x?: string | number;
+    y?: string | number;
+    value?: string | number | boolean | Array<string | number | boolean> | null;
+    index?: number;
+  }) => {
+    if (props.index !== dataLength - 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>
+    );
+  };
+}
+
+/**
+ * Returns recharts elements (not a wrapper component) so recharts still detects
+ * them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
+ */
+export function renderReferenceLine({
+  referenceLine,
+  numericMax,
+  theme,
+}: {
+  referenceLine: ReferenceLineConfig | undefined;
+  numericMax: number;
+  theme: ChartTheme;
+}) {
+  if (!referenceLine) {
+    return null;
+  }
+  return [
+    referenceLine.band ? (
+      <ReferenceArea
+        key="reference-band"
+        y1={referenceLine.y}
+        y2={numericMax}
+        fill={theme.warning}
+        fillOpacity={0.06}
+        ifOverflow="extendDomain"
+      />
+    ) : null,
+    <ReferenceLine
+      key="reference-line"
+      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
+      }
+    />,
+  ];
+}
+
+export function renderMarkers(markers: ChartMarker[] | undefined, theme: ChartTheme) {
+  return 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
+      }
+    />
+  ));
+}

package/src/components/field.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Info } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+import { Label } from "./label";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+interface FieldProps {
+  fieldId: string;
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  error?: string;
+  tooltip?: string;
+  children: React.ReactNode;
+}
+
+function Field({ fieldId, label, required, hint, error, tooltip, children }: FieldProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center gap-0.5">
+          <Label htmlFor={fieldId} className="type-text-sm font-medium text-muted-foreground">
+            {label}
+          </Label>
+          {required && (
+            <span aria-hidden className="type-text-sm font-medium text-required">
+              *
+            </span>
+          )}
+          {tooltip && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="size-4 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>{tooltip}</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      )}
+      {children}
+      {(hint || error) && (
+        <p
+          id={fieldId ? `${fieldId}-description` : undefined}
+          className={cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground")}
+        >
+          {error ?? hint}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export type { FieldProps };
+export { Field };

package/src/components/input.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Info } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../lib/cn";
-import { Label } from "./label";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import { Field } from "./field";
 
 const inputSizeStyles = {
   sm: {
@@ -119,37 +117,9 @@ function Input({
   );
 
   return (
-    <div className="flex flex-col gap-1.5">
-      {label && (
-        <div className="flex items-center gap-0.5">
-          <Label htmlFor={fieldId} className="type-text-sm font-medium text-muted-foreground">
-            {label}
-          </Label>
-          {required && (
-            <span aria-hidden className="type-text-sm font-medium text-required">
-              *
-            </span>
-          )}
-          {tooltip && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Info className="size-4 text-muted-foreground" />
-              </TooltipTrigger>
-              <TooltipContent>{tooltip}</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-      )}
+    <Field fieldId={fieldId} label={label} required={required} hint={hint} error={error} tooltip={tooltip}>
       {wrappedInput}
-      {(hint || error) && (
-        <p
-          id={fieldId ? `${fieldId}-description` : undefined}
-          className={cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground")}
-        >
-          {error ?? hint}
-        </p>
-      )}
-    </div>
+    </Field>
   );
 }