@webority-technologies/mobile 0.0.23 → 0.0.25

package/lib/module/components/Slider/Slider.js

@@ -1,9 +1,11 @@
 "use strict";
 
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { Easing, cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
 import { useControllableState } from "../../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_MAP = {
@@ -30,7 +32,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);
@@ -47,6 +48,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     showLabel = false,
     formatLabel = defaultFormatLabel,
     accessibilityLabel,
+    haptic,
     style,
     containerStyle,
     trackStyle,
@@ -61,17 +63,20 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const sliderTheme = theme.components.slider;
   const sliderSizeTheme = sliderTheme?.[size];
-  const sizeCfg = {
+  const sizeCfg = 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 = useMemo(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
-
-  // Track layout (width + x offset within container)
+  const springCfg = 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] = useState(0);
   const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
   const isRange = props.range === true;
@@ -81,217 +86,218 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: props.onChange
   });
 
-  // Current value is mirrored in refs so PanResponder closures get fresh values.
-  const lowRef = useRef(isRange ? currentValue[0] : currentValue);
-  const highRef = useRef(isRange ? currentValue[1] : currentValue);
-  const lastReportedLow = useRef(lowRef.current);
-  const lastReportedHigh = useRef(highRef.current);
-
-  // Animated x positions (px) for thumbs.
-  const lowX = useRef(createAnimatedValue(0)).current;
-  const highX = useRef(createAnimatedValue(0)).current;
-
-  // Press / drag scale animations.
-  const lowScale = useRef(createAnimatedValue(1)).current;
-  const highScale = useRef(createAnimatedValue(1)).current;
-
-  // Label opacity per thumb.
-  const lowLabelOpacity = useRef(createAnimatedValue(0)).current;
-  const highLabelOpacity = useRef(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 = useSharedValue(0);
+  const highX = useSharedValue(0);
+  const lowVal = useSharedValue(isRange ? currentValue[0] : currentValue);
+  const highVal = useSharedValue(isRange ? currentValue[1] : currentValue);
+  const dragStartX = useSharedValue(0);
+  const trackW = useSharedValue(0);
+  const lowScale = useSharedValue(1);
+  const highScale = useSharedValue(1);
+  const lowLabelOpacity = useSharedValue(0);
+  const highLabelOpacity = useSharedValue(0);
 
-  // Track which thumb is actively dragging (to anchor gesture math).
-  const dragOffsetRef = 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 = useMemo(() => {
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Math.pow(10, decimals);
+  }, [step]);
+  useEffect(() => {
+    return () => {
+      cancelAnimation(lowX);
+      cancelAnimation(highX);
+      cancelAnimation(lowScale);
+      cancelAnimation(highScale);
+      cancelAnimation(lowLabelOpacity);
+      cancelAnimation(highLabelOpacity);
+    };
+  }, [lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
   const valueToPx = 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 = 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).
   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;
-      setNativeValue(lowX, valueToPx(lo, trackWidth));
-      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;
-      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 = 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);
-      setNativeValue(lowX, valueToPx(lo, w));
-      setNativeValue(highX, valueToPx(hi, w));
-    } else {
-      setNativeValue(lowX, valueToPx(currentValue, w));
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isRange, valueToPx]);
+  }, [trackW]);
   const fireChange = useCallback((lo, hi) => {
     setCurrentValue(isRange ? [lo, hi] : lo);
   }, [isRange, setCurrentValue]);
-  const animateThumbPress = useCallback((target, opacity, pressed) => {
-    if (thumbPressAnimationEnabled) {
-      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) {
-      Animated.timing(opacity, {
-        toValue: pressed ? resolvedLabelOpacity : 0,
-        duration: resolvedLabelDuration,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true
-      }).start();
-    }
-  }, [showLabel, theme.motion, thumbPressAnimationEnabled, resolvedPressScale, resolvedLabelDuration, resolvedLabelOpacity]);
+  const fireHaptic = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+  }, [haptic]);
 
