@webority-technologies/mobile 0.0.23 → 0.0.25

package/lib/module/components/ListItem/ListItem.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 { Swipeable } from "../Swipeable/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -64,6 +64,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     left,
     right,
     onPress,
+    haptic,
     selected = false,
     disabled = false,
     size = 'md',
@@ -83,7 +84,6 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const theme = useTheme();
-  const pressHaptic = theme.components.listItem?.pressHaptic ?? false;
   const sz = useMemo(() => sizeFor(theme, size), [theme, size]);
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const isInteractive = !!onPress && !disabled;
@@ -96,7 +96,8 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (!isInteractive) return;
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onPress?.(event);
   };
   const a11yLabel = accessibilityLabel ?? title;
@@ -291,7 +292,7 @@ const buildStyles = theme => StyleSheet.create({
     backgroundColor: theme.colors.surface.pressed
   },
   disabled: {
-    opacity: 0.6
+    opacity: 0.55
   },
   leftSlot: {
     marginRight: theme.spacing.md,

package/lib/module/components/Modal/Modal.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'reac
 import { AccessibilityInfo, Animated, Dimensions, findNodeHandle, Modal as RNModal, Pressable, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 
 // Local shape mirror — see types.ts ModalTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,7 +13,6 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
     visible,
     onRequestClose,
     presentation = 'centered',
-    backdropOpacity = 0.5,
     backdropPressClose = true,
     animationDuration,
     accessibilityLabel,
@@ -22,6 +21,7 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
     contentStyle,
     backdropStyle,
     restoreFocusRef,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -30,7 +30,6 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const screenHeight = Dimensions.get('window').height;
   const modalTokens = theme.components.modal;
   const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
-  const backdropHaptic = modalTokens?.backdropHaptic ?? false;
   const backdropAnim = useRef(createAnimatedValue(0)).current;
   const scaleAnim = useRef(createAnimatedValue(scaleStartValue)).current;
   const opacityAnim = useRef(createAnimatedValue(0)).current;
@@ -126,9 +125,10 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   }, [visible, duration, restoreFocusRef]);
   const handleBackdropPress = useCallback(() => {
     if (!backdropPressClose) return;
-    if (backdropHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     onRequestClose();
-  }, [backdropPressClose, onRequestClose, backdropHaptic]);
+  }, [backdropPressClose, onRequestClose, haptic]);
   const handleHardwareBack = useCallback(() => {
     if (hardwareBackPress) {
       onRequestClose();

package/lib/module/components/NumberInput/NumberInput.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useControllableState } from "../../hooks/index.js";
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_LONG_PRESS_DELAY = 500;
@@ -58,6 +58,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     variant = 'inline',
     unit,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -81,7 +82,6 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const longPressDelay = theme.components.numberInput?.longPressDelayMs ?? DEFAULT_LONG_PRESS_DELAY;
   const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
-  const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = useRef(null);
   const [draft, setDraft] = useState(formatValue(current, allowDecimal, precision));
   const [editing, setEditing] = useState(false);
@@ -116,14 +116,16 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   }, [allowDecimal, max, min, setCurrent, precision, current]);
   const decrement = useCallback(() => {
     if (!interactive || atMin) return;
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setExternal(current - step);
-  }, [atMin, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMin, interactive, haptic, setExternal, step, current]);
   const increment = useCallback(() => {
     if (!interactive || atMax) return;
-    if (pressHaptic) triggerHaptic('impactLight');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setExternal(current + step);
-  }, [atMax, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMax, interactive, haptic, setExternal, step, current]);
   React.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),

package/lib/module/components/OTPInput/OTPInput.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { useReducedMotion, useControllableState } from "../../hooks/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { FieldBase } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -47,6 +47,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     error,
     size = 'md',
     secure = false,
+    haptic,
     accessibilityLabel,
     style,
     cellStyle,
@@ -89,8 +90,6 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   const previousFocusedIndexRef = useRef(-1);
   const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
   const reduceMotion = useReducedMotion();
-  const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
-  const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
   const hasError = Boolean(error);
   const errorMessage = typeof error === 'string' ? error : undefined;
 
@@ -100,7 +99,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     const isFirstRun = previousErrorRef.current === null;
     let anim;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (errorHaptic) triggerHaptic('notificationError');
+      if (haptic !== false) triggerHaptic('notificationError');
       if (shakeOnError && !reduceMotion) {
         setNativeValue(shake, 0);
         anim = Animated.sequence([Animated.timing(shake, {
@@ -129,7 +128,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     }
     previousErrorRef.current = hasError;
     return () => anim?.stop();
-  }, [hasError, shake, shakeOnError, errorHaptic]);
+  }, [hasError, shake, shakeOnError, haptic]);
 
   // Animate underline opacity for the focused cell. Skip on first mount
   // (no prior focus state) — values are already at 0 and there's nothing to animate.
@@ -225,8 +224,9 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     const next = chars.join('').slice(0, length);
     const previousLength = current.length;
     updateValue(next);
