@kouji-ui/components 0.1.1

package/src/input-otp/_examples/index.ts

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjInputOtpAutosubmitExample } from './input-otp.autosubmit.example';
+export { KjInputOtpExample } from './input-otp.example';
+export { KjInputOtpLengthsExample } from './input-otp.lengths.example';
+export { KjInputOtpMaskedExample } from './input-otp.masked.example';
+export { KjInputOtpReactiveExample } from './input-otp.reactive.example';
+export { KjInputOtpSeparatorExample } from './input-otp.separator.example';

package/src/input-otp/_examples/input-otp.autosubmit.example.ts

@@ -0,0 +1,71 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * Auto-submit: `(kjComplete)` fires when all 6 digits are entered.
+ * Focus stays on the last cell; the component shows a success message.
+ * The widget resets after 2 seconds to allow re-entry.
+ */
+@Component({
+  selector: 'kj-input-otp-autosubmit-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--kj-space-lg);
+      }
+      label {
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-default);
+      }
+      .success {
+        font-size: var(--kj-text-sm);
+        color: #22c55e;
+        font-family: var(--kj-font-mono);
+        min-height: 1.5rem;
+      }
+      .hint {
+        font-size: var(--kj-text-xs);
+        color: var(--kj-fg-muted);
+        min-height: 1.5rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="input-otp-autosubmit">Enter code to verify</label>
+    <kj-input-otp
+      id="input-otp-autosubmit"
+      [kjLength]="6"
+      [kjAutoSubmit]="true"
+      kjAriaLabel="Verification code"
+      [(ngModel)]="code"
+      (kjComplete)="onComplete($event)"
+    />
+    @if (submitted()) {
+      <span class="success" role="status"> Code {{ submittedCode() }} accepted! </span>
+    } @else {
+      <span class="hint">Fill all 6 digits to auto-submit</span>
+    }
+  `,
+})
+export class KjInputOtpAutosubmitExample {
+  code = '';
+  readonly submitted = signal(false);
+  readonly submittedCode = signal('');
+
+  onComplete(value: string): void {
+    this.submittedCode.set(value);
+    this.submitted.set(true);
+    // Reset after 2 seconds so the user can try again.
+    setTimeout(() => {
+      this.submitted.set(false);
+      this.code = '';
+    }, 2000);
+  }
+}

package/src/input-otp/_examples/input-otp.example.ts

@@ -0,0 +1,47 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * Default 6-digit OTP with `[(ngModel)]` two-way binding. Shows current value.
+ */
+@Component({
+  selector: 'kj-input-otp-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--kj-space-lg);
+      }
+      label {
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-default);
+      }
+      .value {
+        font-family: var(--kj-font-mono);
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-muted);
+        letter-spacing: 0.15em;
+        min-height: 1.25rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="input-otp-default">Verification code</label>
+    <kj-input-otp
+      id="input-otp-default"
+      [kjLength]="6"
+      kjAriaLabel="Verification code"
+      [(ngModel)]="code"
+    />
+    <span class="value">Value: {{ code || '——' }}</span>
+  `,
+})
+export class KjInputOtpExample {
+  code = '';
+}

package/src/input-otp/_examples/input-otp.lengths.example.ts

@@ -0,0 +1,67 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * Side-by-side comparison of 4-digit, 6-digit, and 8-digit OTP inputs.
+ */
+@Component({
+  selector: 'kj-input-otp-lengths-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--kj-space-xl);
+      }
+      .row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-sm);
+      }
+      label {
+        font-size: var(--kj-text-xs);
+        color: var(--kj-fg-muted);
+        font-family: var(--kj-font-mono);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <label for="input-otp-pin4">4-digit PIN</label>
+      <kj-input-otp
+        id="input-otp-pin4"
+        [kjLength]="4"
+        kjAriaLabel="4-digit PIN"
+        [(ngModel)]="pin4"
+      />
+    </div>
+    <div class="row">
+      <label for="input-otp-otp6">6-digit OTP (standard)</label>
+      <kj-input-otp
+        id="input-otp-otp6"
+        [kjLength]="6"
+        kjAriaLabel="6-digit code"
+        [(ngModel)]="otp6"
+      />
+    </div>
+    <div class="row">
+      <label for="input-otp-code8">8-digit backup code</label>
+      <kj-input-otp
+        id="input-otp-code8"
+        [kjLength]="8"
+        kjAriaLabel="8-digit backup code"
+        [(ngModel)]="code8"
+      />
+    </div>
+  `,
+})
+export class KjInputOtpLengthsExample {
+  pin4 = '';
+  otp6 = '';
+  code8 = '';
+}

package/src/input-otp/_examples/input-otp.masked.example.ts

@@ -0,0 +1,46 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * Masked PIN entry — cells render as `type="password"` so characters are
+ * hidden as the user types. Use for banking PIN re-entry or recovery codes.
+ */
+@Component({
+  selector: 'kj-input-otp-masked-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--kj-space-lg);
+      }
+      label {
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-default);
+      }
+      .hint {
+        font-size: var(--kj-text-xs);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="input-otp-masked">Enter your PIN</label>
+    <kj-input-otp
+      id="input-otp-masked"
+      [kjLength]="6"
+      [kjMask]="true"
+      kjAriaLabel="6-digit PIN"
+      [(ngModel)]="pin"
+    />
+    <span class="hint">Characters are hidden as you type</span>
+  `,
+})
+export class KjInputOtpMaskedExample {
+  pin = '';
+}

