@alpic-ai/ui 0.0.0-dev.g2df19cc → 0.0.0-dev.g2eefcc2

package/dist/lib/chart.mjs

@@ -0,0 +1,27 @@
+import { luminance, paletteColor } from "./chart-palette.mjs";
+//#region src/lib/chart.ts
+const formatShare = (fraction) => `${(fraction * 100).toFixed(fraction >= .1 ? 0 : 1)}%`;
+const semanticColor = (theme, semantic) => {
+	if (semantic === "error") return theme.destructive;
+	if (semantic === "warning") return theme.warning;
+	return theme.success;
+};
+/**
+* Resolve each series to a concrete color and name. Color precedence:
+* explicit `color` → `semantic` token → palette slot by declared index (so the
+* lead series keeps the lead color even after the bands are reordered).
+*/
+const resolveSeries = (series, palette, theme) => series.map((entry, index) => ({
+	...entry,
+	name: entry.name ?? entry.key,
+	color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index))
+}));
+/**
+* Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
+* lightest at the top edge. Sorting by luminance enforces that for any palette
+* (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
+* stack order in Recharts — first entry sits at the bottom.
+*/
+const orderByLuminance = (series) => [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
+//#endregion
+export { formatShare, orderByLuminance, resolveSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.g2df19cc",
+  "version": "0.0.0-dev.g2eefcc2",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,48 +23,49 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.14.0",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-hook-form": "^7.75.0",
+    "lucide-react": "^1.18.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.79.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.1",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-accordion": "^1.2.13",
+    "@radix-ui/react-avatar": "^1.1.12",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.0",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-switch": "^1.3.0",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-toggle-group": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "recharts": "^3.8.1",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@types/react": "19.2.14",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.14.0",
-    "react-hook-form": "^7.75.0",
+    "lucide-react": "^1.18.0",
+    "react-hook-form": "^7.79.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.0",
-    "tsdown": "^0.22.0",
+    "tailwindcss": "^4.3.1",
+    "tsdown": "^0.22.2",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },

package/src/components/area-chart.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import * as React from "react";
+import {
+  Area,
+  CartesianGrid,
+  LabelList,
+  AreaChart as RechartsAreaChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+import { ChartLegend } from "./chart-legend";
+import { ChartTooltipContent } from "./chart-tooltip";
+
+const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
+
+export interface ChartMarker {
+  x: string | number;
+  y: number;
+  label?: string;
+  color?: string;
+}
+
+export 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;
+  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;
+}
+
+function AreaChart({
+  data,
+  index,
+  series,
+  variant = "stacked",
+  curve = "monotone",
+  legend = false,
+  valueFlags = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel = false,
+  texture = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: AreaChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reactId = React.useId().replace(/:/g, "");
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+
+  const resolved = resolveSeries(series, paletteColors, theme);
+  const stacked = variant === "stacked" || variant === "expand";
+  const rendered = stacked ? orderByLuminance(resolved) : resolved;
+
+  const strokeOnly = variant === "grouped" && rendered.length > 1;
+  const filled = !strokeOnly;
+  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 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 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 fillFor = (entry: (typeof rendered)[number], slot: number) => {
+    if (!filled) {
+      return "none";
+    }
+    if (texture && lead && entry.key === lead.key) {
+      return `url(#hatch-${reactId})`;
+    }
+    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 (
+    <div data-slot="area-chart" className={cn("flex w-full flex-col gap-3", className)}>
+      <div className="w-full" style={{ height }}>
+        {loading ? (
+          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
+            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+            loading…
+          </div>
+        ) : isEmpty ? (
+          <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
+            no data in range
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <RechartsAreaChart
+              data={data as Record<string, string | number>[]}
+              stackOffset={variant === "expand" ? "expand" : "none"}
+              margin={margin}
+            >
+              <defs>
+                {filled &&
+                  rendered.map((entry, slot) => (
+                    <linearGradient key={entry.key} id={`area-${reactId}-${slot}`} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={entry.color} stopOpacity={stacked ? 0.78 : 0.5} />
+                      <stop offset="100%" stopColor={entry.color} stopOpacity={stacked ? 0.32 : 0.04} />
+                    </linearGradient>
+                  ))}
+                {texture && filled && lead && (
+                  <pattern
+                    id={`hatch-${reactId}`}
+                    patternUnits="userSpaceOnUse"
+                    width={6}
+                    height={6}
+                    patternTransform="rotate(45)"
+                  >
+                    <rect width={6} height={6} fill={lead.color} fillOpacity={0.18} />
+                    <line x1={0} y1={0} x2={0} y2={6} stroke={lead.color} strokeWidth={1.2} strokeOpacity={0.6} />
+                  </pattern>
+                )}
+              </defs>
+
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                tickFormatter={(value: number) =>
+                  variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
+                }
+              />
+              <Tooltip
+                offset={12}
+                allowEscapeViewBox={{ x: false, y: false }}
+                cursor={{ stroke: theme.axisForeground, strokeWidth: 1, strokeDasharray: "3 3" }}
+                content={
+                  <ChartTooltipContent
+                    valueFormatter={valueFormatter}
+                    labelFormatter={labelFormatter}
+                    showTotal={withTotal}
+                  />
+                }
+              />
+              {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
+                  }
+                />
+              )}
+
+              {rendered.map((entry, slot) => (
+                <Area
+                  key={entry.key}
+                  type={curveType}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stackId={stacked ? "stack" : undefined}
+                  stroke={entry.color}
+                  strokeWidth={entry.dashed ? 2 : 1.6}
+                  strokeDasharray={entry.dashed ? "5 3" : undefined}
+                  fill={fillFor(entry, slot)}
+                  dot={false}
+                  activeDot={activeDotFor(entry)}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {lastValueLabel && <LabelList dataKey={entry.key} content={renderLastLabel(entry.color)} />}
+                </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
+                  }
+                />
+              ))}
+            </RechartsAreaChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+    </div>
+  );
+}
+
+export { AreaChart };