@tamagui/slider 2.0.0-rc.8 → 2.0.0

package/dist/cjs/constants.js

@@ -1,47 +0,0 @@
-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,
-  SliderContext: () => SliderContext,
-  SliderOrientationProvider: () => SliderOrientationProvider,
-  SliderProvider: () => SliderProvider,
-  useSliderContext: () => useSliderContext,
-  useSliderOrientationContext: () => useSliderOrientationContext
-});
-module.exports = __toCommonJS(constants_exports);
-var import_core = require("@tamagui/core");
-const SLIDER_NAME = "Slider", SliderContext = (0, import_core.createStyledContext)({
-  size: "$true",
-  min: 0,
-  max: 100,
-  orientation: "horizontal"
-}), { Provider: SliderProvider, useStyledContext: useSliderContext } = SliderContext, {
-  Provider: SliderOrientationProvider,
-  useStyledContext: useSliderOrientationContext
-} = (0, import_core.createStyledContext)({
-  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/constants.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/constants.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqD;AAI9C,MAAM,cAAc,UAEd,oBAAgB,iCAAwC;AAAA,EACnE,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,aAAa;AACf,CAAuB,GAEV,EAAE,UAAU,gBAAgB,kBAAkB,iBAAiB,IAC1E,eAEW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AACpB,QAAI,iCAMD;AAAA,EACD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb,CAAC,GAEY,YAAY,CAAC,UAAU,UAAU,GACjC,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY,GAC/D,YAAyC;AAAA,EACpD,KAAK,CAAC,aAAa,QAAQ,aAAa,UAAU;AAAA,EAClD,KAAK,CAAC,aAAa,QAAQ,cAAc,UAAU;AACrD;",
-  "names": []
-}

package/dist/cjs/helpers.js

@@ -1,74 +0,0 @@
-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;
-}
-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/helpers.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/helpers.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,oBACd,aAAuB,CAAC,GACxB,WACA,SACA;AACA,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,oBAAW,OAAO,IAAI,WACf,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,SAAS,yBAAyB,OAAe,KAAa,KAAa;AAGhF,SADuB,OADN,MAAM,QAEE,QAAQ;AACnC;AAKO,SAAS,SAAS,OAAe,aAAqB;AAC3D,MAAI,cAAc;AAChB,WAAO,SAAS,QAAQ,CAAC,OAAO,WAAW;AAE7C,MAAI,gBAAgB;AAClB,WAAO,CAAC,WAAW,SAAS,EAAE,KAAK;AAGvC;AAUO,SAAS,qBAAqB,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC,GAC7D,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,SAAS,uBAAuB,OAAe,MAAc,WAAmB;AACrF,QAAM,eAAe,QAAQ,GAEvB,SAAS,YAAY,CAAC,GADR,EACsB,GAAG,CAAC,GAAG,YAAY,CAAC;AAC9D,UAAQ,eAAe,OAAO,IAAI,KAAK;AACzC;AASA,SAAS,sBAAsB,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,CAAC,IAAI,KAAK;AAC5E;AAcO,SAAS,yBACd,QACA,uBACA;AACA,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AAEvD,WADoC,KAAK,IAAI,GAAG,kBAAkB,KAC5B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,SAAS,YACd,OACA,QACA;AACA,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,CAAC,MAAM,MAAM,CAAC,KAAK,OAAO,CAAC,MAAM,OAAO,CAAC,EAAG,QAAO,OAAO,CAAC;AACrE,UAAM,SAAS,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,MAAM,CAAC,IAAI,MAAM,CAAC;AAC3D,WAAO,OAAO,CAAC,IAAI,SAAS,QAAQ,MAAM,CAAC;AAAA,EAC7C;AACF;AAEO,SAAS,gBAAgB,OAAe;AAC7C,UAAQ,OAAO,KAAK,EAAE,MAAM,GAAG,EAAE,CAAC,KAAK,IAAI;AAC7C;AAEO,SAAS,WAAW,OAAe,cAAsB;AAC9D,QAAM,UAAU,MAAM;AACtB,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
-  "names": []
-}

package/dist/cjs/index.js

@@ -1,23 +0,0 @@
-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 index_exports = {};
-__export(index_exports, {
-  SliderContext: () => import_constants.SliderContext,
-  SliderFrame: () => import_SliderImpl.SliderFrame
-});
-module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./Slider"), module.exports);
-var import_constants = require("./constants"), import_SliderImpl = require("./SliderImpl");
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.ts"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAc,qBAAd;AACA,uBAA8B,wBAE9B,oBAA4B;",
-  "names": []
-}

