@via-profit/ui-kit 0.4.0 → 0.6.0

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);

package/Slider/index.d.ts

@@ -0,0 +1,134 @@
+import React from 'react';
+import { SliderContainerProps, SliderOrientation } from './SliderContainer';
+import { SliderRailProps } from './SliderRail';
+import { SliderTrackProps } from './SliderTrack';
+import { SliderThumbProps } from './SliderThumb';
+import { SliderMarkProps } from './SliderMark';
+import { SliderMarkLabelProps } from './SliderMarkLabel';
+export type { SliderOrientation };
+/**
+ * A number for the single slider, a pair of numbers for the range
+ */
+export type SliderValue = number | readonly [number, number];
+export interface SliderMarkItem {
+    readonly value: number;
+    /**
+     * The text under the mark (to the right of it for the vertical slider)
+     */
+    readonly label?: React.ReactNode;
+}
+export type SliderProps<V extends SliderValue = number> = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange' | 'defaultValue' | 'color'> & {
+    /**
+     * The value of the controlled slider: a number, or a pair of numbers for the range. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly value?: V;
+    /**
+     * The initial value of the uncontrolled slider: a number, or a pair of numbers for the range
+     * Default: `min`
+     */
+    readonly defaultValue?: V;
+    /**
+     * Called on every change of the value while the thumb is dragged or moved by the keyboard.
+     * `activeThumb` is the index of the moved thumb: 0 for the single slider, 0 or 1 for the range
+     */
+    readonly onChange?: (value: V, event: React.SyntheticEvent, activeThumb: number) => void;
+    /**
+     * Called once the user releases the thumb, and after every key press.
+     * Use it for the expensive work, e.g. for requests to the server
+     */
+    readonly onChangeCommitted?: (value: V, event: React.SyntheticEvent) => void;
+    /**
+     * The minimum value
+     * Default: 0
+     */
+    readonly min?: number;
+    /**
+     * The maximum value
+     * Default: 100
+     */
+    readonly max?: number;
+    /**
+     * The value changes by this amount. It must be greater than zero
+     * Default: 1
+     */
+    readonly step?: number;
+    /**
+     * `true` shows a mark at every step, an array shows marks at the given values, optionally with labels
+     * Default: false
+     */
+    readonly marks?: boolean | readonly SliderMarkItem[];
+    /**
+     * Default: `horizontal`
+     */
+    readonly orientation?: SliderOrientation;
+    /**
+     * Default: false
+     */
+    readonly disabled?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * The name of the hidden input with the value, for the form submission.
+     * The range creates two inputs with this name
+     */
+    readonly name?: string;
+    /**
+     * The label of the thumb for the screen readers.
+     * For the range use `getAriaLabel`: the thumbs need different labels
+     */
+    readonly 'aria-label'?: string;
+    /**
+     * The id of the element that labels the thumbs
+     */
+    readonly 'aria-labelledby'?: string;
+    /**
+     * Returns the label of the thumb for the screen readers. Overrides `aria-label`
+     */
+    readonly getAriaLabel?: (index: number) => string;
+    /**
+     * Returns the text the screen readers announce instead of the bare number, e.g. «500 ₽»
+     */
+    readonly getAriaValueText?: (value: number, index: number) => string;
+    readonly overrides?: SliderOverrides;
+};
+export interface SliderOverrides {
+    /**
+     * The root element. It receives the pointer events
+     */
+    readonly Container?: React.ComponentType<SliderContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The whole line of the slider
+     */
+    readonly Rail?: React.ComponentType<SliderRailProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The filled part of the line
+     */
+    readonly Track?: React.ComponentType<SliderTrackProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The thumb. It holds the focus and the slider role
+     */
+    readonly Thumb?: React.ComponentType<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The dot of the mark on the line
+     */
+    readonly Mark?: React.ComponentType<SliderMarkProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The label of the mark
+     */
+    readonly MarkLabel?: React.ComponentType<SliderMarkLabelProps & React.RefAttributes<HTMLSpanElement>>;
+}
+/**
+ * The slider is generic: the type of the value (a number or a pair of numbers)
+ * comes from `value` or `defaultValue` and goes to `onChange`
+ */
+type SliderComponent = {
+    (props: SliderProps<number> & React.RefAttributes<HTMLSpanElement>): React.ReactElement | null;
+    (props: SliderProps<readonly [number, number]> & React.RefAttributes<HTMLSpanElement>): React.ReactElement | null;
+    displayName?: string;
+};
+declare const _default: SliderComponent;
+export default _default;

