@basic-ui/core 0.0.53 → 0.0.54

package/build/esm/Slider/Slider.d.ts

@@ -1,197 +1,197 @@
-import type { ReactNode, KeyboardEvent } from 'react';
-import type * as Polymorphic from '../utils/polymorphic';
-declare type SliderOrientation = 'horizontal' | 'vertical';
-declare type SliderHandleAlignment = 'center' | 'contain';
-/**
- * Slider
- *
- * @see Docs https://reach.tech/slider#slider
- */
-declare const Slider: Polymorphic.ForwardRefComponent<"div", SliderProps>;
-/**
- * @see Docs https://reach.tech/slider#slider-props
- */
-interface SliderProps {
-    /**
-     * `Slider` can accept `SliderMarker` children to enhance display of specific
-     * values along the track.
-     *
-     * @see Docs https://reach.tech/slider#slider-children
-     */
-    children?: ReactNode;
-    /**
-     * The defaultValue is used to set an initial value for an uncontrolled
-     * Slider.
-     *
-     * @see Docs https://reach.tech/slider#slider-defaultvalue
-     */
-    defaultValue?: number;
-    /**
-     * @see Docs https://reach.tech/slider#slider-disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether or not the slider should be disabled from user interaction.
-     *
-     * @see Docs https://reach.tech/slider#slider-value
-     */
-    value?: number;
-    /**
-     * A function used to set a human-readable name for the slider.
-     *
-     * @see Docs https://reach.tech/slider#slider-getarialabel
-     */
-    getAriaLabel?(value: number): string;
-    /**
-     * A function used to set a human-readable value text based on the slider's
-     * current value.
-     *
-     * @see Docs https://reach.tech/slider#slider-getariavaluetext
-     */
-    getAriaValueText?(value: number): string;
-    /**
-     * When set to `center`, the slider's handle will be positioned directly
-     * centered over the slider's curremt value on the track. This means that when
-     * the slider is at its min or max value, a visiable slider handle will extend
-     * beyond the width (or height in vertical mode) of the slider track. When set
-     * to `contain`, the slider handle will always be contained within the bounds
-     * of the track, meaning its position will be slightly offset from the actual
-     * value depending on where it sits on the track.
-     *
-     * @see Docs https://reach.tech/slider#slider-handlealignment
-     */
-    handleAlignment?: SliderHandleAlignment;
-    /**
-     * The maximum value of the slider. Defaults to `100`.
-     *
-     * @see Docs https://reach.tech/slider#slider-max
-     */
-    max?: number;
-    /**
-     * The minimum value of the slider. Defaults to `0`.
-     *
-     * @see Docs https://reach.tech/slider#slider-min
-     */
-    min?: number;
-    /**
-     * If the slider is used as a form input, it should accept a `name` prop to
-     * identify its value in context of the form.
-     *
-     * @see Docs https://reach.tech/slider#slider-name
-     */
-    name?: string;
-    /**
-     * Callback that fires when the slider value changes. When the `value` prop is
-     * set, the Slider state becomes controlled and `onChange` must be used to
-     * update the value in response to user interaction.
-     *
-     * @see Docs https://reach.tech/slider#slider-onchange
-     */
-    onChange?(e: SomePointerEvent | KeyboardEvent, newValue: number, props?: {
-        min?: number;
-        max?: number;
-        handlePosition?: string;
-    }): void;
-    onMouseDown?(event: MouseEvent): void;
-    onMouseMove?(event: MouseEvent): void;
-    onMouseUp?(event: MouseEvent): void;
-    onPointerDown?(event: PointerEvent): void;
-    onPointerUp?(event: PointerEvent): void;
-    onTouchEnd?(event: TouchEvent): void;
-    onTouchMove?(event: TouchEvent): void;
-    onTouchStart?(event: TouchEvent): void;
-    /**
-     * Sets the slider to horizontal or vertical mode.
-     *
-     * @see Docs https://reach.tech/slider#slider-orientation
-     */
-    orientation?: SliderOrientation;
-    /**
-     * The step attribute is a number that specifies the granularity that the
-     * value must adhere to as it changes. Step sets minimum intervals of change,
-     * creating a "snap" effect when the handle is moved along the track.
-     *
-     * @see Docs https://reach.tech/slider#slider-step
-     */
-    step?: number;
-}
-/**
- * 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
- */
-declare const SliderInput: Polymorphic.ForwardRefComponent<"div", SliderInputProps>;
-/**
- * @see Docs https://reach.tech/slider#sliderinput-props
- */
-declare type SliderInputProps = Omit<SliderProps, 'children'> & {
-    /**
-     * Slider expects `<SliderTrack>` as its child; The track will accept all
-     * additional slider sub-components as children. It can also accept a
-     * function/render prop as its child to expose some of its internal state
-     * variables.
-     *
-     * @see Docs https://reach.tech/slider#sliderinput-children
-     */
-    children: ReactNode | SliderChildrenRender;
-};
-declare const SliderTrack: Polymorphic.MemoComponent<"div", SliderTrackProps>;
-/**
- * @see Docs https://reach.tech/slider#slidertrack-props
- */
-interface SliderTrackProps {
-    /**
-     * `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
-     * function. All other Slider subcomponents should be passed as children
-     * inside the `SliderTrack`.
-     *
-     * @see Docs https://reach.tech/slider#slidertrack-children
-     */
-    children: ReactNode;
-}
-declare const SliderRange: Polymorphic.MemoComponent<"div", SliderRangeProps>;
-/**
- * `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
- */
-interface SliderRangeProps {
-}
-declare const SliderHandle: Polymorphic.MemoComponent<"div", SliderHandleProps>;
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- *
- * @see Docs https://reach.tech/slider#sliderhandle-props
- */
-interface SliderHandleProps {
-}
-declare const SliderMarker: Polymorphic.MemoComponent<"div", SliderMarkerProps>;
-/**
- * @see Docs https://reach.tech/slider#slidermarker-props
- */
-interface SliderMarkerProps {
-    /**
-     * The value to denote where the marker should appear along the track.
-     *
-     * @see Docs https://reach.tech/slider#slidermarker-value
-     */
-    value: number;
-}
-declare type SomePointerEvent = TouchEvent | MouseEvent;
-declare type SliderChildrenRender = (props: {
-    ariaValueText?: string | undefined;
-    hasFocus?: boolean;
-    id?: string | undefined;
-    sliderId?: string | undefined;
-    max?: number;
-    min?: number;
-    value?: number;
-}) => JSX.Element;
-export default Slider;
-export type { SliderHandleProps, SliderInputProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderTrackProps, SliderHandleAlignment, SliderOrientation, };
-export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange, };
+import type { ReactNode, KeyboardEvent } from 'react';
+import type * as Polymorphic from '../utils/polymorphic';
+declare type SliderOrientation = 'horizontal' | 'vertical';
+declare type SliderHandleAlignment = 'center' | 'contain';
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
+ */
+declare const Slider: Polymorphic.ForwardRefComponent<"div", SliderProps>;
+/**
+ * @see Docs https://reach.tech/slider#slider-props
+ */
+interface SliderProps {
+    /**
+     * `Slider` can accept `SliderMarker` children to enhance display of specific
+     * values along the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-children
+     */
+    children?: ReactNode;
+    /**
+     * The defaultValue is used to set an initial value for an uncontrolled
+     * Slider.
+     *
+     * @see Docs https://reach.tech/slider#slider-defaultvalue
+     */
+    defaultValue?: number;
+    /**
+     * @see Docs https://reach.tech/slider#slider-disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether or not the slider should be disabled from user interaction.
+     *
+     * @see Docs https://reach.tech/slider#slider-value
+     */
+    value?: number;
+    /**
+     * A function used to set a human-readable name for the slider.
+     *
+     * @see Docs https://reach.tech/slider#slider-getarialabel
+     */
+    getAriaLabel?(value: number): string;
+    /**
+     * A function used to set a human-readable value text based on the slider's
+     * current value.
+     *
+     * @see Docs https://reach.tech/slider#slider-getariavaluetext
+     */
+    getAriaValueText?(value: number): string;
+    /**
+     * When set to `center`, the slider's handle will be positioned directly
+     * centered over the slider's curremt value on the track. This means that when
+     * the slider is at its min or max value, a visiable slider handle will extend
+     * beyond the width (or height in vertical mode) of the slider track. When set
+     * to `contain`, the slider handle will always be contained within the bounds
+     * of the track, meaning its position will be slightly offset from the actual
+     * value depending on where it sits on the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-handlealignment
+     */
+    handleAlignment?: SliderHandleAlignment;
+    /**
+     * The maximum value of the slider. Defaults to `100`.
+     *
+     * @see Docs https://reach.tech/slider#slider-max
+     */
+    max?: number;
+    /**
+     * The minimum value of the slider. Defaults to `0`.
+     *
+     * @see Docs https://reach.tech/slider#slider-min
+     */
+    min?: number;
+    /**
+     * If the slider is used as a form input, it should accept a `name` prop to
+     * identify its value in context of the form.
+     *
+     * @see Docs https://reach.tech/slider#slider-name
+     */
+    name?: string;
+    /**
+     * Callback that fires when the slider value changes. When the `value` prop is
+     * set, the Slider state becomes controlled and `onChange` must be used to
+     * update the value in response to user interaction.
+     *
+     * @see Docs https://reach.tech/slider#slider-onchange
+     */
+    onChange?(e: SomePointerEvent | KeyboardEvent, newValue: number, props?: {
+        min?: number;
+        max?: number;
+        handlePosition?: string;
+    }): void;
+    onMouseDown?(event: MouseEvent): void;
+    onMouseMove?(event: MouseEvent): void;
+    onMouseUp?(event: MouseEvent): void;
+    onPointerDown?(event: PointerEvent): void;
+    onPointerUp?(event: PointerEvent): void;
+    onTouchEnd?(event: TouchEvent): void;
+    onTouchMove?(event: TouchEvent): void;
+    onTouchStart?(event: TouchEvent): void;
+    /**
+     * Sets the slider to horizontal or vertical mode.
+     *
+     * @see Docs https://reach.tech/slider#slider-orientation
+     */
+    orientation?: SliderOrientation;
+    /**
+     * The step attribute is a number that specifies the granularity that the
+     * value must adhere to as it changes. Step sets minimum intervals of change,
+     * creating a "snap" effect when the handle is moved along the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-step
+     */
+    step?: number;
+}
+/**
+ * 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
+ */
+declare const SliderInput: Polymorphic.ForwardRefComponent<"div", SliderInputProps>;
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
+ */
+declare type SliderInputProps = Omit<SliderProps, 'children'> & {
+    /**
+     * Slider expects `<SliderTrack>` as its child; The track will accept all
+     * additional slider sub-components as children. It can also accept a
+     * function/render prop as its child to expose some of its internal state
+     * variables.
+     *
+     * @see Docs https://reach.tech/slider#sliderinput-children
+     */
+    children: ReactNode | SliderChildrenRender;
+};
+declare const SliderTrack: Polymorphic.MemoComponent<"div", SliderTrackProps>;
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
+ */
+interface SliderTrackProps {
+    /**
+     * `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
+     * function. All other Slider subcomponents should be passed as children
+     * inside the `SliderTrack`.
+     *
+     * @see Docs https://reach.tech/slider#slidertrack-children
+     */
+    children: ReactNode;
+}
+declare const SliderRange: Polymorphic.MemoComponent<"div", SliderRangeProps>;
+/**
+ * `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
+ */
+interface SliderRangeProps {
+}
+declare const SliderHandle: Polymorphic.MemoComponent<"div", SliderHandleProps>;
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
+ */
+interface SliderHandleProps {
+}
+declare const SliderMarker: Polymorphic.MemoComponent<"div", SliderMarkerProps>;
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
+ */
+interface SliderMarkerProps {
+    /**
+     * The value to denote where the marker should appear along the track.
+     *
+     * @see Docs https://reach.tech/slider#slidermarker-value
+     */
+    value: number;
+}
+declare type SomePointerEvent = TouchEvent | MouseEvent;
+declare type SliderChildrenRender = (props: {
+    ariaValueText?: string | undefined;
+    hasFocus?: boolean;
+    id?: string | undefined;
+    sliderId?: string | undefined;
+    max?: number;
+    min?: number;
+    value?: number;
+}) => JSX.Element;
+export default Slider;
+export type { SliderHandleProps, SliderInputProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderTrackProps, SliderHandleAlignment, SliderOrientation, };
+export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange, };

