jfs-components 0.0.43 → 0.0.45

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import React from 'react';
-import { View, Text } from 'react-native';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { View, Text, Pressable, Animated } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 
 // Map of common ISO 4217 currency codes to display symbols
@@ -42,34 +42,20 @@ const CURRENCY_SYMBOLS = {
 /**
  * MoneyValue component that mirrors the Figma MoneyValue design.
  *
- * The styling is fully resolved from Figma design tokens using `getVariableByName`
- * and an optional `modes` configuration, consistent with other components in this library.
+ * The styling is fully resolved from Figma design tokens using `getVariableByName`.
+ * Supports separate typography scaling for currency and value.
  *
- * Currency can be provided either as a symbol (e.g. "₹") or as an ISO code
- * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
- * appropriate symbol, with special care to support INR and other major currencies.
- *
- * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
- * The `negative` prop can be used to explicitly override this behavior.
- *
- * @component
- * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
- * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
- * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
- * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
- *                                   Example: {"MoneyValue / Theme": "Default"}
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {Object} [props.valueStyle] - Optional value text style overrides.
- * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
- * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * To make this component editable without coupling it to a Numpad component,
+ * use the `onPress` prop and manage the data state in the parent layer. When
+ * the `focused` prop is provided to this component, it will display a natural
+ * blinking text cursor.
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
   negative,
+  focused = false,
+  hidden = false,
   modes = {},
   style,
   valueStyle,
@@ -77,13 +63,14 @@ function MoneyValue({
   negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
+  onPress,
   ...rest
 }) {
   // Auto-detect negative from value and compute display value
   const {
     isNegative,
     displayValue
-  } = React.useMemo(() => {
+  } = useMemo(() => {
     const stringValue = String(value);
     const trimmed = stringValue.trim();
     const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
@@ -94,62 +81,107 @@ function MoneyValue({
     // Use explicit negative prop if provided, otherwise use auto-detected
     const showNegative = negative !== undefined ? negative : valueIsNegative;
     return {
-      isNegative: showNegative,
-      displayValue: absoluteValue
+      isNegative: hidden ? false : showNegative,
+      displayValue: hidden ? '•••' : absoluteValue
     };
-  }, [value, negative]);
+  }, [value, negative, hidden]);
 
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a';
-  const fontSize = getVariableByName('moneyValue/supportText/fontSize', modes) || 14;
-  const lineHeight = getVariableByName('moneyValue/supportText/lineHeight', modes) || 18;
-  const fontWeightValue = getVariableByName('moneyValue/supportText/fontWeight', modes) || 500;
+  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes) || 14;
+  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes) || 18;
+  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes) || 14;
+  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes) || 18;
+  const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes) || 500;
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const fontFamily = getVariableByName('moneyValue/supportText/fontFamily', modes) || 'System';
+  const fontFamily = getVariableByName('moneyValue/fontFamily', modes) || 'System';
   const gap = getVariableByName('moneyValue/gap', modes) || 4;
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes
-  const resolvedCurrency = React.useMemo(() => {
+  const resolvedCurrency = useMemo(() => {
     if (!currency) return '';
     const upper = currency.toUpperCase ? currency.toUpperCase() : currency;
     return upper in CURRENCY_SYMBOLS ? CURRENCY_SYMBOLS[upper] : currency;
   }, [currency]);
-  const baseTextStyle = {
+  const currencyTextStyle = {
+    color: textColor,
+    fontSize: currencyFontSize,
+    lineHeight: currencyLineHeight,
+    fontWeight: fontWeight,
+    fontFamily: fontFamily
+  };
+  const valueTextStyle = {
     color: textColor,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    fontFamily
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    fontWeight: fontWeight,
+    fontFamily: fontFamily
   };
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap
+    gap: gap
   };
 
-  // Generate default accessibility label from value and currency
-  const defaultAccessibilityLabel = accessibilityLabel || `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`;
-  return /*#__PURE__*/_jsxs(View, {
+  // Blinking cursor animation
+  const cursorOpacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (focused) {
+      const animation = Animated.loop(Animated.sequence([Animated.timing(cursorOpacity, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true
+      }), Animated.timing(cursorOpacity, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true
+      })]));
+      animation.start();
+      return () => {
+        animation.stop();
+        cursorOpacity.setValue(0);
+      };
+    } else {
+      cursorOpacity.setValue(0);
+    }
+  }, [focused, cursorOpacity]);
+  return /*#__PURE__*/_jsxs(Pressable, {
     style: [containerStyle, style],
     accessibilityRole: "text",
     accessibilityLabel: undefined,
     accessibilityHint: accessibilityHint,
+    onPress: onPress,
+    disabled: !onPress,
     ...rest,
     children: [isNegative && /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, negativeSignStyle],
+      style: [currencyTextStyle, negativeSignStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: "-"
     }), /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, currencyStyle],
