@kouji-ui/core 0.1.1 → 0.1.2

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

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

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

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

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

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

@@ -1,42 +0,0 @@
-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);
-    });
-  }
-}

package/src/dialog/dialog.service.ts

@@ -1,66 +0,0 @@
-import { EnvironmentInjector, Injectable, Type, effect, inject, runInInjectionContext } from '@angular/core';
-import { KjOverlayBuilder } from '../primitives/overlay/builder';
-import { inPlace } from '../primitives/overlay/strategies/mount/in-place';
-import { viewportCentered } from '../primitives/overlay/strategies/position/viewport-centered';
-import { solidBackdrop } from '../primitives/overlay/strategies/backdrop/solid';
-import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
-import { htmlOverflow } from '../primitives/overlay/strategies/scroll-lock/html-overflow';
-import { silent } from '../primitives/overlay/strategies/live-announcer/silent';
-import { assertive } from '../primitives/overlay/strategies/live-announcer/assertive';
-import { programmatic } from '../primitives/overlay/strategies/trigger-event/programmatic';
-import { KjDialogRef } from './dialog.ref';
-
-export interface KjDialogOpenOptions<D = unknown> {
-  data?: D;
-  alert?: boolean;
-  closeOnEsc?: boolean;
-  closeOnOutside?: boolean;
-}
-
-@Injectable({ providedIn: 'root' })
-export class KjDialog {
-  private readonly builder = inject(KjOverlayBuilder);
-  private readonly env = inject(EnvironmentInjector);
-
-  open<T, R = unknown, D = unknown>(component: Type<T>, opts: KjDialogOpenOptions<D> = {}): KjDialogRef<T, R> {
-    const alert = !!opts.alert;
-    const handle = this.builder.create({
-      mount: inPlace(),
-      position: viewportCentered(),
-      backdrop: solidBackdrop({
-        inert: true,
-        closeOnClick: !alert && (opts.closeOnOutside ?? true),
-      }),
-      focusTrap: tabCycle({ returnFocus: true }),
-      scrollLock: htmlOverflow(),
-      liveAnnouncer: alert ? assertive() : silent(),
-      trigger: programmatic(),
-      panelRole: alert ? 'alertdialog' : 'dialog',
-    });
-
-    const ref = new KjDialogRef<T, R>(handle.controller);
-    const cmpRef = this.builder.attachComponent(handle, component, {
-      providers: [{ provide: KjDialogRef, useValue: ref }],
-      data: opts.data,
-    });
-    ref.bindInstance(cmpRef.instance);
-
-    runInInjectionContext(this.env, () => {
-      let wasOpen = false;
-      const eff = effect(() => {
-        const s = handle.controller.state();
-        if (s === 'open' || s === 'opening') wasOpen = true;
-        if (s === 'closed' && wasOpen) {
-          eff.destroy();
-          // afterClosed$ subscribers see the result before teardown.
-          queueMicrotask(() => handle.destroy());
-        }
-      });
-    });
-    handle.controller.open();
-    return ref;
-  }
-
-  // TODO: sugar wrappers (alert/confirm/prompt) — implement once preset
-  // components (packages/core/src/dialog/presets/*.ts) are added.
-}

package/src/dialog/dialog.spec.ts

@@ -1,37 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, it, expect } from 'vitest';
-import { KjDialog as KjDialogService } from './dialog.service';
-import { KjDialogRef } from './dialog.ref';
-
-@Component({
-  selector: 'kj-simple-dlg',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<button (click)="ref.close('ok')">OK</button>`,
-})
-class SimpleDlg {
-  readonly ref = inject<KjDialogRef<SimpleDlg, string>>(KjDialogRef);
-}
-
-describe('KjDialog', () => {
-  it('open returns a ref with isOpen true after open', () => {
-    const svc = TestBed.inject(KjDialogService);
-    const ref = svc.open(SimpleDlg);
-    expect(ref).toBeTruthy();
-    expect(typeof ref.close).toBe('function');
-  });
-
-  it('open with alert=true uses role=alertdialog', () => {
-    const svc = TestBed.inject(KjDialogService);
-    const ref = svc.open(SimpleDlg, { alert: true });
-    expect(ref.controller).toBeTruthy();
-  });
-
-  it('close resolves the result promise', async () => {
-    const svc = TestBed.inject(KjDialogService);
-    const ref = svc.open<SimpleDlg, string>(SimpleDlg);
-    ref.close('hello');
-    await expect(ref.result).resolves.toBe('hello');
-  });
-});

package/src/dialog/dialog.ts

@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, input } from '@angular/core';
-import { KjOverlayPanel } from '../primitives/overlay/panel';
-
-/**
- * Dialog body component. Composes `KjOverlayPanel` as a host directive so
- * the overlay primitives wire role/state/aria/focus management.
- *
- * The role is decided by the SERVICE (`KjDialog.open`) via the
- * `KJ_OVERLAY_PANEL_ROLE` provider on the controller. The `kjAlert` input
- * is exposed for declarative (non-service) usage where consumers wire their
- * own providers.
- *
- * @doc-category Core/Overlay
- */
-@Component({
-  selector: 'kj-dialog',
-  standalone: true,
-  hostDirectives: [{ directive: KjOverlayPanel }],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-dialog' },
-  template: `<ng-content />`,
-})
-export class KjDialog {
-  readonly kjAlert = input(false, { transform: booleanAttribute });
-}

package/src/dialog/index.ts

@@ -1,3 +0,0 @@
-export { KjDialog } from './dialog';
-export { KjDialog as KjDialogService, type KjDialogOpenOptions } from './dialog.service';
-export { KjDialogRef } from './dialog.ref';