@webority-technologies/mobile 0.0.22 → 0.0.24

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

@@ -1,9 +1,12 @@
 "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 = {
   sm: {
@@ -29,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);
@@ -46,6 +48,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     showLabel = false,
     formatLabel = defaultFormatLabel,
     accessibilityLabel,
+    haptic,
     style,
     containerStyle,
     trackStyle,
@@ -60,222 +63,241 @@ 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;
+  const [currentValue, setCurrentValue] = useControllableState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (isRange ? [min, max] : min),
+    onChange: props.onChange
+  });
 
-  // Current value is mirrored in refs so PanResponder closures get fresh values.
-  const lowRef = useRef(isRange ? props.value[0] : props.value);
-  const highRef = useRef(isRange ? props.value[1] : props.value);
-  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;
-
-  // Track which thumb is actively dragging (to anchor gesture math).
-  const dragOffsetRef = useRef(0);
+  // ───────── 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);
 
-  // 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] = props.value;
+      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 = props.value;
-      lowRef.current = v;
-      highRef.current = v;
-      lastReportedLow.current = v;
-      setNativeValue(lowX, valueToPx(v, trackWidth));
+      const v = currentValue;
+      lowVal.value = v;
+      highVal.value = v;
+      lowX.value = valueToPx(v, trackWidth);
     }
-    // We intentionally listen to props.value across both shapes via JSON; ESLint is fine.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(props.value), trackWidth, isRange, valueToPx]);
+  }, [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] = props.value;
-      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(props.value, w));
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isRange, valueToPx]);
+  }, [trackW]);
   const fireChange = useCallback((lo, hi) => {
-    if (isRange) {
-      props.onChange([lo, hi]);
-    } else {
-      props.onChange(lo);
-    }
-  }, [isRange, props]);
-  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]);
+    setCurrentValue(isRange ? [lo, hi] : lo);
+  }, [isRange, setCurrentValue]);
+  const fireHaptic = useCallback(() => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) triggerHaptic(h);
+  }, [haptic]);
+
+  // ───────── 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';
 
-  // 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);
-        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';
 
-  // Re-create responders when deps change so closures stay current.
-  const lowResponder = useMemo(() => buildResponder('low'), [buildResponder]);
-  const highResponder = 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;
+        runOnJS(fireHaptic)();
+        runOnJS(fireChange)(lowVal.value, highVal.value);
+      }
+    }).onEnd(() => {
+      'worklet';
+
+      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]);
-
-  // Computed values for fill bar.
-  const fillLeft = isRange ? lowX : new Animated.Value(0);
-  const fillWidth = isRange ? Animated.subtract(highX, lowX) : lowX;
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
   const thumbRadius = sizeCfg.thumbDiameter / 2;
 
-  // Display values for labels.
-  const lowDisplayValue = isRange ? lowRef.current : lowRef.current;
-  const highDisplayValue = highRef.current;
+  // ───────── 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 (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],
@@ -285,10 +307,15 @@ const Slider = /*#__PURE__*/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'
@@ -311,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: Animated.subtract(lowX, new Animated.Value(thumbRadius))
-            }, {
-              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: Animated.subtract(highX, new Animated.Value(thumbRadius))
-            }, {
-              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]
       })
     })
@@ -432,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/Spinner/Spinner.js

@@ -5,9 +5,9 @@ import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'rea
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
-  small: 20,
-  medium: 32,
-  large: 48
+  sm: 20,
+  md: 32,
+  lg: 48
 };
 const DOT_COUNT = 3;
 const DOT_STAGGER_MS = 150;
@@ -50,7 +50,7 @@ const Dot = ({
 };
 const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    size = 'medium',
+    size = 'md',
     color,
     message,
     overlay = false,
@@ -93,7 +93,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return /*#__PURE__*/_jsx(ActivityIndicator, {
       color: resolvedColor,
-      size: size === 'small' ? 'small' : 'large',
+      size: size === 'sm' ? 'small' : 'large',
       style: {
         width: dimension,
         height: dimension