package/Slider/index.js

@@ -0,0 +1,249 @@
+"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 SliderContainer_1 = __importDefault(require("./SliderContainer"));
+const SliderRail_1 = __importDefault(require("./SliderRail"));
+const SliderTrack_1 = __importDefault(require("./SliderTrack"));
+const SliderThumb_1 = __importDefault(require("./SliderThumb"));
+const SliderMark_1 = __importDefault(require("./SliderMark"));
+const SliderMarkLabel_1 = __importDefault(require("./SliderMarkLabel"));
+const utils_1 = require("./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_1.default.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SliderContainer_1.default,
+        Rail: (overrides === null || overrides === void 0 ? void 0 : overrides.Rail) || SliderRail_1.default,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || SliderTrack_1.default,
+        Thumb: (overrides === null || overrides === void 0 ? void 0 : overrides.Thumb) || SliderThumb_1.default,
+        Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || SliderMark_1.default,
+        MarkLabel: (overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel) || SliderMarkLabel_1.default,
+    }), [overrides]);
+    const isControlled = typeof value !== 'undefined';
+    const isRange = Array.isArray(isControlled ? value : defaultValue);
+    const [internalValues, setInternalValues] = react_1.default.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 => (0, utils_1.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_1.default.useRef(values);
+    valuesRef.current = values;
+    const containerRef = react_1.default.useRef(null);
+    const thumbRefs = react_1.default.useRef([]);
+    const dragRef = react_1.default.useRef(null);
+    const [activeIndex, setActiveIndex] = react_1.default.useState(null);
+    react_1.default.useImperativeHandle(ref, () => containerRef.current);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    react_1.default.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «value» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    react_1.default.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 = (0, utils_1.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 (0, utils_1.clamp)((0, utils_1.snapToStep)(min + (0, utils_1.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 = (0, utils_1.snapToStep)(current + (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = (0, utils_1.snapToStep)(current - (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'PageUp':
+                next = (0, utils_1.snapToStep)(current + bigStep, min, step);
+                break;
+            case 'PageDown':
+                next = (0, utils_1.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_1.default.useMemo(() => {
+        if (marks === true) {
+            if (!(step > 0)) {
+                return [];
+            }
+            const count = Math.floor((max - min) / step) + 1;
+            return Array.from({ length: count }, (_, i) => ({
+                value: (0, utils_1.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 ? (0, utils_1.valueToPercent)(values[0], min, max) : 0;
+    const trackEnd = (0, utils_1.valueToPercent)(values[values.length - 1], min, max);
+    const isInTrack = (v) => (isRange ? v >= values[0] && v <= values[1] : v <= values[0]);
+    return (react_1.default.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_1.default.createElement(overridesMap.Rail, { color: color, orientation: orientation, disabled: disabled }),
+        react_1.default.createElement(overridesMap.Track, { color: color, orientation: orientation, disabled: disabled, start: trackStart, end: trackEnd }),
+        markItems.map(mark => (react_1.default.createElement(react_1.default.Fragment, { key: mark.value },
+            react_1.default.createElement(overridesMap.Mark, { orientation: orientation, position: (0, utils_1.valueToPercent)(mark.value, min, max), inTrack: isInTrack(mark.value) }),
+            mark.label != null && mark.label !== false && (react_1.default.createElement(overridesMap.MarkLabel, { orientation: orientation, position: (0, utils_1.valueToPercent)(mark.value, min, max), inTrack: isInTrack(mark.value) }, mark.label))))),
+        values.map((thumbValue, index) => (react_1.default.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: (0, utils_1.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_1.default.createElement("input", { key: index, type: "hidden", name: name, value: thumbValue, disabled: disabled })))));
+};
+exports.default = react_1.default.forwardRef(Slider);

package/Slider/useSliderColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Slider to the Color instance
+ */
+declare const useSliderColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
+export default useSliderColor;

package/Slider/useSliderColor.js

@@ -0,0 +1,33 @@
+"use strict";
+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 react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Slider to the Color instance
+ */
+const useSliderColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.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_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useSliderColor;

package/Slider/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * Snaps the value to the nearest step counted from `min`.
+ * The result is rounded to the precision of `step` and `min`: 0.1 + 0.2 gives 0.3, not 0.30000000000000004
+ */
+export declare const snapToStep: (value: number, min: number, step: number) => number;
+/**
+ * The position of the value on the rail, from 0 to 100
+ */
+export declare const valueToPercent: (value: number, min: number, max: number) => number;

package/Slider/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueToPercent = exports.snapToStep = exports.clamp = void 0;
+/**
+ * Number of digits after the point, e.g. 2 for 0.05
+ */
+const countDecimals = (value) => {
+    if (Number.isInteger(value)) {
+        return 0;
+    }
+    const [mantissa, exponent] = String(value).split('e-');
+    const fraction = (mantissa.split('.')[1] || '').length;
+    return exponent ? fraction + Number(exponent) : fraction;
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+exports.clamp = clamp;
+/**
+ * Snaps the value to the nearest step counted from `min`.
+ * The result is rounded to the precision of `step` and `min`: 0.1 + 0.2 gives 0.3, not 0.30000000000000004
+ */
+const snapToStep = (value, min, step) => {
+    const snapped = Math.round((value - min) / step) * step + min;
+    const decimals = Math.max(countDecimals(step), countDecimals(min));
+    return Number(snapped.toFixed(decimals));
+};
+exports.snapToStep = snapToStep;
+/**
+ * The position of the value on the rail, from 0 to 100
+ */
+const valueToPercent = (value, min, max) => max === min ? 0 : ((value - min) * 100) / (max - min);
+exports.valueToPercent = valueToPercent;

package/Stack/index.d.ts

@@ -29,34 +29,46 @@ export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
      * The stack takes the width of its content (`inline-flex`) instead of the full width
      */
     readonly inline?: boolean;
+    /**
+     * The element of the stack: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
      * `column` — the elements go one under another, `row` — in a line\
      * **Default:** `column`
      */
-    readonly direction?: "row" | "column" | undefined;
+    readonly direction?: "column" | "row";
     /**
      * The gap between the elements: a step of the theme spacing scale or any CSS length\
      * **Default:** `md`
      */
-    readonly gap?: Spacing | undefined;
+    readonly gap?: Spacing;
     /**
      * The alignment across the direction (`align-items`)\
      * **Default:** `stretch` for the column, `center` for the row
      */
-    readonly align?: import("csstype").Property.AlignItems | undefined;
+    readonly align?: React.CSSProperties["alignItems"];
     /**
      * The alignment along the direction (`justify-content`)
      */
-    readonly justify?: import("csstype").Property.JustifyContent | undefined;
+    readonly justify?: React.CSSProperties["justifyContent"];
     /**
      * The elements of the row wrap to the next line when they do not fit
      */
-    readonly wrap?: boolean | undefined;
+    readonly wrap?: boolean;
     /**
      * The stack takes the width of its content (`inline-flex`) instead of the full width
      */
-    readonly inline?: boolean | undefined;
+    readonly inline?: boolean;
+    /**
+     * The element of the stack: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Stack/index.js

@@ -17,6 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const spacing_1 = require("../utils/spacing");
+/**
+ * The lists are the rows of the elements here: no default margins and markers
+ */
+const LIST_TAGS = ['ul', 'ol', 'dl'];
 const StyledStack = styled_1.default.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   flex-direction: ${({ $direction }) => $direction};
@@ -26,13 +30,14 @@ const StyledStack = styled_1.default.div `
   gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
   /* A flex child shrinks below its content only with min-width: 0 */
   min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
 `;
 /**
  * The elements in a column or in a row with the same gap between them.
  * The children stay the plain elements: no wrappers for the items
  */
 const Stack = (props, ref) => {
-    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline"]);
-    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, ref: ref }), children));
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false, as } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline", "as"]);
+    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(Stack);

package/Surface/SurfaceContainer.d.ts

@@ -5,8 +5,8 @@ export type SurfaceContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly noPadding?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly inline?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
-    readonly noPadding?: boolean | undefined;
+    readonly inline?: boolean;
+    readonly rounded?: boolean;
+    readonly noPadding?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceContainer.js

@@ -17,13 +17,14 @@ 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 tokens_1 = require("../ThemeProvider/tokens");
 const StyledSurfaceContainer = styled_1.default.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   box-sizing: border-box;
   flex-direction: column;
   background: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'surface')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   font-size: 1em;
 

package/Surface/SurfaceContent.d.ts

@@ -4,7 +4,7 @@ export type SurfaceContentProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;