@revikornmann/muka-ui 0.17.0 → 0.19.0

package/dist/cjs/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/cjs/components/Input/Input.js

@@ -38,6 +38,7 @@ exports.Input = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const accessibility_1 = require("../../utils/accessibility");
+const Icon_1 = require("../Icon");
 require("./Input.css");
 /**
  * Input Component
@@ -57,7 +58,7 @@ require("./Input.css");
  * - text.input.{size}
  * - text.label.{size}.semibold
  */
-exports.Input = react_1.default.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) {
+exports.Input = react_1.default.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] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
     const generatedId = (0, react_1.useId)();
@@ -65,7 +66,9 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
     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 = (0, accessibility_1.mergeIds)(ariaDescribedBy, showError ? errorMessageId : helperText ? helperTextId : undefined);
     const wrapperClasses = [
@@ -85,6 +88,8 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
     return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: inputId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.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();
@@ -109,7 +114,13 @@ exports.Input = react_1.default.forwardRef(function Input({ value, onChange, pla
                                 e.stopPropagation();
                             }
                             onKeyDownCapture?.(e);
-                        } }), hasRightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--right", "aria-hidden": "true", children: iconRight }))] }), 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 }))] }));
+                        } }), showClear && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: size === 'sm' ? 'xs' : size === 'lg' ? 'md' : 'sm' }) })), iconRight && ((0, jsx_runtime_1.jsx)("span", { className: "muka-input__icon muka-input__icon--right", "aria-hidden": "true", children: iconRight }))] }), 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 = exports.Input;
 //# sourceMappingURL=Input.js.map

package/dist/cjs/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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"}

package/dist/cjs/components/Menu/Menu.css

@@ -3,14 +3,16 @@
 /* ─── Content Container ──────────────────────────────────────────────────── */
 
 .muka-menu__content {
+  display: flex;
+  flex-direction: column;
   min-width: var(--menu-content-min-width);
   max-height: var(--menu-content-max-height);
-  overflow-y: auto;
+  overflow: hidden;
   background-color: var(--menu-content-color-background);
   border: var(--menu-content-border-width) solid var(--menu-content-color-border);
   border-radius: var(--menu-content-border-radius);
   box-shadow: var(--menu-content-shadow);
-  padding: var(--menu-content-padding);
+  padding: 0;
   z-index: 50;
 
   /* Animation */
@@ -18,6 +20,132 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.muka-menu__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  width: 100%;
+}
+
+.muka-menu__viewport {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--menu-content-padding);
+}
+
+.muka-menu__content--scrollbar .muka-menu__viewport {
+  /* Custom scrollbar owns the chrome; hide native track */
+  scrollbar-width: none;
+}
+
+.muka-menu__content--scrollbar .muka-menu__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+/* ─── Search header ──────────────────────────────────────────────────────── */
+
+.muka-menu__search {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* Figma dropdown filter header: 48px, 8px inset, 32px icon slots. */
+  height: var(--input-field-height-lg, 3rem);
+  padding: 0 var(--spacing-2);
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-menu__search--sm {
+  height: calc(var(--size-xl, 1.5rem) + var(--spacing-2) * 2);
+}
+
+.muka-menu__search-icon,
+.muka-menu__search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-2xl, 2rem);
+  height: var(--size-2xl, 2rem);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search-icon .muka-icon,
+.muka-menu__search-clear .muka-icon,
+.muka-menu__search-clear:hover,
+.muka-menu__search-clear:hover .muka-icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search--sm .muka-menu__search-icon,
+.muka-menu__search--sm .muka-menu__search-clear {
+  width: var(--size-xl, 1.5rem);
+  height: var(--size-xl, 1.5rem);
+}
+
+.muka-menu__search-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 0 var(--spacing-1);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-menu__search--sm .muka-menu__search-input {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  font-weight: var(--text-input-sm-fontWeight);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-menu__search-input::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__search-input::-webkit-search-cancel-button,
+.muka-menu__search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.muka-menu__empty {
+  display: flex;
+  align-items: center;
+  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-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  font-weight: var(--text-input-md-fontWeight);
+  line-height: var(--text-input-md-lineHeight);
+  pointer-events: none;
+  user-select: none;
+}
+
+.muka-menu__search-clear {
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.muka-menu__match {
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.muka-menu__content--scrollbar {
+  height: var(--menu-content-scroll-height, 20.625rem);
+  max-height: var(--menu-content-scroll-height, 20.625rem);
+}
+
 .muka-menu__content[data-state='open'] {
   animation-name: muka-menu-fade-in;
 }
@@ -45,22 +173,26 @@
 /* ─── Menu Item ──────────────────────────────────────────────────────────── */
 
 .muka-menu__item {
+  position: relative;
   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);
+  /* Right gutter always reserved for floating trailers (enter / check). */
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-right) var(--menu-item-padding-y)
+    var(--menu-item-padding-x);
   border-radius: var(--menu-item-border-radius);
   cursor: pointer;
   user-select: none;
   outline: none;
-  font-family: var(--text-label-md-regular-font-family);
-  font-size: var(--text-label-md-regular-font-size);
-  font-weight: var(--text-label-md-regular-font-weight);
-  line-height: var(--text-label-md-regular-line-height);
+  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);
   color: var(--menu-item-color-default-foreground);
   background-color: var(--menu-item-color-default-background);
   transition: background-color 100ms ease, color 100ms ease;
+  white-space: nowrap;
 }
 
 .muka-menu__item:hover,
