@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/Selectbox/index.js

@@ -0,0 +1,128 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import SelectboxItem from '../Menu/MenuItem';
+import Button from './SelectboxButton';
+import Spinner from '../LoadingIndicator/Spinner';
+import Icon from './SelectboxChevronIcon';
+import { mouseEventMap } from '../ClickOutside';
+import Label from '../TextField/TextFieldLabel';
+import Asterisk from '../TextField/TextFieldLabelAsterisk';
+import ErrorText from '../TextField/TextFieldErrorText';
+import ButtonWrapper from './SelectboxButtonWrapper';
+import Container from './SelectboxContainer';
+import SelectboxMenu from './SelectboxMenu';
+export { SelectboxItem };
+const DEFAULT_OVERRIDES = {
+    Button,
+    Icon,
+    Label,
+    Asterisk,
+    ErrorText,
+    ButtonWrapper,
+    Container,
+};
+const Selectbox = React.forwardRef((props, ref) => {
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const menuRef = React.useRef(null);
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
+    const renderButtonContent = React.useCallback(() => {
+        if ((!multiple && value == null) || (multiple && value.length === 0)) {
+            return notSetLabel;
+        }
+        const selected = value;
+        return typeof renderValue === 'function'
+            ? renderValue(selected)
+            : selectedItemToString(selected);
+    }, [multiple, selectedItemToString, renderValue, value, notSetLabel]);
+    const handleButtonClick = React.useCallback((event) => {
+        var _a;
+        if (isOpen) {
+            onRequestClose(event);
+        }
+        else {
+            onRequestOpen(event);
+        }
+        (_a = nativeButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+    }, [isOpen, nativeButtonProps, onRequestClose, onRequestOpen]);
+    // As a native select, the arrows open the list; the list then takes the focus
+    const handleButtonKeyDown = React.useCallback((event) => {
+        var _a;
+        (_a = nativeButtonProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+        if (!isOpen &&
+            !event.defaultPrevented &&
+            (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            onRequestOpen(event);
+        }
+    }, [isOpen, nativeButtonProps, onRequestOpen]);
+    const setRefs = React.useCallback((el) => {
+        if (anchorElement !== el) {
+            setAnchorElement(el);
+        }
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    }, [anchorElement, ref]);
+    const handleMouseDown = React.useCallback((event) => {
+        var _a;
+        let parentElem = event.target;
+        let needToClose = true;
+        while (parentElem && 'parentNode' in parentElem) {
+            if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                needToClose = false;
+                break;
+            }
+            parentElem = parentElem.parentNode;
+        }
+        if (needToClose) {
+            onRequestClose(event);
+        }
+    }, [onRequestClose, anchorElement]);
+    React.useEffect(() => {
+        // A closed selectbox has nothing to close
+        if (!isOpen) {
+            return undefined;
+        }
+        window.document.addEventListener(mouseEventMap.onMouseDown, handleMouseDown);
+        return () => {
+            window.document.removeEventListener(mouseEventMap.onMouseDown, handleMouseDown);
+        };
+    }, [handleMouseDown, isOpen]);
+    const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
+        error,
+        isOpen,
+        anchorPos, 
+        // The static indicator: the default one is an overlay over the nearest positioned ancestor
+        endIcon: isLoading ? React.createElement(Spinner, { size: "1.2em" }) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
+    const labelProps = React.useMemo(() => ({
+        htmlFor: inputID,
+        error,
+    }), [inputID, error]);
+    return (React.createElement(overridesMap.Container, null,
+        label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
+            label,
+            requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { id: inputID, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, ref: setRefs }), renderButtonContent())),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText),
+        React.createElement(SelectboxMenu, { multiple: multiple, items: items, value: value, isOpen: isOpen, anchorPos: anchorPos, positionStrategy: positionStrategy, autoFlip: autoFlip, alternativePlacements: ['bottom-fill', 'top-fill'], anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, ref: menuRef }, children)));
+});
+Selectbox.displayName = 'Selectbox';
+export default Selectbox;