package/src/input-otp/_examples/input-otp.reactive.example.ts

@@ -0,0 +1,58 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * Reactive form with `Validators.required` and `Validators.minLength(6)`.
+ * Demonstrates the touched-gated invalid state with an error message.
+ */
+@Component({
+  selector: 'kj-input-otp-reactive-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, ReactiveFormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--kj-space-lg);
+      }
+      label {
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-default);
+      }
+      .error {
+        font-size: var(--kj-text-xs);
+        color: var(--kj-fg-danger);
+        font-family: var(--kj-font-mono);
+        min-height: 1.25rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="input-otp-reactive">Enter your 6-digit code</label>
+    <kj-input-otp
+      id="input-otp-reactive"
+      [kjLength]="6"
+      kjAriaLabel="6-digit verification code"
+      [kjInvalid]="ctrl.invalid && ctrl.touched"
+      [formControl]="ctrl"
+    />
+    @if (ctrl.invalid && ctrl.touched) {
+      <span class="error" role="alert">
+        @if (ctrl.hasError('required')) {
+          Code is required.
+        } @else if (ctrl.hasError('minlength')) {
+          Please enter all 6 digits.
+        }
+      </span>
+    } @else {
+      <span class="error"></span>
+    }
+  `,
+})
+export class KjInputOtpReactiveExample {
+  readonly ctrl = new FormControl('', [Validators.required, Validators.minLength(6)]);
+}

package/src/input-otp/_examples/input-otp.separator.example.ts

@@ -0,0 +1,49 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from '../input-otp';
+
+/**
+ * 6-digit OTP with a visual separator after cell index 2, rendering as
+ * `123–456`. The separator is purely decorative — the form value is always
+ * the plain concatenated string (e.g. `"123456"`).
+ */
+@Component({
+  selector: 'kj-input-otp-separator-example',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--kj-space-lg);
+      }
+      label {
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-default);
+      }
+      .value {
+        font-family: var(--kj-font-mono);
+        font-size: var(--kj-text-sm);
+        color: var(--kj-fg-muted);
+        letter-spacing: 0.1em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="input-otp-separator">Verification code</label>
+    <kj-input-otp
+      id="input-otp-separator"
+      [kjLength]="6"
+      [kjSeparatorAfter]="[2]"
+      kjAriaLabel="Verification code"
+      [(ngModel)]="code"
+    />
+    <span class="value">Value: {{ code || '——' }}</span>
+  `,
+})
+export class KjInputOtpSeparatorExample {
+  code = '';
+}

package/src/input-otp/index.ts

@@ -0,0 +1 @@
+export { KjInputOtpComponent } from './input-otp';

package/src/input-otp/input-otp.css

