@basic-ui/core 0.0.41 → 0.0.42

package/build/esm/Slider/Slider.js

@@ -0,0 +1,842 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["children"],
+    _excluded2 = ["aria-label", "aria-labelledby", "aria-valuetext", "as", "defaultValue", "disabled", "value", "getAriaLabel", "getAriaValueText", "handleAlignment", "max", "min", "name", "onChange", "onKeyDown", "onMouseDown", "onMouseMove", "onMouseUp", "onPointerDown", "onPointerUp", "onTouchEnd", "onTouchMove", "onTouchStart", "orientation", "step", "children"],
+    _excluded3 = ["ref"],
+    _excluded4 = ["as", "children", "style"],
+    _excluded5 = ["as", "children", "style"],
+    _excluded6 = ["as", "onBlur", "onFocus", "style", "onKeyDown"],
+    _excluded7 = ["as", "children", "style", "value"];
+
+/**
+ * Welcome to @reach/slider!
+ *
+ * A UI input component where the user selects a value from within a given
+ * range. A Slider has a handle that can be moved along a track to change its
+ * value. When the user's mouse or focus is on the Slider's handle, the value
+ * can be incremented with keyboard controls.
+ *
+ * Random thoughts/notes:
+ *  - Currently testing this against the behavior of the native input range
+ *    element to get our slider on par. We'll explore animated and multi-handle
+ *    sliders next.
+ *  - We may want to research some use cases for reversed sliders in RTL
+ *    languages if that's a thing
+ *
+ * @see Docs     https://reach.tech/slider
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
+ * @see Example  https://github.com/Stanko/aria-progress-range-slider
+ * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
+ */
+import { forwardRef, memo, useRef, useState, useCallback, useEffect, useLayoutEffect, useId } from 'react';
+import { createContext } from '../utils/context';
+import { isRightClick } from '../utils/is-right-click';
+import { getOwnerDocument } from '../utils/owner-document';
+import { useStableLayoutCallback } from '../utils/use-stable-callback';
+import { assignMultipleRefs, wrapEvent } from '../utils';
+import { useControlledState } from '../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var noop = function noop() {
+  /* noop */
+};
+
+var _createContext = createContext('Slider'),
+    _createContext2 = _slicedToArray(_createContext, 2),
+    SliderProvider = _createContext2[0],
+    useSliderContext = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
+ */
+
+
+var Slider = /*#__PURE__*/forwardRef(function Slider(_ref, forwardedRef) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(SliderInput, _extends(_extends({}, props), {}, {
+    ref: forwardedRef,
+    "data-reach-slider": "",
+    children: /*#__PURE__*/_jsxs(SliderTrack, {
+      children: [/*#__PURE__*/_jsx(SliderRange, {}), /*#__PURE__*/_jsx(SliderHandle, {}), children]
+    })
+  }));
+});
+/**
+ * @see Docs https://reach.tech/slider#slider-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderInput
+ *
+ * The parent component of the slider interface. This is a lower level component
+ * if you need more control over styles or rendering the slider's inner
+ * components.
+ *
+ * @see Docs https://reach.tech/slider#sliderinput
+ */
+var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedRef) {
+  var ariaLabel = _ref2['aria-label'],
+      ariaLabelledBy = _ref2['aria-labelledby'],
+      ariaValueTextProp = _ref2['aria-valuetext'],
+      _ref2$as = _ref2.as,
+      Comp = _ref2$as === void 0 ? 'div' : _ref2$as,
+      defaultValue = _ref2.defaultValue,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      controlledValue = _ref2.value,
+      getAriaLabel = _ref2.getAriaLabel,
+      getAriaValueText = _ref2.getAriaValueText,
+      _ref2$handleAlignment = _ref2.handleAlignment,
+      handleAlignment = _ref2$handleAlignment === void 0 ? 'center' : _ref2$handleAlignment,
+      _ref2$max = _ref2.max,
+      max = _ref2$max === void 0 ? 100 : _ref2$max,
+      _ref2$min = _ref2.min,
+      min = _ref2$min === void 0 ? 0 : _ref2$min,
+      name = _ref2.name,
+      onChangeProp = _ref2.onChange,
+      onKeyDown = _ref2.onKeyDown,
+      onMouseDown = _ref2.onMouseDown,
+      onMouseMove = _ref2.onMouseMove,
+      onMouseUp = _ref2.onMouseUp,
+      onPointerDown = _ref2.onPointerDown,
+      onPointerUp = _ref2.onPointerUp,
+      onTouchEnd = _ref2.onTouchEnd,
+      onTouchMove = _ref2.onTouchMove,
+      onTouchStart = _ref2.onTouchStart,
+      _ref2$orientation = _ref2.orientation,
+      orientation = _ref2$orientation === void 0 ? 'horizontal' : _ref2$orientation,
+      _ref2$step = _ref2.step,
+      step = _ref2$step === void 0 ? 1 : _ref2$step,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var touchId = useRef();
+  var fallbackId = useId();
+  var id = rest.id || fallbackId; // Track whether or not the pointer is down without updating the component
+
+  var pointerDownRef = useRef(false);
+  var trackRef = useRef(null);
+  var handleRef = useRef(null);
+  var sliderRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasFocus = _useState2[0],
+      setHasFocus = _useState2[1];
+
+  var _useDimensions = useDimensions(handleRef),
+      x = _useDimensions.ref,
+      handleDimensions = _objectWithoutProperties(_useDimensions, _excluded3);
+
+  var _useControlledState = useControlledState(controlledValue, onChangeProp, defaultValue || min, function (setValue) {
+    return function (e, v) {
+      return setValue(v);
+    };
+  }),
+      _useControlledState2 = _slicedToArray(_useControlledState, 2),
+      _value = _useControlledState2[0],
+      onChange = _useControlledState2[1];
+
+  var value = clamp(_value, min, max);
+  var trackPercent = valueToPercent(value, min, max);
+  var isVertical = orientation === 'vertical';
+  var handleSize = isVertical ? handleDimensions.height : handleDimensions.width; // TODO: Consider removing the `handleAlignment` prop
+  // We may want to use accept a `handlePosition` prop instead and let apps
+  // define their own positioning logic, similar to how we do for popovers.
+
+  var handlePosition = "calc(".concat(trackPercent, "% - ").concat(handleAlignment === 'center' ? "".concat(handleSize, "px / 2") : "".concat(handleSize, "px * ").concat(trackPercent * 0.01), ")");
+  var handlePositionRef = useRef(handlePosition);
+  useLayoutEffect(function () {
+    handlePositionRef.current = handlePosition;
+  }, [handlePosition]);
+  var getNewValueFromEvent = useCallback(function (event) {
+    return getNewValue(getPointerPosition(event, touchId), trackRef.current, {
+      step: step,
+      orientation: orientation,
+      min: min,
+      max: max
+    });
+  }, [max, min, orientation, step]); // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_kbd_interaction
+
+  var handleKeyDown = useStableLayoutCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+
+    var newValue;
+    var tenSteps = (max - min) / 10;
+    var keyStep = step || (max - min) / 100;
+
+    switch (event.key) {
+      // Decrease the value of the slider by one step.
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        newValue = value - keyStep;
+        break;
+      // Increase the value of the slider by one step
+
+      case 'ArrowRight':
+      case 'ArrowUp':
+        newValue = value + keyStep;
+        break;
+      // Decrement the slider by an amount larger than the step change made by
+      // `ArrowDown`.
+
+      case 'PageDown':
+        newValue = value - tenSteps;
+        break;
+      // Increment the slider by an amount larger than the step change made by
+      // `ArrowUp`.
+
+      case 'PageUp':
+        newValue = value + tenSteps;
+        break;
+      // Set the slider to the first allowed value in its range.
+
+      case 'Home':
+        newValue = min;
+        break;
+      // Set the slider to the last allowed value in its range.
+
+      case 'End':
+        newValue = max;
+        break;
+
+      default:
+        return;
+    }
+
+    newValue = clamp(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
+    onChange(event, newValue);
+  });
+  var ariaValueText = getAriaValueText ? getAriaValueText(value) : ariaValueTextProp;
+
+  var rangeStyle = _defineProperty({}, isVertical ? 'height' : 'width', "".concat(trackPercent, "%")); // Slide events!
+  // We will try to use pointer events if they are supported to leverage
+  // setPointerCapture and releasePointerCapture. We'll fall back to separate
+  // mouse and touch events.
+  // TODO: This could be more concise
+
+
+  var removeMoveEvents = useRef(noop);
+  var removeStartEvents = useRef(noop);
+  var removeEndEvents = useRef(noop); // Store our event handlers in refs so we aren't attaching/detaching events
+  // on every render if the user doesn't useCallback
+
+  var appEvents = useRef({
+    onMouseMove: onMouseMove,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onTouchStart: onTouchStart,
+    onTouchEnd: onTouchEnd,
+    onTouchMove: onTouchMove,
+    onPointerDown: onPointerDown,
+    onPointerUp: onPointerUp
+  });
+  useLayoutEffect(function () {
+    appEvents.current.onMouseMove = onMouseMove;
+    appEvents.current.onMouseDown = onMouseDown;
+    appEvents.current.onMouseUp = onMouseUp;
+    appEvents.current.onTouchStart = onTouchStart;
+    appEvents.current.onTouchEnd = onTouchEnd;
+    appEvents.current.onTouchMove = onTouchMove;
+    appEvents.current.onPointerDown = onPointerDown;
+    appEvents.current.onPointerUp = onPointerUp;
+  }, [onMouseMove, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchMove, onPointerDown, onPointerUp]);
+  var handleSlideStart = useStableLayoutCallback(function (event) {
+    if (isRightClick(event)) return;
+
+    if (disabled) {
+      pointerDownRef.current = false;
+      return;
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+    var ownerDocument = getOwnerDocument(sliderRef.current);
+    var ownerWindow = ownerDocument.defaultView || window;
+    pointerDownRef.current = true;
+
+    if (event.changedTouches) {
+      var _changedTouches;
+
+      // Prevent scrolling for touch events
+      event.preventDefault();
+      var touch = (_changedTouches = event.changedTouches) === null || _changedTouches === void 0 ? void 0 : _changedTouches[0];
+
+      if (touch != null) {
+        touchId.current = touch.identifier;
+      }
+    }
+
+    var newValue = getNewValueFromEvent(event);
+
+    if (newValue == null) {
+      return;
+    }
+
+    ownerWindow.requestAnimationFrame(function () {
+      var _handleRef$current;
+
+      return (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.focus();
+    });
+    onChange(event, newValue);
+    removeMoveEvents.current = addMoveListener();
+    removeEndEvents.current = addEndListener();
+  });
+  var setPointerCapture = useStableLayoutCallback(function (event) {
+    var _sliderRef$current;
+
+    if (isRightClick(event)) return;
+
+    if (disabled) {
+      pointerDownRef.current = false;
+      return;
+    }
+
+    pointerDownRef.current = true;
+    (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.setPointerCapture(event.pointerId);
+  });
+  var releasePointerCapture = useStableLayoutCallback(function (event) {
+    var _sliderRef$current2;
+
+    if (isRightClick(event)) return;
+    (_sliderRef$current2 = sliderRef.current) === null || _sliderRef$current2 === void 0 ? void 0 : _sliderRef$current2.releasePointerCapture(event.pointerId);
+    pointerDownRef.current = false;
+  });
+  var handlePointerMove = useStableLayoutCallback(function (event) {
+    if (disabled || !pointerDownRef.current) {
+      pointerDownRef.current = false;
+      return;
+    }
+
+    var newValue = getNewValueFromEvent(event);
+
+    if (newValue == null) {
+      return;
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue);
+  });
+  var handleSlideStop = useStableLayoutCallback(function (event) {
+    if (isRightClick(event)) return;
+    pointerDownRef.current = false;
+    var newValue = getNewValueFromEvent(event);
+
+    if (newValue == null) {
+      return;
+    }
+
+    touchId.current = undefined;
+    removeMoveEvents.current();
+    removeEndEvents.current();
+  });
+  var addMoveListener = useCallback(function () {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var ownerDocument = getOwnerDocument(sliderRef.current);
+    var touchListener = wrapEvent(appEvents.current.onTouchMove, handlePointerMove);
+    var mouseListener = wrapEvent(appEvents.current.onMouseMove, handlePointerMove);
+    ownerDocument.addEventListener('touchmove', touchListener);
+    ownerDocument.addEventListener('mousemove', mouseListener);
+    return function () {
+      ownerDocument.removeEventListener('touchmove', touchListener);
+      ownerDocument.removeEventListener('mousemove', mouseListener);
+    };
+  }, [handlePointerMove]);
+  var addEndListener = useCallback(function () {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var ownerDocument = getOwnerDocument(sliderRef.current);
+    var ownerWindow = ownerDocument.defaultView || window;
+    var pointerListener = wrapEvent(appEvents.current.onPointerUp, releasePointerCapture);
+    var touchListener = wrapEvent(appEvents.current.onTouchEnd, handleSlideStop);
+    var mouseListener = wrapEvent(appEvents.current.onMouseUp, handleSlideStop);
+
+    if ('PointerEvent' in ownerWindow) {
+      ownerDocument.addEventListener('pointerup', pointerListener);
+    }
+
+    ownerDocument.addEventListener('touchend', touchListener);
+    ownerDocument.addEventListener('mouseup', mouseListener);
+    return function () {
+      if ('PointerEvent' in ownerWindow) {
+        ownerDocument.removeEventListener('pointerup', pointerListener);
+      }
+
+      ownerDocument.removeEventListener('touchend', touchListener);
+      ownerDocument.removeEventListener('mouseup', mouseListener);
+    };
+  }, [handleSlideStop, releasePointerCapture]);
+  var addStartListener = useCallback(function () {
+    // e.preventDefault is ignored by React's synthetic touchStart event, so
+    // we attach the listener directly to the DOM node
+    // https://github.com/facebook/react/issues/9809#issuecomment-413978405
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var sliderElement = sliderRef.current;
+
+    if (!sliderElement) {
+      return noop;
+    } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+    var ownerDocument = getOwnerDocument(sliderElement);
+    var ownerWindow = ownerDocument.defaultView || window;
+    var touchListener = wrapEvent(appEvents.current.onTouchStart, handleSlideStart);
+    var mouseListener = wrapEvent(appEvents.current.onMouseDown, handleSlideStart);
+    var pointerListener = wrapEvent(appEvents.current.onPointerDown, setPointerCapture);
+    sliderElement.addEventListener('touchstart', touchListener);
+    sliderElement.addEventListener('mousedown', mouseListener);
+
+    if ('PointerEvent' in ownerWindow) {
+      sliderElement.addEventListener('pointerdown', pointerListener);
+    }
+
+    return function () {
+      sliderElement.removeEventListener('touchstart', touchListener);
+      sliderElement.removeEventListener('mousedown', mouseListener);
+
+      if ('PointerEvent' in ownerWindow) {
+        sliderElement.removeEventListener('pointerdown', pointerListener);
+      }
+    };
+  }, [setPointerCapture, handleSlideStart]);
+  useEffect(function () {
+    removeStartEvents.current = addStartListener();
+    return function () {
+      removeStartEvents.current();
+      removeEndEvents.current();
+      removeMoveEvents.current();
+    };
+  }, [addStartListener]);
+  var inputFallbackId = useId();
+  var inputId = id || inputFallbackId;
+  return /*#__PURE__*/_jsx(SliderProvider, {
+    ariaLabel: getAriaLabel ? getAriaLabel(value) : ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaValueText: ariaValueText,
+    handleDimensions: handleDimensions,
+    handleKeyDown: handleKeyDown,
+    handlePosition: handlePosition,
+    handleRef: handleRef,
+    hasFocus: hasFocus,
+    onKeyDown: onKeyDown,
+    setHasFocus: setHasFocus,
+    sliderId: id,
+    sliderMax: max,
+    sliderMin: min,
+    value: value,
+    disabled: !!disabled,
+    isVertical: isVertical,
+    orientation: orientation,
+    trackPercent: trackPercent,
+    trackRef: trackRef,
+    rangeStyle: rangeStyle,
+    updateValue: onChange,
+    children: /*#__PURE__*/_jsxs(Comp, _extends(_extends({}, rest), {}, {
+      ref: assignMultipleRefs(sliderRef, forwardedRef),
+      "data-reach-slider-input": "",
+      "data-disabled": disabled ? '' : undefined,
+      "data-orientation": orientation,
+      tabIndex: -1,
+      children: [typeof children === 'function' ? children({
+        hasFocus: hasFocus,
+        id: id,
+        max: max,
+        min: min,
+        value: value,
+        ariaValueText: ariaValueText
+      }) : children, name &&
+      /*#__PURE__*/
+      // If the slider is used in a form we'll need an input field to
+      // capture the value. We'll assume this when the component is given a
+      // form field name (A `name` prop doesn't really make sense in any
+      // other context).
+      _jsx("input", {
+        type: "hidden",
+        value: value,
+        name: name,
+        id: inputId
+      })]
+    }))
+  });
+});
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderTrack
+ *
+ * @see Docs https://reach.tech/slider#slidertrack
+ */
+var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwardedRef) {
+  var _ref3$as = _ref3.as,
+      Comp = _ref3$as === void 0 ? 'div' : _ref3$as,
+      children = _ref3.children,
+      _ref3$style = _ref3.style,
+      style = _ref3$style === void 0 ? {} : _ref3$style,
+      props = _objectWithoutProperties(_ref3, _excluded4);
+
+  var _useSliderContext = useSliderContext('SliderTrack'),
+      disabled = _useSliderContext.disabled,
+      orientation = _useSliderContext.orientation,
+      trackRef = _useSliderContext.trackRef;
+
+  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
+    ref: assignMultipleRefs(trackRef, forwardedRef),
+    style: _extends(_extends({}, style), {}, {
+      position: 'relative'
+    })
+  }, props), {}, {
+    "data-reach-slider-track": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation,
+    children: children
+  }));
+});
+var SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderRange
+ *
+ * The (typically) highlighted portion of the track that represents the space
+ * between the slider's `min` value and its current value.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange
+ */
+var SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwardedRef) {
+  var _ref4$as = _ref4.as,
+      Comp = _ref4$as === void 0 ? 'div' : _ref4$as,
+      children = _ref4.children,
+      _ref4$style = _ref4.style,
+      style = _ref4$style === void 0 ? {} : _ref4$style,
+      props = _objectWithoutProperties(_ref4, _excluded5);
+
+  var _useSliderContext2 = useSliderContext('SliderRange'),
+      disabled = _useSliderContext2.disabled,
+      orientation = _useSliderContext2.orientation,
+      rangeStyle = _useSliderContext2.rangeStyle;
+
+  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
+    ref: forwardedRef,
+    style: _extends(_extends({
+      position: 'absolute'
+    }, rangeStyle), style)
+  }, props), {}, {
+    "data-reach-slider-range": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation
+  }));
+});
+var SliderRange = /*#__PURE__*/memo(SliderRangeImpl);
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ * `SliderRange` will not accept or render any children.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderHandle
+ *
+ * The handle that the user drags along the track to set the slider value.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle
+ */
+var SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forwardedRef) {
+  var _ref5$as = _ref5.as,
+      Comp = _ref5$as === void 0 ? 'div' : _ref5$as,
+      onBlur = _ref5.onBlur,
+      onFocus = _ref5.onFocus,
+      _ref5$style = _ref5.style,
+      style = _ref5$style === void 0 ? {} : _ref5$style,
+      onKeyDown = _ref5.onKeyDown,
+      props = _objectWithoutProperties(_ref5, _excluded6);
+
+  var _useSliderContext3 = useSliderContext('SliderHandle'),
+      ariaLabel = _useSliderContext3.ariaLabel,
+      ariaLabelledBy = _useSliderContext3.ariaLabelledBy,
+      ariaValueText = _useSliderContext3.ariaValueText,
+      disabled = _useSliderContext3.disabled,
+      handlePosition = _useSliderContext3.handlePosition,
+      handleRef = _useSliderContext3.handleRef,
+      isVertical = _useSliderContext3.isVertical,
+      handleKeyDown = _useSliderContext3.handleKeyDown,
+      orientation = _useSliderContext3.orientation,
+      setHasFocus = _useSliderContext3.setHasFocus,
+      sliderMin = _useSliderContext3.sliderMin,
+      sliderMax = _useSliderContext3.sliderMax,
+      value = _useSliderContext3.value;
+
+  return /*#__PURE__*/_jsx(Comp, _extends(_extends({
+    "aria-disabled": disabled || undefined // If the slider has a visible label, it is referenced by
+    // `aria-labelledby` on the slider element. Otherwise, the slider
+    // element has a label provided by `aria-label`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabel ? undefined : ariaLabelledBy // If the slider is vertically oriented, it has `aria-orientation` set
+    // to vertical. The default value of `aria-orientation` for a slider is
+    // horizontal.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-orientation": orientation // The slider element has the `aria-valuemax` property set to a decimal
+    // value representing the maximum allowed value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuemax": sliderMax // The slider element has the `aria-valuemin` property set to a decimal
+    // value representing the minimum allowed value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuemin": sliderMin // The slider element has the `aria-valuenow` property set to a decimal
+    // value representing the current value of the slider.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuenow": value // If the value of `aria-valuenow` is not user-friendly, e.g., the day
+    // of the week is represented by a number, the `aria-valuetext` property
+    // is set to a string that makes the slider value understandable, e.g.,
+    // "Monday".
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    "aria-valuetext": ariaValueText // The element serving as the focusable slider control has role
+    // `slider`.
+    // https://www.w3.org/TR/wai-aria-practices-1.2/#slider_roles_states_props
+    ,
+    role: "slider",
+    tabIndex: disabled ? -1 : 0
+  }, props), {}, {
+    "data-reach-slider-handle": "",
+    ref: assignMultipleRefs(handleRef, forwardedRef),
+    onBlur: wrapEvent(onBlur, function () {
+      setHasFocus(false);
+    }),
+    onFocus: wrapEvent(onFocus, function () {
+      setHasFocus(true);
+    }),
+    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    style: _extends(_extends({
+      position: 'absolute'
+    }, isVertical ? {
+      bottom: handlePosition
+    } : {
+      left: handlePosition
+    }), style)
+  }));
+});
+var SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SliderMarker
+ *
+ * A fixed value marker. These can be used to illustrate a range of steps or
+ * highlight important points along the slider track.
+ *
+ * @see Docs https://reach.tech/slider#slidermarker
+ */
+var SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forwardedRef) {
+  var _ref6$as = _ref6.as,
+      Comp = _ref6$as === void 0 ? 'div' : _ref6$as,
+      children = _ref6.children,
+      _ref6$style = _ref6.style,
+      style = _ref6$style === void 0 ? {} : _ref6$style,
+      value = _ref6.value,
+      props = _objectWithoutProperties(_ref6, _excluded7);
+
+  var _useSliderContext4 = useSliderContext('SliderMarker'),
+      disabled = _useSliderContext4.disabled,
+      isVertical = _useSliderContext4.isVertical,
+      orientation = _useSliderContext4.orientation,
+      sliderMin = _useSliderContext4.sliderMin,
+      sliderMax = _useSliderContext4.sliderMax,
+      sliderValue = _useSliderContext4.value;
+
+  var inRange = !(value < sliderMin || value > sliderMax);
+  var absoluteStartPosition = "".concat(valueToPercent(value, sliderMin, sliderMax), "%");
+  var state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
+  return inRange ? /*#__PURE__*/_jsx(Comp, _extends(_extends({
+    ref: forwardedRef,
+    style: _extends(_extends({
+      position: 'absolute'
+    }, isVertical ? {
+      bottom: absoluteStartPosition
+    } : {
+      left: absoluteStartPosition
+    }), style)
+  }, props), {}, {
+    "data-reach-slider-marker": "",
+    "data-disabled": disabled ? '' : undefined,
+    "data-orientation": orientation,
+    "data-state": state,
+    "data-value": value,
+    children: children
+  })) : null;
+});
+var SliderMarker = /*#__PURE__*/memo(SliderMarkerImpl);
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
+ */
+
+////////////////////////////////////////////////////////////////////////////////
+function clamp(val, min, max) {
+  return val > max ? max : val < min ? min : val;
+}
+/**
+ * This handles the case when num is very small (0.00000001), js will turn
+ * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
+ * converted to this notation so it's fine.
+ *
+ * @param num
+ * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
+ */
+
+
+function getDecimalPrecision(num) {
+  if (Math.abs(num) < 1) {
+    var parts = num.toExponential().split('e-');
+    var matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+
+  var decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function percentToValue(percent, min, max) {
+  return (max - min) * percent + min;
+}
+
+function roundValueToStep(value, step, min) {
+  var nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function getPointerPosition(event, touchId) {
+  if (touchId.current !== undefined && event.changedTouches) {
+    for (var i = 0; i < event.changedTouches.length; i += 1) {
+      var touch = event.changedTouches[i];
+
+      if (touch.identifier === touchId.current) {
+        return {
+          x: touch.clientX,
+          y: touch.clientY
+        };
+      }
+    }
+
+    return false;
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY
+  };
+}
+
+function getNewValue(handlePosition, track, props) {
+  var orientation = props.orientation,
+      min = props.min,
+      max = props.max,
+      step = props.step;
+
+  if (!track || !handlePosition) {
+    return null;
+  }
+
+  var _track$getBoundingCli = track.getBoundingClientRect(),
+      left = _track$getBoundingCli.left,
+      width = _track$getBoundingCli.width,
+      bottom = _track$getBoundingCli.bottom,
+      height = _track$getBoundingCli.height;
+
+  var isVertical = orientation === 'vertical';
+  var diff = isVertical ? bottom - handlePosition.y : handlePosition.x - left;
+  var percent = diff / (isVertical ? height : width);
+  var newValue = percentToValue(percent, min, max);
+  return clamp(step ? roundValueToStep(newValue, step, min) : newValue, min, max);
+}
+
+function useDimensions(ref) {
+  var _useState3 = useState({
+    width: 0,
+    height: 0
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      _useState4$ = _useState4[0],
+      width = _useState4$.width,
+      height = _useState4$.height,
+      setDimensions = _useState4[1]; // Many existing `useDimensions` type hooks will use `getBoundingClientRect`
+  // getBoundingClientRect does not work here when borders are applied.
+  // getComputedStyle is not as performant so we may want to create a utility to
+  // check for any conflicts with box sizing first and only use
+  // `getComputedStyle` if neccessary.
+
+  /* const { width, height } = ref.current
+    ? ref.current.getBoundingClientRect()
+    : 0; */
+
+
+  useLayoutEffect(function () {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var ownerDocument = getOwnerDocument(ref.current);
+    var ownerWindow = ownerDocument.defaultView || window;
+
+    if (ref.current) {
+      var _ownerWindow$getCompu = ownerWindow.getComputedStyle(ref.current),
+          _newHeight = _ownerWindow$getCompu.height,
+          _newWidth = _ownerWindow$getCompu.width;
+
+      var newHeight = parseFloat(_newHeight);
+      var newWidth = parseFloat(_newWidth);
+
+      if (newHeight !== height || newWidth !== width) {
+        setDimensions({
+          height: newHeight,
+          width: newWidth
+        });
+      }
+    }
+  }, [ref, width, height]);
+  return {
+    ref: ref,
+    width: width,
+    height: height
+  };
+}
+
+function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+} ////////////////////////////////////////////////////////////////////////////////
+// Types
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Exports
+export default Slider;
+export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange };
+//# sourceMappingURL=Slider.js.map