@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/alert-dialog/README.md

@@ -1,215 +0,0 @@
-# ScAlertDialog Components
-
-A set of Angular components for creating accessible alert dialogs with shadcn/ui styling.
-
-## Architecture
-
-The components follow a dependency injection (DI) pattern where child components inject the parent `ScAlertDialogProvider` to access shared state. `ScAlertDialogProvider` owns all overlay lifecycle logic (CDK overlay, backdrop, focus trap). The `ScAlertDialogPortal` directive marks the lazy content template that gets portaled into the overlay.
-
-```
-ScAlertDialogProvider (root wrapper - manages open state + overlay lifecycle)
-├── ScAlertDialogTrigger (button that opens dialog)
-└── ng-template[scAlertDialogPortal] (lazy content, portaled to CDK overlay)
-    └── ScAlertDialog (dialog panel with animations)
-        ├── ScAlertDialogHeader
-        │   ├── ScAlertDialogTitle
-        │   └── ScAlertDialogDescription
-        └── ScAlertDialogFooter
-            ├── ScAlertDialogCancel
-            └── ScAlertDialogAction
-```
-
-## Components
-
-| Component                  | Selector                           | Description                                    |
-| -------------------------- | ---------------------------------- | ---------------------------------------------- |
-| `ScAlertDialogProvider`    | `div[sc-alert-dialog-provider]`    | Root wrapper, manages open state + overlay     |
-| `ScAlertDialogTrigger`     | `button[sc-alert-dialog-trigger]`  | Button that opens the dialog                   |
-| `ScAlertDialogPortal`      | `ng-template[scAlertDialogPortal]` | Directive marking lazy content for the overlay |
-| `ScAlertDialog`            | `div[sc-alert-dialog]`             | Dialog panel with animations                   |
-| `ScAlertDialogHeader`      | `div[sc-alert-dialog-header]`      | Header section container                       |
-| `ScAlertDialogTitle`       | `h2[sc-alert-dialog-title]`        | Dialog title (aria-labelledby)                 |
-| `ScAlertDialogDescription` | `p[sc-alert-dialog-description]`   | Dialog description (aria-describedby)          |
-| `ScAlertDialogFooter`      | `div[sc-alert-dialog-footer]`      | Footer section for actions                     |
-| `ScAlertDialogCancel`      | `button[sc-alert-dialog-cancel]`   | Cancel button (closes dialog)                  |
-| `ScAlertDialogAction`      | `button[sc-alert-dialog-action]`   | Confirm/action button                          |
-
-## Usage
-
-### Basic Alert Dialog
-
-```html
-<div sc-alert-dialog-provider>
-  <button sc-alert-dialog-trigger>Delete Account</button>
-  <ng-template scAlertDialogPortal>
-    <div sc-alert-dialog>
-      <div sc-alert-dialog-header>
-        <h2 sc-alert-dialog-title>Are you absolutely sure?</h2>
-        <p sc-alert-dialog-description>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
-      </div>
-      <div sc-alert-dialog-footer>
-        <button sc-alert-dialog-cancel>Cancel</button>
-        <button sc-alert-dialog-action>Continue</button>
-      </div>
-    </div>
-  </ng-template>
-</div>
-```
-
-### Destructive Action
-
-```html
-<div sc-alert-dialog-provider>
-  <button sc-alert-dialog-trigger>Delete</button>
-  <ng-template scAlertDialogPortal>
-    <div sc-alert-dialog>
-      <div sc-alert-dialog-header>
-        <h2 sc-alert-dialog-title>Delete item?</h2>
-        <p sc-alert-dialog-description>This action cannot be undone.</p>
-      </div>
-      <div sc-alert-dialog-footer>
-        <button sc-alert-dialog-cancel>Cancel</button>
-        <button sc-alert-dialog-action class="bg-destructive text-destructive-foreground hover:bg-destructive/90">Delete</button>
-      </div>
-    </div>
-  </ng-template>
-</div>
-```
-
-### Controlled
-
-```typescript
-@Component({
-  template: `
-    <div sc-alert-dialog-provider [(open)]="isOpen">
-      <button sc-alert-dialog-trigger>Open</button>
-      <ng-template scAlertDialogPortal>
-        <div sc-alert-dialog>
-          <!-- content -->
-        </div>
-      </ng-template>
-    </div>
-  `,
-})
-export class MyComponent {
-  isOpen = signal(false);
-}
-```
-
-### Custom Action Handler
-
-```typescript
-@Component({
-  template: `
-    <div sc-alert-dialog-provider>
-      <button sc-alert-dialog-trigger>Delete</button>
-      <ng-template scAlertDialogPortal>
-        <div sc-alert-dialog>
-          <div sc-alert-dialog-header>
-            <h2 sc-alert-dialog-title>Confirm deletion</h2>
-            <p sc-alert-dialog-description>Are you sure?</p>
-          </div>
-          <div sc-alert-dialog-footer>
-            <button sc-alert-dialog-cancel>Cancel</button>
-            <button sc-alert-dialog-action (click)="onDelete()">Delete</button>
-          </div>
-        </div>
-      </ng-template>
-    </div>
-  `,
-})
-export class MyComponent {
-  onDelete(): void {
-    // Handle deletion - dialog closes automatically
-    console.log('Item deleted');
-  }
-}
-```
-
-## Differences from Dialog
-
-| Feature       | Dialog          | AlertDialog     |
-| ------------- | --------------- | --------------- |
-| Purpose       | General content | Confirmations   |
-| Escape key    | Closes dialog   | Does NOT close  |
-| Click outside | Closes dialog   | Does NOT close  |
-| Role          | `dialog`        | `alertdialog`   |
-| Buttons       | Any             | Cancel + Action |
-
-## How It Works
-
-### State Management
-
-`ScAlertDialogProvider` uses a `model` signal for the `open` state:
-
-```typescript
-readonly open = model<boolean>(false);
-```
-
-Child components inject `ScAlertDialogProvider` to read or modify this state:
-
-```typescript
-// ScAlertDialogTrigger
-openDialog(): void {
-  this.alertDialogProvider.open.set(true);
-}
-
-// ScAlertDialogCancel
-closeDialog(): void {
-  this.alertDialogProvider.open.set(false);
-}
-```
-
-### Overlay Management
-
-`ScAlertDialogProvider` creates a CDK overlay and attaches/detaches the `scAlertDialogPortal` template based on state:
-
-```typescript
-effect(() => {
-  if (this.overlayOpen()) {
-    this.attachDialog();
-  } else {
-    this.detachDialog();
-  }
-});
-```
-
-The `scAlertDialogPortal` directive marks the `ng-template` whose content is lazily instantiated into the overlay only when the dialog opens.
-
-### Animations
-
-`ScAlertDialog` uses a three-state animation model:
-
-| State    | Data Attribute | Description                                              |
-| -------- | -------------- | -------------------------------------------------------- |
-| `idle`   | `data-idle`    | Hidden (`opacity-0`), resting state                      |
-| `open`   | `data-open`    | Entry animation (`fade-in`, `zoom-in`)                   |
-| `closed` | `data-closed`  | Exit animation (`fade-out`, `zoom-out`) → back to `idle` |
-
-The flow is: `idle` → `open` → `closed` → `idle`
-
-On `animationend`, the `closed` state resets to `idle`, which triggers overlay cleanup via `onDialogAnimationComplete()`.
-
-## Accessibility
-
-- `role="alertdialog"` on `ScAlertDialog`
-- `aria-modal="true"` for modal behavior
-- `aria-labelledby` linked to `ScAlertDialogTitle`
-- `aria-describedby` linked to `ScAlertDialogDescription`
-- `aria-haspopup="alertdialog"` on the trigger
-- `aria-expanded` reflects open state on trigger
-- Escape key does NOT close (user must choose an action)
-- Click outside does NOT close (user must choose an action)
-- Focus trapped within the dialog
-
-## Customization
-
-All components accept a `class` input for custom styling:
-
-```html
-<div sc-alert-dialog class="max-w-md">
-  <!-- narrower dialog -->
-</div>
-
-<button sc-alert-dialog-action class="bg-destructive">Delete</button>
-```

