@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { PickerTrigger } from "../PickerTrigger/index.js";
 
 /**
@@ -103,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     maxRange,
+    haptic,
     style,
     containerStyle,
     headerLabelStyle,
@@ -147,10 +148,11 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   // Modal open / close animation. Backdrop opacity uses JS driver — see
   // Modal.tsx for the Fabric reason. Sheet transform stays native.
   useEffect(() => {
+    let anim;
     if (open) {
       backdrop.setValue(0);
       setNativeValue(sheet, 0);
-      Animated.parallel([Animated.timing(backdrop, {
+      anim = Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
@@ -161,8 +163,10 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         stiffness: theme.motion.spring.gentle.stiffness,
         mass: theme.motion.spring.gentle.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     }
+    return () => anim?.stop();
   }, [open, backdrop, sheet, theme.motion]);
   const disabledIsoSet = useMemo(() => {
     const set = new Set();
@@ -181,7 +185,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const headerLabel = useMemo(() => formatMonthYear(anchor, locale), [anchor, locale]);
   const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
   const animateMonthChange = useCallback(delta => {
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) triggerHaptic('impactLight');
     const direction = delta > 0 ? 1 : -1;
     const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
     const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
@@ -212,12 +216,13 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
   const goPrev = useCallback(() => animateMonthChange(-1), [animateMonthChange]);
   const goNext = useCallback(() => animateMonthChange(1), [animateMonthChange]);
   const pressDay = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -236,7 +241,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
       } else {
         if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
           // Reject ranges longer than maxRange — restart from the new tap.
-          if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationWarning');
+          if (haptic !== false) triggerHaptic('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -247,7 +252,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
     }
-  }, [isDisabled, pendingStart, pendingEnd, maxRange, theme.components.dateRangePicker]);
+  }, [isDisabled, pendingStart, pendingEnd, maxRange, haptic]);
   const handleCloseModal = useCallback(() => {
     if (isControlled) {
       onClose?.();
@@ -271,18 +276,18 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleClose();
-  }, [handleClose, theme.components.dateRangePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = useCallback(() => {
     if (!pendingStart || !pendingEnd) return;
-    if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationSuccess');
+    if (haptic !== false) triggerHaptic('notificationSuccess');
     onChange?.({
       start: pendingStart,
       end: pendingEnd
     });
     handleClose();
-  }, [handleClose, onChange, pendingStart, pendingEnd, theme.components.dateRangePicker]);
+  }, [handleClose, onChange, pendingStart, pendingEnd, haptic]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]

package/lib/module/components/Dialog/Dialog.js

@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Modal } from "../Modal/Modal.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Dialog = props => {
@@ -25,6 +25,7 @@ const Dialog = props => {
     actionsRowStyle,
     actionButtonStyle,
     actionTextStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -36,12 +37,13 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = useCallback(action => {
     if (action.loading) return;
-    if (dialogTokens?.actionHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
+  }, [dismissOnAction, onClose, haptic]);
   return /*#__PURE__*/_jsx(Modal, {
     visible: visible,
     onRequestClose: onClose,
@@ -144,7 +146,7 @@ const tintForVariant = (theme, variant) => {
         base: theme.colors.warning,
         muted: theme.colors.background.secondary
       };
-    case 'danger':
+    case 'error':
       return {
         base: theme.colors.error,
         muted: theme.colors.background.secondary
@@ -175,7 +177,7 @@ const actionStyleFor = (theme, tone, variant) => {
           textColor: theme.colors.text.inverse
         };
       }
-    case 'danger':
+    case 'error':
       return {
         backgroundColor: theme.colors.error,
         borderColor: 'transparent',

package/lib/module/components/Drawer/Drawer.js

@@ -26,7 +26,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
 const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
@@ -40,6 +40,7 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
     enableSwipe = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    haptic,
     containerStyle,
     children,
     accessibilityLabel,
@@ -219,9 +220,10 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const handleBackdropPress = useCallback(() => {
     if (!enableBackdropPress) return;
-    if (drawerTokens?.backdropPressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     close();
-  }, [enableBackdropPress, close, drawerTokens?.backdropPressHaptic]);
+  }, [enableBackdropPress, close, haptic]);
 
   // Per-side container layout — must be a hook on every render path so we
   // can't gate it on the lazy-mount early-return below.

package/lib/module/components/FieldBase/FieldBase.js

@@ -286,20 +286,24 @@ export const FieldBase = props => {
   const focusAnim = useRef(createAnimatedValue(focused ? 1 : 0)).current;
   const errorAnim = useRef(createAnimatedValue(error ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(focusAnim, {
+    const anim = Animated.timing(focusAnim, {
       toValue: focused ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [focused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
   useEffect(() => {
-    Animated.timing(errorAnim, {
+    const anim = Animated.timing(errorAnim, {
       toValue: error ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [error, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Resting border + fill (pre-animation). Error wins over focus when both

package/lib/module/components/FloatingActionButton/FloatingActionButton.js

@@ -5,7 +5,7 @@ import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-nativ
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 
 // Local shape mirror — see types.ts FloatingActionButtonTokens for the canonical
 // definition. Declared here so the component can read tokens before types.ts is
@@ -64,6 +64,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     isScrolling = false,
     accessibilityLabel,
     accessibilityHint,
+    haptic,
     style,
     containerStyle,
     labelStyle,
@@ -83,19 +84,20 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   const fabTokens = theme.components.floatingActionButton;
   const edgeOffset = fabTokens?.edgeOffset ?? 24;
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     if (!hideOnScroll) {
       setNativeValue(hideAnim, 0);
       return;
     }
-    Animated.timing(hideAnim, {
+    const anim = Animated.timing(hideAnim, {
       toValue: isScrolling ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [hideOnScroll, isScrolling, hideAnim, theme.motion.duration.normal, theme.motion.easing.standard]);
   const hideTranslateY = hideAnim.interpolate({
     inputRange: [0, 1],
@@ -107,7 +109,8 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = _event => {
     if (disabled) return;
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) triggerHaptic(h);
     onPress();
   };
   const renderedIcon = icon;
@@ -176,7 +179,7 @@ const FloatingActionButton = /*#__PURE__*/forwardRef((props, ref) => {
         borderRadius: sizeStyles.diameter / 2
       }, theme.shadows.lg, {
         backgroundColor,
-        opacity: disabled ? 0.7 : 1
+        opacity: disabled ? 0.55 : 1
       }],
       children: [renderedIcon, isExtended ? /*#__PURE__*/_jsx(Text, {
         style: [styles.label, {
@@ -222,6 +225,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -237,7 +241,6 @@ const FloatingActionButtonGroup = props => {
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
   const secondaryGap = fabTokens?.secondaryGap ?? 16;
   const staggerMs = fabTokens?.staggerMs ?? 50;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const isControlled = typeof controlledOpen === 'boolean';
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
@@ -271,12 +274,13 @@ const FloatingActionButtonGroup = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actions.length]);
   useEffect(() => {
-    Animated.timing(progress, {
+    const progressAnim = Animated.timing(progress, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
+    });
+    progressAnim.start();
     const animations = itemAnims.current.map(value => Animated.timing(value, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
@@ -285,23 +289,29 @@ const FloatingActionButtonGroup = props => {
     }));
     // Reverse stagger order on close so items closest to primary collapse last
     const ordered = isOpen ? animations : [...animations].reverse();
-    Animated.stagger(staggerMs, ordered).start();
+    const staggerAnim = Animated.stagger(staggerMs, ordered);
+    staggerAnim.start();
+    return () => {
+      progressAnim.stop();
+      staggerAnim.stop();
+    };
   }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = useCallback(next => {
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'impactLight');
+    if (h) triggerHaptic(h);
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handlePrimaryPress = useCallback(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = useCallback(action => {
-    if (pressHaptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handleBackdropPress = useCallback(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);

package/lib/module/components/FormField/FormField.js

@@ -3,13 +3,15 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useOptionalFormContext } from "../../form/FormContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     label,
     helperText,
     error,
     required = false,
+    name,
     children,
     layout = 'stacked',
     labelStyle,
@@ -22,19 +24,32 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const errorOpacity = useRef(createAnimatedValue(error ? 1 : 0)).current;
+  const formCtx = 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 = useRef(createAnimatedValue(ownError ? 1 : 0)).current;
   useEffect(() => {
-    Animated.timing(errorOpacity, {
-      toValue: error ? 1 : 0,
-      duration: 150,
+    const anim = 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 = 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__*/_jsxs(Text, {
     style: [styles.label, layout === 'inline' ? styles.labelInline : null, labelStyle],
     children: [label, required ? /*#__PURE__*/_jsx(Text, {
@@ -43,39 +58,60 @@ const FormField = /*#__PURE__*/forwardRef((props, ref) => {
     }) : 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.isValidElement(children)) {
+      const child = children;
+      const childOnChangeText = child.props.onChangeText;
+      const childOnBlur = child.props.onBlur;
+      const childOnFocus = child.props.onFocus;
+      return /*#__PURE__*/React.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__*/_jsxs(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__*/_jsxs(_Fragment, {
-      children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [labelNode, /*#__PURE__*/_jsx(View, {
-        style: [inputContainerStyle, inputContainerStyleProp],
-        children: children
-      })]
+    children: [labelNode, /*#__PURE__*/_jsx(View, {
+      style: [inputContainerStyle, inputContainerStyleProp],
+      children: renderedChildren
     }), showHelper ? /*#__PURE__*/_jsx(Text, {
       style: [styles.helper, helperStyle],
       numberOfLines: 2,
       children: helperText
-    }) : null, error ? /*#__PURE__*/_jsx(Animated.Text, {
+    }) : null, ownError ? /*#__PURE__*/_jsx(Animated.Text, {
       style: [styles.error, {
         opacity: errorOpacity
       }, errorStyle],
       numberOfLines: 2,
       accessibilityLiveRegion: "polite",
-      children: error
+      children: ownError
     }) : null]
   });
 });

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -26,7 +26,7 @@ import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTi
 import { Carousel } from "../Carousel/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 
 // Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,6 +46,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -53,8 +54,6 @@ const ImageGallery = ({
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const handleIndexChange = useCallback(idx => {
@@ -63,13 +62,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = useCallback(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = useCallback(() => {
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = useCallback((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/_jsx(Pressable, {
@@ -123,7 +124,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -212,7 +213,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
@@ -224,11 +225,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const handleSwipe = useCallback(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) triggerHaptic('selection');
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
     image: image,
     index: idx,
@@ -238,8 +240,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__*/_jsx(RNModal, {
     visible: visible,
@@ -310,7 +312,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = Dimensions.get('window');
   const scale = useSharedValue(1);
@@ -346,8 +348,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = useCallback(() => {
-    if (pressHaptic) triggerHaptic('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) triggerHaptic('impactLight');
+  }, [haptic]);
   const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';