@webority-technologies/mobile 0.0.23 → 0.0.24

package/lib/commonjs/components/Slider/Slider.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Slider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
 var _index3 = require("../../hooks/index.js");
@@ -35,7 +37,6 @@ const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const snapToStep = (value, min, max, step) => {
   if (step <= 0) return clamp(value, min, max);
   const stepped = Math.round((value - min) / step) * step + min;
-  // Guard against floating-point drift.
   const decimals = String(step).split('.')[1]?.length ?? 0;
   const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
   return clamp(fixed, min, max);
@@ -52,6 +53,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     showLabel = false,
     formatLabel = defaultFormatLabel,
     accessibilityLabel,
+    haptic,
     style,
     containerStyle,
     trackStyle,
@@ -66,17 +68,20 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const theme = (0, _index.useTheme)();
   const sliderTheme = theme.components.slider;
   const sliderSizeTheme = sliderTheme?.[size];
-  const sizeCfg = {
+  const sizeCfg = (0, _react.useMemo)(() => ({
     trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
     thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
-  };
+  }), [sliderSizeTheme, size]);
   const thumbPressAnimationEnabled = sliderTheme?.thumbPressAnimation ?? false;
   const resolvedPressScale = thumbPressScale ?? sliderTheme?.thumbPressScale ?? 1.1;
   const resolvedLabelDuration = labelShowDuration ?? sliderTheme?.labelShowDuration ?? theme.motion.duration.fast;
   const resolvedLabelOpacity = labelOpacityProp ?? sliderTheme?.labelOpacity ?? 1;
   const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
-
-  // Track layout (width + x offset within container)
+  const springCfg = (0, _react.useMemo)(() => ({
+    damping: theme.motion.spring.snappy.damping,
+    stiffness: theme.motion.spring.snappy.stiffness,
+    mass: theme.motion.spring.snappy.mass
+  }), [theme.motion.spring.snappy]);
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
   const isRange = props.range === true;
@@ -86,217 +91,218 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     onChange: props.onChange
   });
 
-  // Current value is mirrored in refs so PanResponder closures get fresh values.
-  const lowRef = (0, _react.useRef)(isRange ? currentValue[0] : currentValue);
-  const highRef = (0, _react.useRef)(isRange ? currentValue[1] : currentValue);
-  const lastReportedLow = (0, _react.useRef)(lowRef.current);
-  const lastReportedHigh = (0, _react.useRef)(highRef.current);
-
-  // Animated x positions (px) for thumbs.
-  const lowX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const highX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-
-  // Press / drag scale animations.
-  const lowScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
-  const highScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
-
-  // Label opacity per thumb.
-  const lowLabelOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const highLabelOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  // ───────── Shared values (UI thread) ─────────
+  // lowX/highX: thumb px positions. lowVal/highVal: their snapped numeric values
+  // (mirrored on the UI thread so worklets can clamp the range + detect changes).
+  const lowX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const highX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lowVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[0] : currentValue);
+  const highVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[1] : currentValue);
+  const dragStartX = (0, _reactNativeReanimated.useSharedValue)(0);
+  const trackW = (0, _reactNativeReanimated.useSharedValue)(0);
+  const lowScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const highScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  const lowLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  const highLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(0);
 