package/src/lib/components/alert-dialog/alert-dialog-action.ts

@@ -1,32 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialogProvider } from './alert-dialog-provider';
-import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'button[sc-alert-dialog-action]',
-  host: {
-    'data-slot': 'alert-dialog-action',
-    type: 'button',
-    '[class]': 'class()',
-    '(click)': 'action()',
-  },
-})
-export class ScAlertDialogAction {
-  private readonly alertDialogProvider = inject(ScAlertDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly variant = input<ScButtonVariants['variant']>('default');
-  readonly size = input<ScButtonVariants['size']>('default');
-
-  protected readonly class = computed(() =>
-    cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.classInput(),
-    ),
-  );
-
-  action(): void {
-    this.alertDialogProvider.open.set(false);
-  }
-}

package/src/lib/components/alert-dialog/alert-dialog-cancel.ts

@@ -1,32 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialogProvider } from './alert-dialog-provider';
-import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'button[sc-alert-dialog-cancel]',
-  host: {
-    'data-slot': 'alert-dialog-cancel',
-    type: 'button',
-    '[class]': 'class()',
-    '(click)': 'cancel()',
-  },
-})
-export class ScAlertDialogCancel {
-  private readonly alertDialogProvider = inject(ScAlertDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly variant = input<ScButtonVariants['variant']>('outline');
-  readonly size = input<ScButtonVariants['size']>('default');
-
-  protected readonly class = computed(() =>
-    cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.classInput(),
-    ),
-  );
-
-  cancel(): void {
-    this.alertDialogProvider.open.set(false);
-  }
-}

