@tamagui/slider 1.88.1 → 1.88.2

package/dist/jsx/Slider.native.js

@@ -1,40 +1,41 @@
-import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
-import { isClient, isWeb } from "@tamagui/constants";
-import {
-  createShallowSetState,
-  getTokens,
-  getVariableValue,
-  styled
-} from "@tamagui/core";
-import { getSize } from "@tamagui/get-token";
-import { withStaticProperties } from "@tamagui/helpers";
-import { clamp, composeEventHandlers } 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";
+"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 __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 SliderHorizontal = React.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -46,10 +47,10 @@ const SliderHorizontal = React.forwardRef(
       onStepKeyDown,
       onSlideEnd,
       ...sliderProps
-    } = props, direction = useDirection(dir), isDirectionLTR = direction === "ltr", sliderRef = React.useRef(null), [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = createShallowSetState(setState_);
+    } = 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 linearScale(input, isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
+      return (0, import_helpers3.linearScale)(input, isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
     }
     const measure = () => {
       var _a;
@@ -60,36 +61,43 @@ const SliderHorizontal = React.forwardRef(
         });
       });
     };
-    return isClient && useOnDebouncedWindowResize(measure), <SliderOrientationProvider
-      scope={props.__scopeSlider}
-      startEdge={isDirectionLTR ? "left" : "right"}
-      endEdge={isDirectionLTR ? "right" : "left"}
-      direction={isDirectionLTR ? 1 : -1}
-      sizeProp="width"
-      size={state.size}
-    ><SliderImpl
-      ref={composeRefs(forwardedRef, sliderRef)}
-      dir={direction}
-      {...sliderProps}
-      orientation="horizontal"
-      onLayout={measure}
-      onSlideStart={(event, target) => {
-        const value = getValueFromPointer(event.nativeEvent.locationX);
-        value && (onSlideStart == null || onSlideStart(value, target, event));
-      }}
-      onSlideMove={(event) => {
-        const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && (onSlideMove == null || onSlideMove(value, event));
-      }}
-      onSlideEnd={(event) => {
-        const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && (onSlideEnd == null || onSlideEnd(event, value));
-      }}
-      onStepKeyDown={(event) => {
-        const isBackKey = BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-      }}
-    /></SliderOrientationProvider>;
+    return import_constants.isClient && useOnDebouncedWindowResize(measure), /* @__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 == null || onSlideStart(value, target, event));
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+              value && (onSlideMove == null || onSlideMove(value, event));
+            },
+            onSlideEnd: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+              value && (onSlideEnd == null || onSlideEnd(event, value));
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
+              onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
   }
 );
 function useOnDebouncedWindowResize(callback, amt = 200) {
@@ -113,10 +121,10 @@ const SliderVertical = React.forwardRef(
       onStepKeyDown,
       onSlideEnd,
       ...sliderProps
-    } = props, [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = createShallowSetState(setState_), sliderRef = React.useRef(null);
+    } = 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 linearScale(input, [max, min])(pointerPosition);
+      return (0, import_helpers3.linearScale)(input, [max, min])(pointerPosition);
     }
     const measure = () => {
       var _a;
@@ -127,37 +135,44 @@ const SliderVertical = React.forwardRef(
         });
       });
     };
-    return isClient && useOnDebouncedWindowResize(measure), <SliderOrientationProvider
-      scope={props.__scopeSlider}
-      startEdge="bottom"
-      endEdge="top"
-      sizeProp="height"
-      size={state.size}
-      direction={1}
-    ><SliderImpl
-      ref={composeRefs(forwardedRef, sliderRef)}
-      {...sliderProps}
-      orientation="vertical"
-      onLayout={measure}
-      onSlideStart={(event, target) => {
-        const value = getValueFromPointer(event.nativeEvent.locationY);
-        value && (onSlideStart == null || onSlideStart(value, target, event));
-      }}
-      onSlideMove={(event) => {
-        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        value && (onSlideMove == null || onSlideMove(value, event));
-      }}
-      onSlideEnd={(event) => {
-        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        onSlideEnd == null || onSlideEnd(event, value);
-      }}
-      onStepKeyDown={(event) => {
-        const isBackKey = BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-      }}
-    /></SliderOrientationProvider>;
+    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 == null || onSlideStart(value, target, event));
+            },
+            onSlideMove: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+              value && (onSlideMove == null || onSlideMove(value, event));
+            },
+            onSlideEnd: (event) => {
+              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+              onSlideEnd == null || onSlideEnd(event, value);
+            },
+            onStepKeyDown: (event) => {
+              const isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
+              onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
   }
-), TRACK_NAME = "SliderTrack", SliderTrackFrame = styled(SliderFrame, {
+), TRACK_NAME = "SliderTrack", SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
   name: "SliderTrack",
   variants: {
     unstyled: {
@@ -176,49 +191,55 @@ const SliderVertical = React.forwardRef(
   }
 }), SliderTrack = React.forwardRef(
   (props, forwardedRef) => {
-    const { __scopeSlider, ...trackProps } = props, context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return <SliderTrackFrame
-      data-disabled={context.disabled ? "" : void 0}
-      data-orientation={context.orientation}
-      orientation={context.orientation}
-      size={context.size}
-      {...trackProps}
-      ref={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 = styled(SliderFrame, {
+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 = useSliderContext(RANGE_NAME, __scopeSlider), orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), valuesCount = context.values.length, percentages = context.values.map(
-      (value) => convertValueToPercentage(value, context.min, context.max)
+    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 <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
-      }}
-    />;
+    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 = getTokens(), size = typeof val == "number" ? val : getSize(tokens.size[val], {
+  const tokens = (0, import_core.getTokens)(), size = typeof val == "number" ? val : (0, import_get_token.getSize)(tokens.size[val], {
     shift: -1
   });
   return {
@@ -227,7 +248,7 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
     minWidth: size,
     minHeight: size
   };
-}, SliderThumbFrame = styled(ThemeableStack, {
+}, SliderThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   name: "SliderThumb",
   variants: {
     size: {
@@ -239,9 +260,9 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
         bordered: 2,
         borderWidth: 2,
         backgrounded: !0,
-        pressTheme: isWeb,
-        focusTheme: isWeb,
-        hoverTheme: isWeb
+        pressTheme: import_constants.isWeb,
+        focusTheme: import_constants.isWeb,
+        hoverTheme: import_constants.isWeb
       }
     }
   },
@@ -250,10 +271,10 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
   }
 }), SliderThumb = React.memo(
   SliderThumbFrame.styleable(function(props, forwardedRef) {
-    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props, context = useSliderContext(THUMB_NAME, __scopeSlider), orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider), [thumb, setThumb] = React.useState(null), composedRefs = useComposedRefs(
+    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,
       (node) => setThumb(node)
-    ), 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;
+    ), 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), () => {
@@ -277,29 +298,32 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
         right: "auto"
       }
     };
-    return <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={composeEventHandlers(props.onFocus, () => {
-        context.valueIndexToChangeRef.current = index;
-      })}
-    />;
+    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) => {
@@ -320,7 +344,7 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
       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({
+    } = 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,
@@ -328,7 +352,7 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
         updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
       }
     });
-    isWeb && React.useEffect(() => {
+    import_constants.isWeb && React.useEffect(() => {
       const node = sliderRef.current;
       if (!node)
         return;
@@ -340,7 +364,7 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
       };
     }, []);
     function updateThumbFocus(focusIndex) {
-      if (isWeb) {
+      if (import_constants.isWeb) {
         for (const [node, index] of thumbRefs.current.entries())
           if (index === focusIndex) {
             node.focus();
@@ -352,72 +376,68 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
       updateValues(value2, valueIndexToChangeRef.current), onSlideMove == null || onSlideMove(event, value2);
     }
     function updateValues(value2, atIndex) {
-      const decimalCount = getDecimalCount(step), snapToStep = roundValue(
+      const decimalCount = (0, import_helpers3.getDecimalCount)(step), snapToStep = (0, import_helpers3.roundValue)(
         Math.round((value2 - min) / step) * step + min,
         decimalCount
-      ), nextValue = clamp(snapToStep, [min, max]);
+      ), nextValue = (0, import_helpers2.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 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 <SliderProvider
-      scope={props.__scopeSlider}
-      disabled={disabled}
-      min={min}
-      max={max}
-      valueIndexToChangeRef={valueIndexToChangeRef}
-      thumbs={thumbRefs.current}
-      values={values}
-      orientation={orientation}
-      size={sizeProp}
-    >
-      <SliderOriented
-        aria-disabled={disabled}
-        data-disabled={disabled ? "" : void 0}
-        {...sliderProps}
-        ref={composedRefs}
-        min={min}
-        max={max}
-        onSlideEnd={onSlideEnd}
-        onSlideStart={disabled ? void 0 : (value2, target, event) => {
-          if (target !== "thumb") {
-            const closestIndex = getClosestValueIndex(values, value2);
-            updateValues(value2, closestIndex);
-          }
-          onSlideStart == null || 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);
-          }
-        }}
-      />
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_constants2.SliderProvider,
       {
-        /* {isFormControl &&
-        values.map((value, index) => (
-          <BubbleInput
-            key={index}
-            name={name ? name + (values.length > 1 ? '[]' : '') : undefined}
-            value={value}
-          />
-        ))} */
+        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 == null || 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);
+              }
+            }
+          }
+        )
       }
-    </SliderProvider>;
+    );
   }
-), Slider = withStaticProperties(SliderComponent, {
+), Slider = (0, import_helpers.withStaticProperties)(SliderComponent, {
   Track: SliderTrack,
   TrackActive: SliderTrackActive,
   Thumb: SliderThumb
 });
-Slider.displayName = SLIDER_NAME;
+Slider.displayName = import_constants2.SLIDER_NAME;
 const Track = SliderTrack, Range = SliderTrackActive, Thumb = SliderThumb;
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Range,
   Slider,
   SliderThumb,
@@ -428,5 +448,5 @@ export {
   SliderTrackFrame,
   Thumb,
   Track
-};
+});
 //# sourceMappingURL=Slider.js.map