@via-profit/ui-kit 0.3.0 → 0.5.0

package/Selectbox/index.d.ts

@@ -33,7 +33,7 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
     /**
      * Anchor position\
      * \
-     * Default: `bottom`
+     * Default: `bottom-fill`
      */
     readonly anchorPos?: AnchorPos;
     readonly positionStrategy?: PositionStrategy;
@@ -94,6 +94,21 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
      * ```
      */
     readonly selectedItemToString: ItemToString<T, Multiple>;
+    /**
+     * Renders the button content for the selected value instead of `selectedItemToString`,
+     * e.g. badges for the multiple selectbox.\
+     * Not called when nothing is selected, `notSetLabel` is shown then.\
+     * Do not render interactive elements (buttons, links): the content is placed inside a `<button>`
+     * Example:
+     * ```tsx
+     * <Selectbox
+     *   multiple
+     *   renderValue={items => items.map(item => <Badge key={item.id}>{item.name}</Badge>)}
+     *   ...
+     * />
+     * ```
+     */
+    readonly renderValue?: RenderValue<T, Multiple>;
     /**
      * A function that determines which of the elements is currently selected\
      * Example:
@@ -135,7 +150,7 @@ export interface SelectboxOverrides {
     /**
      * Icon
      */
-    readonly Icon?: React.ComponentType<SelectboxChevronIconProps & React.RefAttributes<SVGElement>>;
+    readonly Icon?: React.ComponentType<Omit<SelectboxChevronIconProps, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     /**
      * Component for display error text
      */
@@ -158,6 +173,7 @@ export type Children<T> = (data: {
     index: number;
 }, itemProps: MenuItemProps) => React.ReactNode;
 export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
+export type RenderValue<T, Multiple extends boolean | undefined = undefined> = (value: Multiple extends undefined ? T : readonly T[]) => React.ReactNode;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectboxProps<T, Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement> | undefined;

package/Selectbox/index.js

@@ -51,6 +51,7 @@ const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErro
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
 const SelectboxMenu_1 = __importDefault(require("./SelectboxMenu"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const DEFAULT_OVERRIDES = {
     Button: SelectboxButton_1.default,
     Icon: SelectboxChevronIcon_1.default,
@@ -61,19 +62,22 @@ const DEFAULT_OVERRIDES = {
     Container: SelectboxContainer_1.default,
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, 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", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const _a = (0, useThemeProps_1.default)('Selectbox', props), { 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 } = _a, nativeButtonProps = __rest(_a, ["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 renderValueAsString = React.useCallback(() => {
-        if ((!multiple && !value) || (multiple && value.length === 0)) {
+    const renderButtonContent = React.useCallback(() => {
+        if ((!multiple && value == null) || (multiple && value.length === 0)) {
             return notSetLabel;
         }
-        return selectedItemToString(value);
-    }, [multiple, selectedItemToString, value, 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) {
@@ -84,6 +88,17 @@ const Selectbox = React.forwardRef((props, ref) => {
         }
         (_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);
@@ -123,7 +138,9 @@ const Selectbox = React.forwardRef((props, ref) => {
     const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
         error,
         isOpen,
-        anchorPos, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
+        anchorPos, 
+        // The static indicator: the default one is an overlay over the nearest positioned ancestor
+        endIcon: isLoading ? React.createElement(Spinner_1.default, { size: "1.2em" }) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
     const labelProps = React.useMemo(() => ({
         htmlFor: inputID,
         error,
@@ -133,7 +150,7 @@ const Selectbox = React.forwardRef((props, ref) => {
             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, ref: setRefs }), renderValueAsString())),
+            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_1.default, { 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)));
 });

package/Slider/SliderContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type SliderOrientation = 'horizontal' | 'vertical';
+export type SliderContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * True if at least one mark has a label: the container reserves the place for the labels
+     */
+    readonly hasMarkLabels: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * True if at least one mark has a label: the container reserves the place for the labels
+     */
+    readonly hasMarkLabels: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderContainer.js

@@ -0,0 +1,50 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledContainer = styled_1.default.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'
+    ? (0, react_2.css) `
+          display: inline-block;
+          vertical-align: top;
+          width: 0.25em;
+          height: 12em;
+          padding: 0 0.7em;
+          margin-right: ${$hasMarkLabels ? '2.5em' : 0};
+        `
+    : (0, react_2.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_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$orientation": orientation, "$disabled": disabled, "$hasMarkLabels": hasMarkLabels, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SliderContainer);

package/Slider/SliderMark.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderMarkProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the mark, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the mark, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderMark.js

@@ -0,0 +1,40 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Mark = styled_1.default.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 = (0, react_2.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_1.default.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));
+};
+exports.default = react_1.default.forwardRef(SliderMark);

package/Slider/SliderMarkLabel.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderMarkLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the label, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly orientation: SliderOrientation;
+    /**
+     * The position of the label, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True if the mark lies on the filled part of the rail
+     */
+    readonly inTrack: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderMarkLabel.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const MarkLabel = styled_1.default.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_1.default.createElement(MarkLabel, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign(Object.assign({}, placement), style), "$inTrack": inTrack, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SliderMarkLabel);

package/Slider/SliderRail.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderRailProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: string | undefined;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderRail.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useSliderColor_1 = __importDefault(require("./useSliderColor"));
+const Rail = styled_1.default.span `
+  position: absolute;
+  display: block;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          top: 0;
+          bottom: 0;
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : (0, react_2.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 = (0, react_2.useTheme)();
+    const $color = (0, useSliderColor_1.default)(color);
+    return (react_1.default.createElement(Rail, Object.assign({}, nativeProps, { "$color": disabled ? theme.color.textPrimary.alpha(0.5) : $color, "$orientation": orientation, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SliderRail);

package/Slider/SliderThumb.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderThumbProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * The position of the thumb, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True while the thumb is dragged
+     */
+    readonly active: boolean;
+    /**
+     * The index of the thumb: 0 for a single slider, 0 or 1 for a range
+     */
+    readonly index: number;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: string | undefined;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * The position of the thumb, from 0 to 100 percent of the rail
+     */
+    readonly position: number;
+    /**
+     * True while the thumb is dragged
+     */
+    readonly active: boolean;
+    /**
+     * The index of the thumb: 0 for a single slider, 0 or 1 for a range
+     */
+    readonly index: number;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderThumb.js

@@ -0,0 +1,71 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useSliderColor_1 = __importDefault(require("./useSliderColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const Thumb = styled_1.default.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'
+    ? (0, react_2.css) `
+          left: 50%;
+          transform: translate(-50%, 50%);
+        `
+    : (0, react_2.css) `
+          top: 50%;
+          transform: translate(-50%, -50%);
+        `}
+  ${({ $color, $active, $disabled }) => !$disabled &&
+    (0, react_2.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 &&
+        (0, react_2.css) `
+        &,
+        &:hover,
+        &:focus-visible {
+          box-shadow: 0 0 0 0.7em ${$color.alpha(0.16).toString()};
+        }
+      `}
+    `}
+  ${({ theme }) => (0, tokens_1.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 = (0, react_2.useTheme)();
+    const $color = (0, useSliderColor_1.default)(color);
+    return (react_1.default.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));
+};
+exports.default = react_1.default.forwardRef(SliderThumb);

package/Slider/SliderTrack.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { SliderOrientation } from './SliderContainer';
+export type SliderTrackProps = React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * Where the filled part begins, from 0 to 100 percent of the rail
+     */
+    readonly start: number;
+    /**
+     * Where the filled part ends, from 0 to 100 percent of the rail
+     */
+    readonly end: number;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    readonly color?: string | undefined;
+    readonly orientation: SliderOrientation;
+    readonly disabled: boolean;
+    /**
+     * Where the filled part begins, from 0 to 100 percent of the rail
+     */
+    readonly start: number;
+    /**
+     * Where the filled part ends, from 0 to 100 percent of the rail
+     */
+    readonly end: number;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Slider/SliderTrack.js

@@ -0,0 +1,48 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const useSliderColor_1 = __importDefault(require("./useSliderColor"));
+const Track = styled_1.default.span `
+  position: absolute;
+  display: block;
+  border-radius: 1em;
+  background-color: ${({ $color }) => $color.toString()};
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : (0, react_2.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 = (0, react_2.useTheme)();
+    const $color = (0, useSliderColor_1.default)(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_1.default.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));
+};
+exports.default = react_1.default.forwardRef(SliderTrack);