@revikornmann/muka-ui 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/LicensePlateInput/index.ts"],"names":[],"mappings":";;;;;;AAAA,yDAAqF;AAA5E,sHAAA,iBAAiB,OAAA;AAC1B,yDAA8C;AAArC,6HAAA,OAAO,OAAA"}

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./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/
+ */
+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] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Element, { ...elementProps, children: [hasLeading && ((0, jsx_runtime_1.jsx)("div", { className: "muka-listitem__leading", children: leadingImage ? ((0, jsx_runtime_1.jsx)("img", { src: leadingImage, alt: imageAlt, className: "muka-listitem__image" })) : ((0, jsx_runtime_1.jsx)("div", { className: "muka-listitem__icon", children: leadingIcon })) })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-listitem__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-listitem__text", children: [(0, jsx_runtime_1.jsx)("p", { className: "muka-listitem__label", children: label }), caption && ((0, jsx_runtime_1.jsx)("p", { className: "muka-listitem__caption", children: caption }))] }), showChevron && ((0, jsx_runtime_1.jsx)("div", { className: "muka-listitem__chevron", children: (0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 6L15 12L9 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }), showDivider && ((0, jsx_runtime_1.jsx)("div", { className: "muka-listitem__divider", "aria-hidden": "true" }))] }));
+};
+exports.ListItem = ListItem;
+exports.default = exports.ListItem;
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.ListItem = void 0;
+var ListItem_1 = require("./ListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
+var ListItem_2 = require("./ListItem");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ListItem_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ListItem/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/cjs/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);
+  }
+}