@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -0,0 +1,450 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.OptionSheet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * OptionSheet — the shared bottom-sheet option picker.
+ *
+ * Internal primitive behind Select and InlineSelect: RN Modal-backed slide-up
+ * sheet with backdrop fade, grab handle, optional title, optional client-side
+ * search, the option list (icon + label + description, single dot / multi
+ * checkbox) and the multi-select Done footer. Owns the open/close animations
+ * and the search query; selection STATE stays with the caller — the sheet
+ * only reports `onSelect(option)` and asks `isSelected(value)`.
+ *
+ * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
+ * and accessor signatures shared by every option-picking component. Select
+ * re-exports them so the public import path is unchanged.
+ */
+
+// Drag-to-dismiss thresholds: release past this many px of downward drag, or
+// above this downward velocity, dismisses instead of springing back.
+const DRAG_CLOSE_DISTANCE = 100;
+const DRAG_CLOSE_VELOCITY = 0.5;
+const OptionSheet = props => {
+  const {
+    open,
+    onClose,
+    title,
+    options,
+    labelOf,
+    valueOf,
+    disabledOf,
+    descriptionOf,
+    iconOf,
+    isSelected,
+    onSelect,
+    multi = false,
+    searchable = false,
+    searchSelectionColor,
+    accessibilityLabel,
+    optionStyle,
+    selectedOptionStyle,
+    optionTextStyle,
+    selectedOptionTextStyle
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const [query, setQuery] = (0, _react.useState)('');
+  const screenHeight = _reactNative.Dimensions.get('window').height;
+  const sheetMaxHeight = Math.round(screenHeight * 0.7);
+
+  // Animations: backdrop fade + sheet slide-up. `dragAnim` is the live
+  // finger offset from the drag-to-dismiss gesture, composed on top of the
+  // open/close slide so both can drive the same (native) transform.
+  // The close animation below is correct but was never visible: binding the
+  // native Modal to `open` unmounted the tree the moment `open` flipped, so the
+  // exit played against a torn-down view. Keep it mounted until the exit ends.
+  const [rendered, setRendered] = (0, _react.useState)(open);
+  const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
+  const dragAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(sheetAnim, dragAnim), [sheetAnim, dragAnim]);
+  (0, _react.useEffect)(() => {
+    if (open) {
+      setRendered(true);
+    }
+  }, [open]);
+  (0, _react.useEffect)(() => {
+    if (!rendered) {
+      return;
+    }
+    // A fresh open must start with no residual drag offset.
+    if (open) {
+      (0, _index.setNativeValue)(dragAnim, 0);
+    }
+    const anim = open ? _reactNative.Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    _reactNative.Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.spring(sheetAnim, {
+      toValue: 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    })]) : _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]);
+    anim.start(({
+      finished
+    }) => {
+      if (finished && !open) {
+        setRendered(false);
+      }
+    });
+    return () => anim.stop();
+  }, [open, rendered, backdropAnim, sheetAnim, dragAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
+
+  // Drag-to-dismiss: dragging the grab handle / header down past the distance
+  // or velocity threshold slides the sheet the rest of the way and closes;
+  // a short drag springs back. Native driver throughout (matches Toast swipe)
+  // so the finger-tracking stays off the JS thread.
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: (_evt, gesture) => gesture.dy > 4 && gesture.dy > Math.abs(gesture.dx),
+    onPanResponderMove: (_evt, gesture) => {
+      if (gesture.dy > 0) {
+        (0, _index.setNativeValue)(dragAnim, gesture.dy);
+      }
+    },
+    // Another responder (parent scroll, system gesture) can take over
+    // mid-drag; without this the sheet stays parked at the finger offset.
+    onPanResponderTerminate: () => {
+      _reactNative.Animated.spring(dragAnim, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }).start();
+    },
+    onPanResponderRelease: (_evt, gesture) => {
+      if (gesture.dy > DRAG_CLOSE_DISTANCE || gesture.vy > DRAG_CLOSE_VELOCITY) {
+        _reactNative.Animated.timing(dragAnim, {
+          toValue: sheetMaxHeight,
+          duration: theme.motion.duration.fast,
+          easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+          useNativeDriver: true
+        }).start(() => onClose());
+      } else {
+        _reactNative.Animated.spring(dragAnim, {
+          toValue: 0,
+          damping: theme.motion.spring.snappy.damping,
+          stiffness: theme.motion.spring.snappy.stiffness,
+          mass: theme.motion.spring.snappy.mass,
+          useNativeDriver: true
+        }).start();
+      }
+    }
+  }), [dragAnim, sheetMaxHeight, onClose, theme.motion.duration.fast, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
+
+  // Stale-search guard: the query must not survive a close/reopen cycle.
+  (0, _react.useEffect)(() => {
+    if (!open) {
+      setQuery('');
+    }
+  }, [open]);
+  const filteredOptions = (0, _react.useMemo)(() => {
+    if (!searchable || query.trim().length === 0) {
+      return [...options];
+    }
+    const q = query.trim().toLowerCase();
+    return options.filter(o => labelOf(o).toLowerCase().includes(q) || (descriptionOf(o) ?? '').toLowerCase().includes(q));
+  }, [searchable, query, options, labelOf, descriptionOf]);
+  const handleClose = (0, _react.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  const renderOption = ({
+    item
+  }) => {
+    const itemLabel = labelOf(item);
+    const itemValue = valueOf(item);
+    const itemDescription = descriptionOf(item);
+    const itemIcon = iconOf(item);
+    const selected = isSelected(itemValue);
+    const optDisabled = disabledOf(item);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => onSelect(item),
+      disabled: optDisabled,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: itemLabel,
+      accessibilityState: {
+        selected,
+        disabled: optDisabled
+      },
+      style: ({
+        pressed
+      }) => [styles.optionRow, {
+        backgroundColor: selected ? theme.colors.surface.selected : pressed ? theme.colors.surface.pressed : 'transparent',
+        opacity: optDisabled ? 0.5 : 1,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md
+      }, optionStyle, selected ? selectedOptionStyle : null],
+      children: [itemIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.optionIcon,
+        children: itemIcon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.optionTextWrap,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.optionLabel, {
+            color: selected ? theme.colors.primary : theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+          }, optionTextStyle, selected ? selectedOptionTextStyle : null],
+          numberOfLines: 1,
+          children: itemLabel
+        }), itemDescription ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.optionDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 2,
+          children: itemDescription
+        }) : null]
+      }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.checkbox, {
+          borderColor: selected ? theme.colors.primary : theme.colors.border.primary,
+          backgroundColor: selected ? theme.colors.primary : 'transparent'
+        }],
+        children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.checkboxTick
+        }) : null
+      }) : selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.singleSelectedDot, {
+          backgroundColor: theme.colors.primary
+        }]
+      }) : null]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: rendered,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: handleClose,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+    // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+    , {
+      collapsable: false,
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: theme.colors.background.overlay
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: handleClose,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close picker"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+        accessibilityViewIsModal: true,
+        accessibilityLabel: accessibilityLabel ?? title ?? 'Options',
+        style: [styles.sheet, {
+          maxHeight: sheetMaxHeight,
+          paddingBottom: insets.bottom + 16,
+          backgroundColor: theme.colors.background.elevated,
+          borderTopLeftRadius: theme.radius.xl,
+          borderTopRightRadius: theme.radius.xl,
+          transform: [{
+            translateY: sheetTranslateY
+          }],
+          ...theme.shadows.xl
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ...panResponder.panHandlers,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.sheetHandleRow,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.sheetHandle, {
+                backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
+              }]
+            })
+          }), title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sheetTitle, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.lg,
+              fontWeight: theme.typography.fontWeight.semibold,
+              paddingHorizontal: theme.spacing.lg,
+              marginBottom: theme.spacing.sm
+            }],
+            children: title
+          }) : null]
+        }), searchable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.searchWrap, {
+            marginHorizontal: theme.spacing.lg,
+            marginBottom: theme.spacing.sm
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            value: query,
+            onChangeText: setQuery,
+            placeholder: "Search\u2026",
+            placeholderTextColor: theme.colors.text.tertiary,
+            selectionColor: searchSelectionColor ?? theme.colors.border.focus,
+            accessibilityLabel: "Search options",
+            style: [styles.searchInput, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.base,
+              backgroundColor: theme.colors.background.secondary,
+              borderColor: theme.colors.border.primary,
+              borderRadius: theme.radius.md,
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm
+            }]
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          data: filteredOptions,
+          keyExtractor: item => String(valueOf(item)),
+          renderItem: renderOption,
+          keyboardShouldPersistTaps: "handled",
+          showsVerticalScrollIndicator: true,
+          ListEmptyComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.empty, {
+              color: theme.colors.text.tertiary,
+              fontSize: theme.typography.fontSize.sm,
+              paddingVertical: theme.spacing.xl
+            }],
+            children: "No options"
+          })
+        }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.sheetFooter, {
+            borderTopColor: theme.colors.border.secondary,
+            paddingHorizontal: theme.spacing.lg,
+            paddingVertical: theme.spacing.md
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+            onPress: handleClose,
+            accessibilityRole: "button",
+            accessibilityLabel: "Done",
+            style: ({
+              pressed
+            }) => [styles.doneButton, {
+              backgroundColor: pressed ? theme.colors.primaryPressed : theme.colors.primary,
+              borderRadius: theme.radius.md,
+              paddingVertical: theme.spacing.sm,
+              paddingHorizontal: theme.spacing.lg
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: {
+                color: theme.colors.text.inverse,
+                fontSize: theme.typography.fontSize.base,
+                fontWeight: theme.typography.fontWeight.semibold
+              },
+              children: "Done"
+            })
+          })
+        }) : null]
+      })]
+    })
+  });
+};
+exports.OptionSheet = OptionSheet;
+OptionSheet.displayName = 'OptionSheet';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingBottom: 16,
+    overflow: 'hidden'
+  },
+  sheetHandleRow: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  sheetTitle: {
+    includeFontPadding: false
+  },
+  searchWrap: {
+    width: 'auto'
+  },
+  searchInput: {
+    borderWidth: 1,
+    includeFontPadding: false
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  optionIcon: {
+    marginRight: 12
+  },
+  optionTextWrap: {
+    flex: 1
+  },
+  optionLabel: {
+    includeFontPadding: false
+  },
+  optionDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  },
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12
+  },
+  checkboxTick: {
+    width: 10,
+    height: 6,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: theme.colors.onPrimary,
+    transform: [{
+      rotate: '-45deg'
+    }, {
+      translateY: -1
+    }]
+  },
+  singleSelectedDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 12
+  },
+  empty: {
+    textAlign: 'center'
+  },
+  sheetFooter: {
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
+    alignItems: 'flex-end'
+  },
+  doneButton: {
+    alignSelf: 'flex-end'
+  }
+});
+var _default = exports.default = OptionSheet;
+//# sourceMappingURL=OptionSheet.js.map

