@revikornmann/muka-ui 0.25.0 → 0.27.0

package/dist/cjs/components/Autocomplete/Autocomplete.css

@@ -0,0 +1,63 @@
+/* Autocomplete — Figma Input Autocomplete (Input field + single-line suggestion Menu).
+   The field reuses the Input styles (.muka-input*); only the menu wiring lives here. */
+
+.muka-autocomplete {
+  min-width: 200px;
+}
+
+/* Covers the field's outer edge so the menu matches its full width. The menu
+   is only open while focused, when the field has the bold border. */
+.muka-autocomplete__menu-anchor {
+  position: absolute;
+  inset: calc(-1 * var(--border-width-bold));
+  z-index: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+  opacity: 0;
+}
+
+/* Keep the field content above the invisible anchor. */
+.muka-autocomplete__field > :not(.muka-autocomplete__menu-anchor) {
+  position: relative;
+  z-index: 1;
+}
+
+/* Figma: the menu is as wide as the field (never below the menu min-width token). */
+.muka-autocomplete__menu {
+  width: var(--radix-dropdown-menu-trigger-width);
+  max-width: calc(100vw - 2rem);
+}
+
+/* Suggestions are single-line; long labels truncate. */
+.muka-autocomplete__menu .muka-menu__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Loading and empty rows: menu-row geometry, not selectable. */
+.muka-autocomplete__status {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  min-height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-size: var(--text-label-md-regular-fontSize);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+.muka-autocomplete__footer {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}

package/dist/cjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,190 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = Autocomplete;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../Icon");
+const Menu_1 = require("../Menu");
+const Spinner_1 = require("../Spinner");
+const accessibility_1 = require("../../utils/accessibility");
+const suggestionList_1 = require("../../utils/suggestionList");
+const usePortalContainer_1 = require("../../utils/usePortalContainer");
+require("../Input/Input.css");
+require("./Autocomplete.css");
+/**
+ * Autocomplete — single-value free-input text field with a suggestion Menu.
+ *
+ * Matches Figma "Input Autocomplete". The consumer supplies the suggestions
+ * (typically fetched as the user types); picking one writes its label into
+ * the field. Typed text that matches nothing is kept as is.
+ *
+ * For multiple values as chips, use `Combobox`.
+ */
+function Autocomplete({ value, onInputChange, options, onSelect, loading = false, minChars = 1, emptyMessage, filter = false, menuFooter, clearable = true, clearLabel = 'Clear', loadingLabel = 'Loading suggestions', resultsLabel = (count) => `${count} suggestions`, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', fullWidth = false, iconLeft, name, id, required = false, className = '', 'aria-label': ariaLabel, onBlur, onFocus, portalContainer, }) {
+    const generatedId = (0, react_1.useId)();
+    const fieldId = id || name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const listboxId = `${fieldId}-listbox`;
+    const inputRef = (0, react_1.useRef)(null);
+    const rootRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    const menuContainer = (0, usePortalContainer_1.usePortalContainer)(portalContainer, rootRef);
+    // Drives the focused treatment: true only while focus is inside the field
+    // or its (portaled) menu (MUK-86).
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    // Closed by a pick, Escape or an outside press; reopens on the next keystroke
+    // or ArrowDown, or when focus comes back into the field.
+    const [dismissed, setDismissed] = (0, react_1.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const query = value.trim();
+    const interactive = !disabled && !readOnly;
+    const visibleOptions = (0, react_1.useMemo)(() => {
+        if (!filter)
+            return options;
+        const q = query.toLowerCase();
+        return options.filter((option) => filter(option, q));
+    }, [options, filter, query]);
+    const hasOptions = visibleOptions.length > 0;
+    const showLoadingRow = loading && !hasOptions;
+    const showEmptyRow = !loading && !hasOptions && Boolean(emptyMessage);
+    const showMenu = interactive &&
+        focused &&
+        !dismissed &&
+        query.length >= minChars &&
+        (hasOptions || showLoadingRow || showEmptyRow);
+    const optionKey = visibleOptions.map((option) => option.value).join('\0');
+    (0, react_1.useEffect)(() => {
+        setActiveIndex((0, suggestionList_1.firstEnabledIndex)(visibleOptions));
+        // Reset only when the set of options changes, not on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [optionKey]);
+    const optionId = (index) => `${listboxId}-option-${index}`;
+    const activeOption = showMenu && hasOptions ? visibleOptions[activeIndex] : undefined;
+    const announcement = !showMenu
+        ? ''
+        : hasOptions
+            ? resultsLabel(visibleOptions.length)
+            : showLoadingRow
+                ? loadingLabel
+                : typeof emptyMessage === 'string'
+                    ? emptyMessage
+                    : '';
+    const showError = error && errorMessage;
+    const describedBy = (0, accessibility_1.mergeIds)(showError ? errorMessageId : helperText ? helperTextId : undefined);
+    const selectOption = (option) => {
+        if (option.disabled)
+            return;
+        onInputChange(option.label, 'select');
+        onSelect?.(option);
+        setDismissed(true);
+        inputRef.current?.focus();
+    };
+    const handleInputChange = (event) => {
+        setDismissed(false);
+        onInputChange(event.target.value, 'input');
+    };
+    const handleClear = () => {
+        onInputChange('', 'clear');
+        setDismissed(false);
+        inputRef.current?.focus();
+    };
+    const handleFocus = () => {
+        if (disabled)
+            return;
+        setFocused(true);
+    };
+    // Moving between the field and the portaled menu keeps focus "inside";
+    // only a real exit drops the focused style, closes the menu and calls onBlur.
+    const handleBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next && (rootRef.current?.contains(next) || menuRef.current?.contains(next))) {
+            return;
+        }
+        setFocused(false);
+        setDismissed(false);
+        onBlur?.(event);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!showMenu) {
+                if (event.key === 'ArrowDown' && dismissed) {
+                    event.preventDefault();
+                    setDismissed(false);
+                }
+                return;
+            }
+            event.preventDefault();
+            setActiveIndex((current) => (0, suggestionList_1.nextEnabledIndex)(visibleOptions, current, event.key === 'ArrowDown' ? 1 : -1));
+            return;
+        }
+        if (event.key === 'Enter') {
+            // Only intercept Enter when it picks a row, so a form can still submit.
+            if (activeOption && !activeOption.disabled) {
+                event.preventDefault();
+                selectOption(activeOption);
+            }
+            return;
+        }
+        if (event.key === 'Escape' && showMenu) {
+            // Close the menu only; don't let Escape also close an enclosing Dialog.
+            event.preventDefault();
+            event.stopPropagation();
+            setDismissed(true);
+        }
+    };
+    const showClear = clearable && interactive && value.length > 0;
+    const iconSize = size === 'sm' ? 'xs' : size === 'lg' ? 'md' : 'sm';
+    const rootClasses = [
+        'muka-input',
+        'muka-autocomplete',
+        fullWidth && 'muka-input--full-width',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const fieldClasses = [
+        'muka-input__field',
+        `muka-input__field--${size}`,
+        'muka-autocomplete__field',
+        focused && 'muka-input__field--focused',
+        error && 'muka-input__field--error',
+        disabled && 'muka-input__field--disabled',
+        iconLeft && 'muka-input__field--has-icon-left',
+        showClear && 'muka-input__field--has-icon-right',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, ref: rootRef, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: fieldId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsxs)(Menu_1.Menu, { trigger: "click", open: showMenu, onOpenChange: (next) => {
+                    // Radix closes on an outside press; it never opens the menu itself.
+                    if (!next)
+                        setDismissed(true);
+                }, modal: false, children: [(0, jsx_runtime_1.jsxs)("div", { className: fieldClasses, onFocus: handleFocus, onBlur: handleBlur, onPointerDown: (event) => {
+                            if (disabled)
+                                return;
+                            // A press on the padding or the clear button must not blur the
+                            // input. Presses on the input keep native caret placement.
+                            if (event.target !== inputRef.current)
+                                event.preventDefault();
+                        }, onClick: (event) => {
+                            if (disabled)
+                                return;
+                            // Focus on click, never on pointerdown: on iOS Safari an early
+                            // focus opens the keyboard and scrolls mid-tap, so the tap lands
+                            // on whatever slid under the finger (MUK-88).
+                            const target = event.target;
+                            if (target === inputRef.current || target.closest('button'))
+                                return;
+                            inputRef.current?.focus();
+                        }, children: [iconLeft && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--left", "aria-hidden": "true", children: iconLeft })), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: fieldId, name: name, type: "text", className: "muka-input__native", value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: onFocus, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, "aria-label": label ? undefined : ariaLabel || placeholder, "aria-invalid": error || undefined, "aria-describedby": describedBy, role: "combobox", "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": showMenu, "aria-activedescendant": activeOption ? optionId(activeIndex) : undefined, autoComplete: "off", autoCorrect: "off", spellCheck: false }), showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-input__clear", "aria-label": clearLabel, tabIndex: -1, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: iconSize }) })), (0, jsx_runtime_1.jsx)(Menu_1.MenuTrigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-autocomplete__menu-anchor", tabIndex: -1, "aria-hidden": "true", disabled: disabled }) })] }), (0, jsx_runtime_1.jsxs)(Menu_1.MenuContent, { align: "start", side: "bottom", sideOffset: 4, className: "muka-autocomplete__menu", onOpenAutoFocus: (event) => {
+                            // Keep the caret in the text field while suggestions are open.
+                            event.preventDefault();
+                            inputRef.current?.focus();
+                        }, onCloseAutoFocus: (event) => event.preventDefault(), loop: false, container: menuContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: menuRef, id: listboxId, role: "listbox", "aria-label": label || ariaLabel || placeholder, onBlur: handleBlur, children: [visibleOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { id: optionId(index), hint: "enter", disabled: option.disabled, highlighted: index === activeIndex, textValue: option.label, onSelect: (event) => {
+                                            event.preventDefault();
+                                            selectOption(option);
+                                        }, children: (0, Menu_1.highlightMenuMatch)(option.label, query) }, `${option.value}-${index}`))), showLoadingRow && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-autocomplete__status", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm", label: loadingLabel }), (0, jsx_runtime_1.jsx)("span", { children: loadingLabel })] })), showEmptyRow && ((0, jsx_runtime_1.jsx)("div", { className: "muka-autocomplete__status", "aria-hidden": "true", children: emptyMessage }))] }), menuFooter && (0, jsx_runtime_1.jsx)("div", { className: "muka-autocomplete__footer", children: menuFooter })] })] }), (0, jsx_runtime_1.jsx)("span", { className: accessibility_1.VISUALLY_HIDDEN_CLASS, "aria-live": "polite", "aria-atomic": "true", children: announcement }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
+}
+exports.default = Autocomplete;
+//# sourceMappingURL=Autocomplete.js.map

