4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 50:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4149,// Hairline UI · code-input · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { StatusButton, type ActionStatus } from "./status-button"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * CODE INPUT: the six boxes, done properly * * typing each digit rises into its box out of a blur; the * box you're on carries a blinking caret; deleting * lifts a digit away rather than blinking it out * paste a pasted or autofilled code drops in one box after * another * checking with every box full, the row carries a sweep of * light while onComplete runs * wrong the row shakes, the boxes turn red, the label * says so, and the digits clear from the right * right the digits stay where they are while the boxes' * own outlines melt into one pill around them; a * check draws itself at its end, "Verified" * resend "Resend in 0:28", the seconds rolling down, then * a Resend button that spins, ticks and starts the * clock again * * One real input sits over the boxes (one-time-code autofill, * paste and the numeric keyboard all just work); the boxes are * only what you see. * ───────────────────────────────────────────────────────── */ export interface CodeInputProps extends Omit, "onChange" | "defaultValue"> { length?: number; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Runs when every box is filled. Resolve (or return true) to accept; throw or return false to reject. */ onComplete?: (code: string) => Promise | boolean | void; /** Shows the resend line; the clock starts on mount and after each resend. */ onResend?: () => Promise | void; /** Seconds before a code can be resent. */ resendAfter?: number; label?: string; /** Box groups, e.g. [3, 3] puts a dash between two threes. */ groups?: number[]; /** Letters as well as digits. */ alphanumeric?: boolean; autoFocus?: boolean; } type Phase = "idle" | "checking" | "wrong" | "right"; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const SHEEN = "[mask-image:linear-gradient(90deg,rgb(0_0_0/0.4)_35%,#000_50%,rgb(0_0_0/0.4)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none]"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** One character: rises in out of a blur when it arrives, lifts away when it goes. */ function Glyph({ char, delay, animate, reduced }: { char: string | undefined; delay: number; animate: boolean; reduced: boolean }) { const [shown, setShown] = React.useState(char); const [leaving, setLeaving] = React.useState(false); const ref = React.useRef(null); if (char !== undefined && (char !== shown || leaving)) { setShown(char); setLeaving(false); } else if (char === undefined && shown !== undefined && !leaving) { setLeaving(true); } React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced) return; if (leaving) { const a = el.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: "translateY(-35%)", filter: "blur(4px)" }, ], { duration: 200, delay, easing: EASE, fill: "forwards" }, ); a.onfinish = () => setShown(undefined); return () => a.cancel(); } if (!animate || shown === undefined) return; const a = el.animate( [ { opacity: 0, transform: "translateY(45%)", filter: "blur(4px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 300, delay, easing: EASE, fill: "backwards" }, ); return () => a.cancel(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [shown, leaving]); React.useEffect(() => { if (leaving && reduced) setShown(undefined); }, [leaving, reduced]); if (shown === undefined) return null; return ( {shown} ); } export function CodeInput({ length = 6, value, defaultValue = "", onValueChange, onComplete, onResend, resendAfter = 30, label = `Enter the ${length}-digit code`, groups, alphanumeric = false, autoFocus, className = "", ...props }: CodeInputProps) { const reduced = useReducedMotion(); const id = React.useId(); const [own, setOwn] = React.useState(defaultValue.slice(0, length)); const code = (value ?? own).slice(0, length); const [phase, setPhase] = React.useState("idle"); const [focused, setFocused] = React.useState(false); const [arrival, setArrival] = React.useState({ length: code.length, from: code.length }); const [clearing, setClearing] = React.useState(false); const [left, setLeft] = React.useState(null); const [resend, setResend] = React.useState("idle"); const inputRef = React.useRef(null); const rowRef = React.useRef(null); const mounted = React.useRef(false); React.useEffect(() => { mounted.current = true; }, []); // How the new characters arrived: one typed, or several at once (paste, autofill) to cascade in. if (arrival.length !== code.length) setArrival({ length: code.length, from: arrival.length }); const arrivedFrom = arrival.from; const setCode = (next: string) => { if (value === undefined) setOwn(next); onValueChange?.(next); }; // Resend clock: whole seconds, started on mount and after each resend. const startClock = React.useCallback(() => setLeft(resendAfter), [resendAfter]); React.useEffect(() => { if (onResend) startClock(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); React.useEffect(() => { if (left === null || left <= 0) return; const timer = window.setTimeout(() => setLeft((s) => (s === null ? s : s - 1)), 1000); return () => window.clearTimeout(timer); }, [left]); const check = async (full: string) => { if (!onComplete) return; setPhase("checking"); let ok = true; try { ok = (await onComplete(full)) !== false; } catch { ok = false; } if (ok) { setPhase("right"); inputRef.current?.blur(); return; } setPhase("wrong"); if (!reduced) { rowRef.current?.animate( [{ transform: "none" }, { transform: "translateX(-5px)" }, { transform: "translateX(5px)" }, { transform: "translateX(-3px)" }, { transform: "none" }], { duration: 380, easing: "ease-out" }, ); } // Let the shake land, then clear from the right and start again at the first box. window.setTimeout(() => { setClearing(true); setCode(""); inputRef.current?.focus(); window.setTimeout(() => setClearing(false), 400); }, reduced ? 0 : 650); }; const onChange = (e: React.ChangeEvent) => { if (phase === "checking" || phase === "right") return; const raw = e.target.value; const clean = (alphanumeric ? raw.replace(/[^a-z0-9]/gi, "").toUpperCase() : raw.replace(/\D/g, "")).slice(0, length); if (phase === "wrong") setPhase("idle"); setCode(clean); }; // A full code, however it arrived (typed, pasted, autofilled or set from outside), gets checked once. const lastLength = React.useRef(code.length); React.useEffect(() => { if (code.length === length && lastLength.current < length && (phase === "idle" || phase === "wrong")) check(code); lastLength.current = code.length; // eslint-disable-next-line react-hooks/exhaustive-deps }, [code]); const doResend = async () => { if (!onResend || resend === "pending") return; setResend("pending"); try { await onResend(); setResend("success"); window.setTimeout(() => { setResend("idle"); startClock(); }, reduced ? 0 : 1100); } catch { setResend("error"); } }; // Where the dashes go between groups. const breaks = new Set(); if (groups) groups.reduce((at, size) => (breaks.add(at + size), at + size), 0); const right = phase === "right"; const wrong = phase === "wrong"; const active = focused && phase !== "checking" && !right ? Math.min(code.length, length - 1) : -1; const labelText = right ? "Verified" : wrong ? "That code didn't work" : phase === "checking" ? "Checking the code" : label; return (

