@tamagui/slider 1.116.0 → 1.116.2

package/dist/cjs/Slider.js

@@ -0,0 +1,462 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var Slider_exports = {};
+__export(Slider_exports, {
+  Range: () => Range,
+  Slider: () => Slider,
+  SliderThumb: () => SliderThumb,
+  SliderThumbFrame: () => SliderThumbFrame,
+  SliderTrack: () => SliderTrack,
+  SliderTrackActive: () => SliderTrackActive,
+  SliderTrackActiveFrame: () => SliderTrackActiveFrame,
+  SliderTrackFrame: () => SliderTrackFrame,
+  Thumb: () => Thumb,
+  Track: () => Track
+});
+module.exports = __toCommonJS(Slider_exports);
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_get_token = require("@tamagui/get-token"), import_helpers = require("@tamagui/helpers"), import_helpers2 = require("@tamagui/helpers"), import_stacks = require("@tamagui/stacks"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), React = __toESM(require("react")), import_constants2 = require("./constants"), import_helpers3 = require("./helpers"), import_SliderImpl = require("./SliderImpl"), import_jsx_runtime = require("react/jsx-runtime");
+const activeSliderMeasureListeners = /* @__PURE__ */ new Set();
+import_constants.isWeb && import_constants.isClient && (process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL || setInterval?.(
+  () => {
+    activeSliderMeasureListeners.forEach((cb) => cb());
+  },
+  // really doesn't need to be super often
+  1e3
+));
+const SliderHorizontal = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      dir,
+      onSlideStart,
+      onSlideMove,
+      onStepKeyDown,
+      onSlideEnd,
+      ...sliderProps
+    } = props, direction = (0, import_use_direction.useDirection)(dir), isDirectionLTR = direction === "ltr", sliderRef = React.useRef(null), [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = (0, import_core.createShallowSetState)(setState_);
+    function getValueFromPointer(pointerPosition) {
+      const input = [0, state.size];
+      return (0, import_helpers3.linearScale)(input, isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
+    }
+    const measure = () => {
+      sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
+        setState({
+          size: width,
+          offset: pageX
+        });
+      });
+    };
+    return import_constants.isClient && (useOnDebouncedWindowResize(measure), React.useEffect(() => {
+      const node = sliderRef.current;
+      if (!node) return;
+      let measureTm;
+      const debouncedMeasure = () => {
+        clearTimeout(measureTm), measureTm = setTimeout(() => {
+          measure();
+        }, 200);
+      }, io = new IntersectionObserver(
+        (entries) => {
+          debouncedMeasure(), entries?.[0].isIntersecting ? activeSliderMeasureListeners.add(debouncedMeasure) : activeSliderMeasureListeners.delete(debouncedMeasure);
+        },
+        {
+          root: null,
+          // Use the viewport as the container.
+          rootMargin: "0px",
+          threshold: [0, 0.5, 1]
+        }
+      );
+      return io.observe(node), () => {
+        activeSliderMeasureListeners.delete(debouncedMeasure), io.disconnect();
+      };
+    }, [])), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_constants2.SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: isDirectionLTR ? "left" : "right",
+        endEdge: isDirectionLTR ? "right" : "left",
+        direction: isDirectionLTR ? 1 : -1,
+        sizeProp: "width",
+        size: state.size,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_SliderImpl.SliderImpl,
+          {
+            ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+            dir: direction,
+            ...sliderProps,
+            orientation: "horizontal",
+            onLayout: measure,
+            onSlideStart: (event, target) => {
+              const value = getValueFromPointer(event.nativeEvent.locationX);
+              value && onSlideStart?.(value, target, event);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+              value && onSlideMove?.(value, event);
+            },
+            onSlideEnd: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+              value && onSlideEnd?.(event, value);
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+);
+function useOnDebouncedWindowResize(callback, amt = 200) {
+  React.useEffect(() => {
+    let last;
+    const onResize = () => {
+      clearTimeout(last), last = setTimeout(callback, amt);
+    };
+    return window.addEventListener("resize", onResize), () => {
+      clearTimeout(last), window.removeEventListener("resize", onResize);
+    };
+  }, []);
+}
+const SliderVertical = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      min,
+      max,
+      onSlideStart,
+      onSlideMove,
+      onStepKeyDown,
+      onSlideEnd,
+      ...sliderProps
+    } = props, [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = (0, import_core.createShallowSetState)(setState_), sliderRef = React.useRef(null);
+    function getValueFromPointer(pointerPosition) {
+      const input = [0, state.size];
+      return (0, import_helpers3.linearScale)(input, [max, min])(pointerPosition);
+    }
+    const measure = () => {
+      sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+        setState({
+          size: height,
+          offset: pageY
+        });
+      });
+    };
+    return import_constants.isClient && useOnDebouncedWindowResize(measure), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_constants2.SliderOrientationProvider,
+      {
+        scope: props.__scopeSlider,
+        startEdge: "bottom",
+        endEdge: "top",
+        sizeProp: "height",
+        size: state.size,
+        direction: 1,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_SliderImpl.SliderImpl,
+          {
+            ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+            ...sliderProps,
+            orientation: "vertical",
+            onLayout: measure,
+            onSlideStart: (event, target) => {
+              const value = getValueFromPointer(event.nativeEvent.locationY);
+              value && onSlideStart?.(value, target, event);
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+              value && onSlideMove?.(value, event);
+            },
+            onSlideEnd: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+              onSlideEnd?.(event, value);
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
+              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+), TRACK_NAME = "SliderTrack", SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
+  name: "SliderTrack",
+  variants: {
+    unstyled: {
+      false: {
+        height: "100%",
+        width: "100%",
+        backgroundColor: "$background",
+        position: "relative",
+        borderRadius: 1e5,
+        overflow: "hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+}), SliderTrack = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...trackProps } = props, context = (0, import_constants2.useSliderContext)(TRACK_NAME, __scopeSlider);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SliderTrackFrame,
+      {
+        "data-disabled": context.disabled ? "" : void 0,
+        "data-orientation": context.orientation,
+        orientation: context.orientation,
+        size: context.size,
+        ...trackProps,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+SliderTrack.displayName = TRACK_NAME;
+const RANGE_NAME = "SliderTrackActive", SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
+  name: "SliderTrackActive",
+  backgroundColor: "$background",
+  position: "absolute"
+}), SliderTrackActive = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...rangeProps } = props, context = (0, import_constants2.useSliderContext)(RANGE_NAME, __scopeSlider), orientation = (0, import_constants2.useSliderOrientationContext)(RANGE_NAME, __scopeSlider), ref = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), valuesCount = context.values.length, percentages = context.values.map(
+      (value) => (0, import_helpers3.convertValueToPercentage)(value, context.min, context.max)
+    ), offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0, offsetEnd = 100 - Math.max(...percentages);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SliderTrackActiveFrame,
+      {
+        orientation: context.orientation,
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        size: context.size,
+        animateOnly: ["left", "top", "right", "bottom"],
+        ...rangeProps,
+        ref: composedRefs,
+        [orientation.startEdge]: `${offsetStart}%`,
+        [orientation.endEdge]: `${offsetEnd}%`,
+        ...orientation.sizeProp === "width" ? {
+          height: "100%"
+        } : {
+          left: 0,
+          right: 0
+        }
+      }
+    );
+  }
+);
+SliderTrackActive.displayName = RANGE_NAME;
+const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
+  const tokens = (0, import_core.getTokens)(), size = typeof val == "number" ? val : (0, import_get_token.getSize)(tokens.size[val], {
+    shift: -1
+  });
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+}, SliderThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+  name: "SliderThumb",
+  variants: {
+    size: {
+      "...size": getThumbSize
+    },
+    unstyled: {
+      false: {
+        position: "absolute",
+        bordered: 2,
+        borderWidth: 2,
+        backgrounded: !0,
+        pressTheme: import_constants.isWeb,
+        focusTheme: import_constants.isWeb,
+        hoverTheme: import_constants.isWeb
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+}), SliderThumb = React.memo(
+  SliderThumbFrame.styleable(function(props, forwardedRef) {
+    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props, context = (0, import_constants2.useSliderContext)(THUMB_NAME, __scopeSlider), orientation = (0, import_constants2.useSliderOrientationContext)(THUMB_NAME, __scopeSlider), [thumb, setThumb] = React.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb), value = context.values[index], percent = value === void 0 ? 0 : (0, import_helpers3.convertValueToPercentage)(value, context.min, context.max), label = (0, import_helpers3.getLabel)(index, context.values.length), sizeIn = sizeProp ?? context.size ?? "$true", [size, setSize] = React.useState(() => (0, import_core.getVariableValue)(getThumbSize(sizeIn).width)), thumbInBoundsOffset = size ? (0, import_helpers3.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
+    React.useEffect(() => {
+      if (thumb)
+        return context.thumbs.set(thumb, index), () => {
+          context.thumbs.delete(thumb);
+        };
+    }, [thumb, context.thumbs, index]);
+    const positionalStyles = context.orientation === "horizontal" ? {
+      x: thumbInBoundsOffset - size / 2,
+      y: -size / 2,
+      top: "50%",
+      ...size === 0 && {
+        top: "auto",
+        bottom: "auto"
+      }
+    } : {
+      x: -size / 2,
+      y: size / 2,
+      left: "50%",
+      ...size === 0 && {
+        left: "auto",
+        right: "auto"
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SliderThumbFrame,
+      {
+        ref: composedRefs,
+        role: "slider",
+        "aria-label": props["aria-label"] || label,
+        "aria-valuemin": context.min,
+        "aria-valuenow": value,
+        "aria-valuemax": context.max,
+        "aria-orientation": context.orientation,
+        "data-orientation": context.orientation,
+        "data-disabled": context.disabled ? "" : void 0,
+        tabIndex: context.disabled ? void 0 : 0,
+        animateOnly: ["transform", "left", "top", "right", "bottom"],
+        ...positionalStyles,
+        [orientation.startEdge]: `${percent}%`,
+        size: sizeIn,
+        ...thumbProps,
+        onLayout: (e) => {
+          setSize(e.nativeEvent.layout[orientation.sizeProp]);
+        },
+        onFocus: (0, import_helpers2.composeEventHandlers)(props.onFocus, () => {
+          context.valueIndexToChangeRef.current = index;
+        })
+      }
+    );
+  })
+), SliderComponent = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      name,
+      min = 0,
+      max = 100,
+      step = 1,
+      orientation = "horizontal",
+      disabled = !1,
+      minStepsBetweenThumbs = 0,
+      defaultValue = [min],
+      value,
+      onValueChange = () => {
+      },
+      size: sizeProp,
+      onSlideEnd,
+      onSlideMove,
+      onSlideStart,
+      ...sliderProps
+    } = props, sliderRef = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef), thumbRefs = React.useRef(/* @__PURE__ */ new Map()), valueIndexToChangeRef = React.useRef(0), isHorizontal = orientation === "horizontal", [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+      prop: value,
+      defaultProp: defaultValue,
+      transition: !0,
+      onChange: (value2) => {
+        updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
+      }
+    });
+    import_constants.isWeb && React.useEffect(() => {
+      const node = sliderRef.current;
+      if (!node) return;
+      const preventDefault = (e) => {
+        e.preventDefault();
+      };
+      return node.addEventListener("touchstart", preventDefault), () => {
+        node.removeEventListener("touchstart", preventDefault);
+      };
+    }, []);
+    function updateThumbFocus(focusIndex) {
+      if (import_constants.isWeb) {
+        for (const [node, index] of thumbRefs.current.entries())
+          if (index === focusIndex) {
+            node.focus();
+            return;
+          }
+      }
+    }
+    function handleSlideMove(value2, event) {
+      updateValues(value2, valueIndexToChangeRef.current), onSlideMove?.(event, value2);
+    }
+    function updateValues(value2, atIndex) {
+      const decimalCount = (0, import_helpers3.getDecimalCount)(step), snapToStep = (0, import_helpers3.roundValue)(
+        Math.round((value2 - min) / step) * step + min,
+        decimalCount
+      ), nextValue = (0, import_helpers2.clamp)(snapToStep, [min, max]);
+      setValues((prevValues = []) => {
+        const nextValues = (0, import_helpers3.getNextSortedValues)(prevValues, nextValue, atIndex);
+        return (0, import_helpers3.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step) ? (valueIndexToChangeRef.current = nextValues.indexOf(nextValue), String(nextValues) === String(prevValues) ? prevValues : nextValues) : prevValues;
+      });
+    }
+    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_constants2.SliderProvider,
+      {
+        scope: props.__scopeSlider,
+        disabled,
+        min,
+        max,
+        valueIndexToChangeRef,
+        thumbs: thumbRefs.current,
+        values,
+        orientation,
+        size: sizeProp,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SliderOriented,
+          {
+            "aria-disabled": disabled,
+            "data-disabled": disabled ? "" : void 0,
+            ...sliderProps,
+            ref: composedRefs,
+            min,
+            max,
+            onSlideEnd,
+            onSlideStart: disabled ? void 0 : (value2, target, event) => {
+              if (target !== "thumb") {
+                const closestIndex = (0, import_helpers3.getClosestValueIndex)(values, value2);
+                updateValues(value2, closestIndex);
+              }
+              onSlideStart?.(event, value2, target);
+            },
+            onSlideMove: disabled ? void 0 : handleSlideMove,
+            onHomeKeyDown: () => !disabled && updateValues(min, 0),
+            onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
+            onStepKeyDown: ({ event, direction: stepDirection }) => {
+              if (!disabled) {
+                const multiplier = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1, atIndex = valueIndexToChangeRef.current, value2 = values[atIndex], stepInDirection = step * multiplier * stepDirection;
+                updateValues(value2 + stepInDirection, atIndex);
+              }
+            }
+          }
+        )
+      }
+    );
+  }
+), Slider = (0, import_helpers.withStaticProperties)(SliderComponent, {
+  Track: SliderTrack,
+  TrackActive: SliderTrackActive,
+  Thumb: SliderThumb
+});
+Slider.displayName = import_constants2.SLIDER_NAME;
+const Track = SliderTrack, Range = SliderTrackActive, Thumb = SliderThumb;
+//# sourceMappingURL=Slider.js.map

