OTP Segmented Input

1"use client";
2 
3import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
4import { MotionConfig, motion } from "motion/react";
5 
6// OTP segmented input - N boxes, secretly ONE real input.
7//
8// The version everyone demos is six <input>s wired together with JS focus
9// hops. It looks right and behaves wrong: SMS autofill can't fill it (iOS
10// offers the code to ONE field), paste needs bespoke splitting, screen
11// readers announce six unlabeled boxes, and half the keyboard is re-invented.
12//
13// This is the hard version: one real <input> stretched invisibly over the
14// whole row (color and caret transparent - NOT display:none, it must stay
15// focusable and autofillable), with the cells painted underneath from its
16// value. Everything hard becomes free:
17//
18//   · SMS autofill just works - autocomplete="one-time-code" on a real,
19//     visible-to-the-browser input.
20//   · Paste just works - "246 810" lands in the input, one normalize pass
21//     strips the junk, the cells repaint.
22//   · Backspace walks backwards and ←/→ move the caret because they are the
23//     NATIVE caret - the active cell is derived from selectionStart, never
24//     stored beside it. Select-all paints all cells selected, because a
25//     selection range maps to a cell range.
26//   · The input's own glyphs are letter-spaced to sit under the cells, so the
27//     blueprint toggle can simply tint them red and you SEE the real input
28//     lying over the fake one.
29//
30// Verification is yours: pass `verify` (sync or async - hit your API) and a
31// full code drives the little state machine: right → the cells cascade green
32// left to right; wrong → the row shakes, the digits drop out one by one, then
33// the field clears and hands the caret back. Without `verify` it compares
34// against the `code` prop, so the component demos out of the box.
35//
36// Animation via motion/react; honours prefers-reduced-motion. Requires the
37// lab-theme tokens. Fully Tailwind, no CSS files.
38 
39const EASE = [0.22, 1, 0.36, 1] as const;
40const SHAKE_S = 0.38; // wrong code: the row shake
41const DROP_S = 0.24; // each digit's fall-out
42const STAGGER_S = 0.045; // per-digit clear offset
43const FILL_S = 0.055; // per-cell success cascade offset
44 
45const OTP_VARS = {
46  "--otp-cell-w": "2.75rem",
47  "--otp-cell-h": "3.25rem",
48  "--otp-gap": "0.5rem",
49} as CSSProperties;
50 
51export interface OtpInputState {
52  length: number;
53  caret: { start: number; end: number };
54  state: "idle" | "success" | "error";
55// … truncated