@revikornmann/muka-ui 0.2.1

package/dist/styles/components/FormProgressBar.css

@@ -0,0 +1,157 @@
+/* FormProgressBar Component Styles — Using Muka Design Tokens */
+
+/* ─── Root ──────────────────────────────────────────────── */
+.muka-progress-bar {
+  width: 100%;
+  padding-bottom: var(--spacing-7);
+}
+
+/* ─── Track (layered container) ─────────────────────────── */
+.muka-progress-bar__track {
+  position: relative;
+  /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+/* ─── Steps layer (on top) ──────────────────────────────── */
+.muka-progress-bar__steps {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  z-index: 2;
+}
+
+/* ─── Individual step ───────────────────────────────────── */
+.muka-progress-bar__step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  position: relative;
+}
+
+/* ─── Step indicator (circle) ───────────────────────────── */
+.muka-progress-bar__indicator {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+/* Past: dark accent contrast circle with white checkmark */
+.muka-progress-bar__indicator--past {
+  background-color: var(--alias-color-accent-contrast);
+  color: var(--color-text-default-inverse);
+  cursor: pointer;
+}
+
+.muka-progress-bar__indicator--past:hover {
+  opacity: 0.85;
+}
+
+.muka-progress-bar__indicator--past:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Current: accent default circle with white number */
+.muka-progress-bar__indicator--current {
+  background-color: var(--alias-color-accent-default);
+  color: var(--color-text-default-inverse);
+}
+
+/* Upcoming: sunken/gray circle with dark number */
+.muka-progress-bar__indicator--upcoming {
+  background-color: var(--color-surface-sunken);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Step number text ──────────────────────────────────── */
+.muka-progress-bar__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  text-align: center;
+  user-select: none;
+}
+
+/* ─── Checkmark icon ────────────────────────────────────── */
+.muka-progress-bar__check-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* ─── Step label ────────────────────────────────────────── */
+.muka-progress-bar__label {
+  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-default-default);
+  text-align: center;
+  max-width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Current step label is bold */
+.muka-progress-bar__label--current {
+  font-family: var(--text-label-sm-bold-fontFamily);
+  font-weight: var(--text-label-sm-bold-fontWeight);
+}
+
+/* ─── Connectors layer (behind indicators) ──────────────── */
+.muka-progress-bar__connectors {
+  display: flex;
+  align-items: center;
+  /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Individual connector line ─────────────────────────── */
+.muka-progress-bar__connector {
+  flex: 1 0 0;
+  height: 4px;
+  min-width: 1px;
+}
+
+/* Past: solid dark line */
+.muka-progress-bar__connector--past {
+  background-color: var(--alias-color-accent-contrast);
+}
+
+/* Current: gradient from past (dark) toward current step */
+.muka-progress-bar__connector--current {
+  background: linear-gradient(
+    to right,
+    var(--alias-color-accent-contrast) 0%,
+    var(--alias-color-accent-default) 100%
+  );
+}
+
+/* Current-right: gradient fading from current step into upcoming */
+.muka-progress-bar__connector--current-right {
+  background: linear-gradient(
+    to right,
+    var(--alias-color-accent-default) 0%,
+    var(--alias-color-accent-default) 15%,
+    var(--color-surface-sunken) 50%
+  );
+}
+
+/* Upcoming: solid gray line */
+.muka-progress-bar__connector--upcoming {
+  background-color: var(--color-surface-sunken);
+}

package/dist/styles/components/Icon.css

@@ -0,0 +1,51 @@
+/* Icon Component Styles - Using Muka Design Tokens */
+
+.muka-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-icon-default-default, currentColor);
+}
+
+/* Icons inside buttons should inherit from button's foreground color */
+.muka-button .muka-icon {
+  color: inherit;
+}
+
+.muka-icon--subtle {
+  color: var(--color-icon-subtle-default);
+}
+
+.muka-icon--muted {
+  color: var(--color-icon-muted-default);
+}
+
+.muka-icon--inverse {
+  color: var(--color-icon-default-inverse);
+}
+
+.muka-icon--xs {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
+
+.muka-icon--sm {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.muka-icon--md {
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+}
+
+.muka-icon--lg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+
+.muka-icon svg {
+  width: 100%;
+  height: 100%;
+}

package/dist/styles/components/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/styles/components/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/styles/components/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;
+}