@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/cjs/components/Combobox/internal/ComboboxInput.js

@@ -0,0 +1,81 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var akselIcons = require('@navikt/aksel-icons');
+var cl = require('clsx/lite');
+var react = require('react');
+var paragraph = require('../../paragraph/paragraph.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var ComboboxIdContext = require('../ComboboxIdContext.js');
+var omit = require('../omit/omit.js');
+var utilities = require('../utilities.js');
+var ComboboxChips = require('./ComboboxChips.js');
+var ComboboxClearButton = require('./ComboboxClearButton.js');
+
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    const idDispatch = ComboboxIdContext.useComboboxIdDispatch();
+    const clearButtonRef = react.useRef(null);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const setActiveIndex = (id) => {
+        idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
+    };
+    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size, } = context;
+    const mergedRefs = react$1.useMergeRefs([forwareddRef, inputRef]);
+    // onChange function for the input
+    const onChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        setActiveIndex(0);
+        // check if input value is the same as a label, if so, select it
+        for (const option of Object.values(options)) {
+            if (option.label.toLowerCase() === value.toLowerCase()) {
+                /* if option is already selected, discard selecting it, since it would de-select */
+                if (selectedOptions[utilities.prefix(option.value)])
+                    continue;
+                handleSelectOption({ option });
+            }
+        }
+    };
+    const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
+    /* Props from floating-ui */
+    const props = getReferenceProps({
+        ref: refs?.setReference,
+        role: null,
+        'aria-controls': null,
+        'aria-expanded': null,
+        'aria-haspopup': null,
+        /* If we click the wrapper, toggle open, set index to first option, and focus the input */
+        onClick(event) {
+            if (disabled)
+                return;
+            if (readOnly)
+                return;
+            if (clearButtonRef.current?.contains(event.target))
+                return;
+            setOpen(!open);
+            setActiveIndex(0);
+            inputRef.current?.focus();
+        },
+        /* Handles list navigation */
+        onKeyDown: handleKeyDown,
+        // preventDefault on keydown to avoid sending in form
+        onKeyPress(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        },
+    });
+    return (jsxRuntime.jsx(paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(paragraph.Paragraph, { "data-size": size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+                                    onChange(e);
+                                    !open && setOpen(true);
+                                    rest.onChange?.(e);
+                                } }) })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton, { ref: clearButtonRef }), jsxRuntime.jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', height: '1.5em', width: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', height: '1.5em', width: '1.5em' })) })] }) }));
+};
+ComboboxInput.displayName = 'ComboboxInput';
+
+module.exports = ComboboxInput;

package/dist/cjs/components/Combobox/internal/ComboboxLabel.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var cl = require('clsx/lite');
+var label = require('../../label/label.js');
+var paragraph = require('../../paragraph/paragraph.js');
+
+const ComboboxLabel = ({ label: label$1, description, hideLabel, size, readOnly, formFieldProps, }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label$1 && (jsxRuntime.jsxs(label.Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label$1] })), description && (jsxRuntime.jsx(paragraph.Paragraph, { asChild: true, "data-size": size, children: jsxRuntime.jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+};
+ComboboxLabel.displayName = 'ComboboxLabel';
+
+module.exports = ComboboxLabel;

package/dist/cjs/components/Combobox/internal/ComboboxNative.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utilities = require('../utilities.js');
+
+const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
+    const VALUE = Object.keys(selectedOptions).map((key) => utilities.removePrefix(key));
+    return (jsxRuntime.jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsxRuntime.jsx("option", { value: value }, value))) }));
+};
+ComboboxNative.displayName = 'ComboboxNative';
+
+module.exports = ComboboxNative;

package/dist/cjs/components/Combobox/omit/omit.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+/**
+ * @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
+ *
+ * Returns a partial copy of an object omitting the keys specified.
+ * @param {Array} names an array of String property names to omit from the new object
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with properties from `names` not on it.
+ * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
+ */
+const omit = (names, obj) => {
+    const result = {};
+    const index = {};
+    let idx = 0;
+    const len = names.length;
+    while (idx < len) {
+        index[names[idx]] = 1;
+        idx += 1;
+    }
+    for (const prop in obj) {
+        if (!Object.hasOwn(index, prop)) {
+            result[prop] = obj[prop];
+        }
+    }
+    return result;
+};
+
+exports.omit = omit;

package/dist/cjs/components/Combobox/useCombobox.js

