50: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"] 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:T1ca9,"use client"; import { useId, useRef, useState, type ChangeEvent } from "react"; import { AnimatePresence, MotionConfig, motion, useAnimate } from "motion/react"; export interface CodeSlotsProps { /** Number of digits. */ length?: number; /** Called with the full code. Return (or resolve) true for success, false to shake and clear. */ onComplete?: (code: string) => boolean | void | Promise; /** Called on every change with the digits typed so far. */ onChange?: (code: string) => void; /** Glow color on success. */ successColor?: string; /** Border color on a wrong code. */ errorColor?: string; /** Accessible label of the input. */ label?: string; autoFocus?: boolean; className?: string; } type Status = "idle" | "checking" | "error" | "success"; const H = 64; // slot height == reel cell height (px) const REEL = Array.from({ length: 20 }, (_, i) => i % 10); const css = ` @keyframes code-slots-caret{0%,45%{opacity:1}55%,100%{opacity:0}} @keyframes code-slots-pulse{0%,100%{opacity:.55}50%{opacity:1}}`; export function CodeSlots({ length = 6, onComplete, onChange, successColor = "#22c55e", errorColor = "#ef4444", label = "Verification code", autoFocus, className, }: CodeSlotsProps) { // `from` = how many digits existed before the last change, so pasted digits roll in staggered. const [{ value, from }, setState] = useState({ value: "", from: 0 }); const [status, setStatus] = useState("idle"); const [focused, setFocused] = useState(false); const [scope, animate] = useAnimate(); const input = useRef(null); const id = useId(); const check = async (code: string) => { if (!onComplete) return; setStatus("checking"); const ok = await onComplete(code); if (ok === true) { setStatus("success"); return; } if (ok === false) { setStatus("error"); await animate(scope.current, { x: [0, -14, 12, -9, 7, -4, 2, 0] }, { duration: 0.5, ease: "easeOut", delay: 0.35 }); setState((s) => ({ value: "", from: s.value.length })); setStatus("idle"); input.current?.focus(); return; } setStatus("idle"); }; const handle = (e: ChangeEvent) => { if (status === "checking" || status === "success") return; const next = e.target.value.replace(/\D/g, "").slice(0, length); setState({ value: next, from: value.length }); if (status === "error") setStatus("idle"); onChange?.(next); if (next.length === length && next !== value) void check(next); }; const tone = status === "success" ? successColor : status === "error" ? errorColor : undefined; const half = length >= 6 && length % 2 === 0 ? length / 2 : -1; return (

{Array.from({ length }, (_, i) => { const ch = value[i]; const active = focused && status === "idle" && i === Math.min(value.length, length - 1) && !(value.length === length); return (

{i === half && } {ch !== undefined && ( {REEL.map((d, k) => ( {d} ))} )} {active && ch === undefined && ( )}

); })}

setFocused(true)} onBlur={() => setFocused(false)} onSelect={(e) => { const el = e.currentTarget; el.setSelectionRange(el.value.length, el.value.length); }} readOnly={status === "success"} autoFocus={autoFocus} autoComplete="one-time-code" inputMode="numeric" pattern="\d*" maxLength={length} aria-label={`${label}, ${length} digits`} aria-invalid={status === "error"} spellCheck={false} className="absolute inset-0 cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none selection:bg-transparent" /> {status === "checking" ? "Checking code" : status === "error" ? "Wrong code, try again" : status === "success" ? "Code verified" : ""}

); } 4f:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/code-slots.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]