@webority-technologies/mobile 0.0.14 → 0.0.20

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

@@ -6,10 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateRangePicker = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../PickerTrigger/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); }
+/**
+ * DateRangePicker — supports two usage modes:
+ *
+ *   1. Controlled-modal mode (pass `visible` + `onClose`): renders only the
+ *      modal; parent owns open/close state.
+ *   2. Trigger mode (omit `visible`): renders a built-in `PickerTrigger`
+ *      field that opens an internally-managed modal on tap. Confirm fires
+ *      `onChange?.(...)` and closes.
+ */
+
 const DAY_MS = 24 * 60 * 60 * 1000;
 const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -75,6 +87,18 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     value,
     onChange,
     onClose,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
     minDate,
     maxDate,
     disabledDates,
@@ -85,9 +109,17 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     cancelLabel = 'Cancel',
     maxRange,
     style,
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
     testID
   } = props;
+  const isControlled = visible !== undefined;
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(false);
+  const open = isControlled ? visible : internalOpen;
   const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const today = (0, _react.useMemo)(() => startOfDay(new Date()), []);
   const initialAnchor = value.start ? startOfDay(value.start) : today;
@@ -117,16 +149,17 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
     }
   }, [value.start, value.end]);
 
-  // Modal open / close animation.
+  // Modal open / close animation. Backdrop opacity uses JS driver — see
+  // Modal.tsx for the Fabric reason. Sheet transform stays native.
   (0, _react.useEffect)(() => {
-    if (visible) {
-      (0, _index.setNativeValue)(backdrop, 0);
+    if (open) {
+      backdrop.setValue(0);
       (0, _index.setNativeValue)(sheet, 0);
       _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), _reactNative.Animated.spring(sheet, {
         toValue: 1,
         damping: theme.motion.spring.gentle.damping,
@@ -135,7 +168,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
         useNativeDriver: true
       })]).start();
     }
-  }, [visible, backdrop, sheet, theme.motion]);
+  }, [open, backdrop, sheet, theme.motion]);
   const disabledIsoSet = (0, _react.useMemo)(() => {
     const set = new Set();
     disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
@@ -153,17 +186,19 @@ 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 => {
-    (0, _index2.triggerHaptic)('impactLight');
+    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
     const direction = delta > 0 ? 1 : -1;
-    const distance = 32;
+    const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.dateRangePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
     _reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
       toValue: -direction * distance,
-      duration: 140,
+      duration: outDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.quad),
       useNativeDriver: true
     }), _reactNative.Animated.timing(monthFade, {
       toValue: 0,
-      duration: 140,
+      duration: outDuration,
       useNativeDriver: true
     })]), _reactNative.Animated.timing(monthSlide, {
       toValue: direction * distance,
@@ -171,23 +206,23 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
       useNativeDriver: true
     }), _reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
       toValue: 0,
-      duration: 160,
+      duration: inDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
       useNativeDriver: true
     }), _reactNative.Animated.timing(monthFade, {
       toValue: 1,
-      duration: 160,
+      duration: inDuration,
       useNativeDriver: true
     })])]).start();
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide]);
+  }, [anchor, 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;
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -206,7 +241,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.
-          (0, _index2.triggerHaptic)('notificationWarning');
+          if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -217,35 +252,42 @@ 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]);
+  }, [isDisabled, pendingStart, pendingEnd, maxRange, theme.components.dateRangePicker]);
+  const handleCloseModal = (0, _react.useCallback)(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
   const handleClose = (0, _react.useCallback)(() => {
     _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
-      useNativeDriver: true
+      useNativeDriver: false
     }), _reactNative.Animated.timing(sheet, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
       useNativeDriver: true
     })]).start(() => {
-      onClose();
+      handleCloseModal();
     });
-  }, [backdrop, onClose, sheet, theme.motion.duration.fast]);
+  }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose]);
+  }, [handleClose, theme.components.dateRangePicker]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingStart || !pendingEnd) return;
-    (0, _index2.triggerHaptic)('notificationSuccess');
-    onChange({
+    if (theme.components.dateRangePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    onChange?.({
       start: pendingStart,
       end: pendingEnd
     });
     handleClose();
-  }, [handleClose, onChange, pendingStart, pendingEnd]);
+  }, [handleClose, onChange, pendingStart, pendingEnd, theme.components.dateRangePicker]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]
@@ -266,7 +308,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   }, [pendingStart, pendingEnd]);
   const confirmDisabled = !pendingStart || !pendingEnd;
   const calendar = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.card, style],
