50: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"] 51:T73c6,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type ClipboardEvent, type CSSProperties, type KeyboardEvent, type ReactNode } from "react"; /* * OTP Input – the verification code field, in a single self-contained file. * One real input sits under the boxes, so typing, Backspace, paste and the SMS autofill of * iOS and Android all work natively; the boxes only draw what it holds. * The focus ring glides from box to box with a soft blinking caret, digits pop in, a pasted code * fills the boxes one after another. Verifying shimmers, a wrong code shakes and clears for retyping, * a right one folds the boxes into a single "Verified" pill. A resend link counts down below. * The styles are injected below, so no extra files are needed. */ export type OtpStatus = "idle" | "verifying" | "error" | "success"; export type OtpInputProps = { /** Number of boxes */ length?: number; /** A small dash between the boxes – `true` puts it in the middle, a number after that many boxes */ separator?: boolean | number; /** Digits only (numeric keyboard on phones); `false` allows letters too, shown in capitals */ numeric?: boolean; /** The code – makes it controlled */ value?: string; /** Starting code when uncontrolled */ defaultValue?: string; onChange?: (code: string) => void; /** Called once the last box is filled – typed, pasted or autofilled */ onComplete?: (code: string) => void; status?: OtpStatus; /** Shown below the boxes while `status` is "error" */ errorMessage?: ReactNode; /** Clears the boxes shortly after an error, ready for the next try */ clearOnError?: boolean; /** Text in the pill after a successful check */ successLabel?: string; /** Shows "Resend code" below the boxes once the countdown is over */ onResend?: () => void; /** Seconds until the code can be resent */ resendIn?: number; /** Center the boxes and the lines below them */ align?: "start" | "center"; disabled?: boolean; autoFocus?: boolean; /** Accessible name of the field */ label?: string; className?: string; }; /* ---------- Helpers ---------- */ const pad = (n: number) => String(n).padStart(2, "0"); /** "0:24", "1:05:00", "3d 1h" */ const clock = (s: number) => { if (s >= 86400) return `${Math.floor(s / 86400)}d ${Math.floor((s % 86400) / 3600)}h`; if (s >= 3600) return `${Math.floor(s / 3600)}:${pad(Math.floor((s % 3600) / 60))}:${pad(s % 60)}`; return `${Math.floor(s / 60)}:${pad(s % 60)}`; }; /** Longest code the boxes are drawn for – past that the cells get too small to read */ const MAX_LENGTH = 24; /** Full-width (１２３) and Arabic-Indic digits (٤٨٢) count as the digits they are */ const normalize = (text: string) => text .normalize("NFKC") .replace(/[\u0660-\u0669]/g, (d) => String(d.charCodeAt(0) - 0x660)) .replace(/[\u06f0-\u06f9]/g, (d) => String(d.charCodeAt(0) - 0x6f0)); const reduced = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; const icons = { check: "M5.5 12.5l4 4L18.5 8", alert: "M12 8v4.5M12 16h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z", }; export function OtpInput({ length: lengthProp = 6, separator = false, numeric = true, value, defaultValue = "", onChange, onComplete, status = "idle", errorMessage = "That code didn't work. Try again.", clearOnError = true, successLabel = "Verified", onResend, resendIn: resendInProp = 30, align = "start", disabled = false, autoFocus = false, label = "Verification code", className, }: OtpInputProps) { // A NaN or fractional length and a NaN countdown fall back instead of breaking the field const length = Number.isFinite(lengthProp) ? Math.min(MAX_LENGTH, Math.max(1, Math.floor(lengthProp))) : 6; const resendIn = Number.isFinite(resendInProp) && resendInProp > 0 ? Math.floor(resendInProp) : 0; /** Keeps allowed characters only – spaces and dashes of a pasted "482 913" fall away */ const clean = (text: string) => { let out = ""; for (const ch of normalize(String(text ?? ""))) { const c = numeric ? (/[0-9]/.test(ch) ? ch : "") : /[a-z0-9]/i.test(ch) ? ch.toUpperCase() : ""; if (c && out.length < length) out += c; } return out; }; const [inner, setInner] = useState(() => clean(defaultValue)); const code = clean(value ?? inner); const [idx, setIdx] = useState(Math.min(code.length, length - 1)); const [focused, setFocused] = useState(false); const [errorShown, setErrorShown] = useState(false); const [clearing, setClearing] = useState(false); // the wrong code fades out const [locked, setLocked] = useState(false); // no typing between the shake and the clearing const [left, setLeft] = useState(resendIn); const [announce, setAnnounce] = useState(""); const input = useRef(null); const slots = useRef(null); const ring = useRef(null); const pill = useRef(null); const pillInner = useRef(null); const boxes = useRef<(HTMLSpanElement | null)[]>([]); const timers = useRef([]); const id = useId(); // Every character remembers when it arrived, so it pops in once; pasted codes arrive one after another const prevCode = useRef(code); const stamps = useRef([]); const delays = useRef([]); const counter = useRef(0); if (prevCode.current !== code) { const before = prevCode.current; const changed = [...code].map((c, i) => c !== before[i]); const first = changed.indexOf(true); const bulk = changed.filter(Boolean).length > 1; changed.forEach((ch, i) => { if (!ch) return; stamps.current[i] = ++counter.current; delays.current[i] = bulk ? (i - first) * 45 : 0; }); prevCode.current = code; } // An outside change of the value (or a shorter code) keeps the active box in reach const active = Math.min(idx, code.length, length - 1); const sepAt = separator === true ? Math.floor(length / 2) : typeof separator === "number" ? separator : 0; const busy = status === "verifying" || status === "success"; const readOnly = busy || locked || disabled; const showError = status === "error" && errorShown; // The ring shows where the next character goes: while focused, or mid-way through a code const showRing = !busy && !disabled && (focused || (code.length > 0 && code.length < length)); const commit = (next: string, nextIdx: number, user = true) => { if (value === undefined) setInner(next); if (next !== code) onChange?.(next); setIdx(Math.max(0, Math.min(nextIdx, next.length, length - 1))); if (!user) return; if (errorShown && next.length) setErrorShown(false); if (next.length === length && next !== code) onComplete?.(next); }; /* ---------- Native input ---------- */ const onInput = (el: HTMLInputElement) => { if (readOnly) return; const raw = el.value; const caretRaw = el.selectionStart ?? raw.length; const next = clean(raw); // The caret counts the kept characters in front of it const caret = clean(raw.slice(0, caretRaw)).length; if (next === code) { el.value = code; syncSelection(); return; } commit(next, caret); }; const onPaste = (e: ClipboardEvent) => { e.preventDefault(); if (readOnly) return; const text = clean(e.clipboardData.getData("text")); if (!text) return; // A whole code replaces everything; a part is written from the active box on if (text.length >= length) return commit(text.slice(0, length), length - 1); const next = (code.slice(0, active) + text + code.slice(active + text.length)).slice(0, length); commit(next, active + text.length); }; const onKeyDown = (e: KeyboardEvent) => { const last = Math.min(code.length, length - 1); const moves: Record = { ArrowLeft: active - 1, ArrowRight: active + 1, Home: 0, End: last, ArrowUp: 0, ArrowDown: last }; if (e.key in moves && !e.shiftKey && !e.metaKey) { e.preventDefault(); setIdx(Math.max(0, Math.min(moves[e.key], last))); } }; /** A tap or click picks the box under the pointer – never beyond the first empty one */ const pick = (x: number) => { let i = boxes.current.findIndex((b) => b && x < b.getBoundingClientRect().right + 4); if (i < 0) i = length - 1; setIdx(Math.min(i, code.length, length - 1)); requestAnimationFrame(syncSelection); }; // The real input selects the active character, so typing replaces it and Backspace removes it const syncSelection = () => { const el = input.current; if (!el || document.activeElement !== el) return; const i = Math.min(idx, code.length, length - 1); if (i < code.length) el.setSelectionRange(i, i + 1); else el.setSelectionRange(i, i); }; useLayoutEffect(syncSelection); useEffect(() => { if (autoFocus) input.current?.focus({ preventScroll: true }); }, [autoFocus]); /* ---------- The gliding ring and the success pill ---------- */ useLayoutEffect(() => { const r = ring.current; const box = boxes.current[active]; if (r && box) { const first = !r.dataset.ready; if (first) r.style.transition = "none"; r.style.width = `${box.offsetWidth}px`; r.style.height = `${box.offsetHeight}px`; r.style.transform = `translate(${box.offsetLeft}px, ${box.offsetTop}px)`; if (first) { r.dataset.ready = "1"; void r.offsetWidth; r.style.transition = ""; } } // The pill starts as wide as all the boxes and morphs down to its label const p = pill.current; const s = slots.current; if (p && s && pillInner.current) { const w = status === "success" ? pillInner.current.offsetWidth : s.offsetWidth; p.style.width = `${w}px`; // A label wider than the boxes slides back inside the field instead of hanging over its edge const root = s.parentElement?.parentElement; let shift = 0; if (root && w > s.offsetWidth) { const box = root.getBoundingClientRect(); const own = s.getBoundingClientRect(); const left = own.left + own.width / 2 - w / 2; shift = Math.min(Math.max(left, box.left), box.right - w) - left; } p.style.marginLeft = shift ? `${shift}px` : ""; } }); // Phones turning, containers resizing: ring and pill follow useEffect(() => { const s = slots.current; if (!s) return; const ro = new ResizeObserver(() => { const r = ring.current; const box = boxes.current[active]; if (r && box) { r.style.width = `${box.offsetWidth}px`; r.style.height = `${box.offsetHeight}px`; r.style.transform = `translate(${box.offsetLeft}px, ${box.offsetTop}px)`; } if (pill.current && status !== "success") pill.current.style.width = `${s.offsetWidth}px`; }); ro.observe(s); return () => ro.disconnect(); }, [active, status]); /* ---------- Status ---------- */ const prevStatus = useRef(status); useEffect(() => { const before = prevStatus.current; prevStatus.current = status; if (status === before) return; if (status === "verifying") setAnnounce("Verifying code"); if (status === "success") setAnnounce(successLabel); if (status !== "error") { setErrorShown(false); return; } setErrorShown(true); setAnnounce(typeof errorMessage === "string" ? errorMessage : "That code didn't work"); // A calm shake, then the wrong code fades out so the next try starts fresh if (!reduced()) { slots.current?.animate( [{ transform: "none" }, { transform: "translateX(-6px)" }, { transform: "translateX(5px)" }, { transform: "translateX(-3px)" }, { transform: "translateX(2px)" }, { transform: "none" }], { duration: 420, easing: "ease-out" }, ); } if (!clearOnError) return; setLocked(true); timers.current.push( window.setTimeout(() => setClearing(true), 700), window.setTimeout(() => { setClearing(false); setLocked(false); commit("", 0, false); }, 980), ); }, [status]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => () => timers.current.forEach(clearTimeout), []); /* ---------- Resend countdown ---------- */ useEffect(() => { if (left <= 0) { if (onResend && resendIn > 0) setAnnounce("You can resend the code now"); return; } const t = window.setTimeout(() => setLeft((s) => s - 1), 1000); return () => clearTimeout(t); }, [left]); // eslint-disable-line react-hooks/exhaustive-deps const resend = () => { onResend?.(); setLeft(resendIn); setAnnounce("A new code is on its way"); }; /* ---------- Render ---------- */ const cells: ReactNode[] = []; for (let i = 0; i < length; i++) { if (sepAt > 0 && sepAt < length && i === sepAt) cells.push(); const ch = code[i]; cells.push( { boxes.current[i] = el; }} className="ui-otp__box" data-filled={ch ? "" : undefined} style={{ "--i": i } as CSSProperties} > {ch && ( {ch} )} , ); } return (

