@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -51,6 +51,7 @@ const ImageGallery = ({
   enableLightbox = true,
   enablePinchZoom = true,
   onIndexChange,
+  haptic,
   loading = false,
   accessibilityLabel,
   containerStyle,
@@ -58,8 +59,6 @@ const ImageGallery = ({
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const galleryTokens = theme.components.imageGallery;
-  const pressHaptic = galleryTokens?.pressHaptic ?? false;
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(clamp(initialIndex, 0, Math.max(0, images.length - 1)));
   const [lightboxOpen, setLightboxOpen] = (0, _react.useState)(false);
   const handleIndexChange = (0, _react.useCallback)(idx => {
@@ -68,13 +67,15 @@ const ImageGallery = ({
   }, [onIndexChange]);
   const openLightbox = (0, _react.useCallback)(() => {
     if (!enableLightbox) return;
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(true);
-  }, [enableLightbox, pressHaptic]);
+  }, [enableLightbox, haptic]);
   const closeLightbox = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+    const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index4.triggerHaptic)(h);
     setLightboxOpen(false);
-  }, [pressHaptic]);
+  }, [haptic]);
   const renderImage = (0, _react.useCallback)((image, idx) => {
     const a11y = image.alt ?? `Image ${idx + 1} of ${images.length}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
@@ -128,7 +129,7 @@ const ImageGallery = ({
       showCounter: showCounter,
       onClose: closeLightbox,
       onIndexChange: handleIndexChange,
-      pressHaptic: pressHaptic
+      haptic: haptic
     }) : null]
   });
   if (loading) {
@@ -218,7 +219,7 @@ const Lightbox = ({
   showCounter,
   onClose,
   onIndexChange,
-  pressHaptic
+  haptic
 }) => {
   const theme = (0, _index3.useTheme)();
   const styles = (0, _react.useMemo)(() => buildLightboxStyles(theme), [theme]);
@@ -230,11 +231,12 @@ const Lightbox = ({
   const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
   const handleSwipe = (0, _react.useCallback)(idx => {
     if (idx !== activeIndex) {
-      if (pressHaptic) (0, _index4.triggerHaptic)('selection');
+      const h = (0, _index4.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _index4.triggerHaptic)(h);
       setActiveIndex(idx);
       onIndexChange(idx);
     }
-  }, [activeIndex, onIndexChange, pressHaptic]);
+  }, [activeIndex, onIndexChange, haptic]);
   const renderItem = (0, _react.useCallback)((image, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomableImage, {
     image: image,
     index: idx,
@@ -244,8 +246,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__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
@@ -316,7 +318,7 @@ const ZoomableImage = ({
   maxScale,
   minScale,
   doubleTapScale,
-  pressHaptic
+  haptic
 }) => {
   const screen = _reactNative.Dimensions.get('window');
   const scale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -352,8 +354,8 @@ const ZoomableImage = ({
     }
   }, [active, scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY]);
   const triggerImpact = (0, _react.useCallback)(() => {
-    if (pressHaptic) (0, _index4.triggerHaptic)('impactLight');
-  }, [pressHaptic]);
+    if (haptic !== false) (0, _index4.triggerHaptic)('impactLight');
+  }, [haptic]);
   const pinch = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pinch().enabled(enabled).onStart(() => {
     'worklet';
 

package/lib/commonjs/components/ListItem/ListItem.js

@@ -69,6 +69,7 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     left,
     right,
     onPress,
+    haptic,
     selected = false,
     disabled = false,
     size = 'md',
@@ -88,7 +89,6 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const pressHaptic = theme.components.listItem?.pressHaptic ?? false;
   const sz = (0, _react.useMemo)(() => sizeFor(theme, size), [theme, size]);
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const isInteractive = !!onPress && !disabled;
@@ -101,7 +101,8 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
   });
   const handlePress = event => {
     if (!isInteractive) return;
-    if (pressHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onPress?.(event);
   };
   const a11yLabel = accessibilityLabel ?? title;
@@ -296,7 +297,7 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
     backgroundColor: theme.colors.surface.pressed
   },
   disabled: {
-    opacity: 0.6
+    opacity: 0.55
   },
   leftSlot: {
     marginRight: theme.spacing.md,

package/lib/commonjs/components/Modal/Modal.js

@@ -27,6 +27,7 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     contentStyle,
     backdropStyle,
     restoreFocusRef,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -35,7 +36,6 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const screenHeight = _reactNative.Dimensions.get('window').height;
   const modalTokens = theme.components.modal;
   const scaleStartValue = modalTokens?.scaleStartValue ?? 0.9;
-  const backdropHaptic = modalTokens?.backdropHaptic ?? false;
   const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(scaleStartValue)).current;
   const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
@@ -131,9 +131,10 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   }, [visible, duration, restoreFocusRef]);
   const handleBackdropPress = (0, _react.useCallback)(() => {
     if (!backdropPressClose) return;
-    if (backdropHaptic) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     onRequestClose();
-  }, [backdropPressClose, onRequestClose, backdropHaptic]);
+  }, [backdropPressClose, onRequestClose, haptic]);
   const handleHardwareBack = (0, _react.useCallback)(() => {
     if (hardwareBackPress) {
       onRequestClose();

package/lib/commonjs/components/NumberInput/NumberInput.js

@@ -63,6 +63,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     size = 'md',
     variant = 'inline',
     unit,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -86,7 +87,6 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   const styles = (0, _react.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 = (0, _react.useRef)(null);
   const [draft, setDraft] = (0, _react.useState)(formatValue(current, allowDecimal, precision));
   const [editing, setEditing] = (0, _react.useState)(false);
@@ -121,14 +121,16 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [allowDecimal, max, min, setCurrent, precision, current]);
   const decrement = (0, _react.useCallback)(() => {
     if (!interactive || atMin) return;
-    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index3.triggerHaptic)(h);
     setExternal(current - step);
-  }, [atMin, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMin, interactive, haptic, setExternal, step, current]);
   const increment = (0, _react.useCallback)(() => {
     if (!interactive || atMax) return;
-    if (pressHaptic) (0, _index3.triggerHaptic)('impactLight');
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index3.triggerHaptic)(h);
     setExternal(current + step);
-  }, [atMax, interactive, pressHaptic, setExternal, step, current]);
+  }, [atMax, interactive, haptic, setExternal, step, current]);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -52,6 +52,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     error,
     size = 'md',
     secure = false,
+    haptic,
     accessibilityLabel,
     style,
     cellStyle,
@@ -94,8 +95,6 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   const previousFocusedIndexRef = (0, _react.useRef)(-1);
   const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
   const reduceMotion = (0, _index2.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;
 
@@ -105,7 +104,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const isFirstRun = previousErrorRef.current === null;
     let anim;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (errorHaptic) (0, _index3.triggerHaptic)('notificationError');
+      if (haptic !== false) (0, _index3.triggerHaptic)('notificationError');
       if (shakeOnError && !reduceMotion) {
         (0, _index.setNativeValue)(shake, 0);
         anim = _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
@@ -134,7 +133,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     }
     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.
@@ -230,8 +229,9 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const next = chars.join('').slice(0, length);
     const previousLength = current.length;
     updateValue(next);
-    if (next.length !== previousLength && selectionHaptic) {
-      (0, _index3.triggerHaptic)('selection');
+    if (next.length !== previousLength) {
+      const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+      if (h) (0, _index3.triggerHaptic)(h);
     }
 
     // Move focus to the next empty cell or last cell.
@@ -241,7 +241,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, current]);
+  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
   const handleKeyPress = (0, _react.useCallback)((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;

package/lib/commonjs/components/Radio/Radio.js

@@ -70,8 +70,6 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     const anim = _reactNative.Animated.spring(progress, {
@@ -90,7 +88,8 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   });
   const handlePress = event => {
     if (disabled) return;
-    if (resolvedHaptic !== false) (0, _hapticUtils.triggerHaptic)(resolvedHaptic);
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (ctx) {
       ctx.onChange(value);
     } else {

package/lib/commonjs/components/Rating/Rating.js

@@ -85,6 +85,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     tone = 'warning',
     label,
     loading = false,
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -121,7 +122,6 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(idx => {
     const v = scaleRefs[idx];
     if (!v) return;
@@ -141,10 +141,11 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const commit = (0, _react.useCallback)((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.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 = (0, _react.useCallback)(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -29,6 +29,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     size = 'md',
     variant: variantProp,
     cancelLabel = 'Cancel',
+    haptic,
     style,
     accessibilityLabel,
     testID,
@@ -97,16 +98,18 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     onChangeText(text);
   }, [debounceMs, onChangeText]);
   const handleClear = (0, _react.useCallback)(() => {
-    (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
     }
     onChangeText('');
     onClear?.();
-  }, [debounceMs, onChangeText, onClear]);
+  }, [haptic, debounceMs, onChangeText, onClear]);
   const handleCancel = (0, _react.useCallback)(() => {
-    (0, _hapticUtils.triggerHaptic)('selection');
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _hapticUtils.triggerHaptic)(h);
     if (debounceMs !== undefined) {
       setInternalValue('');
       lastSentRef.current = '';
@@ -114,7 +117,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     onChangeText('');
     setIsFocused(false);
     onCancel?.();
-  }, [debounceMs, onChangeText, onCancel]);
+  }, [haptic, debounceMs, onChangeText, onCancel]);
   const handleSubmit = (0, _react.useCallback)(() => {
     onSubmit?.(debounceMs !== undefined ? internalValue : value);
   }, [onSubmit, debounceMs, internalValue, value]);

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -42,6 +42,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     fullWidth = true,
     disabled = false,
     tone = 'primary',
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -66,7 +67,6 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     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
@@ -107,9 +107,10 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
     if (segment.value === current) return;
-    if (changeHapticEnabled) (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {

package/lib/commonjs/components/Select/Select.js

@@ -32,6 +32,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     getOptionDescription,
     placeholder,
     searchable = false,
+    haptic,
     label,
     error,
     disabled = false,
@@ -119,9 +120,10 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = (0, _react.useCallback)(() => {
     if (disabled) return;
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setOpen(true);
-  }, [disabled]);
+  }, [disabled, haptic]);
   const handleClose = (0, _react.useCallback)(() => {
     setOpen(false);
     setQuery('');
@@ -129,7 +131,8 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const handleSelect = (0, _react.useCallback)(option => {
     if (disabledOf(option)) return;
     const optValue = valueOf(option);
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     if (multi) {
       const current = props.value ?? [];
       const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
@@ -138,7 +141,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.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(', ');