@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Input/Input.css

@@ -0,0 +1,213 @@
+/* Input Component Styles - Using Muka Design Tokens */
+
+/* Wrapper — label, field, helper spacing per Figma */
+.muka-input {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-input--full-width {
+  width: 100%;
+}
+
+/* Label */
+.muka-input__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-input__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-input__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-input__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-input__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-input__label--sm + .muka-input__field--disabled,
+.muka-input__label--md + .muka-input__field--disabled,
+.muka-input__label--lg + .muka-input__field--disabled {
+  cursor: not-allowed;
+}
+
+/* Field container — default/hover: 1px border. Radius per Figma (812-10825): input field tokens. */
+.muka-input__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  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-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  cursor: text;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Subtle inset shadow — single line so it doesn’t read as a second border */
+.muka-input__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;
+}
+
+/* Size variants — radius per Figma design (input field tokens) */
+.muka-input__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-input__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-input__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Hover state — matches Figma: no visual change (same as default) */
+/* (No hover styles; default appearance is used.) */
+
+/* Focus (active) state — Figma: ~2px blue border, white background, same radius */
+.muka-input__field--focused:not(.muka-input__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(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Error state — Figma: ~2px red border, white background, same radius */
+.muka-input__field--error:not(.muka-input__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Disabled state */
+.muka-input__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+/* No inset shadow on disabled (matches Figma) */
+.muka-input__field--disabled::after {
+  display: none;
+}
+
+/* Native input — outline removed to avoid browser default (e.g. orange) focus ring */
+.muka-input__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-input__field--sm .muka-input__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-input__field--lg .muka-input__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-input__native::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-input__field--disabled .muka-input__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+.muka-input__field--disabled .muka-input__native::placeholder {
+  color: var(--input-field-color-disabled-foreground);
+}
+
+/* Icons */
+.muka-input__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-subtle-default);
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+}
+
+.muka-input__field--sm .muka-input__icon {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.muka-input__field--lg .muka-input__icon {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+
+.muka-input__field--disabled .muka-input__icon {
+  color: var(--input-field-color-disabled-foreground);
+}
+
+.muka-input__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Helper text */
+.muka-input__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-input__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}

package/dist/cjs/components/Input/Input.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Input.css");
+/**
+ * Input Component
+ *
+ * Built using the Muka design token system with support for:
+ * - 3 sizes: sm, md, lg
+ * - Interactive states: default, hover, focus, error, disabled
+ * - Icons with flexible positioning (left, right, or both)
+ * - Label and helper text
+ * - Multi-brand theming through design tokens
+ *
+ * Tokens used:
+ * - input.field.color.{state}.{background|foreground|border}
+ * - input.field.radius.{size}
+ * - input.field.padding.{x|y}
+ * - input.field.height.{size}
+ * - text.input.{size}
+ * - text.label.{size}.semibold
+ */
+const 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, ...props }) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const generatedId = (0, react_1.useId)();
+    const inputId = name || generatedId;
+    const helperTextId = `${inputId}-helper`;
+    const errorMessageId = `${inputId}-error`;
+    const hasLeftIcon = Boolean(iconLeft);
+    const hasRightIcon = Boolean(iconRight);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const wrapperClasses = [
+        'muka-input',
+        fullWidth && 'muka-input--full-width',
+        className
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-input__field',
+        `muka-input__field--${size}`,
+        isFocused && 'muka-input__field--focused',
+        error && 'muka-input__field--error',
+        disabled && 'muka-input__field--disabled',
+        hasLeftIcon && 'muka-input__field--has-icon-left',
+        hasRightIcon && 'muka-input__field--has-icon-right',
+    ].filter(Boolean).join(' ');
+    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 !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: [hasLeftIcon && ((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: inputId, className: "muka-input__native", type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDownCapture: (e) => {
+                            if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+                                e.stopPropagation();
+                            }
+                        }, ...props }), 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 }))] }));
+};
+exports.Input = Input;
+exports.default = exports.Input;
+//# sourceMappingURL=Input.js.map

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

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

