@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -98,7 +98,6 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     return () => sub.remove();
   }, []);
   const closedY = screenHeight; // fully off-screen
-  const minSnapPoint = resolvedSnapPoints[0] ?? 0;
   const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
 
   // translateY: 0 = top of screen, screenHeight = fully closed.
@@ -132,6 +131,13 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     currentIndexShared.value = next;
     onChange?.(next);
   }, [currentIndex, currentIndexShared, onChange]);
+  const markAnimationDone = useCallback(() => {
+    isAnimatingRef.current = false;
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
+    }
+  }, [mode, currentIndexShared]);
   const animateTo = useCallback((to, fromIndex, toIndex) => {
     isAnimatingRef.current = true;
     onAnimate?.(fromIndex, toIndex);
@@ -142,14 +148,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
         runOnJS(markAnimationDone)();
       }
     });
-  }, [onAnimate, translateY]);
-  const markAnimationDone = useCallback(() => {
-    isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the sheet wrapper.
-    if (currentIndexShared.value < 0) {
-      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
-    }
-  }, [mode, currentIndexShared]);
+  }, [onAnimate, translateY, markAnimationDone]);
   const expand = useCallback(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;

package/lib/module/components/Box/Box.js

@@ -0,0 +1,156 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const space = (theme, token) => token == null ? undefined : theme.spacing[token];
+export const resolveBoxStyle = (theme, p) => {
+  const style = {};
+  if (p.p != null) style.padding = space(theme, p.p);
+  if (p.px != null) style.paddingHorizontal = space(theme, p.px);
+  if (p.py != null) style.paddingVertical = space(theme, p.py);
+  if (p.pt != null) style.paddingTop = space(theme, p.pt);
+  if (p.pr != null) style.paddingRight = space(theme, p.pr);
+  if (p.pb != null) style.paddingBottom = space(theme, p.pb);
+  if (p.pl != null) style.paddingLeft = space(theme, p.pl);
+  if (p.m != null) style.margin = space(theme, p.m);
+  if (p.mx != null) style.marginHorizontal = space(theme, p.mx);
+  if (p.my != null) style.marginVertical = space(theme, p.my);
+  if (p.mt != null) style.marginTop = space(theme, p.mt);
+  if (p.mr != null) style.marginRight = space(theme, p.mr);
+  if (p.mb != null) style.marginBottom = space(theme, p.mb);
+  if (p.ml != null) style.marginLeft = space(theme, p.ml);
+  if (p.gap != null) style.gap = space(theme, p.gap);
+  if (p.bg != null) {
+    const bgTokens = theme.colors.background;
+    style.backgroundColor = bgTokens[p.bg] ?? p.bg;
+  }
+  if (p.radius != null) style.borderRadius = theme.radius[p.radius];
+  if (p.border) {
+    style.borderWidth = theme.colors.border.width;
+    style.borderColor = theme.colors.border.primary;
+  }
+  if (p.flex != null) style.flex = p.flex;
+  if (p.align != null) style.alignItems = p.align;
+  if (p.justify != null) style.justifyContent = p.justify;
+  if (p.direction != null) style.flexDirection = p.direction;
+  if (p.wrap) style.flexWrap = 'wrap';
+  return style;
+};
+const Box = /*#__PURE__*/forwardRef((props, ref) => {
+  const theme = useTheme();
+  const {
+    // layout props consumed by the resolver — kept out of the View spread
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap,
+    style,
+    children,
+    ...viewProps
+  } = props;
+  const boxStyle = resolveBoxStyle(theme, {
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    gap,
+    bg,
+    radius,
+    border,
+    flex,
+    align,
+    justify,
+    direction,
+    wrap
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [boxStyle, style],
+    ...viewProps,
+    children: children
+  });
+});
+Box.displayName = 'Box';
+/** Vertical flex container with token spacing between children (default gap `md`). */
+const Stack = /*#__PURE__*/forwardRef(({
+  gap = 'md',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Box, {
+  ref: ref,
+  direction: "column",
+  gap: gap,
+  ...rest
+}));
+Stack.displayName = 'Stack';
+/** Horizontal flex container (default `align="center"`, gap `sm`). */
+const Row = /*#__PURE__*/forwardRef(({
+  gap = 'sm',
+  align = 'center',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Box, {
+  ref: ref,
+  direction: "row",
+  gap: gap,
+  align: align,
+  ...rest
+}));
+Row.displayName = 'Row';
+/** Fixed gap (`size`) or a flexible push (`flex: 1`) between siblings. */
+const Spacer = ({
+  size,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  if (size != null) {
+    const value = theme.spacing[size];
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: [{
+        width: value,
+        height: value
+      }, style]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: [{
+      flex: 1
+    }, style]
+  });
+};
+Spacer.displayName = 'Spacer';
+export { Box, Stack, Row, Spacer };
+export default Box;
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Box, Stack, Row, Spacer, resolveBoxStyle } from "./Box.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/Button/Button.js

@@ -67,7 +67,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     style: styles.contentRow,
     children: loading ? /*#__PURE__*/_jsx(Spinner, {
       variant: "circular",
-      size: "small",
+      size: "sm",
       color: variantStyles.textColor,
       accessibilityLabel: "Loading"
     }) : /*#__PURE__*/_jsxs(_Fragment, {
@@ -184,7 +184,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.primary,
         hover: theme.colors.primaryHover,
         pressed: theme.colors.primaryPressed,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onPrimary,
         muted: theme.colors.primaryMuted
       };
     case 'secondary':
@@ -192,7 +192,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.secondary,
         hover: theme.colors.secondaryHover,
         pressed: theme.colors.secondaryHover,
-        on: theme.colors.text.primary,
+        on: theme.colors.onSecondary,
         muted: theme.colors.secondary
       };
     case 'success':
@@ -200,7 +200,7 @@ const toneFor = (theme, tone) => {
         base: theme.colors.success,
         hover: theme.colors.success,
         pressed: theme.colors.success,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onSuccess,
         muted: theme.colors.background.secondary
       };
     case 'warning':
@@ -208,15 +208,15 @@ const toneFor = (theme, tone) => {
         base: theme.colors.warning,
         hover: theme.colors.warning,
         pressed: theme.colors.warning,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onWarning,
         muted: theme.colors.background.secondary
       };
-    case 'danger':
+    case 'error':
       return {
         base: theme.colors.error,
         hover: theme.colors.error,
         pressed: theme.colors.error,
-        on: theme.colors.text.inverse,
+        on: theme.colors.onError,
         muted: theme.colors.background.secondary
       };
     case 'neutral':

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

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

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

@@ -3,7 +3,8 @@
 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 { triggerHaptic } from "../../utils/hapticUtils.js";
+import { useControllableState } from "../../hooks/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   sm: 16,
@@ -26,6 +27,7 @@ const toneColor = (theme, tone) => {
 const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     checked,
+    defaultChecked,
     onChange,
     indeterminate = false,
     disabled = false,
@@ -33,7 +35,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
     boxStyle,
     checkIconStyle,
@@ -43,22 +45,29 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     testID,
     ...rest
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+    onChange
+  });
   const theme = useTheme();
   const styles = 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 = useRef(createAnimatedValue(isActive ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, {
+    const anim = 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],
@@ -66,8 +75,9 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false && theme.components.checkbox?.pressHaptic) triggerHaptic(haptic);
-    onChange(!checked);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+    setCurrent(!current);
     rest.onPressOut?.(event);
   };
   const accessibleLabel = accessibilityLabel ?? label;
@@ -84,7 +94,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityRole: "checkbox",
     accessibilityLabel: accessibleLabel,
     accessibilityState: {
-      checked: indeterminate ? 'mixed' : checked,
+      checked: indeterminate ? 'mixed' : current,
       disabled
     },
     testID: testID,

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,20 +4,20 @@ 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";
 
 /**
  * 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.
  */
@@ -99,7 +99,7 @@ const buildDecadeCells = anchorYear => {
 const DatePicker = props => {
   const {
     value,
-    onSelect,
+    onChange,
     onClose,
     minDate,
     maxDate,
@@ -115,6 +115,7 @@ const DatePicker = props => {
     headerLabelStyle,
     navButtonStyle,
     footerButtonStyle,
+    haptic,
     testID,
     label,
     placeholder,
@@ -174,7 +175,7 @@ const DatePicker = props => {
     if (open) {
       backdrop.setValue(0);
       setNativeValue(sheet, 0);
-      Animated.parallel([Animated.timing(backdrop, {
+      const anim = Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
@@ -185,7 +186,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 = useMemo(() => {
@@ -228,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;
@@ -259,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(() => {
@@ -303,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, {
@@ -321,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));
@@ -350,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?.();
@@ -379,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');
-    onSelect?.(pendingDate);
+    if (haptic !== false) 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]