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:T235d,'use client'; import React, { useRef, useState, useEffect, createContext, useContext, } from 'react'; import { motion } from 'motion/react'; import { MinusIcon } from 'lucide-react'; import { cn } from '@/lib/utils'; interface InputOtpContextType { values: string[]; visibleValues: string[]; handleChange: (val: string, idx: number) => void; handleKeyDown: (e: React.KeyboardEvent, idx: number) => void; handleFocus: (idx: number) => void; handleBlur: (idx: number) => void; handlePaste: (e: React.ClipboardEvent, idx: number) => void; inputsRef: React.MutableRefObject<(HTMLInputElement | null)[]>; mask: boolean; maskSymbol: string; inputClassName?: string; } const InputOtpContext = createContext(null); interface InputOTPProps { maxLength?: number; onComplete?: (value: string) => void; className?: string; containerClassName?: string; inputClassName?: string; mask?: boolean; maskSymbol?: string; maskDelay?: number; children: React.ReactNode; } function InputOTP({ maxLength = 6, onComplete, className, containerClassName, inputClassName, mask = false, maskSymbol = '*', maskDelay = 800, children, }: InputOTPProps) { const [values, setValues] = useState(Array(maxLength).fill('')); const [visibleValues, setVisibleValues] = useState(Array(maxLength).fill('')); const inputsRef = useRef<(HTMLInputElement | null)[]>([]); const timeoutsRef = useRef<(NodeJS.Timeout | null)[]>( Array(maxLength).fill(null), ); const clearTimeoutForIndex = (idx: number) => { if (timeoutsRef.current[idx]) { clearTimeout(timeoutsRef.current[idx]!); timeoutsRef.current[idx] = null; } }; const applyMaskWithDelay = (idx: number, currentValue: string) => { clearTimeoutForIndex(idx); if (mask && currentValue) { timeoutsRef.current[idx] = setTimeout(() => { setVisibleValues((prev) => { const updated = [...prev]; if (updated[idx] !== maskSymbol) { updated[idx] = maskSymbol; } return updated; }); }, maskDelay); } }; const handleChange = (val: string, idx: number) => { if (val.length > 1) return; clearTimeoutForIndex(idx); const newValues = [...values]; const newVisibleValues = [...visibleValues]; newValues[idx] = val; newVisibleValues[idx] = val; setValues(newValues); setVisibleValues(newVisibleValues); if (mask && val) { applyMaskWithDelay(idx, val); } if (val && idx < maxLength - 1) { inputsRef.current[idx + 1]?.focus(); } if (newValues.every((v) => v)) { onComplete?.(newValues.join('')); } }; const handlePaste = (e: React.ClipboardEvent, startIdx: number) => { e.preventDefault(); const pastedText = e.clipboardData.getData('text'); if (!pastedText) return; const newValues = [...values]; const newVisibleValues = [...visibleValues]; timeoutsRef.current.forEach((timeout, i) => { if (timeout) { clearTimeout(timeout); timeoutsRef.current[i] = null; } }); for (let i = 0; i < pastedText.length && startIdx + i < maxLength; i++) { const char = pastedText[i]; newValues[startIdx + i] = char; newVisibleValues[startIdx + i] = char; } setValues(newValues); setVisibleValues(newVisibleValues); if (mask) { for (let i = 0; i < pastedText.length && startIdx + i < maxLength; i++) { const idx = startIdx + i; if (newValues[idx]) { timeoutsRef.current[idx] = setTimeout(() => { setVisibleValues((prev) => { const updated = [...prev]; if (updated[idx] !== maskSymbol) { updated[idx] = maskSymbol; } return updated; }); }, maskDelay); } } } const nextEmptyIndex = newValues.findIndex((v, i) => i > startIdx && !v); const focusIndex = nextEmptyIndex !== -1 ? nextEmptyIndex : Math.min(startIdx + pastedText.length, maxLength - 1); setTimeout(() => { inputsRef.current[focusIndex]?.focus(); }, 0); if (newValues.every((v) => v)) { onComplete?.(newValues.join('')); } }; const handleKeyDown = (e: React.KeyboardEvent, idx: number) => { if (e.key === 'Backspace') { clearTimeoutForIndex(idx); if (!values[idx] && idx > 0) { inputsRef.current[idx - 1]?.focus(); } else { const newValues = [...values]; const newVisibleValues = [...visibleValues]; newValues[idx] = ''; newVisibleValues[idx] = ''; setValues(newValues); setVisibleValues(newVisibleValues); } } }; const handleFocus = (idx: number) => { if (mask && values[idx]) { clearTimeoutForIndex(idx); setVisibleValues((prev) => { const updated = [...prev]; updated[idx] = values[idx]; return updated; }); applyMaskWithDelay(idx, values[idx]); } }; const handleBlur = (idx: number) => { if (mask && values[idx]) { clearTimeoutForIndex(idx); setVisibleValues((prev) => { const updated = [...prev]; updated[idx] = maskSymbol; return updated; }); } }; useEffect(() => { const currentTimeouts = timeoutsRef.current; return () => { currentTimeouts.forEach((timeout) => { if (timeout) clearTimeout(timeout); }); }; }, []); const contextValue: InputOtpContextType = { values, visibleValues, handleChange, handleKeyDown, handleFocus, handleBlur, handlePaste, inputsRef, mask, maskSymbol, inputClassName, }; return (

{children}

); } function InputOTPGroup({ className, children, ...props }: React.ComponentProps<'div'>) { return (

{children}

); } function InputOTPSlot({ index, className, ...props }: Omit, 'children'> & { index: number; }) { const context = useContext(InputOtpContext); if (!context) { throw new Error('InputOTPSlot must be used within InputOTP'); } const { visibleValues, handleChange, handleKeyDown, handleFocus, handleBlur, handlePaste, inputsRef, mask, maskSymbol, inputClassName, } = context; return ( { inputsRef.current[index] = el; }} type='text' inputMode='text' maxLength={1} value={visibleValues[index]} onChange={(e) => handleChange(e.target.value, index)} onKeyDown={(e) => handleKeyDown(e, index)} onFocus={() => handleFocus(index)} onBlur={() => handleBlur(index)} onPaste={(e) => handlePaste(e, index)} className={cn( 'w-8 h-10 sm:w-10 sm:h-12 md:w-12 md:h-14', 'rounded-lg sm:rounded-xl text-center font-semibold outline-hidden transition-all duration-200', 'border border-transparent bg-white/60 dark:bg-white/10 shadow-inner', 'focus:ring-2 focus:ring-primary/70 dark:focus:ring-primary/40 focus:border-primary/30', 'backdrop-blur-md text-black dark:text-white placeholder-transparent', visibleValues[index] === maskSymbol ? 'text-lg sm:text-xl md:text-2xl' : 'text-sm sm:text-base md:text-lg', 'font-mono', inputClassName, className, )} /> ); } function InputOTPSeparator({ separatorSymbol, className, ...props }: React.ComponentProps<'div'> & { separatorSymbol?: React.ReactNode; }) { return (

{separatorSymbol || }

); } export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }; 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"}]]}]}],["$","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","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/input-otp.tsx","content":"$52","type":"registry:ui"},{"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}","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]