@via-profit/ui-kit 0.7.0 → 0.9.0

package/Modal/Drawer/useSwipeToClose.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { AnchorVariant } from './DrawerInner';
+export type UseSwipeToCloseOptions = {
+    /**
+     * The drawer element: it follows the finger
+     */
+    readonly elementRef: React.RefObject<HTMLDivElement | null>;
+    readonly enabled: boolean;
+    readonly isOpen: boolean;
+    readonly anchor: AnchorVariant;
+    readonly onClose: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+/**
+ * Closes the drawer by a swipe towards its edge.
+ *
+ * The pointer events move the drawer. A touch would be taken by the browser for the scroll
+ * (and the pointer cancelled), so the native `touchmove` is prevented while the drawer is dragged
+ */
+declare const useSwipeToClose: (options: UseSwipeToCloseOptions) => {
+    onPointerDown?: undefined;
+    onPointerMove?: undefined;
+    onPointerUp?: undefined;
+    onPointerCancel?: undefined;
+} | {
+    onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerCancel: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+export default useSwipeToClose;

package/Modal/Drawer/useSwipeToClose.js

@@ -0,0 +1,238 @@
+"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"));
+// The finger moves this far before the gesture is recognized as a drag or a scroll
+const SLOP = 6;
+// The drawer is closed when dragged by this part of its size or thrown faster than this
+const CLOSE_RATIO = 0.25;
+const CLOSE_VELOCITY = 0.5; // px per ms
+const RETURN_TRANSITION = 'transform 240ms ease-out';
+const initialState = {
+    mode: 'idle',
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    offset: 0,
+    lastOffset: 0,
+    lastTime: 0,
+    velocity: 0,
+};
+const isVertical = (anchor) => anchor === 'bottom' || anchor === 'top';
+/**
+ * The movement of the finger towards the edge of the drawer: positive closes it
+ */
+const getClosingDelta = (anchor, dx, dy) => {
+    switch (anchor) {
+        case 'top':
+            return -dy;
+        case 'left':
+            return -dx;
+        case 'right':
+            return dx;
+        case 'bottom':
+        default:
+            return dy;
+    }
+};
+const getTransform = (anchor, offset) => {
+    switch (anchor) {
+        case 'top':
+            return `translateY(${-offset}px)`;
+        case 'left':
+            return `translateX(${-offset}px)`;
+        case 'right':
+            return `translateX(${offset}px)`;
+        case 'bottom':
+        default:
+            return `translateY(${offset}px)`;
+    }
+};
+/**
+ * Whether an element between the target and the drawer can scroll the way the finger moves.
+ * Then the finger scrolls the content: the drawer is dragged only when the content is at its edge
+ */
+const canScrollWithGesture = (target, root, anchor) => {
+    let element = target instanceof Element ? target : null;
+    while (element && element !== root) {
+        if (element instanceof HTMLElement) {
+            const style = window.getComputedStyle(element);
+            const overflow = isVertical(anchor) ? style.overflowY : style.overflowX;
+            const scrollable = overflow === 'auto' || overflow === 'scroll';
+            if (scrollable) {
+                const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = element;
+                switch (anchor) {
+                    case 'bottom':
+                        if (scrollTop > 0) {
+                            return true;
+                        }
+                        break;
+                    case 'top':
+                        if (scrollTop + clientHeight < scrollHeight - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'left':
+                        if (scrollLeft + clientWidth < scrollWidth - 1) {
+                            return true;
+                        }
+                        break;
+                    case 'right':
+                        if (scrollLeft > 0) {
+                            return true;
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        element = element.parentElement;
+    }
+    return false;
+};
+/**
+ * Closes the drawer by a swipe towards its edge.
+ *
+ * The pointer events move the drawer. A touch would be taken by the browser for the scroll
+ * (and the pointer cancelled), so the native `touchmove` is prevented while the drawer is dragged
+ */
+const useSwipeToClose = (options) => {
+    const { elementRef, enabled, isOpen, anchor, onClose } = options;
+    const stateRef = react_1.default.useRef(Object.assign({}, initialState));
+    const setOffset = react_1.default.useCallback((offset, transition) => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = transition;
+            element.style.transform = offset > 0 ? getTransform(anchor, offset) : '';
+        }
+    }, [anchor, elementRef]);
+    const restore = react_1.default.useCallback(() => {
+        const element = elementRef.current;
+        if (element) {
+            element.style.transition = '';
+            element.style.transform = '';
+        }
+    }, [elementRef]);
+    // A drawer closed by a swipe keeps its offset while it slides out: reset it for the next opening
+    react_1.default.useEffect(() => {
+        if (isOpen) {
+            stateRef.current = Object.assign({}, initialState);
+            restore();
+        }
+    }, [isOpen, restore]);
+    /**
+     * Decides on the first noticeable movement whether it drags the drawer or scrolls the content
+     */
+    const update = react_1.default.useCallback((clientX, clientY, target) => {
+        const state = stateRef.current;
+        const element = elementRef.current;
+        if (!element || (state.mode !== 'pending' && state.mode !== 'drag')) {
+            return;
+        }
+        const dx = clientX - state.startX;
+        const dy = clientY - state.startY;
+        const closing = getClosingDelta(anchor, dx, dy);
+        if (state.mode === 'pending') {
+            const main = isVertical(anchor) ? Math.abs(dy) : Math.abs(dx);
+            const cross = isVertical(anchor) ? Math.abs(dx) : Math.abs(dy);
+            if (main < SLOP && cross < SLOP) {
+                return;
+            }
+            const isDrag = closing > 0 && main >= cross && !canScrollWithGesture(target, element, anchor);
+            state.mode = isDrag ? 'drag' : 'scroll';
+            if (!isDrag) {
+                return;
+            }
+            // The drag starts from here, without a jump by the slop
+            state.startX = clientX;
+            state.startY = clientY;
+            state.lastTime = performance.now();
+        }
+        const offset = Math.max(0, getClosingDelta(anchor, clientX - state.startX, clientY - state.startY));
+        const now = performance.now();
+        const elapsed = now - state.lastTime;
+        if (elapsed > 0) {
+            state.velocity = (offset - state.lastOffset) / elapsed;
+        }
+        state.lastOffset = offset;
+        state.lastTime = now;
+        state.offset = offset;
+        setOffset(offset, 'none');
+    }, [anchor, elementRef, setOffset]);
+    // A non-passive listener: only it may stop the browser from scrolling under the drag
+    react_1.default.useEffect(() => {
+        const element = elementRef.current;
+        if (!enabled || !element) {
+            return undefined;
+        }
+        const handleTouchMove = (event) => {
+            const touch = event.touches[0];
+            if (touch) {
+                update(touch.clientX, touch.clientY, event.target);
+            }
+            if (stateRef.current.mode === 'drag' && event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        element.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            element.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [enabled, elementRef, update]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (!event.isPrimary || event.button !== 0) {
+            return;
+        }
+        // A mouse drags only by the handle: everywhere else it selects the text
+        const target = event.target instanceof Element ? event.target : null;
+        if (event.pointerType === 'mouse') {
+            if (!(target === null || target === void 0 ? void 0 : target.closest('[data-drawer-handle]'))) {
+                return;
+            }
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        stateRef.current = Object.assign(Object.assign({}, initialState), { mode: 'pending', pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, lastTime: performance.now() });
+    }, []);
+    const onPointerMove = react_1.default.useCallback((event) => {
+        if (event.pointerId === stateRef.current.pointerId) {
+            update(event.clientX, event.clientY, event.target);
+        }
+    }, [update]);
+    const finish = react_1.default.useCallback((event, cancelled) => {
+        const state = stateRef.current;
+        if (event.pointerId !== state.pointerId) {
+            return;
+        }
+        const wasDragged = state.mode === 'drag';
+        const element = elementRef.current;
+        const size = element ? (isVertical(anchor) ? element.offsetHeight : element.offsetWidth) : 0;
+        const shouldClose = wasDragged &&
+            !cancelled &&
+            (state.offset > size * CLOSE_RATIO || state.velocity > CLOSE_VELOCITY);
+        stateRef.current = Object.assign({}, initialState);
+        if (!wasDragged) {
+            return;
+        }
+        if (shouldClose) {
+            // The offset is kept: the drawer slides out from where the finger left it.
+            // The own transitions of the drawer are back, the drag turned them off
+            if (element) {
+                element.style.transition = '';
+            }
+            onClose(event);
+            return;
+        }
+        setOffset(0, RETURN_TRANSITION);
+    }, [anchor, elementRef, onClose, setOffset]);
+    const onPointerUp = react_1.default.useCallback((event) => finish(event, false), [finish]);
+    const onPointerCancel = react_1.default.useCallback((event) => finish(event, true), [finish]);
+    if (!enabled) {
+        return {};
+    }
+    return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel };
+};
+exports.default = useSwipeToClose;

package/Skeleton/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export type SkeletonVariant = 'text' | 'rect' | 'circle' | 'pill';
+export type SkeletonProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * `text` — the line of the text, `rect` — the block (an image, a card), `circle` — an avatar,
+     * `pill` — a badge or a status\
+     * **Default:** `text`
+     */
+    readonly variant?: SkeletonVariant;
+    /**
+     * The CSS width; a number is in `em`\
+     * **Default:** `100%`
+     */
+    readonly width?: number | string;
+    /**
+     * The CSS height; a number is in `em`\
+     * **Default:** by the variant
+     */
+    readonly height?: number | string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * `text` — the line of the text, `rect` — the block (an image, a card), `circle` — an avatar,
+     * `pill` — a badge or a status\
+     * **Default:** `text`
+     */
+    readonly variant?: SkeletonVariant;
+    /**
+     * The CSS width; a number is in `em`\
+     * **Default:** `100%`
+     */
+    readonly width?: number | string;
+    /**
+     * The CSS height; a number is in `em`\
+     * **Default:** by the variant
+     */
+    readonly height?: number | string;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Skeleton/index.js

@@ -0,0 +1,69 @@
+"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 size = (value) => (typeof value === 'number' ? `${value}em` : value);
+const DEFAULT_HEIGHT = {
+    text: '0.8em',
+    rect: '3em',
+    circle: '2.5em',
+    pill: '1.6em',
+};
+/**
+ * The solid shape fades in and out: calmer than the moving gradient and does not depend on the width
+ */
+const pulse = (0, react_2.keyframes) `
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+`;
+const StyledSkeleton = styled_1.default.span `
+  display: block;
+  flex-shrink: 0;
+  width: ${({ $width }) => $width};
+  max-width: 100%;
+  height: ${({ $height }) => $height};
+  border-radius: ${({ theme, $variant }) => $variant === 'circle' || $variant === 'pill'
+    ? '999em'
+    : `${theme.shape.radiusFactor * ($variant === 'rect' ? 1.5 : 0.75)}em`};
+  background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
+  animation: ${pulse} 1.6s ease-in-out infinite;
+
+  ${({ $variant, $height }) => $variant === 'circle' &&
+    (0, react_2.css) `
+      aspect-ratio: 1;
+      width: ${$height};
+    `}
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+/**
+ * The placeholder of the content which is loaded: the gray shape which fades in and out.
+ * Shows the structure of the content instead of the spinner
+ */
+const Skeleton = (props, ref) => {
+    const { variant = 'text', width = '100%', height } = props, nativeProps = __rest(props, ["variant", "width", "height"]);
+    return (react_1.default.createElement(StyledSkeleton, Object.assign({ "aria-hidden": true }, nativeProps, { ref: ref, "$variant": variant, "$width": size(width), "$height": height !== undefined ? size(height) : DEFAULT_HEIGHT[variant] })));
+};
+exports.default = react_1.default.forwardRef(Skeleton);

package/esm/Autocomplete/AutocompleteContainer.js

@@ -29,7 +29,7 @@ const AutocompleteMenuList = React.forwardRef((props, ref) => (React.createEleme
 AutocompleteMenuList.displayName = 'AutocompleteMenuList';
 const MENU_OVERRIDES = { List: AutocompleteMenuList };
 const Autocomplete = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', alternativePlacements = ['bottom-fill', 'top-fill'], openOnFocus = true, autoFlip = true, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "alternativePlacements", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom-fill', alternativePlacements = ['bottom-fill', 'top-fill'], openOnFocus = true, autoFlip = true, viewportMargin, positionStrategy, requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, inputValue: controlledInputValue, onInputValueChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearOnBlur", "anchorPos", "alternativePlacements", "openOnFocus", "autoFlip", "viewportMargin", "positionStrategy", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "inputValue", "onInputValueChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = React.useRef(null);
     const fieldInputRef = React.useRef(null);
     const isFocusedRef = React.useRef(false);
@@ -39,10 +39,12 @@ const Autocomplete = React.forwardRef((props, ref) => {
     const overridesMap = React.useMemo(() => ({
         TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || TextField,
     }), [overrides]);
+    const isInputControlled = typeof controlledInputValue === 'string';
     const clear = React.useCallback(() => {
         if (onChange) {
             onChange((multiple ? [] : null));
         }
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange('');
         dispatch(actionSetPartial({
             filteredItems: items,
             inputValue: '',
@@ -51,7 +53,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
             var _a;
             (_a = fieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, 15);
-    }, [dispatch, onChange, items, multiple]);
+    }, [dispatch, onChange, onInputValueChange, items, multiple]);
     /**
      * API
      */
@@ -70,13 +72,27 @@ const Autocomplete = React.forwardRef((props, ref) => {
      */
     const restoreInputValue = React.useCallback(() => {
         // With multiple the field holds only the search text, the selected items are tags
-        const newInputValue = multiple || currentValue === null ? '' : selectedItemToString(currentValue);
+        // The controlled text is the value itself: it stays as it is
+        const newInputValue = isInputControlled
+            ? controlledInputValue
+            : multiple || currentValue === null
+                ? ''
+                : selectedItemToString(currentValue);
         const newFilteredItems = applyFilterForItems(newInputValue, items);
         dispatch(actionSetPartial({
             filteredItems: newFilteredItems,
             inputValue: newInputValue,
         }));
-    }, [currentValue, selectedItemToString, multiple, applyFilterForItems, items, dispatch]);
+    }, [
+        currentValue,
+        selectedItemToString,
+        multiple,
+        applyFilterForItems,
+        items,
+        dispatch,
+        isInputControlled,
+        controlledInputValue,
+    ]);
     const inputKeydownEvent = React.useCallback((event) => {
         var _a, _b, _c, _d, _e;
         if (!isFocusedRef.current) {
@@ -169,14 +185,35 @@ const Autocomplete = React.forwardRef((props, ref) => {
         if (value === currentValue) {
             return;
         }
-        // With multiple the selected items are shown as tags and the search text is kept
-        dispatch(actionSetPartial(multiple
+        // With multiple the selected items are shown as tags and the search text is kept,
+        // the controlled text is not replaced by the text of the item
+        dispatch(actionSetPartial(multiple || isInputControlled
             ? { currentValue: value }
             : {
                 currentValue: value,
                 inputValue: value === null ? '' : selectedItemToString(value),
             }));
-    }, [value, multiple, currentValue, inputValue, dispatch, selectedItemToString]);
+    }, [
+        value,
+        multiple,
+        currentValue,
+        inputValue,
+        dispatch,
+        selectedItemToString,
+        isInputControlled,
+    ]);
+    /**
+     * The controlled text: the field follows `inputValue`
+     */
+    React.useEffect(() => {
+        if (!isInputControlled || controlledInputValue === inputValue) {
+            return;
+        }
+        dispatch(actionSetPartial({
+            inputValue: controlledInputValue,
+            filteredItems: applyFilterForItems(controlledInputValue, items),
+        }));
+    }, [isInputControlled, controlledInputValue, inputValue, dispatch, applyFilterForItems, items]);
     React.useEffect(() => {
         if (currentOpen && menuRef.current) {
             menuRef.current.scrollToFirstSelected();
@@ -267,6 +304,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
         if (typeof onInputChange === 'function') {
             onInputChange(event);
         }
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(event.currentTarget.value);
         // If openOnFocus is false, but value is not empty
         // we should open menu list if is not opened
         if (!openOnFocus && isFocusedRef.current && !currentOpen && filteredItems.length > 0) {
@@ -290,6 +328,7 @@ const Autocomplete = React.forwardRef((props, ref) => {
         filteredItems.length,
         items,
         onInputChange,
+        onInputValueChange,
         onRequestClose,
         onRequestOpen,
         openOnFocus,

package/esm/Badge/BadgeBase.js

@@ -14,14 +14,16 @@ import IconWrapper from './BadgeIconWrapper';
 import TextWrapper from './BadgeTextWrapper';
 import Container from './BadgeContainer';
 import ButtonDelete from './BadgeDeleteButton';
+import Dot from './BadgeDot';
 const BadgeBase = (props, ref) => {
-    const { children, startIcon, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
+    const { children, startIcon, dot = false, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "dot", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
     const clickable = typeof onClick === 'function';
     const overridesMap = React.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || IconWrapper,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || ButtonDelete,
+        Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || Dot,
     }), [overrides]);
     // A clickable badge acts as a button, so it is activated by Enter and Space too
     const handleKeyDown = React.useCallback((event) => {
@@ -41,8 +43,13 @@ const BadgeBase = (props, ref) => {
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     }, [onDelete]);
     return (React.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, ref: ref }),
+        dot && React.createElement(overridesMap.Dot, null),
         typeof startIcon !== 'undefined' && startIcon !== null && (React.createElement(overridesMap.IconWrapper, null, startIcon)),
         React.createElement(overridesMap.TextWrapper, null, children),
-        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
+        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete
+        // the pale soft badge has the colored icon, as the outlined one
+        , { 
+            // the pale soft badge has the colored icon, as the outlined one
+            variant: variant === 'soft' ? 'outlined' : variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
 };
 export default React.forwardRef(BadgeBase);

package/esm/Badge/BadgeDot.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The color of the badge (`--badge-dot-color`), not the color of its text
+ */
+const StyledDot = styled.span `
+  flex: none;
+  width: 0.5em;
+  height: 0.5em;
+  margin-left: 0.55em;
+  border-radius: 50%;
+  background-color: var(--badge-dot-color, currentColor);
+`;
+const BadgeDot = (props, ref) => (React.createElement(StyledDot, Object.assign({ "aria-hidden": true }, props, { ref: ref })));
+export default React.forwardRef(BadgeDot);

package/esm/Badge/BadgeStyled.js

@@ -65,6 +65,23 @@ const getOutlinedColors = (color, theme) => {
         }
     }
 };
+/**
+ * The pale background of the color and the text of the same hue: dark on the light theme,
+ * light on the dark one. `$background` is the color itself
+ */
+const getSoftColors = (color, theme) => {
+    const base = color === 'primary'
+        ? theme.color.accentPrimary
+        : color === 'secondary'
+            ? theme.color.accentSecondary
+            : typeof color === 'undefined' || color === 'default'
+                ? theme.color.textPrimary
+                : parseColor(String(color), theme.color.textPrimary);
+    return {
+        $background: base,
+        $color: theme.isDark ? base.lighten(60) : base.darken(60),
+    };
+};
 /**
  * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
  * must not remount the element, otherwise the focused badge loses the focus
@@ -73,42 +90,62 @@ const StyledBadge = styled(BadgeBase) `
   border-style: solid;
   border-width: ${BORDER_WIDTH};
   border-color: ${({ $background }) => $background.toString()};
+  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
 
-  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
-    ? css `
-          color: ${$color.darken(30).toString()};
-          background-color: transparent;
+  ${({ $variant, $color, $background }) => $variant === 'soft' &&
+    css `
+      color: ${$color.toString()};
+      background-color: ${$background.alpha(0.18).toString()};
+      border-color: transparent;
 
-          &:focus-visible {
-            outline-style: solid;
-            outline-width: 0.14em;
-            outline-color: ${$background.rgbString()};
-          }
-        `
-    : css `
-          color: ${$color.toString()};
-          background-color: ${$background.toString()};
+      &:focus-visible {
+        outline-style: solid;
+        outline-width: 0.14em;
+        outline-color: ${$background.alpha(0.6).toString()};
+      }
+    `}
 
-          &:focus-visible {
-            outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
-        ? theme.color.textPrimary.toString()
-        : theme.color.accentPrimary.toString()};
-          }
-        `}
+  ${({ $variant, $color, $background, theme }) => $variant === 'soft'
+    ? ''
+    : $variant === 'outlined'
+        ? css `
+            color: ${$color.darken(30).toString()};
+            background-color: transparent;
+
+            &:focus-visible {
+              outline-style: solid;
+              outline-width: 0.14em;
+              outline-color: ${$background.rgbString()};
+            }
+          `
+        : css `
+            color: ${$color.toString()};
+            background-color: ${$background.toString()};
+
+            &:focus-visible {
+              outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+            ? theme.color.textPrimary.toString()
+            : theme.color.accentPrimary.toString()};
+            }
+          `}
 
   ${({ $clickable, $variant, $background }) => $clickable &&
     css `
       cursor: pointer;
 
       &:hover {
-        ${$variant === 'outlined'
+        ${$variant === 'soft'
         ? css `
-              background-color: ${$background.darken(20).alpha(0.1).toString()};
+              background-color: ${$background.alpha(0.3).toString()};
             `
-        : css `
-              background-color: ${$background.darken(30).toString()};
-              border-color: ${$background.darken(30).toString()};
-            `}
+        : $variant === 'outlined'
+            ? css `
+                background-color: ${$background.darken(20).alpha(0.1).toString()};
+              `
+            : css `
+                background-color: ${$background.darken(30).toString()};
+                border-color: ${$background.darken(30).toString()};
+              `}
       }
     `}
   ${({ theme }) => themeFocusRing(theme)}
@@ -116,7 +153,11 @@ const StyledBadge = styled(BadgeBase) `
 const BadgeStyled = (props, ref) => {
     const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
     const theme = useTheme();
-    const { $background, $color } = React.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    const { $background, $color } = React.useMemo(() => variant === 'soft'
+        ? getSoftColors(color, theme)
+        : variant === 'outlined'
+            ? getOutlinedColors(color, theme)
+            : getStandardColors(color, theme), [color, variant, theme]);
     return (React.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
 };
 export default React.forwardRef(BadgeStyled);