package/dist/cjs/components/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sourceRoot":"","sources":["../../../../components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAsJb,oCAuWC;;AA3fD,iCAA2E;AAC3E,kCAA+B;AAC/B,kCAMiB;AACjB,wCAAqC;AACrC,6DAA4E;AAC5E,+DAAiF;AACjF,uEAAoE;AACpE,8BAA4B;AAC5B,8BAA4B;AA6H5B;;;;;;;;GAQG;AACH,SAAgB,YAAY,CAAc,EACxC,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,CAAC,EACZ,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,UAAU,EACV,SAAS,GAAG,IAAI,EAChB,UAAU,GAAG,OAAO,EACpB,YAAY,GAAG,qBAAqB,EACpC,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,cAAc,EAChD,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,MAAM,EACN,OAAO,EACP,eAAe,GACM;IACrB,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,IAAI,IAAI,WAAW,CAAC;IAC1C,MAAM,YAAY,GAAG,GAAG,OAAO,SAAS,CAAC;IACzC,MAAM,cAAc,GAAG,GAAG,OAAO,QAAQ,CAAC;IAC1C,MAAM,SAAS,GAAG,GAAG,OAAO,UAAU,CAAC;IAEvC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,IAAA,uCAAkB,EAAC,eAAe,EAAE,OAAO,CAAC,CAAC;IAEnE,0EAA0E;IAC1E,mCAAmC;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,8EAA8E;IAC9E,yDAAyD;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAElD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC3B,MAAM,WAAW,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAE3C,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,IAAI,CAAC,MAAM;YAAE,OAAO,OAAO,CAAC;QAC5B,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QAC9B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,OAAO,IAAI,CAAC,UAAU,CAAC;IAC9C,MAAM,YAAY,GAAG,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IAEtE,MAAM,QAAQ,GACZ,WAAW;QACX,OAAO;QACP,CAAC,SAAS;QACV,KAAK,CAAC,MAAM,IAAI,QAAQ;QACxB,CAAC,UAAU,IAAI,cAAc,IAAI,YAAY,CAAC,CAAC;IAEjD,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,cAAc,CAAC,IAAA,kCAAiB,EAAC,cAAc,CAAC,CAAC,CAAC;QAClD,mEAAmE;QACnE,uDAAuD;IACzD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,SAAS,WAAW,KAAK,EAAE,CAAC;IACnE,MAAM,YAAY,GAAG,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtF,MAAM,YAAY,GAAG,CAAC,QAAQ;QAC5B,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,UAAU;YACV,CAAC,CAAC,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC;YACrC,CAAC,CAAC,cAAc;gBACd,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,OAAO,YAAY,KAAK,QAAQ;oBAChC,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,EAAE,CAAC;IAEb,MAAM,SAAS,GAAG,KAAK,IAAI,YAAY,CAAC;IACxC,MAAM,WAAW,GAAG,IAAA,wBAAQ,EAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEjG,MAAM,YAAY,GAAG,CAAC,MAA6B,EAAE,EAAE;QACrD,IAAI,MAAM,CAAC,QAAQ;YAAE,OAAO;QAC5B,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACtC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC;QACnB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA0C,EAAE,EAAE;QACvE,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,QAAQ;YAAE,OAAO;QACrB,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,uEAAuE;IACvE,8EAA8E;IAC9E,MAAM,UAAU,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,aAA4B,CAAC;QAChD,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YACjF,OAAO;QACT,CAAC;QACD,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA4C,EAAE,EAAE;QACrE,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACzD,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,SAAS,EAAE,CAAC;oBAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;gBACD,OAAO;YACT,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CACzB,IAAA,iCAAgB,EAAC,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC9E,CAAC;YACF,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,wEAAwE;YACxE,IAAI,YAAY,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;gBAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,YAAY,CAAC,YAAY,CAAC,CAAC;YAC7B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACvC,wEAAwE;YACxE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,SAAS,IAAI,WAAW,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAEpE,MAAM,WAAW,GAAG;QAClB,YAAY;QACZ,mBAAmB;QACnB,SAAS,IAAI,wBAAwB;QACrC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,IAAI,EAAE;QAC5B,0BAA0B;QAC1B,OAAO,IAAI,4BAA4B;QACvC,KAAK,IAAI,0BAA0B;QACnC,QAAQ,IAAI,6BAA6B;QACzC,QAAQ,IAAI,kCAAkC;QAC9C,SAAS,IAAI,mCAAmC;KACjD;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iCAAK,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,aACtC,KAAK,IAAI,CACR,mCAAO,SAAS,EAAE,wCAAwC,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,aAC/E,KAAK,EACL,QAAQ,IAAI,iCAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,mBAAU,IAC1E,CACT,EAED,wBAAC,WAAI,IACH,OAAO,EAAC,OAAO,EACf,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;oBACrB,oEAAoE;oBACpE,IAAI,CAAC,IAAI;wBAAE,YAAY,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC,EACD,KAAK,EAAE,KAAK,aAIZ,iCACE,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACvB,IAAI,QAAQ;gCAAE,OAAO;4BACrB,+DAA+D;4BAC/D,2DAA2D;4BAC3D,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO;gCAAE,KAAK,CAAC,cAAc,EAAE,CAAC;wBAChE,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACjB,IAAI,QAAQ;gCAAE,OAAO;4BACrB,+DAA+D;4BAC/D,iEAAiE;4BACjE,8CAA8C;4BAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAiB,CAAC;4BACvC,IAAI,MAAM,KAAK,QAAQ,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;gCAAE,OAAO;4BACpE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,CAAC,aAEA,QAAQ,IAAI,CACX,iCAAM,SAAS,EAAC,yCAAyC,iBAAa,MAAM,YACzE,QAAQ,GACJ,CACR,EAED,kCACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,gBACN,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,WAAW,kBAC1C,KAAK,IAAI,SAAS,sBACd,WAAW,EAC7B,IAAI,EAAC,UAAU,uBACG,MAAM,mBACT,SAAS,mBACT,QAAQ,2BACA,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,KAAK,EACjB,UAAU,EAAE,KAAK,GACjB,EAED,SAAS,IAAI,CACZ,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,gBACjB,UAAU,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,WAAW,YAEpB,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAE,QAAQ,GAAI,GAC7C,CACV,EAGD,uBAAC,kBAAW,IAAC,OAAO,QAAC,QAAQ,EAAE,QAAQ,YACrC,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,EAClB,QAAQ,EAAE,QAAQ,GAClB,GACU,IACV,EAEN,wBAAC,kBAAW,IACV,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,CAAC,EACb,SAAS,EAAC,yBAAyB,EACnC,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE;4BACzB,+DAA+D;4BAC/D,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,CAAC,EACD,gBAAgB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACnD,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,aAAa,aAExB,iCACE,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,SAAS,gBACF,KAAK,IAAI,SAAS,IAAI,WAAW,EAC7C,MAAM,EAAE,UAAU,aAEjB,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,uBAAC,eAAQ,IAEP,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,EACnB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,KAAK,KAAK,WAAW,EAClC,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4CAClB,KAAK,CAAC,cAAc,EAAE,CAAC;4CACvB,YAAY,CAAC,MAAM,CAAC,CAAC;wCACvB,CAAC,YAEA,IAAA,yBAAkB,EAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAXnC,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,EAAE,CAYtB,CACZ,CAAC,EAED,cAAc,IAAI,CACjB,iCAAK,SAAS,EAAC,2BAA2B,iBAAa,MAAM,aAC3D,uBAAC,iBAAO,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,YAAY,GAAI,EAC1C,2CAAO,YAAY,GAAQ,IACvB,CACP,EAEA,YAAY,IAAI,CACf,gCAAK,SAAS,EAAC,2BAA2B,iBAAa,MAAM,YAC1D,YAAY,GACT,CACP,IACG,EAEL,UAAU,IAAI,gCAAK,SAAS,EAAC,2BAA2B,YAAE,UAAU,GAAO,IAChE,IACT,EAEP,iCAAM,SAAS,EAAE,qCAAqB,eAAY,QAAQ,iBAAa,MAAM,YAC1E,YAAY,GACR,EAEN,SAAS,IAAI,CACZ,8BAAG,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YAC9D,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,8BAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,YAAY,YAC/C,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+var Autocomplete_1 = require("./Autocomplete");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return Autocomplete_1.Autocomplete; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Autocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Autocomplete/index.ts"],"names":[],"mappings":";;;AAAA,+CAKwB;AAJtB,4GAAA,YAAY,OAAA"}

