jouw-stem__design-system 0.1.0

package/src/components/InputNumber/InputNumber.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="input-number" :class="additionalClasses">
+    <button
+      v-if="showButtons"
+      type="button"
+      class="input-number__button input-number__button--decrement"
+      aria-label="Decrement"
+      :disabled="isDisabled || isAtMin"
+      @click="decrement()"
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M2.5 6H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+    <input
+      ref="inputRef"
+      type="text"
+      role="spinbutton"
+      inputmode="decimal"
+      class="input-number__input"
+      :value="displayValue"
+      :disabled="isDisabled"
+      :placeholder="placeholder"
+      :name="name"
+      :aria-label="placeholder || 'Number'"
+      :aria-invalid="isInvalid || undefined"
+      :aria-disabled="isDisabled ? 'true' : undefined"
+      :aria-valuemin="min !== null ? min : undefined"
+      :aria-valuemax="max !== null ? max : undefined"
+      :aria-valuenow="modelValue !== null && modelValue !== undefined ? modelValue : undefined"
+      @input="onInput"
+      @blur="onBlur"
+      @keydown="onKeydown"
+    />
+    <button
+      v-if="showButtons"
+      type="button"
+      class="input-number__button input-number__button--increment"
+      aria-label="Increment"
+      :disabled="isDisabled || isAtMax"
+      @click="increment()"
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+        <path d="M6 2.5V9.5M2.5 6H9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./InputNumber.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { parseValue } from "./parseValue";
+import { clampValue } from "./clampValue";
+import { formatValue } from "./formatValue";
+
+interface Props {
+  modelValue?: number | null;
+  min?: number | null;
+  max?: number | null;
+  step?: number;
+  placeholder?: string;
+  name?: string;
+  size?: string;
+  showButtons?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  locale?: string;
+  minFractionDigits?: number;
+  maxFractionDigits?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  min: null,
+  max: null,
+  step: 1,
+  size: "md",
+  showButtons: true,
+  isDisabled: false,
+  isInvalid: false,
+  locale: "nl-NL",
+  minFractionDigits: 0,
+  maxFractionDigits: 2,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number | null): void;
+  (e: "change", payload: { value: number | null }): void;
+}>();
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const displayValue = computed(() =>
+  formatValue(props.modelValue, {
+    locale: props.locale,
+    minFractionDigits: props.minFractionDigits,
+    maxFractionDigits: props.maxFractionDigits,
+  })
+);
+
+const isAtMin = computed(() => {
+  if (props.min === null || props.min === undefined) return false;
+  return props.modelValue !== null && props.modelValue !== undefined && props.modelValue <= props.min;
+});
+
+const isAtMax = computed(() => {
+  if (props.max === null || props.max === undefined) return false;
+  return props.modelValue !== null && props.modelValue !== undefined && props.modelValue >= props.max;
+});
+
+const updateValue = (value: number | null) => {
+  const clamped = clampValue(value, props.min, props.max);
+  emit("update:modelValue", clamped);
+  emit("change", { value: clamped });
+};
+
+const onInput = (_event: Event) => {
+  // Typing is not committed until blur/Enter — preserves locale display.
+};
+
+const onBlur = (event: Event) => {
+  const parsed = parseValue((event.target as HTMLInputElement).value, props.locale);
+  updateValue(parsed);
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    increment(event.shiftKey);
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    decrement(event.shiftKey);
+  } else if (event.key === "Enter") {
+    const parsed = parseValue((event.target as HTMLInputElement).value, props.locale);
+    updateValue(parsed);
+  }
+};
+
+const increment = (large = false) => {
+  const current = props.modelValue ?? 0;
+  const stepSize = large ? props.step * 10 : props.step;
+  updateValue(current + stepSize);
+};
+
+const decrement = (large = false) => {
+  const current = props.modelValue ?? 0;
+  const stepSize = large ? props.step * 10 : props.step;
+  updateValue(current - stepSize);
+};
+
+const additionalClasses = computed(() => [
+  `input-number--size-${props.size}`,
+  props.isDisabled && "input-number--state-disabled",
+  props.isInvalid && "input-number--state-invalid",
+  props.showButtons && "input-number--mode-with-buttons",
+].filter(Boolean).join(" "));
+</script>

package/src/components/InputNumber/clampValue.ts

@@ -0,0 +1,20 @@
+/**
+ * Clamp a number to an inclusive [min, max] window. `null` for either bound
+ * means "no clamp on that side". A `null` value passes through unchanged so
+ * callers can compose with `parseValue`'s null-on-empty contract.
+ *
+ * If min > max, min wins (defensive: a misconfigured pair shouldn't push the
+ * value into a no-man's-land between the two).
+ */
+export function clampValue(
+  value: number | null,
+  min: number | null = null,
+  max: number | null = null
+): number | null {
+  if (value === null || value === undefined) return null
+  if (!Number.isFinite(value)) return null
+  let result = value
+  if (max !== null && result > max) result = max
+  if (min !== null && result < min) result = min
+  return result
+}

