@kouji-ui/core 0.1.1 → 0.1.2

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

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

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

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

@@ -1,28 +0,0 @@
-export {
-  KjToast,
-  KjToastViewport,
-  KjToastClose,
-  KjToastPanel,
-  type KjToastRenderable,
-  type KjToastVariant,
-  type KjToastContext,
-  type KjToastOptions,
-  type KjToastPositionX,
-  type KjToastPositionY,
-} from './toast';
-export {
-  KjToastService,
-  type KjToastItem,
-  type KjToastTemplateContext,
-  type KjToastSugarVariant,
-} from './toast.service';
-export { KjToastRef } from './toast.ref';
-export {
-  KJ_TOAST_STRATEGY,
-  KJ_TOAST_SONNER_STRATEGY,
-  KJ_TOAST_LIST_STRATEGY,
-  type KjToastStrategy,
-  provideKjToastStrategy,
-  provideKjToastSonnerStrategy,
-  provideKjToastListStrategy,
-} from './toast.strategy';

package/src/toast/toast.ref.ts

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