@@ -0,0 +1,123 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var Option = require('./Option/Option.js');
+var utilities = require('./utilities.js');
+
+const isOption = (option) => !!option;
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue, }) {
+    const filterCallback = react.useCallback(filter, [filter]);
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = react.useMemo(() => {
+        const allChildren = react.Children.toArray(children);
+        const result = allChildren.reduce((acc, child) => {
+            if (Option.isComboboxOption(child)) {
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (utilities.isInteractiveComboboxCustom(child)) {
+                    const childElement = child;
+                    acc.interactiveChildren.push(childElement);
+                    if (!childElement.props.id) {
+                        throw new Error('If ComboboxCustom is interactive, it must have an id');
+                    }
+                    acc.customIds.push(childElement.props.id);
+                }
+            }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
+        });
+        return result;
+    }, [children]);
+    const options = react.useMemo(() => {
+        const values = [];
+        const allOptions = {};
+        optionsChildren.map((child) => {
+            const props = child.props;
+            let label = props.displayValue || '';
+            if (!props.displayValue) {
+                let childrenLabel = '';
+                // go over children and find all strings
+                react.Children.forEach(props.children, (child) => {
+                    if (typeof child === 'string') {
+                        childrenLabel += child;
+                    }
+                    else {
+                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                    }
+                });
+                label = childrenLabel;
+            }
+            if (values.includes(props.value)) {
+                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+            }
+            values.push(props.value);
+            allOptions[utilities.prefix(String(props.value))] = {
+                value: String(props.value),
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
+            return null;
+        });
+        return allOptions;
+    }, [optionsChildren]);
+    const preSelectedOptions = react.useMemo(() => (initialValue?.map((key) => {
+        return utilities.prefix(key);
+    }) || []).reduce((acc, value) => {
+        const option = options[value];
+        if (isOption(option)) {
+            acc[value] = option;
+        }
+        return acc;
+    }, {}), [initialValue, options]);
+    const [selectedOptions, setSelectedOptions] = react.useState(preSelectedOptions);
+    const { filteredOptions, filteredOptionsChildren } = react.useMemo(() => {
+        const filteredOptions = [];
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
+            /* If we have a selected value in single mode and the input matches an option, return all children */
+            if (!multiple && Object.keys(selectedOptions).length === 1) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (multiple && selectedOptions[option]) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (filterCallback(inputValue, options[option])) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            return null;
+        })
+            .filter((child) => child);
+        return { filteredOptions, filteredOptionsChildren };
+    }, [
+        filterCallback,
+        inputValue,
+        multiple,
+        options,
+        optionsChildren,
+        selectedOptions,
+    ]);
+    return {
+        filteredOptionsChildren,
+        filteredOptions,
+        restChildren,
+        options,
+        customIds,
+        selectedOptions,
+        interactiveChildren,
+        setSelectedOptions,
+    };
+}
+
+exports.useCombobox = useCombobox;

package/dist/cjs/components/Combobox/useComboboxKeyboard.js

@@ -0,0 +1,79 @@
+'use client';
+'use strict';
+
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('react');
+require('@digdir/designsystemet-web');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    // handle keyboard navigation in the list
+    const handleKeyDownFunc = (event) => {
+        if (readOnly || disabled)
+            return;
+        if (!event)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (open)
+                    break;
+                setOpen(true);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                if (activeIndex !== 0)
+                    break;
+                setOpen(false);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                // ignore if it is closed
+                if (!open)
+                    break;
+                // check if we are in the custom components
+                if (activeIndex <= interactiveChildren.length - 1) {
+                    const selectedComponent = interactiveChildren[activeIndex];
+                    if (selectedComponent.props.onSelect) {
+                        selectedComponent?.props.onSelect();
+                        return;
+                    }
+                }
+                // if we are in the options, find the actual index
+                const valueIndex = activeIndex - interactiveChildren.length;
+                const option = filteredOptions[valueIndex];
+                handleSelectOption({ option: options[option] });
+                break;
+            }
+            case 'Backspace':
+                // if we are in single mode, we need to set selectedOptions to empty
+                if (!multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                    break;
+                }
+                if (inputValue === '' && multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    /* Remove last option, and use handleSelectOption */
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounceCallback.useDebounceCallback(handleKeyDownFunc, 20);
+    return handleKeyDown;
+};
+
+exports.useComboboxKeyboard = useComboboxKeyboard;

package/dist/cjs/components/Combobox/useFloatingCombobox.js