package/src/components/InputNumber/formatValue.ts

@@ -0,0 +1,24 @@
+export interface FormatOptions {
+  locale?: string
+  minFractionDigits?: number
+  maxFractionDigits?: number
+}
+
+/**
+ * Format a number for display via Intl.NumberFormat. `null`/`undefined` and
+ * non-finite inputs return the empty string so the input field stays blank
+ * rather than showing "NaN" or "Infinity".
+ */
+export function formatValue(value: number | null | undefined, opts: FormatOptions = {}): string {
+  if (value === null || value === undefined) return ''
+  if (!Number.isFinite(value)) return ''
+  const { locale = 'en-US', minFractionDigits = 0, maxFractionDigits = 2 } = opts
+  try {
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: minFractionDigits,
+      maximumFractionDigits: Math.max(maxFractionDigits, minFractionDigits),
+    }).format(value)
+  } catch {
+    return String(value)
+  }
+}

package/src/components/InputNumber/parseValue.ts

@@ -0,0 +1,50 @@
+/**
+ * Parse a user-typed string into a number, locale-aware.
+ *
+ * Decimal separator follows the locale (',' for nl-NL/de-DE, '.' for en-US).
+ * Thousands separator (the locale's group symbol) is stripped before parse.
+ * Currency symbols, percent signs, whitespace, and any other non-digit /
+ * non-sign characters are stripped.
+ *
+ * Returns `null` for empty input, NaN, ±Infinity, or numbers outside the
+ * IEEE-754 safe integer range — those are treated as "no value" rather than
+ * letting callers operate on a number that can't round-trip.
+ */
+export function parseValue(raw: unknown, locale = 'en-US'): number | null {
+  if (raw === null || raw === undefined) return null
+  const str = String(raw).trim()
+  if (str === '') return null
+
+  const { decimal, group } = localeSeparators(locale)
+  const groupRe = new RegExp(escapeForRegex(group), 'g')
+  const decimalRe = new RegExp(escapeForRegex(decimal), 'g')
+
+  const normalised = str
+    .replace(groupRe, '')
+    .replace(decimalRe, '.')
+    .replace(/[^\d.\-+eE]/g, '')
+
+  if (normalised === '' || normalised === '-' || normalised === '+' || normalised === '.') {
+    return null
+  }
+
+  const parsed = Number(normalised)
+  if (!Number.isFinite(parsed)) return null
+  if (Math.abs(parsed) > Number.MAX_SAFE_INTEGER) return null
+  return parsed
+}
+
+function localeSeparators(locale: string): { decimal: string; group: string } {
+  try {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)
+    const decimal = parts.find(p => p.type === 'decimal')?.value ?? '.'
+    const group = parts.find(p => p.type === 'group')?.value ?? ','
+    return { decimal, group }
+  } catch {
+    return { decimal: '.', group: ',' }
+  }
+}
+
+function escapeForRegex(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

package/src/components/InputOtp/InputOtp.matrix.ts

@@ -0,0 +1,29 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.input-otp',
+  // OTP renders `length` cells. Default to 4 digits, integer-only.
+  baseQuery: { length: '4' },
+  variants: [
+    {
+      name: 'Length',
+      subvariants: [
+        { name: '4-cells', query: { length: '4' } },
+        { name: '6-cells', query: { length: '6' } }
+      ]
+    },
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'numeric',  query: { integerOnly: 'true' } },
+        { name: 'alphanum', query: { integerOnly: 'false' } },
+        { name: 'masked',   query: { mask: 'true', modelValue: '1234' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'filled',    props: { modelValue: '1234' } },
+    { name: 'disabled',  props: { isDisabled: 'true' } },
+    { name: 'invalid',   props: { isInvalid: 'true' } }
+  ]
+}

package/src/components/InputOtp/InputOtp.scss

