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

package/src/components/chart-tooltip.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+export interface ChartTooltipItem {
+  name?: string | number;
+  value?: number | string;
+  color?: string;
+  stroke?: string;
+  fill?: string;
+  dataKey?: string | number;
+}
+
+export interface ChartTooltipContentProps {
+  active?: boolean;
+  payload?: ChartTooltipItem[];
+  label?: string | number;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  hideLabel?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  className?: string;
+}
+
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  hideLabel,
+  showTotal,
+  totalLabel = "Total",
+  className,
+}: ChartTooltipContentProps) {
+  const { theme } = useChartContext();
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const total = payload.reduce(
+    (sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)),
+    0,
+  );
+
+  return (
+    <div
+      className={cn(
+        "min-w-[130px] rounded-lg border px-3 py-2.5 shadow-lg",
+        "border-border bg-popover text-popover-foreground",
+        className,
+      )}
+    >
+      {!hideLabel && label !== undefined && (
+        <p className="font-mono text-[10px] uppercase tracking-wider text-quaternary-foreground mb-1.5">
+          {labelFormatter ? labelFormatter(label) : label}
+        </p>
+      )}
+      <div className="flex flex-col gap-1">
+        {payload.map((item, index) => {
+          const swatch =
+            [item.color, item.stroke, item.fill].find(
+              (candidate): candidate is string =>
+                typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url("),
+            ) ?? theme.mutedForeground;
+          const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+          return (
+            <div key={`${item.dataKey ?? index}`} className="flex items-center justify-between gap-4 text-text-xs">
+              <span className="inline-flex items-center gap-2 text-muted-foreground">
+                <span aria-hidden className="size-2 shrink-0 rounded-[2px]" style={{ background: swatch }} />
+                {item.name}
+              </span>
+              <span className="font-mono font-semibold tabular-nums text-foreground">{valueFormatter(numeric)}</span>
+            </div>
+          );
+        })}
+        {showTotal && (
+          <div className="mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs">
+            <span className="font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]">
+              {totalLabel}
+            </span>
+            <span className="font-mono font-semibold tabular-nums text-foreground">{valueFormatter(total)}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { ChartTooltipContent };

package/src/components/combobox.tsx

@@ -21,6 +21,8 @@ interface ComboboxContextValue {
   isSelected: (itemValue: string) => boolean;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 const ComboboxContext = createContext<ComboboxContextValue | null>(null);
@@ -40,6 +42,8 @@ interface ComboboxBaseProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 interface ComboboxSingleProps extends ComboboxBaseProps {
@@ -65,6 +69,7 @@ function Combobox(props: ComboboxProps) {
     open: controlledOpen,
     defaultOpen = false,
     onOpenChange: controlledOnOpenChange,
+    getOptionLabel,
   } = props;
 
   // Single mode state
@@ -175,8 +180,9 @@ function Combobox(props: ComboboxProps) {
       isSelected,
       open,
       onOpenChange,
+      getOptionLabel,
     }),
-    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange],
+    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange, getOptionLabel],
   );
 
   return (
@@ -229,6 +235,7 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
 /* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
 
 function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
+  const { getOptionLabel } = useComboboxContext();
   return (
     <>
       {values.map((tagValue) => (
@@ -237,7 +244,7 @@ function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (v
           onClick={(event) => event.stopPropagation()}
           onDismiss={() => onDeselect(tagValue)}
         >
-          {tagValue}
+          {getOptionLabel ? getOptionLabel(tagValue) : tagValue}
         </TagDismissible>
       ))}
     </>

package/src/components/donut-chart.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import * as React from "react";
+import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from "recharts";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { formatShare } from "../lib/chart";
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { paletteColor } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+const GEOMETRY = {
+  donut: { inner: "64%", outer: "92%" },
+  ring: { inner: "78%", outer: "92%" },
+} as const;
+
+export interface DonutChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  dataKey?: string;
+  variant?: keyof typeof GEOMETRY;
+  legend?: boolean;
+  paddingAngle?: number;
+  height?: number;
+  palette?: ChartPaletteName;
+  centerLabel?: string;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+function DonutChart({
+  data,
+  index,
+  dataKey = "value",
+  variant = "donut",
+  legend = false,
+  paddingAngle = 1,
+  height = 220,
+  palette,
+  centerLabel = "total",
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: DonutChartProps) {
+  const { palette: paletteColors, theme } = useChartContext(palette);
+  const reactId = React.useId().replace(/:/g, "");
+  const reducedMotion = useReducedMotion();
+  const animated = !reducedMotion;
+  const [active, setActive] = React.useState<number | null>(null);
+  const rowRefs = React.useRef<Array<HTMLDivElement | null>>([]);
+
+  const slices = React.useMemo(() => {
+    const mapped = data.map((row) => ({
+      name: String(row[index] ?? ""),
+      value: Number(row[dataKey]) || 0,
+    }));
+    mapped.sort((lower, upper) => upper.value - lower.value);
+    return mapped.map((slice, rank) => ({ ...slice, color: paletteColor(paletteColors, rank) }));
+  }, [data, index, dataKey, paletteColors]);
+
+  const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+  const maxValue = slices.reduce((max, slice) => (slice.value > max ? slice.value : max), 0);
+  const geometry = GEOMETRY[variant] ?? GEOMETRY.donut;
+  const formatName = (name: string) => (labelFormatter ? labelFormatter(name) : name);
+
+  const isEmpty = slices.length === 0 || total <= 0;
+
+  const activeSlice = active !== null ? slices[active] : undefined;
+  const centerTitle = activeSlice ? formatName(activeSlice.name) : centerLabel;
+  const centerValue = valueFormatter(activeSlice ? activeSlice.value : total);
+
+  React.useEffect(() => {
+    if (active !== null) {
+      rowRefs.current[active]?.scrollIntoView({ block: "nearest" });
+    }
+  }, [active]);
+
+  return (
+    <div data-slot="donut-chart" className={cn("@container flex w-full flex-col gap-3", className)}>
+      {loading ? (
+        <div
+          className="flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs"
+          style={{ height }}
+        >
+          <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
+          loading…
+        </div>
+      ) : isEmpty ? (
+        <div
+          className="flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs"
+          style={{ height }}
+        >
+          no data in range
+        </div>
+      ) : (
+        <div className="flex flex-col items-center gap-5 @md:flex-row">
+          <div className="relative shrink-0" style={{ width: height, height }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <RechartsPieChart>
+                <defs>
+                  {slices.map((slice, slot) => (
+                    <linearGradient key={slice.name} id={`donut-${reactId}-${slot}`} x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor={slice.color} stopOpacity={1} />
+                      <stop offset="100%" stopColor={slice.color} stopOpacity={0.7} />
+                    </linearGradient>
+                  ))}
+                </defs>
+                <Pie
+                  data={slices}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={geometry.inner}
+                  outerRadius={geometry.outer}
+                  paddingAngle={paddingAngle}
+                  startAngle={90}
+                  endAngle={-270}
+                  cornerRadius={2}
+                  stroke={theme.card}
+                  strokeWidth={1.5}
+                  isAnimationActive={animated}
+                  animationDuration={650}
+                  animationEasing="ease-out"
+                  onMouseEnter={(_entry, sliceIndex) => setActive(sliceIndex)}
+                  onMouseLeave={() => setActive(null)}
+                >
+                  {slices.map((slice, slot) => (
+                    <Cell
+                      key={slice.name}
+                      className="motion-safe:[transition:fill-opacity_180ms_ease-out]"
+                      fill={`url(#donut-${reactId}-${slot})`}
+                      fillOpacity={active === null || active === slot ? 1 : 0.55}
+                      stroke={theme.card}
+                      strokeWidth={1.5}
+                    />
+                  ))}
+                </Pie>
+              </RechartsPieChart>
+            </ResponsiveContainer>
+
+            <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center">
+              <span className="max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]">
+                {centerTitle}
+              </span>
+              <span className="font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums">
+                {centerValue}
+              </span>
+              {activeSlice && (
+                <span className="font-mono font-medium text-[11px] tabular-nums" style={{ color: activeSlice.color }}>
+                  {formatShare(activeSlice.value / total)}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {legend && (
+            <div
+              data-slot="donut-readout"
+              className="flex min-w-0 flex-1 flex-col overflow-y-auto pr-1"
+              style={{ maxHeight: height }}
+            >
+              {slices.map((slice, slot) => (
+                // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover-sync; all values are visible without it
+                <div
+                  key={slice.name}
+                  ref={(node) => {
+                    rowRefs.current[slot] = node;
+                  }}
+                  onMouseEnter={() => setActive(slot)}
+                  onMouseLeave={() => setActive(null)}
+                  className={cn(
+                    "flex flex-col gap-1.5 border-border/40 border-b px-2 py-2 text-text-xs last:border-b-0 motion-safe:transition-colors",
+                    active === slot ? "bg-muted/50" : "bg-transparent",
+                  )}
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <span className="inline-flex min-w-0 items-center gap-2 text-muted-foreground">
+                      <span
+                        aria-hidden
+                        className="h-2 w-2.5 shrink-0 rounded-[3px]"
+                        style={{ background: slice.color }}
+                      />
+                      <span className="truncate">{formatName(slice.name)}</span>
+                    </span>
+                    <span className="flex shrink-0 items-center gap-3 font-mono tabular-nums">
+                      <span className="min-w-[3.5rem] text-right font-semibold text-foreground">
+                        {valueFormatter(slice.value)}
+                      </span>
+                      <span className="w-10 text-right text-quaternary-foreground">
+                        {formatShare(slice.value / total)}
+                      </span>
+                    </span>
+                  </div>
+                  <span aria-hidden className="relative block h-[2px] w-full overflow-hidden rounded-full bg-border/40">
+                    <span
+                      className="absolute inset-y-0 left-0 rounded-full motion-safe:transition-[width] motion-safe:duration-500"
+                      style={{
+                        width: `${maxValue > 0 ? (slice.value / maxValue) * 100 : 0}%`,
+                        background: slice.color,
+                        opacity: active === null || active === slot ? 1 : 0.45,
+                      }}
+                    />
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { DonutChart };

package/src/components/heatmap-chart.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import type { ChartPaletteName } from "../lib/chart-palette";
+import { HEAT_EMPTY, heatColor, heatRamp } from "../lib/chart-palette";
+import { cn } from "../lib/cn";
+import { useChartContext } from "./chart-container";
+
+export interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+interface HoverState {
+  x: number;
+  y: number;
+  rowLabel: string;
+  colLabel: string;
+  value: number;
+}
+
+const PLACEHOLDER_HEIGHT = 168;
+// viewBox units — the SVG scales to the container width, so these stay squares.
+const CELL = 22;
+const GAP = 3;
+const PAD = { left: 36, top: 18, right: 6, bottom: 6 };
+const MAX_X_TICKS = 13;
+// Dots never fully vanish at zero and never quite touch their neighbours at peak.
+const DOT_MIN = 0.42;
+const DOT_RANGE = 0.52;
+const TOOLTIP_OFFSET = 14;
+const TOOLTIP_WIDTH = 150;
+const TOOLTIP_HEIGHT = 64;
+
+// Unambiguous composite key — labels may themselves contain hyphens, spaces, etc.
+const pairKey = (rowLabel: string, colLabel: string) => JSON.stringify([rowLabel, colLabel]);
+
+const uniqueInOrder = (values: readonly string[]) => {
+  const seen = new Set<string>();
+  const ordered: string[] = [];
+  for (const value of values) {
+    if (!seen.has(value)) {
+      seen.add(value);
+      ordered.push(value);
+    }
+  }
+  return ordered;
+};
+
+function HeatmapChart({
+  data,
+  xKey,
+  yKey,
+  dataKey = "value",
+  variant = "square",
+  palette,
+  xLabels,
+  yLabels,
+  highlightPeak = true,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  xTickFormatter,
+  yTickFormatter,
+  ariaLabel = "Activity heatmap",
+  className,
+}: HeatmapChartProps) {
+  const { paletteName, theme } = useChartContext(palette);
+  const [hovered, setHovered] = React.useState<HoverState | null>(null);
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const layout = React.useMemo(() => {
+    const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
+    const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
+    const valueAt = new Map<string, number>();
+    for (const row of data) {
+      valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+    }
+    let maxValue = 0;
+    let peakKey = "";
+    const cells = rows.flatMap((rowLabel, rowIndex) =>
+      columns.map((colLabel, colIndex) => {
+        const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+        if (value > maxValue) {
+          maxValue = value;
+          peakKey = pairKey(rowLabel, colLabel);
+        }
+        return { rowLabel, colLabel, rowIndex, colIndex, value };
+      }),
+    );
+    return { columns, rows, cells, maxValue, peakKey };
+  }, [data, xKey, yKey, dataKey, xLabels, yLabels]);
+
+  const { columns, rows, cells, maxValue, peakKey } = layout;
+  const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+
+  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>
+    );
+  }
+
+  const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+  const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
+  const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
+  const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+  const cellX = (col: number) => PAD.left + col * (CELL + GAP);
+  const cellY = (row: number) => PAD.top + row * (CELL + GAP);
+  const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
+  const formatY = (label: string) => (yTickFormatter ? yTickFormatter(label) : label);
+
+  // The tooltip follows the cursor; rendered through a portal so a transformed/
+  // clipped ancestor (e.g. the card's mount animation + overflow-hidden) can't
+  // shift or trim it. Flip near the viewport edges.
+  const tooltipLeft =
+    hovered && hovered.x + TOOLTIP_OFFSET + TOOLTIP_WIDTH > window.innerWidth
+      ? hovered.x - TOOLTIP_OFFSET - TOOLTIP_WIDTH
+      : (hovered?.x ?? 0) + TOOLTIP_OFFSET;
+  const tooltipTop =
+    hovered && hovered.y + TOOLTIP_OFFSET + TOOLTIP_HEIGHT > window.innerHeight
+      ? hovered.y - TOOLTIP_OFFSET - TOOLTIP_HEIGHT
+      : (hovered?.y ?? 0) + TOOLTIP_OFFSET;
+
+  return (
+    <div data-slot="heatmap-chart" className={cn("w-full", className)}>
+      <div className="overflow-x-auto">
+        <svg
+          viewBox={`0 0 ${totalWidth} ${totalHeight}`}
+          className="block min-w-[480px]"
+          style={{ width: "100%", height: "auto" }}
+          role="img"
+          aria-label={ariaLabel}
+          onMouseLeave={() => setHovered(null)}
+        >
+          {columns.map((label, col) =>
+            col % xStride === 0 ? (
+              <text
+                key={`x-${label}`}
+                x={cellX(col) + CELL / 2}
+                y={PAD.top - 7}
+                textAnchor="middle"
+                className="fill-quaternary-foreground font-mono text-[8.5px]"
+              >
+                {formatX(label)}
+              </text>
+            ) : null,
+          )}
+          {rows.map((label, row) => (
+            <text
+              key={`y-${label}`}
+              x={PAD.left - 8}
+              y={cellY(row) + CELL / 2 + 3}
+              textAnchor="end"
+              className="fill-quaternary-foreground font-mono text-[8.5px]"
+            >
+              {formatY(label)}
+            </text>
+          ))}
+          {cells.map((cell) => {
+            const fraction = cell.value / maxValue;
+            const fill = heatColor(ramp, fraction);
+            const key = pairKey(cell.rowLabel, cell.colLabel);
+            const isPeak = highlightPeak && key === peakKey;
+            if (variant === "dot") {
+              return (
+                <circle
+                  key={key}
+                  cx={cellX(cell.colIndex) + CELL / 2}
+                  cy={cellY(cell.rowIndex) + CELL / 2}
+                  r={(CELL / 2) * (DOT_MIN + DOT_RANGE * fraction)}
+                  fill={fill}
+                  stroke={isPeak ? theme.foreground : undefined}
+                  strokeWidth={isPeak ? 1.4 : undefined}
+                />
+              );
+            }
+            return (
+              <rect
+                key={key}
+                x={cellX(cell.colIndex)}
+                y={cellY(cell.rowIndex)}
+                width={CELL}
+                height={CELL}
+                rx={2.5}
+                fill={fill}
+                stroke={isPeak ? theme.foreground : undefined}
+                strokeWidth={isPeak ? 1.4 : undefined}
+              />
+            );
+          })}
+          {/* Transparent hit layer over the full pitch so every cell — and the gaps
+              between dots — registers hover uniformly. */}
+          {cells.map((cell) => (
+            // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover tooltip; all values are visible on the cells
+            <rect
+              key={`hit-${pairKey(cell.rowLabel, cell.colLabel)}`}
+              x={cellX(cell.colIndex)}
+              y={cellY(cell.rowIndex)}
+              width={CELL + GAP}
+              height={CELL + GAP}
+              fill="transparent"
+              onMouseMove={(event) =>
+                setHovered({
+                  x: event.clientX,
+                  y: event.clientY,
+                  rowLabel: cell.rowLabel,
+                  colLabel: cell.colLabel,
+                  value: cell.value,
+                })
+              }
+            />
+          ))}
+        </svg>
+      </div>
+
+      {mounted &&
+        hovered &&
+        createPortal(
+          <div
+            className="pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg"
+            style={{ left: tooltipLeft, top: tooltipTop }}
+          >
+            <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
+              {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
+            </p>
+            <div className="flex items-center justify-between gap-4 text-text-xs">
+              <span className="inline-flex items-center gap-2 text-muted-foreground">
+                <span
+                  aria-hidden
+                  className="size-2 shrink-0 rounded-[2px]"
+                  style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                />
+                activity
+              </span>
+              <span className="font-mono font-semibold tabular-nums text-foreground">
+                {valueFormatter(hovered.value)}
+              </span>
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+export { HeatmapChart };