-  // Track which thumb is actively dragging (to anchor gesture math).
-  const dragOffsetRef = (0, _react.useRef)(0);
-
-  // Derived helper: convert value -> px on track.
+  // Float-drift guard precision for step snapping (e.g. step 0.1 -> precision 10).
+  const precision = (0, _react.useMemo)(() => {
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Math.pow(10, decimals);
+  }, [step]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(lowX);
+      (0, _reactNativeReanimated.cancelAnimation)(highX);
+      (0, _reactNativeReanimated.cancelAnimation)(lowScale);
+      (0, _reactNativeReanimated.cancelAnimation)(highScale);
+      (0, _reactNativeReanimated.cancelAnimation)(lowLabelOpacity);
+      (0, _reactNativeReanimated.cancelAnimation)(highLabelOpacity);
+    };
+  }, [lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
   const valueToPx = (0, _react.useCallback)((value, width) => {
     if (max === min || width <= 0) return 0;
-    const ratio = (value - min) / (max - min);
-    return ratio * width;
+    return (value - min) / (max - min) * width;
   }, [min, max]);
-
-  // Derived helper: convert px -> snapped value.
   const pxToValue = (0, _react.useCallback)((px, width) => {
     if (width <= 0) return min;
     const ratio = clamp(px / width, 0, 1);
-    const raw = min + ratio * (max - min);
-    return snapToStep(raw, min, max, step);
+    return snapToStep(min + ratio * (max - min), min, max, step);
   }, [min, max, step]);
 
-  // Sync external value -> animated values.
+  // Sync external value -> shared values (controlled updates, value prop changes).
   (0, _react.useEffect)(() => {
     if (trackWidth <= 0) return;
     if (isRange) {
       const [v0, v1] = currentValue;
       const lo = Math.min(v0, v1);
       const hi = Math.max(v0, v1);
-      lowRef.current = lo;
-      highRef.current = hi;
-      lastReportedLow.current = lo;
-      lastReportedHigh.current = hi;
-      (0, _index.setNativeValue)(lowX, valueToPx(lo, trackWidth));
-      (0, _index.setNativeValue)(highX, valueToPx(hi, trackWidth));
+      lowVal.value = lo;
+      highVal.value = hi;
+      lowX.value = valueToPx(lo, trackWidth);
+      highX.value = valueToPx(hi, trackWidth);
     } else {
       const v = currentValue;
-      lowRef.current = v;
-      highRef.current = v;
-      lastReportedLow.current = v;
-      (0, _index.setNativeValue)(lowX, valueToPx(v, trackWidth));
+      lowVal.value = v;
+      highVal.value = v;
+      lowX.value = valueToPx(v, trackWidth);
     }
-    // We intentionally listen to the value across both shapes via JSON; ESLint is fine.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(currentValue), trackWidth, isRange, valueToPx]);
   const onTrackLayout = (0, _react.useCallback)(e => {
     const w = e.nativeEvent.layout.width;
+    trackW.value = w;
     setTrackWidth(w);
-    // Initialize positions immediately.
-    if (isRange) {
-      const [v0, v1] = currentValue;
-      const lo = Math.min(v0, v1);
-      const hi = Math.max(v0, v1);
-      (0, _index.setNativeValue)(lowX, valueToPx(lo, w));
-      (0, _index.setNativeValue)(highX, valueToPx(hi, w));
-    } else {
-      (0, _index.setNativeValue)(lowX, valueToPx(currentValue, w));
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isRange, valueToPx]);
+  }, [trackW]);
   const fireChange = (0, _react.useCallback)((lo, hi) => {
     setCurrentValue(isRange ? [lo, hi] : lo);
   }, [isRange, setCurrentValue]);
-  const animateThumbPress = (0, _react.useCallback)((target, opacity, pressed) => {
-    if (thumbPressAnimationEnabled) {
-      _reactNative.Animated.spring(target, {
-        toValue: pressed ? resolvedPressScale : 1,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      }).start();
-    }
-    if (showLabel) {
-      _reactNative.Animated.timing(opacity, {
-        toValue: pressed ? resolvedLabelOpacity : 0,
-        duration: resolvedLabelDuration,
-        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: true
-      }).start();
-    }
-  }, [showLabel, theme.motion, thumbPressAnimationEnabled, resolvedPressScale, resolvedLabelDuration, resolvedLabelOpacity]);
+  const fireHaptic = (0, _react.useCallback)(() => {
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
+  }, [haptic]);
 
-  // Build PanResponder for a thumb.
-  const buildResponder = (0, _react.useCallback)(which => {
-    return _reactNative.PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled,
-      onMoveShouldSetPanResponder: () => !disabled,
-      onPanResponderGrant: () => {
-        dragOffsetRef.current = which === 'low' ? valueToPx(lowRef.current, trackWidth) : valueToPx(highRef.current, trackWidth);
-        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, true);
-        if (sliderTheme?.dragHaptic ?? false) (0, _index2.triggerHaptic)('selection');
-      },
-      onPanResponderMove: (_evt, gesture) => {
-        if (trackWidth <= 0) return;
-        const nextPx = clamp(dragOffsetRef.current + gesture.dx, 0, trackWidth);
-        let nextValue = pxToValue(nextPx, trackWidth);
+  // ───────── Pan gesture per thumb (UI thread) ─────────
+  const buildPan = (0, _react.useCallback)(which => {
+    const xSV = which === 'low' ? lowX : highX;
+    const valSV = which === 'low' ? lowVal : highVal;
+    const otherSV = which === 'low' ? highVal : lowVal;
+    const scaleSV = which === 'low' ? lowScale : highScale;
+    const labelSV = which === 'low' ? lowLabelOpacity : highLabelOpacity;
+    const isLow = which === 'low';
+    const _min = min;
+    const _max = max;
+    const _step = step;
+    const _precision = precision;
+    const _range = isRange;
+    const _pressScale = resolvedPressScale;
+    const _pressAnim = thumbPressAnimationEnabled;
+    const _showLabel = showLabel;
+    const _labelOpacity = resolvedLabelOpacity;
+    const _labelDur = resolvedLabelDuration;
+    const _spring = springCfg;
+    return _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).minDistance(0).onStart(() => {
+      'worklet';
 
-        // Only touch the native driver + fire onChange when the snapped value
-        // actually changes — between step boundaries the drag is a visual
-        // no-op (px is derived from the snapped value), so this drops the
-        // per-frame native round-trip and per-frame consumer re-render.
-        if (which === 'low') {
-          if (isRange && nextValue > highRef.current) nextValue = highRef.current;
-          if (nextValue !== lastReportedLow.current) {
-            if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
-            lastReportedLow.current = nextValue;
-            lowRef.current = nextValue;
-            (0, _index.setNativeValue)(lowX, valueToPx(nextValue, trackWidth));
-            fireChange(nextValue, highRef.current);
-          }
-        } else {
-          if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
-          if (nextValue !== lastReportedHigh.current) {
-            if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
-            lastReportedHigh.current = nextValue;
-            highRef.current = nextValue;
-            (0, _index.setNativeValue)(highX, valueToPx(nextValue, trackWidth));
-            fireChange(lowRef.current, nextValue);
-          }
-        }
-      },
-      onPanResponderRelease: () => {
-        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, false);
-      },
-      onPanResponderTerminate: () => {
-        animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, false);
+      dragStartX.value = xSV.value;
+      if (_pressAnim) scaleSV.value = (0, _reactNativeReanimated.withSpring)(_pressScale, _spring);
+      if (_showLabel) {
+        labelSV.value = (0, _reactNativeReanimated.withTiming)(_labelOpacity, {
+          duration: _labelDur,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+        });
       }
-    });
-  }, [disabled, trackWidth, isRange, valueToPx, pxToValue, fireChange, animateThumbPress, lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
+      (0, _reactNativeReanimated.runOnJS)(fireHaptic)();
+    }).onUpdate(event => {
+      'worklet';
 
-  // Re-create responders when deps change so closures stay current.
-  const lowResponder = (0, _react.useMemo)(() => buildResponder('low'), [buildResponder]);
-  const highResponder = (0, _react.useMemo)(() => buildResponder('high'), [buildResponder]);
+      if (trackW.value <= 0) return;
+      const px = Math.min(Math.max(dragStartX.value + event.translationX, 0), trackW.value);
+      const ratio = px / trackW.value;
+      let v = _min + ratio * (_max - _min);
+      if (_step > 0) {
+        v = Math.round((v - _min) / _step) * _step + _min;
+        v = Math.round(v * _precision) / _precision;
+      }
+      v = Math.min(Math.max(v, _min), _max);
+      if (_range) {
+        if (isLow && v > otherSV.value) v = otherSV.value;
+        if (!isLow && v < otherSV.value) v = otherSV.value;
+      }
+      // Thumb sits at the snapped value's position.
+      xSV.value = _max === _min ? 0 : (v - _min) / (_max - _min) * trackW.value;
+      if (v !== valSV.value) {
+        valSV.value = v;
+        (0, _reactNativeReanimated.runOnJS)(fireHaptic)();
+        (0, _reactNativeReanimated.runOnJS)(fireChange)(lowVal.value, highVal.value);
+      }
+    }).onEnd(() => {
+      'worklet';
+
+      if (_pressAnim) scaleSV.value = (0, _reactNativeReanimated.withSpring)(1, _spring);
+      if (_showLabel) {
+        labelSV.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: _labelDur,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+        });
+      }
+    });
+  }, [disabled, min, max, step, precision, isRange, resolvedPressScale, thumbPressAnimationEnabled, showLabel, resolvedLabelOpacity, resolvedLabelDuration, springCfg, fireChange, fireHaptic, lowX, highX, lowVal, highVal, lowScale, highScale, lowLabelOpacity, highLabelOpacity, dragStartX, trackW]);
+  const lowPan = (0, _react.useMemo)(() => buildPan('low'), [buildPan]);
+  const highPan = (0, _react.useMemo)(() => buildPan('high'), [buildPan]);
 
   // Tap on track jumps to position (single mode only).
   const handleTrackPress = (0, _react.useCallback)(e => {
     if (disabled || isRange || trackWidth <= 0) return;
     const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
     const next = pxToValue(px, trackWidth);
-    if (next !== lowRef.current) {
-      if (sliderTheme?.tapHaptic ?? false) (0, _index2.triggerHaptic)('selection');
-      lowRef.current = next;
-      lastReportedLow.current = next;
-      _reactNative.Animated.timing(lowX, {
-        toValue: valueToPx(next, trackWidth),
+    if (next !== lowVal.value) {
+      fireHaptic();
+      lowVal.value = next;
+      lowX.value = (0, _reactNativeReanimated.withTiming)(valueToPx(next, trackWidth), {
         duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: true
-      }).start();
+        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
+      });
       fireChange(next, next);
     }
-  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, lowX, theme.motion.duration.fast]);
+  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, fireHaptic, lowX, lowVal, theme.motion.duration.fast]);
 
