@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/charts/core/motion.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import { type RefObject, useEffect, useRef, useState } from "react";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+/** True when the user asked the OS for less motion. False on the server. */
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const media = window.matchMedia(QUERY);
+    setReduced(media.matches);
+    const onChange = () => setReduced(media.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+export const EASE_OUT = "cubic-bezier(.22,1,.36,1)";
+
+/** Cubic ease-out for `requestAnimationFrame` transitions, `t` in 0..1. */
+export function easeOutCubic(t: number): number {
+  return 1 - (1 - t) ** 3;
+}
+
+function prefersReducedMotion(): boolean {
+  return typeof window !== "undefined" && !!window.matchMedia?.(QUERY).matches;
+}
+
+export interface EntryAnimationOptions {
+  /** Skip the animation entirely. */
+  disabled?: boolean;
+  /** Changing the key replays the animation (e.g. when the data set changes). */
+  replayKey?: unknown;
+}
+
+/**
+ * Plays an entry animation once per `replayKey` with the Web Animations API.
+ * `play` receives the root element and starts whatever animations it needs.
+ * Nothing runs under `prefers-reduced-motion`, on the server, or in browsers
+ * without `Element.animate`, so the static final state is always the default.
+ */
+export function useEntryAnimation<T extends Element>(
+  ref: RefObject<T | null>,
+  play: (root: T) => void,
+  { disabled = false, replayKey }: EntryAnimationOptions = {},
+): void {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: replays only when the key changes.
+  useEffect(() => {
+    const root = ref.current;
+    if (disabled || !root || typeof root.animate !== "function" || prefersReducedMotion()) return;
+    play(root);
+  }, [disabled, replayKey]);
+}
+
+/** Reveals children left to right by scaling a clip rectangle. */
+export function revealClip(element: Element, duration = 900, delay = 0): void {
+  element.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], {
+    duration,
+    delay,
+    easing: EASE_OUT,
+    fill: "backwards",
+  });
+}
+
+/** Fades an element in. */
+export function fadeIn(element: Element, duration = 400, delay = 0): void {
+  element.animate([{ opacity: 0 }, { opacity: 1 }], {
+    duration,
+    delay,
+    easing: "ease-out",
+    fill: "backwards",
+  });
+}
+
+/**
+ * Eases a displayed number towards `target` (cubic ease-out). Starts from
+ * `from` on mount, then from wherever it currently is when `target` changes.
+ * Returns `target` at once under `prefers-reduced-motion` or `disabled`.
+ */
+export function useAnimatedNumber(
+  target: number,
+  {
+    from = 0,
+    duration = 900,
+    disabled = false,
+  }: { from?: number; duration?: number; disabled?: boolean } = {},
+): number {
+  const [value, setValue] = useState(disabled ? target : from);
+  const current = useRef(value);
+  current.current = value;
+  useEffect(() => {
+    if (disabled || prefersReducedMotion() || typeof requestAnimationFrame !== "function") {
+      setValue(target);
+      return;
+    }
+    const start = current.current;
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - startedAt) / duration);
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(start + (target - start) * eased);
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, duration, disabled]);
+  return value;
+}

package/src/charts/core/palette.ts

