@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/commonjs/components/Accordion/Accordion.js

@@ -96,7 +96,8 @@ const Accordion = props => {
     contentWrapperStyle,
     containerStyle,
     testID,
-    loading = false
+    loading = false,
+    haptic
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -143,9 +144,8 @@ const Accordion = props => {
   }, [measuredHeight]);
   const handlePress = (0, _react.useCallback)(() => {
     if (disabled) return;
-    if (theme.components.accordion?.pressHaptic ?? false) {
-      (0, _hapticUtils.triggerHaptic)('selection');
-    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (group && id) {
       group.toggle(id);
       onChange?.(!expanded);
@@ -153,7 +153,7 @@ const Accordion = props => {
     }
     if (!isControlled) setInternalExpanded(!expanded);
     onChange?.(!expanded);
-  }, [disabled, group, id, expanded, isControlled, onChange, theme.components.accordion]);
+  }, [disabled, group, id, expanded, isControlled, onChange, haptic]);
   const rotate = rotateAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/commonjs/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnimatePresence = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+const AnimatePresence = ({
+  children,
+  preset = 'fade',
+  duration,
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const reduceMotion = (0, _index2.useReducedMotion)();
+  const visible = children !== null && children !== undefined && children !== false;
+  if (!visible) return null;
+  const dur = duration ?? theme.motion.duration.normal;
+  let entering;
+  let exiting;
+  if (!reduceMotion) {
+    switch (preset) {
+      case 'scale':
+        entering = _reactNativeReanimated.ZoomIn.duration(dur);
+        exiting = _reactNativeReanimated.ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = _reactNativeReanimated.FadeInUp.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = _reactNativeReanimated.FadeInDown.duration(dur);
+        exiting = _reactNativeReanimated.FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = _reactNativeReanimated.FadeIn.duration(dur);
+        exiting = _reactNativeReanimated.FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+exports.AnimatePresence = AnimatePresence;
+AnimatePresence.displayName = 'AnimatePresence';
+var _default = exports.default = AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

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

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

package/lib/commonjs/components/AppBar/AppBar.js

@@ -41,7 +41,8 @@ const variantSize = (theme, variant) => {
 const ActionButton = ({
   action,
   side,
-  badgeStyle
+  badgeStyle,
+  haptic
 }) => {
   const theme = (0, _index.useTheme)();
   const {
@@ -53,9 +54,8 @@ const ActionButton = ({
   });
   const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    if (theme.components.appBar?.pressHaptic ?? false) {
-      (0, _hapticUtils.triggerHaptic)('selection');
-    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -113,6 +113,7 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     titleStyle,
     subtitleStyle,
     badgeStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -230,7 +231,8 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         style: styles.sideSlot,
         children: leftAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
           action: leftAction,
-          side: "left"
+          side: "left",
+          haptic: haptic
         }) : null
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
@@ -240,7 +242,8 @@ const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         children: rightActions?.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
           action: action,
           side: "right",
-          badgeStyle: badgeStyle
+          badgeStyle: badgeStyle,
+          haptic: haptic
         }, `appbar-right-${index}`))
       })]
     })]

package/lib/commonjs/components/Banner/Banner.js

@@ -7,6 +7,7 @@ exports.default = exports.Banner = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
 var _index2 = require("../Skeleton/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); }
@@ -19,6 +20,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     actions,
     dismissible = false,
     onDismiss,
+    haptic,
     visible = true,
     animateMount = true,
     loading = false,
@@ -148,7 +150,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }), dismissible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         accessibilityRole: "button",
         accessibilityLabel: "Dismiss banner",
