@alpic-ai/ui 0.0.0-dev.g20c64d3 → 0.0.0-dev.g20fd91c

package/src/components/bar-chart.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import * as React from "react";
+import {
+  Bar,
+  CartesianGrid,
+  LabelList,
+  BarChart as RechartsBarChart,
+  ReferenceArea,
+  ReferenceDot,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { type ChartSeries, makeXAxisTick, orderByLuminance, 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 BAR_RADIUS = 4;
+const MAX_BAR_SIZE = 48;
+
+export interface BarChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  series: ChartSeries[];
+  variant?: "stacked" | "grouped" | "expand";
+  legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
+  valueLabels?: boolean;
+  height?: number;
+  yAxisWidth?: number;
+  palette?: ChartPaletteName;
+  referenceLine?: { y: number; label?: string; band?: boolean };
+  markers?: ChartMarker[];
+  texture?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function BarChart({
+  data,
+  index,
+  series,
+  variant = "stacked",
+  legend = false,
+  legendAlign = "left",
+  valueLabels = false,
+  height = 200,
+  yAxisWidth = 48,
+  palette,
+  referenceLine,
+  markers,
+  texture = false,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: BarChartProps) {
+  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 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 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 legendItems = resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+
+  const radiusFor = (slot: number): [number, number, number, number] => {
+    if (!stacked || slot === rendered.length - 1) {
+      return [BAR_RADIUS, BAR_RADIUS, 0, 0];
+    }
+    return [0, 0, 0, 0];
+  };
+
+  const fillFor = (entry: (typeof rendered)[number], slot: number) => {
+    if (texture && lead && entry.key === lead.key) {
+      return `url(#bar-hatch-${reactId})`;
+    }
+    // Stacked segments read cleanest as flat solids — a per-segment gradient
+    // banding looks like a drop shadow between bands. Grouped bars keep the fade.
+    if (stacked) {
+      return entry.color;
+    }
+    return `url(#bar-${reactId}-${slot})`;
+  };
+
+  const renderValueLabel =
+    (color: string) =>
+    (props: {
+      x?: string | number;
+      y?: string | number;
+      width?: string | number;
+      value?: string | number | boolean | Array<string | number | boolean> | null;
+    }) => {
+      if (props.x == null || props.y == null) {
+        return null;
+      }
+      return (
+        <text
+          x={Number(props.x) + Number(props.width ?? 0) / 2}
+          y={Number(props.y) - 5}
+          textAnchor="middle"
+          fill={color}
+          fontFamily={theme.fontMono}
+          fontSize={10}
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {valueFormatter(Number(props.value ?? 0))}
+        </text>
+      );
+    };
+
+  const isEmpty = data.length === 0 || rendered.length === 0;
+
+  return (
+    <div data-slot="bar-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%" initialDimension={{ width: 0, height }}>
+            <RechartsBarChart
+              data={data as Record<string, string | number>[]}
+              stackOffset={variant === "expand" ? "expand" : "none"}
+              margin={margin}
+              barCategoryGap={stacked ? "20%" : "16%"}
+            >
+              <defs>
+                {!stacked &&
+                  rendered.map((entry, slot) => (
+                    <linearGradient key={entry.key} id={`bar-${reactId}-${slot}`} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={entry.color} stopOpacity={0.95} />
+                      <stop offset="100%" stopColor={entry.color} stopOpacity={0.5} />
+                    </linearGradient>
+                  ))}
+                {texture && lead && (
+                  <pattern
+                    id={`bar-hatch-${reactId}`}
+                    patternUnits="userSpaceOnUse"
+                    width={6}
+                    height={6}
+                    patternTransform="rotate(45)"
+                  >
+                    <rect width={6} height={6} fill={lead.color} fillOpacity={0.22} />
+                    <line x1={0} y1={0} x2={0} y2={6} stroke={lead.color} strokeWidth={1.2} strokeOpacity={0.65} />
+                  </pattern>
+                )}
+              </defs>
+
+              <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
+              <YAxis
+                {...axis}
+                width={yAxisWidth}
+                domain={
+                  referenceLine && variant !== "expand"
+                    ? [0, Math.ceil(Math.max(numericMax, referenceLine.y) * 1.15)]
+                    : undefined
+                }
+                tickFormatter={(value: number) =>
+                  variant === "expand" ? `${Math.round(value * 100)}%` : valueFormatter(value)
+                }
+              />
+              <Tooltip
+                offset={12}
+                allowEscapeViewBox={{ x: false, y: false }}
+                cursor={{ fill: lead?.color ?? theme.mutedForeground, fillOpacity: theme.isDark ? 0.1 : 0.06 }}
+                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) => (
+                <Bar
+                  key={entry.key}
+                  dataKey={entry.key}
+                  name={entry.name}
+                  stackId={stacked ? "stack" : undefined}
+                  fill={fillFor(entry, slot)}
+                  stroke={entry.color}
+                  strokeWidth={0}
+                  radius={radiusFor(slot)}
+                  maxBarSize={MAX_BAR_SIZE}
+                  activeBar={{ fillOpacity: 1, stroke: theme.card, strokeWidth: 1 }}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                >
+                  {valueLabels && (!stacked || rendered.length === 1) && (
+                    <LabelList dataKey={entry.key} content={renderValueLabel(entry.color)} />
+                  )}
+                </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
+                  }
+                />
+              ))}
+            </RechartsBarChart>
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
+    </div>
+  );
+}
+
+export { BarChart };

