@kouji-ui/core 0.0.4 → 0.1.2

package/src/toast/toast.finance.example.ts

@@ -1,68 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjToastViewport, KjToast } from './toast';
-import { KjToastService } from './toast.service';
-
-@Component({
-  selector: 'kj-example-toast-finance',
-  standalone: true,
-  imports: [KjToastViewport, KjToast, NgTemplateOutlet],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-finance' },
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 260px; position: relative; }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button {
-      padding: 0.4rem 1rem; font-family: inherit; font-size: 0.8125rem; font-weight: 500;
-      border-radius: var(--kj-radius-md); border: var(--kj-btn-border); cursor: pointer; transition: var(--kj-transition); line-height: 1.5;
-    }
-    .btn-success { background: #22c55e; color: #fff; border-color: #22c55e; }
-    .btn-success:hover { background: #16a34a; }
-    .btn-error   { background: #ef4444; color: #fff; border-color: #ef4444; }
-    .btn-error:hover { background: #dc2626; }
-    .btn-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
-    .btn-warning:hover { background: #d97706; }
-    .btn-info    { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-accent); }
-    .btn-info:hover { background: #2563eb; }
-    [kjToastViewport] {
-      position: absolute; bottom: 1rem; right: 1rem;
-      display: flex; flex-direction: column; gap: 0.5rem; width: 18rem;
-      list-style: none; padding: 0; margin: 0;
-    }
-    [kjToast] {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0.75rem 1rem; font-size: 0.8125rem; border-radius: var(--kj-radius-lg);
-      box-shadow: var(--kj-shadow-sm); animation: slideIn 0.2s ease;
-    }
-    @keyframes slideIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
-    [data-variant="success"]     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
-    [data-variant="destructive"] { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
-    [data-variant="warning"]     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
-    [data-variant="default"]     { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
-    .close { background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; padding: 0 0 0 0.5rem; opacity: 0.5; }
-    .close:hover { opacity: 1; }
-  `],
-  template: `
-    <div class="row">
-      <button class="btn-success" (click)="toast.success('Transaction completed.')">Success</button>
-      <button class="btn-error"   (click)="toast.error('Payment declined.')">Error</button>
-      <button class="btn-warning" (click)="toast.warning('Session expiring soon.')">Warning</button>
-      <button class="btn-info"    (click)="toast.info('Statement ready to download.')">Info</button>
-    </div>
-    <ol kjToastViewport [kjToastDefaultTemplate]="defaultTpl" #vp="kjToastViewport" aria-label="Notifications">
-      @for (r of vp.renderable(); track r.id) {
-        <li><ng-container *ngTemplateOutlet="r.template; context: r.context" /></li>
-      }
-    </ol>
-
-    <ng-template #defaultTpl let-ctx>
-      <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
-        <span>{{ ctx.message }}</span>
-        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
-      </div>
-    </ng-template>
-  `,
-})
-export class ToastFinanceExample {
-  readonly toast = inject(KjToastService);
-}

package/src/toast/toast.retro.example.ts

@@ -1,69 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { KjToastViewport, KjToast } from './toast';
-import { KjToastService } from './toast.service';
-
-@Component({
-  selector: 'kj-example-toast-retro',
-  standalone: true,
-  imports: [KjToastViewport, KjToast, NgTemplateOutlet],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-retro' },
-  styles: [`
-    :host { display: block; padding: 2rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 260px; position: relative; color: var(--kj-text); }
-    .row { display: flex; gap: 0.625rem; flex-wrap: wrap; }
-    button {
-      padding: 0.35rem 0.875rem; font-family: var(--kj-font); font-size: 0.75rem;
-      font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
-      border: var(--kj-btn-border); border-radius: 0; 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-ok   { background: #16a34a; color: #fff; }
-    .btn-err  { background: #dc2626; color: #fff; }
-    .btn-warn { background: #d97706; color: #fff; }
-    .btn-info { background: #1d4ed8; color: #fff; border-color: #1d4ed8; box-shadow: 3px 3px 0 #1d4ed8; }
-    .btn-info:hover { box-shadow: 4px 4px 0 #1d4ed8; }
-    [kjToastViewport] {
-      position: absolute; bottom: 1rem; right: 1rem;
-      display: flex; flex-direction: column; gap: 0.5rem; width: 18rem;
-      list-style: none; padding: 0; margin: 0;
-    }
-    [kjToast] {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0.625rem 0.875rem; font-family: var(--kj-font); font-size: 0.75rem;
-      border: var(--kj-btn-border); background: var(--kj-bg); color: var(--kj-text); box-shadow: var(--kj-shadow-md);
-      animation: slideIn 0.15s ease;
-    }
-    @keyframes slideIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } }
-    [data-variant="success"]     { border-color: #16a34a; }
-    [data-variant="destructive"] { border-color: #dc2626; }
-    [data-variant="warning"]     { border-color: #d97706; }
-    [data-variant="default"]     { border-color: #1d4ed8; }
-    .close { background: none; border: none; box-shadow: none; cursor: pointer; font-size: 1rem; padding: 0 0 0 0.5rem; transition: none; font-family: inherit; }
-    .close:hover { transform: none; }
-  `],
-  template: `
-    <div class="row">
-      <button class="btn-ok"   (click)="toast.success('File saved!')">OK</button>
-      <button class="btn-err"  (click)="toast.error('Access denied!')">ERR</button>
-      <button class="btn-warn" (click)="toast.warning('Low disk space.')">WARN</button>
-      <button class="btn-info" (click)="toast.info('Update available.')">INFO</button>
-    </div>
-    <ol kjToastViewport [kjToastDefaultTemplate]="defaultTpl" #vp="kjToastViewport" aria-label="Notifications">
-      @for (r of vp.renderable(); track r.id) {
-        <li><ng-container *ngTemplateOutlet="r.template; context: r.context" /></li>
-      }
-    </ol>
-
-    <ng-template #defaultTpl let-ctx>
-      <div kjToast [kjToastVariant]="ctx.variant" [kjToastId]="ctx.id">
-        <span>{{ ctx.message }}</span>
-        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
-      </div>
-    </ng-template>
-  `,
-})
-export class ToastRetroExample {
-  readonly toast = inject(KjToastService);
-}

package/src/toast/toast.service.ts

@@ -1,153 +0,0 @@
-import { Injectable, TemplateRef, inject, signal } from '@angular/core';
-import { KJ_TOAST_STRATEGY } from './toast.strategy';
-
-export type KjToastVariant = 'default' | 'success' | 'destructive' | 'warning';
-
-/**
- * Shape `[kjToastDefaultTemplate]` and per-call templates receive via `ngTemplateOutlet`.
- * Inherits every `KjToastContext` field for `let-id="id"`-style bindings, plus `$implicit`
- * for the canonical `<ng-template let-ctx>` form.
- */
-export interface KjToastTemplateContext<TData = unknown> extends KjToastContext<TData> {
-  $implicit: KjToastContext<TData>;
-}
-
-/** Context object passed to a toast template. Available via `let-ctx` (or `let-ctx="$implicit"`). */
-export interface KjToastContext<TData = unknown> {
-  /** Unique id for this toast. */
-  readonly id: string;
-  /** Variant set when the toast was shown. */
-  readonly variant: KjToastVariant;
-  /** Plain text message — only set when shown via the string-based API. */
-  readonly message?: string;
-  /** Optional title set via options. */
-  readonly title?: string;
-  /** Arbitrary client payload set via options.data. Strongly typed via the TemplateRef generic. */
-  readonly data?: TData;
-  /** Dismiss this toast. Bound — safe to use directly in templates. */
-  dismiss(): void;
-}
-
-/** Options for `KjToastService.show()` and the `success`/`error`/`warning`/`info` shorthands. */
-export interface KjToastOptions<TData = unknown> {
-  /** Override the auto-generated id. */
-  id?: string;
-  /** Optional title rendered above the message. */
-  title?: string;
-  /** Visual / semantic variant. Defaults to `'default'`. */
-  variant?: KjToastVariant;
-  /** Auto-dismiss delay in ms. `0` = persistent. Defaults to `5000`. */
-  duration?: number;
-  /** Arbitrary payload exposed to the template via `ctx.data`. */
-  data?: TData;
-}
-
-/** Internal queue item — tracked by the service, consumed by `KjToastViewport`. */
-export interface KjToastItem<TData = unknown> {
-  readonly id: string;
-  readonly variant: KjToastVariant;
-  readonly duration: number;
-  readonly message?: string;
-  readonly title?: string;
-  readonly data?: TData;
-  /** Per-call template, when shown via `show(template, …)`. Otherwise the viewport's default template renders. */
-  readonly template?: TemplateRef<KjToastTemplateContext<TData>>;
-}
-
-/**
- * Programmatic API for toast notifications.
- *
- * Two ways to show a toast:
- * - `show(template, options)` — full template control. Markup, layout, icons, action buttons all owned by the client.
- * - `show(message, options)` — string shorthand. Uses the viewport's `[kjToastDefaultTemplate]`.
- *
- * @example
- * ```ts
- * private readonly toast = inject(KjToastService);
- *
- * save()    { this.toast.success('Saved!'); }
- * undoable() {
- *   this.toast.show(this.undoTpl, { duration: 8000, data: { entityId: 42 } });
- * }
- * ```
- * @category Core/Overlays
- */
-@Injectable({ providedIn: 'root' })
-export class KjToastService {
-  private readonly strategy = inject(KJ_TOAST_STRATEGY);
-  private readonly _toasts = signal<KjToastItem[]>([]);
-  /** Live list of active toasts. Read by `[kjToastViewport]`. */
-  readonly toasts = this._toasts.asReadonly();
-
-  private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();
-
-  /** Show a toast with a custom template. Returns the toast id. */
-  show<T = unknown>(template: TemplateRef<KjToastTemplateContext<T>>, options?: KjToastOptions<T>): string;
-  /** Show a toast with a plain text message. The viewport's default template renders it. */
-  show(message: string, options?: KjToastOptions): string;
-  show(content: TemplateRef<KjToastTemplateContext> | string, options: KjToastOptions = {}): string {
-    const id = options.id ?? crypto.randomUUID();
-    const isTemplate = content instanceof TemplateRef;
-    const toast: KjToastItem = {
-      id,
-      variant: options.variant ?? 'default',
-      duration: options.duration ?? this.strategy.duration,
-      title: options.title,
-      data: options.data,
-      message: isTemplate ? undefined : content,
-      template: isTemplate ? content : undefined,
-    };
-    this._toasts.update(ts => [...ts, toast]);
-    if (toast.duration > 0) {
-      this.timers.set(id, setTimeout(() => this.dismiss(id), toast.duration));
-    }
-    return id;
-  }
-
-  /** Show a success toast (string shorthand). */
-  success(message: string, options?: Omit<KjToastOptions, 'variant'>): string {
-    return this.show(message, { ...options, variant: 'success' });
-  }
-  /** Show an error toast (string shorthand). */
-  error(message: string, options?: Omit<KjToastOptions, 'variant'>): string {
-    return this.show(message, { ...options, variant: 'destructive' });
-  }
-  /** Show a warning toast (string shorthand). */
-  warning(message: string, options?: Omit<KjToastOptions, 'variant'>): string {
-    return this.show(message, { ...options, variant: 'warning' });
-  }
-  /** Show an informational toast (string shorthand). */
-  info(message: string, options?: Omit<KjToastOptions, 'variant'>): string {
-    return this.show(message, { ...options, variant: 'default' });
-  }
-
-  /** Manually dismiss a toast by id. */
-  dismiss(id: string): void {
-    clearTimeout(this.timers.get(id));
-    this.timers.delete(id);
-    this._toasts.update(ts => ts.filter(t => t.id !== id));
-  }
-
-  /** Dismiss every active toast. */
-  dismissAll(): void {
-    this.timers.forEach(t => clearTimeout(t));
-    this.timers.clear();
-    this._toasts.set([]);
-  }
-
-  /**
-   * Builds a template context for a queued toast — used by `[kjToastViewport]` when rendering.
-   * `ctx.dismiss` is bound to this service.
-   */
-  contextFor<T>(toast: KjToastItem<T>): KjToastTemplateContext<T> {
-    const ctx: KjToastContext<T> = {
-      id: toast.id,
-      variant: toast.variant,
-      message: toast.message,
-      title: toast.title,
-      data: toast.data,
-      dismiss: () => this.dismiss(toast.id),
-    };
-    return Object.assign(ctx, { $implicit: ctx });
-  }
-}

package/src/toast/toast.spec.ts

@@ -1,95 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjToast, KjToastViewport } from './toast';
-import { KjToastService } from './toast.service';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjToast', () => {
-  it('sets role=status by default', async () => {
-    const { container } = await render(`<div kjToast>Saved</div>`, { imports: [KjToast] });
-    expect(container.querySelector('[kjToast]')).toHaveAttribute('role', 'status');
-  });
-
-  it('sets role=alert for destructive', async () => {
-    const { container } = await render(
-      `<div kjToast [kjToastVariant]="'destructive'">Error</div>`,
-      { imports: [KjToast] },
-    );
-    expect(container.querySelector('[kjToast]')).toHaveAttribute('role', 'alert');
-  });
-
-  it('sets data-variant attribute', async () => {
-    const { container } = await render(
-      `<div kjToast [kjToastVariant]="'success'">OK</div>`,
-      { imports: [KjToast] },
-    );
-    expect(container.querySelector('[kjToast]')).toHaveAttribute('data-variant', 'success');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(`<div kjToast>Saved</div>`, { imports: [KjToast] });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe('KjToastViewport', () => {
-  it('has aria-live=polite', async () => {
-    const { container } = await render(`<div kjToastViewport></div>`, { imports: [KjToastViewport] });
-    expect(container.querySelector('[kjToastViewport]')).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('has role=region', async () => {
-    const { container } = await render(`<div kjToastViewport></div>`, { imports: [KjToastViewport] });
-    expect(container.querySelector('[kjToastViewport]')).toHaveAttribute('role', 'region');
-  });
-});
-
-describe('KjToastService', () => {
-  let svc: KjToastService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    svc = TestBed.inject(KjToastService);
-  });
-
-  it('show(message) adds a toast', () => {
-    expect(svc.toasts().length).toBe(0);
-    svc.show('Hello', { duration: 0 });
-    expect(svc.toasts().length).toBe(1);
-    expect(svc.toasts()[0].message).toBe('Hello');
-  });
-
-  it('dismiss() removes a toast', () => {
-    const id = svc.show('Test', { duration: 0 });
-    svc.dismiss(id);
-    expect(svc.toasts().length).toBe(0);
-  });
-
-  it('success() sets variant=success', () => {
-    svc.success('Done', { duration: 0 });
-    expect(svc.toasts()[0].variant).toBe('success');
-  });
-
-  it('error() sets variant=destructive', () => {
-    svc.error('Fail', { duration: 0 });
-    expect(svc.toasts()[0].variant).toBe('destructive');
-  });
-
-  it('dismissAll() clears all toasts', () => {
-    svc.show('A', { duration: 0 });
-    svc.show('B', { duration: 0 });
-    svc.dismissAll();
-    expect(svc.toasts().length).toBe(0);
-  });
-
-  it('contextFor() exposes a bound dismiss callback', () => {
-    const id = svc.show('Hello', { duration: 0 });
-    const ctx = svc.contextFor(svc.toasts()[0]);
-    expect(ctx.id).toBe(id);
-    expect(ctx.message).toBe('Hello');
-    ctx.dismiss();
-    expect(svc.toasts().length).toBe(0);
-  });
-});

package/src/toast/toast.strategy.ts

@@ -1,102 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-import { KjToastPositionX, KjToastPositionY } from './toast.types';
-
-/**
- * Behaviour and layout defaults for the toast viewport. Strategies are provided
- * via DI — both the service (for duration default) and `[kjToastViewport]` (for
- * positioning, gap, max visible, expand-on-hover) inject this token.
- */
-export interface KjToastStrategy {
-  /** Cap on simultaneously-rendered toasts. Excess stays queued. */
-  maxVisible: number;
-  /** Pixel gap between stacked toasts — exposed as `--kj-toast-gap`. */
-  gap: number;
-  /** Base `z-index` for stacked toasts — exposed as `--kj-toast-z-index`. */
-  baseZIndex: number;
-  /** Horizontal anchor. */
-  positionX: KjToastPositionX;
-  /** Vertical anchor. */
-  positionY: KjToastPositionY;
-  /** Default auto-dismiss delay in ms. `0` = persistent. */
-  duration: number;
-  /** When `true`, the viewport flips `data-expanded` on `mouseenter` / `mouseleave`. */
-  expandOnHover: boolean;
-}
-
-/**
- * Sonner-inspired defaults: max 3 visible, stacked at the bottom-right,
- * expand on hover, 4s default duration, 14px gap. Matches the popular
- * [Sonner](https://sonner.emilkowal.ski) toast feel.
- */
-export const KJ_TOAST_SONNER_STRATEGY: KjToastStrategy = Object.freeze({
-  maxVisible: 3,
-  gap: 14,
-  baseZIndex: 100,
-  positionX: 'end',
-  positionY: 'bottom',
-  duration: 4000,
-  expandOnHover: true,
-});
-
-/**
- * Plain vertical list: unlimited visible, no hover expansion, standard 5s duration.
- * Closer to Material / Bootstrap-style "stacked notifications" with no fancy stacking.
- */
-export const KJ_TOAST_LIST_STRATEGY: KjToastStrategy = Object.freeze({
-  maxVisible: Number.POSITIVE_INFINITY,
-  gap: 8,
-  baseZIndex: 100,
-  positionX: 'end',
-  positionY: 'bottom',
-  duration: 5000,
-  expandOnHover: false,
-});
-
-/** DI token holding the active toast strategy. Defaults to `KJ_TOAST_SONNER_STRATEGY`. */
-export const KJ_TOAST_STRATEGY = new InjectionToken<KjToastStrategy>('KjToastStrategy', {
-  providedIn: 'root',
-  factory: () => KJ_TOAST_SONNER_STRATEGY,
-});
-
-/**
- * Use Sonner-inspired stacking (3 visible, expand on hover, bottom-right).
- * Pass `overrides` to tweak any individual property without rewriting the rest.
- *
- * @example
- * ```ts
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *     provideKjToastSonnerStrategy({ positionY: 'top' }),
- *   ],
- * });
- * ```
- */
-export function provideKjToastSonnerStrategy(overrides?: Partial<KjToastStrategy>): Provider {
-  return {
-    provide: KJ_TOAST_STRATEGY,
-    useValue: { ...KJ_TOAST_SONNER_STRATEGY, ...overrides },
-  };
-}
-
-/**
- * Use a plain vertical list (unlimited, no hover expansion).
- *
- * @example
- * ```ts
- * provideKjToastListStrategy({ maxVisible: 5, positionX: 'start' })
- * ```
- */
-export function provideKjToastListStrategy(overrides?: Partial<KjToastStrategy>): Provider {
-  return {
-    provide: KJ_TOAST_STRATEGY,
-    useValue: { ...KJ_TOAST_LIST_STRATEGY, ...overrides },
-  };
-}
-
-/** Fully-custom strategy override. */
-export function provideKjToastStrategy(strategy: KjToastStrategy): Provider {
-  return {
-    provide: KJ_TOAST_STRATEGY,
-    useValue: strategy,
-  };
-}