@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/module/components/Modal/Modal.js

@@ -2,8 +2,11 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { AccessibilityInfo, Animated, Dimensions, findNodeHandle, Modal as RNModal, Pressable, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
+
+// Local shape mirror — see types.ts ModalTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -22,10 +25,14 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const duration = animationDuration ?? theme.motion.duration.normal;
   const screenHeight = Dimensions.get('window').height;
+  const modalTokens = theme.components.modal;
+  const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
+  const backdropHaptic = modalTokens?.backdropHaptic ?? false;
   const backdropAnim = useRef(createAnimatedValue(0)).current;
-  const scaleAnim = useRef(createAnimatedValue(0.9)).current;
+  const scaleAnim = useRef(createAnimatedValue(scaleStartValue)).current;
   const opacityAnim = useRef(createAnimatedValue(0)).current;
   const translateYAnim = useRef(createAnimatedValue(screenHeight)).current;
   const containerRef = useRef(null);
@@ -33,10 +40,16 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   useEffect(() => {
     if (visible) {
+      // Two Fabric quirks force this combination: backdrop View needs
+      // `collapsable={false}` (see render) so flattening doesn't drop it,
+      // AND opacity must run on the JS driver — native-driver opacity on an
+      // Animated.View that also sets backgroundColor inline renders as 0 on
+      // RN 0.85 / Fabric / iOS, leaving the dim layer invisible. Single
+      // 240ms tween — JS thread cost is negligible.
       Animated.timing(backdropAnim, {
         toValue: 1,
         duration,
-        useNativeDriver: true
+        useNativeDriver: false
       }).start();
       if (presentation === 'bottom') {
         Animated.spring(translateYAnim, {
@@ -60,12 +73,14 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
         })]).start();
       }
     } else {
-      setNativeValue(backdropAnim, 0);
-      setNativeValue(scaleAnim, 0.9);
+      // backdropAnim is JS-driven (see note above) — reset directly so a
+      // zero-duration native timing doesn't re-claim the value.
+      backdropAnim.setValue(0);
+      setNativeValue(scaleAnim, scaleStartValue);
       setNativeValue(opacityAnim, 0);
       setNativeValue(translateYAnim, screenHeight);
     }
-  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass]);
+  }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass, scaleStartValue]);
 
   // Accessibility focus trap: when the modal opens, push screen-reader focus
   // into the dialog container after the mount animation; when it closes,
@@ -100,9 +115,9 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   }, [visible, duration, restoreFocusRef]);
   const handleBackdropPress = useCallback(() => {
     if (!backdropPressClose) return;
-    triggerHaptic('selection');
+    if (backdropHaptic) triggerHaptic('selection');
     onRequestClose();
-  }, [backdropPressClose, onRequestClose]);
+  }, [backdropPressClose, onRequestClose, backdropHaptic]);
   const handleHardwareBack = useCallback(() => {
     if (hardwareBackPress) {
       onRequestClose();
@@ -115,11 +130,15 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
       }];
     }
     if (presentation === 'bottom') {
+      // paddingBottom includes the Android navigation-bar / iOS home-indicator
+      // inset so sheet content never lands behind the system chrome.
       return [styles.bottomContent, {
         backgroundColor: theme.colors.background.elevated,
         borderTopLeftRadius: theme.radius.xl,
         borderTopRightRadius: theme.radius.xl,
-        padding: theme.spacing.lg
+        paddingTop: theme.spacing.lg,
+        paddingHorizontal: theme.spacing.lg,
+        paddingBottom: theme.spacing.lg + insets.bottom
       }, theme.shadows.xl];
     }
     return [styles.centeredContent, {
@@ -127,7 +146,7 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
       borderRadius: theme.radius.xl,
       padding: theme.spacing.xl
     }, theme.shadows.xl];