@@ -0,0 +1,76 @@
+/**
+ * Series colors. The first series always wears the brand (`accent-word`, a
+ * readable tone of the active `data-accent` palette); the rest come from the
+ * categorical `chart-cat-*` tokens, tuned separately for light and dark.
+ * Values are CSS `var()` references, so apply them through `style`, never as
+ * SVG presentation attributes.
+ */
+export const CHART_PALETTE = [
+  "var(--accent-word)",
+  "var(--chart-cat-1)",
+  "var(--chart-cat-2)",
+  "var(--chart-cat-3)",
+  "var(--chart-cat-4)",
+  "var(--chart-cat-5)",
+  "var(--chart-cat-6)",
+  "var(--chart-cat-7)",
+] as const;
+
+/** Color for the series at `index`, unless the series brings its own. */
+export function seriesColor(index: number, override?: string): string {
+  return override ?? (CHART_PALETTE[index % CHART_PALETTE.length] as string);
+}
+
+/** Direction of change: `chart-up` and `chart-down` tokens, `chart-total` when flat or a total. */
+export const DIRECTION_COLORS = {
+  up: "var(--chart-up)",
+  down: "var(--chart-down)",
+  flat: "var(--chart-total)",
+} as const;
+
+export type ChartDirection = keyof typeof DIRECTION_COLORS;
+
+/** `up` / `down` / `flat` for a change; changes within `epsilon` count as flat. */
+export function directionOf(delta: number, epsilon = 0): ChartDirection {
+  return delta > epsilon ? "up" : delta < -epsilon ? "down" : "flat";
+}
+
+export type ChartTone = "neutral" | "accent" | "danger" | "warning" | "success";
+
+/** Stroke/text color and soft fill for annotations and status marks. */
+export const TONE_COLORS: Record<ChartTone, { ink: string; soft: string }> = {
+  neutral: { ink: "var(--ink-3)", soft: "var(--surface-2)" },
+  accent: { ink: "var(--accent-ink)", soft: "var(--accent-soft)" },
+  danger: { ink: "var(--danger)", soft: "var(--danger-soft)" },
+  warning: { ink: "var(--warning)", soft: "var(--warning-soft)" },
+  success: { ink: "var(--success)", soft: "var(--success-soft)" },
+};
+
+/** Base hue of a monochrome chart: the active brand accent. */
+export const MONOCHROME_BASE = "var(--accent-word)";
+
+/**
+ * Shade `step` of `count` in one hue: step 0 is the full color, the last
+ * step the palest tint (40%), mixed towards the surface so it works in both
+ * themes. `count` of 1 gives the full color.
+ */
+export function monochromeShade(step: number, count: number, base = MONOCHROME_BASE): string {
+  const last = Math.max(1, count - 1);
+  const share = Math.round(100 - (Math.min(Math.max(step, 0), last) / last) * 60);
+  return share >= 100 ? base : `color-mix(in oklab, ${base} ${share}%, var(--surface))`;
+}
+
+/**
+ * Shades for `values`, darkest on the largest value, so rank reads as
+ * intensity. Returns one color per input, in input order.
+ */
+export function monochromeByValue(values: readonly number[], base = MONOCHROME_BASE): string[] {
+  const order = values
+    .map((value, index) => ({ value, index }))
+    .sort((a, b) => b.value - a.value || a.index - b.index);
+  const out: string[] = new Array(values.length);
+  order.forEach((entry, rank) => {
+    out[entry.index] = monochromeShade(rank, values.length, base);
+  });
+  return out;
+}

package/src/charts/core/path.ts