package/src/lib/components/alert-dialog/alert-dialog-description.ts

@@ -1,24 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialog } from './alert-dialog';
-
-@Directive({
-  selector: 'p[sc-alert-dialog-description]',
-  host: {
-    'data-slot': 'alert-dialog-description',
-    '[id]': 'dialog.descriptionId',
-    '[class]': 'class()',
-  },
-})
-export class ScAlertDialogDescription {
-  readonly dialog = inject(ScAlertDialog);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'text-muted-foreground text-sm text-balance md:text-pretty',
-      '*:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/alert-dialog/alert-dialog-footer.ts

@@ -1,21 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-alert-dialog-footer]',
-  host: {
-    'data-slot': 'alert-dialog-footer',
-    '[class]': 'class()',
-  },
-})
-export class ScAlertDialogFooter {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4',
-      'sm:flex-row sm:justify-end',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/alert-dialog/alert-dialog-header.ts

@@ -1,23 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-alert-dialog-header]',
-  host: {
-    'data-slot': 'alert-dialog-header',
-    '[class]': 'class()',
-  },
-})
-export class ScAlertDialogHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center',
-      'has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4',
-      'sm:place-items-start sm:text-left',
-      'sm:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/alert-dialog/alert-dialog-media.ts

@@ -1,22 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-alert-dialog-media]',
-  host: {
-    'data-slot': 'alert-dialog-media',
-    '[class]': 'class()',
-  },
-})
-export class ScAlertDialogMedia {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md',
-      'sm:row-span-2',
-      '*:[svg:not([class*="size-"])]:size-6',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/alert-dialog/alert-dialog-portal.ts

@@ -1,8 +0,0 @@
-import { Directive, inject, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: 'ng-template[scAlertDialogPortal]',
-})
-export class ScAlertDialogPortal {
-  readonly templateRef = inject(TemplateRef);
-}

package/src/lib/components/alert-dialog/alert-dialog-provider.ts