package/dist/cjs/components/Avatar/Avatar.css

@@ -12,12 +12,29 @@
   vertical-align: middle;
   background-color: var(--avatar-color-background-default);
   color: var(--avatar-color-foreground-default);
-  border: var(--avatar-border-width) solid var(--avatar-color-border-default);
   font-family: var(--alias-font-brand-family);
   font-weight: var(--alias-font-brand-weight-semibold);
 }
 
 /* Size variants */
+.muka-avatar--4xs {
+  width: var(--avatar-size-4xs);
+  height: var(--avatar-size-4xs);
+  font-size: var(--avatar-font-size-3xs); /* only used by an AvatarGroup "+N" */
+}
+
+.muka-avatar--3xs {
+  width: var(--avatar-size-3xs);
+  height: var(--avatar-size-3xs);
+  font-size: var(--avatar-font-size-3xs);
+}
+
+.muka-avatar--2xs {
+  width: var(--avatar-size-2xs);
+  height: var(--avatar-size-2xs);
+  font-size: var(--avatar-font-size-2xs);
+}
+
 .muka-avatar--xs {
   width: var(--avatar-size-xs);
   height: var(--avatar-size-xs);
@@ -57,6 +74,20 @@
   border-radius: var(--avatar-radius-square);
 }
 
+.muka-avatar--square.muka-avatar--4xs,
+.muka-avatar--square.muka-avatar--3xs,
+.muka-avatar--square.muka-avatar--2xs {
+  border-radius: var(--avatar-radius-square-sm);
+}
+
+/* 4xs is too small for initials, the fallback icon or a status dot:
+   it shows the picture, or the plain background */
+.muka-avatar--4xs .muka-avatar__initials,
+.muka-avatar--4xs .muka-avatar__fallback,
+.muka-avatar--4xs .muka-avatar__status {
+  display: none;
+}
+
 /* Clickable state */
 .muka-avatar--clickable {
   cursor: pointer;
@@ -160,6 +191,16 @@
   box-sizing: border-box;
 }
 
