@arclux/arc-ui 1.0.0

package/src/input/number-input.js

@@ -0,0 +1,239 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+let numberInputIdCounter = 0;
+
+export class ArcNumberInput extends LitElement {
+  static properties = {
+    value:    { type: Number, reflect: true },
+    min:      { type: Number },
+    max:      { type: Number },
+    step:     { type: Number },
+    label:    { type: String },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .number-input {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .number-input__label {
+        font-family: var(--font-accent);
+        font-weight: 600;
+        font-size: var(--label-inline-size);
+        letter-spacing: var(--label-inline-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+
+      .number-input__controls {
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        background: var(--bg-surface);
+        overflow: hidden;
+        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+      }
+
+      .number-input__controls:focus-within {
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      .number-input__btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        background: transparent;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: var(--text-md);
+        font-family: var(--font-body);
+        font-weight: 600;
+        line-height: 1;
+        transition:
+          background var(--transition-fast),
+          color var(--transition-fast);
+        flex-shrink: 0;
+      }
+
+      .number-input__btn:hover:not(:disabled) {
+        background: var(--bg-hover);
+        color: var(--text-primary);
+      }
+
+      .number-input__btn:active:not(:disabled) {
+        background: var(--bg-elevated);
+      }
+
+      .number-input__btn:disabled {
+        color: var(--text-ghost);
+        cursor: not-allowed;
+      }
+
+      .number-input__btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+        z-index: 1;
+        position: relative;
+      }
+
+      .number-input__field {
+        width: 56px;
+        text-align: center;
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: 500;
+        color: var(--text-primary);
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--border-subtle);
+        border-right: 1px solid var(--border-subtle);
+        padding: var(--space-sm) var(--space-xs);
+        box-sizing: border-box;
+        -moz-appearance: textfield;
+      }
+
+      .number-input__field::-webkit-inner-spin-button,
+      .number-input__field::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .number-input__field:focus {
+        outline: none;
+        border-color: var(--accent-primary);
+        box-shadow: var(--focus-glow);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .number-input__btn,
+        .number-input__controls { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = 1;
+    this.label = '';
+    this.disabled = false;
+    this._fieldId = `arc-number-input-${++numberInputIdCounter}`;
+  }
+
+  get _atMin() {
+    return this.min !== undefined && this.min !== null && this.value <= this.min;
+  }
+
+  get _atMax() {
+    return this.max !== undefined && this.max !== null && this.value >= this.max;
+  }
+
+  _clamp(val) {
+    let clamped = val;
+    if (this.min !== undefined && this.min !== null) clamped = Math.max(this.min, clamped);
+    if (this.max !== undefined && this.max !== null) clamped = Math.min(this.max, clamped);
+    return clamped;
+  }
+
+  _setValue(newValue) {
+    const clamped = this._clamp(newValue);
+    if (clamped === this.value) return;
+    this.value = clamped;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _decrement() {
+    this._setValue(this.value - this.step);
+  }
+
+  _increment() {
+    this._setValue(this.value + this.step);
+  }
+
+  _handleInput(e) {
+    const parsed = parseFloat(e.target.value);
+    if (!isNaN(parsed)) {
+      this._setValue(parsed);
+    }
+  }
+
+  _handleKeydown(e) {
+    const multiplier = e.shiftKey ? 10 : 1;
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this._setValue(this.value + this.step * multiplier);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this._setValue(this.value - this.step * multiplier);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="number-input" part="wrapper">
+        ${this.label ? html`
+          <label class="number-input__label" for=${this._fieldId} part="label">${this.label}</label>
+        ` : ''}
+        <div class="number-input__controls" part="controls">
+          <button
+            class="number-input__btn"
+            type="button"
+            tabindex="-1"
+            aria-label="Decrease"
+            ?disabled=${this.disabled || this._atMin}
+            @click=${this._decrement}
+            part="decrement"
+          >&minus;</button>
+          <input
+            class="number-input__field"
+            id=${this._fieldId}
+            type="number"
+            role="spinbutton"
+            aria-valuemin=${this.min ?? ''}
+            aria-valuemax=${this.max ?? ''}
+            aria-valuenow=${this.value}
+            aria-label=${this.label || 'Number'}
+            .value=${String(this.value)}
+            ?disabled=${this.disabled}
+            @change=${this._handleInput}
+            @keydown=${this._handleKeydown}
+            part="field"
+          />
+          <button
+            class="number-input__btn"
+            type="button"
+            tabindex="-1"
+            aria-label="Increase"
+            ?disabled=${this.disabled || this._atMax}
+            @click=${this._increment}
+            part="increment"
+          >&plus;</button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-number-input', ArcNumberInput);

package/src/input/otp-input.js

@@ -0,0 +1,221 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcOtpInput extends LitElement {
+  static properties = {
+    length:   { type: Number, reflect: true },
+    value:    { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    type:     { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .otp {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .otp__box {
+        width: 44px;
+        height: 52px;
+        text-align: center;
+        font-family: var(--font-mono);
+        font-size: var(--text-md);
+        font-weight: 600;
+        color: var(--text-primary);
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-md);
+        padding: 0;
+        caret-color: var(--accent-primary);
+        transition:
+          border-color var(--transition-fast),
+          box-shadow var(--transition-fast),
+          background var(--transition-fast);
+        box-sizing: border-box;
+      }
+
+      .otp__box::placeholder {
+        color: var(--text-ghost);
+      }
+
+      .otp__box:hover:not(:focus) {
+        border-color: var(--border-bright);
+      }
+
+      .otp__box:focus {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+        background: var(--bg-surface);
+      }
+
+      .otp__box:disabled {
+        cursor: not-allowed;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.length = 6;
+    this.value = '';
+    this.disabled = false;
+    this.type = 'number';
+  }
+
+  get _chars() {
+    const chars = (this.value || '').split('');
+    while (chars.length < this.length) chars.push('');
+    return chars.slice(0, this.length);
+  }
+
+  _getInputs() {
+    return this.shadowRoot.querySelectorAll('.otp__box');
+  }
+
+  _focusBox(index) {
+    const inputs = this._getInputs();
+    if (index >= 0 && index < inputs.length) {
+      inputs[index].focus();
+      inputs[index].select();
+    }
+  }
+
+  _updateValue() {
+    const inputs = this._getInputs();
+    const chars = [];
+    inputs.forEach(input => chars.push(input.value));
+    this.value = chars.join('');
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onInput(e, index) {
+    const input = e.target;
+    let char = input.value;
+
+    // For number type, filter non-digits
+    if (this.type === 'number') {
+      char = char.replace(/[^0-9]/g, '');
+    }
+
+    // Take only the last character typed
+    if (char.length > 1) {
+      char = char.slice(-1);
+    }
+
+    input.value = char;
+    this._updateValue();
+
+    // Auto-advance to next box
+    if (char && index < this.length - 1) {
+      this._focusBox(index + 1);
+    }
+  }
+
+  _onKeydown(e, index) {
+    switch (e.key) {
+      case 'Backspace':
+        if (!e.target.value && index > 0) {
+          e.preventDefault();
+          this._focusBox(index - 1);
+          const inputs = this._getInputs();
+          inputs[index - 1].value = '';
+          this._updateValue();
+        }
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (index > 0) this._focusBox(index - 1);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        if (index < this.length - 1) this._focusBox(index + 1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        this._focusBox(0);
+        break;
+      case 'End':
+        e.preventDefault();
+        this._focusBox(this.length - 1);
+        break;
+    }
+  }
+
+  _onPaste(e, index) {
+    e.preventDefault();
+    const pasted = (e.clipboardData.getData('text') || '').trim();
+    let chars = pasted.split('');
+
+    if (this.type === 'number') {
+      chars = chars.filter(c => /[0-9]/.test(c));
+    }
+
+    const inputs = this._getInputs();
+    for (let i = 0; i < chars.length && (index + i) < this.length; i++) {
+      inputs[index + i].value = chars[i];
+    }
+
+    this._updateValue();
+
+    // Focus the box after the last pasted character, or the last box
+    const nextIndex = Math.min(index + chars.length, this.length - 1);
+    this._focusBox(nextIndex);
+  }
+
+  _onFocus(e) {
+    e.target.select();
+  }
+
+  render() {
+    const chars = this._chars;
+    const inputMode = this.type === 'number' ? 'numeric' : 'text';
+    const pattern = this.type === 'number' ? '[0-9]*' : undefined;
+
+    return html`
+      <div class="otp" role="group" aria-label="One-time password input" part="otp">
+        ${chars.map((char, i) => html`
+          <input
+            class="otp__box"
+            type="text"
+            inputmode=${inputMode}
+            pattern=${pattern || '.*'}
+            maxlength="2"
+            autocomplete="one-time-code"
+            .value=${char}
+            ?disabled=${this.disabled}
+            aria-label=${`Digit ${i + 1} of ${this.length}`}
+            @input=${(e) => this._onInput(e, i)}
+            @keydown=${(e) => this._onKeydown(e, i)}
+            @paste=${(e) => this._onPaste(e, i)}
+            @focus=${this._onFocus}
+            part="box"
+          />
+        `)}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-otp-input', ArcOtpInput);