package/esm/Slider/SliderContainer.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const StyledContainer = styled.span `
+  position: relative;
+  box-sizing: content-box;
+  font-size: 1em;
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  /* The browser must not scroll the page while the thumb is dragged by the finger */
+  touch-action: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  ${({ $orientation, $hasMarkLabels }) => $orientation === 'vertical'
+    ? css `
+          display: inline-block;
+          vertical-align: top;
+          width: 0.25em;
+          height: 12em;
+          padding: 0 0.7em;
+          margin-right: ${$hasMarkLabels ? '2.5em' : 0};
+        `
+    : css `
+          display: block;
+          width: 100%;
+          height: 0.25em;
+          padding: 0.7em 0;
+          margin-bottom: ${$hasMarkLabels ? '1.4em' : 0};
+        `}
+`;
+const SliderContainer = (props, ref) => {
+    const { children, orientation, disabled, hasMarkLabels } = props, nativeProps = __rest(props, ["children", "orientation", "disabled", "hasMarkLabels"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$orientation": orientation, "$disabled": disabled, "$hasMarkLabels": hasMarkLabels, ref: ref }), children));
+};
+export default React.forwardRef(SliderContainer);

package/esm/Slider/SliderMark.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+const Mark = styled.span `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.25em;
+  height: 0.25em;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+`;
+const SliderMark = (props, ref) => {
+    const { children, orientation, position, inTrack, style } = props, nativeProps = __rest(props, ["children", "orientation", "position", "inTrack", "style"]);
+    const theme = useTheme();
+    // On the track the mark is light, on the rail it repeats the rail color, so it stays visible on both
+    const backgroundColor = inTrack
+        ? theme.color.surface.alpha(0.8).toString()
+        : theme.color.textPrimary.alpha(0.3).toString();
+    return (React.createElement(Mark, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign(Object.assign({ backgroundColor }, (orientation === 'vertical'
+            ? { top: 'auto', bottom: `${position}%`, transform: 'translate(-50%, 50%)' }
+            : { left: `${position}%` })), style), ref: ref }), children));
+};
+export default React.forwardRef(SliderMark);

package/esm/Slider/SliderMarkLabel.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const MarkLabel = styled.span `
+  position: absolute;
+  font-size: 0.8em;
+  line-height: 1;
+  white-space: nowrap;
+  color: ${({ theme, $inTrack }) => $inTrack ? theme.color.textPrimary.toString() : theme.color.textSecondary.toString()};
+`;
+const SliderMarkLabel = (props, ref) => {
+    const { children, orientation, position, inTrack, style } = props, nativeProps = __rest(props, ["children", "orientation", "position", "inTrack", "style"]);
+    // Below the rail for the horizontal slider, to the right of it for the vertical one
+    const placement = orientation === 'vertical'
+        ? { left: '2.4em', bottom: `${position}%`, transform: 'translateY(50%)' }
+        : { top: '2.2em', left: `${position}%`, transform: 'translateX(-50%)' };
+    return (React.createElement(MarkLabel, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign(Object.assign({}, placement), style), "$inTrack": inTrack, ref: ref }), children));
+};
+export default React.forwardRef(SliderMarkLabel);

package/esm/Slider/SliderRail.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+const Rail = styled.span `
+  position: absolute;
+  display: block;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          top: 0;
+          bottom: 0;
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : css `
+          left: 0;
+          right: 0;
+          top: 50%;
+          height: 0.25em;
+          margin-top: -0.125em;
+        `}
+  border-radius: 1em;
+  background-color: ${({ $color }) => $color.toString()};
+  opacity: 0.3;
+`;
+const SliderRail = (props, ref) => {
+    const { children, color, orientation, disabled } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    return (React.createElement(Rail, Object.assign({}, nativeProps, { "$color": disabled ? theme.color.textPrimary.alpha(0.5) : $color, "$orientation": orientation, ref: ref }), children));
+};
+export default React.forwardRef(SliderRail);