package/build/esm/Slider/Slider.js

@@ -12,26 +12,26 @@ var _excluded = ["children"],
 
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-/**
- * 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/
+/**
+ * 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';
@@ -52,10 +52,10 @@ var _createContext = createContext('Slider'),
     SliderProvider = _createContext2[0],
     useSliderContext = _createContext2[1]; ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Slider
- *
- * @see Docs https://reach.tech/slider#slider
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
  */
 
 
@@ -71,20 +71,20 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref, forwardedRef) {
     })
   }));
 });
-/**
- * @see Docs https://reach.tech/slider#slider-props
+/**
+ * @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
+/**
+ * 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'],
@@ -473,16 +473,16 @@ var SliderInput = /*#__PURE__*/forwardRef(function SliderInput(_ref2, forwardedR
     }))
   });
 });
-/**
- * @see Docs https://reach.tech/slider#sliderinput-props
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderTrack
- *
- * @see Docs https://reach.tech/slider#slidertrack
+/**
+ * SliderTrack
+ *
+ * @see Docs https://reach.tech/slider#slidertrack
  */
 var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -513,19 +513,19 @@ var SliderTrackImpl = /*#__PURE__*/forwardRef(function SliderTrack(_ref3, forwar
   }));
 });
 var SliderTrack = /*#__PURE__*/memo(SliderTrackImpl);
