@alpic-ai/ui 0.0.0-dev.g21697c4 → 0.0.0-dev.g21e767c

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

package/src/components/grid-fx.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import * as React from "react";
+
+import { useReducedMotion } from "../hooks/use-reduced-motion";
+import { cn } from "../lib/cn";
+
+const CELL_SIZE = 46;
+const TTL_MIN = 42;
+const TTL_MAX = 78;
+const SPAWN_MIN = 180;
+const SPAWN_MAX = 480;
+
+interface GlitchLine {
+  horiz: boolean;
+  at: number;
+  life: number;
+  ttl: number;
+  color: string;
+  colorHi: string;
+}
+
+const rand = (min: number, max: number) => min + Math.random() * (max - min);
+
+function resolveColors(element: HTMLElement) {
+  const styles = getComputedStyle(element);
+  return {
+    color: styles.getPropertyValue("--color-primary").trim() || "#e90060" /* --color-primary */,
+    colorHi: styles.getPropertyValue("--color-primary-hover").trim() || "#f22b79" /* --color-primary-hover */,
+  };
+}
+
+function strokeFull(ctx: CanvasRenderingContext2D, horiz: boolean, at: number, width: number, height: number) {
+  ctx.beginPath();
+  if (horiz) {
+    ctx.moveTo(0, at);
+    ctx.lineTo(width, at);
+  } else {
+    ctx.moveTo(at, 0);
+    ctx.lineTo(at, height);
+  }
+  ctx.stroke();
+}
+
+function drawGlitchLine(ctx: CanvasRenderingContext2D, line: GlitchLine, width: number, height: number) {
+  const { horiz, at, color, colorHi } = line;
+  const span = horiz ? width : height;
+  const progress = line.life / line.ttl;
+  const envelope = progress < 0.08 ? progress / 0.08 : 1 - (progress - 0.08) / 0.92;
+  const base = Math.max(0, envelope);
+
+  ctx.lineCap = "round";
+
+  const ghosts = [
+    { offset: 0, alpha: 0.85, blur: 12 },
+    { offset: rand(-3, 3), alpha: 0.35, blur: 0 },
+    { offset: rand(-7, 7), alpha: 0.2, blur: 0 },
+  ];
+  for (const ghost of ghosts) {
+    ctx.globalAlpha = base * ghost.alpha * (Math.random() < 0.1 ? 0.3 : 1);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.shadowBlur = ghost.blur;
+    ctx.shadowColor = color;
+    strokeFull(ctx, horiz, at + ghost.offset, width, height);
+  }
+
+  if (Math.random() < 0.5) {
+    ctx.globalAlpha = base * 0.6;
+    ctx.lineWidth = 2;
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = colorHi;
+    for (let segment = 0; segment < 3; segment++) {
+      const start = rand(0, span * 0.85);
+      const end = start + rand(20, 80);
+      const jitter = rand(-4, 4);
+      ctx.beginPath();
+      if (horiz) {
+        ctx.moveTo(start, at + jitter);
+        ctx.lineTo(end, at + jitter);
+      } else {
+        ctx.moveTo(at + jitter, start);
+        ctx.lineTo(at + jitter, end);
+      }
+      ctx.stroke();
+    }
+  }
+}
+
+function GridFx({
+  className,
+  cellSize = CELL_SIZE,
+  style,
+  ...props
+}: React.ComponentProps<"canvas"> & { cellSize?: number }) {
+  const reduced = useReducedMotion();
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  React.useEffect(() => {
+    if (reduced) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const parent = canvas?.parentElement;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !parent || !ctx) {
+      return;
+    }
+
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let frame = 0;
+    let nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+    let onScreen = true;
+    const lines: GlitchLine[] = [];
+
+    const resize = () => {
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+      width = parent.clientWidth;
+      height = parent.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+
+    const spawn = () => {
+      const horiz = Math.random() < 0.5;
+      const tracks = Math.ceil((horiz ? height : width) / cellSize);
+      const { color, colorHi } = resolveColors(canvas);
+      lines.push({
+        horiz,
+        at: Math.floor(Math.random() * tracks) * cellSize + 0.5,
+        life: 0,
+        ttl: rand(TTL_MIN, TTL_MAX),
+        color,
+        colorHi,
+      });
+    };
+
+    const tick = () => {
+      ctx.globalAlpha = 1;
+      ctx.shadowBlur = 0;
+      ctx.clearRect(0, 0, width, height);
+
+      if (--nextIn <= 0) {
+        spawn();
+        nextIn = rand(SPAWN_MIN, SPAWN_MAX);
+      }
+      for (let index = lines.length - 1; index >= 0; index--) {
+        const line = lines[index];
+        if (!line) {
+          continue;
+        }
+        line.life++;
+        drawGlitchLine(ctx, line, width, height);
+        if (line.life >= line.ttl) {
+          lines.splice(index, 1);
+        }
+      }
+
+      ctx.globalAlpha = 1;
+      ctx.shadowBlur = 0;
+      frame = requestAnimationFrame(tick);
+    };
+
+    const running = () => onScreen && document.visibilityState === "visible";
+    const start = () => {
+      if (!frame && running()) {
+        frame = requestAnimationFrame(tick);
+      }
+    };
+    const stop = () => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      frame = 0;
+      ctx.clearRect(0, 0, width, height);
+    };
+
+    resize();
+    start();
+
+    const resizeObserver = new ResizeObserver(() => resize());
+    resizeObserver.observe(parent);
+
+    const intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (!entry) {
+        return;
+      }
+      onScreen = entry.isIntersecting;
+      if (onScreen) {
+        start();
+      } else {
+        stop();
+      }
+    });
+    intersectionObserver.observe(canvas);
+
+    const onVisibility = () => {
+      if (running()) {
+        start();
+      } else {
+        stop();
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      stop();
+      resizeObserver.disconnect();
+      intersectionObserver.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [reduced, cellSize]);
+
+  if (reduced) {
+    return null;
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      data-slot="grid-fx"
+      className={cn("pointer-events-none absolute inset-0 h-full w-full", className)}
+      style={{
+        zIndex: -1,
+        WebkitMaskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+        maskImage: "radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 100%)",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { GridFx };