+      style: [currencyTextStyle, currencyStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: resolvedCurrency
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [baseTextStyle, valueStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: displayValue
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [valueTextStyle, valueStyle],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: displayValue
+      }), focused && /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          opacity: cursorOpacity,
+          width: 2,
+          height: valueFontSize * 1.1,
+          backgroundColor: textColor,
+          marginLeft: 2
+        }
+      })]
     })]
   });
 }

package/lib/module/components/NoteInput/NoteInput.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import React, { useState, useRef } from 'react';
+import { View, TextInput as RNTextInput, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * NoteInput component representing an interactive "Add note" badge style field.
+ * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
+ */
+export default function NoteInput({
+  value = '',
+  placeholder = 'Add note',
+  onChangeText,
+  modes = {},
+  style,
+  textStyle,
+  state: explicitState,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [internalFocused, setInternalFocused] = useState(false);
+  const inputRef = useRef(null);
+
+  // Resolve tokens from Figma Design
+  const foreground = getVariableByName('noteInput/foreground', modes) || '#0d0d0f';
+  const fontSize = getVariableByName('noteInput/fontSize', modes) || 14;
+  const fontFamily = getVariableByName('noteInput/fontFamily', modes) || 'JioType Var';
+  const lineHeight = getVariableByName('noteInput/lineHeight', modes) || 16;
+  const fontWeightRaw = getVariableByName('noteInput/fontWeight', modes) || 700;
+  const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
+  const gap = getVariableByName('noteInput/gap', modes) || 0; // 4 in some files, 0 in context
+  const paddingHorizontal = getVariableByName('noteInput/padding/horizontal', modes) || 17;
+  const paddingVertical = getVariableByName('noteInput/padding/vertical', modes) || 9;
+  const radius = getVariableByName('noteInput/radius', modes) || 999;
+  const borderSize = getVariableByName('noteInput/border/size', modes) || 1;
+  const background = getVariableByName('noteInput/background', modes) || '#ebebed';
+  const borderColor = getVariableByName('noteInput/border/color', modes) || 'rgba(255,255,255,0)';
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    borderRadius: radius,
+    backgroundColor: background,
+    borderWidth: borderSize,
+    borderColor: borderColor,
+    gap: gap,
+    // Add specific width when editing if requested by Figma design logic, though flex fits content generically
+    alignSelf: 'flex-start'
+  };
+  const baseTextStyle = {
+    color: foreground,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    padding: 0,
+    margin: 0,
+    minHeight: lineHeight
+  };
+  const handleFocus = e => {
+    setInternalFocused(true);
+    if (onFocus) onFocus(e);
+  };
+  const handleBlur = e => {
+    setInternalFocused(false);
+    if (onBlur) onBlur(e);
+  };
+  const handlePress = () => {
+    inputRef.current?.focus();
+  };
+
+  // Blinking cursor setup for custom UI representation if we were drawing it natively.
+  // We use RNTextInput's native cursor, but we can style it or ensure it's visible.
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    style: [containerStyle, style],
+    onPress: handlePress,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'relative',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [baseTextStyle, textStyle, {
+          opacity: 0
+        }],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: internalFocused ? value || ' ' : value || placeholder
+      }), /*#__PURE__*/_jsx(RNTextInput, {
+        ref: inputRef,
+        value: value,
+        onChangeText: onChangeText,
+        placeholder: internalFocused ? '' : placeholder,
+        placeholderTextColor: foreground,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        selectionColor: foreground,
+        style: [baseTextStyle, {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          outlineStyle: 'none'
+        }, textStyle],
+        ...rest
+      })]
+    })
+  });
+}

package/lib/module/components/NoteInput/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { default } from './NoteInput';

package/lib/module/components/Numpad/Numpad.js

