@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/components/Carousel/Carousel.js

@@ -442,12 +442,14 @@ const ThumbnailItem = ({
 }) => {
   const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1.1 : 1)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.spring(scale, {
+    const anim = _reactNative.Animated.spring(scale, {
       toValue: isActive ? 1.1 : 1,
       useNativeDriver: true,
       friction: 6,
       tension: 80
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [isActive, scale]);
   const content = (0, _react.useMemo)(() => {
     if (renderThumbnail) return renderThumbnail(item, index);

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

@@ -7,6 +7,7 @@ exports.default = exports.Checkbox = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../../hooks/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.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); }
@@ -31,6 +32,7 @@ const toneColor = (theme, tone) => {
 const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     checked,
+    defaultChecked,
     onChange,
     indeterminate = false,
     disabled = false,
@@ -38,7 +40,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
     boxStyle,
     checkIconStyle,
@@ -48,22 +50,29 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = (0, _index2.useControllableState)({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const boxSize = theme.components.checkbox?.[size]?.boxSize ?? sizeMap[size];
   const checkboxBorderWidth = theme.colors.border.width;
   const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
-  const isActive = checked || indeterminate;
+  const isActive = current || indeterminate;
   const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.spring(progress, {
+    const anim = _reactNative.Animated.spring(progress, {
       toValue: isActive ? 1 : 0,
       damping: theme.motion.spring.snappy.damping,
       stiffness: theme.motion.spring.snappy.stiffness,
       mass: theme.motion.spring.snappy.mass,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [isActive, progress, theme.motion.spring.snappy]);
   const scale = progress.interpolate({
     inputRange: [0, 1],
@@ -71,8 +80,9 @@ 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);
-    onChange(!checked);
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -89,7 +99,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
     accessibilityRole: "checkbox",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: indeterminate ? 'mixed' : checked,
+      checked: indeterminate ? 'mixed' : current,
       disabled
     },
     testID: testID,

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

@@ -15,14 +15,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * DatePicker operates in two modes:
  *
- * 1. **Controlled-modal mode** — pass `visible` (plus `onSelect` / `onClose`)
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onChange` / `onClose`)
  *    and own the open state externally. The component renders only the modal.
  * 2. **Trigger mode** — omit `visible`. The component renders a built-in
  *    PickerTrigger field (label / value / placeholder / chevron / clear /
  *    helper / error / size / variant) and manages its own open state. The
  *    field opens the modal on press and closes it on confirm/cancel.
  *
- * `onSelect` / `onClose` are typed optional to support trigger-only usage
+ * `onChange` / `onClose` are typed optional to support trigger-only usage
  * where the consumer may not need either callback. In controlled-modal mode
  * they remain semantically required.
  */
@@ -104,7 +104,7 @@ const buildDecadeCells = anchorYear => {
 const DatePicker = props => {
   const {
     value,
-    onSelect,
+    onChange,
     onClose,
     minDate,
     maxDate,
@@ -120,6 +120,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -179,7 +180,7 @@ const DatePicker = props => {
     if (open) {
       backdrop.setValue(0);
       (0, _index.setNativeValue)(sheet, 0);
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
+      const anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
@@ -190,7 +191,9 @@ const DatePicker = props => {
         stiffness: theme.motion.spring.gentle.stiffness,
         mass: theme.motion.spring.gentle.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
+      return () => anim.stop();
     }
   }, [open, mode, backdrop, sheet, theme.motion]);
   const disabledIsoSet = (0, _react.useMemo)(() => {
@@ -233,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;
@@ -264,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)(() => {
@@ -308,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, {
@@ -326,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));
@@ -355,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?.();
@@ -384,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');
-    onSelect?.(pendingDate);
+    if (haptic !== false) (0, _index2.triggerHaptic)('notificationSuccess');
+    onChange?.(pendingDate);
     handleClose();
-  }, [handleClose, onSelect, 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,
@@ -152,10 +153,11 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   // Modal open / close animation. Backdrop opacity uses JS driver — see
   // Modal.tsx for the Fabric reason. Sheet transform stays native.
   (0, _react.useEffect)(() => {
+    let anim;
     if (open) {
       backdrop.setValue(0);
       (0, _index.setNativeValue)(sheet, 0);
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
+      anim = _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
@@ -166,8 +168,10 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
         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 = (0, _react.useMemo)(() => {
     const set = new Set();
@@ -186,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;
@@ -217,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.
@@ -241,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;
@@ -252,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?.();
@@ -276,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,
@@ -150,7 +152,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
@@ -181,7 +183,7 @@ const actionStyleFor = (theme, tone, variant) => {
           textColor: theme.colors.text.inverse
         };
       }
-    case 'danger':
+    case 'error':
       return {
         backgroundColor: theme.colors.error,
         borderColor: 'transparent',

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/FieldBase/FieldBase.js

@@ -294,20 +294,24 @@ const FieldBase = props => {
   const focusAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(focused ? 1 : 0)).current;
   const errorAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(error ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(focusAnim, {
+    const anim = _reactNative.Animated.timing(focusAnim, {
       toValue: focused ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [focused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(errorAnim, {
+    const anim = _reactNative.Animated.timing(errorAnim, {
       toValue: error ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.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/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,19 +89,20 @@ 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) {
       (0, _index.setNativeValue)(hideAnim, 0);
       return;
     }
-    _reactNative.Animated.timing(hideAnim, {
+    const anim = _reactNative.Animated.timing(hideAnim, {
       toValue: isScrolling ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: _reactNative.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],
@@ -112,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;
@@ -181,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, {
@@ -227,6 +230,7 @@ const FloatingActionButtonGroup = props => {
     bottomOffset,
     size = 'md',
     accessibilityLabel = 'Quick actions',
+    haptic,
     containerStyle,
     secondaryActionStyle,
     labelPillStyle,
@@ -242,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;
@@ -276,12 +279,13 @@ const FloatingActionButtonGroup = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actions.length]);
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(progress, {
+    const progressAnim = _reactNative.Animated.timing(progress, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
+    });
+    progressAnim.start();
     const animations = itemAnims.current.map(value => _reactNative.Animated.timing(value, {
       toValue: isOpen ? 1 : 0,
       duration: theme.motion.duration.normal,
@@ -290,23 +294,29 @@ const FloatingActionButtonGroup = props => {
     }));
     // Reverse stagger order on close so items closest to primary collapse last
     const ordered = isOpen ? animations : [...animations].reverse();
-    _reactNative.Animated.stagger(staggerMs, ordered).start();
+    const staggerAnim = _reactNative.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 = (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]);