@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/components/FormField/FormField.js

@@ -7,6 +7,7 @@ exports.default = exports.FormField = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _FormContext = require("../../form/FormContext.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); }
 const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
@@ -15,6 +16,7 @@ const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props
     helperText,
     error,
     required = false,
+    name,
     children,
     layout = 'stacked',
     labelStyle,
@@ -27,19 +29,32 @@ const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const errorOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(error ? 1 : 0)).current;
+  const formCtx = (0, _FormContext.useOptionalFormContext)();
+  const isConnected = name != null && formCtx != null;
+  const field = isConnected ? formCtx.getFieldProps(name) : null;
+  const isRenderProp = typeof children === 'function';
+
+  // Error the FormField renders itself. When connected to an element child the
+  // child (Input/Select etc.) shows the injected error, so FormField stays
+  // quiet to avoid a duplicate message; the render-prop form keeps it here.
+  const ownError = isConnected ? isRenderProp ? field?.error : undefined : error;
+  // Error used purely for assistive tech — always reflects the real error.
+  const a11yError = isConnected ? field?.error : error;
+  const errorOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(ownError ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(errorOpacity, {
-      toValue: error ? 1 : 0,
-      duration: 150,
+    const anim = _reactNative.Animated.timing(errorOpacity, {
+      toValue: ownError ? 1 : 0,
+      duration: theme.motion.duration.fast,
       useNativeDriver: true
-    }).start();
-  }, [error, errorOpacity]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [ownError, errorOpacity, theme.motion.duration.fast]);
   const computedAccessibilityLabel = (0, _react.useMemo)(() => {
     if (accessibilityLabel) return accessibilityLabel;
     if (!label) return undefined;
-    return error ? `${label}, error: ${error}` : label;
-  }, [accessibilityLabel, label, error]);
+    return a11yError ? `${label}, error: ${a11yError}` : label;
+  }, [accessibilityLabel, label, a11yError]);
   const labelNode = label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
     style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
     children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -48,39 +63,60 @@ const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props
     }) : null]
   }) : null;
   const inputContainerStyle = layout === 'inline' ? styles.inputInline : styles.inputStacked;
-  const showError = Boolean(error);
+  const showError = Boolean(ownError);
   const showHelper = !showError && Boolean(helperText);
+  const renderedChildren = (() => {
+    if (isRenderProp) {
+      return field ? children(field) : null;
+    }
+    if (isConnected && field && /*#__PURE__*/_react.default.isValidElement(children)) {
+      const child = children;
+      const childOnChangeText = child.props.onChangeText;
+      const childOnBlur = child.props.onBlur;
+      const childOnFocus = child.props.onFocus;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        value: field.value,
+        onChangeText: text => {
+          field.onChangeText(text);
+          childOnChangeText?.(text);
+        },
+        onBlur: e => {
+          field.onBlur();
+          childOnBlur?.(e);
+        },
+        onFocus: e => {
+          field.onFocus();
+          childOnFocus?.(e);
+        },
+        error: field.error,
+        ref: node => formCtx.registerField(name, node ?? null)
+      });
+    }
+    return children;
+  })();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     ref: ref,
     style: [layout === 'inline' ? styles.rootInline : styles.rootStacked, containerStyle],
     accessibilityLabel: computedAccessibilityLabel
-    // Surface the invalid state to assistive tech via the hint. RN's
-    // AccessibilityState type does not expose an `invalid` field, so the
-    // error message itself is folded into the label and hint.
+    // RN's AccessibilityState type has no `invalid` field, so the error is
+    // folded into the label and surfaced again via the hint.
     ,
-    accessibilityHint: error ? error : undefined,
+    accessibilityHint: a11yError ? a11yError : undefined,
     testID: testID,
-    children: [layout === 'inline' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
+    children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [inputContainerStyle, inputContainerStyleProp],
+      children: renderedChildren
     }), showHelper ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.helper, helperStyle],
       numberOfLines: 2,
       children: helperText
-    }) : null, error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
+    }) : null, ownError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
       style: [styles.error, {
         opacity: errorOpacity
       }, errorStyle],
       numberOfLines: 2,
       accessibilityLiveRegion: "polite",