package/dist/cjs/SliderImpl.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var SliderImpl_exports = {};
+__export(SliderImpl_exports, {
+  SliderFrame: () => SliderFrame,
+  SliderImpl: () => SliderImpl
+});
+module.exports = __toCommonJS(SliderImpl_exports);
+var import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_get_token = require("@tamagui/get-token"), import_helpers = require("@tamagui/helpers"), import_stacks = require("@tamagui/stacks"), React = __toESM(require("react")), import_constants2 = require("./constants"), import_jsx_runtime = require("react/jsx-runtime");
+const SliderFrame = (0, import_core.styled)(import_stacks.YStack, {
+  position: "relative",
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {}
+    },
+    size: (val, extras) => {
+      if (!val)
+        return;
+      const orientation = extras.props.orientation, size = Math.round((0, import_core.getVariableValue)((0, import_get_token.getSize)(val)) / 6);
+      return orientation === "horizontal" ? {
+        height: size,
+        borderRadius: size,
+        justifyContent: "center"
+      } : {
+        width: size,
+        borderRadius: size,
+        alignItems: "center"
+      };
+    }
+  }
+}), SliderImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSlider,
+      onSlideStart,
+      onSlideMove,
+      onSlideEnd,
+      onHomeKeyDown,
+      onEndKeyDown,
+      onStepKeyDown,
+      ...sliderProps
+    } = props, context = (0, import_constants2.useSliderContext)(import_constants2.SLIDER_NAME, __scopeSlider);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SliderFrame,
+      {
+        size: "$4",
+        ...sliderProps,
+        "data-orientation": sliderProps.orientation,
+        ref: forwardedRef,
+        ...import_constants.isWeb && {
+          onKeyDown: (event) => {
+            event.key === "Home" ? (onHomeKeyDown(event), event.preventDefault()) : event.key === "End" ? (onEndKeyDown(event), event.preventDefault()) : import_constants2.PAGE_KEYS.concat(import_constants2.ARROW_KEYS).includes(event.key) && (onStepKeyDown(event), event.preventDefault());
+          }
+        },
+        onMoveShouldSetResponderCapture: () => !0,
+        onScrollShouldSetResponder: () => !0,
+        onScrollShouldSetResponderCapture: () => !0,
+        onMoveShouldSetResponder: () => !0,
+        onStartShouldSetResponder: () => !0,
+        onResponderTerminationRequest: () => !1,
+        onResponderGrant: (0, import_helpers.composeEventHandlers)(props.onResponderGrant, (event) => {
+          const target = event.target, thumbIndex = context.thumbs.get(target), isStartingOnThumb = thumbIndex !== void 0;
+          import_constants.isWeb && target instanceof HTMLElement && context.thumbs.has(target) && target.focus(), !import_constants.isWeb && isStartingOnThumb && (context.valueIndexToChangeRef.current = thumbIndex), onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
+        }),
+        onResponderMove: (0, import_helpers.composeEventHandlers)(props.onResponderMove, (event) => {
+          event.stopPropagation(), onSlideMove(event);
+        }),
+        onResponderRelease: (0, import_helpers.composeEventHandlers)(props.onResponderRelease, (event) => {
+          onSlideEnd(event);
+        })
+      }
+    );
+  }
+);
+//# sourceMappingURL=SliderImpl.js.map