-  // Build PanResponder for a thumb.
-  const buildResponder = useCallback(which => {
-    return 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) 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 = 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 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) triggerHaptic('selection');
-            lastReportedLow.current = nextValue;
-            lowRef.current = nextValue;
-            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) triggerHaptic('selection');
-            lastReportedHigh.current = nextValue;
-            highRef.current = nextValue;
-            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 = withSpring(_pressScale, _spring);
+      if (_showLabel) {
+        labelSV.value = withTiming(_labelOpacity, {
+          duration: _labelDur,
+          easing: Easing.out(Easing.cubic)
+        });
       }
-    });
-  }, [disabled, trackWidth, isRange, valueToPx, pxToValue, fireChange, animateThumbPress, lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
+      runOnJS(fireHaptic)();
+    }).onUpdate(event => {
+      'worklet';
+
+      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;
+        runOnJS(fireHaptic)();
+        runOnJS(fireChange)(lowVal.value, highVal.value);
+      }
+    }).onEnd(() => {
+      'worklet';
 
-  // Re-create responders when deps change so closures stay current.
-  const lowResponder = useMemo(() => buildResponder('low'), [buildResponder]);
-  const highResponder = useMemo(() => buildResponder('high'), [buildResponder]);
+      if (_pressAnim) scaleSV.value = withSpring(1, _spring);
+      if (_showLabel) {
+        labelSV.value = withTiming(0, {
+          duration: _labelDur,
+          easing: Easing.out(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 = useMemo(() => buildPan('low'), [buildPan]);
+  const highPan = useMemo(() => buildPan('high'), [buildPan]);
 
   // Tap on track jumps to position (single mode only).
   const handleTrackPress = 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) triggerHaptic('selection');
-      lowRef.current = next;
-      lastReportedLow.current = next;
-      Animated.timing(lowX, {
-        toValue: valueToPx(next, trackWidth),
+    if (next !== lowVal.value) {
+      fireHaptic();
+      lowVal.value = next;
+      lowX.value = withTiming(valueToPx(next, trackWidth), {
         duration: theme.motion.duration.fast,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true
-      }).start();
+        easing: Easing.out(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 = 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;
-        setNativeValue(lowX, valueToPx(nextLow, trackWidth));
-        if (sliderTheme?.a11yHaptic ?? false) 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;
-        setNativeValue(lowX, valueToPx(next, trackWidth));
-        if (sliderTheme?.a11yHaptic ?? false) 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 = useRef(createAnimatedValue(0)).current;
-  const thumbRadiusX = useRef(createAnimatedValue(thumbRadius)).current;
-  useEffect(() => {
-    setNativeValue(thumbRadiusX, thumbRadius);
-  }, [thumbRadius, thumbRadiusX]);
-  const fillLeft = isRange ? lowX : zeroX;
-  const fillWidth = useMemo(() => isRange ? Animated.subtract(highX, lowX) : lowX, [isRange, highX, lowX]);
-  const lowTranslateX = useMemo(() => Animated.subtract(lowX, thumbRadiusX), [lowX, thumbRadiusX]);
-  const highTranslateX = useMemo(() => Animated.subtract(highX, thumbRadiusX), [highX, thumbRadiusX]);
+  // ───────── Animated styles ─────────
+  const fillAnimStyle = useAnimatedStyle(() => isRange ? {
+    left: lowX.value,
+    width: Math.max(0, highX.value - lowX.value)
+  } : {
+    left: 0,
+    width: lowX.value
+  });
+  const lowThumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: lowX.value - thumbRadius
+    }, {
+      scale: lowScale.value
+    }]
+  }));
+  const highThumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: highX.value - thumbRadius
+    }, {
+      scale: highScale.value
+    }]
+  }));
+  const lowLabelStyle = useAnimatedStyle(() => ({
+    opacity: lowLabelOpacity.value
+  }));
+  const highLabelStyle = 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__*/_jsx(View, {
     ref: ref,
     style: [styles.container, containerStyle, style],
@@ -301,10 +307,15 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     accessibilityState: {
       disabled
     },
-    accessibilityValue: {
+    accessibilityValue: isRange ? {
       min,
       max,
-      now: isRange ? lowDisplayValue : lowDisplayValue
+      now: lowDisplayValue,
+      text: `${lowDisplayValue} to ${highDisplayValue}`
+    } : {
+      min,
+      max,
+      now: lowDisplayValue
     },
     accessibilityActions: [{
       name: 'increment'
@@ -327,67 +338,57 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
           }, trackStyle]
         }), /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.fill, {
-            left: fillLeft,
-            width: fillWidth,
             backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
-            opacity: disabled ? 0.6 : 1
-          }, fillStyle]
-        }), /*#__PURE__*/_jsx(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__*/_jsx(Animated.View, {
-            style: [styles.bubble, {
-              opacity: lowLabelOpacity,
-              backgroundColor: fillColor
-            }],
-            pointerEvents: "none",
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.bubbleText, labelStyle],
-              children: formatLabel(lowDisplayValue)
-            })
-          }) : null
-        }), isRange ? /*#__PURE__*/_jsx(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__*/_jsx(Animated.View, {
-            style: [styles.bubble, {
-              opacity: highLabelOpacity,
-              backgroundColor: fillColor
-            }],
-            pointerEvents: "none",
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.bubbleText, labelStyle],
-              children: formatLabel(highDisplayValue)
-            })
-          }) : null
+            opacity: disabled ? 0.55 : 1
+          }, fillStyle, fillAnimStyle]
+        }), /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: lowPan,
+          children: /*#__PURE__*/_jsx(Animated.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__*/_jsx(Animated.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, lowLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(lowDisplayValue)
+              })
+            }) : null
+          })
+        }), isRange ? /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: highPan,
+          children: /*#__PURE__*/_jsx(Animated.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__*/_jsx(Animated.View, {
+              style: [styles.bubble, {
+                backgroundColor: fillColor
+              }, highLabelStyle],
+              pointerEvents: "none",
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.bubbleText, labelStyle],
+                children: formatLabel(highDisplayValue)
+              })
+            }) : null
+          })
         }) : null]
       })
     })
