@tamagui/slider 1.135.4 → 1.135.5

package/dist/cjs/Slider.native.js

@@ -1,26 +1,36 @@
 "use strict";
+
 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 __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;
-};
+    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);
+  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,
@@ -35,99 +45,116 @@ __export(Slider_exports, {
   Track: () => Track
 });
 module.exports = __toCommonJS(Slider_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), 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"), activeSliderMeasureListeners = /* @__PURE__ */ new Set();
+var import_jsx_runtime = require("react/jsx-runtime"),
+  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"), 1),
+  import_constants2 = require("./constants.native.js"),
+  import_helpers3 = require("./helpers.native.js"),
+  import_SliderImpl = require("./SliderImpl.native.js"),
+  activeSliderMeasureListeners = /* @__PURE__ */new Set();
 if (import_constants.isWeb && import_constants.isClient && !process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) {
   var _setInterval;
-  (_setInterval = setInterval) === null || _setInterval === void 0 || _setInterval(
-    function() {
-      activeSliderMeasureListeners.forEach(function(cb) {
-        return cb();
-      });
-    },
-    // really doesn't need to be super often
-    1e3
-  );
+  (_setInterval = setInterval) === null || _setInterval === void 0 || _setInterval(function () {
+    activeSliderMeasureListeners.forEach(function (cb) {
+      return cb();
+    });
+  },
+  // really doesn't need to be super often
+  1e3);
 }
