@arclux/arc-ui 1.0.0

package/src/input/pin-input.js

@@ -0,0 +1,294 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcPinInput extends LitElement {
+  static properties = {
+    length:    { type: Number },
+    value:     { type: String, reflect: true },
+    disabled:  { type: Boolean, reflect: true },
+    mask:      { type: Boolean, reflect: true },
+    type:      { type: String, reflect: true },
+    separator: { type: Number },
+    label:     { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .pin {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .pin__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);
+      }
+
+      .pin__boxes {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .pin__separator {
+        font-family: var(--font-mono);
+        font-size: var(--text-lg);
+        color: var(--text-ghost);
+        user-select: none;
+        line-height: 1;
+        padding: 0 2px;
+      }
+
+      .pin__box {
+        width: 42px;
+        height: 48px;
+        text-align: center;
+        font-family: var(--font-mono);
+        font-size: var(--text-lg);
+        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;
+        -moz-appearance: textfield;
+      }
+
+      .pin__box::-webkit-outer-spin-button,
+      .pin__box::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .pin__box::placeholder {
+        color: var(--text-ghost);
+      }
+
+      .pin__box:hover:not(:focus) {
+        border-color: var(--border-bright);
+      }
+
+      .pin__box:focus {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+        background: var(--bg-surface);
+      }
+
+      .pin__box:focus-visible {
+        outline: none;
+        border-color: rgba(var(--accent-primary-rgb), 0.4);
+        box-shadow: var(--focus-glow);
+      }
+
+      .pin__box:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      :host([mask]) .pin__box {
+        -webkit-text-security: disc;
+      }
+
+      @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 = 4;
+    this.value = '';
+    this.disabled = false;
+    this.mask = false;
+    this.type = 'number';
+    this.separator = 0;
+    this.label = '';
+  }
+
+  get _chars() {
+    const chars = (this.value || '').split('');
+    return Array.from({ length: this.length }, (_, i) => chars[i] || '');
+  }
+
+  _getInputMode() {
+    if (this.type === 'number') return 'numeric';
+    return 'text';
+  }
+
+  _getPattern() {
+    if (this.type === 'number') return '[0-9]';
+    if (this.type === 'alphanumeric') return '[a-zA-Z0-9]';
+    return null;
+  }
+
+  _isValidChar(ch) {
+    if (this.type === 'number') return /^[0-9]$/.test(ch);
+    if (this.type === 'alphanumeric') return /^[a-zA-Z0-9]$/.test(ch);
+    return ch.length === 1;
+  }
+
+  _getBoxes() {
+    return Array.from(this.shadowRoot.querySelectorAll('.pin__box'));
+  }
+
+  _focusBox(index) {
+    const boxes = this._getBoxes();
+    if (boxes[index]) boxes[index].focus();
+  }
+
+  _buildValue() {
+    const boxes = this._getBoxes();
+    return boxes.map(b => b.value).join('');
+  }
+
+  _emitChange() {
+    const val = this._buildValue();
+    this.value = val;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: val },
+      bubbles: true,
+      composed: true,
+    }));
+
+    if (val.length === this.length) {
+      this.dispatchEvent(new CustomEvent('arc-complete', {
+        detail: { value: val },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
+  _onInput(e, index) {
+    const input = e.target;
+    let ch = input.value;
+
+    // Only take the last character if multiple were typed
+    if (ch.length > 1) ch = ch.slice(-1);
+
+    if (ch && !this._isValidChar(ch)) {
+      input.value = this._chars[index] || '';
+      return;
+    }
+
+    input.value = ch;
+    this._emitChange();
+
+    // Auto-advance
+    if (ch && index < this.length - 1) {
+      this._focusBox(index + 1);
+    }
+  }
+
+  _onKeydown(e, index) {
+    if (e.key === 'Backspace') {
+      const input = e.target;
+      if (!input.value && index > 0) {
+        e.preventDefault();
+        const boxes = this._getBoxes();
+        boxes[index - 1].value = '';
+        this._focusBox(index - 1);
+        this._emitChange();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      this._focusBox(index - 1);
+    } else if (e.key === 'ArrowRight' && index < this.length - 1) {
+      e.preventDefault();
+      this._focusBox(index + 1);
+    } else if (e.key === 'Delete') {
+      e.target.value = '';
+      this._emitChange();
+    }
+  }
+
+  _onPaste(e, index) {
+    e.preventDefault();
+    const pasted = (e.clipboardData || window.clipboardData).getData('text').trim();
+    if (!pasted) return;
+
+    const boxes = this._getBoxes();
+    let pos = index;
+    for (const ch of pasted) {
+      if (pos >= this.length) break;
+      if (this._isValidChar(ch)) {
+        boxes[pos].value = ch;
+        pos++;
+      }
+    }
+
+    this._emitChange();
+
+    // Focus last filled or next empty box
+    const focusIdx = Math.min(pos, this.length - 1);
+    this._focusBox(focusIdx);
+  }
+
+  _onFocus(e) {
+    // Select content on focus for easy replacement
+    e.target.select();
+  }
+
+  _needsSeparator(index) {
+    if (!this.separator || this.separator <= 0) return false;
+    return (index + 1) < this.length && (index + 1) % this.separator === 0;
+  }
+
+  render() {
+    const chars = this._chars;
+    const pattern = this._getPattern();
+    const inputMode = this._getInputMode();
+
+    return html`
+      <div class="pin" part="pin">
+        ${this.label ? html`<span class="pin__label" part="label">${this.label}</span>` : ''}
+        <div class="pin__boxes" role="group" aria-label=${this.label || 'PIN input'} part="boxes">
+          ${chars.map((ch, i) => html`
+            <input
+              class="pin__box"
+              type=${this.mask ? 'password' : 'text'}
+              inputmode=${inputMode}
+              maxlength="1"
+              autocomplete="one-time-code"
+              .value=${ch}
+              ?disabled=${this.disabled}
+              aria-label=${`${this.label || 'PIN'} digit ${i + 1}`}
+              ${pattern ? html`pattern=${pattern}` : nothing}
+              @input=${(e) => this._onInput(e, i)}
+              @keydown=${(e) => this._onKeydown(e, i)}
+              @paste=${(e) => this._onPaste(e, i)}
+              @focus=${this._onFocus}
+              part="box"
+            />
+            ${this._needsSeparator(i) ? html`<span class="pin__separator" aria-hidden="true">&ndash;</span>` : ''}
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-pin-input', ArcPinInput);

package/src/input/radio-group.js

@@ -0,0 +1,177 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './radio.js';
+
+export class ArcRadioGroup extends LitElement {
+  static formAssociated = true;
+
+  static properties = {
+    value:       { type: String, reflect: true },
+    name:        { type: String },
+    disabled:    { type: Boolean, reflect: true },
+    orientation: { type: String, reflect: true },
+    _radios:     { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+
+      .radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+      }
+
+      :host([orientation="horizontal"]) .radio-group {
+        flex-direction: row;
+        gap: var(--space-lg);
+      }
+
+      .radio {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-sm);
+        cursor: pointer;
+        min-height: var(--touch-min);
+      }
+
+      .radio__circle {
+        position: relative;
+        width: 18px;
+        height: 18px;
+        border-radius: var(--radius-full);
+        border: 1px solid var(--border-bright);
+        background: var(--bg-surface);
+        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .radio__dot {
+        width: 8px;
+        height: 8px;
+        border-radius: var(--radius-full);
+        background: var(--accent-primary);
+        opacity: 0;
+        transform: scale(0);
+        transition: opacity var(--transition-fast), transform var(--transition-fast);
+      }
+
+      .radio[aria-checked="true"] .radio__circle {
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
+      }
+
+      .radio[aria-checked="true"] .radio__dot {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .radio__label {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-secondary);
+        user-select: none;
+      }
+
+      .radio__circle:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-glow);
+      }
+
+      .radio-group__slot-host { display: none; }
+
+      @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._internals = this.attachInternals();
+    this.value = '';
+    this.name = '';
+    this.disabled = false;
+    this.orientation = 'vertical';
+    this._radios = [];
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      this._internals.setFormValue(this.value);
+    }
+  }
+
+  _onSlotChange(e) {
+    this._radios = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-RADIO');
+  }
+
+  _select(val) {
+    if (this.disabled) return;
+    this.value = val;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _handleKeydown(e, index) {
+    const opts = this._radios;
+    let next;
+
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') next = (index + 1) % opts.length;
+    else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') next = (index - 1 + opts.length) % opts.length;
+    else return;
+
+    e.preventDefault();
+    this._select(opts[next].value);
+    this.updateComplete.then(() => {
+      const radios = this.shadowRoot.querySelectorAll('.radio__circle');
+      radios[next]?.focus();
+    });
+  }
+
+  render() {
+    return html`
+      <div class="radio-group__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="radio-group" role="radiogroup" aria-label=${this.name} part="group">
+        ${this._radios.map((opt, i) => html`
+          <div
+            class="radio"
+            role="radio"
+            aria-checked=${opt.value === this.value ? 'true' : 'false'}
+            @click=${() => this._select(opt.value)}
+          >
+            <div
+              class="radio__circle"
+              tabindex=${opt.value === this.value || (!this.value && i === 0) ? '0' : '-1'}
+              @keydown=${(e) => this._handleKeydown(e, i)}
+              part="circle"
+            >
+              <div class="radio__dot"></div>
+            </div>
+            <span class="radio__label" part="label">${opt.label}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-radio-group', ArcRadioGroup);

package/src/input/radio.js

@@ -0,0 +1,28 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcRadio extends LitElement {
+  static properties = {
+    value:    { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.value = '';
+    this.disabled = false;
+  }
+
+  get label() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-radio', ArcRadio);

package/src/input/rating.js

@@ -0,0 +1,195 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcRating extends LitElement {
+  static properties = {
+    value:    { type: Number, reflect: true },
+    max:      { type: Number, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: inline-flex; }
+      :host([disabled]) { pointer-events: none; opacity: 0.4; }
+      :host([readonly]) { pointer-events: none; }
+
+      .rating {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        outline: none;
+        border-radius: var(--radius-sm);
+        padding: var(--space-xs);
+      }
+
+      .rating:focus-visible {
+        box-shadow: var(--focus-glow);
+      }
+
+      .rating__star {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0;
+        background: none;
+        border: none;
+        color: var(--border-default);
+        transition:
+          color var(--transition-fast),
+          transform var(--transition-fast),
+          filter var(--transition-fast);
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .rating__star--filled {
+        color: var(--accent-primary);
+        filter: drop-shadow(0 0 4px rgba(var(--accent-primary-rgb), 0.4))
+               drop-shadow(0 0 10px rgba(var(--accent-primary-rgb), 0.2));
+      }
+
+      .rating__star--hovered {
+        color: var(--accent-primary);
+        filter: drop-shadow(0 0 6px rgba(var(--accent-primary-rgb), 0.5))
+               drop-shadow(0 0 16px rgba(var(--accent-primary-rgb), 0.3));
+      }
+
+      .rating__star:not(.rating__star--filled):not(.rating__star--hovered):hover {
+        color: var(--border-bright);
+      }
+
+      .rating__star svg {
+        width: 28px;
+        height: 28px;
+        pointer-events: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .rating__star { transition: none; }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 5;
+    this.disabled = false;
+    this.readonly = false;
+    this._hoverValue = 0;
+  }
+
+  _onStarClick(index) {
+    if (this.disabled || this.readonly) return;
+    this.value = index;
+    this.dispatchEvent(new CustomEvent('arc-change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _onStarEnter(index) {
+    if (this.disabled || this.readonly) return;
+    this._hoverValue = index;
+    this.requestUpdate();
+  }
+
+  _onStarLeave() {
+    if (this.disabled || this.readonly) return;
+    this._hoverValue = 0;
+    this.requestUpdate();
+  }
+
+  _onKeydown(e) {
+    if (this.disabled || this.readonly) return;
+
+    let newValue = this.value;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        e.preventDefault();
+        newValue = Math.min(this.value + 1, this.max);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        e.preventDefault();
+        newValue = Math.max(this.value - 1, 1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        newValue = 1;
+        break;
+      case 'End':
+        e.preventDefault();
+        newValue = this.max;
+        break;
+      default:
+        return;
+    }
+
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.dispatchEvent(new CustomEvent('arc-change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
+  _renderStar(index) {
+    const displayValue = this._hoverValue || this.value;
+    const filled = index <= displayValue;
+    const hovered = this._hoverValue > 0 && index <= this._hoverValue;
+
+    const starPath = filled
+      ? 'M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'
+      : 'M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z';
+
+    return html`
+      <span
+        class="rating__star ${filled ? 'rating__star--filled' : ''} ${hovered ? 'rating__star--hovered' : ''}"
+        @click=${() => this._onStarClick(index)}
+        @mouseenter=${() => this._onStarEnter(index)}
+        @mouseleave=${this._onStarLeave}
+        part="star"
+      >
+        <svg viewBox="0 0 24 24" fill=${filled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+          <path d=${starPath} />
+        </svg>
+      </span>
+    `;
+  }
+
+  render() {
+    const stars = [];
+    for (let i = 1; i <= this.max; i++) {
+      stars.push(this._renderStar(i));
+    }
+
+    return html`
+      <div
+        class="rating"
+        role="slider"
+        aria-label="Rating"
+        aria-valuemin="1"
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-readonly=${this.readonly ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @keydown=${this._onKeydown}
+        part="rating"
+      >
+        ${stars}
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-rating', ArcRating);