@@ -0,0 +1,76 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var reactDom = require('react-dom');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+
+const useFloatingCombobox = ({ listRef, }) => {
+    const [open, setOpen] = react.useState(false);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const dispatch = ComboboxIdContext.useComboboxIdDispatch();
+    // floating UI
+    const { refs, floatingStyles, context } = react$1.useFloating({
+        open,
+        onOpenChange: (newOpen) => {
+            if (!newOpen)
+                dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
+            reactDom.flushSync(() => {
+                if (refs.floating.current && !newOpen) {
+                    refs.floating.current.scrollTop = 0;
+                }
+                setTimeout(() => {
+                    setOpen(newOpen);
+                }, 1);
+            });
+        },
+        whileElementsMounted: (reference, floating, update) => {
+            react$1.autoUpdate(reference, floating, update);
+            return () => {
+                floating.scrollTop = 0;
+            };
+        },
+        middleware: [
+            react$1.flip({ padding: 10 }),
+            react$1.size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `${rects.reference.width}px`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            react$1.offset(10),
+        ],
+    });
+    const role = react$1.useRole(context, { role: 'listbox' });
+    const dismiss = react$1.useDismiss(context);
+    const listNav = react$1.useListNavigation(context, {
+        listRef,
+        activeIndex,
+        virtual: true,
+        scrollItemIntoView: true,
+        enabled: open,
+        focusItemOnHover: true,
+        onNavigate: (index) => {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
+        },
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([role, dismiss, listNav]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    };
+};
+
+exports.useFloatingCombobox = useFloatingCombobox;

package/dist/cjs/components/Combobox/useFormField/FieldsetContext.js

@@ -0,0 +1,8 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const FieldsetContext = react.createContext(null);
+
+exports.FieldsetContext = FieldsetContext;

package/dist/cjs/components/Combobox/useFormField/useFormField.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var cl = require('clsx/lite');
+var react = require('react');
+var FieldsetContext = require('./FieldsetContext.js');
+
+/**
+ * Handles props and their state for various form-fields in context with Fieldset
+ */
+const useFormField = (props, prefix) => {
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
+    const randomId = react.useId();
+    const id = props.id ?? `${prefix}-${randomId}`;
+    const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+    const descriptionId = `${prefix}-description-${randomId}`;
+    const size = props.size ?? fieldset?.size ?? 'md';
+    const disabled = fieldset?.disabled || props?.disabled;
+    const hasError = !disabled && !!(props.error || fieldset?.error);
+    return {
+        hasError,
+        errorId,
+        descriptionId,
+        size,
+        inputProps: {
+            id,
+            disabled,
+            'aria-invalid': hasError ? true : undefined,
+            'aria-describedby': cl(props['aria-describedby'], !!props?.description &&
+                typeof props?.description === 'string' &&
+                descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || undefined,
+        },
+    };
+};
+
+exports.useFormField = useFormField;

package/dist/cjs/components/Combobox/utilities.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var Custom = require('./Custom.js');
+
+function isComboboxCustom(child) {
+    return react.isValidElement(child) && child.type === Custom.ComboboxCustom;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+const INTERNAL_OPTION_PREFIX = 'internal-option-';
+/**
+ * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+ * @param value
+ * @returns
+ */
+const prefix = (value) => {
+    return INTERNAL_OPTION_PREFIX + value;
+};
+const removePrefix = (value) => {
+    return value.slice(INTERNAL_OPTION_PREFIX.length);
+};
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+exports.isComboboxCustom = isComboboxCustom;
+exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
+exports.prefix = prefix;
+exports.removePrefix = removePrefix;
+exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/alert/alert.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = react.forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
+});
+
+exports.Alert = Alert;

package/dist/cjs/components/avatar/avatar.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe" initials="JD" />
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, 'data-tooltip': dataTooltip, variant = 'circle', className, children, initials, asChild, ...rest }, ref) {
+    const OuterComponent = asChild ? reactSlot.Slot : 'span';
+    const useSlot = children && typeof children !== 'string';
+    const textChild = children && typeof children === 'string';
+    const Component = useSlot ? reactSlot.Slot : react.Fragment;
+    return (jsxRuntime.jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: asChild ? undefined : 'img', "aria-label": ariaLabel || dataTooltip, "data-tooltip": dataTooltip, tabIndex: dataTooltip ? 0 : undefined, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot && !asChild ? { 'aria-hidden': true } : {}), children: textChild ? jsxRuntime.jsx("span", { children: children }) : children }) }));
+});
+
+exports.Avatar = Avatar;

package/dist/cjs/components/avatar-stack/avatar-stack.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+const EXPERIMENTAL_AvatarStack = react.forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
+    const style = {
+        ...(rest.style || {}),
+        '--dsc-avatar-stack-gap': gap !== undefined ? `${gap}` : undefined,
+        '--dsc-avatar-stack-size': avatarSize ? `${avatarSize}` : undefined,
+        '--dsc-avatar-stack-overlap': overlap !== undefined ? `${overlap}` : undefined,
+        '--dsc-avatar-count': expandable === 'fixed' ? react.Children.count(children) : undefined,
+    };
+    return (jsxRuntime.jsx("span", { tabIndex: rest.tabIndex !== undefined ? rest.tabIndex : expandable ? 0 : undefined, ref: ref, className: cl(`ds-avatar-stack`, className), style: style, "data-expandable": expandable, "data-suffix": suffix, ...rest, children: children }));
+});
+
+exports.EXPERIMENTAL_AvatarStack = EXPERIMENTAL_AvatarStack;

package/dist/cjs/components/badge/badge-position.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
+const BadgePosition = react.forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+exports.BadgePosition = BadgePosition;

package/dist/cjs/components/badge/badge.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ *
+ * @example with children
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
+ * </Badge>
+ */
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, variant = 'base', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
+});
+
+exports.Badge = Badge;

package/dist/cjs/components/badge/index.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var badge = require('./badge.js');
+var badgePosition = require('./badge-position.js');
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
+const Badge = Object.assign(badge.Badge, { Position: badgePosition.BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+exports.BadgePosition = badgePosition.BadgePosition;
+exports.Badge = Badge;