package/esm/Slider/SliderThumb.js

@@ -0,0 +1,66 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const Thumb = styled.span `
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 1.15em;
+  height: 1.15em;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color.toString()};
+  outline: 0;
+  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          left: 50%;
+          transform: translate(-50%, 50%);
+        `
+    : css `
+          top: 50%;
+          transform: translate(-50%, -50%);
+        `}
+  ${({ $color, $active, $disabled }) => !$disabled &&
+    css `
+      &:hover {
+        box-shadow: 0 0 0 0.45em ${$color.alpha(0.16).toString()};
+      }
+      &:focus-visible {
+        box-shadow: 0 0 0 0.6em ${$color.alpha(0.24).toString()};
+        /* The halo is invisible in the forced colors mode, the outline is shown instead */
+        outline: 2px solid transparent;
+      }
+      ${$active &&
+        css `
+        &,
+        &:hover,
+        &:focus-visible {
+          box-shadow: 0 0 0 0.7em ${$color.alpha(0.16).toString()};
+        }
+      `}
+    `}
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const SliderThumb = (props, ref) => {
+    const { children, color, orientation, disabled, position, active, index, style } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled", "position", "active", "index", "style"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    return (React.createElement(Thumb, Object.assign({ "data-slider-thumb": index }, nativeProps, { style: Object.assign({ [orientation === 'vertical' ? 'bottom' : 'left']: `${position}%` }, style), "$color": disabled ? theme.color.textPrimary.mix(theme.color.surface, 0.55) : $color, "$orientation": orientation, "$active": active, "$disabled": disabled, ref: ref }), children));
+};
+export default React.forwardRef(SliderThumb);

package/esm/Slider/SliderTrack.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+const Track = styled.span `
+  position: absolute;
+  display: block;
+  border-radius: 1em;
+  background-color: ${({ $color }) => $color.toString()};
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : css `
+          top: 50%;
+          height: 0.25em;
+          margin-top: -0.125em;
+        `}
+`;
+const SliderTrack = (props, ref) => {
+    const { children, color, orientation, disabled, start, end, style } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled", "start", "end", "style"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    // The position changes on every pointer move: an inline style, not a new emotion class per value
+    const position = orientation === 'vertical'
+        ? { bottom: `${start}%`, height: `${end - start}%` }
+        : { left: `${start}%`, width: `${end - start}%` };
+    return (React.createElement(Track, Object.assign({}, nativeProps, { style: Object.assign(Object.assign({}, position), style), "$color": disabled ? theme.color.textPrimary.mix(theme.color.surface, 0.55) : $color, "$orientation": orientation, ref: ref }), children));
+};
+export default React.forwardRef(SliderTrack);

package/esm/Slider/index.js