@@ -0,0 +1,198 @@
+/** SVG path builders. All coordinates are in pixels. */
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * `smooth` is a monotone cubic; the `step*` curves hold a value until the next
+ * sample (`step-after`), jump to it early (`step-before`) or change halfway (`step`).
+ */
+export type Curve = "linear" | "smooth" | "step" | "step-before" | "step-after";
+
+/** The same step curve walked backwards (the lower edge of an area). */
+function mirrorCurve(curve: Curve): Curve {
+  if (curve === "step-before") return "step-after";
+  if (curve === "step-after") return "step-before";
+  return curve;
+}
+
+const round = (value: number) => Math.round(value * 100) / 100;
+
+/** Splits a sequence at `null` gaps into drawable runs. */
+export function segments(points: ReadonlyArray<Point | null>): Point[][] {
+  const out: Point[][] = [];
+  let run: Point[] = [];
+  for (const point of points) {
+    if (point) {
+      run.push(point);
+    } else if (run.length) {
+      out.push(run);
+      run = [];
+    }
+  }
+  if (run.length) out.push(run);
+  return out;
+}
+
+/**
+ * Tangents for a monotone cubic through `points` (Fritsch–Butland): the curve
+ * never overshoots between two samples, so a peak in the data is a peak on screen.
+ */
+export function monotoneTangents(points: readonly Point[]): number[] {
+  const n = points.length;
+  if (n < 2) return [0];
+  const slopes: number[] = [];
+  const widths: number[] = [];
+  for (let k = 0; k < n - 1; k += 1) {
+    const a = points[k] as Point;
+    const b = points[k + 1] as Point;
+    const h = b.x - a.x;
+    widths.push(h);
+    slopes.push(h === 0 ? 0 : (b.y - a.y) / h);
+  }
+  const tangents: number[] = [slopes[0] as number];
+  for (let k = 1; k < n - 1; k += 1) {
+    const d0 = slopes[k - 1] as number;
+    const d1 = slopes[k] as number;
+    const h0 = widths[k - 1] as number;
+    const h1 = widths[k] as number;
+    tangents.push(d0 * d1 <= 0 ? 0 : (3 * (h0 + h1)) / ((2 * h1 + h0) / d0 + (h1 + 2 * h0) / d1));
+  }
+  tangents.push(slopes[n - 2] as number);
+  return tangents;
+}
+
+/**
+ * Commands through `points`. The first command is `M`, or `L` when `join` is
+ * true, so the run can extend a path already in progress (areas).
+ */
+export function curveCommands(points: readonly Point[], curve: Curve, join = false): string {
+  if (!points.length) return "";
+  const first = points[0] as Point;
+  let d = `${join ? "L" : "M"}${round(first.x)},${round(first.y)}`;
+  if (curve === "step" || curve === "step-before" || curve === "step-after") {
+    for (let k = 1; k < points.length; k += 1) {
+      const a = points[k - 1] as Point;
+      const b = points[k] as Point;
+      if (curve === "step-after") {
+        d += `H${round(b.x)}V${round(b.y)}`;
+      } else if (curve === "step-before") {
+        d += `V${round(b.y)}H${round(b.x)}`;
+      } else {
+        const mid = round((a.x + b.x) / 2);
+        d += `H${mid}V${round(b.y)}H${round(b.x)}`;
+      }
+    }
+    return d;
+  }
+  if (curve === "linear" || points.length < 3) {
+    for (let k = 1; k < points.length; k += 1) {
+      const p = points[k] as Point;
+      d += `L${round(p.x)},${round(p.y)}`;
+    }
+    return d;
+  }
+  const m = monotoneTangents(points);
+  for (let k = 0; k < points.length - 1; k += 1) {
+    const a = points[k] as Point;
+    const b = points[k + 1] as Point;
+    const h = (b.x - a.x) / 3;
+    d += `C${round(a.x + h)},${round(a.y + (m[k] as number) * h)} ${round(b.x - h)},${round(
+      b.y - (m[k + 1] as number) * h,
+    )} ${round(b.x)},${round(b.y)}`;
+  }
+  return d;
+}
+
+/** Line through the points; `null` entries break the line. */
+export function linePath(points: ReadonlyArray<Point | null>, curve: Curve = "linear"): string {
+  return segments(points)
+    .map((run) => curveCommands(run, curve))
+    .join("");
+}
+
+/**
+ * Closed area between a top and a bottom edge sampled at the same x positions
+ * (`bottom[i]` pairs with `top[i]`). A `null` in `top` breaks the area.
+ */
+export function areaPath(
+  top: ReadonlyArray<Point | null>,
+  bottom: ReadonlyArray<Point>,
+  curve: Curve = "linear",
+): string {
+  let d = "";
+  let start = -1;
+  const flush = (end: number) => {
+    if (start < 0) return;
+    const upper = top.slice(start, end) as Point[];
+    const lower = bottom.slice(start, end).reverse();
+    d += `${curveCommands(upper, curve)}${curveCommands(lower, mirrorCurve(curve), true)}Z`;
+    start = -1;
+  };
+  top.forEach((point, index) => {
+    if (point && start < 0) start = index;
+    if (!point) flush(index);
+  });
+  flush(top.length);
+  return d;
+}
+
+export interface CornerRadii {
+  tl: number;
+  tr: number;
+  br: number;
+  bl: number;
+}
+
+/** Rectangle with an independent radius per corner, clamped to fit. */
+export function roundedRectPath(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radii: CornerRadii,
+): string {
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  const cap = Math.min(w, h) / 2;
+  const tl = Math.min(radii.tl, cap);
+  const tr = Math.min(radii.tr, cap);
+  const br = Math.min(radii.br, cap);
+  const bl = Math.min(radii.bl, cap);
+  const r = round;
+  return [
+    `M${r(x + tl)},${r(y)}`,
+    `H${r(x + w - tr)}`,
+    tr ? `A${r(tr)},${r(tr)} 0 0 1 ${r(x + w)},${r(y + tr)}` : "",
+    `V${r(y + h - br)}`,
+    br ? `A${r(br)},${r(br)} 0 0 1 ${r(x + w - br)},${r(y + h)}` : "",
+    `H${r(x + bl)}`,
+    bl ? `A${r(bl)},${r(bl)} 0 0 1 ${r(x)},${r(y + h - bl)}` : "",
+    `V${r(y + tl)}`,
+    tl ? `A${r(tl)},${r(tl)} 0 0 1 ${r(x + tl)},${r(y)}` : "",
+    "Z",
+  ].join("");
+}
+
+export type BarEnd = "top" | "bottom" | "left" | "right" | "all" | "none";
+
+/** Bar rounded only at its value end, the way the eye reads the bar's length. */
+export function barPath(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+  end: BarEnd,
+): string {
+  const on = (corner: boolean) => (corner ? radius : 0);
+  const all = end === "all";
+  return roundedRectPath(x, y, width, height, {
+    tl: on(all || end === "top" || end === "left"),
+    tr: on(all || end === "top" || end === "right"),
+    br: on(all || end === "bottom" || end === "right"),
+    bl: on(all || end === "bottom" || end === "left"),
+  });
+}

