4c: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"] 4d: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"] 4e:T1dae,'use client' import { IconMinus } from '@tabler/icons-react' import * as React from 'react' import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from 'input-otp' import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from 'motion/react' import { cn } from '@/lib/utils' type Sweep = { id: number; from: number; to: number; tone: 'paste' | 'success' } type InputOTPStatus = { invalid: boolean; success: boolean; sweep: Sweep | null } const InputOTPStatusContext = React.createContext({ invalid: false, success: false, sweep: null, }) const SWEEP_TIMING = { paste: { duration: 0.4, stagger: 0.045 }, success: { duration: 0.42, stagger: 0.048 }, } as const const RING_TRAVEL = 0.42 function InputOTP({ className, containerClassName, 'aria-invalid': ariaInvalid, value, onChange, success = false, maxLength, ...props }: React.ComponentProps & { containerClassName?: string success?: boolean }) { const layoutGroupId = React.useId() const invalid = ariaInvalid === true || ariaInvalid === 'true' const reduceMotion = useReducedMotion() const [sweep, setSweep] = React.useState(null) const filled = React.useRef(0) const sweepId = React.useRef(0) const startSweep = (from: number, to: number, tone: Sweep['tone']) => { sweepId.current += 1 setSweep({ id: sweepId.current, from, to, tone }) } const handleChange = (next: string) => { const from = filled.current filled.current = next.length if (!reduceMotion && next.length - from > 1) startSweep(from, next.length, 'paste') onChange?.(next) } React.useEffect(() => { if (typeof value === 'string') filled.current = value.length }, [value]) React.useEffect(() => { if (!success || reduceMotion) return sweepId.current += 1 setSweep({ id: sweepId.current, from: 0, to: maxLength, tone: 'success' }) }, [success, maxLength, reduceMotion]) React.useEffect(() => { if (!sweep) return const { duration, stagger } = SWEEP_TIMING[sweep.tone] const span = duration + stagger * (sweep.to - sweep.from) const timer = window.setTimeout(() => setSweep(null), span * 1000) return () => window.clearTimeout(timer) }, [sweep]) return ( ) } function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function InputOTPSlot({ index, className, style, ...props }: React.ComponentProps<'div'> & { index: number }) { const inputOTPContext = React.useContext(OTPInputContext) const { invalid, success, sweep } = React.useContext(InputOTPStatusContext) const { char, isActive } = inputOTPContext?.slots[index] ?? {} const swept = sweep !== null && index >= sweep.from && index < sweep.to const isComplete = inputOTPContext?.slots.every((slot) => Boolean(slot.char)) ?? false const reduceMotion = useReducedMotion() return (

{swept && sweep ? ( ) : null} {isActive ? ( ) : null} 0 {char ? ( {char} ) : null}

) } function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) { return (

) } export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } 4b:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","li","input-otp",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/input-otp","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":"input-otp"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@kobra","registryDependencies":[]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui/input-otp.tsx","content":"$4e","type":"registry:ui","target":"components/ui/input-otp.tsx"}],"className":"h-[70svh] min-h-80"}]]}]