{/* React 19 hoists this into once, no matter how many fields render */}

0 && sepAt < length ? "calc(var(--ui-otp-gap) + 10px)" : "0px" } as CSSProperties} > {cells} onInput(e.currentTarget)} onPaste={onPaste} onKeyDown={onKeyDown} onFocus={() => { setFocused(true); requestAnimationFrame(syncSelection); }} onBlur={() => setFocused(false)} onPointerUp={(e) => pick(e.clientX)} onSelect={(e) => { // A native caret move (long press, mouse drag) snaps back to a single box const el = e.currentTarget; const want = active < code.length ? [active, active + 1] : [active, active]; if (el.selectionStart !== want[0] || el.selectionEnd !== want[1]) syncSelection(); }} />

{/* The error message slides in below and folds away once retyping starts */}

{errorMessage}

{onResend && (

Didn't get a code?{" "} {left > 0 ? ( Resend in{"\u00a0"} {clock(left)} ) : ( )}

)} {announce}

); } /* ---------- Styles ---------- */ const css = /* css */ ` /* Colors, size and motion as variables – override them on .ui-otp */ .ui-otp { --ui-otp-box: 48px; --ui-otp-gap: 8px; --ui-otp-bg: #fafafa; --ui-otp-card: #ffffff; --ui-otp-line: #e4e4e7; --ui-otp-line-strong: #cfcfd4; --ui-otp-ink: #171717; --ui-otp-text: #404040; --ui-otp-muted: #8f8f8f; --ui-otp-faint: #c4c4c8; --ui-otp-halo: rgba(23, 23, 23, 0.07); --ui-otp-wait: #f2f2f3; --ui-otp-shine: rgba(255, 255, 255, 0.95); --ui-otp-danger: #e5484d; --ui-otp-danger-line: rgba(229, 72, 77, 0.6); --ui-otp-danger-halo: rgba(229, 72, 77, 0.12); --ui-otp-success: #2f9e5b; --ui-otp-accent: #2f6bff; --ui-otp-focus: rgba(23, 23, 23, 0.22); --ui-otp-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; container-type: inline-size; display: grid; justify-self: stretch; /* it sizes the boxes from its own width, so it must never shrink to fit them */ width: 100%; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--ui-otp-text); -webkit-font-smoothing: antialiased; } .ui-otp *, .ui-otp *::before, .ui-otp *::after { box-sizing: border-box; } .ui-otp[data-align="center"] { justify-items: center; text-align: center; } .ui-otp[data-disabled] { opacity: 0.55; } .ui-otp__field { display: flex; min-width: 0; } .ui-otp[data-align="center"] .ui-otp__field { justify-content: center; } /* The boxes scale down to fit their container (phones at 320px), up to --ui-otp-box */ .ui-otp__slots { --size: min(var(--ui-otp-box), calc((100cqi - (var(--n) - 1) * var(--ui-otp-gap) - var(--sep-w)) / var(--n))); position: relative; display: flex; align-items: center; gap: var(--ui-otp-gap); } .ui-otp__box { position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: calc(var(--size) * 1.18); overflow: hidden; border-radius: calc(var(--size) * 0.24); background: var(--ui-otp-bg); box-shadow: inset 0 0 0 1px var(--ui-otp-line); font-size: calc(var(--size) * 0.46); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ui-otp-ink); transition: box-shadow 220ms ease, background-color 220ms ease, transform 380ms var(--ui-otp-ease), opacity 260ms ease; } .ui-otp__box[data-filled] { background: var(--ui-otp-card); box-shadow: inset 0 0 0 1px var(--ui-otp-line-strong); } .ui-otp__sep { flex: none; width: 10px; height: 2px; border-radius: 1px; background: var(--ui-otp-faint); transition: opacity 200ms ease; } /* Digits pop in – a small lift out of a blur, no bounce */ .ui-otp__char { display: block; animation: ui-otp-pop 280ms var(--ui-otp-ease) both; } .ui-otp__slots[data-clearing] .ui-otp__char { animation: ui-otp-out 240ms ease both; animation-delay: calc((var(--n) - var(--i)) * 22ms) !important; } /* One ring glides from box to box; its caret blinks softly in an empty box */ .ui-otp__ring { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; border-radius: calc(var(--size) * 0.24); box-shadow: inset 0 0 0 1.5px var(--ui-otp-ink), 0 0 0 4px var(--ui-otp-halo); opacity: 0; pointer-events: none; transition: transform 260ms var(--ui-otp-ease), width 260ms var(--ui-otp-ease), opacity 180ms ease, box-shadow 220ms ease; } .ui-otp__ring[data-show] { opacity: 1; } .ui-otp__caret { width: 1.5px; height: 40%; border-radius: 1px; background: var(--ui-otp-ink); opacity: 0; } .ui-otp__caret[data-show] { animation: ui-otp-blink 1.1s ease-in-out infinite; } /* The real input lies over the boxes, invisible – it takes taps, keys, paste and SMS autofill */ .ui-otp__input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; /* iOS doesn't zoom into inputs of 16px and up */ letter-spacing: -1em; cursor: text; appearance: none; } .ui-otp__input::selection { background: transparent; } .ui-otp__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px transparent inset; transition: background-color 9999s; } .ui-otp__input[readonly], .ui-otp__input:disabled { cursor: default; } /* Keyboard focus is shown by the ring – a thin outline joins it for keyboard users */ .ui-otp__slots:has(.ui-otp__input:focus-visible) .ui-otp__ring { box-shadow: inset 0 0 0 1.5px var(--ui-otp-ink), 0 0 0 4px var(--ui-otp-halo), 0 0 0 6px var(--ui-otp-focus); } /* Verifying: a soft light passes over the boxes, one after another */ .ui-otp__box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--ui-otp-shine) 50%, transparent 80%); transform: translateX(-120%); opacity: 0; pointer-events: none; } .ui-otp[data-status="verifying"] .ui-otp__box::after { opacity: 1; animation: ui-otp-shimmer 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); } .ui-otp[data-status="verifying"] .ui-otp__box { background: var(--ui-otp-wait); box-shadow: inset 0 0 0 1px var(--ui-otp-line); color: var(--ui-otp-text); } /* Error: only the borders turn red */ .ui-otp[data-error] .ui-otp__box { box-shadow: inset 0 0 0 1px var(--ui-otp-danger-line); } .ui-otp[data-error] .ui-otp__ring { box-shadow: inset 0 0 0 1.5px var(--ui-otp-danger), 0 0 0 4px var(--ui-otp-danger-halo); } .ui-otp[data-error] .ui-otp__caret { background: var(--ui-otp-danger); } /* Success: the boxes slide together and fade while one frame morphs into the "Verified" pill */ .ui-otp__pill { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; height: calc(var(--size) * 1.18); overflow: hidden; border-radius: calc(var(--size) * 0.24); background: var(--ui-otp-card); box-shadow: inset 0 0 0 1px var(--ui-otp-line-strong); opacity: 0; transform: translate(-50%, -50%); pointer-events: none; transition: width 300ms var(--ui-otp-ease), height 300ms var(--ui-otp-ease), border-radius 300ms var(--ui-otp-ease), opacity 160ms ease 140ms; } .ui-otp__pill-inner { display: inline-flex; max-width: 100cqi; /* a long label shortens instead of leaving the field */ align-items: center; gap: 6px; padding: 0 15px 0 12px; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; color: var(--ui-otp-ink); opacity: 0; transition: opacity 160ms ease; } .ui-otp__pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ui-otp__check { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--ui-otp-success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ui-otp__check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 120ms ease; } .ui-otp[data-status="success"] .ui-otp__box { transform: translateX(calc(((var(--n) - 1) / 2 - var(--i)) * (var(--size) + var(--ui-otp-gap)))) scale(0.7); opacity: 0; transition: transform 340ms var(--ui-otp-ease), opacity 220ms ease 120ms; } .ui-otp[data-status="success"] .ui-otp__sep { opacity: 0; } /* The pill settles at a compact height, not the height of the boxes */ .ui-otp[data-status="success"] .ui-otp__pill { height: 36px; border-radius: 999px; opacity: 1; transition: width 460ms var(--ui-otp-ease) 220ms, height 460ms var(--ui-otp-ease) 220ms, border-radius 460ms var(--ui-otp-ease) 220ms, opacity 160ms ease 120ms; } .ui-otp[data-status="success"] .ui-otp__pill-inner { opacity: 1; transition: opacity 240ms ease 460ms; } .ui-otp[data-status="success"] .ui-otp__check path { stroke-dashoffset: 0; transition: stroke-dashoffset 380ms var(--ui-otp-ease) 560ms; } /* The error message grows in below, then folds away */ .ui-otp__msg { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 300ms var(--ui-otp-ease); } .ui-otp__msg[data-show] { grid-template-rows: 1fr; } .ui-otp__msg-inner { min-height: 0; overflow: hidden; } .ui-otp__msg-text { margin: 0; overflow-wrap: anywhere; padding-top: 10px; font-size: 13px; text-wrap: balance; color: var(--ui-otp-text); opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 300ms var(--ui-otp-ease); } .ui-otp__msg[data-show] .ui-otp__msg-text { opacity: 1; transform: none; transition-delay: 60ms; } /* The icon sits inline, so a wrapped message stays centered with it */ .ui-otp__alert { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: var(--ui-otp-danger); stroke-width: 2; stroke-linecap: round; } /* Resend: a countdown that turns into a button */ .ui-otp__resend { margin-top: 14px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ui-otp-muted); transition: opacity 220ms ease; } .ui-otp__resend[data-hidden] { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s 220ms; } .ui-otp__swap { display: inline-block; animation: ui-otp-in 260ms var(--ui-otp-ease) both; } .ui-otp__wait { color: var(--ui-otp-text); } .ui-otp__time { display: inline-block; min-width: 3.4ch; text-align: left; } .ui-otp__resend-btn { position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ui-otp-accent); cursor: pointer; } .ui-otp__resend-btn::before { content: ""; position: absolute; inset: -6px -8px; border-radius: 8px; } .ui-otp__resend-btn:hover { text-decoration: underline; text-underline-offset: 3px; } .ui-otp__resend-btn:focus-visible { outline: 2px solid var(--ui-otp-focus); outline-offset: 3px; border-radius: 4px; } .ui-otp__resend-btn:disabled { color: var(--ui-otp-muted); cursor: default; text-decoration: none; } .ui-otp__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @keyframes ui-otp-pop { from { opacity: 0; transform: translateY(4px) scale(0.7); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes ui-otp-out { to { opacity: 0; transform: translateY(-4px) scale(0.8); filter: blur(2px); } } @keyframes ui-otp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes ui-otp-shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } } @keyframes ui-otp-in { from { opacity: 0; transform: translateY(3px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } } /* Narrow containers (phones): tighter gaps, the question before "Resend" drops first */ @container (max-width: 360px) { .ui-otp__slots { --ui-otp-gap: 6px; } .ui-otp__sep { width: 8px; } } @container (max-width: 250px) { .ui-otp__resend-q { display: none; } } /* Touch screens: a bigger target for Resend */ @media (hover: none) and (pointer: coarse) { .ui-otp__resend-btn::before { inset: -11px -12px; } } @media (prefers-reduced-motion: reduce) { .ui-otp *, .ui-otp *::before, .ui-otp *::after { animation: none !important; transition: none !important; } .ui-otp__caret[data-show] { opacity: 1; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-otp { --ui-otp-bg: #1d1d20; --ui-otp-card: #19191b; --ui-otp-line: #2a2a2e; --ui-otp-line-strong: #3a3a40; --ui-otp-ink: #ededed; --ui-otp-text: #c8c8cc; --ui-otp-muted: #8b8b92; --ui-otp-faint: #4a4a50; --ui-otp-halo: rgba(255, 255, 255, 0.08); --ui-otp-wait: #1d1d20; --ui-otp-shine: rgba(255, 255, 255, 0.07); --ui-otp-danger: #ff6369; --ui-otp-danger-line: rgba(255, 99, 105, 0.55); --ui-otp-danger-halo: rgba(255, 99, 105, 0.14); --ui-otp-success: #4cc38a; --ui-otp-accent: #6d8bff; --ui-otp-focus: rgba(255, 255, 255, 0.3); } `; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/otp-input/otp-input.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]