-  }, [presentation, theme, styles]);
+  }, [presentation, theme, styles, insets.bottom]);
   const wrapperStyle = useMemo(() => {
     if (presentation === 'bottom') return styles.bottomWrapper;
     if (presentation === 'fullScreen') return styles.fullScreenWrapper;
@@ -156,11 +175,19 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // Android-only API (RN 0.71+). On iOS the prop is harmless / ignored.
+    // Lets the backdrop and sheet extend behind the system navigation bar
+    // so the dim layer covers the entire screen and gesture-nav devices
+    // don't show a gap under the sheet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — typed in RN 0.73+, the runtime prop exists on 0.71+
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: handleHardwareBack,
     testID: testID,
-    children: /*#__PURE__*/_jsxs(View, {
+    children: /*#__PURE__*/_jsx(View, {
       ref: node => {
         containerRef.current = node;
         if (typeof ref === 'function') {
@@ -172,32 +199,33 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
       style: styles.root,
       accessible: true,
       accessibilityViewIsModal: true,
-      accessibilityRole: 'dialog',
+      accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        style: [StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.background.inverse,
-          opacity: backdropAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, backdropOpacity]
-          })
+      children: /*#__PURE__*/_jsxs(View
+      // Backdrop wraps the dialog content (not sibling) — empirically,
+      // on RN 0.85 / Fabric / iOS a sibling backdrop is occluded by the
+      // wrapper View regardless of render order or pointerEvents.
+      // collapsable={false} prevents the backdrop View from being
+      // flattened out of the native tree. The backdrop uses a pre-baked
+      // rgba colour (no animated opacity) because Animated.View opacity
+      // on a coloured View doesn't update visibly on Fabric.
+      , {
+        collapsable: false,
+        style: [StyleSheet.absoluteFillObject, wrapperStyle, {
+          backgroundColor: theme.colors.background.overlay
         }, backdropStyle],
-        children: /*#__PURE__*/_jsx(Pressable, {
+        children: [/*#__PURE__*/_jsx(Pressable, {
           style: StyleSheet.absoluteFillObject,
           onPress: handleBackdropPress,
           accessibilityRole: "button",
           accessibilityLabel: "Close modal",
           disabled: !backdropPressClose
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: wrapperStyle,
-        pointerEvents: "box-none",
-        children: /*#__PURE__*/_jsx(Animated.View, {
+        }), /*#__PURE__*/_jsx(Animated.View, {
           style: [containerStyle, animatedTransform, contentStyle],
           pointerEvents: "auto",
           children: children
-        })
-      })]
+        })]
+      })
     })
   });
 });

package/lib/module/components/NumberInput/NumberInput.js