-var SliderHorizontal = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { 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(function() {
-    return {
-      size: 0,
-      offset: 0
-    };
-  }), setState = (0, import_core.useCreateShallowSetState)(setState_);
-  function getValueFromPointer(pointerPosition) {
-    var input = [
-      0,
-      state.size
-    ], output = isDirectionLTR ? [
+var SliderHorizontal = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+  var {
       min,
-      max
-    ] : [
       max,
-      min
-    ], value = (0, import_helpers3.linearScale)(input, output);
+      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(function () {
+      return {
+        size: 0,
+        offset: 0
+      };
+    }),
+    setState = (0, import_core.useCreateShallowSetState)(setState_);
+  function getValueFromPointer(pointerPosition) {
+    var input = [0, state.size],
+      output = isDirectionLTR ? [min, max] : [max, min],
+      value = (0, import_helpers3.linearScale)(input, output);
     return value(pointerPosition);
   }
-  var measure = function() {
+  var measure = function () {
     var _sliderRef_current;
-    (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, width, _height, pageX, _pageY) {
+    (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function (_x, _y, width, _height, pageX, _pageY) {
       setState({
         size: width,
         offset: pageX
       });
     });
   };
-  return import_constants.isClient && (useOnDebouncedWindowResize(measure), React.useEffect(function() {
+  return import_constants.isClient && (useOnDebouncedWindowResize(measure), React.useEffect(function () {
     var node = sliderRef.current;
     if (node) {
-      var measureTm, debouncedMeasure = function() {
-        clearTimeout(measureTm), measureTm = setTimeout(function() {
-          measure();
-        }, 200);
-      }, io = new IntersectionObserver(function(entries) {
-        debouncedMeasure(), entries != null && 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), function() {
+      var measureTm,
+        debouncedMeasure = function () {
+          clearTimeout(measureTm), measureTm = setTimeout(function () {
+            measure();
+          }, 200);
+        },
+        io = new IntersectionObserver(function (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), function () {
         activeSliderMeasureListeners.delete(debouncedMeasure), io.disconnect();
       };
     }
-  }, [])), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants2.SliderOrientationProvider, {
+  }, [])), /* @__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, {
+    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: function(event, target) {
+      onSlideStart: function (event, target) {
         var value = getValueFromPointer(event.nativeEvent.locationX);
-        value && (onSlideStart == null || onSlideStart(value, target, event));
+        value && onSlideStart?.(value, target, event);
       },
-      onSlideMove: function(event) {
+      onSlideMove: function (event) {
         var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && (onSlideMove == null || onSlideMove(value, event));
+        value && onSlideMove?.(value, event);
       },
-      onSlideEnd: function(event) {
+      onSlideEnd: function (event) {
         var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && (onSlideEnd == null || onSlideEnd(event, value));
+        value && onSlideEnd?.(event, value);
       },
-      onStepKeyDown: function(event) {
+      onStepKeyDown: function (event) {
         var isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown == null || onStepKeyDown({
+        onStepKeyDown?.({
           event,
           direction: isBackKey ? -1 : 1
         });
@@ -137,359 +164,410 @@ var SliderHorizontal = /* @__PURE__ */ React.forwardRef(function(props, forwarde
 });
 function useOnDebouncedWindowResize(callback) {
   var amt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 200;
-  React.useEffect(function() {
-    var last, onResize = function() {
-      clearTimeout(last), last = setTimeout(callback, amt);
-    };
-    return window.addEventListener("resize", onResize), function() {
+  React.useEffect(function () {
+    var last,
+      onResize = function () {
+        clearTimeout(last), last = setTimeout(callback, amt);
+      };
+    return window.addEventListener("resize", onResize), function () {
       clearTimeout(last), window.removeEventListener("resize", onResize);
     };
   }, []);
 }
-var SliderVertical = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { min, max, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props, [state, setState_] = React.useState(function() {
-    return {
-      size: 0,
-      offset: 0
-    };
-  }), setState = (0, import_core.useCreateShallowSetState)(setState_), sliderRef = React.useRef(null);
-  function getValueFromPointer(pointerPosition) {
-    var input = [
-      0,
-      state.size
-    ], output = [
-      max,
-      min
-    ], value = (0, import_helpers3.linearScale)(input, output);
-    return value(pointerPosition);
-  }
-  var measure = function() {
-    var _sliderRef_current;
-    (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, _width, height, _pageX, pageY) {
-      setState({
-        size: height,
-        offset: pageY
+var SliderVertical = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        min,
+        max,
+        onSlideStart,
+        onSlideMove,
+        onStepKeyDown,
+        onSlideEnd,
+        ...sliderProps
+      } = props,
+      [state, setState_] = React.useState(function () {
+        return {
+          size: 0,
+          offset: 0
+        };
+      }),
+      setState = (0, import_core.useCreateShallowSetState)(setState_),
+      sliderRef = React.useRef(null);
+    function getValueFromPointer(pointerPosition) {
+      var input = [0, state.size],
+        output = [max, min],
+        value = (0, import_helpers3.linearScale)(input, output);
+      return value(pointerPosition);
+    }
+    var measure = function () {
+      var _sliderRef_current;
+      (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function (_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: function (event, target) {
+          var value = getValueFromPointer(event.nativeEvent.locationY);
+          value && onSlideStart?.(value, target, event);
+        },
+        onSlideMove: function (event) {
+          var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+          value && onSlideMove?.(value, event);
+        },
+        onSlideEnd: function (event) {
+          var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+          onSlideEnd?.(event, value);
+        },
+        onStepKeyDown: function (event) {
+          var isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
+          onStepKeyDown?.({
+            event,
+            direction: isBackKey ? -1 : 1
+          });
+        }
+      })
     });
-  };
-  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: function(event, target) {
-        var value = getValueFromPointer(event.nativeEvent.locationY);
-        value && (onSlideStart == null || onSlideStart(value, target, event));
-      },
-      onSlideMove: function(event) {
-        var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        value && (onSlideMove == null || onSlideMove(value, event));
-      },
-      onSlideEnd: function(event) {
-        var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        onSlideEnd == null || onSlideEnd(event, value);
-      },
-      onStepKeyDown: function(event) {
-        var isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown == null || 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"
+  }),
+  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"
     }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}), SliderTrack = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { __scopeSlider, ...trackProps } = props, context = (0, import_constants2.useSliderContext)(__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 = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeSlider,
+        ...trackProps
+      } = props,
+      context = (0, import_constants2.useSliderContext)(__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;
-var RANGE_NAME = "SliderTrackActive", SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
-  name: "SliderTrackActive",
-  backgroundColor: "$background",
-  position: "absolute",
-  pointerEvents: "box-none"
-}), SliderTrackActive = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { __scopeSlider, ...rangeProps } = props, context = (0, import_constants2.useSliderContext)(__scopeSlider), orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider), ref = React.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref), valuesCount = context.values.length, percentages = context.values.map(function(value) {
-    return (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
-    }
+var RANGE_NAME = "SliderTrackActive",
+  SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
+    name: "SliderTrackActive",
+    backgroundColor: "$background",
+    position: "absolute",
+    pointerEvents: "box-none"
+  }),
+  SliderTrackActive = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeSlider,
+        ...rangeProps
+      } = props,
+      context = (0, import_constants2.useSliderContext)(__scopeSlider),
+      orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider),
+      ref = React.useRef(null),
+      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref),
+      valuesCount = context.values.length,
+      percentages = context.values.map(function (value) {
+        return (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;
-var getThumbSize = function(val) {
-  var 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
-      }
-    }
+var getThumbSize = function (val) {
+    var 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
+    };
   },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}), SliderThumb = SliderThumbFrame.styleable(function(props, forwardedRef) {
-  var { __scopeSlider, index, circular, size: sizeProp, ...thumbProps } = props, context = (0, import_constants2.useSliderContext)(__scopeSlider), orientation = (0, import_constants2.useSliderOrientationContext)(__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), _ref, sizeIn = (_ref = sizeProp ?? context.size) !== null && _ref !== void 0 ? _ref : "$true", [size, setSize] = React.useState(function() {
-    var estimatedSize = (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
-    return estimatedSize;
-  }), thumbInBoundsOffset = size ? (0, import_helpers3.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
-  React.useEffect(function() {
-    if (thumb)
-      return context.thumbs.set(thumb, index), function() {
-        context.thumbs.delete(thumb);
-      };
-  }, [
-    thumb,
-    context.thumbs,
-    index
-  ]);
-  var 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,
-    circular,
-    ...thumbProps,
-    onLayout: function(e) {
-      setSize(e.nativeEvent.layout[orientation.sizeProp]);
+  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
+        }
+      }
     },
-    /**
-     * There will be no value on initial render while we work out the index so we hide thumbs
-     * without a value, otherwise SSR will render them in the wrong position before they
-     * snap into the correct position during hydration which would be visually jarring for
-     * slower connections.
-     */
-    // style={value === undefined ? { display: 'none' } : props.style}
-    onFocus: (0, import_helpers2.composeEventHandlers)(props.onFocus, function() {
-      context.valueIndexToChangeRef.current = index;
-    })
-  });
-}, {
-  staticConfig: {
-    memo: !0
-  }
-}), SliderComponent = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { name, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = !1, minStepsBetweenThumbs = 0, defaultValue = [
-    min
-  ], value, onValueChange = function() {
-  }, 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: function(value2) {
-      updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  });
-  import_constants.isWeb && React.useEffect(function() {
-    var node = sliderRef.current;
-    if (node) {
-      var preventDefault = function(e) {
-        e.preventDefault();
-      };
-      return node.addEventListener("touchstart", preventDefault), function() {
-        node.removeEventListener("touchstart", preventDefault);
+  }),
+  SliderThumb = SliderThumbFrame.styleable(function (props, forwardedRef) {
+    var {
+        __scopeSlider,
+        index,
+        circular,
+        size: sizeProp,
+        ...thumbProps
+      } = props,
+      context = (0, import_constants2.useSliderContext)(__scopeSlider),
+      orientation = (0, import_constants2.useSliderOrientationContext)(__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),
+      _ref,
+      sizeIn = (_ref = sizeProp ?? context.size) !== null && _ref !== void 0 ? _ref : "$true",
+      [size, setSize] = React.useState(function () {
+        var estimatedSize = (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
+        return estimatedSize;
+      }),
+      thumbInBoundsOffset = size ? (0, import_helpers3.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
+    React.useEffect(function () {
+      if (thumb) return context.thumbs.set(thumb, index), function () {
+        context.thumbs.delete(thumb);
       };
+    }, [thumb, context.thumbs, index]);
+    var 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,
+      circular,
+      ...thumbProps,
+      onLayout: function (e) {
+        setSize(e.nativeEvent.layout[orientation.sizeProp]);
+      },
+      /**
+       * There will be no value on initial render while we work out the index so we hide thumbs
+       * without a value, otherwise SSR will render them in the wrong position before they
+       * snap into the correct position during hydration which would be visually jarring for
+       * slower connections.
+       */
+      // style={value === undefined ? { display: 'none' } : props.style}
+      onFocus: (0, import_helpers2.composeEventHandlers)(props.onFocus, function () {
+        context.valueIndexToChangeRef.current = index;
+      })
+    });
+  }, {
+    staticConfig: {
+      memo: !0
     }
-  }, []);
-  function updateThumbFocus(focusIndex) {
-    if (import_constants.isWeb) {
-      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
-      try {
-        for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-          var [node, index] = _step.value;
-          if (index === focusIndex) {
-            node.focus();
-            return;
-          }
+  }),
+  SliderComponent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        name,
+        min = 0,
+        max = 100,
+        step = 1,
+        orientation = "horizontal",
+        disabled = !1,
+        minStepsBetweenThumbs = 0,
+        defaultValue = [min],
+        value,
+        onValueChange = function () {},
+        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: function (value2) {
+          updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
         }
-      } catch (err) {
-        _didIteratorError = !0, _iteratorError = err;
-      } finally {
+      });
+    import_constants.isWeb && React.useEffect(function () {
+      var node = sliderRef.current;
+      if (node) {
+        var preventDefault = function (e) {
+          e.preventDefault();
+        };
+        return node.addEventListener("touchstart", preventDefault), function () {
+          node.removeEventListener("touchstart", preventDefault);
+        };
+      }
+    }, []);
+    function updateThumbFocus(focusIndex) {
+      if (import_constants.isWeb) {
+        var _iteratorNormalCompletion = !0,
+          _didIteratorError = !1,
+          _iteratorError = void 0;
         try {
-          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+            var [node, index] = _step.value;
+            if (index === focusIndex) {
+              node.focus();
+              return;
+            }
+          }
+        } catch (err) {
+          _didIteratorError = !0, _iteratorError = err;
         } finally {
-          if (_didIteratorError)
-            throw _iteratorError;
+          try {
+            !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+          } finally {
+            if (_didIteratorError) throw _iteratorError;
+          }
         }
       }
     }
-  }
-  function handleSlideMove(value2, event) {
-    updateValues(value2, valueIndexToChangeRef.current), onSlideMove == null || onSlideMove(event, value2);
-  }
-  function updateValues(value2, atIndex) {
-    var 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(function() {
-      var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], 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;
-    });
-  }
-  var 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,
+    function handleSlideMove(value2, event) {
+      updateValues(value2, valueIndexToChangeRef.current), onSlideMove?.(event, value2);
+    }
+    function updateValues(value2, atIndex) {
+      var 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(function () {
+        var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [],
+          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;
+      });
+    }
+    var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_constants2.SliderProvider, {
+      scope: props.__scopeSlider,
+      disabled,
       min,
       max,
-      onSlideEnd,
-      onSlideStart: disabled ? void 0 : function(value2, target, event) {
-        if (target !== "thumb") {
-          var closestIndex = (0, import_helpers3.getClosestValueIndex)(values, value2);
-          updateValues(value2, closestIndex);
-        }
-        onSlideStart == null || onSlideStart(event, value2, target);
-      },
-      onSlideMove: disabled ? void 0 : handleSlideMove,
-      onHomeKeyDown: function() {
-        return !disabled && updateValues(min, 0);
-      },
-      onEndKeyDown: function() {
-        return !disabled && updateValues(max, values.length - 1);
-      },
-      onStepKeyDown: function(param) {
-        var { event, direction: stepDirection } = param;
-        if (!disabled) {
-          var isPageKey = import_constants2.PAGE_KEYS.includes(event.key), isSkipKey = isPageKey || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key), multiplier = isSkipKey ? 10 : 1, atIndex = valueIndexToChangeRef.current, value2 = values[atIndex], stepInDirection = step * multiplier * stepDirection;
-          updateValues(value2 + stepInDirection, atIndex);
+      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 : function (value2, target, event) {
+          if (target !== "thumb") {
+            var closestIndex = (0, import_helpers3.getClosestValueIndex)(values, value2);
+            updateValues(value2, closestIndex);
+          }
+          onSlideStart?.(event, value2, target);
+        },
+        onSlideMove: disabled ? void 0 : handleSlideMove,
+        onHomeKeyDown: function () {
+          return !disabled && updateValues(min, 0);
+        },
+        onEndKeyDown: function () {
+          return !disabled && updateValues(max, values.length - 1);
+        },
+        onStepKeyDown: function (param) {
+          var {
+            event,
+            direction: stepDirection
+          } = param;
+          if (!disabled) {
+            var isPageKey = import_constants2.PAGE_KEYS.includes(event.key),
+              isSkipKey = isPageKey || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key),
+              multiplier = isSkipKey ? 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 = (0, import_helpers.withStaticProperties)(SliderComponent, {
-  Track: SliderTrack,
-  TrackActive: SliderTrackActive,
-  Thumb: SliderThumb
-});
 Slider.displayName = import_constants2.SLIDER_NAME;
-var Track = SliderTrack, Range = SliderTrackActive, Thumb = SliderThumb;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Range,
-  Slider,
-  SliderThumb,
-  SliderThumbFrame,
-  SliderTrack,
-  SliderTrackActive,
-  SliderTrackActiveFrame,
-  SliderTrackFrame,
-  Thumb,
-  Track
-});
-//# sourceMappingURL=Slider.js.map
+var Track = SliderTrack,
+  Range = SliderTrackActive,
+  Thumb = SliderThumb;
+//# sourceMappingURL=Slider.native.js.map