@webority/mobile-ui 0.0.0-stage → 0.0.34

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

@@ -0,0 +1,805 @@
+"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