@revikornmann/muka-ui 0.18.0 → 0.19.0

package/dist/esm/components/Combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA2C,MAAM,YAAY,CAAC"}

package/dist/esm/components/DropdownSelect/DropdownSelect.css

@@ -0,0 +1,225 @@
+/* DropdownSelect — Figma Dropdown Menu form field (Menu + chips) */
+
+.muka-dropdown-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 200px;
+}
+
+.muka-dropdown-select--full-width {
+  width: 100%;
+}
+
+.muka-dropdown-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-dropdown-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-dropdown-select__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-dropdown-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  padding: var(--spacing-2);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem));
+  text-align: left;
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-dropdown-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+.muka-dropdown-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem));
+}
+
+.muka-dropdown-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-dropdown-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--spacing-2) - 1px);
+  padding-right: calc(var(--spacing-2) + var(--size-2xl, 2rem) - 1px);
+}
+
+.muka-dropdown-select__field--sm.muka-dropdown-select__field--focused:not(.muka-dropdown-select__field--disabled) {
+  padding-right: calc(var(--spacing-2) + var(--size-xl, 1.5rem) - 1px);
+}
+
+.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
+  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+}
+
+.muka-dropdown-select__field--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-dropdown-select__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  /* Let empty-field / value clicks reach the full-field MenuTrigger underneath. */
+  pointer-events: none;
+}
+
+.muka-dropdown-select__placeholder {
+  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);
+  padding-inline: var(--spacing-1);
+}
+
+.muka-dropdown-select__value {
+  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);
+  padding-inline: var(--spacing-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-dropdown-select__chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: flex-start;
+  min-width: 0;
+  /* Chip remove controls must remain clickable above the field hit target. */
+  pointer-events: auto;
+}
+
+.muka-dropdown-select__field--multiline {
+  align-items: flex-start;
+  min-height: 7rem;
+}
+
+.muka-dropdown-select__menu-button {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: auto;
+  height: auto;
+  padding: 0;
+  padding-right: var(--spacing-2);
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-dropdown-select__field--multiline .muka-dropdown-select__menu-button {
+  align-items: flex-start;
+  padding-top: calc(var(--spacing-2) + 8px);
+}
+
+.muka-dropdown-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__chevron .muka-icon,
+.muka-dropdown-select__menu-button:hover .muka-dropdown-select__chevron,
+.muka-dropdown-select__menu-button:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-dropdown-select__field--sm .muka-dropdown-select__chevron {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+.muka-dropdown-select__menu-button:focus-visible {
+  outline: 2px solid var(--color-border-focus, var(--color-action-default));
+  outline-offset: 2px;
+}
+
+.muka-dropdown-select__helper {
+  margin: 0;
+  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);
+}
+
+.muka-dropdown-select__error {
+  margin: 0;
+  color: var(--color-state-error-foreground);
+  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);
+}
+
+.muka-dropdown-select__menu {
+  /* Uses Menu min-width (280px); grows with long labels; left-aligned to the field. */
+}