-        onPress: onDismiss,
+        onPress: () => {
+          const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+          if (h) (0, _hapticUtils.triggerHaptic)(h);
+          onDismiss?.();
+        },
         hitSlop: 8,
         style: ({
           pressed
@@ -173,7 +179,11 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           accessibilityRole: "button",
           accessibilityLabel: action.label,
-          onPress: action.onPress,
+          onPress: () => {
+            const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+            if (h) (0, _hapticUtils.triggerHaptic)(h);
+            action.onPress();
+          },
           style: ({
             pressed
           }) => [styles.actionBtn, {

package/lib/commonjs/components/Card/Card.js

@@ -36,6 +36,7 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     loading = false,
     gradient,
     onPress,
+    haptic,
     accessibilityLabel,
     accessibilityHint,
     accessibilityRole,
@@ -155,9 +156,8 @@ const Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   let rendered;
   if (isInteractive) {
     const handlePress = event => {
-      if (theme.components.card?.pressHaptic ?? false) {
-        (0, _hapticUtils.triggerHaptic)('selection');
-      }
+      const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _hapticUtils.triggerHaptic)(h);
       onPress?.(event);
     };
     rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -40,7 +40,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
     boxStyle,
     checkIconStyle,
@@ -80,7 +80,8 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false && theme.components.checkbox?.pressHaptic) (0, _hapticUtils.triggerHaptic)(haptic);
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     setCurrent(!current);
     rest.onPressOut?.(event);
   };

package/lib/commonjs/components/Chip/Chip.js

@@ -104,6 +104,7 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     disabled = false,
     loading = false,
     accessibilityLabel,
+    haptic,
     style,
     textStyle,
     containerStyle,
@@ -150,12 +151,13 @@ const Chip = exports.Chip = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   const borderWidth = isFilled ? 0 : theme.colors.border.width;
   const handlePress = () => {
     if (!isPressable) return;
-    if (theme.components.chip?.pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress?.();
   };
   const handleClose = () => {
     if (disabled) return;
-    if (theme.components.chip?.closeHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)('impactLight');
     onClose?.();
   };
   const a11yLabel = accessibilityLabel ?? label;

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -120,6 +120,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -235,7 +236,7 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = (0, _react.useCallback)(delta => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     const direction = delta > 0 ? 1 : -1;
     const distance = theme.components.datePicker?.monthSlideDistance ?? 32;
     const outDuration = theme.components.datePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
@@ -266,31 +267,31 @@ const DatePicker = props => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
+  }, [anchor, haptic, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
   const goPrev = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode, theme.components.datePicker]);
+  }, [animateMonthChange, viewMode, haptic]);
   const goNext = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode, theme.components.datePicker]);
+  }, [animateMonthChange, viewMode, haptic]);
 
   // View-mode transition: fade + scale, native driver.
   const animateViewTransition = (0, _react.useCallback)(() => {
@@ -310,7 +311,8 @@ const DatePicker = props => {
     })]).start();
   }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = (0, _react.useCallback)(() => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
     const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     _reactNative.Animated.sequence([_reactNative.Animated.timing(headerScale, {
@@ -328,23 +330,26 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale, theme.components.datePicker]);
+  }, [animateViewTransition, headerScale, haptic, theme.components.datePicker]);
   const pickYear = (0, _react.useCallback)(year => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pickDecade = (0, _react.useCallback)(decadeStart => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     // Anchor mid-decade so the year grid centers nicely on this decade.
     setAnchor(prev => new Date(decadeStart + 4, prev.getMonth(), 1));
     setViewMode('years');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pressDay = (0, _react.useCallback)(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -357,7 +362,7 @@ const DatePicker = props => {
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     }).start();
-  }, [isDisabled, selectScale, theme.motion.spring.bouncy, theme.components.datePicker]);
+  }, [isDisabled, selectScale, theme.motion.spring.bouncy, haptic]);
   const finalizeClose = (0, _react.useCallback)(() => {
     if (isControlled) {
       onClose?.();
@@ -386,15 +391,15 @@ const DatePicker = props => {
     });
   }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    if (haptic !== false) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose, theme.components.datePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingDate) return;
-    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    if (haptic !== false) (0, _index2.triggerHaptic)('notificationSuccess');
     onChange?.(pendingDate);
     handleClose();
