@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -1,805 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { useControllableState } from "../../hooks/index.js";
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-
-/**
- * Visual style of the slider.
- *
- * - `default`: a thin track under a white thumb ringed in the tone colour.
- * - `inset`: a thick track; the thumb is a small white ring with a tone-coloured
- *   centre that rides INSIDE the fill, so the fill always extends past it.
- * - `minimal`: a hairline track and a small solid thumb in the tone colour.
- * - `bar`: a thick bar with no visible thumb (like a volume or brightness
- *   control); drag anywhere on the fill's end, or tap the bar to jump.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SIZE_MAP = {
-  sm: {
-    trackHeight: 4,
-    thumbDiameter: 24
-  },
-  md: {
-    trackHeight: 6,
-    thumbDiameter: 28
-  },
-  lg: {
-    trackHeight: 8,
-    thumbDiameter: 32
-  }
-};
-
-/** Geometry of the non-default variants, per size. */
-const VARIANT_SIZE_MAP = {
-  // The thumb is about two thirds of the track, as in the design.
-  inset: {
-    sm: {
-      trackHeight: 14,
-      thumbDiameter: 10
-    },
-    md: {
-      trackHeight: 20,
-      thumbDiameter: 14
-    },
-    lg: {
-      trackHeight: 26,
-      thumbDiameter: 18
-    }
-  },
-  minimal: {
-    sm: {
-      trackHeight: 2,
-      thumbDiameter: 14
-    },
-    md: {
-      trackHeight: 3,
-      thumbDiameter: 18
-    },
-    lg: {
-      trackHeight: 4,
-      thumbDiameter: 22
-    }
-  },
-  // The invisible thumb is as tall as the bar, so the drag target spans it.
-  bar: {
-    sm: {
-      trackHeight: 20,
-      thumbDiameter: 20
-    },
-    md: {
-      trackHeight: 28,
-      thumbDiameter: 28
-    },
-    lg: {
-      trackHeight: 36,
-      thumbDiameter: 36
-    }
-  }
-};
-
-/** Share of the `inset` thumb taken by its white ring (each side). */
-const INSET_RING_RATIO = 0.3;
-/** Minimum drag target around a thumb smaller than this, per side. */
-const MIN_THUMB_TOUCH = 44;
-const TONE_TO_COLOR_KEY = {
-  primary: 'primary',
-  success: 'success',
-  warning: 'warning',
-  error: 'error'
-};
-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;
-  const decimals = String(step).split('.')[1]?.length ?? 0;
-  const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
-  return clamp(fixed, min, max);
-};
-
-/** Air between the thumb's top and the bubble's caret tip. */
-const BUBBLE_GAP = 2;
-/** Side of the square that, rotated, draws the bubble's caret. */
-const BUBBLE_CARET = 8;
-/**
- * The bubble's column is a fixed width centred on the thumb. Left to size
- * itself, an absolute child of the thumb measures against the thumb's own
- * width and wraps "70%" onto two lines.
- */
-const BUBBLE_WRAP_WIDTH = 160;
-const NO_SHADOW = {
-  shadowOpacity: 0,
-  elevation: 0
-};
-const defaultFormatLabel = value => String(value);
-const Slider = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    tone = 'primary',
-    size = 'md',
-    variant = 'default',
-    showLabel = false,
-    snapThumb = false,
-    formatLabel = defaultFormatLabel,
-    renderLabel,
-    accessibilityLabel,
-    haptic,
-    style,
-    containerStyle,
-    trackStyle,
-    fillStyle,
-    thumbStyle,
-    labelStyle,
-    thumbPressScale,
-    labelShowDuration,
-    labelOpacity: labelOpacityProp,
-    testID
-  } = props;
-  const theme = useTheme();
-  const sliderTheme = theme.components.slider;
-  const sliderSizeTheme = sliderTheme?.[size];
-  const sizeCfg = useMemo(() => variant === 'default' ? {
-    trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
-    thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
-  } : VARIANT_SIZE_MAP[variant][size], [sliderSizeTheme, size, variant]);
-  // `inset` keeps the thumb inside the fill's rounded end: the thumb's centre
-  // travels between half a track-height from each edge, not edge to edge, and
-  // the fill runs that same half-height past it.
-  const endInset = variant === 'inset' ? sizeCfg.trackHeight / 2 : 0;
-  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]);
-  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
-  });
-
-  // ───────── 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);
-  // A bubble that is always up starts visible and never fades.
-  const labelAlwaysOn = showLabel === 'always';
-  const lowLabelOpacity = useSharedValue(labelAlwaysOn ? 1 : 0);
-  const highLabelOpacity = useSharedValue(labelAlwaysOn ? 1 : 0);
-
-  // 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) => {
-    const travel = width - endInset * 2;
-    if (max === min || travel <= 0) {
-      return endInset;
-    }
-    return endInset + (value - min) / (max - min) * travel;
-  }, [min, max, endInset]);
-  const pxToValue = useCallback((px, width) => {
-    const travel = width - endInset * 2;
-    if (travel <= 0) {
-      return min;
-    }
-    const ratio = clamp((px - endInset) / travel, 0, 1);
-    return snapToStep(min + ratio * (max - min), min, max, step);
-  }, [min, max, step, endInset]);
-
-  // Sync external value -> shared values (controlled updates, value prop changes).
-  //
-  // Never while a thumb is being dragged. The pan puts the thumb where the
-  // finger is on the UI thread; every committed step then comes back through
-  // React, and by the time this effect ran for step N the finger was already
-  // at N+2. Writing N's position here yanked the thumb back a frame on every
-  // step, which read as a stutter on Android, where the JS thread lags more.
-  // The drag's own end runs one sync instead (see `setDragging`), so a parent
-  // that rewrites the value it was given still wins once the finger lifts.
-  const dragging = useRef(false);
-  const settleDuration = theme.motion.duration.fast;
-  const currentValueRef = useRef(currentValue);
-  currentValueRef.current = currentValue;
-  const trackWidthRef = useRef(trackWidth);
-  trackWidthRef.current = trackWidth;
-  // `settle` eases the thumbs into place instead of placing them: a thumb
-  // that followed the finger between steps glides onto its step when let go.
-  const syncFromValue = useCallback((settle = false) => {
-    const width = trackWidthRef.current;
-    if (width <= 0) {
-      return;
-    }
-    const place = px => settle ? withTiming(px, {
-      duration: settleDuration,
-      easing: Easing.out(Easing.cubic)
-    }) : px;
-    const value = currentValueRef.current;
-    if (isRange) {
-      const [v0, v1] = value;
-      const lo = Math.min(v0, v1);
-      const hi = Math.max(v0, v1);
-      lowVal.value = lo;
-      highVal.value = hi;
-      lowX.value = place(valueToPx(lo, width));
-      highX.value = place(valueToPx(hi, width));
-    } else {
-      const v = value;
-      lowVal.value = v;
-      highVal.value = v;
-      lowX.value = place(valueToPx(v, width));
-    }
-  }, [isRange, valueToPx, lowVal, highVal, lowX, highX, settleDuration]);
-  // A drag's end asks for one sync through a render, never straight from a
-  // ref: the last committed step is still a pending state update when the
-  // lift's callback runs, so a ref read here would put the thumb back where
-  // the finger started. The render that follows sees the settled value.
-  const [dragEnd, setDragEnd] = useState(0);
-  const settleOnNextSync = useRef(false);
-  const setDragging = useCallback(next => {
-    dragging.current = next;
-    if (!next) {
-      settleOnNextSync.current = true;
-      setDragEnd(n => n + 1);
-    }
-  }, []);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `JSON.stringify(currentValue)` is the dependency by design (value equality for the tuple); adding `currentValue` itself would re-run on every new array identity and defeat it
-  useEffect(() => {
-    if (dragging.current) {
-      return;
-    }
-    const settle = settleOnNextSync.current;
-    settleOnNextSync.current = false;
-    syncFromValue(settle);
-  }, [JSON.stringify(currentValue), trackWidth, dragEnd, syncFromValue]);
-  const onTrackLayout = useCallback(e => {
-    const w = e.nativeEvent.layout.width;
-    trackW.value = w;
-    setTrackWidth(w);
-  }, [trackW]);
-  const fireChange = useCallback((lo, hi) => {
-    setCurrentValue(isRange ? [lo, hi] : lo);
-  }, [isRange, setCurrentValue]);
-  const fireHaptic = useCallback(() => {
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-  }, [haptic]);
-
-  // The worklets call these through refs so the gesture is built once: a
-  // consumer's inline `onChange` gives `fireChange` a new identity on every
-  // render, and every render during a drag would otherwise hand the
-  // GestureDetector a new gesture mid-gesture.
-  const fireChangeRef = useRef(fireChange);
-  fireChangeRef.current = fireChange;
-  const fireHapticRef = useRef(fireHaptic);
-  fireHapticRef.current = fireHaptic;
-  const emitChange = useCallback((lo, hi) => fireChangeRef.current(lo, hi), []);
-  const emitHaptic = useCallback(() => fireHapticRef.current(), []);
-
-  // A thumb smaller than the minimum touch size still drags from a 44dp area.
-  const thumbSlop = Math.max(0, (MIN_THUMB_TOUCH - sizeCfg.thumbDiameter) / 2);
-  const thumbHitSlop = thumbSlop > 0 ? thumbSlop : undefined;
-
-  // ───────── 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 === true;
-    const _snapThumb = snapThumb;
-    const _labelOpacity = resolvedLabelOpacity;
-    const _labelDur = resolvedLabelDuration;
-    const _spring = springCfg;
-    const _inset = endInset;
-
-    // Puts the thumb and the value where the finger's translation says.
-    const follow = translationX => {
-      'worklet';
-
-      const travel = trackW.value - _inset * 2;
-      if (travel <= 0 || !Number.isFinite(translationX)) {
-        return;
-      }
-      const px = Math.min(Math.max(dragStartX.value + translationX, _inset), trackW.value - _inset);
-      const ratio = (px - _inset) / travel;
-      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;
-        }
-      }
-      // The thumb follows the finger (held off the other thumb in range
-      // mode) unless it is pinned to the steps; the value snaps either way.
-      if (_snapThumb || _max === _min) {
-        xSV.value = _max === _min ? _inset : _inset + (v - _min) / (_max - _min) * travel;
-      } else if (_range) {
-        xSV.value = isLow ? Math.min(px, highX.value) : Math.max(px, lowX.value);
-      } else {
-        xSV.value = px;
-      }
-      if (v !== valSV.value) {
-        valSV.value = v;
-        // A detent at the ends only; see the `haptic` prop.
-        if (v === _min || v === _max) {
-          runOnJS(emitHaptic)();
-        }
-        runOnJS(emitChange)(lowVal.value, highVal.value);
-      }
-    };
-    const pan = Gesture.Pan().enabled(!disabled).minDistance(0);
-    return (thumbHitSlop === undefined ? pan : pan.hitSlop(thumbHitSlop)).onStart(() => {
-      'worklet';
-
-      runOnJS(setDragging)(true);
-      dragStartX.value = xSV.value;
-      if (_pressAnim) {
-        scaleSV.value = withSpring(_pressScale, _spring);
-      }
-      if (_showLabel) {
-        labelSV.value = withTiming(_labelOpacity, {
-          duration: _labelDur,
-          easing: Easing.out(Easing.cubic)
-        });
-      }
-      runOnJS(emitHaptic)();
-    }).onUpdate(event => {
-      'worklet';
-
-      follow(event.translationX);
-    })
-    // The end event carries the finger's last position. A fast flick
-    // often delivers its final moves in the same batch as the lift, so
-    // they never reach onUpdate: without this the thumb settled back to
-    // the last update, or to where it was grabbed.
-    .onEnd(event => {
-      'worklet';
-
-      follow(event.translationX);
-      if (_pressAnim) {
-        scaleSV.value = withSpring(1, _spring);
-      }
-      if (_showLabel) {
-        labelSV.value = withTiming(0, {
-          duration: _labelDur,
-          easing: Easing.out(Easing.cubic)
-        });
-      }
-    })
-    // Also on a cancelled pan (a parent scroll took over), which skips onEnd.
-    .onFinalize(() => {
-      'worklet';
-
-      runOnJS(setDragging)(false);
-    });
-  }, [disabled, min, max, step, precision, isRange, resolvedPressScale, thumbPressAnimationEnabled, showLabel, snapThumb, resolvedLabelOpacity, resolvedLabelDuration, springCfg, endInset, thumbHitSlop, emitChange, emitHaptic, setDragging, 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 !== lowVal.value) {
-      fireHaptic();
-      lowVal.value = next;
-      lowX.value = withTiming(valueToPx(next, trackWidth), {
-        duration: theme.motion.duration.fast,
-        easing: Easing.out(Easing.cubic)
-      });
-      fireChange(next, next);
-    }
-  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, fireHaptic, lowX, lowVal, theme.motion.duration.fast]);
-
-  // Accessibility actions: increment / decrement.
-  const handleAccessibilityAction = useCallback(event => {
-    if (disabled) {
-      return;
-    }
-    const delta = event.nativeEvent.actionName === 'increment' ? step : -step;
-    // Round through `precision` (same guard the pan gesture uses) so repeated
-    // increments of a fractional step (e.g. 0.1) don't drift off the exact
-    // decimal via binary float addition (0.1+0.1+0.1 = 0.30000000000000004).
-    const roundedDelta = step > 0 ? Math.round(delta * precision) / precision : delta;
-    if (isRange) {
-      const rawLow = Math.round((lowVal.value + roundedDelta) * precision) / precision;
-      const nextLow = clamp(rawLow, min, highVal.value);
-      if (nextLow !== lowVal.value) {
-        lowVal.value = nextLow;
-        lowX.value = valueToPx(nextLow, trackWidth);
-        fireHaptic();
-        fireChange(nextLow, highVal.value);
-      }
-    } else {
-      const rawNext = Math.round((lowVal.value + roundedDelta) * precision) / precision;
-      const next = clamp(rawNext, min, max);
-      if (next !== lowVal.value) {
-        lowVal.value = next;
-        lowX.value = valueToPx(next, trackWidth);
-        fireHaptic();
-        fireChange(next, next);
-      }
-    }
-  }, [disabled, step, precision, isRange, min, max, valueToPx, trackWidth, lowX, lowVal, highVal, fireChange, fireHaptic]);
-  const thumbRadius = sizeCfg.thumbDiameter / 2;
-  const thumbInk = disabled ? theme.colors.surface.disabled : fillColor;
-  // What the thumb itself looks like; position, scale and size are shared.
-  const thumbLook = variant === 'inset' ? {
-    backgroundColor: thumbInk,
-    borderColor: theme.colors.background.elevated,
-    borderWidth: Math.max(2, Math.round(sizeCfg.thumbDiameter * INSET_RING_RATIO)),
-    ...NO_SHADOW
-  } : variant === 'minimal' ? {
-    backgroundColor: thumbInk,
-    borderWidth: 0
-  } : variant === 'bar' ? {
-    backgroundColor: 'transparent',
-    borderWidth: 0,
-    ...NO_SHADOW
-  } : {
-    backgroundColor: theme.colors.background.elevated,
-    borderColor: thumbInk
-  };
-
-  // ───────── Animated styles ─────────
-  // The fill is a full-width bar moved with transforms, never resized: on
-  // Fabric a layout prop (`width`, `left`) animated from a worklet clones and
-  // commits the shadow tree every frame, and on Android that missed frames
-  // for the whole drag. A transform is applied on the UI thread directly.
-  // Single mode slides the bar so its rounded end sits at the value; the
-  // track's own clip hides the rest. Range mode also scales it from its left
-  // edge to span the two thumbs. Hidden until the track is measured, so the
-  // bar never flashes full width on the first frame.
-  const fillAnimStyle = useAnimatedStyle(() => {
-    const width = trackW.value;
-    if (width <= 0) {
-      return {
-        opacity: 0,
-        transform: [{
-          translateX: 0
-        }, {
-          scaleX: 1
-        }]
-      };
-    }
-    const opacity = disabled ? 0.55 : 1;
-    if (isRange) {
-      const span = Math.max(0, highX.value - lowX.value + endInset * 2);
-      return {
-        opacity,
-        transform: [{
-          translateX: lowX.value - endInset
-        }, {
-          scaleX: span / width
-        }]
-      };
-    }
-    return {
-      opacity,
-      transform: [{
-        translateX: lowX.value + endInset - width
-      }, {
-        scaleX: 1
-      }]
-    };
-  });
-  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.
-  //
-  // Clamped to [min, max]. A caller-supplied value outside the range is not
-  // rewritten — `onChange` is never fired from here and the caller's own state
-  // is untouched — but it must not be RENDERED as-is: valueToPx does not clamp,
-  // so value=150 on a 0..100 slider puts the thumb off the end of the track, and
-  // accessibilityValue would announce `now: 150` against `max: 100`, which is an
-  // invalid state for a screen reader. Any interaction re-clamps through
-  // clamp()/snapToStep() anyway, so this only aligns the first render with what
-  // every subsequent one already does.
-  const clampDisplay = v => clamp(v, min, max);
-  const lowDisplayValue = clampDisplay(isRange ? Math.min(...currentValue) : currentValue);
-  const highDisplayValue = clampDisplay(isRange ? Math.max(...currentValue) : currentValue);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.container, containerStyle, style],
-    testID: testID,
-    accessibilityRole: "adjustable",
-    accessibilityLabel: accessibilityLabel,
-    accessibilityState: {
-      disabled
-    },
-    accessibilityValue: isRange ? {
-      min,
-      max,
-      now: lowDisplayValue,
-      text: `${lowDisplayValue} to ${highDisplayValue}`
-    } : {
-      min,
-      max,
-      now: lowDisplayValue
-    },
-    accessibilityActions: [{
-      name: 'increment'
-    }, {
-      name: 'decrement'
-    }],
-    onAccessibilityAction: handleAccessibilityAction,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      onPress: handleTrackPress,
-      disabled: disabled || isRange,
-      style: styles.trackTouch,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.trackWrap,
-        onLayout: onTrackLayout,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.trackClip,
-          pointerEvents: "none",
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.track, {
-              backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
-            }, trackStyle]
-          }), /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.fill, {
-              backgroundColor: disabled ? theme.colors.surface.disabled : fillColor
-            }, fillStyle, fillAnimStyle]
-          })]
-        }), /*#__PURE__*/_jsx(GestureDetector, {
-          gesture: lowPan,
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.thumb, {
-              width: sizeCfg.thumbDiameter,
-              height: sizeCfg.thumbDiameter,
-              borderRadius: thumbRadius,
-              ...smoothCorners,
-              opacity: disabled ? 0.55 : 1
-            }, thumbLook, thumbStyle, lowThumbStyle],
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            children: showLabel ? /*#__PURE__*/_jsxs(Animated.View, {
-              style: [styles.bubbleWrap, lowLabelStyle],
-              pointerEvents: "none",
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.bubble, {
-                  backgroundColor: fillColor
-                }],
-                children: renderLabel ? renderLabel(lowDisplayValue) : /*#__PURE__*/_jsx(Text, {
-                  style: [styles.bubbleText, labelStyle],
-                  numberOfLines: 1,
-                  children: formatLabel(lowDisplayValue)
-                })
-              }), /*#__PURE__*/_jsx(View, {
-                style: [styles.bubbleCaret, {
-                  backgroundColor: fillColor
-                }]
-              })]
-            }) : null
-          })
-        }), isRange ? /*#__PURE__*/_jsx(GestureDetector, {
-          gesture: highPan,
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.thumb, {
-              width: sizeCfg.thumbDiameter,
-              height: sizeCfg.thumbDiameter,
-              borderRadius: thumbRadius,
-              ...smoothCorners,
-              opacity: disabled ? 0.55 : 1
-            }, thumbLook, thumbStyle, highThumbStyle],
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            children: showLabel ? /*#__PURE__*/_jsxs(Animated.View, {
-              style: [styles.bubbleWrap, highLabelStyle],
-              pointerEvents: "none",
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.bubble, {
-                  backgroundColor: fillColor
-                }],
-                children: renderLabel ? renderLabel(highDisplayValue) : /*#__PURE__*/_jsx(Text, {
-                  style: [styles.bubbleText, labelStyle],
-                  numberOfLines: 1,
-                  children: formatLabel(highDisplayValue)
-                })
-              }), /*#__PURE__*/_jsx(View, {
-                style: [styles.bubbleCaret, {
-                  backgroundColor: fillColor
-                }]
-              })]
-            }) : null
-          })
-        }) : null]
-      })
-    })
-  });
-});
-Slider.displayName = 'Slider';
-const buildStyles = (theme, sizeCfg) => {
-  const thumbShadow = theme.shadows.md;
-  // The row is as tall as whichever is taller, the thumb or the track.
-  const rowHeight = Math.max(sizeCfg.thumbDiameter, sizeCfg.trackHeight);
-  const verticalPad = rowHeight / 2 + 4;
-  return StyleSheet.create({
-    container: {
-      width: '100%',
-      paddingVertical: verticalPad,
-      justifyContent: 'center'
-    },
-    trackTouch: {
-      width: '100%',
-      justifyContent: 'center'
-    },
-    trackWrap: {
-      width: '100%',
-      height: rowHeight,
-      justifyContent: 'center'
-    },
-    trackClip: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      height: sizeCfg.trackHeight,
-      top: (rowHeight - sizeCfg.trackHeight) / 2,
-      // Half the height, not `radius.full`: Android drops an oversized radius
-      // to square corners on a view whose size it is still settling.
-      borderRadius: sizeCfg.trackHeight / 2,
-      ...smoothCorners,
-      overflow: 'hidden'
-    },
-    track: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      borderRadius: sizeCfg.trackHeight / 2,
-      ...smoothCorners
-    },
-    fill: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: sizeCfg.trackHeight,
-      borderRadius: sizeCfg.trackHeight / 2,
-      ...smoothCorners,
-      // Range mode scales the bar from this edge.
-      transformOrigin: 'left'
-    },
-    thumb: {
-      position: 'absolute',
-      top: (rowHeight - sizeCfg.thumbDiameter) / 2,
-      left: 0,
-      borderWidth: 2,
-      shadowColor: thumbShadow.shadowColor,
-      shadowOffset: thumbShadow.shadowOffset,
-      shadowOpacity: thumbShadow.shadowOpacity,
-      shadowRadius: thumbShadow.shadowRadius,
-      elevation: thumbShadow.elevation,
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    // The bubble and its caret share one absolutely placed, centred column so
-    // the caret's tip sits on the thumb's centre line.
-    bubbleWrap: {
-      position: 'absolute',
-      bottom: sizeCfg.thumbDiameter + BUBBLE_GAP,
-      left: sizeCfg.thumbDiameter / 2 - BUBBLE_WRAP_WIDTH / 2,
-      width: BUBBLE_WRAP_WIDTH,
-      alignItems: 'center'
-    },
-    bubbleCaret: {
-      width: BUBBLE_CARET,
-      height: BUBBLE_CARET,
-      marginTop: -BUBBLE_CARET / 2 - 1,
-      borderRadius: 1,
-      ...smoothCorners,
-      transform: [{
-        rotate: '45deg'
-      }]
-    },
-    bubble: {
-      paddingHorizontal: theme.spacing.sm,
-      paddingVertical: theme.spacing.xxs,
-      borderRadius: theme.radius.md,
-      ...smoothCorners,
-      minWidth: 36,
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...Platform.select({
-        ios: {
-          shadowColor: theme.shadows.sm.shadowColor,
-          shadowOffset: theme.shadows.sm.shadowOffset,
-          shadowOpacity: theme.shadows.sm.shadowOpacity,
-          shadowRadius: theme.shadows.sm.shadowRadius
-        },
-        android: {
-          elevation: theme.shadows.sm.elevation
-        },
-        default: {}
-      })
-    },
-    bubbleText: {
-      color: theme.colors.text.inverse,
-      fontSize: theme.typography.fontSize.xs,
-      fontWeight: theme.typography.fontWeight.semibold
-    }
-  });
-};
-export { Slider };
-export default Slider;
-//# sourceMappingURL=Slider.js.map
+import{forwardRef as t,useCallback as e,useEffect as a,useMemo as r,useRef as i,useState as o}from"react";import{Platform as n,Pressable as s,StyleSheet as l,Text as u,View as c}from"react-native";import{Gesture as m,GestureDetector as d}from"react-native-gesture-handler";import h,{cancelAnimation as b,Easing as g,runOnJS as p,useAnimatedStyle as v,useSharedValue as f,withSpring as y,withTiming as w}from"react-native-reanimated";import{useControllableState as k}from"../../hooks/index.js";import{useTheme as D}from"../../theme/index.js";import{resolveHaptic as x,triggerHaptic as C}from"../../utils/index.js";import{smoothCorners as H}from"../../utils/corners.js";import{sliderToneInk as M}from"./valueText.js";import{jsx as S,jsxs as O}from"react/jsx-runtime";const j={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},R={inset:{sm:{trackHeight:14,thumbDiameter:10},md:{trackHeight:20,thumbDiameter:14},lg:{trackHeight:26,thumbDiameter:18}},minimal:{sm:{trackHeight:2,thumbDiameter:14},md:{trackHeight:3,thumbDiameter:18},lg:{trackHeight:4,thumbDiameter:22}},bar:{sm:{trackHeight:20,thumbDiameter:20},md:{trackHeight:28,thumbDiameter:28},lg:{trackHeight:36,thumbDiameter:36}}},W={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(t,e,a)=>Math.min(Math.max(t,e),a),X={shadowOpacity:0,elevation:0},defaultFormatLabel=t=>String(t),E=t((t,n)=>{const{min:l=0,max:E=100,step:V=1,disabled:L=!1,tone:T="primary",size:A="md",variant:F="default",showLabel:P=!1,snapThumb:z=!1,formatLabel:I=defaultFormatLabel,renderLabel:N,accessibilityLabel:$,haptic:J,style:U,containerStyle:q,trackStyle:B,fillStyle:G,thumbStyle:K,labelStyle:Q,thumbPressScale:Y,labelShowDuration:Z,labelOpacity:_,testID:tt}=t,et=D(),at=et.components.slider,rt=at?.[A],it=r(()=>"default"===F?{trackHeight:rt?.trackHeight??j[A].trackHeight,thumbDiameter:rt?.thumbDiameter??j[A].thumbDiameter}:R[F][A],[rt,A,F]),ot="inset"===F?it.trackHeight/2:0,nt=at?.thumbPressAnimation??!1,st=Y??at?.thumbPressScale??1.1,lt=Z??at?.labelShowDuration??et.motion.duration.fast,ut=_??at?.labelOpacity??1,ct=r(()=>buildStyles(et,it),[et,it]),mt=r(()=>({damping:et.motion.spring.snappy.damping,stiffness:et.motion.spring.snappy.stiffness,mass:et.motion.spring.snappy.mass}),[et.motion.spring.snappy]),[dt,ht]=o(0),bt=et.colors[W[T]],gt=M(et,T),pt=!0===t.range,[vt,ft]=k({value:t.value,defaultValue:t.defaultValue??(pt?[l,E]:l),onChange:t.onChange}),yt=f(0),wt=f(0),kt=f(pt?vt[0]:vt),Dt=f(pt?vt[1]:vt),xt=f(0),Ct=f(0),Ht=f(1),Mt=f(1),St="always"===P,Ot=f(St?1:0),jt=f(St?1:0),Rt=r(()=>{const t=String(V).split(".")[1]?.length??0;return Math.pow(10,t)},[V]);a(()=>()=>{b(yt),b(wt),b(Ht),b(Mt),b(Ot),b(jt)},[yt,wt,Ht,Mt,Ot,jt]);const Wt=e((t,e)=>{const a=e-2*ot;return E===l||a<=0?ot:ot+(t-l)/(E-l)*a},[l,E,ot]),Xt=e((t,e)=>{const a=e-2*ot;if(a<=0)return l;const r=clamp((t-ot)/a,0,1);return((t,e,a,r)=>{if(r<=0)return clamp(t,e,a);const i=Math.round((t-e)/r)*r+e,o=String(r).split(".")[1]?.length??0,n=o>0?Number(i.toFixed(o)):i;return clamp(n,e,a)})(l+r*(E-l),l,E,V)},[l,E,V,ot]),Et=i(!1),Vt=et.motion.duration.fast,Lt=i(vt);Lt.current=vt;const Tt=i(dt);Tt.current=dt;const At=e((t=!1)=>{const e=Tt.current;if(e<=0)return;const place=e=>t?w(e,{duration:Vt,easing:g.out(g.cubic)}):e,a=Lt.current;if(pt){const[t,r]=a,i=Math.min(t,r),o=Math.max(t,r);kt.value=i,Dt.value=o,yt.value=place(Wt(i,e)),wt.value=place(Wt(o,e))}else{const t=a;kt.value=t,Dt.value=t,yt.value=place(Wt(t,e))}},[pt,Wt,kt,Dt,yt,wt,Vt]),[Ft,Pt]=o(0),zt=i(!1),It=e(t=>{Et.current=t,t||(zt.current=!0,Pt(t=>t+1))},[]);a(()=>{if(Et.current)return;const t=zt.current;zt.current=!1,At(t)},[JSON.stringify(vt),dt,Ft,At]);const Nt=e(t=>{const e=t.nativeEvent.layout.width;Ct.value=e,ht(e)},[Ct]),$t=e((t,e)=>{ft(pt?[t,e]:t)},[pt,ft]),Jt=e(()=>{const t=x(J,"selection");t&&C(t)},[J]),Ut=i($t);Ut.current=$t;const qt=i(Jt);qt.current=Jt;const Bt=e((t,e)=>Ut.current(t,e),[]),Gt=e(()=>qt.current(),[]),Kt=Math.max(0,(44-it.thumbDiameter)/2),Qt=Kt>0?Kt:void 0,Yt=e(t=>{const e="low"===t?yt:wt,a="low"===t?kt:Dt,r="low"===t?Dt:kt,i="low"===t?Ht:Mt,o="low"===t?Ot:jt,n="low"===t,s=l,u=E,c=V,d=Rt,h=pt,b=st,v=nt,f=!0===P,k=z,D=ut,x=lt,C=mt,H=ot,follow=t=>{const i=Ct.value-2*H;if(i<=0||!Number.isFinite(t))return;const o=Math.min(Math.max(xt.value+t,H),Ct.value-H);let l=s+(o-H)/i*(u-s);c>0&&(l=Math.round((l-s)/c)*c+s,l=Math.round(l*d)/d),l=Math.min(Math.max(l,s),u),h&&(n&&l>r.value&&(l=r.value),!n&&l<r.value&&(l=r.value)),e.value=k||u===s?u===s?H:H+(l-s)/(u-s)*i:h?n?Math.min(o,wt.value):Math.max(o,yt.value):o,l!==a.value&&(a.value=l,l!==s&&l!==u||p(Gt)(),p(Bt)(kt.value,Dt.value))},M=m.Pan().enabled(!L).minDistance(0);return(void 0===Qt?M:M.hitSlop(Qt)).onStart(()=>{p(It)(!0),xt.value=e.value,v&&(i.value=y(b,C)),f&&(o.value=w(D,{duration:x,easing:g.out(g.cubic)})),p(Gt)()}).onUpdate(t=>{follow(t.translationX)}).onEnd(t=>{follow(t.translationX),v&&(i.value=y(1,C)),f&&(o.value=w(0,{duration:x,easing:g.out(g.cubic)}))}).onFinalize(()=>{p(It)(!1)})},[L,l,E,V,Rt,pt,st,nt,P,z,ut,lt,mt,ot,Qt,Bt,Gt,It,yt,wt,kt,Dt,Ht,Mt,Ot,jt,xt,Ct]),Zt=r(()=>Yt("low"),[Yt]),_t=r(()=>Yt("high"),[Yt]),te=e(t=>{if(L||pt||dt<=0)return;const e=clamp(t.nativeEvent.locationX,0,dt),a=Xt(e,dt);a!==kt.value&&(Jt(),kt.value=a,yt.value=w(Wt(a,dt),{duration:et.motion.duration.fast,easing:g.out(g.cubic)}),$t(a,a))},[L,pt,dt,Xt,Wt,$t,Jt,yt,kt,et.motion.duration.fast]),ee=e(t=>{if(L)return;const e="increment"===t.nativeEvent.actionName?V:-V,a=V>0?Math.round(e*Rt)/Rt:e;if(pt){const t=Math.round((kt.value+a)*Rt)/Rt,e=clamp(t,l,Dt.value);e!==kt.value&&(kt.value=e,yt.value=Wt(e,dt),Jt(),$t(e,Dt.value))}else{const t=Math.round((kt.value+a)*Rt)/Rt,e=clamp(t,l,E);e!==kt.value&&(kt.value=e,yt.value=Wt(e,dt),Jt(),$t(e,e))}},[L,V,Rt,pt,l,E,Wt,dt,yt,kt,Dt,$t,Jt]),ae=it.thumbDiameter/2,re=L?et.colors.surface.disabled:bt,ie="inset"===F?{backgroundColor:re,borderColor:et.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*it.thumbDiameter)),...X}:"minimal"===F?{backgroundColor:re,borderWidth:0}:"bar"===F?{backgroundColor:"transparent",borderWidth:0,...X}:{backgroundColor:et.colors.background.elevated,borderColor:re},oe=v(()=>{const t=Ct.value;if(t<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const e=L?.55:1;if(pt){const a=Math.max(0,wt.value-yt.value+2*ot);return{opacity:e,transform:[{translateX:yt.value-ot},{scaleX:a/t}]}}return{opacity:e,transform:[{translateX:yt.value+ot-t},{scaleX:1}]}}),ne=v(()=>({transform:[{translateX:yt.value-ae},{scale:Ht.value}]})),se=v(()=>({transform:[{translateX:wt.value-ae},{scale:Mt.value}]})),le=v(()=>({opacity:Ot.value})),ue=v(()=>({opacity:jt.value})),clampDisplay=t=>clamp(t,l,E),ce=clampDisplay(pt?Math.min(...vt):vt),me=clampDisplay(pt?Math.max(...vt):vt);return S(c,{ref:n,style:[ct.container,q,U],testID:tt,accessibilityRole:"adjustable",accessibilityLabel:$,accessibilityState:{disabled:L},accessibilityValue:pt?{min:l,max:E,now:ce,text:`${ce} to ${me}`}:{min:l,max:E,now:ce},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:ee,children:S(s,{onPress:te,disabled:L||pt,style:ct.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:O(c,{style:ct.trackWrap,onLayout:Nt,children:[O(c,{style:ct.trackClip,pointerEvents:"none",children:[S(c,{style:[ct.track,{backgroundColor:L?et.colors.surface.disabled:et.colors.border.primary},B]}),S(h.View,{style:[ct.fill,{backgroundColor:L?et.colors.surface.disabled:bt},G,oe]})]}),S(d,{gesture:Zt,children:S(h.View,{style:[ct.thumb,{width:it.thumbDiameter,height:it.thumbDiameter,borderRadius:ae,...H,opacity:L?.55:1},ie,K,ne],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:P?O(h.View,{style:[ct.bubbleWrap,le],pointerEvents:"none",children:[S(c,{style:[ct.bubble,{backgroundColor:bt}],children:N?N(ce):S(u,{style:[ct.bubbleText,{color:gt},Q],numberOfLines:1,children:I(ce)})}),S(c,{style:[ct.bubbleCaret,{backgroundColor:bt}]})]}):null})}),pt?S(d,{gesture:_t,children:S(h.View,{style:[ct.thumb,{width:it.thumbDiameter,height:it.thumbDiameter,borderRadius:ae,...H,opacity:L?.55:1},ie,K,se],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:P?O(h.View,{style:[ct.bubbleWrap,ue],pointerEvents:"none",children:[S(c,{style:[ct.bubble,{backgroundColor:bt}],children:N?N(me):S(u,{style:[ct.bubbleText,{color:gt},Q],numberOfLines:1,children:I(me)})}),S(c,{style:[ct.bubbleCaret,{backgroundColor:bt}]})]}):null})}):null]})})})});E.displayName="Slider";const buildStyles=(t,e)=>{const a=t.shadows.md,r=Math.max(e.thumbDiameter,e.trackHeight),i=r/2+4;return l.create({container:{width:"100%",paddingVertical:i,justifyContent:"center"},trackTouch:{width:"100%",justifyContent:"center"},trackWrap:{width:"100%",height:r,justifyContent:"center"},trackClip:{position:"absolute",left:0,right:0,height:e.trackHeight,top:(r-e.trackHeight)/2,borderRadius:e.trackHeight/2,...H,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:e.trackHeight/2,...H},fill:{position:"absolute",top:0,left:0,width:"100%",height:e.trackHeight,borderRadius:e.trackHeight/2,...H,transformOrigin:"left"},thumb:{position:"absolute",top:(r-e.thumbDiameter)/2,left:0,borderWidth:2,shadowColor:a.shadowColor,shadowOffset:a.shadowOffset,shadowOpacity:a.shadowOpacity,shadowRadius:a.shadowRadius,elevation:a.elevation,alignItems:"center",justifyContent:"center"},bubbleWrap:{position:"absolute",bottom:e.thumbDiameter+2,left:e.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,...H,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:t.spacing.sm,paddingVertical:t.spacing.xxs,borderRadius:t.radius.md,...H,minWidth:36,alignItems:"center",justifyContent:"center",...n.select({ios:{shadowColor:t.shadows.sm.shadowColor,shadowOffset:t.shadows.sm.shadowOffset,shadowOpacity:t.shadows.sm.shadowOpacity,shadowRadius:t.shadows.sm.shadowRadius},android:{elevation:t.shadows.sm.elevation},default:{}})},bubbleText:{color:t.colors.onPrimary,fontSize:t.typography.fontSize.xs,fontWeight:t.typography.fontWeight.semibold}})};export{E as Slider};export default E;