+.muka-avatar--3xs .muka-avatar__status {
+  width: var(--avatar-status-size-3xs);
+  height: var(--avatar-status-size-3xs);
+}
+
+.muka-avatar--2xs .muka-avatar__status {
+  width: var(--avatar-status-size-2xs);
+  height: var(--avatar-status-size-2xs);
+}
+
 .muka-avatar--xs .muka-avatar__status {
   width: var(--avatar-status-size-xs);
   height: var(--avatar-status-size-xs);
@@ -213,44 +254,17 @@
   background-color: var(--avatar-color-status-away);
 }
 
-/* Avatar Group */
+/* Avatar Group (Figma "Avatar Stack") */
 .muka-avatar-group {
   display: inline-flex;
   align-items: center;
   flex-direction: row;
 }
 
+/* Later avatars sit on top of earlier ones (DOM order); a hovered one comes to the front */
 .muka-avatar-group__item {
   position: relative;
   display: inline-flex;
-  border: 2px solid var(--color-surface-level1);
-  border-radius: inherit;
-}
-
-/* Add border radius to match avatar shape */
-.muka-avatar-group__item .muka-avatar--circle {
-  border-radius: var(--avatar-radius-circle);
-}
-
-.muka-avatar-group__item .muka-avatar--square {
-  border-radius: var(--avatar-radius-square);
-}
-
-.muka-avatar-group__item .muka-avatar {
-  border: none;
-}
-
-/* Spacing variants for avatar group */
-.muka-avatar-group--tight .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-tight));
-}
-
-.muka-avatar-group--normal .muka-avatar-group__item:not(:first-child) {
-  margin-left: calc(var(--avatar-group-spacing-normal));
-}
-
-/* Z-index stacking for overlap effect */
-.muka-avatar-group__item {
   z-index: 0;
 }
 