-  // Accessibility actions: increment / decrement
+  // Accessibility actions: increment / decrement.
   const handleAccessibilityAction = (0, _react.useCallback)(event => {
     if (disabled) return;
     const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
     if (isRange) {
-      const nextLow = clamp(lowRef.current + delta, min, highRef.current);
-      if (nextLow !== lowRef.current) {
-        lowRef.current = nextLow;
-        lastReportedLow.current = nextLow;
-        (0, _index.setNativeValue)(lowX, valueToPx(nextLow, trackWidth));
-        if (sliderTheme?.a11yHaptic ?? false) (0, _index2.triggerHaptic)('selection');
-        fireChange(nextLow, highRef.current);
+      const nextLow = clamp(lowVal.value + delta, min, highVal.value);
+      if (nextLow !== lowVal.value) {
+        lowVal.value = nextLow;
+        lowX.value = valueToPx(nextLow, trackWidth);
+        fireHaptic();
+        fireChange(nextLow, highVal.value);
       }
     } else {
-      const next = clamp(lowRef.current + delta, min, max);
-      if (next !== lowRef.current) {
-        lowRef.current = next;
-        lastReportedLow.current = next;
-        (0, _index.setNativeValue)(lowX, valueToPx(next, trackWidth));
-        if (sliderTheme?.a11yHaptic ?? false) (0, _index2.triggerHaptic)('selection');
+      const next = clamp(lowVal.value + delta, min, max);
+      if (next !== lowVal.value) {
+        lowVal.value = next;
+        lowX.value = valueToPx(next, trackWidth);
+        fireHaptic();
         fireChange(next, next);
       }
     }
-  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
   const thumbRadius = sizeCfg.thumbDiameter / 2;
 
-  // Stable Animated nodes for the fill bar and thumb offsets — created once and
-  // memoised so a render doesn't rebuild `new Animated.Value(...)` /
-  // Animated.subtract nodes and re-attach the animation graph every pass.
-  const zeroX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const thumbRadiusX = (0, _react.useRef)((0, _index.createAnimatedValue)(thumbRadius)).current;
-  (0, _react.useEffect)(() => {
-    (0, _index.setNativeValue)(thumbRadiusX, thumbRadius);
-  }, [thumbRadius, thumbRadiusX]);
-  const fillLeft = isRange ? lowX : zeroX;
-  const fillWidth = (0, _react.useMemo)(() => isRange ? _reactNative.Animated.subtract(highX, lowX) : lowX, [isRange, highX, lowX]);
-  const lowTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(lowX, thumbRadiusX), [lowX, thumbRadiusX]);
-  const highTranslateX = (0, _react.useMemo)(() => _reactNative.Animated.subtract(highX, thumbRadiusX), [highX, thumbRadiusX]);
+  // ───────── Animated styles ─────────
+  const fillAnimStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => isRange ? {
+    left: lowX.value,
+    width: Math.max(0, highX.value - lowX.value)
+  } : {
+    left: 0,
+    width: lowX.value
+  });
+  const lowThumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: lowX.value - thumbRadius
+    }, {
+      scale: lowScale.value
+    }]
+  }));
+  const highThumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: highX.value - thumbRadius
+    }, {
+      scale: highScale.value
+    }]
+  }));
+  const lowLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: lowLabelOpacity.value
+  }));
+  const highLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: highLabelOpacity.value
+  }));
 