@@ -0,0 +1,103 @@
+"use strict";
+
+import React, { useMemo, useCallback } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { IconDeletebackspace } from '../../icons/components/IconDeletebackspace';
+import { jsx as _jsx } from "react/jsx-runtime";
+function shuffleArray(arr) {
+  const shuffled = [...arr];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
+
+/**
+ * Secure numpad component for the JFS finance system.
+ *
+ * Renders a 3×4 grid of digit keys (0-9), an optional decimal key, and a
+ * backspace key. Digit positions are shuffled by default to guard against
+ * keylogging and shoulder-surfing attacks on mobile devices.
+ *
+ * @component
+ * @param {NumpadProps} props
+ */
+function Numpad({
+  modes = {},
+  onKeyPress,
+  showDecimal = true,
+  shuffle = true,
+  style,
+  keyStyle,
+  keyTextStyle
+}) {
+  const foreground = getVariableByName('numpad/foreground', modes) ?? '#141414';
+  const lineHeight = getVariableByName('numpad/lineHeight', modes) ?? 32;
+  const fontFamily = getVariableByName('numpad/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = getVariableByName('numpad/fontSize', modes) ?? 32;
+  const rowGap = getVariableByName('numpad/gridRowGap/vertical', modes) ?? 12;
+  const columnGap = getVariableByName('numpad/gridColumnGap/horizontal', modes) ?? 12;
+  const digits = useMemo(() => {
+    const base = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+    return shuffle ? shuffleArray(base) : base;
+  }, [shuffle]);
+  const rows = useMemo(() => [digits.slice(0, 3), digits.slice(3, 6), digits.slice(6, 9), [showDecimal ? '.' : null, digits[9], 'backspace']], [digits, showDecimal]);
+  const handlePress = useCallback(key => {
+    onKeyPress?.(key);
+  }, [onKeyPress]);
+  const textStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    textAlign: 'center'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      gap: rowGap
+    }, style],
+    accessibilityRole: "none",
+    children: rows.map((row, rowIndex) => /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        gap: columnGap
+      },
+      children: row.map((key, colIndex) => {
+        if (key === null) {
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            }
+          }, `empty-${colIndex}`);
+        }
+        const isBackspace = key === 'backspace';
+        return /*#__PURE__*/_jsx(Pressable, {
+          style: ({
+            pressed
+          }) => [{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: 46
+          }, pressed && {
+            opacity: 0.4
+          }, keyStyle],
+          onPress: () => handlePress(key),
+          accessibilityRole: "button",
+          accessibilityLabel: isBackspace ? 'Backspace' : key,
+          children: isBackspace ? /*#__PURE__*/_jsx(IconDeletebackspace, {
+            width: fontSize,
+            height: fontSize,
+            fill: foreground
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [textStyle, keyTextStyle],
+            children: key
+          })
+        }, `${key}-${colIndex}`);
+      })
+    }, rowIndex))
+  });
+}
+export default Numpad;

package/lib/module/components/OTP/OTP.js