{labelText}

{ setFocused(true); const end = e.currentTarget.value.length; e.currentTarget.setSelectionRange(end, end); }} onBlur={() => setFocused(false)} onSelect={(e) => { // The caret always sits at the end; the boxes show where you are. const el = e.currentTarget; if (el.selectionStart !== el.value.length) el.setSelectionRange(el.value.length, el.value.length); }} readOnly={phase === "checking" || right} autoFocus={autoFocus} autoComplete="one-time-code" inputMode={alphanumeric ? "text" : "numeric"} pattern={alphanumeric ? "[A-Za-z0-9]*" : "[0-9]*"} maxLength={length} spellCheck={false} aria-invalid={wrong || undefined} className="absolute inset-0 z-10 h-full w-full cursor-text bg-transparent text-[16px] text-transparent caret-transparent opacity-0 outline-none [&::selection]:bg-transparent" /> {/* The boxes, and the one pill they become when the code is right. */}

{Array.from({ length }, (_, i) => { const char = code[i]; const isActive = i === active; const cascade = !clearing && code.length - arrivedFrom > 1 && i >= arrivedFrom ? (i - arrivedFrom) * 45 : 0; const exitDelay = clearing ? (length - 1 - i) * 30 : 0; return ( {/* The dash fades but keeps its place, so no digit moves when the code is right. */} {breaks.has(i) && i > 0 && ( )} {/* The caret, blinking only in the box you're on. */} {isActive && char === undefined && ( )} ); })} {/* The check at the end of the pill: the pill grows to the right for it, the digits stay put. */}

{onResend && !right && (

Didn’t get it? {/* The countdown and the button share one place; each fades through a blur into the other. */} {/* The ticking digits stay out of screen readers; they hear that a resend is coming instead. */} {left && left > 0 ? "You can resend the code shortly." : ""} 0)} style={{ opacity: left && left > 0 ? 0 : 1, filter: left && left > 0 ? "blur(3px)" : "none", transition: reduced ? "none" : `opacity 260ms ${EASE}, filter 260ms ${EASE}`, }} >

)}

{right ? "Code verified" : wrong ? "That code didn't work. Enter it again." : phase === "checking" ? "Checking the code" : ""}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L4f",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L50",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-blink {\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n}\n\n@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/code-input.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]