@kouji-ui/core 0.0.3 → 0.1.1

package/src/dialog/_examples/dialog.confirm.example.ts

@@ -0,0 +1,145 @@
+import { Component, inject, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog as KjDialogService } from '../dialog.service';
+import { KjDialogRef } from '../dialog.ref';
+import { KjButton } from '../../button/button';
+
+@Component({
+  selector: 'kj-example-dialog-confirm-content',
+  standalone: true,
+  imports: [KjButton],
+  styles: [
+    `
+      :host {
+        display: block;
+        background: var(--kj-surface);
+        border: 1px solid var(--kj-border);
+        border-radius: var(--kj-radius-lg);
+        padding: 1.5rem;
+        min-width: 22rem;
+        color: var(--kj-text);
+        font-family: var(--kj-font);
+        box-shadow: var(--kj-shadow-hard);
+      }
+      h2 {
+        margin: 0 0 0.5rem;
+        font-size: 1.125rem;
+        color: var(--kj-text);
+      }
+      .dialog-body {
+        margin: 0 0 1.5rem;
+        font-size: 0.875rem;
+        color: var(--kj-text-muted);
+        line-height: 1.6;
+      }
+      .dialog-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: flex-end;
+      }
+      .dialog-actions button[kjButton] {
+        padding: 0.4rem 1rem;
+        font-size: 0.8125rem;
+      }
+      [data-variant='destructive'] {
+        background: var(--kj-destructive);
+        color: #fff;
+      }
+      [data-variant='outline'] {
+        background: transparent;
+        color: var(--kj-text);
+        border: 1px solid var(--kj-border);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <h2>Are you absolutely sure?</h2>
+    <p class="dialog-body">
+      This action cannot be undone. All your data will be permanently removed.
+    </p>
+    <div class="dialog-actions">
+      <button kjButton [kjVariant]="'outline'" (click)="ref.close('cancelled')">Cancel</button>
+      <button kjButton [kjVariant]="'destructive'" (click)="ref.close('confirmed')">
+        Yes, delete
+      </button>
+    </div>
+  `,
+})
+export class DialogConfirmContent {
+  readonly ref = inject<KjDialogRef<DialogConfirmContent, 'confirmed' | 'cancelled'>>(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-example-dialog-confirm',
+  standalone: true,
+  imports: [KjButton],
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        padding: 3rem 2rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 160px;
+        flex-direction: column;
+        color: var(--kj-text);
+      }
+      .status {
+        font-size: 0.8125rem;
+        color: var(--kj-text-muted);
+        min-height: 1.25rem;
+      }
+      .status.confirmed {
+        color: var(--kj-accent);
+      }
+      .status.cancelled {
+        color: var(--kj-destructive);
+      }
+      button[kjButton] {
+        padding: 0.5rem 1.5rem;
+        border: var(--kj-btn-border);
+        cursor: pointer;
+        font-family: var(--kj-font);
+        font-size: 0.875rem;
+      }
+      [data-variant='destructive'] {
+        background: var(--kj-destructive);
+        color: #fff;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <button kjButton [kjVariant]="'destructive'" (click)="open()">Delete Account</button>
+    <span
+      class="status"
+      [class.confirmed]="result() === 'confirmed'"
+      [class.cancelled]="result() === 'cancelled'"
+    >
+      {{
+        result() === 'confirmed'
+          ? '✓ Account deleted'
+          : result() === 'cancelled'
+            ? '✕ Cancelled'
+            : ''
+      }}
+    </span>
+  `,
+})
+export class DialogConfirmExample {
+  private readonly dialog = inject(KjDialogService);
+  readonly result = signal<'confirmed' | 'cancelled' | null>(null);
+
+  async open() {
+    const ref = this.dialog.open<DialogConfirmContent, 'confirmed' | 'cancelled'>(
+      DialogConfirmContent,
+      { alert: true },
+    );
+    const value = await ref.result;
+    if (value === 'confirmed' || value === 'cancelled') this.result.set(value);
+  }
+}

package/src/dialog/_examples/dialog.example.ts

@@ -0,0 +1,106 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog as KjDialogService } from '../dialog.service';
+import { KjDialogRef } from '../dialog.ref';
+import { KjButton } from '../../button/button';
+
+@Component({
+  selector: 'kj-example-dialog-basic-content',
+  standalone: true,
+  imports: [KjButton],
+  styles: [
+    `
+      :host {
+        display: block;
+        background: var(--kj-surface);
+        border: 1px solid var(--kj-border);
+        border-radius: var(--kj-radius-lg);
+        padding: 1.5rem;
+        min-width: 20rem;
+        color: var(--kj-text);
+        font-family: var(--kj-font);
+        box-shadow: var(--kj-shadow-hard);
+      }
+      h2 {
+        margin: 0 0 0.5rem;
+        font-size: 1.125rem;
+        color: var(--kj-text);
+      }
+      .dialog-body {
+        margin: 0 0 1.5rem;
+        font-size: 0.875rem;
+        color: var(--kj-text-muted);
+        line-height: 1.6;
+      }
+      .dialog-actions {
+        display: flex;
+        gap: 0.75rem;
+        justify-content: flex-end;
+      }
+      .dialog-actions button[kjButton] {
+        padding: 0.4rem 1rem;
+        font-size: 0.8125rem;
+      }
+      [data-variant='default'] {
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+      }
+      [data-variant='outline'] {
+        background: transparent;
+        color: var(--kj-text);
+        border: 1px solid var(--kj-border);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <h2>Edit Profile</h2>
+    <p class="dialog-body">Make changes to your profile settings here.</p>
+    <div class="dialog-actions">
+      <button kjButton [kjVariant]="'outline'" (click)="ref.close('cancel')">Cancel</button>
+      <button kjButton [kjVariant]="'default'" (click)="ref.close('save')">Save Changes</button>
+    </div>
+  `,
+})
+export class DialogBasicContent {
+  readonly ref = inject<KjDialogRef<DialogBasicContent>>(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-example-dialog-basic',
+  standalone: true,
+  imports: [KjButton],
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 2rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 160px;
+      }
+      button[kjButton] {
+        padding: 0.5rem 1.5rem;
+        border: var(--kj-btn-border);
+        cursor: pointer;
+        font-family: var(--kj-font);
+        font-size: 0.875rem;
+        transition: var(--kj-transition);
+      }
+      [data-variant='default'] {
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <button kjButton [kjVariant]="'default'" (click)="open()">Open Dialog</button> `,
+})
+export class DialogBasicExample {
+  private readonly dialog = inject(KjDialogService);
+  open() {
+    this.dialog.open(DialogBasicContent);
+  }
+}

package/src/dialog/_examples/dialog.finance.example.ts

@@ -0,0 +1,121 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog as KjDialogService } from '../dialog.service';
+import { KjDialogRef } from '../dialog.ref';
+
+@Component({
+  selector: 'kj-example-dialog-finance-content',
+  standalone: true,
+  host: { class: 'kj-theme-finance' },
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: block;
+        background: var(--kj-surface);
+        border: 1px solid var(--kj-border);
+        border-radius: var(--kj-radius-lg);
+        padding: 1.5rem;
+        min-width: 22rem;
+        box-shadow: var(--kj-shadow-hard);
+        font-family: var(--kj-font);
+        color: var(--kj-text);
+      }
+      h2 {
+        margin: 0 0 0.375rem;
+        font-size: 1.0625rem;
+        font-weight: 600;
+        color: var(--kj-text);
+      }
+      .dialog-body {
+        margin: 0 0 1.5rem;
+        font-size: 0.875rem;
+        color: var(--kj-text-muted);
+        line-height: 1.6;
+      }
+      .dialog-actions {
+        display: flex;
+        gap: 0.5rem;
+        justify-content: flex-end;
+      }
+      button {
+        padding: 0.4rem 1rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        border-radius: var(--kj-radius-md);
+        cursor: pointer;
+        font-family: var(--kj-font);
+      }
+      .btn-cancel {
+        background: var(--kj-surface);
+        color: var(--kj-text);
+        border: 1px solid var(--kj-border);
+      }
+      .btn-cancel:hover {
+        background: var(--kj-bg);
+      }
+      .btn-primary {
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+        border: 1px solid var(--kj-accent);
+      }
+      .btn-primary:hover {
+        background: #2563eb;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <h2>Edit Profile</h2>
+    <p class="dialog-body">Make changes to your profile settings here.</p>
+    <div class="dialog-actions">
+      <button class="btn-cancel" (click)="ref.close('cancel')">Cancel</button>
+      <button class="btn-primary" (click)="ref.close('save')">Save Changes</button>
+    </div>
+  `,
+})
+export class DialogFinanceContent {
+  readonly ref = inject<KjDialogRef<DialogFinanceContent>>(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-example-dialog-finance',
+  standalone: true,
+  styleUrls: ['../../styles/docs-themes.css'],
+  host: { class: 'kj-theme-finance' },
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 2rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 160px;
+      }
+      button {
+        padding: 0.45rem 1.125rem;
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+        border: var(--kj-btn-border);
+        border-color: var(--kj-accent);
+        border-radius: var(--kj-radius-md);
+        cursor: pointer;
+        font-family: var(--kj-font);
+        font-size: 0.875rem;
+        font-weight: 500;
+      }
+      button:hover {
+        background: #2563eb;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <button (click)="open()">Open Dialog</button> `,
+})
+export class DialogFinanceExample {
+  private readonly dialog = inject(KjDialogService);
+  open() {
+    this.dialog.open(DialogFinanceContent);
+  }
+}

package/src/dialog/_examples/dialog.retro.example.ts

@@ -0,0 +1,126 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { KjDialog as KjDialogService } from '../dialog.service';
+import { KjDialogRef } from '../dialog.ref';
+
+@Component({
+  selector: 'kj-example-dialog-retro-content',
+  standalone: true,
+  host: { class: 'kj-theme-retro' },
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: block;
+        background: var(--kj-surface);
+        border: var(--kj-btn-border);
+        padding: 1.5rem;
+        min-width: 20rem;
+        box-shadow: var(--kj-shadow-hard);
+        font-family: var(--kj-font);
+        color: var(--kj-text);
+      }
+      h2 {
+        margin: 0 0 0.5rem;
+        font-size: 1rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        border-bottom: 2px solid var(--kj-border);
+        padding-bottom: 0.5rem;
+        color: var(--kj-text);
+      }
+      .dialog-body {
+        margin: 0.75rem 0 1.5rem;
+        font-size: 0.8rem;
+        color: var(--kj-text-muted);
+        line-height: 1.6;
+      }
+      .dialog-actions {
+        display: flex;
+        gap: 0.5rem;
+        justify-content: flex-end;
+      }
+      button {
+        padding: 0.3rem 0.875rem;
+        font-family: var(--kj-font);
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        background: var(--kj-surface);
+        color: var(--kj-text);
+        border: var(--kj-btn-border);
+        cursor: pointer;
+        box-shadow: var(--kj-shadow-sm);
+        transition: var(--kj-transition);
+      }
+      button:hover {
+        transform: translate(-1px, -1px);
+        box-shadow: var(--kj-shadow-md);
+      }
+      .btn-primary {
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <h2>Edit Profile</h2>
+    <p class="dialog-body">Make changes to your profile settings here.</p>
+    <div class="dialog-actions">
+      <button (click)="ref.close('cancel')">Cancel</button>
+      <button class="btn-primary" (click)="ref.close('save')">Save Changes</button>
+    </div>
+  `,
+})
+export class DialogRetroContent {
+  readonly ref = inject<KjDialogRef<DialogRetroContent>>(KjDialogRef);
+}
+
+@Component({
+  selector: 'kj-example-dialog-retro',
+  standalone: true,
+  styleUrls: ['../../styles/docs-themes.css'],
+  host: { class: 'kj-theme-retro' },
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 2rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 160px;
+        color: var(--kj-text);
+      }
+      button {
+        padding: 0.4rem 1rem;
+        font-family: var(--kj-font);
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        background: var(--kj-surface);
+        color: var(--kj-text);
+        border: var(--kj-btn-border);
+        cursor: pointer;
+        box-shadow: var(--kj-shadow-sm);
+        transition: var(--kj-transition);
+      }
+      button:hover {
+        transform: translate(-1px, -1px);
+        box-shadow: var(--kj-shadow-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <button (click)="open()">Open Dialog</button> `,
+})
+export class DialogRetroExample {
+  private readonly dialog = inject(KjDialogService);
+  open() {
+    this.dialog.open(DialogRetroContent);
+  }
+}

package/src/dialog/_examples/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { DialogBasicExample } from './dialog.example';
+export { DialogConfirmExample } from './dialog.confirm.example';
+export { DialogFinanceExample } from './dialog.finance.example';
+export { DialogRetroExample } from './dialog.retro.example';

package/src/dialog/dialog.ref.ts

@@ -0,0 +1,42 @@
+import { Signal } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import type { KjOverlayController } from '../primitives/overlay/controller';
+
+export class KjDialogRef<T, R = unknown> {
+  private _instance: T | null = null;
+  private _result: R | undefined;
+  private resolveResult!: (r: R | undefined) => void;
+  readonly result: Promise<R | undefined>;
+  private readonly _afterOpened = new Subject<void>();
+  private readonly _afterClosed = new Subject<R | undefined>();
+  readonly afterOpened$: Observable<void> = this._afterOpened.asObservable();
+  readonly afterClosed$: Observable<R | undefined> = this._afterClosed.asObservable();
+
+  readonly state: Signal<'closed' | 'opening' | 'open' | 'closing'>;
+  readonly isOpen: Signal<boolean>;
+
+  constructor(
+    public readonly controller: KjOverlayController,
+  ) {
+    this.state = controller.state;
+    this.isOpen = controller.isOpen;
+    this.result = new Promise<R | undefined>((res) => { this.resolveResult = res; });
+  }
+
+  /** @internal */
+  bindInstance(instance: T) { this._instance = instance; }
+  get instance(): T {
+    if (!this._instance) throw new Error('KjDialogRef: instance not bound');
+    return this._instance;
+  }
+
+  close(result?: R): void {
+    this._result = result;
+    this.controller.close('programmatic');
+    queueMicrotask(() => {
+      this._afterClosed.next(this._result);
+      this._afterClosed.complete();
+      this.resolveResult(this._result);
+    });
+  }
+}