@@ -448,7 +449,6 @@ const buildStyles = (theme, sizeCfg) => {
       minWidth: 36,
       alignItems: 'center',
       justifyContent: 'center',
-      // A subtle shadow for elevation.
       ...Platform.select({
         ios: {
           shadowColor: theme.shadows.sm.shadowColor,

package/lib/module/components/Stepper/Stepper.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, 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 { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CIRCLE_SIZE = 24;
@@ -34,7 +34,7 @@ const StepCircle = ({
   pulseSize,
   pulseEnabled,
   pulseDuration,
-  pressHapticEnabled,
+  pressHaptic,
   circleSlotStyle
 }) => {
   const isActive = status === 'active';
@@ -81,7 +81,7 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    if (pressHapticEnabled) triggerHaptic('selection');
+    if (pressHaptic) triggerHaptic(pressHaptic);
     onPress?.(index);
   };
   const inner = /*#__PURE__*/_jsxs(View, {
@@ -176,6 +176,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     circleStyle,
     labelStyle,
     connectorStyle,
+    haptic,
     testID
   } = props;
   const theme = useTheme();
@@ -184,7 +185,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
   const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
   const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
   const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
-  const pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
+  const pressHaptic = resolveHaptic(haptic, 'selection');
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const toneColor = toneColorFor(theme, tone);
   const upcomingColor = theme.colors.border.primary;
@@ -265,7 +266,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
           pulseSize: pulseSize,
           pulseEnabled: pulseEnabled,
           pulseDuration: pulseDuration,
-          pressHapticEnabled: pressHapticEnabled,
+          pressHaptic: pressHaptic,
           circleSlotStyle: circleStyle
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.hLabel, {
@@ -304,7 +305,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
             pulseSize: pulseSize,
             pulseEnabled: pulseEnabled,
             pulseDuration: pulseDuration,
-            pressHapticEnabled: pressHapticEnabled,
+            pressHaptic: pressHaptic,
             circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/_jsxs(View, {
             style: [styles.vConnectorContainer, connectorStyle],