4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T2474,"use client"; // easeui.dev/components/motion/otp-input import { Check, Loader2 } from "lucide-react"; import { type ClipboardEvent, type KeyboardEvent, useEffect, useRef, useState } from "react"; import { EASE_OUT_CSS } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface OtpInputProps { /** How many digits. Default 6. */ length?: number; /** Controlled value. */ value?: string; /** Starting value when uncontrolled. Default "". */ defaultValue?: string; onChange?: (value: string) => void; /** Called once every box has a digit, before onVerify runs. */ onComplete?: (value: string) => void; /** * Runs once every box has a digit. Return (or resolve) true or false and the * input shows a spinner below the boxes while it waits, then colors itself * green or red from the result on its own. Leave it out to keep driving * invalid/success yourself. */ onVerify?: (value: string) => boolean | Promise; /** Shakes the boxes once and switches the ring to the destructive color. Ignored while onVerify is set. */ invalid?: boolean; /** Switches the ring to the success color and shows a check below the boxes. Ignored while onVerify is set. */ success?: boolean; disabled?: boolean; /** Name for a hidden input, so the code submits with a plain HTML form. */ name?: string; className?: string; } // A gentle nudge, not a rattle. const SHAKE: Keyframe[] = [ { transform: "translateX(0)" }, { transform: "translateX(-5px)" }, { transform: "translateX(4px)" }, { transform: "translateX(-2px)" }, { transform: "translateX(0)" }, ]; const POP: Keyframe[] = [ { transform: "scale(0.9)", opacity: 0.6 }, { transform: "scale(1)", opacity: 1 }, ]; // Spinner and check share a slot, so success morphs in place. const SWAP = "col-start-1 row-start-1 transition-[opacity,scale] duration-200 ease-out motion-reduce:transition-none"; const SHOWN = "scale-100 opacity-100"; const HIDDEN = "scale-50 opacity-0"; function prefersReducedMotion() { return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; } /** * A verification code as one box per digit. Typing advances to the next box, * Backspace steps back through empty ones, and pasting or an SMS autofill * spreads its digits across the remaining boxes. Marking it invalid gives the * row a short, gentle shake. Pass onVerify and the input runs the whole * check-and-color cycle itself, morphing its own spinner into a check. */ export function OtpInput({ length = 6, value, defaultValue = "", onChange, onComplete, onVerify, invalid = false, success = false, disabled = false, name, className, }: OtpInputProps) { const [uncontrolled, setUncontrolled] = useState(defaultValue); const isControlled = value !== undefined; const digits = (isControlled ? value : uncontrolled).slice(0, length); const refs = useRef<(HTMLInputElement | null)[]>([]); const rootRef = useRef(null); const statusRef = useRef(null); const prevDigits = useRef(digits); const wasComplete = useRef(false); const verifyToken = useRef(0); // Auto status when onVerify is set; otherwise the props drive it. const [status, setStatus] = useState<"idle" | "checking" | "success" | "invalid">("idle"); const checking = Boolean(onVerify) && status === "checking"; const effectiveInvalid = onVerify ? status === "invalid" : invalid; const effectiveSuccess = onVerify ? status === "success" : success; const showStatus = checking || effectiveSuccess; const setValue = (next: string) => { const clipped = next.slice(0, length); if (!isControlled) setUncontrolled(clipped); onChange?.(clipped); // Editing after a result starts the next attempt fresh. if (onVerify && status !== "idle") setStatus("idle"); const complete = clipped.length === length; if (complete && !wasComplete.current) { onComplete?.(clipped); if (onVerify) { verifyToken.current += 1; const token = verifyToken.current; setStatus("checking"); Promise.resolve(onVerify(clipped)) .then((ok) => { if (verifyToken.current === token) setStatus(ok ? "success" : "invalid"); }) .catch(() => { if (verifyToken.current === token) setStatus("invalid"); }); } } wasComplete.current = complete; }; // Pop new digits, shake the row when invalid. useEffect(() => { if (prefersReducedMotion()) { prevDigits.current = digits; return; } const prev = prevDigits.current; prevDigits.current = digits; for (let index = 0; index < length; index += 1) { if (digits[index] && digits[index] !== prev[index]) { refs.current[index]?.animate(POP, { duration: 140, easing: EASE_OUT_CSS }); } } }, [digits, length]); useEffect(() => { const root = rootRef.current; if (!effectiveInvalid || !root || prefersReducedMotion()) return; // Wait for the last pop to settle first, so the two don't overlap. root.animate(SHAKE, { duration: 260, delay: 80, easing: "ease-out" }); }, [effectiveInvalid]); // Fades the status row in once, on its first appearance only. useEffect(() => { const el = statusRef.current; if (!showStatus || !el || prefersReducedMotion()) return; el.animate([{ opacity: 0, transform: "translateY(4px)" }, { opacity: 1, transform: "translateY(0)" }], { duration: 150, easing: EASE_OUT_CSS, }); }, [showStatus]); const focusInput = (index: number) => refs.current[index]?.focus(); const onInputChange = (index: number, raw: string) => { const chars = raw.replace(/\D/g, ""); if (!chars) { setValue(digits.slice(0, index) + digits.slice(index + 1)); return; } // One key replaces a box; a paste or autofill spreads across several. const next = (digits.slice(0, index) + chars + digits.slice(index + 1)).slice(0, length); setValue(next); focusInput(Math.min(index + chars.length, length - 1)); }; const onKeyDown = (index: number, event: KeyboardEvent) => { if (event.key === "Backspace" && !digits[index] && index > 0) { event.preventDefault(); setValue(digits.slice(0, index - 1) + digits.slice(index)); focusInput(index - 1); } else if (event.key === "ArrowLeft" && index > 0) { event.preventDefault(); focusInput(index - 1); } else if (event.key === "ArrowRight" && index < length - 1) { event.preventDefault(); focusInput(index + 1); } }; const onPaste = (index: number, event: ClipboardEvent) => { event.preventDefault(); onInputChange(index, event.clipboardData.getData("text")); }; return (

