@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/module/components/AnimatePresence/AnimatePresence.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React from 'react';
+import Animated, { FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 = useTheme();
+  const reduceMotion = 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 = ZoomIn.duration(dur);
+        exiting = ZoomOut.duration(dur);
+        break;
+      case 'slide-up':
+        entering = FadeInUp.duration(dur);
+        exiting = FadeOutDown.duration(dur);
+        break;
+      case 'slide-down':
+        entering = FadeInDown.duration(dur);
+        exiting = FadeOutUp.duration(dur);
+        break;
+      case 'fade':
+      default:
+        entering = FadeIn.duration(dur);
+        exiting = FadeOut.duration(dur);
+        break;
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: entering,
+    exiting: exiting,
+    style: style,
+    testID: testID,
+    children: children
+  });
+};
+AnimatePresence.displayName = 'AnimatePresence';
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { AnimatePresence } from "./AnimatePresence.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/AppBar/AppBar.js

@@ -5,7 +5,7 @@ import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const variantSize = (theme, variant) => {
   switch (variant) {
@@ -36,7 +36,8 @@ const variantSize = (theme, variant) => {
 const ActionButton = ({
   action,
   side,
-  badgeStyle
+  badgeStyle,
+  haptic
 }) => {
   const theme = useTheme();
   const {
@@ -48,9 +49,8 @@ const ActionButton = ({
   });
   const styles = useMemo(() => buildActionStyles(theme), [theme]);
   const onPress = () => {
-    if (theme.components.appBar?.pressHaptic ?? false) {
-      triggerHaptic('selection');
-    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     action.onPress();
   };
   const badgeValue = action.badge;
@@ -108,6 +108,7 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
     titleStyle,
     subtitleStyle,
     badgeStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -225,7 +226,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         style: styles.sideSlot,
         children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
           action: leftAction,
-          side: "left"
+          side: "left",
+          haptic: haptic
         }) : null
       }), /*#__PURE__*/_jsx(View, {
         style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
@@ -235,7 +237,8 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
         children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
           action: action,
           side: "right",
-          badgeStyle: badgeStyle
+          badgeStyle: badgeStyle,
+          haptic: haptic
         }, `appbar-right-${index}`))
       })]
     })]

package/lib/module/components/Banner/Banner.js

@@ -3,6 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
@@ -14,6 +15,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     actions,
     dismissible = false,
     onDismiss,
+    haptic,
     visible = true,
     animateMount = true,
     loading = false,
@@ -143,7 +145,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       }), dismissible ? /*#__PURE__*/_jsx(Pressable, {
         accessibilityRole: "button",
         accessibilityLabel: "Dismiss banner",
-        onPress: onDismiss,
+        onPress: () => {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) triggerHaptic(h);
+          onDismiss?.();
+        },
         hitSlop: 8,
         style: ({
           pressed
@@ -168,7 +174,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         return /*#__PURE__*/_jsx(Pressable, {
           accessibilityRole: "button",
           accessibilityLabel: action.label,
-          onPress: action.onPress,
+          onPress: () => {
+            const h = resolveHaptic(haptic, 'selection');
+            if (h) triggerHaptic(h);
+            action.onPress();
+          },
           style: ({
             pressed
           }) => [styles.actionBtn, {

package/lib/module/components/Card/Card.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
 import { Gradient, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const paddingMap = {
@@ -31,6 +31,7 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
     loading = false,
     gradient,
     onPress,
+    haptic,
     accessibilityLabel,
     accessibilityHint,
     accessibilityRole,
@@ -150,9 +151,8 @@ const Card = /*#__PURE__*/forwardRef((props, ref) => {
   let rendered;
   if (isInteractive) {
     const handlePress = event => {
-      if (theme.components.card?.pressHaptic ?? false) {
-        triggerHaptic('selection');
-      }
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
       onPress?.(event);
     };
     rendered = /*#__PURE__*/_jsx(Animated.View, {

package/lib/module/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { useControllableState } from "../../hooks/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   sm: 16,
@@ -35,7 +35,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
     boxStyle,
     checkIconStyle,
@@ -75,7 +75,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false && theme.components.checkbox?.pressHaptic) triggerHaptic(haptic);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setCurrent(!current);
     rest.onPressOut?.(event);
   };

package/lib/module/components/Chip/Chip.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
@@ -99,6 +99,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     disabled = false,
     loading = false,
     accessibilityLabel,
+    haptic,
     style,
     textStyle,
     containerStyle,
@@ -145,12 +146,13 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
   const borderWidth = isFilled ? 0 : theme.colors.border.width;
   const handlePress = () => {
     if (!isPressable) return;
-    if (theme.components.chip?.pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onPress?.();
   };
   const handleClose = () => {
     if (disabled) return;
-    if (theme.components.chip?.closeHaptic) triggerHaptic('impactLight');
+    if (haptic !== false) triggerHaptic('impactLight');
     onClose?.();
   };
   const a11yLabel = accessibilityLabel ?? label;

package/lib/module/components/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 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 { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { PickerTrigger } from "../PickerTrigger/index.js";
 
 /**
@@ -115,6 +115,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -230,7 +231,7 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = useCallback(delta => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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;
@@ -261,31 +262,31 @@ const DatePicker = props => {
     const next = addMonths(anchor, delta);
     setAnchor(next);
     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 = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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 = useCallback(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    if (theme.components.datePicker?.haptic) triggerHaptic('impactLight');
+    if (haptic !== false) 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 = useCallback(() => {
@@ -305,7 +306,8 @@ const DatePicker = props => {
     })]).start();
   }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = useCallback(() => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
     const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     Animated.sequence([Animated.timing(headerScale, {
@@ -323,23 +325,26 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale, theme.components.datePicker]);
+  }, [animateViewTransition, headerScale, haptic, theme.components.datePicker]);
   const pickYear = useCallback(year => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition, theme.components.datePicker]);
+  }, [animateViewTransition, haptic]);
   const pickDecade = useCallback(decadeStart => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) 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 = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -352,7 +357,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 = useCallback(() => {
     if (isControlled) {
       onClose?.();
@@ -381,15 +386,15 @@ const DatePicker = props => {
     });
   }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    if (theme.components.datePicker?.haptic) triggerHaptic('selection');
+    if (haptic !== false) triggerHaptic('selection');
     handleClose();
-  }, [handleClose, theme.components.datePicker]);
+  }, [handleClose, haptic]);
   const handleConfirm = useCallback(() => {
     if (!pendingDate) return;
-    if (theme.components.datePicker?.haptic) triggerHaptic('notificationSuccess');
+    if (haptic !== false) 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/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,
@@ -184,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;
@@ -215,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.
@@ -239,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;
@@ -250,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?.();
@@ -274,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,

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/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,7 +84,6 @@ 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) {
@@ -109,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;
@@ -178,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, {
@@ -224,6 +225,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -239,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;
@@ -296,20 +297,21 @@ const FloatingActionButtonGroup = props => {
     };
   }, [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]);