@@ -1,135 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { Overlay, OverlayModule, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  effect,
-  inject,
-  input,
-  model,
-  signal,
-  TemplateRef,
-  viewChild,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScBackdrop } from '../backdrop';
-import { ScAlertDialogPortal } from './alert-dialog-portal';
-
-@Component({
-  selector: 'div[sc-alert-dialog-provider]',
-  imports: [OverlayModule, ScBackdrop, CdkTrapFocus, NgTemplateOutlet],
-  template: `
-    <ng-content />
-    <ng-template #overlayTemplate>
-      <div
-        sc-backdrop
-        [open]="open()"
-        (animationComplete)="onBackdropAnimationComplete()"
-      ></div>
-      <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
-        <ng-container [ngTemplateOutlet]="alertDialogPortal().templateRef" />
-      </div>
-    </ng-template>
-  `,
-  host: {
-    'data-slot': 'alert-dialog-provider',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAlertDialogProvider {
-  private readonly overlay = inject(Overlay);
-  private readonly viewContainerRef = inject(ViewContainerRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  private readonly overlayTemplate =
-    viewChild.required<TemplateRef<unknown>>('overlayTemplate');
-
-  protected readonly alertDialogPortal =
-    contentChild.required(ScAlertDialogPortal);
-
-  readonly open = model<boolean>(false);
-  readonly overlayOpen = signal<boolean>(false);
-  private readonly animationsCompleted = signal<number>(0);
-  private overlayRef: OverlayRef | null = null;
-
-  protected readonly class = computed(() => cn('contents', this.classInput()));
-
-  constructor() {
-    effect(() => {
-      if (this.open()) {
-        this.overlayOpen.set(true);
-        this.animationsCompleted.set(0);
-      }
-    });
-
-    effect(() => {
-      const completed = this.animationsCompleted();
-      if (completed === 2 && !this.open()) {
-        this.overlayOpen.set(false);
-        this.animationsCompleted.set(0);
-      }
-    });
-
-    effect(() => {
-      if (this.overlayOpen()) {
-        this.attachDialog();
-      } else {
-        this.detachDialog();
-      }
-    });
-  }
-
-  onDialogAnimationComplete(): void {
-    if (!this.open()) {
-      this.animationsCompleted.update((n) => n + 1);
-    }
-  }
-
-  onBackdropAnimationComplete(): void {
-    if (!this.open()) {
-      this.animationsCompleted.update((n) => n + 1);
-    }
-  }
-
-  private getOverlayRef() {
-    if (!this.overlayRef) {
-      this.overlayRef = this.overlay.create({
-        positionStrategy: this.overlay
-          .position()
-          .global()
-          .centerHorizontally()
-          .centerVertically(),
-        hasBackdrop: true,
-        backdropClass: 'cdk-overlay-transparent-backdrop',
-        scrollStrategy: this.overlay.scrollStrategies.block(),
-      });
-    }
-    return this.overlayRef;
-  }
-
-  private attachDialog(): void {
-    const ref = this.getOverlayRef();
-    if (!ref.hasAttached()) {
-      const portal = new TemplatePortal(
-        this.overlayTemplate(),
-        this.viewContainerRef,
-      );
-      ref.attach(portal);
-    }
-  }
-
-  private detachDialog(): void {
-    if (this.overlayRef?.hasAttached()) {
-      this.overlayRef.detach();
-    }
-  }
-}

package/src/lib/components/alert-dialog/alert-dialog-title.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialog } from './alert-dialog';
-
-@Directive({
-  selector: 'h2[sc-alert-dialog-title]',
-  host: {
-    'data-slot': 'alert-dialog-title',
-    '[id]': 'dialog.titleId',
-    '[class]': 'class()',
-  },
-})
-export class ScAlertDialogTitle {
-  readonly dialog = inject(ScAlertDialog);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('text-base font-medium', this.classInput()),
-  );
-}

package/src/lib/components/alert-dialog/alert-dialog-trigger.ts

@@ -1,25 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialogProvider } from './alert-dialog-provider';
-
-@Directive({
-  selector: 'button[sc-alert-dialog-trigger]',
-  host: {
-    'data-slot': 'alert-dialog-trigger',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-haspopup]': '"alertdialog"',
-    '[attr.aria-expanded]': 'alertDialogProvider.open()',
-    '(click)': 'openDialog()',
-  },
-})
-export class ScAlertDialogTrigger {
-  readonly alertDialogProvider = inject(ScAlertDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  openDialog(): void {
-    this.alertDialogProvider.open.set(true);
-  }
-}

package/src/lib/components/alert-dialog/alert-dialog.ts

@@ -1,77 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScAlertDialogProvider } from './alert-dialog-provider';
-
-type ScAlertDialogState = 'open' | 'closed';
-
-@Component({
-  selector: 'div[sc-alert-dialog]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'alert-dialog',
-    role: 'alertdialog',
-    'aria-modal': 'true',
-    '[attr.aria-labelledby]': 'titleId',
-    '[attr.aria-describedby]': 'descriptionId',
-    '[attr.data-state]': 'state()',
-    '[class]': 'class()',
-    '[tabindex]': '-1',
-    '(animationend)': 'onAnimationEnd($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAlertDialog {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly alertDialogProvider = inject(ScAlertDialogProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly state = signal<ScAlertDialogState>('closed');
-
-  readonly dialogId = inject(_IdGenerator).getId('sc-alert-dialog-');
-
-  readonly titleId = `${this.dialogId}-title`;
-  readonly descriptionId = `${this.dialogId}-description`;
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 outline-none',
-      'max-w-xs sm:max-w-sm',
-      'animate-in fade-in-0 zoom-in-95 duration-300',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-300',
-      'group/alert-dialog-content',
-      this.classInput(),
-    ),
-  );
-
-  constructor() {
-    // Sync state with provider's open signal
-    effect(() => {
-      const isOpen = this.alertDialogProvider.open();
-      this.state.set(isOpen ? 'open' : 'closed');
-    });
-  }
-
-  protected onAnimationEnd(event: AnimationEvent): void {
-    // Only trigger cleanup when close animation completes
-    if (
-      this.state() === 'closed' &&
-      event.target === this.elementRef.nativeElement
-    ) {
-      this.alertDialogProvider.onDialogAnimationComplete();
-    }
-  }
-}

package/src/lib/components/alert-dialog/index.ts

@@ -1,11 +0,0 @@
-export { ScAlertDialogProvider } from './alert-dialog-provider';
-export { ScAlertDialogTrigger } from './alert-dialog-trigger';
-export { ScAlertDialogPortal } from './alert-dialog-portal';
-export { ScAlertDialog } from './alert-dialog';
-export { ScAlertDialogHeader } from './alert-dialog-header';
-export { ScAlertDialogTitle } from './alert-dialog-title';
-export { ScAlertDialogDescription } from './alert-dialog-description';
-export { ScAlertDialogFooter } from './alert-dialog-footer';
-export { ScAlertDialogMedia } from './alert-dialog-media';
-export { ScAlertDialogCancel } from './alert-dialog-cancel';
-export { ScAlertDialogAction } from './alert-dialog-action';