-      children: error
+      children: ownError
     }) : null]
   });
 });

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -51,6 +51,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -58,8 +59,6 @@ const ImageGallery = ({
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = (0, _react.useState)(false);
   const handleIndexChange = (0, _react.useCallback)(idx => {
@@ -68,13 +67,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = (0, _react.useCallback)(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = (0, _react.useCallback)((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -128,7 +129,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -218,7 +219,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
@@ -230,11 +231,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
   const handleSwipe = (0, _react.useCallback)(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+      const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _index4.triggerHaptic)(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = (0, _react.useCallback)((image, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomableImage, {
     image: image,
     index: idx,
@@ -244,8 +246,8 @@ const Lightbox = ({
     maxScale: maxScale,
     minScale: minScale,
     doubleTapScale: doubleTapScale,
-    pressHaptic: pressHaptic
-  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, pressHaptic]);
+    haptic: haptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
   const caption = images[activeIndex]?.caption;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
@@ -316,7 +318,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = _reactNative.Dimensions.get('window');
   const scale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -352,8 +354,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) (0, _index4.triggerHaptic)('impactLight');
+  }, [haptic]);
   const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 

package/lib/commonjs/components/Input/Input.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../../hooks/index.js");
 var _FieldBase = require("../FieldBase/FieldBase.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); }
@@ -84,26 +85,31 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
 
   // Floating label animation
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(labelAnim, {
+    const anim = _reactNative.Animated.timing(labelAnim, {
       toValue: shouldFloat ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Helper / error fade
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(messageAnim, {
+    const anim = _reactNative.Animated.timing(messageAnim, {
       toValue: hasError || Boolean(helperText) ? 1 : 0,
-      duration: 150,
+      duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
-  }, [hasError, helperText, messageAnim, theme.motion.easing.standard]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [hasError, helperText, messageAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Error shake — off by default; consumers opt in via
   // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const reduceMotion = (0, _index3.useReducedMotion)();
   const shakeOnError = theme.components.input?.shakeOnError ?? false;
   const prevErrorRef = (0, _react.useRef)(hasError);
   (0, _react.useEffect)(() => {
@@ -111,33 +117,39 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       prevErrorRef.current = hasError;
       return;
     }
+    let anim;
     if (hasError && !prevErrorRef.current) {
-      (0, _index.setNativeValue)(shakeAnim, 0);
-      _reactNative.Animated.sequence([_reactNative.Animated.timing(shakeAnim, {
-        toValue: 1,
-        duration: 50,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shakeAnim, {
-        toValue: -1,
-        duration: 50,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shakeAnim, {
-        toValue: 1,
-        duration: 50,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shakeAnim, {
-        toValue: -1,
-        duration: 50,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shakeAnim, {
-        toValue: 0,
-        duration: 100,
-        useNativeDriver: true
-      })]).start();
+      // Reduce Motion: keep the error haptic, skip the shake.
+      if (!reduceMotion) {
+        (0, _index.setNativeValue)(shakeAnim, 0);
+        anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true
+        })]);
+        anim.start();
+      }
       (0, _index2.triggerHaptic)('notificationError');
     }
     prevErrorRef.current = hasError;
-  }, [hasError, shakeAnim, shakeOnError]);
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
   const handleFocus = (0, _react.useCallback)(e => {
     setIsFocused(true);
     onFocus?.(e);

package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.KeyboardAwareScrollView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+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); }
+/**
+ * A ScrollView that keeps the focused input visible above the keyboard — no
+ * native dependency. On keyboard show it pads the content by the keyboard
+ * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
+ * above the keyboard, but only when it would otherwise be covered (so already-
+ * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ */
+const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    children,
+    extraScrollHeight = 24,
+    disabled = false,
+    contentContainerStyle,
+    onScroll,
+    onLayout,
+    ...rest
+  } = props;
+  const scrollRef = (0, _react.useRef)(null);
+  const scrollYRef = (0, _react.useRef)(0);
+  const viewportHeightRef = (0, _react.useRef)(0);
+  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
+  const setRefs = (0, _react.useCallback)(node => {
+    scrollRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  const scrollFocusedIntoView = (0, _react.useCallback)(kbHeight => {
+    const scroll = scrollRef.current;
+    const scrollNode = scroll ? (0, _reactNative.findNodeHandle)(scroll) : null;
+    const stateApi = _reactNative.TextInput?.State;
+    const focused = stateApi?.currentlyFocusedInput?.();
+    if (!scroll || scrollNode == null || !focused?.measureLayout) return;
+    focused.measureLayout(scrollNode, (_left, top, _width, height) => {
+      const scrollY = scrollYRef.current;
+      const viewportH = viewportHeightRef.current;
+      if (viewportH <= 0) return;
+      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
+      const fieldBottomInViewport = top - scrollY + height;
+      if (fieldBottomInViewport > keyboardTop) {
+        const delta = fieldBottomInViewport - keyboardTop;
+        scroll.scrollTo({
+          y: scrollY + delta,
+          animated: true
+        });
+      }
+    }, () => undefined);
+  }, [extraScrollHeight]);
+  (0, _react.useEffect)(() => {
+    if (disabled) return undefined;
+    // iOS exposes the will* events (smoother); Android only fires did*.
+    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    let rafId;
+    const showSub = _reactNative.Keyboard.addListener(showEvent, e => {
+      const height = e.endCoordinates?.height ?? 0;
+      setKeyboardHeight(height);
+      // Wait a frame so the padding is applied before we scroll. Tracked so
+      // it can be cancelled on unmount (never runs against a torn-down tree).
+      if (rafId != null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
+    });
+    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [disabled, scrollFocusedIntoView]);
+  const handleScroll = (0, _react.useCallback)(e => {
+    scrollYRef.current = e.nativeEvent.contentOffset.y;
+    onScroll?.(e);
+  }, [onScroll]);
+  const handleLayout = (0, _react.useCallback)(e => {
+    viewportHeightRef.current = e.nativeEvent.layout.height;
+    onLayout?.(e);
+  }, [onLayout]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: setRefs,
+    onScroll: handleScroll,
+    onLayout: handleLayout,
+    scrollEventThrottle: 16,
+    keyboardShouldPersistTaps: "handled",
+    keyboardDismissMode: _reactNative.Platform.OS === 'ios' ? 'interactive' : 'on-drag',
+    contentContainerStyle: [contentContainerStyle, {
+      paddingBottom: keyboardHeight
+    }],
+    ...rest,
+    children: children
+  });
+});
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+var _default = exports.default = KeyboardAwareScrollView;
+//# sourceMappingURL=KeyboardAwareScrollView.js.map

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KeyboardAwareScrollView", {
+  enumerable: true,
+  get: function () {
+    return _KeyboardAwareScrollView.KeyboardAwareScrollView;
+  }
+});
+var _KeyboardAwareScrollView = require("./KeyboardAwareScrollView.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/KeyboardToolbar/KeyboardToolbar.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.KeyboardToolbar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _FormContext = require("../../form/FormContext.js");
+var _index2 = require("../Text/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); }
+const NavButton = ({
+  label,
+  accessibilityLabel,
+  onPress,
+  theme
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+  onPress: onPress,
+  disabled: !onPress,
+  accessibilityRole: "button",
+  accessibilityLabel: accessibilityLabel,
+  hitSlop: 8,
+  style: {
+    paddingHorizontal: theme.spacing.sm,
+    opacity: onPress ? 1 : 0.4
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+    variant: "h2",
+    color: onPress ? 'link' : 'disabled',
+    children: label
+  })
+});
+
+/**
+ * An accessory bar pinned just above the keyboard — pure RN, no native
+ * dependency. Shows a Done (dismiss) button and optional prev/next chevrons
+ * that, inside a `<Form>`, walk the registered field order. Render it at the
+ * screen root (a `flex: 1` ancestor) so its `bottom: keyboardHeight` offset
+ * lands it on top of the keyboard. Renders nothing while the keyboard is hidden.
+ */
+const KeyboardToolbar = props => {
+  const {
+    doneLabel = 'Done',
+    showNavigation,
+    onDone,
+    onNext,
+    onPrev,
+    leading,
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const form = (0, _FormContext.useOptionalFormContext)();
+  const [keyboardHeight, setKeyboardHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = _reactNative.Keyboard.addListener(showEvent, e => setKeyboardHeight(e.endCoordinates?.height ?? 0));
+    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  if (keyboardHeight <= 0) return null;
+  const handleDone = onDone ?? (() => _reactNative.Keyboard.dismiss());
+  const handlePrev = onPrev ?? form?.focusPrev;
+  const handleNext = onNext ?? form?.focusNext;
+  const navEnabled = showNavigation ?? Boolean(handlePrev || handleNext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    accessibilityRole: "toolbar",
+    style: [styles.bar, {
+      bottom: keyboardHeight,
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingHorizontal: theme.spacing.md
+    }, style],
+    children: [navEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.nav,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
+        label: "\u2039",
+        accessibilityLabel: "Previous field",
+        onPress: handlePrev,
+        theme: theme
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NavButton, {
+        label: "\u203A",
+        accessibilityLabel: "Next field",
+        onPress: handleNext,
+        theme: theme
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {}), leading, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.spacer
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: handleDone,
+      accessibilityRole: "button",
+      accessibilityLabel: doneLabel,
+      hitSlop: 8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+        variant: "body",
+        weight: "semibold",
+        color: "link",
+        children: doneLabel
+      })
+    })]
+  });
+};
+exports.KeyboardToolbar = KeyboardToolbar;
+const styles = _reactNative.StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  nav: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  spacer: {
+    flex: 1
+  }
+});
+var _default = exports.default = KeyboardToolbar;
+//# sourceMappingURL=KeyboardToolbar.js.map

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "KeyboardToolbar", {
+  enumerable: true,
+  get: function () {
+    return _KeyboardToolbar.KeyboardToolbar;
+  }
+});
+var _KeyboardToolbar = require("./KeyboardToolbar.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/ListItem/ListItem.js

@@ -69,6 +69,7 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     left,
     right,
     onPress,
+    haptic,
     selected = false,
     disabled = false,
     size = 'md',
@@ -88,7 +89,6 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const pressHaptic = theme.components.listItem?.pressHaptic ?? false;
   const sz = (0, _react.useMemo)(() => sizeFor(theme, size), [theme, size]);
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const isInteractive = !!onPress && !disabled;
@@ -101,7 +101,8 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const handlePress = event => {
     if (!isInteractive) return;
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress?.(event);
   };
   const a11yLabel = accessibilityLabel ?? title;
@@ -296,7 +297,7 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
     backgroundColor: theme.colors.surface.pressed
   },
   disabled: {
-    opacity: 0.6
+    opacity: 0.55
   },
   leftSlot: {
     marginRight: theme.spacing.md,