+    style: [styles.card, style, containerStyle],
     ref: ref,
     accessible: false,
     testID: testID,
@@ -287,7 +329,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
         onPress: goPrev,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: "Previous month",
         hitSlop: 8,
@@ -301,7 +343,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
           transform: [{
             translateX: monthSlide
           }]
-        }],
+        }, headerLabelStyle],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.headerLabel,
           accessibilityLiveRegion: "polite",
@@ -311,7 +353,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
         onPress: goNext,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: "Next month",
         hitSlop: 8,
@@ -402,7 +444,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
         onPress: handleCancel,
         style: ({
           pressed
-        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed],
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: cancelLabel,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -421,7 +463,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
           opacity: confirmDisabled ? 0.5 : 1
         }, pressed && {
           backgroundColor: theme.colors.primaryHover
-        }],
+        }, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: confirmLabel,
         accessibilityState: {
@@ -436,32 +478,64 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
       })]
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none",
-    onRequestClose: handleClose,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.backdrop, {
-        opacity: backdrop,
-        backgroundColor: theme.colors.background.overlay
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        onPress: handleClose,
-        accessibilityLabel: "Dismiss"
+  const triggerValueText = (0, _react.useMemo)(() => {
+    if (!value.start || !value.end) return '';
+    const range = {
+      start: value.start,
+      end: value.end
+    };
+    if (formatValue) return formatValue(range);
+    return `${range.start.toLocaleDateString()} – ${range.end.toLocaleDateString()}`;
+  }, [value.start, value.end, formatValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!isControlled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValueText,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+      ,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      , {
+        collapsable: false,
+        style: [styles.backdrop, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          onPress: handleClose,
+          accessibilityLabel: "Dismiss"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+          style: [styles.sheetWrap, {
+            paddingBottom: insets.bottom + theme.spacing.lg,
+            opacity: sheet,
+            transform: [{
+              translateY: sheetTranslate
+            }]
+          }],
+          accessibilityViewIsModal: true,
+          accessibilityRole: "none",
+          children: calendar
+        })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.sheetWrap, {
-        opacity: sheet,
-        transform: [{
-          translateY: sheetTranslate
-        }]
-      }],
-      accessibilityViewIsModal: true,
-      accessibilityRole: "none",
-      children: calendar
     })]
   });
 });
@@ -510,8 +584,8 @@ const buildStyles = theme => {
       marginBottom: theme.spacing.md
     },
     navBtn: {
-      width: 36,
-      height: 36,
+      width: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      height: theme.components.dateRangePicker?.navButtonSize ?? 36,
       borderRadius: theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center',
@@ -521,8 +595,8 @@ const buildStyles = theme => {
       backgroundColor: theme.colors.surface.pressed
     },
     navText: {
-      fontSize: 22,
-      lineHeight: 24,
+      fontSize: theme.components.dateRangePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.dateRangePicker?.navTextLineHeight ?? 24,
       color: theme.colors.text.primary,
       fontWeight: theme.typography.fontWeight.semibold
     },
@@ -604,7 +678,7 @@ const buildStyles = theme => {
       paddingHorizontal: theme.spacing.lg,
       paddingVertical: theme.spacing.sm,
       borderRadius: theme.radius.md,
-      minHeight: 40,
+      minHeight: theme.components.dateRangePicker?.footerButtonMinHeight ?? 40,
       alignItems: 'center',
       justifyContent: 'center'
     },

package/lib/commonjs/components/Dialog/Dialog.js

@@ -24,6 +24,12 @@ const Dialog = props => {
     accessibilityLabel,
     contentStyle,
     containerStyle,
+    titleStyle,
+    messageStyle,
+    iconWrapperStyle,
+    actionsRowStyle,
+    actionButtonStyle,
+    actionTextStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -35,12 +41,12 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = (0, _react.useCallback)(action => {
     if (action.loading) return;
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (dialogTokens?.actionHaptic) (0, _hapticUtils.triggerHaptic)('selection');
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose]);
+  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
     visible: visible,
     onRequestClose: onClose,
@@ -49,7 +55,7 @@ const Dialog = props => {
     contentStyle: contentStyle,
     testID: testID,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      accessibilityRole: 'alertdialog',
+      accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel ?? title,
       style: [styles.container, containerStyle],
       children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -59,7 +65,7 @@ const Dialog = props => {
           borderRadius: iconWrapperBorderRadius,
           backgroundColor: variantTint.muted,
           marginBottom: theme.spacing.md
-        }],
+        }, iconWrapperStyle],
         children: icon
       }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.title, {
@@ -67,7 +73,7 @@ const Dialog = props => {
           fontSize: theme.typography.fontSize.xl,
           ...(0, _index.fontFor)(theme, 'semibold'),
           marginBottom: message ? theme.spacing.sm : theme.spacing.md
-        }],
+        }, titleStyle],
         accessibilityRole: "header",
         children: title
       }) : null, typeof message === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -76,7 +82,7 @@ const Dialog = props => {
           fontSize: theme.typography.fontSize.base,
           lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal,
           marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
-        }],
+        }, messageStyle],
         children: message
       }) : message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: {
@@ -84,7 +90,7 @@ const Dialog = props => {
         },
         children: message
       }) : null, actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.actionsRow,