package/dist/esm/components/DropdownSelect/DropdownSelect.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Chip } from '../Chip';
+import { Icon } from '../Icon';
+import { Menu, MenuCheckboxItem, MenuContent, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuTrigger, } from '../Menu';
+import './DropdownSelect.css';
+/**
+ * DropdownSelect — form select built on Menu (Figma "Dropdown Menu").
+ *
+ * Fixed options with optional search + scrollbar. Single-select shows the
+ * chosen label; multi-select renders dismissible chips and trailing checkmarks
+ * in the menu.
+ *
+ * Not the native `<Select>` — use that for simple platform-native fields.
+ * Not free-text — use `Combobox` for creatable chip input.
+ */
+export const DropdownSelect = ({ options, value, onValueChange, multiple = false, placeholder = 'Select item...', label, helperText, error = false, errorMessage, disabled = false, size = 'md', fullWidth = false, required = false, searchable = true, searchPlaceholder = 'Search', scrollbar = false, open: openProp, onOpenChange, defaultOpen, name, id, 'aria-label': ariaLabel, className = '', }) => {
+    const generatedId = useId();
+    const fieldId = id || name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const fieldRef = useRef(null);
+    const [menuWidth, setMenuWidth] = useState(undefined);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    useEffect(() => {
+        const el = fieldRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const update = () => setMenuWidth(el.offsetWidth);
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const handleOpenChange = (next) => {
+        if (disabled)
+            return;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    const selectedValues = useMemo(() => {
+        if (multiple) {
+            return Array.isArray(value) ? value : value ? [value] : [];
+        }
+        if (typeof value === 'string' && value)
+            return [value];
+        return [];
+    }, [multiple, value]);
+    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+    const selectedOptions = useMemo(() => selectedValues
+        .map((v) => options.find((o) => o.value === v))
+        .filter((o) => Boolean(o)), [options, selectedValues]);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const rootClasses = [
+        'muka-dropdown-select',
+        fullWidth && 'muka-dropdown-select--full-width',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const fieldClasses = [
+        'muka-dropdown-select__field',
+        `muka-dropdown-select__field--${size}`,
+        open && 'muka-dropdown-select__field--focused',
+        error && 'muka-dropdown-select__field--error',
+        disabled && 'muka-dropdown-select__field--disabled',
+        selectedOptions.length > 1 && 'muka-dropdown-select__field--multiline',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const removeValue = (next) => {
+        if (!multiple) {
+            onValueChange?.('');
+            return;
+        }
+        onValueChange?.(selectedValues.filter((v) => v !== next));
+    };
+    const toggleMulti = (optionValue, checked) => {
+        if (checked) {
+            if (selectedSet.has(optionValue))
+                return;
+            onValueChange?.([...selectedValues, optionValue]);
+            return;
+        }
+        onValueChange?.(selectedValues.filter((v) => v !== optionValue));
+    };
+    const singleValue = !multiple ? selectedValues[0] ?? '' : undefined;
+    return (_jsxs("div", { className: rootClasses, children: [label && (_jsxs("label", { className: `muka-dropdown-select__label muka-dropdown-select__label--${size}`, htmlFor: fieldId, children: [label, required && (_jsxs("span", { className: "muka-dropdown-select__required", "aria-hidden": "true", children: [' ', "*"] }))] })), _jsxs(Menu, { trigger: "click", open: open, onOpenChange: handleOpenChange, defaultOpen: defaultOpen, modal: false, children: [_jsxs("div", { ref: fieldRef, className: fieldClasses, children: [_jsx(MenuTrigger, { asChild: true, disabled: disabled, children: _jsx("button", { type: "button", id: fieldId, name: name, className: "muka-dropdown-select__menu-button", disabled: disabled, "aria-haspopup": "menu", "aria-expanded": open, "aria-describedby": describedBy, "aria-label": ariaLabel || label || placeholder, children: _jsx("span", { className: "muka-dropdown-select__chevron", children: _jsx(Icon, { name: "arrow-drop-up-down", size: size === 'sm' ? 'xs' : 'md' }) }) }) }), _jsx("div", { className: "muka-dropdown-select__content", children: selectedOptions.length === 0 ? (_jsx("span", { className: "muka-dropdown-select__placeholder", children: placeholder })) : multiple ? (_jsx("span", { className: "muka-dropdown-select__chips", children: selectedOptions.map((option) => (_jsx(Chip, { variant: "info", size: "md", removeButtonLabel: `Remove ${option.label}`, onRemove: (e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            removeValue(option.value);
+                                        }, children: option.label }, option.value))) })) : (_jsx("span", { className: "muka-dropdown-select__value", children: selectedOptions[0].label })) })] }), _jsxs(MenuContent, { align: "start", side: "bottom", sideOffset: 4, searchable: searchable, scrollbar: scrollbar, className: "muka-dropdown-select__menu", style: menuWidth && menuWidth > 280
+                            ? { minWidth: menuWidth }
+                            : undefined, onCloseAutoFocus: (event) => event.preventDefault(), children: [searchable && (_jsx(MenuSearch, { placeholder: searchPlaceholder, size: size === 'sm' ? 'sm' : 'md' })), multiple ? (options.map((option) => (_jsx(MenuCheckboxItem, { checked: selectedSet.has(option.value), onCheckedChange: (checked) => toggleMulti(option.value, checked), disabled: option.disabled, indicator: "trailing", textValue: option.label, children: option.label }, option.value)))) : (_jsx(MenuRadioGroup, { value: singleValue, onValueChange: (next) => onValueChange?.(next), children: options.map((option) => (_jsx(MenuRadioItem, { value: option.value, disabled: option.disabled, indicator: "check", textValue: option.label, children: option.label }, option.value))) }))] })] }), showError && (_jsx("p", { className: "muka-dropdown-select__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-dropdown-select__helper", id: helperTextId, children: helperText }))] }));
+};
+export default DropdownSelect;
+//# sourceMappingURL=DropdownSelect.js.map

package/dist/esm/components/DropdownSelect/DropdownSelect.js.map

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

package/dist/esm/components/DropdownSelect/index.js

@@ -0,0 +1,2 @@
+export { DropdownSelect, } from './DropdownSelect';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DropdownSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DropdownSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,GAGf,MAAM,kBAAkB,CAAC"}

package/dist/esm/components/Icon/custom/ArrowReturnIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Custom icon from Figma: arrow-return (Dropdown Menu Item focus / Combobox enter hint).
+ * Rounded return/enter glyph — not available as a single Remix export.
+ */
+export const ArrowReturnIcon = ({ className }) => (_jsx("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: _jsx("path", { d: "M17 4C19.7614 4 22 6.23858 22 9V11C22 13.7614 19.7614 16 17 16H6.82812L9.36426 18.5361L7.9502 19.9502L3 15L7.9502 10.0498L9.36426 11.4639L6.82812 14H17L17.1543 13.9961C18.7394 13.9158 20 12.6051 20 11V9C20 7.39489 18.7394 6.08421 17.1543 6.00391L17 6H13V4H17Z", fill: "currentColor" }) }));
+//# sourceMappingURL=ArrowReturnIcon.js.map

package/dist/esm/components/Icon/custom/ArrowReturnIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowReturnIcon.js","sourceRoot":"","sources":["../../../../../components/Icon/custom/ArrowReturnIcon.tsx"],"names":[],"mappings":";AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAqC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAClF,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,YAElB,eACE,CAAC,EAAC,qQAAqQ,EACvQ,IAAI,EAAC,cAAc,GACnB,GACE,CACP,CAAC"}

package/dist/esm/components/Icon/iconRegistry.js

@@ -1,5 +1,6 @@
 import * as RemixIcons from '@remixicon/react';
 import { ArrowDropUpDownIcon } from './custom/ArrowDropUpDownIcon';
+import { ArrowReturnIcon } from './custom/ArrowReturnIcon';
 /**
  * Convert PascalCase to kebab-case
  * e.g., "ArrowLeftS" -> "arrow-left-s"
@@ -80,6 +81,10 @@ iconRegistry['arrow-drop-up-down'] = {
     line: ArrowDropUpDownIcon,
     fill: ArrowDropUpDownIcon,
 };
+iconRegistry['arrow-return'] = {
+    line: ArrowReturnIcon,
+    fill: ArrowReturnIcon,
+};
 export function getIconComponent(name, variant) {
     const entry = iconRegistry[name];
     if (!entry)

package/dist/esm/components/Icon/iconRegistry.js.map

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

package/dist/esm/components/Input/Input.css

@@ -163,27 +163,58 @@
   color: var(--input-field-color-disabled-foreground);
 }
 
-/* Icons */
+/* Icons — Figma inputfield content: sm 16px, md 20px, lg 24px. */
 .muka-input__icon {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   color: var(--color-text-subtle-default);
-  width: var(--icon-size-default);
-  height: var(--icon-size-default);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
 }
 
 .muka-input__field--sm .muka-input__icon {
-  width: var(--icon-size-sm);
-  height: var(--icon-size-sm);
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
 }
 
 .muka-input__field--lg .muka-input__icon {
-  width: var(--icon-size-lg);
-  height: var(--icon-size-lg);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
 }
 
-.muka-input__field--disabled .muka-input__icon {
+.muka-input__clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-subtle-default);
+  cursor: pointer;
+}
+
+.muka-input__field--sm .muka-input__clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+/* Icon sets its own color; pin the glyph to text subtle, including hover. */
+.muka-input__icon .muka-icon,
+.muka-input__clear .muka-icon,
+.muka-input__clear:hover,
+.muka-input__clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-input__field--disabled .muka-input__icon,
+.muka-input__field--disabled .muka-input__icon .muka-icon,
+.muka-input__field--disabled .muka-input__clear,
+.muka-input__field--disabled .muka-input__clear .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }
 
@@ -192,6 +223,12 @@
   height: 100%;
 }
 
+.muka-input__native::-webkit-search-cancel-button,
+.muka-input__native::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 /* Helper text */
 .muka-input__helper {
   font-family: var(--text-label-sm-regular-fontFamily);

package/dist/esm/components/Input/Input.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useId, useRef } from 'react';
 import { mergeIds } from '../../utils/accessibility';
+import { Icon } from '../Icon';
 import './Input.css';
 /**
  * Input Component
@@ -21,7 +22,7 @@ import './Input.css';
  * - text.input.{size}
  * - text.label.{size}.semibold
  */
-export const Input = React.forwardRef(function Input({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', type = 'text', iconLeft, iconRight, fullWidth = false, className = '', name, required = false, readOnly = false, onBlur, onFocus, id, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, onKeyDownCapture, ...rest }, forwardedRef) {
+export const Input = React.forwardRef(function Input({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, size = 'md', type = 'text', iconLeft, iconRight, clearable = false, fullWidth = false, className = '', name, required = false, readOnly = false, onBlur, onFocus, id, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, onKeyDownCapture, ...rest }, forwardedRef) {
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     const generatedId = useId();
@@ -29,7 +30,9 @@ export const Input = React.forwardRef(function Input({ value, onChange, placehol
     const helperTextId = `${inputId}-helper`;
     const errorMessageId = `${inputId}-error`;
     const hasLeftIcon = Boolean(iconLeft);
-    const hasRightIcon = Boolean(iconRight);
+    const textValue = value != null ? String(value) : '';
+    const showClear = clearable && !disabled && !readOnly && textValue.length > 0;
+    const hasRightIcon = Boolean(iconRight) || showClear;
     const showError = error && errorMessage;
     const describedBy = mergeIds(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
     const wrapperClasses = [
@@ -49,6 +52,8 @@ export const Input = React.forwardRef(function Input({ value, onChange, placehol
     return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: inputId, children: [label, required && _jsx("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), _jsxs("div", { className: fieldClasses, onMouseDown: (e) => {
                     if (disabled)
                         return;
+                    if (e.target.closest('.muka-input__clear'))
+                        return;
                     if (e.target !== inputRef.current) {
                         e.preventDefault();
                         inputRef.current?.focus();
@@ -73,7 +78,13 @@ export const Input = React.forwardRef(function Input({ value, onChange, placehol
                                 e.stopPropagation();
                             }
                             onKeyDownCapture?.(e);
-                        } }), hasRightIcon && (_jsx("span", { className: "muka-input__icon muka-input__icon--right", "aria-hidden": "true", children: iconRight }))] }), showError && (_jsx("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
+                        } }), showClear && (_jsx("button", { type: "button", className: "muka-input__clear", "aria-label": "Clear", tabIndex: -1, onClick: () => {
+                            onChange?.({
+                                target: { value: '', name: name ?? '' },
+                                currentTarget: { value: '', name: name ?? '' },
+                            });
+                            inputRef.current?.focus();
+                        }, children: _jsx(Icon, { name: "close", variant: "line", size: size === 'sm' ? 'xs' : size === 'lg' ? 'md' : 'sm' }) })), iconRight && (_jsx("span", { className: "muka-input__icon muka-input__icon--right", "aria-hidden": "true", children: iconRight }))] }), showError && (_jsx("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
 });
 export default Input;
 //# sourceMappingURL=Input.js.map

package/dist/esm/components/Input/Input.js.map

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