package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatE164 = exports.default = exports.PhoneNumberInput = exports.DEFAULT_CALLING_CODES = 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 _index4 = require("../FieldBase/index.js");
+var _index5 = require("../FormField/index.js");
+var _OptionSheet = require("../OptionSheet/OptionSheet.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A deliberately short default list — the countries the fleet actually ships to.
+ * Consumers needing the full set pass their own `countries`; shipping 240 entries
+ * (and their flags) in a component library is weight almost nobody uses.
+ */
+const DEFAULT_CALLING_CODES = exports.DEFAULT_CALLING_CODES = [{
+  iso: 'IN',
+  code: '91',
+  label: 'India',
+  nationalLength: 10
+}, {
+  iso: 'AE',
+  code: '971',
+  label: 'United Arab Emirates',
+  nationalLength: 9
+}, {
+  iso: 'GB',
+  code: '44',
+  label: 'United Kingdom',
+  nationalLength: 10
+}, {
+  iso: 'US',
+  code: '1',
+  label: 'United States',
+  nationalLength: 10
+}, {
+  iso: 'CA',
+  code: '1',
+  label: 'Canada',
+  nationalLength: 10
+}, {
+  iso: 'AU',
+  code: '61',
+  label: 'Australia',
+  nationalLength: 9
+}, {
+  iso: 'SG',
+  code: '65',
+  label: 'Singapore',
+  nationalLength: 8
+}, {
+  iso: 'SA',
+  code: '966',
+  label: 'Saudi Arabia',
+  nationalLength: 9
+}];
+const digitsOnly = raw => raw.replace(/[^0-9]/g, '');
+
+/** `+<code> <national>` — presentational only; the value stays structured. */
+const formatE164 = value => `+${value.callingCode}${value.nationalNumber}`;
+
+/**
+ * Country calling code + national number, kept as a structured value rather than
+ * one string. A single free-text phone field is where "+91", "0091", "091" and
+ * "9876543210" all arrive for the same number and the backend has to guess.
+ */
+exports.formatE164 = formatE164;
+const PhoneNumberInput = exports.PhoneNumberInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onComplete,
+    countries = DEFAULT_CALLING_CODES,
+    defaultIso = 'IN',
+    label,
+    placeholder = 'Phone number',
+    helperText,
+    error,
+    required,
+    disabled = false,
+    size = 'md',
+    variant,
+    countrySheetTitle = 'Country code',
+    haptic,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const initial = (0, _react.useMemo)(() => {
+    const start = countries.find(c => c.iso === defaultIso) ?? countries[0];
+    return {
+      callingCode: start?.code ?? '91',
+      nationalNumber: '',
+      iso: start?.iso ?? 'IN'
+    };
+  }, [countries, defaultIso]);
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? initial,
+    onChange
+  });
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const [sheetOpen, setSheetOpen] = (0, _react.useState)(false);
+  const selected = (0, _react.useMemo)(() => countries.find(c => c.iso === current.iso) ?? countries[0], [countries, current.iso]);
+  const commit = (0, _react.useCallback)(next => {
+    setCurrent(next);
+    const expected = countries.find(c => c.iso === next.iso)?.nationalLength;
+    if (expected && next.nationalNumber.length === expected) {
+      onComplete?.(formatE164(next));
+    }
+  }, [countries, onComplete, setCurrent]);
+  const handleChangeText = (0, _react.useCallback)(raw => {
+    const digits = digitsOnly(raw);
+    const max = selected?.nationalLength;
+    commit({
+      ...current,
+      nationalNumber: max ? digits.slice(0, max) : digits
+    });
+  }, [commit, current, selected?.nationalLength]);
+  const pickCountry = (0, _react.useCallback)(option => {
+    const country = option;
+    // Keep the typed digits: changing country should not discard the number.
+    commit({
+      ...current,
+      callingCode: country.code,
+      iso: country.iso
+    });
+    setSheetOpen(false);
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+  }, [commit, current, haptic]);
+  const field = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FieldBase, {
+    size: size,
+    variant: variant,
+    focused: focused,
+    disabled: disabled,
+    error: Boolean(error),
+    filled: current.nationalNumber.length > 0,
+    style: style,
+    leading: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      onPress: () => {
+        if (disabled) {
+          return;
+        }
+        setSheetOpen(true);
+      },
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `Country code, currently +${current.callingCode}`,
+      accessibilityState: {
+        disabled
+      },
+      hitSlop: 6,
+      style: styles.codeTrigger,
+      testID: testID ? `${testID}-code` : undefined,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.codeText, {
+          color: disabled ? theme.colors.text.tertiary : theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.base
+        }],
+        children: `+${current.callingCode}`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.caret, {
+          color: theme.colors.text.tertiary
+        }],
+        children: "\u25BE"
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: ref,
+      value: current.nationalNumber,
+      onChangeText: handleChangeText,
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      editable: !disabled,
+      placeholder: placeholder,
+      placeholderTextColor: theme.colors.text.tertiary,
+      keyboardType: "phone-pad",
+      textContentType: "telephoneNumber",
+      autoComplete: "tel",
+      style: [styles.input, {
+        color: theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base
+      }],
+      testID: testID ? `${testID}-input` : undefined
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    children: [label || helperText || error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.FormField, {
+      label: label,
+      helperText: helperText,
+      error: error,
+      required: required,
+      children: field
+    }) : field, /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.OptionSheet, {
+      open: sheetOpen,
+      onClose: () => setSheetOpen(false),
+      title: countrySheetTitle,
+      options: countries,
+      labelOf: o => `${o.label} (+${o.code})`,
+      valueOf: o => o.iso,
+      disabledOf: () => false,
+      descriptionOf: () => undefined,
+      iconOf: () => null,
+      isSelected: v => v === current.iso,
+      onSelect: pickCountry,
+      searchable: countries.length > 8
+    })]
+  });
+});
+PhoneNumberInput.displayName = 'PhoneNumberInput';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  codeTrigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+    paddingRight: theme.spacing.xs
+  },
+  codeText: {
+    ...(0, _index2.fontFor)(theme, 'semibold'),
+    fontWeight: '600'
+  },
+  caret: {
+    fontSize: 10
+  },
+  input: {
+    ...(0, _index2.fontFor)(theme, 'normal'),
+    flex: 1,
+    padding: 0
+  }
+});
+var _default = exports.default = PhoneNumberInput;
+//# sourceMappingURL=PhoneNumberInput.js.map