@@ -0,0 +1,91 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-otp;
+
+.#{$c} {
+  display: inline-block;
+}
+
+.#{$c}__container {
+  display: flex;
+  align-items: center;
+  gap: var(--input-otp-gap, $input-otp-gap);
+}
+
+.#{$c}__cell {
+  width: var(--input-otp-cell-size, $input-otp-cell-size);
+  height: var(--input-otp-cell-size, $input-otp-cell-size);
+  text-align: center;
+  font-size: var(--input-otp-cell-fontSize, $input-otp-cell-fontSize);
+  font-weight: var(--input-otp-cell-fontWeight, $input-otp-cell-fontWeight);
+  color: var(--input-otp-cell-text-default, $input-otp-cell-text-default);
+  background-color: var(--input-otp-cell-background-default, $input-otp-cell-background-default);
+  border: var(--input-otp-cell-border-width, $input-otp-cell-border-width) solid var(--input-otp-cell-border-color-default, $input-otp-cell-border-color-default);
+  border-radius: var(--input-otp-cell-radius, $input-otp-cell-radius);
+  appearance: none;
+  -moz-appearance: textfield;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::placeholder {
+    color: transparent;
+  }
+
+  &:hover:not(:disabled):not(:focus),
+  &[data-state~="hover"]:not(:disabled):not(:focus) {
+    border-color: var(--input-otp-cell-border-color-hover, $input-otp-cell-border-color-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    border-color: var(--input-otp-cell-border-color-focus, $input-otp-cell-border-color-focus);
+    background-color: var(--input-otp-cell-background-focus, $input-otp-cell-background-focus);
+    box-shadow: 0 0 0 var(--input-otp-focus-ringWidth, $input-otp-focus-ringWidth) var(--input-otp-focus-ringColor, $input-otp-focus-ringColor);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--input-otp-cell-background-disabled, $input-otp-cell-background-disabled);
+    border-color: var(--input-otp-cell-border-color-disabled, $input-otp-cell-border-color-disabled);
+    color: var(--input-otp-cell-text-disabled, $input-otp-cell-text-disabled);
+  }
+}
+
+.#{$c}__cell--filled {
+  background-color: var(--input-otp-cell-background-filled, $input-otp-cell-background-filled);
+  border-color: var(--input-otp-cell-border-color-filled, $input-otp-cell-border-color-filled);
+}
+
+.#{$c}__separator {
+  display: block;
+  width: var(--input-otp-separator-width, $input-otp-separator-width);
+  height: 2px;
+  background-color: var(--input-otp-separator-color, $input-otp-separator-color);
+  border-radius: 1px;
+}
+
+// Invalid state
+.#{$c}--state-invalid {
+  .#{$c}__cell {
+    border-color: var(--input-otp-cell-border-color-error, $input-otp-cell-border-color-error);
+
+    &:focus,
+    &[data-state~="focus"] {
+      border-color: var(--input-otp-cell-border-color-error, $input-otp-cell-border-color-error);
+    }
+  }
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  opacity: 0.6;
+}

package/src/components/InputOtp/InputOtp.tokens.theme-dark.json

@@ -0,0 +1,138 @@
+{
+  "input-otp": {
+    "gap": {
+      "value": "{inline.s}",
+      "type": "dimension",
+      "description": "Gap between input cells"
+    },
+    "cell": {
+      "size": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Cell width and height"
+      },
+      "fontSize": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Cell character font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Cell character font weight"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Cell border radius"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Default cell background"
+        },
+        "focus": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Focused cell background"
+        },
+        "filled": {
+          "value": "{neutral.50}",
+          "type": "color",
+          "description": "Filled cell background"
+        },
+        "disabled": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Disabled cell background"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Cell border width"
+        },
+        "color": {
+          "default": {
+            "value": "{neutral.300}",
+            "type": "color",
+            "description": "Default cell border color"
+          },
+          "hover": {
+            "value": "{neutral.400}",
+            "type": "color",
+            "description": "Hover cell border color"
+          },
+          "focus": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Focused cell border color"
+          },
+          "filled": {
+            "value": "{neutral.400}",
+            "type": "color",
+            "description": "Filled cell border color"
+          },
+          "disabled": {
+            "value": "{neutral.200}",
+            "type": "color",
+            "description": "Disabled cell border color"
+          },
+          "error": {
+            "value": "{feedback.error}",
+            "type": "color",
+            "description": "Error cell border color"
+          }
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Default text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Disabled text color"
+        },
+        "mask": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Masked character color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    },
+    "separator": {
+      "width": {
+        "value": "8px",
+        "type": "dimension",
+        "description": "Separator dash width"
+      },
+      "color": {
+        "value": "{neutral.400}",
+        "type": "color",
+        "description": "Separator color"
+      }
+    }
+  }
+}

package/src/components/InputOtp/InputOtp.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,138 @@
+{
+  "input-otp": {
+    "gap": {
+      "value": "{inline.s}",
+      "type": "dimension",
+      "description": "Gap between input cells"
+    },
+    "cell": {
+      "size": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Cell width and height"
+      },
+      "fontSize": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Cell character font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Cell character font weight"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Cell border radius"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Default cell background"
+        },
+        "focus": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Focused cell background"
+        },
+        "filled": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Filled cell background"
+        },
+        "disabled": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Disabled cell background"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Cell border width"
+        },
+        "color": {
+          "default": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Default cell border color"
+          },
+          "hover": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Hover cell border color"
+          },
+          "focus": {
+            "value": "{brand.primary}",
+            "type": "color",
+            "description": "Focused cell border color"
+          },
+          "filled": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Filled cell border color"
+          },
+          "disabled": {
+            "value": "{border.default}",
+            "type": "color",
+            "description": "Disabled cell border color"
+          },
+          "error": {
+            "value": "{feedback.error}",
+            "type": "color",
+            "description": "Error cell border color"
+          }
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Default text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Disabled text color"
+        },
+        "mask": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Masked character color"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringOffset": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    },
+    "separator": {
+      "width": {
+        "value": "8px",
+        "type": "dimension",
+        "description": "Separator dash width"
+      },
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Separator color"
+      }
+    }
+  }
+}