@revikornmann/muka-ui 0.2.1

package/dist/esm/components/LicensePlateInput/LicensePlateInput.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useId } from 'react';
+import './LicensePlateInput.css';
+const sanitize = (raw, maxLength) => raw.toUpperCase().replace(/[^A-Z0-9-]/g, '').slice(0, maxLength);
+/**
+ * LicensePlateInput
+ *
+ * European-style license plate input modelled after the Dutch RDW kentekencheck.
+ * Renders a yellow plate body with a blue EU strip on the left (stars + country code),
+ * and a single text field for the plate value.
+ *
+ * Plate body colors (yellow background, EU blue, plate text) follow the EU/NL
+ * regulatory palette and are kept fixed across brands. Surrounding UI (helper,
+ * focus ring, error border) uses Muka semantic tokens.
+ */
+export const LicensePlateInput = ({ value: controlledValue, onChange, onSubmit, placeholder = 'TIK HIER', helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', maxLength = 8, required = false, className = '', name, countryCode = 'NL', }) => {
+    const generatedId = useId();
+    const fieldId = name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState('');
+    const currentValue = isControlled ? sanitize(controlledValue, maxLength) : internalValue;
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const handleChange = (e) => {
+        const sanitized = sanitize(e.target.value, maxLength);
+        if (!isControlled)
+            setInternalValue(sanitized);
+        onChange?.(sanitized);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && onSubmit) {
+            e.preventDefault();
+            onSubmit(currentValue);
+        }
+    };
+    const wrapperClasses = [
+        'muka-license-plate-input',
+        className,
+    ].filter(Boolean).join(' ');
+    const plateClasses = [
+        'muka-license-plate-input__plate',
+        `muka-license-plate-input__plate--${size}`,
+        isFocused && 'muka-license-plate-input__plate--focused',
+        error && 'muka-license-plate-input__plate--error',
+        disabled && 'muka-license-plate-input__plate--disabled',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsxs("div", { className: plateClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: [_jsxs("span", { className: "muka-license-plate-input__eu-strip", "aria-hidden": "true", children: [_jsx("svg", { className: "muka-license-plate-input__eu-stars", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: Array.from({ length: 12 }, (_, i) => {
+                                    const angle = (i * 30 - 90) * (Math.PI / 180);
+                                    const cx = 12 + Math.cos(angle) * 7;
+                                    const cy = 12 + Math.sin(angle) * 7;
+                                    return _jsx("circle", { cx: cx, cy: cy, r: 1.1, fill: "#FFCC00" }, i);
+                                }) }), _jsx("span", { className: "muka-license-plate-input__country-code", children: countryCode })] }), _jsx("input", { ref: inputRef, id: fieldId, className: "muka-license-plate-input__native", type: "text", value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, maxLength: maxLength, autoComplete: "off", autoCapitalize: "characters", autoCorrect: "off", spellCheck: false, "aria-invalid": error || undefined, "aria-describedby": describedBy, "aria-label": "License plate" })] }), showError && (_jsx("p", { className: "muka-license-plate-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-license-plate-input__helper", id: helperTextId, children: helperText }))] }));
+};
+export default LicensePlateInput;
+//# sourceMappingURL=LicensePlateInput.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/LicensePlateInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/components/ListItem/ListItem.css

@@ -0,0 +1,185 @@
+/* ListItem Component Styles - Using Muka Design Tokens */
+
+/* Base list item styles */
+.muka-listitem {
+  /* Layout */
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  padding: var(--spacing-5) var(--spacing-4);
+  
+  /* Background - using semantic tokens */
+  background-color: var(--color-surface-level3);
+  
+  /* Typography */
+  font-family: var(--alias-font-brand-family);
+  
+  /* Border and spacing */
+  border: none;
+  position: relative;
+  
+  /* Interaction - only apply if interactive */
+  transition: background-color 0.2s ease;
+}
+
+/* Interactive state */
+.muka-listitem--interactive {
+  cursor: pointer;
+}
+
+.muka-listitem--interactive:hover:not(:disabled):not(.muka-listitem--disabled) {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-listitem--interactive:active:not(:disabled):not(.muka-listitem--disabled),
+.muka-listitem--interactive.muka-listitem--pressed:not(:disabled):not(.muka-listitem--disabled) {
+  background-color: var(--color-surface-pressed);
+}
+
+/* Focus styles for accessibility */
+.muka-listitem:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* Disabled state */
+.muka-listitem--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.muka-listitem--disabled:hover {
+  background-color: var(--color-surface-level3);
+}
+
+/* Selected state */
+.muka-listitem--selected {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-listitem--selected:hover {
+  background-color: var(--color-surface-hover);
+}
+
+/* No divider modifier */
+.muka-listitem--no-divider .muka-listitem__divider {
+  display: none;
+}
+
+/* Center content vertically when no caption */
+.muka-listitem--no-caption {
+  align-items: center;
+}
+
+/* Leading content (icon or image) */
+.muka-listitem__leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+}
+
+.muka-listitem__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-default-default);
+}
+
+.muka-listitem__image {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+}
+
+/* Main content area */
+.muka-listitem__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.muka-listitem__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* Label text */
+.muka-listitem__label {
+  margin: 0;
+  padding: 0;
+  
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-plain-family);
+  font-weight: var(--alias-font-plain-weight-semibold, 600);
+  font-size: var(--text-label-md-fontSize);
+  line-height: var(--text-label-md-lineHeight);
+  color: var(--color-text-default-default);
+  
+  /* Text handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Caption text */
+.muka-listitem__caption {
+  margin: 0;
+  padding: 0;
+  
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-plain-family);
+  font-weight: var(--alias-font-plain-weight-regular, 400);
+  font-size: var(--text-body-sm-fontSize);
+  line-height: var(--text-body-sm-lineHeight);
+  color: var(--color-text-subtle-default);
+  
+  /* Text handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Trailing chevron */
+.muka-listitem__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-subtle-default);
+}
+
+/* Bottom divider */
+.muka-listitem__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+/* Button and anchor specific styles */
+button.muka-listitem,
+a.muka-listitem {
+  text-align: left;
+  width: 100%;
+}
+
+/* List item specific styles */
+li.muka-listitem {
+  list-style: none;
+}

