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

package/src/components/bar-list.tsx

@@ -0,0 +1,150 @@
+"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;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+
+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;
+const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
+
+function BarList({
+  data,
+  index,
+  dataKey = "value",
+  maxItems,
+  palette,
+  loading = false,
+  valueFormatter = (value) => value.toLocaleString("en-US"),
+  labelFormatter,
+  className,
+}: BarListProps) {
+  const { paletteName } = useChartContext(palette);
+  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) => ({
+      ...row,
+      color: rampColor(paletteName, (capped.length > 1 ? rank / (capped.length - 1) : 0) * RAMP_CEILING),
+    }));
+  }, [data, index, dataKey, maxItems, paletteName]);
+
+  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 gap-2", 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"
+          >
+            <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 motion-safe:transition-[width,opacity] motion-safe:duration-700 motion-safe:ease-out"
+                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,
+                }}
+              >
+                <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="w-16 shrink-0 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,63 @@
+"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";
+}
+
+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}
+    >
+      <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,49 @@
+"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";
+
+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,41 @@
+"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[];
+}
+
+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, className, ...props }: ChartLegendProps) {
+  return (
+    <div className={cn("flex flex-wrap gap-x-4 gap-y-1.5", className)} {...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 };

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/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 };