package/src/charts/core/pattern-defs.tsx

@@ -0,0 +1,87 @@
+import { type ChartPattern, resolvePattern } from "./patterns.js";
+
+export interface PatternDefItem {
+  /** Id the marks reference with `url(#id)` (see `patternId`). */
+  id: string;
+  pattern: ChartPattern;
+  /** Series color: a CSS color or `var()` token. */
+  color: string;
+}
+
+/**
+ * `<pattern>` definitions to place inside an `<svg><defs>`. Strokes and fills
+ * use the item colour through `style`, so tokens resolve per theme.
+ */
+export function ChartPatternDefs({ items }: { items: readonly PatternDefItem[] }) {
+  return (
+    <>
+      {items.map(({ id, pattern, color }) => {
+        const tile = resolvePattern(pattern);
+        return (
+          <pattern
+            key={id}
+            id={id}
+            patternUnits="userSpaceOnUse"
+            width={tile.size}
+            height={tile.size}
+          >
+            <rect
+              width={tile.size}
+              height={tile.size}
+              style={{ fill: color, fillOpacity: tile.backdrop ?? 0.2 }}
+            />
+            {tile.shapes.map((shape, index) => {
+              const key = index;
+              if (shape.type === "line") {
+                return (
+                  <line
+                    key={key}
+                    x1={shape.x1}
+                    y1={shape.y1}
+                    x2={shape.x2}
+                    y2={shape.y2}
+                    strokeWidth={shape.width ?? 1.6}
+                    style={{ stroke: color }}
+                  />
+                );
+              }
+              if (shape.type === "circle") {
+                return (
+                  <circle
+                    key={key}
+                    cx={shape.cx}
+                    cy={shape.cy}
+                    r={shape.r}
+                    style={{ fill: color }}
+                  />
+                );
+              }
+              if (shape.type === "rect") {
+                return (
+                  <rect
+                    key={key}
+                    x={shape.x}
+                    y={shape.y}
+                    width={shape.width}
+                    height={shape.height}
+                    style={{ fill: color }}
+                  />
+                );
+              }
+              return (
+                <path
+                  key={key}
+                  d={shape.d}
+                  strokeWidth={shape.width ?? 1.4}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ fill: shape.filled ? color : "none", stroke: color }}
+                />
+              );
+            })}
+          </pattern>
+        );
+      })}
+    </>
+  );
+}

package/src/charts/core/patterns.ts

