Verified

4f: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/1o6_421saitt-.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"] 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/1o6_421saitt-.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:T35fb,"use client"; // beui.dev/components/blocks/otp-input import { AnimatePresence, animate, motion, useReducedMotion, } from "motion/react"; import { useEffect, useId, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type OTPStatus = "idle" | "error" | "success"; export interface OTPInputProps { /** Number of slots. Default 6. */ length?: number; value?: string; defaultValue?: string; onChange?: (value: string) => void; /** Fires once every slot is filled. */ onComplete?: (value: string) => void; /** Optional label rendered above the slots. */ label?: string; /** Helper text shown below the slots while idle. */ hint?: string; /** Message shown below the slots when status is "success". */ successMessage?: string; /** Message shown below the slots when status is "error". */ errorMessage?: string; /** External validation feedback. "error" shakes, "success" draws a check. */ status?: OTPStatus; /** Render dots instead of the typed digits. */ mask?: boolean; disabled?: boolean; autoFocus?: boolean; /** Accessible label for the underlying input. */ "aria-label"?: string; className?: string; } export function OTPInput({ length = 6, value: controlledValue, defaultValue = "", onChange, onComplete, label, hint, successMessage, errorMessage, status = "idle", mask = false, disabled = false, autoFocus = false, "aria-label": ariaLabel = "One-time passcode", className, }: OTPInputProps) { const uid = useId(); const reduce = useReducedMotion(); const inputRef = useRef(null); const slotsRef = useRef(null); const controlled = controlledValue !== undefined; // Source of truth is a fixed-length array, so a cleared middle slot stays an // in-place hole instead of collapsing the digits after it to the left. const [slots, setSlots] = useState(() => toSlots(controlled ? controlledValue : defaultValue, length), ); const [focused, setFocused] = useState(false); const [active, setActive] = useState(0); const joined = slots.join(""); const joinedRef = useRef(joined); useEffect(() => { joinedRef.current = joined; }, [joined]); // Pull in external value changes; skip when the parent is just echoing our own // onChange, so internal holes survive the controlled round-trip. useEffect(() => { if (!controlled) return; const incoming = sanitize(controlledValue, length); if (incoming !== joinedRef.current) setSlots(toSlots(incoming, length)); }, [controlled, controlledValue, length]); const commit = (next: string[]) => { const wasComplete = slots.every((c) => c !== ""); setSlots(next); const str = next.join(""); onChange?.(str); // Fire only on the empty→full transition, not on every edit of a full code. if (!wasComplete && next.every((c) => c !== "")) onComplete?.(str); }; const clearSlot = (idx: number) => { const next = [...slots]; next[idx] = ""; commit(next); }; const slotFromClientX = (clientX: number) => { const els = slotsRef.current?.children; if (!els) return 0; for (let i = 0; i < els.length; i++) { if (clientX < els[i].getBoundingClientRect().right) return i; } return length - 1; }; // Single insertion path: one digit overwrites the active slot and advances; a // multi-digit chunk (paste / SMS autofill) fills forward from the active slot. const insert = (raw: string, from = active) => { const digits = raw.replace(/\D/g, ""); if (!digits) return; const next = [...slots]; let i = from; for (const ch of digits) { if (i >= length) break; next[i] = ch; i++; } commit(next); setActive(Math.min(i, length - 1)); }; // The keyboard is the single source of truth: preventDefault on keydown // reliably blocks native insertion (unlike beforeinput in React), so the hidden // input never accumulates a competing string and slot holes survive. const onKeyDown = (e: React.KeyboardEvent) => { if (disabled || e.metaKey || e.ctrlKey || e.altKey) return; const k = e.key; if (/^[0-9]$/.test(k)) { e.preventDefault(); insert(k); } else if (k === "Backspace") { e.preventDefault(); // A filled slot clears in place; an empty slot steps back and clears there. if (slots[active]) { clearSlot(active); } else if (active > 0) { clearSlot(active - 1); setActive((current) => Math.max(current - 1, 0)); } } else if (k === "Delete") { e.preventDefault(); clearSlot(active); } else if (k === "ArrowLeft") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); } else if (k === "ArrowRight") { e.preventDefault(); setActive((a) => Math.min(a + 1, length - 1)); } else if (k === "Home") { e.preventDefault(); setActive(0); } else if (k === "End") { e.preventDefault(); setActive(length - 1); } }; const onPaste = (e: React.ClipboardEvent) => { if (disabled) return; // preventDefault suppresses the duplicate onChange, keeping that path autofill-only. e.preventDefault(); insert(e.clipboardData.getData("text"), active); }; // Autofill path: SMS one-time-code arrives as a whole value in one shot. // Keystrokes go through onKeyDown and paste through onPaste, so only autofill // reaches here — spread it across the slots from the start. const onChangeNative = (e: React.ChangeEvent) => { const digits = sanitize(e.target.value, length); if (!digits) return; commit(toSlots(digits, length)); setActive(Math.min(digits.length, length - 1)); }; // Error shake — imperative so it replays on every transition into "error". useEffect(() => { if (status !== "error" || reduce || !slotsRef.current) return; animate( slotsRef.current, { x: [0, -5, 5, -3, 3, -1, 0] }, { duration: 0.45, ease: EASE_OUT }, ); }, [status, reduce]); const showSuccess = status === "success"; const activeIndex = focused ? active : -1; const message = showSuccess ? successMessage : status === "error" ? errorMessage : hint; return (

{label ? ( {label} ) : null}

{ if (disabled) return; // Suppress the native click-caret; we drive the active slot ourselves. e.preventDefault(); // Clamp to the first empty slot so a click can't jump ahead of progress. const firstEmpty = slots.indexOf(""); const cap = firstEmpty === -1 ? length - 1 : firstEmpty; setActive(Math.min(slotFromClientX(e.clientX), cap)); inputRef.current?.focus(); }} > setFocused(true)} onBlur={() => setFocused(false)} // Transparent overlay owns focus, the soft keyboard, paste and autofill; // the slots below are purely presentational. className="absolute inset-0 z-20 h-full w-full cursor-text bg-transparent text-transparent caret-transparent opacity-0 outline-none disabled:cursor-not-allowed" />

{Array.from({ length }, (_, i) => { const char = slots[i] ?? ""; const isActive = i === activeIndex; return (

{/* Blinking caret marks the active slot — centered when empty, trailing the digit when the slot is already filled. */} {isActive && !showSuccess ? ( ) : null} {/* Digits roll vertically. Each is absolutely centered so enter and exit overlap in place — no in-flow reflow, no sideways drift. */} {char ? ( {mask ? "•" : char} ) : null}

); })}

{showSuccess ? ( ) : null}

{message ? (

{message}

) : null}

); } function sanitize(raw: string, length: number) { return raw.replace(/\D/g, "").slice(0, length); } function toSlots(raw: string, length: number) { const digits = sanitize(raw, length); return Array.from({ length }, (_, i) => digits[i] ?? ""); } 52:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; 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.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4e:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/otp-input.tsx","content":"$51","type":"registry:component","target":"@components/motion/otp-input.tsx"},{"path":"lib/ease.ts","content":"$52","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"}]]}]