@@ -258,6 +272,41 @@
   z-index: 10;
 }
 
+/* Grouped avatars get a ring outside their edge, drawn as a shadow so it
+   does not change the avatar's size or the overlap */
+.muka-avatar-group__item .muka-avatar {
+  box-shadow: 0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
+}
+
+/* Overlap. Figma specifies exact values for 48 / 32 / 24px avatars (sm / 2xs / 3xs);
+   other sizes use the same proportions: tight 2/3, compact 1/2, spacious 1/3. */
+.muka-avatar-group--4xs { --muka-avatar-group-size: var(--avatar-size-4xs); }
+.muka-avatar-group--3xs { --muka-avatar-group-size: var(--avatar-size-3xs); }
+.muka-avatar-group--2xs { --muka-avatar-group-size: var(--avatar-size-2xs); }
+.muka-avatar-group--xs { --muka-avatar-group-size: var(--avatar-size-xs); }
+.muka-avatar-group--sm { --muka-avatar-group-size: var(--avatar-size-sm); }
+.muka-avatar-group--md { --muka-avatar-group-size: var(--avatar-size-md); }
+.muka-avatar-group--lg { --muka-avatar-group-size: var(--avatar-size-lg); }
+.muka-avatar-group--xl { --muka-avatar-group-size: var(--avatar-size-xl); }
+
+.muka-avatar-group--tight { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) * 2 / 3); }
+.muka-avatar-group--compact { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 2); }
+.muka-avatar-group--spacious { --muka-avatar-group-overlap: calc(var(--muka-avatar-group-size) / 3); }
+
+.muka-avatar-group--tight.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-sm); }
+.muka-avatar-group--tight.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-2xs); }
+.muka-avatar-group--tight.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-tight-3xs); }
+.muka-avatar-group--compact.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-sm); }
+.muka-avatar-group--compact.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-2xs); }
+.muka-avatar-group--compact.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-compact-3xs); }
+.muka-avatar-group--spacious.muka-avatar-group--sm { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-sm); }
+.muka-avatar-group--spacious.muka-avatar-group--2xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-2xs); }
+.muka-avatar-group--spacious.muka-avatar-group--3xs { --muka-avatar-group-overlap: var(--avatar-group-overlap-spacious-3xs); }
+
+.muka-avatar-group__item:not(:first-child) {
+  margin-left: calc(-1 * var(--muka-avatar-group-overlap));
+}
+
 /* Overflow avatar styling */
 .muka-avatar--overflow {
   background-color: var(--avatar-color-background-default);

package/dist/cjs/components/Avatar/Avatar.js

@@ -26,7 +26,7 @@ function getInitials(name) {
  * 4. Default icon - Generic user icon
  *
  * Features:
- * - 5 sizes: xs, sm, md, lg, xl
+ * - 8 sizes: 4xs (16px) to xl (112px)
  * - 2 shapes: circle, square
  * - Status indicators: online, offline, busy, away
  * - Loading and error states

package/dist/cjs/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Avatar/AvatarGroup.js

@@ -40,12 +40,13 @@ require("./Avatar.css");
 /**
  * AvatarGroup Component
  *
- * Displays a horizontal stack of avatars with overlap.
+ * Displays a horizontal stack of avatars with overlap (Figma "Avatar Stack").
+ * Each avatar gets a ring in the surface colour so the overlap reads clearly.
  * When there are more avatars than `max`, shows remaining count as "+N".
  *
  * Features:
  * - Configurable max visible avatars
- * - Two spacing modes: tight, normal
+ * - Three spacing modes: tight, compact, spacious
  * - Size propagation to child avatars
  * - Overflow counter display
  *
@@ -53,7 +54,7 @@ require("./Avatar.css");
  * - Uses role="group" with aria-label
  * - Overflow count includes accessible label
  */
-const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'normal', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
+const AvatarGroup = ({ children, max = 5, size = 'md', spacing = 'compact', className = '', 'aria-label': ariaLabel = 'Avatar group', ...props }) => {
     const childArray = react_1.Children.toArray(children);
     const totalCount = childArray.length;
     const visibleCount = Math.min(max, totalCount);

package/dist/cjs/components/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,wBAAsB;AAsBtB;;;;;;;;;;;;;;;GAeG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,gCAAiB,SAAS,EAAC,yBAAyB,YACjD,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,gCAAK,SAAS,EAAC,yBAAyB,YACtC,gCACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,kCAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,WAAW,eAoEtB;AAEF,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,wBAAsB;AAyBtB;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,EACR,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GAAG,cAAc,EACxC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;IACrC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,GAAG,GAAG,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IAE1D,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,sBAAsB,OAAO,EAAE;QAC/B,sBAAsB,IAAI,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,eAAe,GAAG;QACtB,aAAa;QACb,uBAAuB;QACvB,gBAAgB,IAAI,EAAE;QACtB,qBAAqB;KACtB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAC,OAAO,gBACA,SAAS,KACjB,KAAK,aAER,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBACpC,IAAI,CAAC,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACjC,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,sDAAsD;gBACtD,OAAO,CACL,gCAAiB,SAAS,EAAC,yBAAyB,YACjD,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;wBACzB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI;wBAC9B,GAAG,KAAK,CAAC,KAAK;qBACY,CAAC,IAJrB,KAAK,CAKT,CACP,CAAC;YACJ,CAAC,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CACpB,gCAAK,SAAS,EAAC,yBAAyB,YACtC,gCACE,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAC,KAAK,gBACE,GAAG,aAAa,SAAS,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEhF,kCAAM,SAAS,EAAC,6BAA6B,kBACzC,aAAa,IACV,GACH,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,WAAW,eAoEtB;AAEF,kBAAe,mBAAW,CAAC"}

package/dist/cjs/components/Button/Button.css

@@ -116,6 +116,39 @@
   opacity: 1; /* Remove opacity since we have proper disabled tokens */
 }
 
+/* Destructive variant - primary's structure on the solid error fill, for
+   irreversible actions. Hover and pressed step away from the label color, so
+   contrast never drops (darker in light themes, lighter in dark themes).
+   Disabled is neutral grey rather than primary's brand-tinted fill. */
+.muka-button--destructive {
+  background-color: var(--button-color-destructive-background-default);
+  color: var(--button-color-destructive-foreground-default);
+  box-shadow: var(--button-color-destructive-shadow-default);
+}
+
+.muka-button--destructive:hover:not(:disabled) {
+  background-color: var(--button-color-destructive-background-hover);
+  color: var(--button-color-destructive-foreground-hover);
+  box-shadow: var(--button-color-destructive-shadow-hover);
+}
+
+.muka-button--destructive:active:not(:disabled),
+.muka-button--destructive.muka-button--pressed:not(:disabled),
+.muka-button--destructive[data-state="open"]:not(:disabled),
+.muka-button--destructive[aria-pressed="true"]:not(:disabled) {
+  background-color: var(--button-color-destructive-background-pressed);
+  color: var(--button-color-destructive-foreground-pressed);
+  box-shadow: var(--button-color-destructive-shadow-pressed);
+}
+
+.muka-button--destructive:disabled {
+  background-color: var(--button-color-destructive-background-disabled);
+  color: var(--button-color-destructive-foreground-disabled);
+  box-shadow: var(--button-color-destructive-shadow-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* Secondary variant - supporting actions, no border, only bottom inner shadow */
 .muka-button--secondary {
   background-color: var(--button-color-secondary-background-default);

package/dist/cjs/components/Button/Button.js

@@ -10,8 +10,8 @@ require("./Button.css");
  * Button Component
  *
  * Built using the Muka design token system with support for:
- * - 5 variants: primary, secondary, tertiary, ghost, muted
- * - 3 sizes: sm, md, lg
+ * - 6 variants: primary, secondary, tertiary, ghost, muted, destructive
+ * - 4 sizes: sm, md, lg, xl
  * - Interactive states: default, hover, pressed, disabled
  * - Icons with flexible positioning (left, right, or both)
  * - Icon-only buttons (label can be hidden)

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

@@ -6,6 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Chip_1 = require("../Chip");
 const Menu_1 = require("../Menu");
+const suggestionList_1 = require("../../utils/suggestionList");
+const usePortalContainer_1 = require("../../utils/usePortalContainer");
 require("./Combobox.css");
 const defaultFilter = (option, query) => {
     if (!query)
@@ -13,21 +15,6 @@ const defaultFilter = (option, query) => {
     const hay = `${option.label} ${option.caption ?? ''}`.toLowerCase();
     return hay.includes(query);
 };
-const firstEnabledIndex = (items) => {
-    const index = items.findIndex((item) => !item.disabled);
-    return index === -1 ? 0 : index;
-};
-const nextEnabledIndex = (items, from, direction) => {
-    if (items.length === 0)
-        return 0;
-    let index = from;
-    for (let step = 0; step < items.length; step += 1) {
-        index = (index + direction + items.length) % items.length;
-        if (!items[index]?.disabled)
-            return index;
-    }
-    return from;
-};
 /**
  * Combobox — free-input multi-value field with chips and a suggestion Menu.
  *
@@ -49,10 +36,7 @@ const Combobox = ({ value, onChange, options = [], placeholder = 'Hint text', la
     const menuRef = (0, react_1.useRef)(null);
     // A native <dialog> opened with showModal() lives in the top layer and makes
     // everything outside it inert, so a body-level portal would be unreachable.
-    const [dialogContainer, setDialogContainer] = (0, react_1.useState)(null);
-    (0, react_1.useLayoutEffect)(() => {
-        setDialogContainer(rootRef.current?.closest('dialog') ?? null);
-    }, []);
+    const menuContainer = (0, usePortalContainer_1.usePortalContainer)(portalContainer, rootRef);
     const [query, setQuery] = (0, react_1.useState)('');
     const [open, setOpen] = (0, react_1.useState)(false);
     // Drives the focused treatment: true only while focus is inside the field
@@ -107,7 +91,7 @@ const Combobox = ({ value, onChange, options = [], placeholder = 'Hint text', la
         suggestions.length > 0;
     const suggestionKey = suggestions.map((item) => item.id).join('\0');
     (0, react_1.useEffect)(() => {
-        setActiveIndex(firstEnabledIndex(suggestions));
+        setActiveIndex((0, suggestionList_1.firstEnabledIndex)(suggestions));
     }, [suggestionKey, suggestions]);
     const activeSuggestion = suggestions[activeIndex];
     const showError = error && errorMessage;
@@ -171,14 +155,14 @@ const Combobox = ({ value, onChange, options = [], placeholder = 'Hint text', la
             if (!showSuggestions)
                 return;
             event.preventDefault();
-            setActiveIndex((current) => nextEnabledIndex(suggestions, current, 1));
+            setActiveIndex((current) => (0, suggestionList_1.nextEnabledIndex)(suggestions, current, 1));
             return;
         }
         if (event.key === 'ArrowUp') {
             if (!showSuggestions)
                 return;
             event.preventDefault();
-            setActiveIndex((current) => nextEnabledIndex(suggestions, current, -1));
+            setActiveIndex((current) => (0, suggestionList_1.nextEnabledIndex)(suggestions, current, -1));
             return;
         }
         if (event.key === 'Enter') {
@@ -241,7 +225,7 @@ const Combobox = ({ value, onChange, options = [], placeholder = 'Hint text', la
                             // Keep the blinking caret in the text field while suggestions open.
                             event.preventDefault();
                             inputRef.current?.focus();
-                        }, onCloseAutoFocus: (event) => event.preventDefault(), loop: false, container: portalContainer ?? dialogContainer, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, id: listboxId, role: "listbox", "aria-label": label || placeholder, onBlur: handleBlur, children: suggestions.map((suggestion, index) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { id: suggestion.id, hint: "enter", disabled: suggestion.disabled, highlighted: index === activeIndex, textValue: suggestion.label, onSelect: (event) => {
+                        }, onCloseAutoFocus: (event) => event.preventDefault(), loop: false, container: menuContainer, children: (0, jsx_runtime_1.jsx)("div", { ref: menuRef, id: listboxId, role: "listbox", "aria-label": label || placeholder, onBlur: handleBlur, children: suggestions.map((suggestion, index) => ((0, jsx_runtime_1.jsx)(Menu_1.MenuItem, { id: suggestion.id, hint: "enter", disabled: suggestion.disabled, highlighted: index === activeIndex, textValue: suggestion.label, onSelect: (event) => {
                                     event.preventDefault();
                                     if (!suggestion.disabled)
                                         commitValue(suggestion.value);