@@ -0,0 +1,121 @@
+/**
+ * SVG pattern fills for colour-blind friendly charts. A pattern is a square
+ * tile of strokes and fills drawn in the series colour over a soft backdrop of
+ * the same colour, so the token (and therefore the theme) still decides the hue.
+ * Pure data here; `ChartPatternDefs` (pattern-defs.tsx) turns it into `<pattern>`s.
+ */
+
+export type PatternShape =
+  | { type: "line"; x1: number; y1: number; x2: number; y2: number; width?: number }
+  | { type: "circle"; cx: number; cy: number; r: number }
+  | { type: "rect"; x: number; y: number; width: number; height: number }
+  | { type: "path"; d: string; width?: number; filled?: boolean };
+
+/** A tile of `size` x `size` pixels repeated across the mark. */
+export interface PatternTile {
+  size: number;
+  shapes: readonly PatternShape[];
+  /** Opacity of the colour backdrop under the shapes (0.2 by default). */
+  backdrop?: number;
+}
+
+export const PATTERN_NAMES = [
+  "stripes",
+  "stripes-reverse",
+  "dots",
+  "crosshatch",
+  "grid",
+  "zigzag",
+  "checks",
+  "diamonds",
+  "waves",
+] as const;
+
+export type PatternName = (typeof PATTERN_NAMES)[number];
+
+/** A named design, or your own tile. */
+export type ChartPattern = PatternName | PatternTile;
+
+const BUILT_IN: Record<PatternName, PatternTile> = {
+  stripes: {
+    size: 8,
+    shapes: [
+      { type: "line", x1: 0, y1: 8, x2: 8, y2: 0, width: 2 },
+      { type: "line", x1: -2, y1: 2, x2: 2, y2: -2, width: 2 },
+      { type: "line", x1: 6, y1: 10, x2: 10, y2: 6, width: 2 },
+    ],
+  },
+  "stripes-reverse": {
+    size: 8,
+    shapes: [
+      { type: "line", x1: 0, y1: 0, x2: 8, y2: 8, width: 2 },
+      { type: "line", x1: -2, y1: 6, x2: 2, y2: 10, width: 2 },
+      { type: "line", x1: 6, y1: -2, x2: 10, y2: 2, width: 2 },
+    ],
+  },
+  dots: {
+    size: 8,
+    shapes: [
+      { type: "circle", cx: 2, cy: 2, r: 1.5 },
+      { type: "circle", cx: 6, cy: 6, r: 1.5 },
+    ],
+  },
+  crosshatch: {
+    size: 8,
+    shapes: [
+      { type: "line", x1: 0, y1: 8, x2: 8, y2: 0, width: 1.4 },
+      { type: "line", x1: 0, y1: 0, x2: 8, y2: 8, width: 1.4 },
+      { type: "line", x1: -2, y1: 2, x2: 2, y2: -2, width: 1.4 },
+      { type: "line", x1: 6, y1: 10, x2: 10, y2: 6, width: 1.4 },
+      { type: "line", x1: -2, y1: 6, x2: 2, y2: 10, width: 1.4 },
+      { type: "line", x1: 6, y1: -2, x2: 10, y2: 2, width: 1.4 },
+    ],
+  },
+  grid: {
+    size: 8,
+    shapes: [
+      { type: "line", x1: 0, y1: 0, x2: 8, y2: 0, width: 1.4 },
+      { type: "line", x1: 0, y1: 0, x2: 0, y2: 8, width: 1.4 },
+    ],
+  },
+  zigzag: {
+    size: 8,
+    shapes: [{ type: "path", d: "M0 6 L2 2 L4 6 L6 2 L8 6", width: 1.4 }],
+  },
+  checks: {
+    size: 8,
+    shapes: [
+      { type: "rect", x: 0, y: 0, width: 4, height: 4 },
+      { type: "rect", x: 4, y: 4, width: 4, height: 4 },
+    ],
+  },
+  diamonds: {
+    size: 8,
+    shapes: [{ type: "path", d: "M4 0.8 L7.2 4 L4 7.2 L0.8 4 Z", width: 1.3 }],
+  },
+  waves: {
+    size: 8,
+    shapes: [{ type: "path", d: "M0 4 Q2 0.5 4 4 T8 4", width: 1.4 }],
+  },
+};
+
+/** The tile of a named design or of a custom pattern (custom tiles are clamped to a sane size). */
+export function resolvePattern(pattern: ChartPattern): PatternTile {
+  if (typeof pattern === "string") return BUILT_IN[pattern] ?? BUILT_IN.stripes;
+  return { ...pattern, size: Math.min(48, Math.max(2, pattern.size)) };
+}
+
+/** Id safe for `url(#id)`: letters, digits, dashes and underscores only. */
+export function patternId(scope: string, key: string): string {
+  return `${scope.replace(/[^a-zA-Z0-9_-]/g, "")}-p-${key.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+
+/** Paint value that fills a mark with the pattern of `id`. */
+export function patternFill(id: string): string {
+  return `url(#${id})`;
+}
+
+/** Cycles the built-in designs, handy for "one pattern per series" charts. */
+export function patternAt(index: number): PatternName {
+  return PATTERN_NAMES[index % PATTERN_NAMES.length] as PatternName;
+}

package/src/charts/core/plot-overlay.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { KeyboardEvent, PointerEvent } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface PlotPointer {
+  /** Pointer position relative to the plot, in pixels. */
+  x: number;
+  y: number;
+}
+
+export interface PlotOverlayProps {
+  /** Position and size of the plot inside the chart container. */
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  /** Accessible name (`labels.explore`). */
+  label: string;
+  /** Number of explorable points. */
+  count: number;
+  /** Active point, or null. */
+  active: number | null;
+  /** Reads the active point aloud: category and values. */
+  valueText: string;
+  onActiveChange: (index: number | null) => void;
+  /** Maps a plot-relative pointer to a point; return null to clear (hit-testing charts). */
+  indexAt: (pointer: PlotPointer) => number | null;
+  /** Which arrow keys step through the points. "both" maps Right/Down to next and Left/Up to previous. */
+  keys?: "horizontal" | "vertical" | "both";
+  /** Extra key handling, e.g. switching streams with Up/Down. Return true when handled. */
+  onKey?: (event: KeyboardEvent<HTMLDivElement>) => boolean;
+  className?: string;
+}
+
+/**
+ * Transparent, focusable layer over a plot: one place for pointer hover and
+ * keyboard exploration, shared by the non-cartesian charts. It is a
+ * `role="slider"` so assistive tech announces `valueText` as the arrows move.
+ * Arrows step, Home/End jump, Escape clears.
+ */
+export function PlotOverlay({
+  left,
+  top,
+  width,
+  height,
+  label,
+  count,
+  active,
+  valueText,
+  onActiveChange,
+  indexAt,
+  keys = "horizontal",
+  onKey,
+  className,
+}: PlotOverlayProps) {
+  const local = (event: PointerEvent<HTMLDivElement>): PlotPointer => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const move = (delta: number) => {
+    const from = active ?? (delta > 0 ? -1 : count);
+    onActiveChange(Math.min(count - 1, Math.max(0, from + delta)));
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (onKey?.(event)) {
+      event.preventDefault();
+      return;
+    }
+    const next =
+      (keys !== "vertical" && event.key === "ArrowRight") ||
+      (keys !== "horizontal" && event.key === "ArrowDown");
+    const previous =
+      (keys !== "vertical" && event.key === "ArrowLeft") ||
+      (keys !== "horizontal" && event.key === "ArrowUp");
+    if (next) move(1);
+    else if (previous) move(-1);
+    else if (event.key === "Home") onActiveChange(0);
+    else if (event.key === "End") onActiveChange(count - 1);
+    else if (event.key === "Escape") onActiveChange(null);
+    else return;
+    event.preventDefault();
+  };
+  return (
+    <div
+      role="slider"
+      tabIndex={0}
+      aria-label={label}
+      aria-valuemin={1}
+      aria-valuemax={Math.max(1, count)}
+      aria-valuenow={(active ?? 0) + 1}
+      aria-valuetext={valueText}
+      onKeyDown={onKeyDown}
+      onFocus={() => onActiveChange(active ?? 0)}
+      onBlur={() => onActiveChange(null)}
+      onPointerMove={(event) => onActiveChange(indexAt(local(event)))}
+      onPointerDown={(event) => onActiveChange(indexAt(local(event)))}
+      onPointerLeave={() => onActiveChange(null)}
+      className={cn(
+        "absolute rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+        className,
+      )}
+      style={{ left, top, width, height }}
+    />
+  );
+}