@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/Input.tsx

@@ -7,10 +7,14 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   fullWidth?: boolean;
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
+  /** Seat the well in the same bezel as a `size="lg"` button, so a field and
+      a button side by side (a newsletter, a waitlist) share one height. */
+  layered?: boolean;
 }
 
 /* Fields are sunken wells (see --field tokens in globals.css). Raised
-   means "press me", sunken means "fill me" — that is the whole system. */
+   means "press me", sunken means "fill me" — that is the whole system.
+   Layered keeps the well sunken; only the bezel around it is the button's. */
 
 export function Input({
   label,
@@ -19,6 +23,7 @@ export function Input({
   fullWidth = false,
   iconLeft,
   iconRight,
+  layered = false,
   className = "",
   id,
   ...rest
@@ -31,57 +36,63 @@ export function Input({
       {label && (
         <label
           htmlFor={inputId}
-          className="text-[12.5px] font-medium text-neutral-700 tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-neutral-950"
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong"
         >
           {label}
         </label>
       )}
-      <div className="relative group/input isolate">
-        {iconLeft && (
-          <span
-            className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400 transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-neutral-800 group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
-          >
-            {iconLeft}
-          </span>
-        )}
-        <input
-          id={inputId}
-          className={[
-            "field relative z-10 w-full rounded-xl py-3 text-[13.5px] text-neutral-900 caret-neutral-900",
-            "placeholder:text-neutral-400 placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-neutral-300",
-            "disabled:opacity-40 disabled:cursor-not-allowed",
-            iconLeft ? "pl-10" : "pl-4",
-            iconRight ? "pr-10" : "pr-4",
-            className,
-          ]
-            .filter(Boolean)
-            .join(" ")}
-          aria-invalid={error ? true : undefined}
-          aria-describedby={messageId}
-          {...rest}
-        />
-        <span
-          aria-hidden
-          className="pointer-events-none absolute inset-0 z-15 rounded-xl overflow-hidden"
-        >
-          <span
-            className="block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer"
-            style={{
-              background:
-                "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)",
-            }}
+      <div
+        className={layered ? "relative rounded-[15px] p-[3.5px]" : "contents"}
+        style={layered ? { background: "var(--bezel)", boxShadow: "var(--bezel-shadow)" } : undefined}
+      >
+        <div className="relative group/input isolate">
+          {iconLeft && (
+            <span
+              className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+            >
+              {iconLeft}
+            </span>
+          )}
+          <input
+            id={inputId}
+            className={[
+              "field relative z-10 w-full text-ink caret-ink",
+              layered ? "rounded-[11.5px] py-3 text-[15px]" : "rounded-xl py-3 text-[13.5px]",
+              "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
+              "disabled:opacity-40 disabled:cursor-not-allowed",
+              iconLeft ? "pl-10" : "pl-4",
+              iconRight ? "pr-10" : "pr-4",
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={messageId}
+            {...rest}
           />
-        </span>
-        {iconRight && (
           <span
-            className="absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400 transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-neutral-800 group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+            aria-hidden
+            className={["pointer-events-none absolute inset-0 z-15 overflow-hidden", layered ? "rounded-[11.5px]" : "rounded-xl"].join(" ")}
           >
-            {iconRight}
+            <span
+              className="block absolute inset-y-0 w-[30%] -left-[30%] opacity-0 group-focus-within/input:animate-input-shimmer"
+              style={{
+                background:
+                  "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)",
+              }}
+            />
           </span>
-        )}
+          {iconRight && (
+            <span
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-ink-faint transition-all duration-300 ease-[cubic-bezier(0.34,1.4,0.64,1)] group-focus-within/input:text-ink-soft group-focus-within/input:scale-110 pointer-events-none z-20 flex items-center justify-center"
+            >
+              {iconRight}
+            </span>
+          )}
+        </div>
       </div>
       {error && (
-        <p id={messageId} role="alert" className="text-[11.5px] text-red-600 font-medium flex items-center gap-1 mt-0.5">
+        <p id={messageId} role="alert" className="text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5">
           <svg width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
             <circle cx="12" cy="12" r="10" />
             <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
@@ -90,7 +101,7 @@ export function Input({
         </p>
       )}
       {hint && !error && (
-        <p id={messageId} className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>
+        <p id={messageId} className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>
       )}
     </div>
   );

package/dist/registry/Kbd.tsx

@@ -9,13 +9,12 @@ export function Kbd({
 }) {
   return (
     <kbd
-      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-neutral-500 ${className}`}
+      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-ink-muted ${className}`}
       style={{
         /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */
-        background: "var(--face-light)",
-        boxShadow:
-          "0 0 3px rgba(17,17,17,0.136), 0 1.5px 1px rgba(17,17,17,0.12), 0 2px 3px -1px rgba(17,17,17,0.1), inset 0 2px 3px -2px rgba(255,255,255,1)",
-        textShadow: "0 1px 0 rgba(255,255,255,0.9)",
+        background: "var(--face)",
+        boxShadow: "var(--key-shadow)",
+        textShadow: "var(--emboss)",
       }}
     >
       {children}

package/dist/registry/Modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Portal } from "./Floating";
 import { CloseButton } from "./CloseButton";
 import { useModalBehavior } from "./useModalBehavior";
 
@@ -30,16 +31,15 @@ export function Modal({
   const dialogRef = useRef<HTMLDivElement>(null);
   const uid = useId();
 
+  /* Mounting on open and fading on close happen during render, so
+     neither waits for an extra commit; only the unmount is delayed */
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+
   useEffect(() => {
-    if (open) {
-      setMounted(true);
-      return;
-    }
-    if (mounted) {
-      setVisible(false);
-      const t = setTimeout(() => setMounted(false), CLOSE_MS);
-      return () => clearTimeout(t);
-    }
+    if (open || !mounted) return;
+    const t = setTimeout(() => setMounted(false), CLOSE_MS);
+    return () => clearTimeout(t);
   }, [open, mounted]);
 
   useLayoutEffect(() => {
@@ -55,6 +55,7 @@ export function Modal({
   if (!mounted) return null;
 
   return (
+    <Portal>
     <div className="fixed inset-0 z-90 flex items-center justify-center p-4">
       <div
         aria-hidden
@@ -85,7 +86,7 @@ export function Modal({
         style={{ background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" }}
       >
         <div
-          className="bg-white rounded-[16px] overflow-hidden"
+          className="bg-panel-face rounded-[16px] overflow-hidden"
           style={{ boxShadow: "var(--panel-face-shadow)" }}
         >
           <div className="pl-6 pr-4 pt-5 pb-4 flex items-start gap-4">
@@ -93,13 +94,13 @@ export function Modal({
               {title && (
                 <h2
                   id={`${uid}-title`}
-                  className="text-[16px] font-semibold text-neutral-900 tracking-[-0.015em] leading-snug"
+                  className="text-[16px] font-semibold text-ink tracking-[-0.015em] leading-snug"
                 >
                   {title}
                 </h2>
               )}
               {description && (
-                <p id={`${uid}-desc`} className="text-[13px] text-neutral-500 leading-relaxed">
+                <p id={`${uid}-desc`} className="text-[13px] text-ink-muted leading-relaxed">
                   {description}
                 </p>
               )}
@@ -107,15 +108,15 @@ export function Modal({
             <CloseButton label="Close dialog" onClick={onClose} />
           </div>
 
-          {children && <div className="px-6 pb-5 text-[13.5px] text-neutral-600 leading-relaxed">{children}</div>}
+          {children && <div className="px-6 pb-5 text-[13.5px] text-ink-body leading-relaxed">{children}</div>}
 
           {/* Footer sits in the bezel tone so actions read as a separate tray */}
           {actions && (
             <div
               className="px-5 py-3.5 flex items-center justify-end gap-2"
               style={{
-                background: "linear-gradient(180deg, #fafafa 0%, #f6f6f6 100%)",
-                boxShadow: "inset 0 1px 0 rgba(17,17,17,0.06)",
+                background: "var(--panel-tray)",
+                boxShadow: "inset 0 1px 0 var(--hairline)",
               }}
             >
               {actions}
@@ -124,5 +125,6 @@ export function Modal({
         </div>
       </div>
     </div>
+    </Portal>
   );
 }

package/dist/registry/NumberInput.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useEffect, useId, useRef, useState } from "react";
+import { FieldKey, FieldLabel, FieldMessage } from "./FieldMessage";
+
+interface NumberInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size" | "prefix"> {
+  value?: number | null;
+  defaultValue?: number | null;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Digits after the decimal point; inferred from `step` when left out */
+  precision?: number;
+  label?: string;
+  hint?: string;
+  error?: string;
+  /** A unit shown before or after the number, like "$" or "kg" */
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+const decimals = (n: number) => (String(n).split(".")[1] ?? "").length;
+
+/* A sunken field with two small raised keys at its right edge. The keys
+   repeat while held, arrow keys step (shift for ten at a time), and
+   whatever you type is clamped and rounded when you leave the field.  */
+export function NumberInput({
+  value,
+  defaultValue = null,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  fullWidth = false,
+  disabled,
+  className = "",
+  id,
+  onBlur,
+  onKeyDown,
+  ...rest
+}: NumberInputProps) {
+  const uid = useId();
+  const inputId = id ?? `${uid}-input`;
+  const messageId = error || hint ? `${inputId}-message` : undefined;
+  const digits = precision ?? decimals(step);
+
+  const [internal, setInternal] = useState<number | null>(defaultValue);
+  const current = value !== undefined ? value : internal;
+  const format = (n: number | null) => (n === null ? "" : n.toFixed(digits));
+  const [draft, setDraft] = useState(format(current));
+  const editing = useRef(false);
+
+  // Follow the controlled value unless someone is mid-way through typing
+  useEffect(() => {
+    if (!editing.current) setDraft(format(current));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [current, digits]);
+
+  const clamp = (n: number) => Math.min(max, Math.max(min, Number(n.toFixed(digits))));
+
+  // The hold-to-repeat timer reads the newest value from here, not a stale render
+  const latest = useRef(current);
+  useEffect(() => {
+    latest.current = current;
+  }, [current]);
+
+  const commit = (n: number | null) => {
+    const next = n === null || Number.isNaN(n) ? null : clamp(n);
+    const prev = latest.current;
+    latest.current = next;
+    setInternal(next);
+    setDraft(format(next));
+    if (next !== prev) onChange?.(next);
+  };
+
+  // An empty field starts from zero, or from the nearest edge of the range
+  const nudge = (dir: 1 | -1, times = 1) => {
+    const base = latest.current;
+    commit(base === null ? clamp(0) : base + dir * step * times);
+  };
+
+  const hold = useRef<{ t?: ReturnType<typeof setTimeout>; i?: ReturnType<typeof setInterval> }>({});
+  const stopHold = () => {
+    clearTimeout(hold.current.t);
+    clearInterval(hold.current.i);
+  };
+  useEffect(() => stopHold, []);
+  const startHold = (dir: 1 | -1) => {
+    stopHold();
+    nudge(dir);
+    hold.current.t = setTimeout(() => {
+      hold.current.i = setInterval(() => nudge(dir), 60);
+    }, 400);
+  };
+
+  const atMin = current !== null && current <= min;
+  const atMax = current !== null && current >= max;
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && <FieldLabel htmlFor={inputId}>{label}</FieldLabel>}
+      <div className={["relative isolate", fullWidth ? "w-full" : "w-40", className].join(" ")}>
+        {prefix && (
+          <span className="pointer-events-none absolute left-3.5 top-1/2 z-20 -translate-y-1/2 text-[13.5px] text-ink-faint transition-colors duration-200 group-focus-within/field:text-ink-label">
+            {prefix}
+          </span>
+        )}
+        <input
+          {...rest}
+          id={inputId}
+          type="text"
+          inputMode={digits > 0 || min < 0 ? "decimal" : "numeric"}
+          autoComplete="off"
+          role="spinbutton"
+          aria-valuenow={current ?? undefined}
+          aria-valuemin={Number.isFinite(min) ? min : undefined}
+          aria-valuemax={Number.isFinite(max) ? max : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          disabled={disabled}
+          value={draft}
+          onChange={(e) => {
+            editing.current = true;
+            setDraft(e.target.value.replace(/[^\d.,\-]/g, ""));
+          }}
+          onBlur={(e) => {
+            editing.current = false;
+            const raw = draft.replace(",", ".").trim();
+            commit(raw === "" || raw === "-" ? null : parseFloat(raw));
+            onBlur?.(e);
+          }}
+          onKeyDown={(e) => {
+            onKeyDown?.(e);
+            if (e.defaultPrevented) return;
+            const big = e.shiftKey ? 10 : 1;
+            if (e.key === "ArrowUp") { e.preventDefault(); editing.current = false; nudge(1, big); }
+            else if (e.key === "ArrowDown") { e.preventDefault(); editing.current = false; nudge(-1, big); }
+            else if (e.key === "PageUp") { e.preventDefault(); nudge(1, 10); }
+            else if (e.key === "PageDown") { e.preventDefault(); nudge(-1, 10); }
+            else if (e.key === "Home" && Number.isFinite(min)) { e.preventDefault(); commit(min); }
+            else if (e.key === "End" && Number.isFinite(max)) { e.preventDefault(); commit(max); }
+            else if (e.key === "Enter") { (e.target as HTMLInputElement).blur(); (e.target as HTMLInputElement).focus(); }
+          }}
+          className={[
+            "field relative z-10 w-full rounded-xl py-3 text-[13.5px] tabular-nums text-ink caret-ink",
+            "placeholder:text-ink-faint focus:placeholder:text-ink-ghost",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            prefix ? "pl-8" : "pl-4",
+            suffix ? "pr-[92px]" : "pr-[64px]",
+          ].join(" ")}
+        />
+        {suffix && (
+          <span className="pointer-events-none absolute right-[64px] top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint">
+            {suffix}
+          </span>
+        )}
+        <div
+          className={[
+            "absolute right-1.5 top-1/2 z-20 flex -translate-y-1/2 gap-1",
+            disabled ? "opacity-40 pointer-events-none" : "",
+          ].join(" ")}
+        >
+          <FieldKey label="decrease" focusable={false} disabled={atMin} onPress={() => startHold(-1)} onRelease={stopHold}>
+            <path d="M5 12h14" />
+          </FieldKey>
+          <FieldKey label="increase" focusable={false} disabled={atMax} onPress={() => startHold(1)} onRelease={stopHold}>
+            <path d="M12 5v14M5 12h14" />
+          </FieldKey>
+        </div>
+      </div>
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}

package/dist/registry/OtpInput.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+
+interface OtpInputProps {
+  /** How many characters */
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (code: string) => void;
+  /** Fires once every cell is filled, with the whole code */
+  onComplete?: (code: string) => void;
+  /** Digits only, or letters and digits */
+  type?: "numeric" | "alphanumeric";
+  /** Split the cells into wells of this many, like 123 456 */
+  groupSize?: number;
+  /** Show dots instead of the characters */
+  mask?: boolean;
+  label?: string;
+  hint?: string;
+  error?: string;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  name?: string;
+}
+
+const CELL = 44;
+
+/* One real input sits underneath, so typing, backspace, paste and the
+   phone filling the code from a text all behave natively. What you see
+   is drawn over it: each group is a single sunken field, cut into cells
+   by scored grooves, that lifts flush and draws its border while you're
+   in it, exactly like Input. A caret glides from cell to cell on a
+   spring as you type, and characters press into place.             */
+export function OtpInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  groupSize,
+  mask = false,
+  label,
+  hint,
+  error,
+  disabled = false,
+  autoFocus = false,
+  name,
+}: OtpInputProps) {
+  const uid = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [internal, setInternal] = useState(defaultValue.slice(0, length));
+  const code = (value !== undefined ? value : internal).slice(0, length);
+  const [focused, setFocused] = useState(false);
+  // The cell the caret is in: the selection start, kept within the code
+  const [cursor, setCursor] = useState(0);
+  const messageId = error || hint ? `${uid}-message` : undefined;
+  const at = Math.min(cursor, code.length, length - 1);
+
+  const pattern = type === "numeric" ? /[^0-9]/g : /[^0-9a-z]/gi;
+
+  /* A filled cell is selected rather than sitting behind a caret, so
+     typing over it replaces it in place                              */
+  const selectCell = (i: number) => {
+    const el = inputRef.current;
+    if (!el) return;
+    const n = el.value.length;
+    const pos = Math.max(0, Math.min(i, n));
+    el.setSelectionRange(pos, pos < n ? pos + 1 : pos);
+    setCursor(pos);
+  };
+
+  const groups = groupSize && groupSize < length ? Math.ceil(length / groupSize) : 1;
+  const per = groups > 1 ? groupSize! : length;
+
+  return (
+    <div className="group/field flex flex-col gap-1.5">
+      {label && (
+        <FieldLabel id={`${uid}-label`} htmlFor={`${uid}-input`}>
+          {label}
+        </FieldLabel>
+      )}
+
+      <div
+        className={["relative flex w-fit items-center gap-3", disabled ? "opacity-40" : ""].join(" ")}
+      >
+        <input
+          ref={inputRef}
+          id={`${uid}-input`}
+          type={mask ? "password" : "text"}
+          inputMode={type === "numeric" ? "numeric" : "text"}
+          autoComplete="one-time-code"
+          autoCapitalize="characters"
+          autoFocus={autoFocus}
+          spellCheck={false}
+          maxLength={length}
+          disabled={disabled}
+          value={code}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          aria-label={label ? undefined : `${length}-character code`}
+          // The input lies over the cells; send the caret to whichever was clicked
+          onClick={(e) => {
+            const cell = document
+              .elementsFromPoint(e.clientX, e.clientY)
+              .find((el): el is HTMLElement => el instanceof HTMLElement && el.dataset.cell !== undefined);
+            selectCell(cell ? Number(cell.dataset.cell) : code.length);
+          }}
+          onFocus={() => {
+            setFocused(true);
+            requestAnimationFrame(() => selectCell(code.length));
+          }}
+          onBlur={() => setFocused(false)}
+          onChange={(e) => {
+            const next = e.target.value.replace(pattern, "").toUpperCase().slice(0, length);
+            setInternal(next);
+            onChange?.(next);
+            if (next.length === length && next !== code) onComplete?.(next);
+            const pos = Math.min(e.target.selectionStart ?? next.length, next.length);
+            requestAnimationFrame(() => selectCell(pos));
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+              e.preventDefault();
+              selectCell(at + (e.key === "ArrowLeft" ? -1 : 1));
+            } else if (e.key === "Home" || e.key === "End") {
+              e.preventDefault();
+              selectCell(e.key === "Home" ? 0 : code.length);
+            }
+          }}
+          onSelect={(e) => {
+            const el = e.currentTarget;
+            setCursor(Math.min(el.selectionStart ?? 0, length - 1));
+          }}
+          // Invisible, but it's what a tap lands on, so phones raise their keyboard
+          className="absolute inset-0 z-30 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed"
+          style={{ fontSize: 16 /* stops iOS zooming in on focus */ }}
+        />
+
+        {Array.from({ length: groups }, (_, g) => {
+          const start = g * per;
+          const cells = Math.min(per, length - start);
+          const caretHere = focused && at >= start && at < start + cells;
+          return (
+            <React.Fragment key={g}>
+              {g > 0 && (
+                <span
+                  aria-hidden
+                  className="h-[2px] w-2.5 shrink-0 rounded-full"
+                  style={{ background: "var(--groove)", boxShadow: "var(--groove-lip-below)" }}
+                />
+              )}
+              {/* One field per group: data-open gives it the focused well */}
+              <div
+                aria-hidden
+                data-open={caretHere || undefined}
+                data-invalid={error ? true : undefined}
+                className="field relative z-10 flex h-[52px] overflow-hidden rounded-xl"
+              >
+                {Array.from({ length: cells }, (_, k) => {
+                  const i = start + k;
+                  const ch = code[i];
+                  return (
+                    <div key={i} data-cell={i} className="relative grid place-items-center" style={{ width: CELL }}>
+                      {k > 0 && (
+                        <span
+                          className="absolute inset-y-3 left-0 w-px"
+                          style={{ background: "var(--groove)", boxShadow: "var(--groove-lip)" }}
+                        />
+                      )}
+                      {ch &&
+                        (mask ? (
+                          <span key={ch + i} className="animate-checkbox-in h-2.5 w-2.5 rounded-full bg-ink" />
+                        ) : (
+                          <span key={ch + i} className="animate-checkbox-in text-[20px] font-semibold tabular-nums text-ink">
+                            {ch}
+                          </span>
+                        ))}
+                      {/* A filled cell under the caret is picked out, ready to be typed over */}
+                      {caretHere && i === at && ch && (
+                        <span className="absolute inset-x-1.5 bottom-2 h-[2px] rounded-full bg-ink animate-otp-caret" />
+                      )}
+                    </div>
+                  );
+                })}
+
+                {/* The caret glides between the empty cells of this group */}
+                {caretHere && !code[at] && (
+                  <span
+                    className="pointer-events-none absolute top-1/2 h-[22px] w-[2px] -translate-y-1/2"
+                    style={{
+                      left: (at - start) * CELL + CELL / 2 - 1,
+                      transition: "left 260ms var(--ease-spring)",
+                    }}
+                  >
+                    <span className="block h-full w-full animate-otp-caret rounded-full bg-ink" />
+                  </span>
+                )}
+
+                {/* Input's sweep of light as the well comes up */}
+                {caretHere && (
+                  <span
+                    className="pointer-events-none absolute inset-y-0 -left-[30%] block w-[30%] animate-input-shimmer"
+                    style={{ background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)" }}
+                  />
+                )}
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {name && <input type="hidden" name={name} value={code} />}
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}