-  // Display values for labels.
-  const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
-  const highDisplayValue = highRef.current;
+  // Display values (from committed state) for labels + a11y.
+  const lowDisplayValue = isRange ? Math.min(...currentValue) : currentValue;
+  const highDisplayValue = isRange ? Math.max(...currentValue) : currentValue;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
     style: [styles.container, containerStyle, style],
@@ -306,10 +312,15 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     accessibilityState: {
       disabled
     },
-    accessibilityValue: {
+    accessibilityValue: isRange ? {
+      min,
+      max,
+      now: lowDisplayValue,
+      text: `${lowDisplayValue} to ${highDisplayValue}`
+    } : {
       min,
       max,
-      now: isRange ? lowDisplayValue : lowDisplayValue
+      now: lowDisplayValue
     },
     accessibilityActions: [{
       name: 'increment'
@@ -330,69 +341,59 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
           style: [styles.track, {
             backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
           }, trackStyle]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
           style: [styles.fill, {
-            left: fillLeft,
-            width: fillWidth,
             backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
-            opacity: disabled ? 0.6 : 1
-          }, fillStyle]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          ...lowResponder.panHandlers,
-          style: [styles.thumb, {
-            width: sizeCfg.thumbDiameter,
-            height: sizeCfg.thumbDiameter,
-            borderRadius: thumbRadius,
-            backgroundColor: theme.colors.background.elevated,
-            borderColor: disabled ? theme.colors.surface.disabled : fillColor,
-            transform: [{
-              translateX: lowTranslateX
-            }, {
-              scale: lowScale
-            }],
-            opacity: disabled ? 0.6 : 1
-          }, thumbStyle],
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-            style: [styles.bubble, {
-              opacity: lowLabelOpacity,
-              backgroundColor: fillColor
-            }],
-            pointerEvents: "none",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.bubbleText, labelStyle],
-              children: formatLabel(lowDisplayValue)
-            })
-          }) : null
-        }), isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          ...highResponder.panHandlers,
-          style: [styles.thumb, {
-            width: sizeCfg.thumbDiameter,
-            height: sizeCfg.thumbDiameter,
-            borderRadius: thumbRadius,
-            backgroundColor: theme.colors.background.elevated,
-            borderColor: disabled ? theme.colors.surface.disabled : fillColor,
-            transform: [{
-              translateX: highTranslateX
-            }, {
-              scale: highScale
-            }],
-            opacity: disabled ? 0.6 : 1
-          }, thumbStyle],
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-            style: [styles.bubble, {
-              opacity: highLabelOpacity,
-              backgroundColor: fillColor
-            }],
-            pointerEvents: "none",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.bubbleText, labelStyle],
-              children: formatLabel(highDisplayValue)
-            })
-          }) : null
+            opacity: disabled ? 0.55 : 1
+          }, fillStyle, fillAnimStyle]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: lowPan,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, lowThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, lowLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(lowDisplayValue)
+              })
+            }) : null
+          })
+        }), isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: highPan,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+            style: [styles.thumb, {
+              width: sizeCfg.thumbDiameter,
+              height: sizeCfg.thumbDiameter,
+              borderRadius: thumbRadius,
+              backgroundColor: theme.colors.background.elevated,
+              borderColor: disabled ? theme.colors.surface.disabled : fillColor,
+              opacity: disabled ? 0.55 : 1
+            }, thumbStyle, highThumbStyle],
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, highLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(highDisplayValue)
+              })
+            }) : null
+          })
         }) : null]
       })
     })
