@alpic-ai/ui 1.153.0 → 1.154.1

package/src/components/line-chart.tsx

@@ -6,9 +6,6 @@ import {
   LabelList,
   Line,
   LineChart as RechartsLineChart,
-  ReferenceArea,
-  ReferenceDot,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   XAxis,
@@ -21,6 +18,15 @@ import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
 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";
 
@@ -71,89 +77,14 @@ function LineChart({
 
   const resolved = resolveSeries(series, paletteColors, theme);
 
-  const numericMax = React.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.useMemo(() => computeNumericMax(data, series, false), [data, series]);
 
   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 legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+  const axis = makeChartAxis(theme);
 
-  const activeDotFor = (entry: (typeof resolved)[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 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 legendItems = makeLegendItems(resolved);
 
   const isEmpty = data.length === 0 || resolved.length === 0;
 
@@ -196,34 +127,7 @@ function LineChart({
                 cursor={{ stroke: theme.axisForeground, strokeWidth: 1, strokeDasharray: "3 3" }}
                 content={<ChartTooltipContent valueFormatter={valueFormatter} labelFormatter={labelFormatter} />}
               />
-              {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 })}
 
               {resolved.map((entry) => (
                 <Line
@@ -235,37 +139,21 @@ function LineChart({
                   strokeWidth={entry.dashed ? 2 : 1.8}
                   strokeDasharray={entry.dashed ? "5 3" : undefined}
                   dot={dots ? { r: 2.5, fill: entry.color, strokeWidth: 0 } : 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 })}
+                    />
+                  )}
                 </Line>
               ))}
 
-              {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)}
             </RechartsLineChart>
           </ResponsiveContainer>
         )}

package/src/components/textarea.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";
 
 interface TextareaProps extends React.ComponentProps<"textarea"> {
   label?: string;
@@ -43,37 +41,9 @@ function Textarea({ className, id, label, required, hint, error, tooltip, ...pro
   );
 
   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}>
       {textarea}
-      {(hint || error) && (
-        <p
-          id={fieldId ? `${fieldId}-description` : undefined}
-          className={cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground")}
-        >
-          {error ?? hint}
-        </p>
-      )}
-    </div>
+    </Field>
   );
 }
 

package/src/stories/area-chart.stories.tsx

@@ -6,12 +6,14 @@ import { Stat } from "../components/stat";
 
 export default { title: "Charts/Area Chart" };
 
-const mulberry32 = (seed: number) => () => {
-  seed |= 0;
-  seed = (seed + 0x6d2b79f5) | 0;
-  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
-  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+const mulberry32 = (seed: number) => {
+  let state = seed | 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let hash = Math.imul(state ^ (state >>> 15), 1 | state);
+    hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+    return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+  };
 };
 
 const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];

package/src/stories/bar-chart.stories.tsx

@@ -6,12 +6,14 @@ import { Stat } from "../components/stat";
 
 export default { title: "Charts/Bar Chart" };
 
-const mulberry32 = (seed: number) => () => {
-  seed |= 0;
-  seed = (seed + 0x6d2b79f5) | 0;
-  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
-  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+const mulberry32 = (seed: number) => {
+  let state = seed | 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let hash = Math.imul(state ^ (state >>> 15), 1 | state);
+    hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+    return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+  };
 };
 
 const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];

package/src/stories/donut-chart.stories.tsx

@@ -6,12 +6,14 @@ import { Stat } from "../components/stat";
 
 export default { title: "Charts/Donut Chart" };
 
-const mulberry32 = (seed: number) => () => {
-  seed |= 0;
-  seed = (seed + 0x6d2b79f5) | 0;
-  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
-  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+const mulberry32 = (seed: number) => {
+  let state = seed | 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let hash = Math.imul(state ^ (state >>> 15), 1 | state);
+    hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+    return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+  };
 };
 
 const CLIENTS = ["ChatGPT", "Claude Code", "Claude", "Anthropic", "Goose", "VS Code"];

package/src/stories/line-chart.stories.tsx

@@ -6,12 +6,14 @@ import { Stat } from "../components/stat";
 
 export default { title: "Charts/Line Chart" };
 
-const mulberry32 = (seed: number) => () => {
-  seed |= 0;
-  seed = (seed + 0x6d2b79f5) | 0;
-  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
-  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+const mulberry32 = (seed: number) => {
+  let state = seed | 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let hash = Math.imul(state ^ (state >>> 15), 1 | state);
+    hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+    return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+  };
 };
 
 const hourLabel = (index: number, length: number) =>

package/src/stories/stat.stories.tsx

@@ -5,12 +5,14 @@ import { Stat } from "../components/stat";
 
 export default { title: "Charts/Stat" };
 
-const mulberry32 = (seed: number) => () => {
-  seed |= 0;
-  seed = (seed + 0x6d2b79f5) | 0;
-  let hash = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-  hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
-  return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+const mulberry32 = (seed: number) => {
+  let state = seed | 0;
+  return () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let hash = Math.imul(state ^ (state >>> 15), 1 | state);
+    hash = (hash + Math.imul(hash ^ (hash >>> 7), 61 | hash)) ^ hash;
+    return ((hash ^ (hash >>> 14)) >>> 0) / 4294967296;
+  };
 };
 
 const spark = (seed: number, length = 24) => {