@@ -126,25 +258,55 @@
 }
 
 .muka-menu__item-label {
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
+  white-space: nowrap;
+}
+
+/* Shortcut trailers replace icons and sit with an 8px right inset. */
+.muka-menu__item--has-shortcut {
+  padding-right: var(--spacing-2);
 }
 
 .muka-menu__item-shortcut {
   flex-shrink: 0;
   margin-left: auto;
   padding-left: var(--menu-item-gap);
-  font-size: var(--text-label-sm-regular-font-size);
-  color: var(--menu-shortcut-color);
-  opacity: 0.7;
+  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);
+  color: var(--color-text-muted-default);
+  white-space: nowrap;
+}
+
+.muka-menu__item-hint {
+  /* Figma: trailer sits with 8px margin top / right / bottom; 24px glyph centered inside. */
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  color: var(--color-text-muted-default);
+  pointer-events: none;
+}
+
+.muka-menu__item--hint-enter[data-highlighted] .muka-menu__item-hint {
+  display: flex;
 }
 
 .muka-menu__item-chevron {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  margin-left: auto;
+  width: var(--icon-size-default, 1.5rem);
   color: var(--menu-shortcut-color);
 }
 
@@ -165,6 +327,40 @@
   padding-left: var(--menu-item-padding-x);
 }
 
+.muka-menu__item--checkbox-trailing,
+.muka-menu__item--radio-check {
+  /* Same reserved right gutter as default items — trailing indicator floats. */
+  padding-right: var(--menu-item-padding-right);
+}
+
+.muka-menu__item--radio-check[data-state='checked'] {
+  background-color: var(--menu-item-color-selected-background);
+}
+
+.muka-menu__item-indicator--trailing {
+  /* Match enter-hint trailer: 8px inset, 24px box (override leading indicator size). */
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  bottom: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-default, 1.5rem);
+  height: auto;
+  max-height: none;
+  transform: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-menu__item-indicator--trailing > [data-state] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
 .muka-menu__radio-dot {
   width: 8px;
   height: 8px;
@@ -188,10 +384,10 @@
 
 .muka-menu__group-label {
   padding: var(--menu-group-label-padding-y) var(--menu-group-label-padding-x);
-  font-family: var(--text-label-sm-semibold-font-family);
-  font-size: var(--text-label-sm-semibold-font-size);
-  font-weight: var(--text-label-sm-semibold-font-weight);
-  line-height: var(--text-label-sm-semibold-line-height);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  line-height: var(--text-label-sm-semibold-lineHeight);
   color: var(--menu-group-label-color);
   text-transform: uppercase;
   letter-spacing: 0.05em;