@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,809 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Slider = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- */
-
-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 = exports.Slider = /*#__PURE__*/(0, _react.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 = (0, _index2.useTheme)();
-  const sliderTheme = theme.components.slider;
-  const sliderSizeTheme = sliderTheme?.[size];
-  const sizeCfg = (0, _react.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 = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
-  const springCfg = (0, _react.useMemo)(() => ({
-    damping: theme.motion.spring.snappy.damping,
-    stiffness: theme.motion.spring.snappy.stiffness,
-    mass: theme.motion.spring.snappy.mass
-  }), [theme.motion.spring.snappy]);
-  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
-  const fillColor = theme.colors[TONE_TO_COLOR_KEY[tone]];
-  const isRange = props.range === true;
-  const [currentValue, setCurrentValue] = (0, _index.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 = (0, _reactNativeReanimated.useSharedValue)(0);
-  const highX = (0, _reactNativeReanimated.useSharedValue)(0);
-  const lowVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[0] : currentValue);
-  const highVal = (0, _reactNativeReanimated.useSharedValue)(isRange ? currentValue[1] : currentValue);
-  const dragStartX = (0, _reactNativeReanimated.useSharedValue)(0);
-  const trackW = (0, _reactNativeReanimated.useSharedValue)(0);
-  const lowScale = (0, _reactNativeReanimated.useSharedValue)(1);
-  const highScale = (0, _reactNativeReanimated.useSharedValue)(1);
-  // A bubble that is always up starts visible and never fades.
-  const labelAlwaysOn = showLabel === 'always';
-  const lowLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(labelAlwaysOn ? 1 : 0);
-  const highLabelOpacity = (0, _reactNativeReanimated.useSharedValue)(labelAlwaysOn ? 1 : 0);
-
-  // Float-drift guard precision for step snapping (e.g. step 0.1 -> precision 10).
-  const precision = (0, _react.useMemo)(() => {
-    const decimals = String(step).split('.')[1]?.length ?? 0;
-    return Math.pow(10, decimals);
-  }, [step]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      (0, _reactNativeReanimated.cancelAnimation)(lowX);
-      (0, _reactNativeReanimated.cancelAnimation)(highX);
-      (0, _reactNativeReanimated.cancelAnimation)(lowScale);
-      (0, _reactNativeReanimated.cancelAnimation)(highScale);
-      (0, _reactNativeReanimated.cancelAnimation)(lowLabelOpacity);
-      (0, _reactNativeReanimated.cancelAnimation)(highLabelOpacity);
-    };
-  }, [lowX, highX, lowScale, highScale, lowLabelOpacity, highLabelOpacity]);
-  const valueToPx = (0, _react.useCallback)((value, width) => {
-    const travel = width - endInset * 2;
-    if (max === min || travel <= 0) {
-      return endInset;
-    }
-    return endInset + (value - min) / (max - min) * travel;
-  }, [min, max, endInset]);
-  const pxToValue = (0, _react.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 = (0, _react.useRef)(false);
-  const settleDuration = theme.motion.duration.fast;
-  const currentValueRef = (0, _react.useRef)(currentValue);
-  currentValueRef.current = currentValue;
-  const trackWidthRef = (0, _react.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 = (0, _react.useCallback)((settle = false) => {
-    const width = trackWidthRef.current;
-    if (width <= 0) {
-      return;
-    }
-    const place = px => settle ? (0, _reactNativeReanimated.withTiming)(px, {
-      duration: settleDuration,
-      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.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] = (0, _react.useState)(0);
-  const settleOnNextSync = (0, _react.useRef)(false);
-  const setDragging = (0, _react.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
-  (0, _react.useEffect)(() => {
-    if (dragging.current) {
-      return;
-    }
-    const settle = settleOnNextSync.current;
-    settleOnNextSync.current = false;
-    syncFromValue(settle);
-  }, [JSON.stringify(currentValue), trackWidth, dragEnd, syncFromValue]);
-  const onTrackLayout = (0, _react.useCallback)(e => {
-    const w = e.nativeEvent.layout.width;
-    trackW.value = w;
-    setTrackWidth(w);
-  }, [trackW]);
-  const fireChange = (0, _react.useCallback)((lo, hi) => {
-    setCurrentValue(isRange ? [lo, hi] : lo);
-  }, [isRange, setCurrentValue]);
-  const fireHaptic = (0, _react.useCallback)(() => {
-    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.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 = (0, _react.useRef)(fireChange);
-  fireChangeRef.current = fireChange;
-  const fireHapticRef = (0, _react.useRef)(fireHaptic);
-  fireHapticRef.current = fireHaptic;
-  const emitChange = (0, _react.useCallback)((lo, hi) => fireChangeRef.current(lo, hi), []);
-  const emitHaptic = (0, _react.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 = (0, _react.useCallback)(which => {
-    const xSV = which === 'low' ? lowX : highX;
-    const valSV = which === 'low' ? lowVal : highVal;
-    const otherSV = which === 'low' ? highVal : lowVal;
-    const scaleSV = which === 'low' ? lowScale : highScale;
-    const labelSV = which === 'low' ? lowLabelOpacity : highLabelOpacity;
-    const isLow = which === 'low';
-    const _min = min;
-    const _max = max;
-    const _step = step;
-    const _precision = precision;
-    const _range = isRange;
-    const _pressScale = resolvedPressScale;
-    const _pressAnim = thumbPressAnimationEnabled;
-    const _showLabel = showLabel === 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) {
-          (0, _reactNativeReanimated.runOnJS)(emitHaptic)();
-        }
-        (0, _reactNativeReanimated.runOnJS)(emitChange)(lowVal.value, highVal.value);
-      }
-    };
-    const pan = _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).minDistance(0);
-    return (thumbHitSlop === undefined ? pan : pan.hitSlop(thumbHitSlop)).onStart(() => {
-      'worklet';
-
-      (0, _reactNativeReanimated.runOnJS)(setDragging)(true);
-      dragStartX.value = xSV.value;
-      if (_pressAnim) {
-        scaleSV.value = (0, _reactNativeReanimated.withSpring)(_pressScale, _spring);
-      }
-      if (_showLabel) {
-        labelSV.value = (0, _reactNativeReanimated.withTiming)(_labelOpacity, {
-          duration: _labelDur,
-          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
-        });
-      }
-      (0, _reactNativeReanimated.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 = (0, _reactNativeReanimated.withSpring)(1, _spring);
-      }
-      if (_showLabel) {
-        labelSV.value = (0, _reactNativeReanimated.withTiming)(0, {
-          duration: _labelDur,
-          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
-        });
-      }
-    })
-    // Also on a cancelled pan (a parent scroll took over), which skips onEnd.
-    .onFinalize(() => {
-      'worklet';
-
-      (0, _reactNativeReanimated.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 = (0, _react.useMemo)(() => buildPan('low'), [buildPan]);
-  const highPan = (0, _react.useMemo)(() => buildPan('high'), [buildPan]);
-
-  // Tap on track jumps to position (single mode only).
-  const handleTrackPress = (0, _react.useCallback)(e => {
-    if (disabled || isRange || trackWidth <= 0) {
-      return;
-    }
-    const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
-    const next = pxToValue(px, trackWidth);
-    if (next !== lowVal.value) {
-      fireHaptic();
-      lowVal.value = next;
-      lowX.value = (0, _reactNativeReanimated.withTiming)(valueToPx(next, trackWidth), {
-        duration: theme.motion.duration.fast,
-        easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
-      });
-      fireChange(next, next);
-    }
-  }, [disabled, isRange, trackWidth, pxToValue, valueToPx, fireChange, fireHaptic, lowX, lowVal, theme.motion.duration.fast]);
-
-  // Accessibility actions: increment / decrement.
-  const handleAccessibilityAction = (0, _react.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 = (0, _reactNativeReanimated.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 = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateX: lowX.value - thumbRadius
-    }, {
-      scale: lowScale.value
-    }]
-  }));
-  const highThumbStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateX: highX.value - thumbRadius
-    }, {
-      scale: highScale.value
-    }]
-  }));
-  const lowLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: lowLabelOpacity.value
-  }));
-  const highLabelStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    opacity: highLabelOpacity.value
-  }));
-
-  // Display values (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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: handleTrackPress,
-      disabled: disabled || isRange,
-      style: styles.trackTouch,
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.trackWrap,
-        onLayout: onTrackLayout,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.trackClip,
-          pointerEvents: "none",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.track, {
-              backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
-            }, trackStyle]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-            style: [styles.fill, {
-              backgroundColor: disabled ? theme.colors.surface.disabled : fillColor
-            }, fillStyle, fillAnimStyle]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-          gesture: lowPan,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-            style: [styles.thumb, {
-              width: sizeCfg.thumbDiameter,
-              height: sizeCfg.thumbDiameter,
-              borderRadius: thumbRadius,
-              ..._corners.smoothCorners,
-              opacity: disabled ? 0.55 : 1
-            }, thumbLook, thumbStyle, lowThumbStyle],
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-              style: [styles.bubbleWrap, lowLabelStyle],
-              pointerEvents: "none",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.bubble, {
-                  backgroundColor: fillColor
-                }],
-                children: renderLabel ? renderLabel(lowDisplayValue) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.bubbleText, labelStyle],
-                  numberOfLines: 1,
-                  children: formatLabel(lowDisplayValue)
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.bubbleCaret, {
-                  backgroundColor: fillColor
-                }]
-              })]
-            }) : null
-          })
-        }), isRange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-          gesture: highPan,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-            style: [styles.thumb, {
-              width: sizeCfg.thumbDiameter,
-              height: sizeCfg.thumbDiameter,
-              borderRadius: thumbRadius,
-              ..._corners.smoothCorners,
-              opacity: disabled ? 0.55 : 1
-            }, thumbLook, thumbStyle, highThumbStyle],
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
-              style: [styles.bubbleWrap, highLabelStyle],
-              pointerEvents: "none",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.bubble, {
-                  backgroundColor: fillColor
-                }],
-                children: renderLabel ? renderLabel(highDisplayValue) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.bubbleText, labelStyle],
-                  numberOfLines: 1,
-                  children: formatLabel(highDisplayValue)
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 _reactNative.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,
-      ..._corners.smoothCorners,
-      overflow: 'hidden'
-    },
-    track: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      borderRadius: sizeCfg.trackHeight / 2,
-      ..._corners.smoothCorners
-    },
-    fill: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: sizeCfg.trackHeight,
-      borderRadius: sizeCfg.trackHeight / 2,
-      ..._corners.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,
-      ..._corners.smoothCorners,
-      transform: [{
-        rotate: '45deg'
-      }]
-    },
-    bubble: {
-      paddingHorizontal: theme.spacing.sm,
-      paddingVertical: theme.spacing.xxs,
-      borderRadius: theme.radius.md,
-      ..._corners.smoothCorners,
-      minWidth: 36,
-      alignItems: 'center',
-      justifyContent: 'center',
-      ..._reactNative.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
-    }
-  });
-};
-var _default = exports.default = Slider;
-//# sourceMappingURL=Slider.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Slider=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_valueText=require("./valueText.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?r:a){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?i(s,t,n):s[t]=e[t]);return s})(e,t)}const SIZE_MAP={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},VARIANT_SIZE_MAP={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}}},INSET_RING_RATIO=.3,MIN_THUMB_TOUCH=44,TONE_TO_COLOR_KEY={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),snapToStep=(e,t,a,r)=>{if(r<=0)return clamp(e,t,a);const i=Math.round((e-t)/r)*r+t,n=String(r).split(".")[1]?.length??0,s=n>0?Number(i.toFixed(n)):i;return clamp(s,t,a)},BUBBLE_GAP=2,BUBBLE_CARET=8,BUBBLE_WRAP_WIDTH=160,NO_SHADOW={shadowOpacity:0,elevation:0},defaultFormatLabel=e=>String(e),Slider=exports.Slider=(0,_react.forwardRef)((e,t)=>{const{min:a=0,max:r=100,step:i=1,disabled:n=!1,tone:s="primary",size:o="md",variant:l="default",showLabel:c=!1,snapThumb:u=!1,formatLabel:d=defaultFormatLabel,renderLabel:m,accessibilityLabel:h,haptic:b,style:_,containerStyle:v,trackStyle:p,fillStyle:f,thumbStyle:g,labelStyle:R,thumbPressScale:y,labelShowDuration:x,labelOpacity:N,testID:w}=e,k=(0,_index2.useTheme)(),S=k.components.slider,j=S?.[o],C=(0,_react.useMemo)(()=>"default"===l?{trackHeight:j?.trackHeight??SIZE_MAP[o].trackHeight,thumbDiameter:j?.thumbDiameter??SIZE_MAP[o].thumbDiameter}:VARIANT_SIZE_MAP[l][o],[j,o,l]),M="inset"===l?C.trackHeight/2:0,O=S?.thumbPressAnimation??!1,H=y??S?.thumbPressScale??1.1,D=x??S?.labelShowDuration??k.motion.duration.fast,A=N??S?.labelOpacity??1,E=(0,_react.useMemo)(()=>buildStyles(k,C),[k,C]),T=(0,_react.useMemo)(()=>({damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass}),[k.motion.spring.snappy]),[V,W]=(0,_react.useState)(0),P=k.colors[TONE_TO_COLOR_KEY[s]],I=(0,_valueText.sliderToneInk)(k,s),L=!0===e.range,[q,X]=(0,_index.useControllableState)({value:e.value,defaultValue:e.defaultValue??(L?[a,r]:a),onChange:e.onChange}),B=(0,_reactNativeReanimated.useSharedValue)(0),G=(0,_reactNativeReanimated.useSharedValue)(0),F=(0,_reactNativeReanimated.useSharedValue)(L?q[0]:q),J=(0,_reactNativeReanimated.useSharedValue)(L?q[1]:q),U=(0,_reactNativeReanimated.useSharedValue)(0),z=(0,_reactNativeReanimated.useSharedValue)(0),Z=(0,_reactNativeReanimated.useSharedValue)(1),K=(0,_reactNativeReanimated.useSharedValue)(1),Y="always"===c,$=(0,_reactNativeReanimated.useSharedValue)(Y?1:0),Q=(0,_reactNativeReanimated.useSharedValue)(Y?1:0),ee=(0,_react.useMemo)(()=>{const e=String(i).split(".")[1]?.length??0;return Math.pow(10,e)},[i]);(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(B),(0,_reactNativeReanimated.cancelAnimation)(G),(0,_reactNativeReanimated.cancelAnimation)(Z),(0,_reactNativeReanimated.cancelAnimation)(K),(0,_reactNativeReanimated.cancelAnimation)($),(0,_reactNativeReanimated.cancelAnimation)(Q)},[B,G,Z,K,$,Q]);const te=(0,_react.useCallback)((e,t)=>{const i=t-2*M;return r===a||i<=0?M:M+(e-a)/(r-a)*i},[a,r,M]),ae=(0,_react.useCallback)((e,t)=>{const n=t-2*M;if(n<=0)return a;const s=clamp((e-M)/n,0,1);return snapToStep(a+s*(r-a),a,r,i)},[a,r,i,M]),re=(0,_react.useRef)(!1),ie=k.motion.duration.fast,ne=(0,_react.useRef)(q);ne.current=q;const se=(0,_react.useRef)(V);se.current=V;const oe=(0,_react.useCallback)((e=!1)=>{const t=se.current;if(t<=0)return;const place=t=>e?(0,_reactNativeReanimated.withTiming)(t,{duration:ie,easing:_reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)}):t,a=ne.current;if(L){const[e,r]=a,i=Math.min(e,r),n=Math.max(e,r);F.value=i,J.value=n,B.value=place(te(i,t)),G.value=place(te(n,t))}else{const e=a;F.value=e,J.value=e,B.value=place(te(e,t))}},[L,te,F,J,B,G,ie]),[le,ce]=(0,_react.useState)(0),ue=(0,_react.useRef)(!1),de=(0,_react.useCallback)(e=>{re.current=e,e||(ue.current=!0,ce(e=>e+1))},[]);(0,_react.useEffect)(()=>{if(re.current)return;const e=ue.current;ue.current=!1,oe(e)},[JSON.stringify(q),V,le,oe]);const me=(0,_react.useCallback)(e=>{const t=e.nativeEvent.layout.width;z.value=t,W(t)},[z]),he=(0,_react.useCallback)((e,t)=>{X(L?[e,t]:e)},[L,X]),be=(0,_react.useCallback)(()=>{const e=(0,_index3.resolveHaptic)(b,"selection");e&&(0,_index3.triggerHaptic)(e)},[b]),_e=(0,_react.useRef)(he);_e.current=he;const ve=(0,_react.useRef)(be);ve.current=be;const pe=(0,_react.useCallback)((e,t)=>_e.current(e,t),[]),fe=(0,_react.useCallback)(()=>ve.current(),[]),ge=Math.max(0,(44-C.thumbDiameter)/2),Re=ge>0?ge:void 0,ye=(0,_react.useCallback)(e=>{const t="low"===e?B:G,s="low"===e?F:J,o="low"===e?J:F,l="low"===e?Z:K,d="low"===e?$:Q,m="low"===e,h=a,b=r,_=i,v=ee,p=L,f=H,g=O,R=!0===c,y=u,x=A,N=D,w=T,k=M,follow=e=>{"worklet";const a=z.value-2*k;if(a<=0||!Number.isFinite(e))return;const r=Math.min(Math.max(U.value+e,k),z.value-k);let i=h+(r-k)/a*(b-h);_>0&&(i=Math.round((i-h)/_)*_+h,i=Math.round(i*v)/v),i=Math.min(Math.max(i,h),b),p&&(m&&i>o.value&&(i=o.value),!m&&i<o.value&&(i=o.value)),t.value=y||b===h?b===h?k:k+(i-h)/(b-h)*a:p?m?Math.min(r,G.value):Math.max(r,B.value):r,i!==s.value&&(s.value=i,i!==h&&i!==b||(0,_reactNativeReanimated.runOnJS)(fe)(),(0,_reactNativeReanimated.runOnJS)(pe)(F.value,J.value))},S=_reactNativeGestureHandler.Gesture.Pan().enabled(!n).minDistance(0);return(void 0===Re?S:S.hitSlop(Re)).onStart(()=>{"worklet";(0,_reactNativeReanimated.runOnJS)(de)(!0),U.value=t.value,g&&(l.value=(0,_reactNativeReanimated.withSpring)(f,w)),R&&(d.value=(0,_reactNativeReanimated.withTiming)(x,{duration:N,easing:_reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)})),(0,_reactNativeReanimated.runOnJS)(fe)()}).onUpdate(e=>{"worklet";follow(e.translationX)}).onEnd(e=>{"worklet";follow(e.translationX),g&&(l.value=(0,_reactNativeReanimated.withSpring)(1,w)),R&&(d.value=(0,_reactNativeReanimated.withTiming)(0,{duration:N,easing:_reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)}))}).onFinalize(()=>{"worklet";(0,_reactNativeReanimated.runOnJS)(de)(!1)})},[n,a,r,i,ee,L,H,O,c,u,A,D,T,M,Re,pe,fe,de,B,G,F,J,Z,K,$,Q,U,z]),xe=(0,_react.useMemo)(()=>ye("low"),[ye]),Ne=(0,_react.useMemo)(()=>ye("high"),[ye]),we=(0,_react.useCallback)(e=>{if(n||L||V<=0)return;const t=clamp(e.nativeEvent.locationX,0,V),a=ae(t,V);a!==F.value&&(be(),F.value=a,B.value=(0,_reactNativeReanimated.withTiming)(te(a,V),{duration:k.motion.duration.fast,easing:_reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)}),he(a,a))},[n,L,V,ae,te,he,be,B,F,k.motion.duration.fast]),ke=(0,_react.useCallback)(e=>{if(n)return;const t="increment"===e.nativeEvent.actionName?i:-i,s=i>0?Math.round(t*ee)/ee:t;if(L){const e=Math.round((F.value+s)*ee)/ee,t=clamp(e,a,J.value);t!==F.value&&(F.value=t,B.value=te(t,V),be(),he(t,J.value))}else{const e=Math.round((F.value+s)*ee)/ee,t=clamp(e,a,r);t!==F.value&&(F.value=t,B.value=te(t,V),be(),he(t,t))}},[n,i,ee,L,a,r,te,V,B,F,J,he,be]),Se=C.thumbDiameter/2,je=n?k.colors.surface.disabled:P,Ce="inset"===l?{backgroundColor:je,borderColor:k.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*C.thumbDiameter)),...NO_SHADOW}:"minimal"===l?{backgroundColor:je,borderWidth:0}:"bar"===l?{backgroundColor:"transparent",borderWidth:0,...NO_SHADOW}:{backgroundColor:k.colors.background.elevated,borderColor:je},Me=(0,_reactNativeReanimated.useAnimatedStyle)(()=>{const e=z.value;if(e<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const t=n?.55:1;if(L){const a=Math.max(0,G.value-B.value+2*M);return{opacity:t,transform:[{translateX:B.value-M},{scaleX:a/e}]}}return{opacity:t,transform:[{translateX:B.value+M-e},{scaleX:1}]}}),Oe=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:B.value-Se},{scale:Z.value}]})),He=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:G.value-Se},{scale:K.value}]})),De=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({opacity:$.value})),Ae=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({opacity:Q.value})),clampDisplay=e=>clamp(e,a,r),Ee=clampDisplay(L?Math.min(...q):q),Te=clampDisplay(L?Math.max(...q):q);return(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,style:[E.container,v,_],testID:w,accessibilityRole:"adjustable",accessibilityLabel:h,accessibilityState:{disabled:n},accessibilityValue:L?{min:a,max:r,now:Ee,text:`${Ee} to ${Te}`}:{min:a,max:r,now:Ee},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:ke,children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:we,disabled:n||L,style:E.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:E.trackWrap,onLayout:me,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:E.trackClip,pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.track,{backgroundColor:n?k.colors.surface.disabled:k.colors.border.primary},p]}),(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[E.fill,{backgroundColor:n?k.colors.surface.disabled:P},f,Me]})]}),(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:xe,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[E.thumb,{width:C.thumbDiameter,height:C.thumbDiameter,borderRadius:Se,..._corners.smoothCorners,opacity:n?.55:1},Ce,g,Oe],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:c?(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[E.bubbleWrap,De],pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.bubble,{backgroundColor:P}],children:m?m(Ee):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[E.bubbleText,{color:I},R],numberOfLines:1,children:d(Ee)})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.bubbleCaret,{backgroundColor:P}]})]}):null})}),L?(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:Ne,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[E.thumb,{width:C.thumbDiameter,height:C.thumbDiameter,borderRadius:Se,..._corners.smoothCorners,opacity:n?.55:1},Ce,g,He],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:c?(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[E.bubbleWrap,Ae],pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.bubble,{backgroundColor:P}],children:m?m(Te):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[E.bubbleText,{color:I},R],numberOfLines:1,children:d(Te)})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[E.bubbleCaret,{backgroundColor:P}]})]}):null})}):null]})})})});Slider.displayName="Slider";const buildStyles=(e,t)=>{const a=e.shadows.md,r=Math.max(t.thumbDiameter,t.trackHeight),i=r/2+4;return _reactNative.StyleSheet.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:t.trackHeight,top:(r-t.trackHeight)/2,borderRadius:t.trackHeight/2,..._corners.smoothCorners,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:t.trackHeight/2,..._corners.smoothCorners},fill:{position:"absolute",top:0,left:0,width:"100%",height:t.trackHeight,borderRadius:t.trackHeight/2,..._corners.smoothCorners,transformOrigin:"left"},thumb:{position:"absolute",top:(r-t.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:t.thumbDiameter+2,left:t.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,..._corners.smoothCorners,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.xxs,borderRadius:e.radius.md,..._corners.smoothCorners,minWidth:36,alignItems:"center",justifyContent:"center",..._reactNative.Platform.select({ios:{shadowColor:e.shadows.sm.shadowColor,shadowOffset:e.shadows.sm.shadowOffset,shadowOpacity:e.shadows.sm.shadowOpacity,shadowRadius:e.shadows.sm.shadowRadius},android:{elevation:e.shadows.sm.elevation},default:{}})},bubbleText:{color:e.colors.onPrimary,fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.semibold}})};var _default=exports.default=Slider;