@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -1,448 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OTPInput = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _FieldBase = require("../FieldBase/FieldBase.js");
-var _jsxRuntime = require("react/jsx-runtime");
-const sizeMap = {
-  sm: {
-    cell: 36,
-    fontSize: 16,
-    borderRadius: 8,
-    gap: 8
-  },
-  md: {
-    cell: 48,
-    fontSize: 20,
-    borderRadius: 10,
-    gap: 10
-  },
-  lg: {
-    cell: 56,
-    fontSize: 24,
-    borderRadius: 12,
-    gap: 12
-  }
-};
-const sanitizeChar = (input, kind) => {
-  if (!input) {
-    return '';
-  }
-  if (kind === 'number-pad') {
-    return input.replace(/\D/g, '');
-  }
-  return input;
-};
-const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    onComplete,
-    length = 6,
-    keyboardType = 'number-pad',
-    autoFocus = false,
-    disabled = false,
-    error,
-    size = 'md',
-    secure = false,
-    haptic,
-    accessibilityLabel,
-    style,
-    cellStyle,
-    textStyle,
-    testID
-  } = props;
-  const [current, setCurrent] = (0, _index.useControllableState)({
-    value,
-    defaultValue: defaultValue ?? '',
-    onChange
-  });
-  const theme = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.otpInput?.[size] ?? {})
-  };
-  const inputsRef = (0, _react.useRef)([]);
-  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
-  const previousErrorRef = (0, _react.useRef)(null);
-  const shake = (0, _react.useRef)((0, _index2.createAnimatedValue)(0)).current;
-  const underlinesMapRef = (0, _react.useRef)(new Map());
-  const underlines = (0, _react.useMemo)(() => {
-    const map = underlinesMapRef.current;
-    const out = [];
-    for (let i = 0; i < length; i += 1) {
-      let v = map.get(i);
-      if (!v) {
-        v = new _reactNative.Animated.Value(0);
-        map.set(i, v);
-      }
-      out.push(v);
-    }
-    // Trim stale entries beyond current length.
-    for (const key of Array.from(map.keys())) {
-      if (key >= length) {
-        map.delete(key);
-      }
-    }
-    return out;
-  }, [length]);
-  const previousFocusedIndexRef = (0, _react.useRef)(-1);
-  const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
-  const reduceMotion = (0, _index.useReducedMotion)();
-  const hasError = Boolean(error);
-  const errorMessage = typeof error === 'string' ? error : undefined;
-
-  // Shake on transition from no-error -> error. Skip on first mount even if
-  // error is initially true — there's no transition to animate.
-  (0, _react.useEffect)(() => {
-    const isFirstRun = previousErrorRef.current === null;
-    let anim;
-    if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (haptic !== false) {
-        (0, _index3.triggerHaptic)('notificationError');
-      }
-      if (shakeOnError && !reduceMotion) {
-        (0, _index2.setNativeValue)(shake, 0);
-        anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: _reactNative.Easing.linear,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shake, {
-          toValue: -1,
-          duration: theme.motion.duration.instant,
-          easing: _reactNative.Easing.linear,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: _reactNative.Easing.linear,
-          useNativeDriver: true
-        }), _reactNative.Animated.timing(shake, {
-          toValue: 0,
-          duration: theme.motion.duration.instant,
-          easing: _reactNative.Easing.linear,
-          useNativeDriver: true
-        })]);
-        anim.start();
-      }
-    }
-    previousErrorRef.current = hasError;
-    return () => anim?.stop();
-  }, [hasError, shake, shakeOnError, haptic, reduceMotion, theme.motion.duration.instant]);
-
-  // Animate underline opacity for the focused cell. Skip on first mount
-  // (no prior focus state) — values are already at 0 and there's nothing to animate.
-  (0, _react.useEffect)(() => {
-    const previous = previousFocusedIndexRef.current;
-    previousFocusedIndexRef.current = focusedIndex;
-    if (previous === focusedIndex) {
-      return;
-    }
-    // Equivalent-mutant note: this branch is unreachable, so removing it
-    // cannot change behaviour. Reaching here already proves
-    // `previous !== focusedIndex` (the check above returned otherwise), so
-    // `previous === -1 && focusedIndex === -1` — which requires them equal —
-    // can never be true.
-    if (previous === -1 && focusedIndex === -1) {
-      return;
-    }
-    const anims = [];
-    underlines.forEach((anim, idx) => {
-      const target = idx === focusedIndex ? 1 : 0;
-      // Only animate the cells whose target changed.
-      if (idx !== focusedIndex && idx !== previous) {
-        return;
-      }
-      const animation = _reactNative.Animated.timing(anim, {
-        toValue: target,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
-      });
-      animation.start();
-      anims.push(animation);
-    });
-    return () => anims.forEach(a => a.stop());
-  }, [focusedIndex, underlines, theme]);
-  const focusCell = (0, _react.useCallback)(index => {
-    const target = inputsRef.current[index];
-    if (target) {
-      target.focus();
-    }
-  }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    focus: () => focusCell(0),
-    blur: () => {
-      const current = inputsRef.current[focusedIndex >= 0 ? focusedIndex : 0];
-      current?.blur();
-    },
-    clear: () => {
-      setCurrent('');
-      focusCell(0);
-    }
-  }), [focusCell, focusedIndex, setCurrent]);
-  (0, _react.useEffect)(() => {
-    if (autoFocus && !disabled) {
-      // Defer one frame so the inputs are mounted.
-      const timer = setTimeout(() => focusCell(0), 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [autoFocus, disabled, focusCell]);
-  const cells = (0, _react.useMemo)(() => {
-    const arr = new Array(length).fill('');
-    for (let i = 0; i < Math.min(current.length, length); i += 1) {
-      arr[i] = current[i] ?? '';
-    }
-    return arr;
-  }, [current, length]);
-  const updateValue = (0, _react.useCallback)(next => {
-    const trimmed = next.slice(0, length);
-    if (trimmed === current) {
-      return;
-    }
-    setCurrent(trimmed);
-    if (trimmed.length === length && onComplete) {
-      onComplete(trimmed);
-    }
-  }, [length, setCurrent, onComplete, current]);
-  const handleChangeText = (0, _react.useCallback)((index, raw) => {
-    // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
-    const stripped = raw.replace(/\u200B/g, '');
-    const sanitized = sanitizeChar(stripped, keyboardType);
-    if (!sanitized) {
-      // Cell was cleared (delete / cut). Clear this cell and step focus back.
-      const chars = cells.slice();
-      const wasFilled = (chars[index] ?? '').length > 0;
-      chars[index] = '';
-      updateValue(chars.join('').slice(0, length));
-      if (!wasFilled && index > 0) {
-        // Empty cell + backspace → also clear and focus the previous cell.
-        const prev = cells.slice();
-        prev[index - 1] = '';
-        updateValue(prev.join(''));
-        focusCell(index - 1);
-      }
-      return;
-    }
-
-    // Fill cells from current index onward (handles paste of multi-char text).
-    // For single-character typing, this overwrites the current cell and advances.
-    const chars = cells.slice();
-    let writeIndex = index;
-    for (let i = 0; i < sanitized.length && writeIndex < length; i += 1) {
-      chars[writeIndex] = sanitized[i] ?? '';
-      writeIndex += 1;
-    }
-    const next = chars.join('').slice(0, length);
-    const previousLength = current.length;
-    updateValue(next);
-    if (next.length !== previousLength) {
-      const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-      if (h) {
-        (0, _index3.triggerHaptic)(h);
-      }
-    }
-
-    // Move focus to the next empty cell or last cell.
-    const nextFocus = Math.min(writeIndex, length - 1);
-    if (writeIndex >= length) {
-      inputsRef.current[length - 1]?.blur();
-    } else {
-      focusCell(nextFocus);
-    }
-  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
-  const handleKeyPress = (0, _react.useCallback)((index, e) => {
-    const key = e.nativeEvent.key;
-    if (key !== 'Backspace') {
-      return;
-    }
-    // Backspace on a non-empty cell — clear it. Backspace on an empty cell —
-    // step back and clear the previous cell. handleChangeText also covers the
-    // empty-cell case via the ZWSP placeholder, so this branch only matters
-    // when the platform fires onKeyPress without firing onChangeText.
-    const current = cells[index] ?? '';
-    if (current.length === 0) {
-      if (index > 0) {
-        const chars = cells.slice();
-        chars[index - 1] = '';
-        updateValue(chars.join(''));
-        focusCell(index - 1);
-      }
-    } else {
-      const chars = cells.slice();
-      chars[index] = '';
-      updateValue(chars.join(''));
-    }
-  }, [cells, focusCell, updateValue]);
-  const handleFocus = (0, _react.useCallback)(index => {
-    setFocusedIndex(index);
-  }, []);
-  const handleBlur = (0, _react.useCallback)(() => {
-    setFocusedIndex(-1);
-  }, []);
-  const handleContainerPress = (0, _react.useCallback)(() => {
-    if (disabled) {
-      return;
-    }
-    // Focus the first empty cell, else the last cell.
-    const firstEmpty = cells.findIndex(c => c === '');
-    focusCell(firstEmpty === -1 ? length - 1 : firstEmpty);
-  }, [cells, disabled, focusCell, length]);
-  const accessibleLabel = accessibilityLabel ?? `Enter ${length}-digit code`;
-  const translateX = shake.interpolate({
-    inputRange: [-1, 1],
-    outputRange: [-6, 6]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: style,
-    accessible: true,
-    accessibilityRole: "none",
-    accessibilityLabel: accessibleLabel,
-    accessibilityValue: {
-      text: value
-    },
-    accessibilityState: {
-      disabled
-    },
-    testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: handleContainerPress,
-      disabled: disabled,
-      accessible: false,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: [styles.row, {
-          columnGap: sizeStyles.gap,
-          transform: [{
-            translateX
-          }]
-        }],
-        children: cells.map((char, index) => {
-          const isFocused = focusedIndex === index;
-          const isFilled = char.length > 0;
-          const underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
-          const underlineOpacity = underlines[index];
-          if (!underlineOpacity) {
-            return null;
-          }
-          const display = secure && isFilled ? '●' : char;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.cellWrapper,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FieldBase.FieldBase, {
-              size: size,
-              width: sizeStyles.cell,
-              height: sizeStyles.cell,
-              borderRadius: sizeStyles.borderRadius,
-              borderWidth: 1.5,
-              focused: isFocused,
-              error: hasError,
-              filled: isFilled,
-              disabled: disabled,
-              paddingHorizontal: 0,
-              paddingVertical: 0,
-              gap: 0,
-              style: cellStyle,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-                ref: node => {
-                  inputsRef.current[index] = node;
-                }
-                // Always render at least the ZWSP placeholder so iOS keeps
-                // firing onChangeText/onKeyPress for Backspace on empty cells.
-                ,
-                value: (secure && isFilled ? '' : char) || '\u200B',
-                onChangeText: t => handleChangeText(index, t),
-                onKeyPress: e => handleKeyPress(index, e),
-                onFocus: () => handleFocus(index),
-                onBlur: handleBlur,
-                keyboardType: keyboardType,
-                editable: !disabled,
-                selectTextOnFocus: true,
-                caretHidden: isFilled
-                // Only the first cell accepts paste-like multi-char input
-                // (e.g., when SMS autofill or clipboard delivers the full code);
-                // every other cell is single-char so typing always overwrites.
-                ,
-                maxLength: index === 0 ? length : 2,
-                textContentType: index === 0 ? 'oneTimeCode' : 'none',
-                autoComplete: index === 0 ? 'sms-otp' : 'off',
-                importantForAutofill: index === 0 ? 'yes' : 'no',
-                style: [styles.input, {
-                  fontSize: sizeStyles.fontSize,
-                  color: theme.colors.text.primary,
-                  ...(0, _index2.fontFor)(theme, 'semibold')
-                }, textStyle]
-              }), secure && isFilled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                pointerEvents: "none",
-                style: styles.maskOverlay,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [{
-                    fontSize: sizeStyles.fontSize,
-                    color: theme.colors.text.primary,
-                    ...(0, _index2.fontFor)(theme, 'semibold')
-                  }, textStyle],
-                  children: display
-                })
-              }) : null]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-              style: [styles.underline, {
-                backgroundColor: underlineColor,
-                opacity: underlineOpacity
-              }]
-            })]
-          }, `otp-cell-${index}`);
-        })
-      })
-    }), errorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.errorText, {
-        color: theme.colors.error,
-        fontSize: theme.typography.fontSize.sm
-      }],
-      accessibilityLiveRegion: "polite",
-      children: errorMessage
-    }) : null]
-  });
-});
-OTPInput.displayName = 'OTPInput';
-const buildStyles = _theme => _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  cellWrapper: {
-    alignItems: 'center'
-  },
-  input: {
-    width: '100%',
-    height: '100%',
-    textAlign: 'center',
-    padding: 0
-  },
-  maskOverlay: {
-    ..._reactNative.StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  underline: {
-    marginTop: 4,
-    height: 2,
-    width: '60%',
-    borderRadius: 1,
-    ..._corners.smoothCorners
-  },
-  errorText: {
-    marginTop: 6
-  }
-});
-var _default = exports.default = OTPInput;
-//# sourceMappingURL=OTPInput.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OTPInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_jsxRuntime=require("react/jsx-runtime");const sizeMap={sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=exports.OTPInput=(0,_react.forwardRef)((e,t)=>{const{value:r,defaultValue:i,onChange:n,onComplete:a,length:s=6,keyboardType:o="number-pad",autoFocus:l=!1,autoFocusDelay:c=0,disabled:u=!1,error:d,size:_="md",secure:p=!1,haptic:m,accessibilityLabel:f,style:g,cellStyle:x,textStyle:h,testID:v}=e,[b,y]=(0,_index.useControllableState)({value:r,defaultValue:i??"",onChange:n}),j=(0,_index2.useTheme)(),N=(0,_react.useMemo)(()=>buildStyles(j),[j]),R={...sizeMap[_],...j.components.otpInput?.[_]??{}},T=(0,_react.useRef)([]),[C,S]=(0,_react.useState)(-1),k=(0,_react.useRef)(null),z=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,V=(0,_react.useRef)(new Map),I=(0,_react.useMemo)(()=>{const e=V.current,t=[];for(let r=0;r<s;r+=1){let i=e.get(r);i||(i=new _reactNative.Animated.Value(0),e.set(r,i)),t.push(i)}for(const t of Array.from(e.keys()))t>=s&&e.delete(t);return t},[s]),w=(0,_react.useRef)(-1),E=j.components.otpInput?.shakeOnError??!1,A=(0,_index.useReducedMotion)(),F=Boolean(d),O="string"==typeof d?d:void 0;(0,_react.useEffect)(()=>{let e;return null===k.current||!F||k.current||(!1!==m&&(0,_index3.triggerHaptic)("notificationError"),E&&!A&&((0,_index2.setNativeValue)(z,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(z,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(z,{toValue:-1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(z,{toValue:1,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0}),_reactNative.Animated.timing(z,{toValue:0,duration:j.motion.duration.instant,easing:_reactNative.Easing.linear,useNativeDriver:!0})]),e.start())),k.current=F,()=>e?.stop()},[F,z,E,m,A,j.motion.duration.instant]),(0,_react.useEffect)(()=>{const e=w.current;if(w.current=C,e===C)return;if(-1===e&&-1===C)return;const t=[];return I.forEach((r,i)=>{const n=i===C?1:0;if(i!==C&&i!==e)return;const a=_reactNative.Animated.timing(r,{toValue:n,duration:j.motion.duration.fast,easing:_reactNative.Easing.bezier(...j.motion.easing.standard),useNativeDriver:!0});a.start(),t.push(a)}),()=>t.forEach(e=>e.stop())},[C,I,j]);const D=(0,_react.useCallback)(e=>{const t=T.current[e];t&&t.focus()},[]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>D(0),blur:()=>{const e=T.current[C>=0?C:0];e?.blur()},clear:()=>{y(""),D(0)}}),[D,C,y]),(0,_react.useEffect)(()=>{if(l&&!u){const e=setTimeout(()=>D(0),c);return()=>clearTimeout(e)}},[l,c,u,D]);const M=(0,_react.useMemo)(()=>{const e=new Array(s).fill("");for(let t=0;t<Math.min(b.length,s);t+=1)e[t]=b[t]??"";return e},[b,s]),P=(0,_react.useCallback)(e=>{const t=e.slice(0,s);t!==b&&(y(t),t.length===s&&a&&a(t))},[s,y,a,b]),q=(0,_react.useCallback)((e,t)=>{const r=t.replace(/\u200B/g,""),i=sanitizeChar(r,o);if(!i){const t=M.slice(),r=(t[e]??"").length>0;if(t[e]="",P(t.join("").slice(0,s)),!r&&e>0){const t=M.slice();t[e-1]="",P(t.join("")),D(e-1)}return}const n=M[e]??"",a=n&&i.length>s&&i.startsWith(n)?i.slice(n.length):i;if(a.length>=s){const t=a.slice(0,s),r=b.length;if(P(t),t.length!==r){const e=(0,_index3.resolveHaptic)(m,"selection");e&&(0,_index3.triggerHaptic)(e)}return void T.current[e]?.blur()}const l=M.slice();let c=e;for(let e=0;e<i.length&&c<s;e+=1)l[c]=i[e]??"",c+=1;const u=l.join("").slice(0,s),d=b.length;if(P(u),u.length!==d){const e=(0,_index3.resolveHaptic)(m,"selection");e&&(0,_index3.triggerHaptic)(e)}const _=Math.min(c,s-1);c>=s?T.current[e]?.blur():D(_)},[M,D,o,s,m,P,b]),B=(0,_react.useCallback)((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(M[e]??"").length){if(e>0){const t=M.slice();t[e-1]="",P(t.join("")),D(e-1)}}else{const t=M.slice();t[e]="",P(t.join(""))}},[M,D,P]),H=(0,_react.useCallback)(e=>{S(e)},[]),L=(0,_react.useCallback)(()=>{S(-1)},[]),W=(0,_react.useCallback)(()=>{if(u)return;const e=M.findIndex(e=>""===e);D(-1===e?s-1:e)},[M,u,D,s]),$=f??`Enter ${s}-digit code`,G=z.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:g,accessible:!0,accessibilityRole:"none",accessibilityLabel:$,accessibilityValue:{text:r},accessibilityState:{disabled:u},testID:v,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:W,disabled:u,accessible:!1,children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.row,{columnGap:R.gap,transform:[{translateX:G}]}],children:M.map((e,t)=>{const r=C===t,i=e.length>0,n=F?j.colors.border.error:j.colors.border.focus,a=I[t];if(!a)return null;const l=p&&i?"●":e;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:N.cellWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:_,width:R.cell,height:R.cell,borderRadius:R.borderRadius,borderWidth:1.5,focused:r,error:F,filled:i,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:x,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:e=>{T.current[t]=e},value:(p&&i?"":e)||"​",onChangeText:e=>q(t,e),onKeyPress:e=>B(t,e),onFocus:()=>H(t),onBlur:L,keyboardType:o,editable:!u,selectTextOnFocus:!0,caretHidden:i,maxLength:s+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[N.input,{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h]}),p&&i?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:N.maskOverlay,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{fontSize:R.fontSize,color:j.colors.text.primary,...(0,_index2.fontFor)(j,"semibold")},h],children:l})}):null]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.underline,{backgroundColor:n,opacity:a}]})]},`otp-cell-${t}`)})})}),O?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[N.errorText,{color:j.colors.error,fontSize:j.typography.fontSize.sm}],accessibilityLiveRegion:"polite",children:O}):null]})});OTPInput.displayName="OTPInput";const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:0},maskOverlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:4,height:2,width:"60%",borderRadius:1,..._corners.smoothCorners},errorText:{marginTop:6}});var _default=exports.default=OTPInput;

package/lib/commonjs/components/OTPInput/index.js

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "OTPInput", {
-  enumerable: true,
-  get: function () {
-    return _OTPInput.OTPInput;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _OTPInput.default;
-  }
-});
-var _OTPInput = _interopRequireWildcard(require("./OTPInput.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"OTPInput",{enumerable:!0,get:function(){return _OTPInput.OTPInput}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _OTPInput.default}});var _OTPInput=_interopRequireWildcard(require("./OTPInput.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var u,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(u=t?n:r){if(u.has(e))return u.get(e);u.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(u=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?u(i,t,o):i[t]=e[t]);return i})(e,t)}