package/src/components/bar-list.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import * as React from "react";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { formatShare } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { rampColor } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+export interface BarListProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  dataKey?: string;
+  maxItems?: number;
+  palette?: ChartPaletteName;
+  /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
+  semantic?: "error" | "warning" | "success";
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+
+const PLACEHOLDER_HEIGHT = 168;
+// Cap the ramp off its palest end so low-rank bars stay legible on a light card.
+const RAMP_CEILING = 0.8;
+// Semantic bars keep a single hue: the lightest bar still holds this much colour
+// (mixed toward white) so a long error list never fades to near-invisible.
+const SEMANTIC_FLOOR = 0.62;
+const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
+
+function BarList({
+  data,
+  index,
+  dataKey = "value",
+  maxItems,
+  palette,
+  semantic,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: BarListProps) {
+  const { paletteName, theme } = useChartContext(palette);
+  const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
+  const reducedMotion = useReducedMotion();
+  const [mounted, setMounted] = React.useState(false);
+  const [active, setActive] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const total = React.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
+
+  const rows = React.useMemo(() => {
+    const mapped = data.map((row) => ({
+      name: String(row[index] ?? ""),
+      value: Number(row[dataKey]) || 0,
+    }));
+    mapped.sort((lower, upper) => upper.value - lower.value);
+    const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
+    return capped.map((row, rank) => {
+      const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
+      const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+      return {
+        ...row,
+        color: accent
+          ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)`
+          : rampColor(paletteName, rankFraction * RAMP_CEILING),
+      };
+    });
+  }, [data, index, dataKey, maxItems, paletteName, accent]);
+
+  const maxValue = rows.reduce((max, row) => (row.value > max ? row.value : max), 0);
+  const isEmpty = rows.length === 0;
+  const formatName = (name: string) => (labelFormatter ? labelFormatter(name) : name);
+
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+        loading…
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+          className,
+        )}
+        style={{ minHeight: PLACEHOLDER_HEIGHT }}
+      >
+        no data in range
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="bar-list" className={cn("flex w-full flex-col", className)}>
+      {rows.map((row, slot) => {
+        const fraction = maxValue > 0 ? row.value / maxValue : 0;
+        const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
+        const dimmed = active !== null && active !== slot;
+        const isActive = active === slot;
+        return (
+          // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover-sync; all values are visible without it
+          <div
+            key={row.name}
+            onMouseEnter={() => setActive(slot)}
+            onMouseLeave={() => setActive(null)}
+            className="flex items-center gap-3 py-1"
+          >
+            <div className="relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted">
+              <span className="pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground">
+                {formatName(row.name)}
+              </span>
+              <div
+                className="absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md"
+                style={{
+                  width: fillWidth,
+                  background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
+                  boxShadow: `inset 0 0 0 1px ${row.color}`,
+                  opacity: dimmed ? 0.45 : 1,
+                  transition: reducedMotion ? undefined : "width 700ms ease-out",
+                }}
+              >
+                <span
+                  className="pointer-events-none absolute top-1/2 -translate-y-1/2 truncate type-text-xs font-medium text-white"
+                  style={{
+                    left: 12,
+                    width: `calc(${100 / Math.max(fraction, 0.0001)}% - 24px)`,
+                    textShadow: IN_FILL_SHADOW,
+                  }}
+                >
+                  {formatName(row.name)}
+                </span>
+              </div>
+            </div>
+            <span
+              className="min-w-[4rem] shrink-0 whitespace-nowrap text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors"
+              style={{ color: isActive ? row.color : undefined }}
+            >
+              {isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export { BarList };

package/src/components/chart-card.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type * as React from "react";
+
+import { CHART_PALETTES, type ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { ChartContainer } from "./chart-container";
+
+export interface ChartCardProps extends Omit<React.ComponentProps<"section">, "title"> {
+  palette?: ChartPaletteName;
+  kicker?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  accent?: "top" | "left" | "none";
+}
+
+function ChartCard({
+  palette = "magenta",
+  kicker,
+  title,
+  description,
+  action,
+  accent = "top",
+  className,
+  children,
+  ...props
+}: ChartCardProps) {
+  // biome-ignore lint/style/noNonNullAssertion: palettes are never empty
+  const lead = CHART_PALETTES[palette][0]!;
+  const isLeft = accent === "left";
+
+  return (
+    <section
+      data-slot="chart-card"
+      className={cn(
+        "chart-rise relative overflow-hidden rounded-xl border bg-card p-5 text-card-foreground shadow-shadow",
+        isLeft && "pl-6",
+        className,
+      )}
+      {...props}
+    >
+      {accent !== "none" && (
+        <span
+          aria-hidden
+          className={cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]")}
+          style={{ background: lead }}
+        />
+      )}
+      {(kicker || title || action) && (
+        <header className="mb-4 flex items-start justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            {kicker && <span className="font-mono text-[10px] text-primary uppercase tracking-[0.18em]">{kicker}</span>}
+            {title && <h3 className="type-text-md font-semibold leading-none tracking-tight">{title}</h3>}
+            {description && <p className="type-text-xs text-muted-foreground">{description}</p>}
+          </div>
+          {action}
+        </header>
+      )}
+      <ChartContainer palette={palette}>{children}</ChartContainer>
+    </section>
+  );
+}
+
+export { ChartCard };

package/src/components/chart-container.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+
+import { type ChartTheme, useChartTheme } from "../hooks/use-chart-theme";
+import { CHART_PALETTES, type ChartPaletteName } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+
+export type { ChartPaletteName } from "../lib/chart-palette";
+
+interface ChartContextValue {
+  palette: readonly string[];
+  paletteName: ChartPaletteName;
+  theme: ChartTheme;
+}
+
+const ChartContext = React.createContext<ChartContextValue | null>(null);
+
+function ChartContainer({
+  palette = "magenta",
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { palette?: ChartPaletteName }) {
+  const theme = useChartTheme();
+  const value = React.useMemo<ChartContextValue>(
+    () => ({ palette: CHART_PALETTES[palette], paletteName: palette, theme }),
+    [palette, theme],
+  );
+
+  return (
+    <ChartContext.Provider value={value}>
+      <div data-slot="chart-container" className={cn("flex flex-col gap-4", className)} {...props} />
+    </ChartContext.Provider>
+  );
+}
+
+function useChartContext(paletteOverride?: ChartPaletteName): ChartContextValue {
+  const provided = React.useContext(ChartContext);
+  const fallbackTheme = useChartTheme();
+  if (provided && !paletteOverride) {
+    return provided;
+  }
+  const paletteName = paletteOverride ?? provided?.paletteName ?? "magenta";
+  return {
+    palette: CHART_PALETTES[paletteName],
+    paletteName,
+    theme: provided?.theme ?? fallbackTheme,
+  };
+}
+
+export { ChartContainer, type ChartContextValue, useChartContext };

package/src/components/chart-legend.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { cn } from "../lib/cn";
+
+export interface ChartLegendItem {
+  name: string;
+  color: string;
+  dashed?: boolean;
+}
+
+export interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: ChartLegendItem[];
+  align?: "left" | "center" | "right";
+  insetLeft?: number;
+}
+
+const ALIGN_CLASS = { left: "justify-start", center: "justify-center", right: "justify-end" } as const;
+
+function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className="size-2 shrink-0 rounded-full"
+      style={dashed ? { border: `1.5px solid ${color}` } : { background: color }}
+    />
+  );
+}
+
+function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }: ChartLegendProps) {
+  return (
+    <div
+      className={cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className)}
+      style={{ paddingLeft: align === "left" ? insetLeft : undefined, ...style }}
+      {...props}
+    >
+      {items.map((item) => (
+        <span
+          key={item.name}
+          className="inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]"
+        >
+          <Swatch color={item.color} dashed={item.dashed} />
+          {item.name}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export { ChartLegend };