+        style: [styles.actionsRow, actionsRowStyle],
         children: actions.map((action, index) => {
           const tone = action.tone ?? 'primary';
           const buttonStyle = actionStyleFor(theme, tone, variant);
@@ -110,17 +116,17 @@ const Dialog = props => {
               paddingHorizontal: theme.spacing.lg,
               marginRight: isLast ? 0 : theme.spacing.sm,
               opacity: action.loading ? 0.7 : pressed ? 0.85 : 1
-            }],
+            }, actionButtonStyle],
             children: action.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
               size: "small",
               color: buttonStyle.textColor
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: {
+              style: [{
                 color: buttonStyle.textColor,
                 fontSize: theme.typography.fontSize.base,
                 ...(0, _index.fontFor)(theme, 'semibold'),
                 textAlign: 'center'
-              },
+              }, actionTextStyle],
               numberOfLines: 1,
               children: action.label
             })

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

@@ -33,8 +33,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ref.current?.toggle();
  */
 
-const CLOSE_VELOCITY_THRESHOLD = 1000;
-const DRAG_ACTIVATION_OFFSET = 10;
+const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
+const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
 const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     visible: controlledVisible,
@@ -53,6 +53,9 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const theme = (0, _index.useTheme)();
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const isControlled = typeof controlledVisible === 'boolean';
+  const drawerTokens = theme.components.drawer;
+  const closeVelocityThreshold = drawerTokens?.closeVelocityThreshold ?? DEFAULT_CLOSE_VELOCITY_THRESHOLD;
+  const dragActivationOffset = drawerTokens?.dragActivationOffset ?? DEFAULT_DRAG_ACTIVATION_OFFSET;
   const [windowDims, setWindowDims] = (0, _react.useState)(() => _reactNative.Dimensions.get('window'));
   (0, _react.useEffect)(() => {
     const sub = _reactNative.Dimensions.addEventListener('change', ({
@@ -137,9 +140,9 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     const swipeAllowed = enableSwipe;
     let g = _reactNativeGestureHandler.Gesture.Pan();
     if (isHorizontal) {
-      g = g.activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]);
+      g = g.activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-15, 15]);
     } else {
-      g = g.activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]);
+      g = g.activeOffsetY([-dragActivationOffset, dragActivationOffset]).failOffsetX([-15, 15]);
     }
     return g.onStart(() => {
       'worklet';
@@ -177,9 +180,9 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       //   bottom → positive Y
       let isFastClose = false;
       if (sideValue === 'left' || sideValue === 'top') {
-        isFastClose = velocity < -CLOSE_VELOCITY_THRESHOLD;
+        isFastClose = velocity < -closeVelocityThreshold;
       } else {
-        isFastClose = velocity > CLOSE_VELOCITY_THRESHOLD;
+        isFastClose = velocity > closeVelocityThreshold;
       }
       const closedAbs = Math.abs(closed);
       const traveledClosed = Math.abs(releaseOffset) / closedAbs; // 0 = open, 1 = closed
@@ -192,7 +195,7 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         offset.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
       }
     });
-  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg]);
+  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg, closeVelocityThreshold, dragActivationOffset]);
 
   // ───────── Animated styles ─────────
   const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
@@ -221,9 +224,9 @@ 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;
-    (0, _index2.triggerHaptic)('selection');
+    if (drawerTokens?.backdropPressHaptic) (0, _index2.triggerHaptic)('selection');
     close();
-  }, [enableBackdropPress, close]);
+  }, [enableBackdropPress, close, drawerTokens?.backdropPressHaptic]);
 
   // 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.
@@ -302,7 +305,7 @@ const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        accessibilityRole: 'dialog',
+        accessibilityRole: "alert",
         accessibilityLabel: accessibilityLabel ?? 'Drawer',
         accessibilityViewIsModal: isOpen,
         style: [sideLayout, {