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:T2f3b,import { cva } from "class-variance-authority"; import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react"; import { type BlurEvent, type FocusEvent, Pressable, type TextInput as RNTextInput, View, } from "react-native"; import Animated, { FadeIn, FadeOut, FlipInXDown, FlipOutXDown, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated"; import { cn } from "@/lib/utils"; import { Input } from "@/components/ui/input"; import { Text } from "@/components/ui/text"; // Constants const CARET_ANIMATION_DURATION = 500; const SLOT_VALUE_ENTER_DURATION = 250; const SLOT_VALUE_EXIT_DURATION = 100; export const REGEXP_ONLY_DIGITS = "^\\d+$"; export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$"; export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$"; const AnimatedText = Animated.createAnimatedComponent(Text); // Types type SlotData = { index: number; char: string | null; placeholderChar: string | null; isActive: boolean; isCaretVisible: boolean; }; type OTPInputContextValue = { value: string; maxLength: number; isFocused: boolean; disabled?: boolean; invalid?: boolean; secureTextEntry?: boolean; slots: SlotData[]; inputRef: React.RefObject; focus: () => void; onSlotPress: (index: number) => void; }; type OTPInputSlotContextValue = { slot: SlotData; isActive: boolean; isCaretVisible: boolean; }; export type OTPInputRef = { focus: () => void; blur: () => void; clear: () => void; setValue: (value: string) => void; }; export type OTPInputProps = { maxLength: number; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; onComplete?: (value: string) => void; disabled?: boolean; invalid?: boolean; pattern?: string; inputMode?: React.ComponentProps["inputMode"]; placeholder?: string; secureTextEntry?: boolean; onFocus?: (e: FocusEvent) => void; onBlur?: (e: BlurEvent) => void; className?: string; children?: React.ReactNode; ref?: React.RefObject; }; export type OTPInputGroupProps = React.ComponentProps; export type OTPInputSlotProps = React.ComponentProps & { index: number; children?: React.ReactNode; }; export type OTPInputSeparatorProps = React.ComponentProps; export type OTPInputSlotPlaceholderProps = React.ComponentProps & { children?: string; }; export type OTPInputSlotValueProps = React.ComponentProps & { children?: string; }; export type OTPInputSlotCaretProps = React.ComponentProps; // Utils const defaultPasteTransformer = (maxLength: number) => { return (pasted: string): string => { const otpRegex = new RegExp(`(?(null); const OTPInputSlotContext = createContext( null ); const useOTPInput = () => { const context = useContext(OTPInputContext); if (!context) { throw new Error("useOTPInput must be used within an OTPInput component"); } return context; }; const useOTPInputSlot = () => { const context = useContext(OTPInputSlotContext); if (!context) { throw new Error( "useOTPInputSlot must be used within an OTPInputSlot component" ); } return context; }; // Components export const OTPInput = ({ maxLength, value: valueProp, defaultValue, onValueChange, onComplete, disabled, invalid, pattern, inputMode = "numeric", placeholder, secureTextEntry, onFocus: onFocusProp, onBlur: onBlurProp, className, children, ref, }: OTPInputProps) => { const [internalValue, setInternalValue] = useState(defaultValue ?? ""); const [isFocused, setIsFocused] = useState(false); const inputRef = useRef(null); const isControlled = valueProp !== undefined; const value = isControlled ? valueProp : internalValue; const setValue = useCallback( (nextValue: string) => { if (!isControlled) { setInternalValue(nextValue); } onValueChange?.(nextValue); }, [isControlled, onValueChange] ); const regexp = useMemo(() => { if (!pattern) { return null; } return new RegExp(pattern); }, [pattern]); const pasteTransformFn = useMemo( () => defaultPasteTransformer(maxLength), [maxLength] ); const onChangeText = useCallback( (text: string) => { const isPaste = text.length > value.length + 1; const transformedText = isPaste ? pasteTransformFn(text) : text; const newValue = transformedText.slice(0, maxLength); if (newValue.length > 0 && regexp && !regexp.test(newValue)) { return; } setValue(newValue); if (newValue.length === maxLength) { onComplete?.(newValue); } }, [maxLength, onComplete, pasteTransformFn, regexp, setValue, value.length] ); const onFocus = useCallback( (e: FocusEvent) => { setIsFocused(true); onFocusProp?.(e); }, [onFocusProp] ); const onBlur = useCallback( (e: BlurEvent) => { setIsFocused(false); onBlurProp?.(e); }, [onBlurProp] ); const focus = useCallback(() => { inputRef.current?.focus(); }, []); const blur = useCallback(() => { inputRef.current?.blur(); }, []); const clear = useCallback(() => { inputRef.current?.clear(); setValue(""); }, [setValue]); useImperativeHandle( ref, () => ({ blur, clear, focus, setValue: onChangeText, }), [blur, clear, focus, onChangeText] ); const slots = useMemo(() => { return Array.from({ length: maxLength }, (_, slotIdx) => { const char = value[slotIdx] ?? null; const isActive = isFocused && slotIdx === value.length; const placeholderChar = isActive || char !== null ? null : (placeholder?.[slotIdx] ?? null); return { char, index: slotIdx, isActive, isCaretVisible: isActive && char === null, placeholderChar, }; }); }, [isFocused, maxLength, placeholder, value]); const onSlotPress = useCallback( (_index: number) => { focus(); }, [focus] ); const contextValue = useMemo( () => ({ disabled, focus, inputRef, invalid, isFocused, maxLength, onSlotPress, secureTextEntry, slots, value, }), [ disabled, focus, invalid, isFocused, maxLength, onSlotPress, secureTextEntry, slots, value, ] ); return ( {children} ); }; export const OTPInputGroup = ({ className, ...props }: OTPInputGroupProps) => { return ( ); }; export const OTPInputSlot = ({ index, children, className, disabled: disabledProp, ...props }: OTPInputSlotProps) => { const { slots, disabled, invalid, onSlotPress } = useOTPInput(); const slot = slots[index]; const isDisabled = disabledProp ?? disabled; const slotContextValue = useMemo(() => { if (!slot) { return null; } return { isActive: slot.isActive, isCaretVisible: slot.isCaretVisible, slot, }; }, [slot]); if (!(slot && slotContextValue)) { if (__DEV__) { throw new Error( `OTPInputSlot index ${index} is out of range. Must be between 0 and ${slots.length - 1}.` ); } return null; } return ( onSlotPress(index)} {...props} > {children ?? ( <> )} ); }; export const OTPInputSlotPlaceholder = ({ children, className, ...props }: OTPInputSlotPlaceholderProps) => { const { slot, isActive } = useOTPInputSlot(); const displayChar = children ?? slot.placeholderChar ?? ""; if (slot.char || isActive || !displayChar) { return null; } return ( {displayChar} ); }; export const OTPInputSlotValue = ({ children, className, ...props }: OTPInputSlotValueProps) => { const { slot } = useOTPInputSlot(); const { secureTextEntry } = useOTPInput(); const displayChar = children ?? (secureTextEntry && slot.char ? "•" : slot.char) ?? ""; if (!displayChar) { return null; } return ( {displayChar} ); }; export const OTPInputSlotCaret = ({ className, ...props }: OTPInputSlotCaretProps) => { const { isCaretVisible } = useOTPInputSlot(); const opacity = useSharedValue(1); useEffect(() => { opacity.value = withRepeat( withTiming(0, { duration: CARET_ANIMATION_DURATION }), -1, true ); }, [opacity]); const animatedStyle = useAnimatedStyle(() => { return { opacity: opacity.value, }; }); if (!isCaretVisible) { return null; } return ( ); }; export const OTPInputSeparator = ({ className, ...props }: OTPInputSeparatorProps) => { useOTPInput(); return ( ); }; // Styles const otpInputSlotVariants = cva( "relative h-12 w-11 items-center justify-center overflow-hidden rounded-lg border bg-background", { defaultVariants: { disabled: false, invalid: false, isActive: false, }, variants: { disabled: { false: "", true: "pointer-events-none opacity-50", }, invalid: { false: "", true: "border-destructive", }, isActive: { false: "border-input", true: "border-2 border-ring", }, }, } ); 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","react-native-reanimated",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-native-reanimated","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":"react-native-reanimated"}]]}]}]]}],["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/input","@tetra-ui/text"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/otp-input.tsx","content":"$52","type":"registry:ui","target":"@ui/otp-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]