package/dist/cjs/constants.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  ARROW_KEYS: () => ARROW_KEYS,
+  BACK_KEYS: () => BACK_KEYS,
+  PAGE_KEYS: () => PAGE_KEYS,
+  SLIDER_NAME: () => SLIDER_NAME,
+  SliderOrientationProvider: () => SliderOrientationProvider,
+  SliderProvider: () => SliderProvider,
+  createSliderContext: () => createSliderContext,
+  createSliderScope: () => createSliderScope,
+  useSliderContext: () => useSliderContext,
+  useSliderOrientationContext: () => useSliderOrientationContext
+});
+module.exports = __toCommonJS(constants_exports);
+var import_create_context = require("@tamagui/create-context");
+const SLIDER_NAME = "Slider", [createSliderContext, createSliderScope] = (0, import_create_context.createContextScope)(SLIDER_NAME), [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME), [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
+  startEdge: "left",
+  endEdge: "right",
+  sizeProp: "width",
+  size: 0,
+  direction: 1
+}), PAGE_KEYS = ["PageUp", "PageDown"], ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], BACK_KEYS = {
+  ltr: ["ArrowDown", "Home", "ArrowLeft", "PageDown"],
+  rtl: ["ArrowDown", "Home", "ArrowRight", "PageDown"]
+};
+//# sourceMappingURL=constants.js.map

