@kouji-ui/core 0.0.4 → 0.1.1

package/src/toast/_examples/toast.example.ts

@@ -0,0 +1,282 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { KjToastViewport, KjToast } from '../toast';
+import { KjToastService } from '../toast.service';
+import { KjButton } from '../../button/button';
+
+@Component({
+  selector: 'kj-example-toast-basic',
+  standalone: true,
+  imports: [KjToastViewport, KjToast, KjButton, NgTemplateOutlet],
+  styleUrls: ['../../styles/docs-themes.css'],
+  styles: [
+    `
+      :host {
+        display: block;
+        padding: 2rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 360px;
+        position: relative;
+        overflow: hidden;
+      }
+      .row {
+        display: flex;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+      }
+      button[kjButton] {
+        padding: 0.4rem 1rem;
+        border: none;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 0.8125rem;
+      }
+      button[kjButton][data-variant='success'] {
+        background: #4ade80;
+        color: #0c0c0c;
+      }
+      button[kjButton][data-variant='destructive'] {
+        background: #ef4444;
+        color: #fff;
+      }
+      button[kjButton][data-variant='warning'] {
+        background: #fb923c;
+        color: #0c0c0c;
+      }
+      button[kjButton][data-variant='default'] {
+        background: #b8f500;
+        color: #0c0c0c;
+      }
+
+      /* ── Viewport: positioned via [data-position-*] ── */
+      [kjToastViewport] {
+        position: absolute;
+        width: 22rem;
+        max-width: calc(100% - 2rem);
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        z-index: var(--kj-toast-z-index);
+      }
+      [kjToastViewport][data-position-y='bottom'] {
+        bottom: 1rem;
+      }
+      [kjToastViewport][data-position-y='top'] {
+        top: 1rem;
+      }
+      [kjToastViewport][data-position-x='end'] {
+        right: 1rem;
+      }
+      [kjToastViewport][data-position-x='start'] {
+        left: 1rem;
+      }
+
+      /* Each <li> wraps a toast — absolutely positioned so siblings overlap.
+       The viewport itself stays a 0-height anchor; the front toast pegs to its edge. */
+      [kjToastViewport] li {
+        position: absolute;
+        left: 0;
+        right: 0;
+        transition:
+          transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1),
+          opacity 0.3s ease;
+      }
+      [kjToastViewport][data-position-y='bottom'] li {
+        bottom: 0;
+      }
+      [kjToastViewport][data-position-y='top'] li {
+        top: 0;
+      }
+
+      /* ── COLLAPSED stack: only the front toast is fully visible.
+       Each older toast scales down 5% per level, lifts upward by index*gap,
+       and shrinks to the front toast's height. ── */
+      [kjToastViewport][data-expanded='false'] [kjToast]:not([data-front='true']) {
+        height: var(--kj-toast-front-height);
+        overflow: hidden;
+        transform: translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap) * -1))
+          scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
+        opacity: calc(1 - (var(--kj-toast-index) - 1) * 0.25);
+      }
+      [kjToastViewport][data-position-y='top'][data-expanded='false']
+        [kjToast]:not([data-front='true']) {
+        transform: translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap)))
+          scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
+      }
+
+      /* ── EXPANDED: each toast lifts by its measured height + gap, summed for older toasts.
+       Uses --kj-toast-before (older count visible behind). ── */
+      [kjToastViewport][data-expanded='true'] [kjToast] {
+        transform: translateY(
+          calc(
+            (var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap)) * -1
+          )
+        );
+      }
+      [kjToastViewport][data-position-y='top'][data-expanded='true'] [kjToast] {
+        transform: translateY(
+          calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap)))
+        );
+      }
+
+      /* ── Toast appearance ── */
+      [kjToast] {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 0.875rem 1rem;
+        font-size: 0.8125rem;
+        border-radius: 8px;
+        box-shadow:
+          0 4px 12px rgba(0, 0, 0, 0.15),
+          0 1px 0 rgba(255, 255, 255, 0.04) inset;
+        animation: enter 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
+      }
+      @keyframes enter {
+        from {
+          opacity: 0;
+          transform: translateY(100%) scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+      .icon {
+        font-size: 1rem;
+        line-height: 1.2;
+        flex-shrink: 0;
+      }
+      .body {
+        flex: 1;
+        min-width: 0;
+        line-height: 1.4;
+      }
+      .title {
+        font-weight: 600;
+        margin-bottom: 0.125rem;
+      }
+      .close {
+        background: none;
+        border: none;
+        cursor: pointer;
+        opacity: 0.5;
+        font-size: 1.1rem;
+        color: inherit;
+        padding: 0;
+        line-height: 1;
+        flex-shrink: 0;
+      }
+      .close:hover {
+        opacity: 1;
+      }
+
+      [kjToast][data-variant='success'] {
+        background: #052e16;
+        color: #86efac;
+        border: 1px solid #166534;
+      }
+      [kjToast][data-variant='destructive'] {
+        background: #2c0a0a;
+        color: #fca5a5;
+        border: 1px solid #991b1b;
+      }
+      [kjToast][data-variant='warning'] {
+        background: #2c1a04;
+        color: #fcd34d;
+        border: 1px solid #92400e;
+      }
+      [kjToast][data-variant='default'] {
+        background: #1a1a1a;
+        color: #f0ede6;
+        border: 1px solid #2a2a2a;
+      }
+      [kjToast][data-variant='success'] .icon {
+        color: #4ade80;
+      }
+      [kjToast][data-variant='destructive'] .icon {
+        color: #f87171;
+      }
+      [kjToast][data-variant='warning'] .icon {
+        color: #fb923c;
+      }
+      [kjToast][data-variant='default'] .icon {
+        color: #b8f500;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <button
+        kjButton
+        [attr.data-variant]="'success'"
+        (click)="toast.show('Changes saved successfully!', { variant: 'success' })"
+      >
+        Success
+      </button>
+      <button
+        kjButton
+        [attr.data-variant]="'destructive'"
+        (click)="toast.show('Something went wrong!', { variant: 'destructive' })"
+      >
+        Error
+      </button>
+      <button
+        kjButton
+        [attr.data-variant]="'warning'"
+        (click)="toast.show('Session expires in 5 minutes.', { variant: 'warning' })"
+      >
+        Warning
+      </button>
+      <button
+        kjButton
+        [attr.data-variant]="'default'"
+        (click)="toast.show('New 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 class="icon" aria-hidden="true">{{ iconFor(ctx.variant) }}</span>
+        <div class="body">
+          @if (ctx.title) {
+            <div class="title">{{ ctx.title }}</div>
+          }
+          <span>{{ ctx.message }}</span>
+        </div>
+        <button class="close" (click)="ctx.dismiss()" aria-label="Dismiss">×</button>
+      </div>
+    </ng-template>
+  `,
+})
+export class ToastBasicExample {
+  readonly toast = inject(KjToastService);
+
+  iconFor(variant: 'default' | 'success' | 'destructive' | 'warning'): string {
+    switch (variant) {
+      case 'success':
+        return '✓';
+      case 'destructive':
+        return '✕';
+      case 'warning':
+        return '!';
+      default:
+        return 'ℹ';
+    }
+  }
+}

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

@@ -0,0 +1,180 @@
+import { Component, inject, ChangeDetectionStrategy } 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;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <button
+        class="btn-success"
+        (click)="toast.show('Transaction completed.', { variant: 'success' })"
+      >
+        Success
+      </button>
+      <button
+        class="btn-error"
+        (click)="toast.show('Payment declined.', { variant: 'destructive' })"
+      >
+        Error
+      </button>
+      <button
+        class="btn-warning"
+        (click)="toast.show('Session expiring soon.', { variant: 'warning' })"
+      >
+        Warning
+      </button>
+      <button class="btn-info" (click)="toast.show('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/_examples/toast.retro.example.ts

@@ -0,0 +1,161 @@
+import { Component, inject, ChangeDetectionStrategy } 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;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <button class="btn-ok" (click)="toast.show('File saved!', { variant: 'success' })">OK</button>
+      <button class="btn-err" (click)="toast.show('Access denied!', { variant: 'destructive' })">
+        ERR
+      </button>
+      <button class="btn-warn" (click)="toast.show('Low disk space.', { variant: 'warning' })">
+        WARN
+      </button>
+      <button class="btn-info" (click)="toast.show('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/index.ts

@@ -2,6 +2,7 @@ export {
   KjToast,
   KjToastViewport,
   KjToastClose,
+  KjToastPanel,
   type KjToastRenderable,
   type KjToastVariant,
   type KjToastContext,
@@ -9,7 +10,13 @@ export {
   type KjToastPositionX,
   type KjToastPositionY,
 } from './toast';
-export { KjToastService, type KjToastItem, type KjToastTemplateContext } from './toast.service';
+export {
+  KjToastService,
+  type KjToastItem,
+  type KjToastTemplateContext,
+  type KjToastSugarVariant,
+} from './toast.service';
+export { KjToastRef } from './toast.ref';
 export {
   KJ_TOAST_STRATEGY,
   KJ_TOAST_SONNER_STRATEGY,

package/src/toast/toast.ref.ts

@@ -0,0 +1,26 @@
+import type { KjOverlayController } from '../primitives/overlay/controller';
+
+/**
+ * Reference returned from `KjToastService.show()` (and the variant sugar
+ * methods). Owns the toast's overlay controller and its id, and exposes a
+ * single `close()` method.
+ *
+ * Toast queue management (auto-dismiss timers, max-visible cap, pause/resume)
+ * is owned by `KjToastService`; the ref is the per-toast handle returned to
+ * callers.
+ */
+export class KjToastRef {
+  constructor(
+    /** Stable id for this toast — also used by the service's queue. */
+    public readonly id: string,
+    /** The overlay controller backing this toast's panel. */
+    public readonly controller: KjOverlayController,
+    private readonly _dismiss: (id: string) => void,
+  ) {}
+
+  /** Dismiss this toast. Idempotent. */
+  close(): void {
+    this._dismiss(this.id);
+    this.controller.close('programmatic');
+  }
+}