Scrub Number Field

1"use client";2
3import { useRef, useState } from "react";4import type { AnimationEvent as ReactAnimationEvent, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react";5
6const MIN = 0;7const MAX = 100;8const PIXELS_PER_STEP = 2;9const DRAG_THRESHOLD = 3;10
11/* The two speeds a design tool trains your hands to expect, on the keys it trains them to reach for. */12const stepFor = (event: { altKey: boolean; shiftKey: boolean }) => (event.shiftKey ? 10 : event.altKey ? 0.1 : 1);13const round = (value: number) => Math.round(value * 10) / 10;14const clamp = (value: number) => Math.min(MAX, Math.max(MIN, value));15const numeric = (raw: string) => raw.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");16
17const nudgeKeyframes = `18@keyframes scrub-number-nudge {19  0%, 100% { transform: translateX(0); }20  40% { transform: translateX(var(--scrub-nudge)); }21}22@media (prefers-reduced-motion: reduce) {23  @keyframes scrub-number-nudge {24    0%, 100% { transform: none; }25  }26}`;27
28export function ScrubNumberField() {29  const [value, setValue] = useState(48);30  const [draft, setDraft] = useState<string | null>(null);31  const [scrubbing, setScrubbing] = useState(false);32  const [bound, setBound] = useState<"min" | "max" | null>(null);33  const inputRef = useRef<HTMLInputElement>(null);34  const drag = useRef({ origin: 0, base: 48, value: 48, step: 1, pinned: "", moved: false });35  const reverting = useRef(false);36
37  const startScrub = (event: ReactPointerEvent<HTMLDivElement>) => {38    /* Once you are typing the field is a text input again, and dragging selects characters the way it should. */39    if (event.button !== 0 || document.activeElement === inputRef.current) return;40    event.preventDefault();41    event.currentTarget.setPointerCapture(event.pointerId);42    drag.current = { origin: event.clientX, base: value, value, step: stepFor(event), pinned: "", moved: false };43  };44
45  const moveScrub = (event: ReactPointerEvent<HTMLDivElement>) => {46    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;47
48    /* Reaching for Shift mid-drag re-bases the gesture instead of multiplying the pixels already travelled. */49    const held = stepFor(event);50    if (held !== drag.current.step) {51      drag.current = { ...drag.current, origin: event.clientX, base: drag.current.value, step: held, moved: true };52    }53
54    const travel = event.clientX - drag.current.origin;55    if (!drag.current.moved && Math.abs(travel) < DRAG_THRESHOLD) return;56    drag.current.moved = true;57    setScrubbing(true);58
59    const wanted = round(drag.current.base + Math.round(travel / PIXELS_PER_STEP) * held);60    const pinned = wanted > MAX ? "max" : wanted < MIN ? "min" : "";61    if (pinned && pinned !== drag.current.pinned) setBound(pinned);62    drag.current.pinned = pinned;63    drag.current.value = clamp(wanted);64    setValue(drag.current.value);65  };66
67  const endScrub = (event: ReactPointerEvent<HTMLDivElement>) => {68    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;69    event.currentTarget.releasePointerCapture(event.pointerId);70    setScrubbing(false);71    /* A press that never travelled is a click, and a click hands the field over for typing. */72    if (!drag.current.moved) {73      inputRef.current?.focus();74      inputRef.current?.select();75    }76  };77
78  const settle = (next: number) => {79    const clamped = clamp(round(next));80    if (clamped !== round(next)) setBound(clamped === MIN ? "min" : "max");81    drag.current.value = clamped;82    setValue(clamped);83    setDraft(null);84  };85
86  const commit = () => {87    const parsed = draft === null ? Number.NaN : Number.parseFloat(draft);88    /* Escape blurs the field, and the blur that follows must not commit the draft Escape just threw away. */89    if (!reverting.current && Number.isFinite(parsed)) settle(parsed);90    reverting.current = false;91    setDraft(null);92  };93
94  const handleKey = (event: ReactKeyboardEvent<HTMLInputElement>) => {95    if (event.key === "Enter") {96      event.preventDefault();97      commit();98      event.currentTarget.blur();99      return;100    }101    if (event.key === "Escape") {102      reverting.current = true;103      event.currentTarget.blur();104      return;105    }106    const direction = event.key === "ArrowUp" ? 1 : event.key === "ArrowDown" ? -1 : 0;107    if (!direction) return;108    event.preventDefault();109    settle(value + direction * stepFor(event));110  };111
112  /* The nudge clears itself when it finishes, so a bound can be hit again the moment the field is still. */113  const clearBound = (event: ReactAnimationEvent<HTMLDivElement>) => {114    if (event.animationName === "scrub-number-nudge") setBound(null);115  };116
117  return (118    <>119      <style>{nudgeKeyframes}</style>120      <div121        className="flex h-8 w-[96px] cursor-ew-resize touch-none items-center rounded-[7px] border border-[light-dark(#cbd2dc,#363a42)] bg-[light-dark(#ffffff,#15171b)] px-[10px] transition-[border-color,box-shadow] duration-200 ease-[ease] [--scrub-nudge:5px] focus-within:cursor-text focus-within:border-[#f97316] focus-within:shadow-[0_0_0_3px_#f9731625] data-[scrubbing]:border-[#f97316] data-[scrubbing]:shadow-[0_0_0_3px_#f9731625] data-[bound]:border-[#f97316] data-[bound]:[animation:scrub-number-nudge_.26s_cubic-bezier(.22,1,.36,1)] data-[bound=min]:[--scrub-nudge:-5px]"122        data-scrubbing={scrubbing || undefined}123        data-bound={bound ?? undefined}124        onAnimationEnd={clearBound}125        onPointerDown={startScrub}126        onPointerMove={moveScrub}127        onPointerUp={endScrub}128        onPointerCancel={endScrub}129      >130        <input131          ref={inputRef}132          className="w-full min-w-0 cursor-[inherit] border-0 bg-transparent p-0 font-mono text-[13px] font-medium leading-none tabular-nums text-[light-dark(#262d38,#e8ebee)] outline-0 focus:cursor-text focus:outline-0 focus-visible:outline-0"133          type="text"134          inputMode="decimal"135          autoComplete="off"136          aria-label="Opacity"137          value={draft ?? String(value)}138          onChange={(event) => setDraft(numeric(event.target.value))}139          onKeyDown={handleKey}140          onBlur={commit}141        />142      </div>143    </>144  );145}