package/dist/cjs/components/Input/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.Input = void 0;
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var Input_2 = require("./Input");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Input_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Input/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,iCAAkC;AAAzB,iHAAA,OAAO,OAAA"}

package/dist/cjs/components/Label/Label.css

@@ -0,0 +1,38 @@
+/* Label Component Styles - Using Muka Design Tokens */
+
+.muka-label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-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-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-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-label--disabled {
+  color: var(--color-text-subtle-default);
+  cursor: not-allowed;
+}
+
+.muka-label__required {
+  color: var(--color-state-error-foreground);
+}

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Label.css");
+/**
+ * Label Component
+ *
+ * Built using the Muka design token system.
+ * Uses semantic typography tokens: text.label.{size}.semibold
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Native <label> element with htmlFor association
+ * - Required indicator hidden from assistive tech (visual only)
+ * - visuallyHidden prop for accessible but invisible labels
+ */
+const Label = ({ children, htmlFor, size = 'md', required = false, disabled = false, visuallyHidden = false, className = '', ...props }) => {
+    const labelClasses = [
+        'muka-label',
+        `muka-label--${size}`,
+        disabled && 'muka-label--disabled',
+        visuallyHidden && 'muka-visually-hidden',
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("label", { className: labelClasses, htmlFor: htmlFor, ...props, children: [children, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-label__required", "aria-hidden": "true", children: " *" })] }));
+};
+exports.Label = Label;
+exports.default = exports.Label;
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../components/Label/Label.tsx"],"names":[],"mappings":";;;;AACA,uBAAqB;AAyBrB;;;;;;;;;;GAUG;AACI,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,cAAc,GAAG,KAAK,EACtB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,YAAY,GAAG;QACnB,YAAY;QACZ,eAAe,IAAI,EAAE;QACrB,QAAQ,IAAI,sBAAsB;QAClC,cAAc,IAAI,sBAAsB;QACxC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,mCAAO,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,KAAM,KAAK,aACxD,QAAQ,EACR,QAAQ,IAAI,iCAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,mBAAU,IAC1E,CACT,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,KAAK,SAwBhB;AAEF,kBAAe,aAAK,CAAC"}

package/dist/cjs/components/Label/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.Label = void 0;
+var Label_1 = require("./Label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
+var Label_2 = require("./Label");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Label_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Label/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,iCAAkC;AAAzB,iHAAA,OAAO,OAAA"}

package/dist/cjs/components/LicensePlateInput/LicensePlateInput.css

@@ -0,0 +1,190 @@
+/* LicensePlateInput — Dutch RDW-style plate input
+ *
+ * Plate body colors are regulatory (EU/NL) and intentionally fixed:
+ *   - Plate yellow:        #F0CE3D
+ *   - EU strip blue:       #003399
+ *   - EU stars yellow:     #FFCC00
+ *   - Plate text:          #1A1A1A
+ *
+ * All surrounding UI (label, helper, focus ring, error border) uses Muka tokens.
+ */
+
+.muka-license-plate-input {
+  --plate-yellow: #f0ce3d;
+  --plate-blue: #003399;
+  --plate-text: #1a1a1a;
+  --plate-stars: #ffcc00;
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Plate body */
+.muka-license-plate-input__plate {
+  display: inline-flex;
+  align-items: stretch;
+  background-color: var(--plate-yellow);
+  border-radius: var(--input-field-radius-md);
+  cursor: text;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Subtle outline to lift the plate from light backgrounds */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  /* Reserve space for the focus / error solid ring without shifting layout */
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  transition: outline-color 0.15s ease, opacity 0.15s ease;
+}
+
+/* Size variants — plate aspect echoes the real RDW plate (~5:1) */
+.muka-license-plate-input__plate--sm {
+  height: 44px;
+  min-width: 220px;
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-license-plate-input__plate--md {
+  height: 60px;
+  min-width: 300px;
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-license-plate-input__plate--lg {
+  height: 80px;
+  min-width: 400px;
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Focus — solid outline ring */
+.muka-license-plate-input__plate--focused:not(.muka-license-plate-input__plate--disabled) {
+  outline-color: var(--input-field-color-focus-border);
+}
+
+/* Error — solid outline ring in error color */
+.muka-license-plate-input__plate--error:not(.muka-license-plate-input__plate--disabled) {
+  outline-color: var(--input-field-color-error-border);
+}
+
+/* Disabled */
+.muka-license-plate-input__plate--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* EU strip */
+.muka-license-plate-input__eu-strip {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--plate-blue);
+  color: #ffffff;
+  flex-shrink: 0;
+  padding: 0 0.4em;
+  gap: 0.15em;
+  /* Strip width scales with plate height for a consistent ratio */
+  width: 14%;
+  min-width: 36px;
+}
+
+.muka-license-plate-input__eu-stars {
+  width: 60%;
+  max-width: 28px;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__eu-stars {
+  max-width: 20px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__eu-stars {
+  max-width: 36px;
+}
+
+.muka-license-plate-input__country-code {
+  font-family:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  color: #ffffff;
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__country-code {
+  font-size: 10px;
+}
+
+.muka-license-plate-input__plate--md .muka-license-plate-input__country-code {
+  font-size: 13px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__country-code {
+  font-size: 16px;
+}
+
+/* Native input */
+.muka-license-plate-input__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--plate-text);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  /* Plate font — bold condensed sans is closest to the FE-Schrift look without
+     shipping a custom font. JetBrains Mono is the system mono brand font. */
+  font-family:
+    'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 800;
+  padding: 0 0.5em;
+  width: 100%;
+  caret-color: var(--plate-text);
+}
+
+.muka-license-plate-input__plate--sm .muka-license-plate-input__native {
+  font-size: 22px;
+}
+
+.muka-license-plate-input__plate--md .muka-license-plate-input__native {
+  font-size: 30px;
+}
+
+.muka-license-plate-input__plate--lg .muka-license-plate-input__native {
+  font-size: 42px;
+}
+
+.muka-license-plate-input__native::placeholder {
+  color: var(--plate-text);
+  opacity: 0.55;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+.muka-license-plate-input__plate--disabled .muka-license-plate-input__native {
+  cursor: not-allowed;
+}
+
+/* Helper text */
+.muka-license-plate-input__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message */
+.muka-license-plate-input__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicensePlateInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./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.
+ */
+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 = (0, react_1.useId)();
+    const fieldId = name || generatedId;
+    const helperTextId = `${fieldId}-helper`;
+    const errorMessageId = `${fieldId}-error`;
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)('');
+    const currentValue = isControlled ? sanitize(controlledValue, maxLength) : internalValue;
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: plateClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: [(0, jsx_runtime_1.jsxs)("span", { className: "muka-license-plate-input__eu-strip", "aria-hidden": "true", children: [(0, jsx_runtime_1.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 (0, jsx_runtime_1.jsx)("circle", { cx: cx, cy: cy, r: 1.1, fill: "#FFCC00" }, i);
+                                }) }), (0, jsx_runtime_1.jsx)("span", { className: "muka-license-plate-input__country-code", children: countryCode })] }), (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("p", { className: "muka-license-plate-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-license-plate-input__helper", id: helperTextId, children: helperText }))] }));
+};
+exports.LicensePlateInput = LicensePlateInput;
+exports.default = exports.LicensePlateInput;
+//# sourceMappingURL=LicensePlateInput.js.map

package/dist/cjs/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/cjs/components/LicensePlateInput/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.LicensePlateInput = void 0;
+var LicensePlateInput_1 = require("./LicensePlateInput");
+Object.defineProperty(exports, "LicensePlateInput", { enumerable: true, get: function () { return LicensePlateInput_1.LicensePlateInput; } });
+var LicensePlateInput_2 = require("./LicensePlateInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LicensePlateInput_2).default; } });
+//# sourceMappingURL=index.js.map