@kouji-ui/components 0.1.1 → 0.1.2

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

@@ -1,8 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,87 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .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

@@ -1,107 +0,0 @@
-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/>`;
-  },
-};