@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -26,7 +26,7 @@ import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTi
 import { Carousel } from "../Carousel/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 
 // Local shape mirror — see types.ts ImageGalleryTokens for the canonical definition.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,6 +46,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -53,8 +54,6 @@ const ImageGallery = ({
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = useState(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const handleIndexChange = useCallback(idx => {
@@ -63,13 +62,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = useCallback(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = useCallback(() => {
-    if (pressHaptic) triggerHaptic('selection');
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = useCallback((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/_jsx(Pressable, {
@@ -123,7 +124,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -212,7 +213,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = useTheme();
   const styles = useMemo(() => buildLightboxStyles(theme), [theme]);
@@ -224,11 +225,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const handleSwipe = useCallback(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) triggerHaptic('selection');
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) triggerHaptic(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = useCallback((image, idx) => /*#__PURE__*/_jsx(ZoomableImage, {
     image: image,
     index: idx,
@@ -238,8 +240,8 @@ const Lightbox = ({
     maxScale: maxScale,
     minScale: minScale,
     doubleTapScale: doubleTapScale,
-    pressHaptic: pressHaptic
-  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, pressHaptic]);
+    haptic: haptic
+  }), [activeIndex, enablePinchZoom, images.length, maxScale, minScale, doubleTapScale, haptic]);
   const caption = images[activeIndex]?.caption;
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
@@ -310,7 +312,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = Dimensions.get('window');
   const scale = useSharedValue(1);
@@ -346,8 +348,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = useCallback(() => {
-    if (pressHaptic) triggerHaptic('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) triggerHaptic('impactLight');
+  }, [haptic]);
   const pinch = useMemo(() => Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 

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";
@@ -22,6 +22,7 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
     contentStyle,
     backdropStyle,
     restoreFocusRef,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -30,7 +31,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 +126,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/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(', ');