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:T62ed,"use client"; import type { OTPFieldInput, OTPFieldRoot } from "@base-ui/react/otp-field"; import { OTPFieldPreview as OTPField } from "@base-ui/react/otp-field"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { createContext, Fragment, forwardRef, type ReactNode, useContext, useId, useMemo, } from "react"; import { cn } from "@/lib/utils"; const DEFAULT_OTP_LENGTH = 6; const MAX_OTP_LENGTH = 12; const controlCornerClassName = "rounded-[min(var(--radius-md),12px)] supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[14px]"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; const otpGroupClassName = "flex w-full max-w-full items-center justify-center gap-2 sm:gap-3"; const otpSlotSizeClassNames = { default: "size-11 shrink-0 text-lg tabular-nums sm:size-14 sm:text-xl", sm: "size-9 shrink-0 text-base tabular-nums sm:size-10 sm:text-lg", } as const; const otpSlotBaseClassName = "relative flex items-center justify-center overflow-hidden border-2 font-medium"; const springTransition = { type: "spring" as const, stiffness: 400, damping: 25, mass: 0.8, }; const charSpring = { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.8, }; const charMorphTransition = { ...charSpring, filter: { duration: 0.22, ease: [0.22, 1, 0.36, 1] as const }, opacity: { duration: 0.16, ease: "easeOut" as const }, }; const charMorphEnter = { filter: "blur(8px)", opacity: 0.55, scale: 0.82, y: 10, }; const charMorphActive = { filter: "blur(0px)", opacity: 1, scale: 1, y: 0, }; const charMorphExit = { filter: "blur(6px)", opacity: 0, scale: 0.88, y: -8, }; const INSTANT_TRANSITION = { duration: 0 } as const; type OTPSize = keyof typeof otpSlotSizeClassNames; type OTPConfig = { length: number; mask: boolean; prefersReducedMotion: boolean; showInvalid: boolean; size: OTPSize; slotPlaceholder?: string; }; const OTPLengthContext = createContext(null); const OTPConfigContext = createContext({ length: DEFAULT_OTP_LENGTH, mask: false, prefersReducedMotion: false, showInvalid: false, size: "default", }); function useOTPConfig() { return useContext(OTPConfigContext); } function useOTPLength() { const length = useContext(OTPLengthContext); if (process.env.NODE_ENV !== "production" && length === null) { throw new Error("OTP slot components must be rendered inside ."); } return length ?? DEFAULT_OTP_LENGTH; } function setRef(ref: React.Ref | undefined, value: T | null) { if (typeof ref === "function") { ref(value); return; } if (ref) { (ref as React.MutableRefObject).current = value; } } function resolveOTPLength(length?: number, maxLength?: number) { const raw = length ?? maxLength ?? DEFAULT_OTP_LENGTH; if (!Number.isFinite(raw)) { return DEFAULT_OTP_LENGTH; } const normalized = Math.floor(raw); if (normalized < 1) { return DEFAULT_OTP_LENGTH; } return Math.min(normalized, MAX_OTP_LENGTH); } function normalizeSeparators( separatorAfter: number | number[] | undefined, length: number ) { if (separatorAfter === undefined) { return new Set(); } const indices = Array.isArray(separatorAfter) ? separatorAfter : [separatorAfter]; const normalized = indices.filter( (index) => Number.isInteger(index) && index > 0 && index < length ); return new Set(normalized); } function resolveAriaInvalid( showInvalid: boolean, ariaInvalidProp?: boolean | "false" | "true" | "grammar" | "spelling" ) { if (showInvalid) { return true; } if (ariaInvalidProp === true) { return true; } return ariaInvalidProp; } function getOTPFieldMeta({ ariaDescribedByProp, ariaInvalidProp, description, errorMessage, generatedId, id, invalid, label, }: { ariaDescribedByProp?: string; ariaInvalidProp?: boolean | "false" | "true" | "grammar" | "spelling"; description?: ReactNode; errorMessage?: ReactNode; generatedId: string; id?: string; invalid: boolean; label?: ReactNode; }) { const otpId = id ?? generatedId; const descriptionId = description ? `${otpId}-description` : undefined; const errorId = errorMessage ? `${otpId}-error` : undefined; const showInvalid = invalid || Boolean(errorMessage) || ariaInvalidProp === true; const hasFieldChrome = Boolean(label || description || errorMessage); return { describedBy: [ariaDescribedByProp, descriptionId, errorId] .filter(Boolean) .join(" "), descriptionId, errorId, hasFieldChrome, otpId, showInvalid, }; } function OTPFieldWrapper({ children, description, descriptionClassName, descriptionId, errorId, errorMessage, errorMessageClassName, label, labelClassName, otpId, required, wrapperClassName, }: { children: ReactNode; description?: ReactNode; descriptionClassName?: string; descriptionId?: string; errorId?: string; errorMessage?: ReactNode; errorMessageClassName?: string; label?: ReactNode; labelClassName?: string; otpId: string; required: boolean; wrapperClassName?: string; }) { return (

{label ? ( {label} {required ? ( {" "} * ) : null} ) : null} {children} {description ? (

{description}

) : null} {errorMessage ? (

{errorMessage}

) : null}

); } type OTPProps = React.ComponentPropsWithoutRef & { containerClassName?: string; description?: ReactNode; descriptionClassName?: string; errorMessage?: ReactNode; errorMessageClassName?: string; invalid?: boolean; label?: ReactNode; labelClassName?: string; /** @deprecated Use `length` instead. */ maxLength?: number; size?: OTPSize; wrapperClassName?: string; }; const otpRootBaseClassName = "flex w-full max-w-full items-center justify-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 sm:gap-3"; function resolveRootClassName( className: OTPProps["className"], containerClassName?: string ) { const baseClassName = cn(otpRootBaseClassName, containerClassName); if (typeof className === "function") { return (state: OTPFieldRoot.State) => cn(baseClassName, className(state)); } return cn(baseClassName, className); } const OTP = forwardRef( ( { "aria-describedby": ariaDescribedByProp, "aria-invalid": ariaInvalidProp, children, className, containerClassName, description, descriptionClassName, errorMessage, errorMessageClassName, id, invalid = false, label, labelClassName, length, mask = false, maxLength, required = false, size = "default", wrapperClassName, ...props }, ref ) => { const generatedId = useId(); const prefersReducedMotion = useReducedMotion() ?? false; const resolvedLength = resolveOTPLength(length, maxLength); const fieldMeta = getOTPFieldMeta({ ariaDescribedByProp, ariaInvalidProp, description, errorMessage, generatedId, id, invalid, label, }); const config = useMemo( () => ({ length: resolvedLength, mask: Boolean(mask), prefersReducedMotion, showInvalid: fieldMeta.showInvalid, size, }), [fieldMeta.showInvalid, mask, prefersReducedMotion, resolvedLength, size] ); const root = (

{children}

); if (!fieldMeta.hasFieldChrome) { return root; } return ( {root} ); } ); OTP.displayName = "OTP"; const OTPGroup = forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div"> >(({ className, ...props }, ref) => (

)); OTPGroup.displayName = "OTPGroup"; type OTPSlotsProps = { className?: string; /** Hint shown in empty slots until the active slot is focused. */ placeholder?: string; /** * Inserts `OTPSeparator` before the slot at each zero-based index. * Pass a single index or an array for multiple groups. */ separatorAfter?: number | number[]; slotClassName?: string; }; function OTPSlots({ className, placeholder, separatorAfter, slotClassName, }: OTPSlotsProps) { const length = useOTPLength(); const separators = useMemo( () => normalizeSeparators(separatorAfter, length), [length, separatorAfter] ); const config = useOTPConfig(); const mergedConfig = useMemo( () => (placeholder ? { ...config, slotPlaceholder: placeholder } : config), [config, placeholder] ); return ( {Array.from({ length }, (_, index) => ( {separators.has(index) ? : null} ))} ); } OTPSlots.displayName = "OTPSlots"; type OTPSlotProps = React.ComponentPropsWithoutRef & { /** Ignored. Slot order is determined by render order with Base UI OTP Field. */ index?: number; }; type OTPSlotInputProps = React.ComponentPropsWithoutRef<"input"> & { ref?: React.Ref; }; type OTPSlotState = OTPFieldInput.State; function resolveSlotClassName( className: OTPSlotProps["className"], state: OTPSlotState ) { return typeof className === "function" ? className(state) : className; } function getSlotBorderColor({ isActive, showInvalid, slotInvalid, }: { isActive: boolean; showInvalid: boolean; slotInvalid: boolean; }) { if (showInvalid || slotInvalid) { return "var(--color-destructive)"; } if (isActive) { return "var(--color-primary)"; } return "var(--color-border)"; } function OTPSlotCharacter({ char, index, prefersReducedMotion, staticDisplay = false, }: { char: string; index: number; prefersReducedMotion: boolean; staticDisplay?: boolean; }) { if (prefersReducedMotion || staticDisplay) { return ( {char} ); } return ( {char} ); } function OTPSlotCaret({ prefersReducedMotion, size, }: { prefersReducedMotion: boolean; size: OTPSize; }) { const caretClassName = cn( "rounded-full bg-primary", size === "sm" ? "h-4 w-[2px]" : "h-5 w-[2px] sm:h-6" ); if (prefersReducedMotion) { return (

); } return ( ); } function OTPSlotPlaceholderHint({ hint, prefersReducedMotion, }: { hint: string; prefersReducedMotion: boolean; }) { if (prefersReducedMotion) { return ( {hint} ); } return ( {hint} ); } function getOTPSlotChar(state: OTPSlotState) { return state.value; } function getOTPSlotDisplayChar(char: string, mask: boolean, disabled: boolean) { if (disabled || !char) { return ""; } return mask ? "\u2022" : char; } function isOTPSlotActive(state: OTPSlotState, tabIndex: number | undefined) { return !(state.readOnly || state.disabled) && (tabIndex ?? -1) === 0; } function shouldShowOTPSlotPlaceholderHint({ char, isActive, placeholder, state, }: { char: string; isActive: boolean; placeholder?: string; state: OTPSlotState; }) { return ( Boolean(placeholder) && !char && !isActive && !state.disabled && !state.readOnly ); } function getOTPSlotSurfaceClassName({ className, resolvedInvalid, size, state, }: { className?: string; resolvedInvalid: boolean; size: OTPSize; state: OTPSlotState; }) { return cn( controlCornerClassName, otpSlotBaseClassName, otpSlotSizeClassNames[size], "bg-background text-foreground", resolvedInvalid && "ring-1 ring-destructive/20 dark:ring-destructive/40", state.disabled && "cursor-not-allowed bg-muted/20", state.readOnly && "cursor-default bg-muted/30", className ); } function OTPSlotSurfaceDecorations({ displayChar, placeholder, prefersReducedMotion, showCaret, showPlaceholderHint, showStaticValue, size, state, }: { displayChar: string; placeholder?: string; prefersReducedMotion: boolean; showCaret: boolean; showPlaceholderHint: boolean; showStaticValue: boolean; size: OTPSize; state: OTPSlotState; }) { return ( <> {displayChar ? ( ) : null} {showPlaceholderHint && placeholder ? ( ) : null} {showCaret ? ( ) : null} ); } function OTPSlotSurface({ className, inputClassName, inputRef, inputProps, placeholder, showInvalid, slotRef, state, tabIndex, }: { className?: string; inputClassName?: string; inputProps: Omit; inputRef: React.Ref | undefined; placeholder?: string; showInvalid: boolean; slotRef: React.Ref; state: OTPSlotState; tabIndex: number | undefined; }) { const { mask, prefersReducedMotion, size } = useOTPConfig(); const char = getOTPSlotChar(state); const isActive = isOTPSlotActive(state, tabIndex); const slotInvalid = state.valid === false; const resolvedInvalid = showInvalid || slotInvalid; const displayChar = getOTPSlotDisplayChar(char, mask, state.disabled); const showStaticValue = state.readOnly; const showCaret = isActive && !char && !state.disabled && !state.readOnly; const showPlaceholderHint = shouldShowOTPSlotPlaceholderHint({ char, isActive, placeholder, state, }); const borderColor = getSlotBorderColor({ isActive, showInvalid: resolvedInvalid, slotInvalid, }); const motionTransition = prefersReducedMotion ? INSTANT_TRANSITION : springTransition; return ( { setRef(inputRef, node); setRef(slotRef, node); }} tabIndex={state.disabled ? -1 : tabIndex} /> ); } const OTPSlot = forwardRef( ({ index: _index, className, placeholder, ...props }, ref) => { const { showInvalid, slotPlaceholder } = useOTPConfig(); const resolvedPlaceholder = placeholder ?? slotPlaceholder; if (process.env.NODE_ENV !== "production" && _index !== undefined) { console.warn( "[OTP] The `index` prop on is ignored. Slot order is determined by render order." ); } return ( { const { className: inputClassName, ref: inputRef, tabIndex, ...resolvedInputProps } = inputProps; return ( ); }} /> ); } ); OTPSlot.displayName = "OTPSlot"; const OTPSeparator = forwardRef< React.ElementRef<"div">, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( { const { className: separatorClassName, ref: separatorRef, ...resolvedSeparatorProps } = separatorProps; return (

{ setRef(separatorRef, node); setRef(ref, node); }} >

); }} /> )); OTPSeparator.displayName = "OTPSeparator"; export type { OTPProps, OTPSlotProps, OTPSlotsProps, OTPSize }; export { OTP, OTPGroup, OTPSeparator, OTPSlot, OTPSlots }; 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"input-otp.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]