@@ -0,0 +1,87 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-input-otp — OTP input widget.
+
+   Each cell is a square input (min 44×44 — WCAG 2.5.5).
+   Cells sit in a flex row with a small gap between them.
+   A decorative separator dash can appear between groups.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-input-otp {
+    display: inline-flex;
+  }
+
+  .kj-input-otp__group {
+    --kj-otp-cell-size:         2.75rem; /* 44px — WCAG 2.5.5 touch target */
+    --kj-otp-cell-gap:          0.5rem;
+    --kj-otp-cell-bg:           var(--kj-bg-field);
+    --kj-otp-cell-fg:           var(--kj-fg-default);
+    --kj-otp-cell-border-color: var(--kj-border-default);
+    --kj-otp-cell-border-width: var(--kj-border);
+    --kj-otp-cell-radius:       var(--kj-radius-field);
+    --kj-otp-cell-font:         var(--kj-font-sans);
+    --kj-otp-cell-font-size:    var(--kj-text-base);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-otp-cell-gap);
+  }
+
+  .kj-input-otp__cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width:      var(--kj-otp-cell-size);
+    height:     var(--kj-otp-cell-size);
+    min-width:  var(--kj-otp-cell-size);
+    min-height: var(--kj-otp-cell-size);
+    background:    var(--kj-otp-cell-bg);
+    color:         var(--kj-otp-cell-fg);
+    border:        var(--kj-otp-cell-border-width) solid var(--kj-otp-cell-border-color);
+    border-radius: var(--kj-otp-cell-radius);
+    font:          var(--kj-otp-cell-font-size) / 1 var(--kj-otp-cell-font);
+    text-align:    center;
+    caret-color:   var(--kj-fg-primary);
+    transition:    border-color var(--kj-transition), box-shadow var(--kj-transition);
+    /* Remove default browser padding so content stays centred */
+    padding: 0;
+  }
+
+  /* Focus ring via data-focus-visible (KjFocusRing on each cell) */
+  .kj-input-otp__cell[data-focus-visible],
+  .kj-input-otp__cell:focus-visible {
+    outline:        2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+    --kj-otp-cell-border-color: var(--kj-fg-primary);
+  }
+
+  /* Invalid state */
+  .kj-input-otp__group[data-invalid] .kj-input-otp__cell,
+  .kj-input-otp__group[aria-invalid="true"] .kj-input-otp__cell {
+    --kj-otp-cell-border-color: var(--kj-fg-danger);
+  }
+
+  /* Disabled state */
+  .kj-input-otp__group[data-disabled] .kj-input-otp__cell,
+  .kj-input-otp__cell:disabled {
+    opacity:    0.55;
+    cursor:     not-allowed;
+    background: var(--kj-bg-surface);
+  }
+
+  /* Readonly */
+  .kj-input-otp__cell:read-only {
+    background: var(--kj-bg-surface);
+    cursor:     default;
+  }
+
+  /* Separator dash between cell groups */
+  .kj-input-otp__separator {
+    display:     inline-flex;
+    align-items: center;
+    color:       var(--kj-fg-muted);
+    font-size:   var(--kj-text-sm);
+    user-select: none;
+    padding:     0 0.125rem;
+  }
+}

package/src/input-otp/input-otp.playground.ts

@@ -0,0 +1,107 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputOtpComponent } from './input-otp';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover OTP length, the
+ * character-set restriction, the masked / non-masked render, plus the
+ * disabled and invalid states. Length 6 keeps a visual separator at
+ * index 2 to anchor the decorative-dash story.
+ */
+const length = signal<4 | 6 | 8>(6);
+const charSet = signal<'digits' | 'alphanumeric'>('digits');
+const masked = signal(false);
+const disabled = signal(false);
+const invalid = signal(false);
+const withSeparator = signal(false);
+const value = signal('');
+
+@Component({
+  selector: 'kj-input-otp-playground',
+  standalone: true,
+  imports: [KjInputOtpComponent, FormsModule],
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--kj-space-lg);
+    }
+  `],
+  template: `
+    <kj-input-otp
+      [kjLength]="length()"
+      [kjCharSet]="charSet()"
+      [kjMask]="masked()"
+      [kjDisabled]="disabled()"
+      [kjInvalid]="invalid()"
+      [kjSeparatorAfter]="withSeparator() ? [separatorIndex()] : []"
+      kjAriaLabel="Verification code"
+      [(ngModel)]="value"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjInputOtpPlaygroundDemo {
+  protected readonly length = length;
+  protected readonly charSet = charSet;
+  protected readonly masked = masked;
+  protected readonly disabled = disabled;
+  protected readonly invalid = invalid;
+  protected readonly withSeparator = withSeparator;
+  protected readonly value = value;
+
+  protected separatorIndex(): number {
+    return Math.floor(this.length() / 2) - 1;
+  }
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjInputOtpPlaygroundDemo,
+  state: {
+    length: length as unknown as ReturnType<typeof signal>,
+    charSet: charSet as unknown as ReturnType<typeof signal>,
+    masked: masked as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    invalid: invalid as unknown as ReturnType<typeof signal>,
+    withSeparator: withSeparator as unknown as ReturnType<typeof signal>,
+    value: value as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'chips', name: 'length', label: 'length', options: [4, 6, 8] },
+    {
+      kind: 'chips',
+      name: 'charSet',
+      label: 'charset',
+      options: ['digits', 'alphanumeric'],
+    },
+    { kind: 'toggle', name: 'masked', label: 'masked' },
+    { kind: 'toggle', name: 'withSeparator', label: 'with separator' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+    { kind: 'toggle', name: 'invalid', label: 'invalid' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      length: number;
+      charSet: string;
+      masked: boolean;
+      disabled: boolean;
+      invalid: boolean;
+      withSeparator: boolean;
+    };
+    const attrs: string[] = [
+      `[kjLength]="${s.length}"`,
+      `kjCharSet="${s.charSet}"`,
+      `kjAriaLabel="Verification code"`,
+    ];
+    if (s.masked) attrs.push('[kjMask]="true"');
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    if (s.invalid) attrs.push('[kjInvalid]="true"');
+    if (s.withSeparator) {
+      const idx = Math.floor(s.length / 2) - 1;
+      attrs.push(`[kjSeparatorAfter]="[${idx}]"`);
+    }
+    return `<kj-input-otp\n  ${attrs.join('\n  ')}\n/>`;
+  },
+};