-/**
- * @see Docs https://reach.tech/slider#slidertrack-props
+/**
+ * @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
+/**
+ * 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,
@@ -555,22 +555,22 @@ var SliderRangeImpl = /*#__PURE__*/forwardRef(function SliderRange(_ref4, forwar
   }));
 });
 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
+/**
+ * `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
+/**
+ * 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,
@@ -656,22 +656,22 @@ var SliderHandleImpl = /*#__PURE__*/forwardRef(function SliderHandle(_ref5, forw
   }));
 });
 var SliderHandle = /*#__PURE__*/memo(SliderHandleImpl);
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- *
- * @see Docs https://reach.tech/slider#sliderhandle-props
+/**
+ * `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
+/**
+ * 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,
@@ -715,21 +715,21 @@ var SliderMarkerImpl = /*#__PURE__*/forwardRef(function SliderMarker(_ref6, forw
   })) : null;
 });
 var SliderMarker = /*#__PURE__*/memo(SliderMarkerImpl);
-/**
- * @see Docs https://reach.tech/slider#slidermarker-props
+/**
+ * @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
+/**
+ * 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
  */
 
 
@@ -813,8 +813,8 @@ function useDimensions(ref) {
   // check for any conflicts with box sizing first and only use
   // `getComputedStyle` if neccessary.
 
-  /* const { width, height } = ref.current
-    ? ref.current.getBoundingClientRect()
+  /* const { width, height } = ref.current
+    ? ref.current.getBoundingClientRect()
     : 0; */