package/dist/cjs/types.js

@@ -1,14 +0,0 @@
-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/dist/cjs/types.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/types.ts"],
-  "mappings": ";;;;;;;;;;;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/Slider.js

@@ -1,499 +0,0 @@
-import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
-import { isIos, isWeb } from "@tamagui/constants";
-import {
-  getTokens,
-  getVariableValue,
-  styled,
-  useConfiguration,
-  useCreateShallowSetState
-} from "@tamagui/core";
-import { getSize } from "@tamagui/get-token";
-import { clamp, composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
-import { ThemeableStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import { useDirection } from "@tamagui/use-direction";
-import * as React from "react";
-import {
-  ARROW_KEYS,
-  BACK_KEYS,
-  PAGE_KEYS,
-  SLIDER_NAME,
-  SliderOrientationProvider,
-  SliderProvider,
-  useSliderContext,
-  useSliderOrientationContext
-} from "./constants";
-import {
-  convertValueToPercentage,
-  getClosestValueIndex,
-  getDecimalCount,
-  getLabel,
-  getNextSortedValues,
-  getThumbInBoundsOffset,
-  hasMinStepsBetweenValues,
-  linearScale,
-  roundValue
-} from "./helpers";
-import { SliderFrame, SliderImpl } from "./SliderImpl";
-import { jsx } from "react/jsx-runtime";
-const activeSliderMeasureListeners = /* @__PURE__ */ new Set();
-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 = useDirection(dir), isDirectionLTR = direction === "ltr", sliderRef = React.useRef(null), [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = useCreateShallowSetState(setState_);
-    function getValueFromPointer(pointerPosition) {
-      const input = [0, state.size];
-      return 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 useSliderMeasure(sliderRef, measure), /* @__PURE__ */ jsx(
-      SliderOrientationProvider,
-      {
-        scope: props.__scopeSlider,
-        startEdge: isDirectionLTR ? "left" : "right",
-        endEdge: isDirectionLTR ? "right" : "left",
-        direction: isDirectionLTR ? 1 : -1,
-        sizeProp: "width",
-        size: state.size,
-        children: /* @__PURE__ */ jsx(
-          SliderImpl,
-          {
-            ref: 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 = 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);
-    };
-  }, []);
-}
-function useSliderMeasure(sliderRef, measure) {
-  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,
-        rootMargin: "0px",
-        threshold: [0, 0.5, 1]
-      }
-    );
-    return io.observe(node), () => {
-      activeSliderMeasureListeners.delete(debouncedMeasure), io.disconnect();
-    };
-  }, []);
-}
-const SliderVertical = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      min,
-      max,
-      onSlideStart,
-      onSlideMove,
-      onStepKeyDown,
-      onSlideEnd,
-      ...sliderProps
-    } = props, [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = useCreateShallowSetState(setState_), sliderRef = React.useRef(null), configuration = useConfiguration(), insets = isIos && configuration.insets ? configuration.insets : { top: 0, bottom: 0 };
-    function getValueFromPointer(pointerPosition) {
-      const input = [0, state.size];
-      return linearScale(input, [max, min])(pointerPosition);
-    }
-    const measure = () => {
-      sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
-        setState({
-          size: height,
-          offset: pageY + (isIos ? insets.top : 0)
-        });
-      });
-    };
-    return useSliderMeasure(sliderRef, measure), /* @__PURE__ */ jsx(
-      SliderOrientationProvider,
-      {
-        scope: props.__scopeSlider,
-        startEdge: "bottom",
-        endEdge: "top",
-        sizeProp: "height",
-        size: state.size,
-        direction: 1,
-        children: /* @__PURE__ */ jsx(
-          SliderImpl,
-          {
-            ref: 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 = BACK_KEYS.ltr.includes(event.key);
-              onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), SliderTrackFrame = styled(SliderFrame, {
-  name: "Slider",
-  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(
-  function(props, forwardedRef) {
-    const { __scopeSlider, ...trackProps } = props, context = useSliderContext(__scopeSlider);
-    return /* @__PURE__ */ jsx(
-      SliderTrackFrame,
-      {
-        "data-disabled": context.disabled ? "" : void 0,
-        "data-orientation": context.orientation,
-        orientation: context.orientation,
-        size: context.size,
-        ...trackProps,
-        ref: forwardedRef
-      }
-    );
-  }
-), SliderActiveFrame = styled(SliderFrame, {
-  name: "SliderActive",
-  position: "absolute",
-  pointerEvents: "box-none",
-  variants: {
-    unstyled: {
-      false: {
-        backgroundColor: "$background",
-        borderRadius: 1e5
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}), SliderActive = React.forwardRef(function(props, forwardedRef) {
-  const { __scopeSlider, ...rangeProps } = props, context = useSliderContext(__scopeSlider), orientation = useSliderOrientationContext(__scopeSlider), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), valuesCount = context.values.length, percentages = context.values.map(
-    (value) => convertValueToPercentage(value, context.min, context.max)
-  ), offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0, offsetEnd = 100 - Math.max(...percentages);
-  return /* @__PURE__ */ jsx(
-    SliderActiveFrame,
-    {
-      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
-      }
-    }
-  );
-}), getThumbSize = (val) => {
-  const tokens = getTokens(), size = typeof val == "number" ? val : getSize(tokens.size[val], {
-    shift: -1
-  });
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size
-  };
-}, SliderThumbFrame = styled(ThemeableStack, {
-  name: "SliderThumb",
-  variants: {
-    size: {
-      "...size": getThumbSize,
-      ":number": getThumbSize
-    },
-    unstyled: {
-      false: {
-        position: "absolute",
-        borderWidth: 2,
-        borderColor: "$borderColor",
-        backgroundColor: "$background",
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        },
-        hoverStyle: {
-          backgroundColor: "$backgroundHover",
-          borderColor: "$borderColorHover"
-        },
-        focusVisibleStyle: {
-          outlineStyle: "solid",
-          outlineWidth: 2,
-          outlineColor: "$outlineColor"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}), SliderThumb = SliderThumbFrame.styleable(
-  function(props, forwardedRef) {
-    const { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props, context = useSliderContext(__scopeSlider), orientation = useSliderOrientationContext(__scopeSlider), [thumb, setThumb] = React.useState(null), composedRefs = useComposedRefs(forwardedRef, setThumb), value = context.values[index], percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max), label = getLabel(index, context.values.length), sizeIn = sizeProp ?? context.size ?? "$true", [size, setSize] = React.useState(() => getVariableValue(getThumbSize(sizeIn).width)), thumbInBoundsOffset = size ? 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) * orientation.direction,
-      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__ */ 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: (e) => {
-          setSize(e.nativeEvent.layout[orientation.sizeProp]);
-        },
-        onFocus: composeEventHandlers(props.onFocus, () => {
-          context.valueIndexToChangeRef.current = index;
-        })
-      }
-    );
-  },
-  {
-    staticConfig: {
-      memo: !0
-    }
-  }
-), 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 = useComposedRefs(sliderRef, forwardedRef), thumbRefs = React.useRef(/* @__PURE__ */ new Map()), valueIndexToChangeRef = React.useRef(0), isHorizontal = orientation === "horizontal", [values = [], setValues] = useControllableState({
-      prop: value,
-      defaultProp: defaultValue,
-      transition: !0,
-      onChange: (value2) => {
-        updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
-      }
-    });
-    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 (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 = getDecimalCount(step), snapToStep = roundValue(
-        Math.round((value2 - min) / step) * step + min,
-        decimalCount
-      ), nextValue = clamp(snapToStep, [min, max]);
-      setValues((prevValues = []) => {
-        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
-        return hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step) ? (valueIndexToChangeRef.current = nextValues.indexOf(nextValue), String(nextValues) === String(prevValues) ? prevValues : nextValues) : prevValues;
-      });
-    }
-    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-    return /* @__PURE__ */ jsx(
-      SliderProvider,
-      {
-        scope: props.__scopeSlider,
-        disabled,
-        min,
-        max,
-        valueIndexToChangeRef,
-        thumbs: thumbRefs.current,
-        values,
-        orientation,
-        size: sizeProp,
-        children: /* @__PURE__ */ 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 = 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 = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1, atIndex = valueIndexToChangeRef.current, value2 = values[atIndex], stepInDirection = step * multiplier * stepDirection;
-                updateValues(value2 + stepInDirection, atIndex);
-              }
-            }
-          }
-        )
-      }
-    );
-  }
-), Slider = withStaticProperties(SliderComponent, {
-  Track: SliderTrack,
-  TrackActive: SliderActive,
-  Thumb: SliderThumb
-});
-Slider.displayName = SLIDER_NAME;
-const Track = SliderTrack, Range = SliderActive, Thumb = SliderThumb;
-export {
-  Range,
-  Slider,
-  SliderActive,
-  SliderActiveFrame,
-  SliderThumb,
-  SliderThumbFrame,
-  SliderTrack,
-  SliderTrackFrame,
-  Thumb,
-  Track
-};
-//# sourceMappingURL=Slider.js.map