-  }, [handleClose, onChange, pendingDate, theme.components.datePicker]);
+  }, [handleClose, onChange, pendingDate, haptic]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -108,6 +108,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     maxRange,
+    haptic,
     style,
     containerStyle,
     headerLabelStyle,
@@ -189,7 +190,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   const headerLabel = (0, _react.useMemo)(() => formatMonthYear(anchor, locale), [anchor, locale]);
   const weekdays = (0, _react.useMemo)(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
   const animateMonthChange = (0, _react.useCallback)(delta => {
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
+    if (haptic !== false) (0, _index2.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;
@@ -220,12 +221,13 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.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 = (0, _react.useCallback)(() => animateMonthChange(-1), [animateMonthChange]);
   const goNext = (0, _react.useCallback)(() => animateMonthChange(1), [animateMonthChange]);
   const pressDay = (0, _react.useCallback)(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -244,7 +246,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
       } else {
         if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
           // Reject ranges longer than maxRange — restart from the new tap.
-          if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationWarning');
+          if (haptic !== false) (0, _index2.triggerHaptic)('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -255,7 +257,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     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 = (0, _react.useCallback)(() => {
     if (isControlled) {
       onClose?.();
@@ -279,18 +281,18 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     });
   }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    if (haptic !== false) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose, theme.components.dateRangePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingStart || !pendingEnd) return;
-    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    if (haptic !== false) (0, _index2.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/commonjs/components/Dialog/Dialog.js

@@ -30,6 +30,7 @@ const Dialog = props => {
     actionsRowStyle,
     actionButtonStyle,
     actionTextStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -41,12 +42,13 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = (0, _react.useCallback)(action => {
     if (action.loading) return;
-    if (dialogTokens?.actionHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
+  }, [dismissOnAction, onClose, haptic]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
     visible: visible,
     onRequestClose: onClose,

package/lib/commonjs/components/Drawer/Drawer.js

@@ -45,6 +45,7 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     enableSwipe = true,
     enableBackdropPress = true,
     backdropOpacity = 0.5,
+    haptic,
     containerStyle,
     children,
     accessibilityLabel,
@@ -224,9 +225,10 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (!enableBackdropPress) return;
-    if (drawerTokens?.backdropPressHaptic) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.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/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -69,6 +69,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
     isScrolling = false,
     accessibilityLabel,
     accessibilityHint,
+    haptic,
     style,
     containerStyle,
     labelStyle,
@@ -88,7 +89,6 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   const fabTokens = theme.components.floatingActionButton;
   const edgeOffset = fabTokens?.edgeOffset ?? 24;
   const defaultBottomOffset = fabTokens?.bottomOffset ?? 24;
-  const pressHaptic = fabTokens?.pressHaptic ?? false;
   const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     if (!hideOnScroll) {
@@ -114,7 +114,8 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   });
   const handlePress = _event => {
     if (disabled) return;
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress();
   };
   const renderedIcon = icon;
@@ -183,7 +184,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
         borderRadius: sizeStyles.diameter / 2
       }, theme.shadows.lg, {
         backgroundColor,
-        opacity: disabled ? 0.7 : 1
+        opacity: disabled ? 0.55 : 1
       }],
       children: [renderedIcon, isExtended ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.label, {
@@ -229,6 +230,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -244,7 +246,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] = (0, _react.useState)(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
@@ -301,20 +302,21 @@ const FloatingActionButtonGroup = props => {
     };
   }, [isOpen, progress, theme.motion.duration.normal, theme.motion.easing.standard, actions.length, itemAnimsVersion, staggerMs]);
   const setOpen = (0, _react.useCallback)(next => {
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('impactLight');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'impactLight');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handlePrimaryPress = (0, _react.useCallback)(() => {
     setOpen(!isOpen);
   }, [isOpen, setOpen]);
   const handleActionPress = (0, _react.useCallback)(action => {
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)('selection');
     action.onPress();
     // Close after action runs
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
-  }, [isControlled, onOpenChange, pressHaptic]);
+  }, [isControlled, onOpenChange, haptic]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (isOpen) setOpen(false);
   }, [isOpen, setOpen]);