package/dist/cjs/helpers.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var helpers_exports = {};
+__export(helpers_exports, {
+  convertValueToPercentage: () => convertValueToPercentage,
+  getClosestValueIndex: () => getClosestValueIndex,
+  getDecimalCount: () => getDecimalCount,
+  getLabel: () => getLabel,
+  getNextSortedValues: () => getNextSortedValues,
+  getThumbInBoundsOffset: () => getThumbInBoundsOffset,
+  hasMinStepsBetweenValues: () => hasMinStepsBetweenValues,
+  linearScale: () => linearScale,
+  roundValue: () => roundValue
+});
+module.exports = __toCommonJS(helpers_exports);
+function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+  const nextValues = [...prevValues];
+  return nextValues[atIndex] = nextValue, nextValues.sort((a, b) => a - b);
+}
+function convertValueToPercentage(value, min, max) {
+  return 100 / (max - min) * (value - min);
+}
+function getLabel(index, totalValues) {
+  if (totalValues > 2)
+    return `Value ${index + 1} of ${totalValues}`;
+  if (totalValues === 2)
+    return ["Minimum", "Maximum"][index];
+}
+function getClosestValueIndex(values, nextValue) {
+  if (values.length === 1) return 0;
+  const distances = values.map((value) => Math.abs(value - nextValue)), closestDistance = Math.min(...distances);
+  return distances.indexOf(closestDistance);
+}
+function getThumbInBoundsOffset(width, left, direction) {
+  const quarterWidth = width / 4, offset = linearScale([0, 50], [0, quarterWidth]);
+  return (quarterWidth - offset(left) * direction) * direction;
+}
+function getStepsBetweenValues(values) {
+  return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+}
+function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+  if (minStepsBetweenValues > 0) {
+    const stepsBetweenValues = getStepsBetweenValues(values);
+    return Math.min(...stepsBetweenValues) >= minStepsBetweenValues;
+  }
+  return !0;
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function getDecimalCount(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function roundValue(value, decimalCount) {
+  const rounder = 10 ** decimalCount;
+  return Math.round(value * rounder) / rounder;
+}
+//# sourceMappingURL=helpers.js.map

package/dist/cjs/index.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var src_exports = {};
+__export(src_exports, {
+  SliderFrame: () => import_SliderImpl.SliderFrame
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Slider"), module.exports);
+var import_SliderImpl = require("./SliderImpl");
+//# sourceMappingURL=index.js.map

package/dist/cjs/types.js

@@ -0,0 +1,14 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "1.116.0",
+  "version": "1.116.2",
   "sideEffects": [
     "*.css"
   ],
@@ -34,22 +34,22 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.116.0",
-    "@tamagui/constants": "1.116.0",
-    "@tamagui/core": "1.116.0",
-    "@tamagui/create-context": "1.116.0",
-    "@tamagui/get-token": "1.116.0",
-    "@tamagui/helpers": "1.116.0",
-    "@tamagui/stacks": "1.116.0",
-    "@tamagui/use-controllable-state": "1.116.0",
-    "@tamagui/use-debounce": "1.116.0",
-    "@tamagui/use-direction": "1.116.0"
+    "@tamagui/compose-refs": "1.116.2",
+    "@tamagui/constants": "1.116.2",
+    "@tamagui/core": "1.116.2",
+    "@tamagui/create-context": "1.116.2",
+    "@tamagui/get-token": "1.116.2",
+    "@tamagui/helpers": "1.116.2",
+    "@tamagui/stacks": "1.116.2",
+    "@tamagui/use-controllable-state": "1.116.2",
+    "@tamagui/use-debounce": "1.116.2",
+    "@tamagui/use-direction": "1.116.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.116.0",
+    "@tamagui/build": "1.116.2",
     "react": "^18.2.0 || ^19.0.0",
     "react-native": "0.74.1"
   },