Verification code {Array.from({ length }, (_, index) => index).map((index) => ( { refs.current[index] = el; }} type="text" inputMode="numeric" autoComplete={index === 0 ? "one-time-code" : "off"} maxLength={length} disabled={disabled || checking} aria-invalid={effectiveInvalid} value={digits[index] ?? ""} onChange={(event) => onInputChange(index, event.target.value)} onKeyDown={(event) => onKeyDown(index, event)} onPaste={(event) => onPaste(index, event)} onFocus={(event) => event.target.select()} className={cn( "h-12 w-10 rounded-xl bg-card text-center text-lg font-medium text-foreground shadow-[0_0_0_1px_var(--border-strong)] outline-none transition-shadow duration-150 ease-out", "focus:shadow-[0_0_0_2px_var(--accent)]", effectiveSuccess ? "shadow-[0_0_0_2px_var(--success)]" : "aria-invalid:shadow-[0_0_0_2px_var(--destructive)]", "disabled:cursor-not-allowed disabled:opacity-50", )} /> ))} {name ? : null}

{showStatus ? ( {checking ? "Verifying" : "Verified"} ) : null}

); } 4d:T75d,// Shared motion tokens. Micro-interactions run 100 to 150ms, standard UI // 150 to 250ms, and panels up to 300ms. // Easing curves mirror the CSS custom properties in globals.css. /** ease-out-quint. Fast start that settles quickly. Entrances, exits, feedback. */ export const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** ease-in-out-cubic. Elements already on screen moving to a new spot. */ export const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const; /** Sheet and drawer glide. */ export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.23, 1, 0.32, 1)"; // Springs are described by duration and bounce, which is easier to reason about // than stiffness and damping. Bounce stays at zero for product UI. /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", duration: 0.15, bounce: 0, } as const; /** Content swaps, label and icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", duration: 0.2, bounce: 0, } as const; /** Overlay panel entrances, modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", duration: 0.25, bounce: 0, } as const; /** Shared-layout glides, pills and indicators moving between positions. */ export const SPRING_LAYOUT = { type: "spring", duration: 0.22, bounce: 0, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt). */ export const SPRING_MOUSE = { stiffness: 320, damping: 26, mass: 0.3, } as const; /** Dragged handles and fills (sliders). Critically damped `useSpring` config, * so the value follows the pointer closely and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 49:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4a",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/motion/otp-input.tsx","content":"$4c","type":"registry:component","target":"@components/motion/otp-input.tsx"},{"path":"lib/ease.ts","content":"$4d","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]