@@ -0,0 +1,244 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Container from './SliderContainer';
+import Rail from './SliderRail';
+import Track from './SliderTrack';
+import Thumb from './SliderThumb';
+import Mark from './SliderMark';
+import MarkLabel from './SliderMarkLabel';
+import { clamp, snapToStep, valueToPercent } from './utils';
+const Slider = (props, ref) => {
+    const { value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, marks = false, orientation = 'horizontal', disabled = false, color, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, getAriaLabel, getAriaValueText, overrides, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "orientation", "disabled", "color", "name", 'aria-label', 'aria-labelledby', "getAriaLabel", "getAriaValueText", "overrides", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture"]);
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Rail: (overrides === null || overrides === void 0 ? void 0 : overrides.Rail) || Rail,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || Track,
+        Thumb: (overrides === null || overrides === void 0 ? void 0 : overrides.Thumb) || Thumb,
+        Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || Mark,
+        MarkLabel: (overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel) || MarkLabel,
+    }), [overrides]);
+    const isControlled = typeof value !== 'undefined';
+    const isRange = Array.isArray(isControlled ? value : defaultValue);
+    const [internalValues, setInternalValues] = React.useState(() => typeof defaultValue === 'undefined'
+        ? [min]
+        : typeof defaultValue === 'number'
+            ? [defaultValue]
+            : [...defaultValue]);
+    const rawValues = isControlled
+        ? typeof value === 'number'
+            ? [value]
+            : [...value]
+        : internalValues;
+    // The value from the props may be out of the bounds or in the wrong order: the slider shows the corrected one
+    const values = rawValues.map(v => clamp(v, min, max)).sort((a, b) => a - b);
+    // The pointer events may come faster than the renders: the handlers read the latest values from the ref
+    const valuesRef = React.useRef(values);
+    valuesRef.current = values;
+    const containerRef = React.useRef(null);
+    const thumbRefs = React.useRef([]);
+    const dragRef = React.useRef(null);
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    React.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «value» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    React.useEffect(() => {
+        if (!(step > 0)) {
+            console.error(`The property «step» should be greater than zero, got «${step}»`);
+        }
+    }, [step]);
+    const toPublicValue = (next) => isRange ? [next[0], next[1]] : next[0];
+    /**
+     * Moves the thumb to the value. A range thumb can not pass the other one
+     */
+    const changeValue = (index, nextValue, event) => {
+        const current = valuesRef.current;
+        const lower = isRange && index === 1 ? current[0] : min;
+        const upper = isRange && index === 0 ? current[1] : max;
+        const bounded = clamp(nextValue, lower, upper);
+        if (bounded === current[index]) {
+            return;
+        }
+        const next = current.map((v, i) => (i === index ? bounded : v));
+        valuesRef.current = next;
+        if (!isControlled) {
+            setInternalValues(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(toPublicValue(next), event, index);
+    };
+    const getValueFromPointer = (event) => {
+        const rect = containerRef.current.getBoundingClientRect();
+        const ratio = orientation === 'vertical'
+            ? (rect.bottom - event.clientY) / rect.height
+            : (event.clientX - rect.left) / rect.width;
+        return clamp(snapToStep(min + clamp(ratio, 0, 1) * (max - min), min, step), min, max);
+    };
+    const startDragOf = (index) => {
+        var _a;
+        setActiveIndex(index);
+        (_a = thumbRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    };
+    const handlePointerDown = event => {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        // Only the main mouse button, a finger or a pen
+        if (disabled || event.button !== 0 || event.defaultPrevented) {
+            return;
+        }
+        // Prevents the text selection and the focus on the container, the thumb gets the focus below
+        event.preventDefault();
+        const pointerValue = getValueFromPointer(event);
+        const current = valuesRef.current;
+        let index = 0;
+        if (isRange) {
+            if (current[0] === current[1]) {
+                // The thumbs are in the same place: the left one can only go left, the right one can only go right
+                index = pointerValue < current[0] ? 0 : pointerValue > current[1] ? 1 : null;
+            }
+            else {
+                index = Math.abs(pointerValue - current[0]) <= Math.abs(pointerValue - current[1]) ? 0 : 1;
+            }
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragRef.current = { pointerId: event.pointerId, index };
+        if (index === null) {
+            startDragOf(1);
+            return;
+        }
+        startDragOf(index);
+        changeValue(index, pointerValue, event);
+    };
+    const handlePointerMove = event => {
+        onPointerMove === null || onPointerMove === void 0 ? void 0 : onPointerMove(event);
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const pointerValue = getValueFromPointer(event);
+        let { index } = drag;
+        if (index === null) {
+            const current = valuesRef.current[0];
+            if (pointerValue === current) {
+                return;
+            }
+            index = pointerValue < current ? 0 : 1;
+            dragRef.current = { pointerId: drag.pointerId, index };
+            startDragOf(index);
+        }
+        changeValue(index, pointerValue, event);
+    };
+    const finishDrag = (event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        dragRef.current = null;
+        setActiveIndex(null);
+        onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(toPublicValue(valuesRef.current), event);
+    };
+    const handlePointerUp = event => {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+        finishDrag(event);
+    };
+    const handlePointerCancel = event => {
+        onPointerCancel === null || onPointerCancel === void 0 ? void 0 : onPointerCancel(event);
+        finishDrag(event);
+    };
+    const handleLostPointerCapture = event => {
+        onLostPointerCapture === null || onLostPointerCapture === void 0 ? void 0 : onLostPointerCapture(event);
+        finishDrag(event);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled) {
+            return;
+        }
+        const current = valuesRef.current[index];
+        // About ten big steps along the whole slider
+        const bigStep = step * Math.max(1, Math.round((max - min) / 10 / step));
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = snapToStep(current + (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = snapToStep(current - (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'PageUp':
+                next = snapToStep(current + bigStep, min, step);
+                break;
+            case 'PageDown':
+                next = snapToStep(current - bigStep, min, step);
+                break;
+            case 'Home':
+                next = min;
+                break;
+            case 'End':
+                next = max;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const before = valuesRef.current;
+        changeValue(index, next, event);
+        if (valuesRef.current !== before) {
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(toPublicValue(valuesRef.current), event);
+        }
+    };
+    const markItems = React.useMemo(() => {
+        if (marks === true) {
+            if (!(step > 0)) {
+                return [];
+            }
+            const count = Math.floor((max - min) / step) + 1;
+            return Array.from({ length: count }, (_, i) => ({
+                value: snapToStep(min + i * step, min, step),
+            }));
+        }
+        if (Array.isArray(marks)) {
+            return marks.filter(mark => mark.value >= min && mark.value <= max);
+        }
+        return [];
+    }, [marks, min, max, step]);
+    const hasMarkLabels = markItems.some(mark => mark.label != null && mark.label !== false);
+    const trackStart = isRange ? valueToPercent(values[0], min, max) : 0;
+    const trackEnd = valueToPercent(values[values.length - 1], min, max);
+    const isInTrack = (v) => (isRange ? v >= values[0] && v <= values[1] : v <= values[0]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { orientation: orientation, disabled: disabled, hasMarkLabels: hasMarkLabels, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onLostPointerCapture: handleLostPointerCapture, ref: containerRef }),
+        React.createElement(overridesMap.Rail, { color: color, orientation: orientation, disabled: disabled }),
+        React.createElement(overridesMap.Track, { color: color, orientation: orientation, disabled: disabled, start: trackStart, end: trackEnd }),
+        markItems.map(mark => (React.createElement(React.Fragment, { key: mark.value },
+            React.createElement(overridesMap.Mark, { orientation: orientation, position: valueToPercent(mark.value, min, max), inTrack: isInTrack(mark.value) }),
+            mark.label != null && mark.label !== false && (React.createElement(overridesMap.MarkLabel, { orientation: orientation, position: valueToPercent(mark.value, min, max), inTrack: isInTrack(mark.value) }, mark.label))))),
+        values.map((thumbValue, index) => (React.createElement(overridesMap.Thumb
+        // The thumb is identified by its place: the first or the second
+        // eslint-disable-next-line react/no-array-index-key
+        , { 
+            // The thumb is identified by its place: the first or the second
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": thumbValue, "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(thumbValue, index), "aria-orientation": orientation, "aria-disabled": disabled || undefined, "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel, "aria-labelledby": ariaLabelledby, color: color, orientation: orientation, disabled: disabled, position: valueToPercent(thumbValue, min, max), active: activeIndex === index, index: index, 
+            // The dragged thumb is above the other one, so the thumbs in the same place stay reachable
+            style: activeIndex === index ? { zIndex: 2 } : undefined, onKeyDown: event => handleKeyDown(index, event), ref: (node) => {
+                thumbRefs.current[index] = node;
+            } }))),
+        typeof name !== 'undefined' &&
+            values.map((thumbValue, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            React.createElement("input", { key: index, type: "hidden", name: name, value: thumbValue, disabled: disabled })))));
+};
+export default React.forwardRef(Slider);

package/esm/Slider/useSliderColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Slider to the Color instance
+ */
+const useSliderColor = (color) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+export default useSliderColor;