@alpic-ai/ui 0.0.0-dev.g37dab1d → 0.0.0-dev.g380fab7

package/src/components/line-chart.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import * as React from "react";
+import {
+  CartesianGrid,
+  LabelList,
+  Line,
+  LineChart as RechartsLineChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, resolveSeries } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import type { ChartMarker } from "./area-chart";
+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 LineChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  curve?: keyof typeof CURVE_TYPE;
+  legend?: boolean;
+  valueFlags?: boolean;
+  dots?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: { y: number; label?: string; band?: boolean };
+  markers?: ChartMarker[];
+  lastValueLabel?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function LineChart({
+  data,
+  index,
+  series,
+  curve = "monotone",
+  legend = false,
+  valueFlags = false,
+  dots = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  lastValueLabel = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: LineChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+
+  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 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 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 isEmpty = data.length === 0 || resolved.length === 0;
+
+  return (
+    <div data-slot="line-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%">
+            <RechartsLineChart data={data as Record<string, string | number>[]} margin={margin}>
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <YAxis {...axis} width={yAxisWidth} tickFormatter={(value: number) => 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} />}
+              />
+              {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
+                  }
+                />
+              )}
+
+              {resolved.map((entry) => (
+                <Line
+                  key={entry.key}
+                  type={curveType}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stroke={entry.color}
+                  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)}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {lastValueLabel && <LabelList dataKey={entry.key} content={renderLastLabel(entry.color)} />}
+                </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
+                  }
+                />
+              ))}
+            </RechartsLineChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+    </div>
+  );
+}
+
+export { LineChart };