package/dist/esm/components/ListItem/ListItem.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import './ListItem.css';
+/**
+ * ListItem Component
+ *
+ * A flexible list item component with support for leading icons/images,
+ * trailing chevrons, labels, and captions. Height adjusts automatically
+ * based on content presence.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Keyboard support: Enter and Space keys activate interactive items
+ * - aria-disabled for disabled state
+ * - aria-selected for selection state in lists
+ * - aria-current for navigation context (page, step, etc.)
+ * - imageAlt prop for leading image accessibility
+ * - Focus indicator meets WCAG 2.4.7 (visible focus)
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+ */
+export const ListItem = ({ label, caption, leadingIcon, leadingImage, imageAlt = '', showChevron = false, showDivider = true, onClick, disabled = false, selected = false, className = '', as = 'div', href, type, 'aria-selected': ariaSelected, 'aria-current': ariaCurrent, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, ...props }) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const isInteractive = Boolean(onClick) && !disabled;
+    const hasLeading = Boolean(leadingIcon || leadingImage);
+    // Determine semantic element
+    const Element = as;
+    const handleClick = () => {
+        if (isInteractive && onClick) {
+            onClick();
+        }
+    };
+    const handleMouseDown = () => {
+        if (isInteractive) {
+            setIsPressed(true);
+        }
+    };
+    const handleMouseUp = () => {
+        setIsPressed(false);
+    };
+    const handleMouseLeave = () => {
+        setIsPressed(false);
+    };
+    const handleKeyDown = (e) => {
+        if (isInteractive && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    // Generate CSS classes
+    const itemClasses = [
+        'muka-listitem',
+        isInteractive && 'muka-listitem--interactive',
+        disabled && 'muka-listitem--disabled',
+        selected && 'muka-listitem--selected',
+        isPressed && 'muka-listitem--pressed',
+        !showDivider && 'muka-listitem--no-divider',
+        !caption && 'muka-listitem--no-caption',
+        className
+    ].filter(Boolean).join(' ');
+    // Props for semantic elements
+    const elementProps = {
+        className: itemClasses,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave,
+        onKeyDown: handleKeyDown,
+        'aria-disabled': disabled || undefined,
+        'aria-selected': ariaSelected ?? (selected || undefined),
+        'aria-current': ariaCurrent || undefined,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedby,
+        tabIndex: isInteractive ? 0 : -1,
+        ...props
+    };
+    // Add href for anchor elements
+    if (as === 'a' && href) {
+        elementProps.href = href;
+    }
+    // Add type for button elements
+    if (as === 'button' && type) {
+        elementProps.type = type;
+    }
+    return (_jsxs(Element, { ...elementProps, children: [hasLeading && (_jsx("div", { className: "muka-listitem__leading", children: leadingImage ? (_jsx("img", { src: leadingImage, alt: imageAlt, className: "muka-listitem__image" })) : (_jsx("div", { className: "muka-listitem__icon", children: leadingIcon })) })), _jsxs("div", { className: "muka-listitem__content", children: [_jsxs("div", { className: "muka-listitem__text", children: [_jsx("p", { className: "muka-listitem__label", children: label }), caption && (_jsx("p", { className: "muka-listitem__caption", children: caption }))] }), showChevron && (_jsx("div", { className: "muka-listitem__chevron", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M9 6L15 12L9 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }), showDivider && (_jsx("div", { className: "muka-listitem__divider", "aria-hidden": "true" }))] }));
+};
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/components/Menu/Menu.css

@@ -0,0 +1,280 @@
+/* Menu Component Styles */
+
+/* ─── Content Container ──────────────────────────────────────────────────── */
+
+.muka-menu__content {
+  min-width: var(--menu-content-min-width);
+  max-height: var(--menu-content-max-height);
+  overflow-y: auto;
+  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);
+  z-index: 50;
+
+  /* Animation */
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.muka-menu__content[data-state='open'] {
+  animation-name: muka-menu-fade-in;
+}
+
+.muka-menu__content[data-state='closed'] {
+  animation-name: muka-menu-fade-out;
+}
+
+.muka-menu__content[data-side='top'] {
+  animation-name: muka-menu-slide-down;
+}
+
+.muka-menu__content[data-side='bottom'] {
+  animation-name: muka-menu-slide-up;
+}
+
+.muka-menu__content[data-side='left'] {
+  animation-name: muka-menu-slide-right;
+}
+
+.muka-menu__content[data-side='right'] {
+  animation-name: muka-menu-slide-left;
+}
+
+/* ─── Menu Item ──────────────────────────────────────────────────────────── */
+
+.muka-menu__item {
+  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);
+  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);
+  color: var(--menu-item-color-default-foreground);
+  background-color: var(--menu-item-color-default-background);
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.muka-menu__item:hover,
+.muka-menu__item[data-highlighted] {
+  background-color: var(--menu-item-color-hover-background);
+  color: var(--menu-item-color-hover-foreground);
+}
+
+.muka-menu__item:focus,
+.muka-menu__item[data-highlighted]:focus {
+  background-color: var(--menu-item-color-focus-background);
+  color: var(--menu-item-color-focus-foreground);
+}
+
+/* Disabled */
+.muka-menu__item--disabled,
+.muka-menu__item[data-disabled] {
+  color: var(--menu-item-color-disabled-foreground);
+  background-color: var(--menu-item-color-disabled-background);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.muka-menu__item--disabled .muka-menu__item-icon,
+.muka-menu__item[data-disabled] .muka-menu__item-icon {
+  color: var(--menu-item-color-disabled-icon);
+}
+
+/* Destructive */
+.muka-menu__item--destructive {
+  color: var(--menu-item-color-destructive-default-foreground);
+}
+
+.muka-menu__item--destructive .muka-menu__item-icon {
+  color: var(--menu-item-color-destructive-default-icon);
+}
+
+.muka-menu__item--destructive:hover,
+.muka-menu__item--destructive[data-highlighted] {
+  background-color: var(--menu-item-color-destructive-hover-background);
+  color: var(--menu-item-color-destructive-hover-foreground);
+}
+
+.muka-menu__item--destructive:hover .muka-menu__item-icon,
+.muka-menu__item--destructive[data-highlighted] .muka-menu__item-icon {
+  color: var(--menu-item-color-destructive-hover-icon);
+}
+
+/* ─── Item Parts ─────────────────────────────────────────────────────────── */
+
+.muka-menu__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--menu-item-color-default-icon);
+  transition: color 100ms ease;
+}
+
+.muka-menu__item:hover .muka-menu__item-icon,
+.muka-menu__item[data-highlighted] .muka-menu__item-icon {
+  color: var(--menu-item-color-hover-icon);
+}
+
+.muka-menu__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.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;
+}
+
+.muka-menu__item-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--menu-shortcut-color);
+}
+
+/* ─── Indicator (Checkbox/Radio) ─────────────────────────────────────────── */
+
+.muka-menu__item-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+  flex-shrink: 0;
+  color: var(--menu-checkbox-indicator-color);
+}
+
+.muka-menu__item--checkbox,
+.muka-menu__item--radio {
+  padding-left: var(--menu-item-padding-x);
+}
+
+.muka-menu__radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--menu-radio-indicator-color);
+}
+
+/* ─── Separator ──────────────────────────────────────────────────────────── */
+
+.muka-menu__separator {
+  height: var(--menu-separator-height);
+  margin: var(--menu-separator-margin-y) 0;
+  background-color: var(--menu-separator-color);
+}
+
+/* ─── Group ──────────────────────────────────────────────────────────────── */
+
+.muka-menu__group {
+  /* No additional styles needed - just a container */
+}
+
+.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);
+  color: var(--menu-group-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ─── Radio Group ────────────────────────────────────────────────────────── */
+
+.muka-menu__radio-group {
+  /* No additional styles needed - just a container */
+}
+
+/* ─── Context Menu Trigger ───────────────────────────────────────────────── */
+
+.muka-context-menu__trigger {
+  /* Allow the trigger to be styled by the parent */
+}
+
+.muka-context-menu__trigger:focus-visible {
+  outline: var(--contextmenu-trigger-outline-width) solid var(--contextmenu-trigger-outline-color);
+  outline-offset: var(--contextmenu-trigger-outline-offset);
+  border-radius: var(--border-radius-sm);
+}
+
+/* ─── Animations ─────────────────────────────────────────────────────────── */
+
+@keyframes muka-menu-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes muka-menu-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes muka-menu-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes muka-menu-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes muka-menu-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes muka-menu-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}