@@ -453,7 +454,6 @@ const buildStyles = (theme, sizeCfg) => {
       minWidth: 36,
       alignItems: 'center',
       justifyContent: 'center',
-      // A subtle shadow for elevation.
       ..._reactNative.Platform.select({
         ios: {
           shadowColor: theme.shadows.sm.shadowColor,

package/lib/commonjs/components/Stepper/Stepper.js

@@ -39,7 +39,7 @@ const StepCircle = ({
   pulseSize,
   pulseEnabled,
   pulseDuration,
-  pressHapticEnabled,
+  pressHaptic,
   circleSlotStyle
 }) => {
   const isActive = status === 'active';
@@ -86,7 +86,7 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
+    if (pressHaptic) (0, _hapticUtils.triggerHaptic)(pressHaptic);
     onPress?.(index);
   };
   const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -181,6 +181,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     circleStyle,
     labelStyle,
     connectorStyle,
+    haptic,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -189,7 +190,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
   const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
   const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
   const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
-  const pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
+  const pressHaptic = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const toneColor = toneColorFor(theme, tone);
   const upcomingColor = theme.colors.border.primary;
@@ -270,7 +271,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
           pulseSize: pulseSize,
           pulseEnabled: pulseEnabled,
           pulseDuration: pulseDuration,
-          pressHapticEnabled: pressHapticEnabled,
+          pressHaptic: pressHaptic,
           circleSlotStyle: circleStyle
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.hLabel, {
@@ -309,7 +310,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
             pulseSize: pulseSize,
             pulseEnabled: pulseEnabled,
             pulseDuration: pulseDuration,
-            pressHapticEnabled: pressHapticEnabled,
+            pressHaptic: pressHaptic,
             circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: [styles.vConnectorContainer, connectorStyle],