@@ -4,41 +4,10 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    buttonSize: 30,
-    inputMinWidth: 44,
-    inputHeight: 30,
-    fontSize: 13,
-    iconFontSize: 16,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    gap: 6
-  },
-  md: {
-    buttonSize: 38,
-    inputMinWidth: 56,
-    inputHeight: 38,
-    fontSize: 15,
-    iconFontSize: 18,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    gap: 8
-  },
-  lg: {
-    buttonSize: 46,
-    inputMinWidth: 68,
-    inputHeight: 46,
-    fontSize: 17,
-    iconFontSize: 20,
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    gap: 10
-  }
-};
-const LONG_PRESS_DELAY = 500;
-const LONG_PRESS_INTERVAL = 80;
+const DEFAULT_LONG_PRESS_DELAY = 500;
+const DEFAULT_LONG_PRESS_INTERVAL = 80;
 const roundToPrecision = (value, precision) => {
   if (!Number.isFinite(value)) return 0;
   if (precision <= 0) return Math.round(value);
@@ -60,12 +29,10 @@ const formatValue = (value, allowDecimal, precision) => {
 const sanitizeTyped = (raw, allowDecimal) => {
   if (!raw) return '';
   let cleaned = raw.replace(/[^0-9.-]/g, '');
-  // Allow only one leading minus.
   cleaned = cleaned.replace(/(?!^)-/g, '');
   if (!allowDecimal) {
     cleaned = cleaned.replace(/\./g, '');
   } else {
-    // Allow at most one decimal point.
     const firstDot = cleaned.indexOf('.');
     if (firstDot !== -1) {
       cleaned = cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, '');
@@ -91,17 +58,27 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     unit,
     accessibilityLabel,
     style,
+    containerStyle,
     inputStyle,
+    buttonStyle,
+    unitStyle,
     labelStyle,
     textInputProps,
     testID
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeTokens = resolveFieldSize(theme, size);
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const longPressDelay = theme.components.numberInput?.longPressDelayMs ?? DEFAULT_LONG_PRESS_DELAY;
+  const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
+  const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = useRef(null);
   const [draft, setDraft] = useState(formatValue(value, allowDecimal, precision));
   const [editing, setEditing] = useState(false);
+  const [focused, setFocused] = useState(false);
   const repeatTimeoutRef = useRef(null);
   const repeatIntervalRef = useRef(null);
   const clearRepeat = useCallback(() => {
@@ -115,8 +92,6 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, []);
   useEffect(() => clearRepeat, [clearRepeat]);
-
-  // Keep draft in sync with value when not actively editing.
   useEffect(() => {
     if (!editing) {
       setDraft(formatValue(value, allowDecimal, precision));
@@ -134,16 +109,14 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [allowDecimal, max, min, onChange, precision, value]);
   const decrement = useCallback(() => {
     if (!interactive || atMin) return;
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     setExternal(value - step);
-  }, [atMin, interactive, setExternal, step, value]);
+  }, [atMin, interactive, pressHaptic, setExternal, step, value]);
   const increment = useCallback(() => {
     if (!interactive || atMax) return;
-    triggerHaptic('impactLight');
+    if (pressHaptic) triggerHaptic('impactLight');
     setExternal(value + step);
-  }, [atMax, interactive, setExternal, step, value]);
-
-  // Imperative ref.
+  }, [atMax, interactive, pressHaptic, setExternal, step, value]);
   React.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
@@ -162,23 +135,18 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     repeatTimeoutRef.current = setTimeout(() => {
       repeatIntervalRef.current = setInterval(() => {
         if (direction === 'inc') {
-          // Read latest via closure of state via setExternal.
-          // Compute next by reading current value from props on each tick.
-          // Since closures capture, we rely on state updating between intervals.
           increment();
         } else {
           decrement();
         }
-      }, LONG_PRESS_INTERVAL);
-    }, LONG_PRESS_DELAY);
-  }, [clearRepeat, decrement, increment, interactive]);
+      }, longPressInterval);
+    }, longPressDelay);
+  }, [clearRepeat, decrement, increment, interactive, longPressDelay, longPressInterval]);
   const handleChangeText = useCallback(text => {
     const cleaned = sanitizeTyped(text, allowDecimal);
     setDraft(cleaned);
-    // Don't push numeric value while user types intermediate states (e.g., '-' or '1.').
     const parsed = Number(cleaned);
     if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
-      // Only push if within bounds; otherwise wait for blur to clamp.
       if (parsed >= min && parsed <= max) {
         if (parsed !== value) {
           onChange(roundToPrecision(parsed, allowDecimal ? precision : 0));
@@ -188,9 +156,9 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [allowDecimal, max, min, onChange, precision, value]);
   const handleBlur = useCallback(() => {
     setEditing(false);
+    setFocused(false);
     const parsed = Number(draft);
     if (draft === '' || !Number.isFinite(parsed)) {
-      // Reset to the last known good value.
       setDraft(formatValue(value, allowDecimal, precision));
       return;
     }
@@ -203,27 +171,16 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [allowDecimal, draft, max, min, onChange, precision, value]);
   const handleFocus = useCallback(() => {
     setEditing(true);
+    setFocused(true);
   }, []);
-  const minusBg = atMin || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
-  const plusBg = atMax || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
   const minusFg = atMin || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
   const plusFg = atMax || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
-  const inputBg = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
-  const borderColor = error ? theme.colors.border.error : theme.colors.border.primary;
-  const buttonBaseStyle = {
-    width: sizeStyles.buttonSize,
-    height: sizeStyles.buttonSize,
-    borderRadius: sizeStyles.borderRadius,
-    borderWidth: 1,
-    borderColor,
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-  const renderButton = (type, onPress, disabledLocal, a11yLabel, bg, fg, glyph) => /*#__PURE__*/_jsx(Pressable, {
+  const stepperSize = sizeTokens.iconSize + 8;
+  const renderStepper = (type, onPress, disabledLocal, a11yLabel, fg, glyph) => /*#__PURE__*/_jsx(Pressable, {
     onPress: onPress,
     onLongPress: () => startRepeating(type),
     onPressOut: clearRepeat,
-    delayLongPress: LONG_PRESS_DELAY,
+    delayLongPress: longPressDelay,
     disabled: disabledLocal,
     accessibilityRole: "button",
     accessibilityLabel: a11yLabel,
@@ -232,36 +189,37 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     },
     style: ({
       pressed
-    }) => [buttonBaseStyle, {
-      backgroundColor: bg
+    }) => [{
+      width: stepperSize,
+      height: stepperSize,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: stepperSize / 2
     }, pressed && !disabledLocal ? {
       backgroundColor: theme.colors.surface.pressed
-    } : null],
+    } : null, buttonStyle],
     testID: `${testID ?? 'numberinput'}-${type === 'inc' ? 'plus' : 'minus'}`,
     children: /*#__PURE__*/_jsx(Text, {
       style: {
-        fontSize: sizeStyles.iconFontSize,
+        fontSize: sizeTokens.iconSize,
         color: fg,
         fontWeight: theme.typography.fontWeight.semibold,
-        lineHeight: sizeStyles.iconFontSize + 2
+        lineHeight: sizeTokens.iconSize + 2
       },
       children: glyph
     })
   });
   const accessibleInputLabel = accessibilityLabel ?? label ?? 'Number input';
-  const inputBlock = /*#__PURE__*/_jsxs(View, {
-    style: [styles.row, {
-      columnGap: sizeStyles.gap
-    }],
-    children: [renderButton('dec', decrement, atMin || disabled, 'Decrease', minusBg, minusFg, '−'), /*#__PURE__*/_jsxs(View, {
-      style: [styles.inputContainer, {
-        minWidth: sizeStyles.inputMinWidth,
-        height: sizeStyles.inputHeight,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        borderRadius: sizeStyles.borderRadius,
-        backgroundColor: inputBg,
-        borderColor
-      }],
+  const inputBlock = /*#__PURE__*/_jsx(FieldBase, {
+    size: size,
+    disabled: disabled,
+    error: Boolean(error),
+    filled: true,
+    focused: focused,
+    leading: renderStepper('dec', decrement, atMin || disabled, 'Decrease', minusFg, '−'),
+    trailing: renderStepper('inc', increment, atMax || disabled, 'Increase', plusFg, '+'),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.inputRow,
       children: [/*#__PURE__*/_jsx(TextInput, {
         ref: inputRef,
         value: draft,
@@ -291,19 +249,19 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
           if (e.nativeEvent.actionName === 'decrement') decrement();
         },
         style: [styles.input, {
-          fontSize: sizeStyles.fontSize,
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
-          fontWeight: theme.typography.fontWeight.medium
+          fontSize: sizeTokens.fontSize,
+          color: fieldText.color,
+          ...fieldText.weightStyle
         }, inputStyle],
         ...textInputProps
       }), unit ? /*#__PURE__*/_jsx(Text, {
         style: [styles.unit, {
-          fontSize: sizeStyles.fontSize,
-          color: theme.colors.text.tertiary
-        }],
+          fontSize: sizeTokens.fontSize,
+          color: fieldText.placeholderColor
+        }, unitStyle],
         children: unit
       }) : null]
-    }), renderButton('inc', increment, atMax || disabled, 'Increase', plusBg, plusFg, '+')]
+    })
   });
   const labelEl = label ? /*#__PURE__*/_jsx(Text, {
     style: [styles.label, {
@@ -323,7 +281,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null;
   if (variant === 'horizontal') {
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.horizontalContainer, style],
+      style: [styles.horizontalContainer, style, containerStyle],
       testID: testID,
       accessibilityState: {
         disabled
@@ -336,10 +294,8 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
       })]
     });
   }