@@ -0,0 +1,236 @@
+"use strict";
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { View, Text, TextInput as RNTextInput, Pressable, Animated } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import SupportText from '../SupportText/SupportText';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DIGITS_ONLY = /^\d*$/;
+function OTP({
+  length = 6,
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  onValueChange,
+  onComplete,
+  isDisabled = false,
+  isInvalid = false,
+  allowedPattern = DIGITS_ONLY,
+  autoFocus = false,
+  modes: propModes = {},
+  style,
+  supportText,
+  supportTextStatus
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const caretAnim = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (!isFocused) return;
+    const blink = Animated.loop(Animated.sequence([Animated.timing(caretAnim, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: true
+    }), Animated.timing(caretAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true
+    })]));
+    blink.start();
+    return () => blink.stop();
+  }, [isFocused, caretAnim]);
+  const prevCompleteRef = useRef(false);
+  const setValue = useCallback(next => {
+    const clamped = next.slice(0, length);
+    if (!isControlled) setInternalValue(clamped);
+    onChange?.(clamped);
+    onValueChange?.(clamped);
+    if (clamped.length === length && !prevCompleteRef.current) {
+      prevCompleteRef.current = true;
+      onComplete?.(clamped);
+    }
+    if (clamped.length < length) {
+      prevCompleteRef.current = false;
+    }
+  }, [length, isControlled, onChange, onValueChange, onComplete]);
+  const handleChangeText = useCallback(text => {
+    if (isDisabled) return;
+    if (!allowedPattern.test(text)) return;
+    setValue(text);
+  }, [isDisabled, allowedPattern, setValue]);
+  const handlePress = useCallback(() => {
+    if (isDisabled) return;
+    inputRef.current?.focus();
+  }, [isDisabled]);
+
+  // --- Token resolution (state-independent tokens resolved once) ---
+  const otpGap = Number(getVariableByName('otp/gap', modes)) || 36;
+  const otpPaddingH = Number(getVariableByName('otp/padding/horizontal', modes)) || 8;
+  const otpPaddingV = Number(getVariableByName('otp/padding/vertical', modes)) || 8;
+  const slotWidth = Number(getVariableByName('pinSlot/width', modes)) || 48;
+  const slotGap = Number(getVariableByName('pinSlot/gap', modes)) || 8;
+  // digit/color has no state variants in Figma — resolved once from the Output collection
+  const digitColor = getVariableByName('pinSlot/digit/color', modes) || '#000000';
+  const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24;
+  const digitFontFamily = getVariableByName('pinSlot/digit/fontFamily', modes) || 'JioType Var';
+  const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29;
+  const digitFontWeight = getVariableByName('pinSlot/digit/fontWeight', modes) || '500';
+  const underlineHeight = Number(getVariableByName('pinSlot/underline/height', modes)) || 2;
+  const underlineRadius = Number(getVariableByName('pinSlot/underline/radius', modes)) || 1;
+
+  // --- State-driven slot modes ---
+  // Collection name in Figma is "Input/PINSlot  States" (double space before States).
+  // Only PinSlot/underline/color (capital P/S) lives in this collection with Idle/Active/Error modes.
+  // isInvalid takes priority over active focus; the component maps semantic state → token mode
+  // internally so consumers never need to know the collection key name.
+  const getSlotModes = isActiveSlot => {
+    if (isInvalid) return {
+      ...modes,
+      'Input/PINSlot  States': 'Error'
+    };
+    if (isActiveSlot && isFocused) return {
+      ...modes,
+      'Input/PINSlot  States': 'Active'
+    };
+    return {
+      ...modes,
+      'Input/PINSlot  States': 'Idle'
+    };
+  };
+
+  // --- Styles ---
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: otpGap,
+    paddingHorizontal: otpPaddingH,
+    paddingVertical: otpPaddingV
+  };
+  const slotWrapStyle = {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'flex-start',
+    alignSelf: 'stretch'
+  };
+  const renderSlot = index => {
+    const char = currentValue[index];
+    const isActiveSlot = index === currentValue.length && currentValue.length < length;
+    const isFilled = char !== undefined;
+
+    // Underline color is the only state-sensitive token (lives in "Input/PINSlot  States" collection).
+    // Note: token name is "PinSlot/underline/color" (capital P/S) — different from the static
+    // "pinSlot/underline/color" in the Output collection.
+    const slotModes = getSlotModes(isActiveSlot);
+    const underlineColor = getVariableByName('PinSlot/underline/color', slotModes) || '#303338';
+    const slotStyle = {
+      width: slotWidth,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: slotGap
+    };
+    const digitStyle = {
+      fontFamily: digitFontFamily,
+      fontWeight: digitFontWeight,
+      fontSize: digitFontSize,
+      lineHeight: digitLineHeight,
+      color: digitColor,
+      textAlign: 'center',
+      minWidth: '100%'
+    };
+    const underlineStyle = {
+      width: slotWidth,
+      height: underlineHeight,
+      borderRadius: underlineRadius,
+      backgroundColor: underlineColor
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: slotStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          minHeight: digitLineHeight,
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%'
+        },
+        children: isFilled ? /*#__PURE__*/_jsx(Text, {
+          style: digitStyle,
+          children: char
+        }) : isActiveSlot && isFocused ? /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            width: 2,
+            height: digitFontSize,
+            backgroundColor: digitColor,
+            opacity: caretAnim
+          }
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: [digitStyle, {
+            color: 'transparent'
+          }],
+          children: '\u00A0'
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: underlineStyle
+      })]
+    }, index);
+  };
+  const renderSupportText = () => {
+    if (!supportText) return null;
+    if (typeof supportText === 'string') {
+      return /*#__PURE__*/_jsx(SupportText, {
+        label: supportText,
+        status: supportTextStatus ?? (isInvalid ? 'Error' : 'Neutral'),
+        modes: modes
+      });
+    }
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: cloneChildrenWithModes(React.Children.toArray(supportText), modes)
+    });
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: [containerStyle, isDisabled && {
+      opacity: 0.4
+    }, style],
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "none",
+    children: [/*#__PURE__*/_jsx(RNTextInput, {
+      ref: inputRef,
+      value: currentValue,
+      onChangeText: handleChangeText,
+      maxLength: length,
+      keyboardType: "number-pad",
+      autoFocus: autoFocus,
+      editable: !isDisabled,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      caretHidden: true,
+      style: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        opacity: 0
+      },
+      accessibilityLabel: `OTP input, ${length} digits`,
+      accessibilityHint: "Enter your verification code"
+    }), /*#__PURE__*/_jsx(View, {
+      style: slotWrapStyle,
+      children: Array.from({
+        length
+      }, (_, i) => renderSlot(i))
+    }), renderSupportText()]
+  });
+}
+export default OTP;