package/src/components/stat.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import * as React from "react";
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+const statDeltaVariants = cva(
+  "inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none",
+  {
+    variants: {
+      sentiment: {
+        positive: "text-success bg-success/12",
+        negative: "text-destructive bg-destructive/12",
+      },
+    },
+    defaultVariants: { sentiment: "positive" },
+  },
+);
+
+export interface StatDelta {
+  value: number;
+  direction: "up" | "down";
+  invert?: boolean;
+  label?: React.ReactNode;
+}
+
+export interface StatProps extends React.ComponentProps<"div"> {
+  value: React.ReactNode;
+  unit?: string;
+  delta?: StatDelta;
+  sparkline?: number[] | Array<{ value: number }>;
+}
+
+const toSparkData = (sparkline: StatProps["sparkline"]) =>
+  (sparkline ?? []).map((point, index) =>
+    typeof point === "number" ? { index, value: point } : { index, value: point.value },
+  );
+
+function Stat({ value, unit, delta, sparkline, className, ...props }: StatProps) {
+  const { palette } = useChartContext();
+  const gradientId = React.useId().replace(/:/g, "");
+  const sparkData = React.useMemo(() => toSparkData(sparkline), [sparkline]);
+  // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
+  const sparkColor = palette[0]!;
+
+  const sentiment =
+    delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
+
+  return (
+    <div data-slot="stat" className={cn("flex flex-col gap-2.5", className)} {...props}>
+      <div className="flex items-baseline gap-3">
+        <span className="type-display-sm font-bold leading-none tracking-tight tabular-nums text-foreground">
+          {value}
+        </span>
+        {unit && <span className="font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5">{unit}</span>}
+        {delta && (
+          <DeltaPill sentiment={sentiment} className="mb-0.5">
+            {delta.direction === "up" ? <ArrowUp className="size-3" /> : <ArrowDown className="size-3" />}
+            {delta.label ?? `${delta.value}%`}
+          </DeltaPill>
+        )}
+      </div>
+      {sparkData.length > 0 && (
+        <div className="h-9 w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
+              <defs>
+                <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={sparkColor} stopOpacity={0.4} />
+                  <stop offset="100%" stopColor={sparkColor} stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <Area
+                type="monotone"
+                dataKey="value"
+                stroke={sparkColor}
+                strokeWidth={1.6}
+                fill={`url(#${gradientId})`}
+                isAnimationActive={false}
+                dot={({ cx, cy, index }) => {
+                  const isLast = index === sparkData.length - 1;
+                  return isLast && cx != null && cy != null ? (
+                    <circle key={index} cx={cx} cy={cy} r={2.5} fill={sparkColor} />
+                  ) : (
+                    <g key={index} />
+                  );
+                }}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DeltaPill({
+  sentiment,
+  className,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof statDeltaVariants>) {
+  return <span className={cn(statDeltaVariants({ sentiment }), className)} {...props} />;
+}
+
+export { Stat, statDeltaVariants };

package/src/hooks/use-chart-theme.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+
+// Recharts draws to SVG/canvas and cannot read CSS custom properties, so resolve to hex and re-read on .dark toggle.
+export interface ChartTheme {
+  foreground: string;
+  mutedForeground: string;
+  axisForeground: string;
+  grid: string;
+  border: string;
+  card: string;
+  popover: string;
+  destructive: string;
+  warning: string;
+  success: string;
+  fontMono: string;
+  isDark: boolean;
+}
+
+const TOKEN_MAP: Record<Exclude<keyof ChartTheme, "isDark">, string> = {
+  foreground: "--color-foreground",
+  mutedForeground: "--color-muted-foreground",
+  axisForeground: "--color-quaternary-foreground",
+  grid: "--color-sidebar-border",
+  border: "--color-border",
+  card: "--color-card",
+  popover: "--color-popover",
+  destructive: "--color-destructive",
+  warning: "--color-warning",
+  success: "--color-success",
+  fontMono: "--font-mono",
+};
+
+const FALLBACK: ChartTheme = {
+  foreground: "#121e1e",
+  mutedForeground: "#3a4848",
+  axisForeground: "#6f7f7f",
+  grid: "#e3eaea",
+  border: "#acb8b8",
+  card: "#f8fafa",
+  popover: "#ffffff",
+  destructive: "#d92d20",
+  warning: "#dc6803",
+  success: "#079455",
+  fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  isDark: false,
+};
+
+const readTheme = (): ChartTheme => {
+  if (typeof window === "undefined") {
+    return FALLBACK;
+  }
+  const styles = window.getComputedStyle(document.documentElement);
+  const entries = Object.entries(TOKEN_MAP).map(([key, token]) => {
+    const value = styles.getPropertyValue(token).trim();
+    return [key, value || FALLBACK[key as keyof ChartTheme]] as const;
+  });
+  const colors = Object.fromEntries(entries) as unknown as Omit<ChartTheme, "isDark">;
+  return { ...colors, isDark: document.documentElement.classList.contains("dark") };
+};
+
+export function useChartTheme() {
+  const [theme, setTheme] = React.useState<ChartTheme>(readTheme);
+
+  React.useEffect(() => {
+    const update = () => setTheme(readTheme());
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}

package/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+
+export function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+
+  React.useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}

package/src/lib/chart-palette.ts

@@ -0,0 +1,110 @@
+/**
+ * Chart palettes — the locked "paired system" from the analytics-v2 design.
+ *
+ * These are charting-API color values (consumed by Recharts at draw time, which
+ * cannot read CSS custom properties), so per the design-system rules they live
+ * as documented hex constants rather than `--color-*` tokens. They are
+ * theme-independent: the same series colors read on light and dark canvases.
+ * Only the chrome (grid, axis text, tooltip surface, semantic colors) is
+ * theme-aware — see `useChartTheme`.
+ *
+ * Rules baked in:
+ *  - Pink leads (index 0) — never buried, fixing the V1 "pink last" bug.
+ *  - Adjacent dashboard cards alternate lead palette (magenta / cyan) — the
+ *    page decides which to pass; the component just receives one.
+ */
+
+export const MAGENTA_PALETTE = [
+  "#e90060",
+  "#ff7eb6",
+  "#9b5de5",
+  "#5b8def",
+  "#36c5f0",
+  "#6eece7",
+  "#d98a3d",
+  "#2bb6a3",
+] as const;
+
+export const CYAN_PALETTE = [
+  "#17b8cf",
+  "#41ddc9",
+  "#3f8ff0",
+  "#8b6cf0",
+  "#c46bf0",
+  "#ff7eb6",
+  "#e90060",
+  "#c98be0",
+] as const;
+
+export type ChartPaletteName = "magenta" | "cyan";
+
+export const CHART_PALETTES: Record<ChartPaletteName, readonly string[]> = {
+  magenta: MAGENTA_PALETTE,
+  cyan: CYAN_PALETTE,
+};
+
+export const heatRampMagenta = (empty: string) => [empty, "#5b0a31", "#a3034a", "#e90060", "#ff7eb6"];
+export const heatRampMint = (empty: string) => [empty, "#0c4a52", "#17b8cf", "#41ddc9", "#6eece7"];
+
+// Empty heat cell — the only theme-dependent charting value, so it travels as a
+// light/dark pair rather than a `--color-*` token (heatmaps draw to SVG fills).
+export const HEAT_EMPTY = { light: "#eef3f3", dark: "#102222" } as const;
+
+const HEAT_RAMPS: Record<ChartPaletteName, (empty: string) => string[]> = {
+  magenta: heatRampMagenta,
+  cyan: heatRampMint,
+};
+
+export const heatRamp = (palette: ChartPaletteName, empty: string) => HEAT_RAMPS[palette](empty);
+
+const hexToRgb = (hex: string) => {
+  const value = Number.parseInt(hex.slice(1), 16);
+  return [(value >> 16) & 255, (value >> 8) & 255, value & 255] as const;
+};
+
+export const luminance = (hex: string) => {
+  const linear = hexToRgb(hex).map((channel) => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+  // biome-ignore lint/style/noNonNullAssertion: hexToRgb always yields 3 channels
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!;
+};
+
+export const paletteColor = (palette: readonly string[], index: number) => {
+  // biome-ignore lint/style/noNonNullAssertion: modulo guarantees a valid index
+  return palette[((index % palette.length) + palette.length) % palette.length]!;
+};
+
+const RAMP_ENDS: Record<ChartPaletteName, readonly [string, string]> = {
+  magenta: ["#e90060", "#ff7eb6"],
+  cyan: ["#17b8cf", "#6eece7"],
+};
+
+const mixHex = (from: string, to: string, fraction: number) => {
+  const [fromR, fromG, fromB] = hexToRgb(from);
+  const [toR, toG, toB] = hexToRgb(to);
+  const ratio = Math.min(1, Math.max(0, fraction));
+  const channel = (start: number, end: number) => Math.round(start + (end - start) * ratio);
+  return `#${[channel(fromR, toR), channel(fromG, toG), channel(fromB, toB)]
+    .map((value) => value.toString(16).padStart(2, "0"))
+    .join("")}`;
+};
+
+export const rampColor = (palette: ChartPaletteName, fraction: number) => {
+  const [from, to] = RAMP_ENDS[palette];
+  return mixHex(from, to, fraction);
+};
+
+/**
+ * Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
+ * so a normalized 0..1 value reads as a smooth single-hue gradient rather than
+ * the five discrete bands.
+ */
+export const heatColor = (stops: readonly string[], fraction: number) => {
+  const clamped = Math.min(1, Math.max(0, fraction));
+  const segment = (stops.length - 1) * clamped;
+  const lowerIndex = Math.min(stops.length - 2, Math.floor(segment));
+  // biome-ignore lint/style/noNonNullAssertion: lowerIndex is clamped to a valid pair
+  return mixHex(stops[lowerIndex]!, stops[lowerIndex + 1]!, segment - lowerIndex);
+};

package/src/lib/chart.ts

@@ -0,0 +1,56 @@
+import type { ChartTheme } from "../hooks/use-chart-theme";
+import { luminance, paletteColor } from "./chart-palette";
+
+/**
+ * Declarative description of one plotted series. The same shape drives area,
+ * line and bar charts — what differs is how each chart renders it.
+ */
+export interface ChartSeries {
+  key: string;
+  name?: string;
+  color?: string;
+  semantic?: "error" | "warning" | "success";
+  dashed?: boolean;
+}
+
+export interface ResolvedSeries extends ChartSeries {
+  name: string;
+  color: string;
+}
+
+export const formatShare = (fraction: number) => `${(fraction * 100).toFixed(fraction >= 0.1 ? 0 : 1)}%`;
+
+const semanticColor = (theme: ChartTheme, semantic: NonNullable<ChartSeries["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).
+ */
+export const resolveSeries = (
+  series: readonly ChartSeries[],
+  palette: readonly string[],
+  theme: ChartTheme,
+): ResolvedSeries[] =>
+  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.
+ */
+export const orderByLuminance = (series: ResolvedSeries[]) =>
+  [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));