-    if (next.length !== previousLength && selectionHaptic) {
-      triggerHaptic('selection');
+    if (next.length !== previousLength) {
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
     }
 
     // Move focus to the next empty cell or last cell.
@@ -236,7 +236,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, current]);
+  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
   const handleKeyPress = useCallback((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;

package/lib/module/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
+import { useTheme, createAnimatedValue, setNativeValue, Gradient } from "../../theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const toneColor = (theme, tone) => {
   switch (tone) {
@@ -33,6 +33,8 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'primary',
     trackColor,
     barColor,
+    gradient,
+    segments,
     animated = true,
     style,
     containerStyle,
@@ -53,6 +55,12 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
   const resolvedBar = barColor ?? toneColor(theme, tone);
+  const resolvedGradient = useMemo(() => {
+    if (!gradient) return null;
+    if (typeof gradient === 'string') return theme.gradients[gradient] ?? null;
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
   useEffect(() => {
     if (isIndeterminate) return;
     if (!animated) {
@@ -111,7 +119,18 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
     }, style, containerStyle],
-    children: isIndeterminate ? /*#__PURE__*/_jsx(Animated.View, {
+    children: hasSegments ? /*#__PURE__*/_jsx(View, {
+      style: [styles.segments, {
+        height
+      }],
+      children: (segments ?? []).map((s, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${clampProgress(s.value) * 100}%`,
+          height,
+          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
+        }
+      }, i))
+    }) : isIndeterminate ? /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
@@ -125,9 +144,14 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
-        backgroundColor: resolvedBar,
-        width: determinateWidth
-      }, barStyle]
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/_jsx(Gradient, {
+        gradient: resolvedGradient,
+        style: StyleSheet.absoluteFill
+      }) : null
     })
   });
 });
@@ -146,6 +170,10 @@ const buildStyles = _theme => StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
   }
 });
 export { ProgressBar };

package/lib/module/components/Radio/Radio.js

@@ -3,7 +3,7 @@
 import React, { createContext, forwardRef, useContext, 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 { triggerHaptic, resolveHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RadioGroupContext = /*#__PURE__*/createContext(null);
 export const useRadioGroup = () => useContext(RadioGroupContext);
@@ -64,8 +64,6 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
   const radioBorderWidth = theme.colors.border.width;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
-  const pressHapticEnabled = theme.components.radio?.pressHaptic ?? false;
-  const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = useRef(createAnimatedValue(selected ? 1 : 0)).current;
   useEffect(() => {
     const anim = Animated.spring(progress, {
@@ -84,7 +82,8 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const handlePress = event => {
     if (disabled) return;
-    if (resolvedHaptic !== false) triggerHaptic(resolvedHaptic);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (ctx) {
       ctx.onChange(value);
     } else {

package/lib/module/components/Rating/Rating.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from "../../theme/index.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 sizePxMap = {
@@ -80,6 +80,7 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
     tone = 'warning',
     label,
     loading = false,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -116,7 +117,6 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   }, [max]);
   const pulseOnPress = theme.components.rating?.pulseOnPress ?? false;
   const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
-  const pressHapticEnabled = theme.components.rating?.pressHaptic ?? false;
   const pulse = useCallback(idx => {
     const v = scaleRefs[idx];
     if (!v) return;
@@ -136,10 +136,11 @@ const Rating = /*#__PURE__*/forwardRef((props, ref) => {
   const commit = useCallback((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    if (pressHapticEnabled) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (pulseOnPress && typeof animatedIndex === 'number') pulse(animatedIndex);
     onChange(cleaned);
-  }, [interactive, onChange, max, step, pulse, pressHapticEnabled, pulseOnPress]);
+  }, [interactive, onChange, max, step, pulse, haptic, pulseOnPress]);
   const handleStarPress = useCallback(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;

package/lib/module/components/SearchBar/SearchBar.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,6 +24,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     size = 'md',
     variant: variantProp,
     cancelLabel = 'Cancel',
+    haptic,
     style,
     accessibilityLabel,
     testID,
@@ -92,16 +93,18 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     onChangeText(text);
   }, [debounceMs, onChangeText]);
   const handleClear = useCallback(() => {
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
     }
     onChangeText('');
     onClear?.();
-  }, [debounceMs, onChangeText, onClear]);
+  }, [haptic, debounceMs, onChangeText, onClear]);
   const handleCancel = useCallback(() => {
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
@@ -109,7 +112,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     onChangeText('');
     setIsFocused(false);
     onCancel?.();
-  }, [debounceMs, onChangeText, onCancel]);
+  }, [haptic, debounceMs, onChangeText, onCancel]);
   const handleSubmit = useCallback(() => {
     onSubmit?.(debounceMs !== undefined ? internalValue : value);
   }, [onSubmit, debounceMs, internalValue, value]);

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -11,7 +11,7 @@
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { triggerHaptic, resolveHaptic } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -37,6 +37,7 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
     fullWidth = true,
     disabled = false,
     tone = 'primary',
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -61,7 +62,6 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
     paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
   };
   const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
-  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // Track width is measured from onLayout. Thumb width is a regular number (not
   // animated) — `width` cannot be driven by the native animated module, and mixing
@@ -102,9 +102,10 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
   const handlePress = useCallback(segment => {
     if (disabled) return;
     if (segment.value === current) return;
-    if (changeHapticEnabled) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setCurrent(segment.value);
-  }, [disabled, setCurrent, current, changeHapticEnabled]);
+  }, [disabled, setCurrent, current, haptic]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/_jsxs(View, {

package/lib/module/components/Select/Select.js

@@ -12,7 +12,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // `unknown` here keeps the forwardRef signature non-generic — consumers who
@@ -27,6 +27,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     getOptionDescription,
     placeholder,
     searchable = false,
+    haptic,
     label,
     error,
     disabled = false,
@@ -114,9 +115,10 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = useCallback(() => {
     if (disabled) return;
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setOpen(true);
-  }, [disabled]);
+  }, [disabled, haptic]);
   const handleClose = useCallback(() => {
     setOpen(false);
     setQuery('');
@@ -124,7 +126,8 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const handleSelect = useCallback(option => {
     if (disabledOf(option)) return;
     const optValue = valueOf(option);
-    triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     if (multi) {
       const current = props.value ?? [];
       const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
@@ -133,7 +136,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     }
     props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf]);
+  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
 
   // Trigger label / placeholder text.
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');