-
-  // 'inline' and 'stacked' both stack label above the spinner row.
   return /*#__PURE__*/_jsxs(View, {
-    style: style,
+    style: [style, containerStyle],
     testID: testID,
     accessibilityState: {
       disabled
@@ -349,20 +305,18 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
 });
 NumberInput.displayName = 'NumberInput';
 const buildStyles = _theme => StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  inputContainer: {
+  inputRow: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 1,
-    flex: 0
+    justifyContent: 'center'
   },
   input: {
     flex: 1,
     textAlign: 'center',
-    padding: 0
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
   },
   unit: {
     marginLeft: 4

package/lib/module/components/OTPInput/OTPInput.js

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { FieldBase } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   sm: {
@@ -60,21 +61,28 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const previousErrorRef = useRef(null);
   const shake = useRef(createAnimatedValue(0)).current;
-  const underlines = useRef(Array.from({
-    length
-  }, () => new Animated.Value(0))).current;
-  const previousFocusedIndexRef = useRef(-1);
-
-  // Resize underline array if length prop changes between renders.
-  if (underlines.length !== length) {
-    if (underlines.length < length) {
-      for (let i = underlines.length; i < length; i += 1) {
-        underlines.push(new Animated.Value(0));
+  const underlinesMapRef = useRef(new Map());
+  const underlines = useMemo(() => {
+    const map = underlinesMapRef.current;
+    const out = [];
+    for (let i = 0; i < length; i += 1) {
+      let v = map.get(i);
+      if (!v) {
+        v = new Animated.Value(0);
+        map.set(i, v);
       }
-    } else {
-      underlines.length = length;
+      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 = useRef(-1);
+  const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
+  const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
+  const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
   const hasError = Boolean(error);
   const errorMessage = typeof error === 'string' ? error : undefined;
 
@@ -83,32 +91,34 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     const isFirstRun = previousErrorRef.current === null;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      triggerHaptic('notificationError');
-      setNativeValue(shake, 0);
-      Animated.sequence([Animated.timing(shake, {
-        toValue: 1,
-        duration: 75,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(shake, {
-        toValue: -1,
-        duration: 75,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(shake, {
-        toValue: 1,
-        duration: 75,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }), Animated.timing(shake, {
-        toValue: 0,
-        duration: 75,
-        easing: Easing.linear,
-        useNativeDriver: true
-      })]).start();
+      if (errorHaptic) triggerHaptic('notificationError');
+      if (shakeOnError) {
+        setNativeValue(shake, 0);
+        Animated.sequence([Animated.timing(shake, {
+          toValue: 1,
+          duration: 75,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }), Animated.timing(shake, {
+          toValue: -1,
+          duration: 75,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }), Animated.timing(shake, {
+          toValue: 1,
+          duration: 75,
+          easing: Easing.linear,
+          useNativeDriver: true
+        }), Animated.timing(shake, {
+          toValue: 0,
+          duration: 75,
+          easing: Easing.linear,
+          useNativeDriver: true
+        })]).start();
+      }
     }
     previousErrorRef.current = hasError;
-  }, [hasError, shake]);
+  }, [hasError, shake, shakeOnError, errorHaptic]);
 
   // 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.
@@ -200,7 +210,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     const next = chars.join('').slice(0, length);
     const previousLength = value.length;
     updateValue(next);
-    if (next.length !== previousLength) {
+    if (next.length !== previousLength && selectionHaptic) {
       triggerHaptic('selection');
     }
 
@@ -211,7 +221,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, updateValue, value]);
+  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, value]);
   const handleKeyPress = useCallback((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;
@@ -276,23 +286,26 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
         children: cells.map((char, index) => {
           const isFocused = focusedIndex === index;
           const isFilled = char.length > 0;
-          const borderColor = hasError ? theme.colors.border.error : isFocused ? theme.colors.border.focus : theme.colors.border.primary;
-          const backgroundColor = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
           const underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
-          const underlineOpacity = underlines[index] ?? new Animated.Value(0);
+          const underlineOpacity = underlines[index];
+          if (!underlineOpacity) return null;
           const display = secure && isFilled ? '●' : char;
           return /*#__PURE__*/_jsxs(View, {
             style: styles.cellWrapper,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: [styles.cell, {
-                width: sizeStyles.cell,
-                height: sizeStyles.cell,
-                borderRadius: sizeStyles.borderRadius,
-                backgroundColor,
-                borderColor
-              }, cellStyle],
-              accessibilityElementsHidden: true,
-              importantForAccessibility: "no-hide-descendants",
+            children: [/*#__PURE__*/_jsxs(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__*/_jsx(TextInput, {
                 ref: node => {
                   inputsRef.current[index] = node;
@@ -362,12 +375,6 @@ const buildStyles = _theme => StyleSheet.create({
   cellWrapper: {
     alignItems: 'center'
   },
-  cell: {
-    borderWidth: 1.5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
   input: {
     width: '100%',
     height: '100%',