@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/toast/toast-action.ts

@@ -0,0 +1,27 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-toast-action]',
+  host: {
+    'data-slot': 'toast-action',
+    type: 'button',
+    '[class]': 'class()',
+  },
+})
+export class ScToastAction {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3',
+      'text-sm font-medium transition-colors',
+      'hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30',
+      'group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
+      'group-[.destructive]:focus:ring-destructive',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/toast/toast-close.ts

@@ -0,0 +1,29 @@
+import { computed, Directive, input, output } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-toast-close]',
+  host: {
+    'data-slot': 'toast-close',
+    type: 'button',
+    '[class]': 'class()',
+    'aria-label': 'Close',
+    '(click)': 'close.emit()',
+  },
+})
+export class ScToastClose {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /** Emitted when close button is clicked */
+  readonly close = output<void>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity',
+      'hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100',
+      'group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50',
+      'group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/toast/toast-description.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-toast-description]',
+  host: {
+    'data-slot': 'toast-description',
+    '[class]': 'class()',
+  },
+})
+export class ScToastDescription {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-sm opacity-90', this.classInput()),
+  );
+}

package/src/lib/components/toast/toast-stack.ts

@@ -0,0 +1,95 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScToast } from './toast';
+import { ScToastAction } from './toast-action';
+import { ScToastClose } from './toast-close';
+import { ScToastDescription } from './toast-description';
+import { ScToastTitle } from './toast-title';
+import { ScToaster } from './toaster';
+
+@Component({
+  selector: 'sc-toast-stack',
+  imports: [
+    ScToast,
+    ScToastTitle,
+    ScToastDescription,
+    ScToastClose,
+    ScToastAction,
+  ],
+  template: `
+    @for (toast of toastService.toasts(); track toast.id) {
+      <div
+        sc-toast
+        [variant]="toast.variant ?? 'default'"
+        [attr.data-state]="'open'"
+      >
+        <div class="grid gap-1">
+          @if (toast.title) {
+            <div sc-toast-title>{{ toast.title }}</div>
+          }
+          @if (toast.description) {
+            <div sc-toast-description>{{ toast.description }}</div>
+          }
+        </div>
+        @if (toast.action) {
+          <button
+            sc-toast-action
+            (click)="onAction(toast.id, toast.action.onClick)"
+          >
+            {{ toast.action.label }}
+          </button>
+        }
+        <button sc-toast-close (close)="dismiss(toast.id)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'toast-stack',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScToastStack {
+  readonly toastService = inject(ScToaster);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse gap-2 p-4',
+      'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      this.classInput(),
+    ),
+  );
+
+  protected dismiss(id: string): void {
+    this.toastService.dismiss(id);
+  }
+
+  protected onAction(id: string, onClick: () => void): void {
+    onClick();
+    this.toastService.dismiss(id);
+  }
+}

package/src/lib/components/toast/toast-title.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-toast-title]',
+  host: {
+    'data-slot': 'toast-title',
+    '[class]': 'class()',
+  },
+})
+export class ScToastTitle {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-sm font-semibold', this.classInput()),
+  );
+}

package/src/lib/components/toast/toast.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScToastVariant } from './toast.types';
+
+@Component({
+  selector: 'div[sc-toast]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'toast',
+    role: 'status',
+    'aria-live': 'polite',
+    'aria-atomic': 'true',
+    '[class]': 'class()',
+    '(pointerenter)': 'onPointerEnter()',
+    '(pointerleave)': 'onPointerLeave()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScToast {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScToastVariant>('default');
+
+  /** Emitted when pointer enters the toast (pause auto-dismiss) */
+  readonly pointerEnter = output<void>();
+
+  /** Emitted when pointer leaves the toast (resume auto-dismiss) */
+  readonly pointerLeave = output<void>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+      this.variantClass(),
+      this.classInput(),
+    ),
+  );
+
+  private readonly variantClass = computed(() => {
+    const variantClasses: Record<ScToastVariant, string> = {
+      default: 'border bg-background text-foreground',
+      destructive:
+        'destructive group border-destructive bg-destructive text-destructive-foreground',
+    };
+    return variantClasses[this.variant()];
+  });
+
+  protected onPointerEnter(): void {
+    this.pointerEnter.emit();
+  }
+
+  protected onPointerLeave(): void {
+    this.pointerLeave.emit();
+  }
+}

package/src/lib/components/toast/toast.types.ts

@@ -0,0 +1,24 @@
+export type ScToastVariant = 'default' | 'destructive';
+
+export interface ScToastData {
+  id: string;
+  title?: string;
+  description?: string;
+  variant?: ScToastVariant;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  duration?: number;
+}
+
+export interface ScToastConfig {
+  title?: string;
+  description?: string;
+  variant?: ScToastVariant;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  duration?: number;
+}

package/src/lib/components/toast/toaster.ts

@@ -0,0 +1,67 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { ScToastConfig, ScToastData } from './toast.types';
+import { _IdGenerator } from '@angular/cdk/a11y';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScToaster {
+  private readonly toastsSignal = signal<ScToastData[]>([]);
+  readonly toasts = this.toastsSignal.asReadonly();
+
+  private readonly defaultDuration = 5000;
+  private timeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+  private readonly idGenerator = inject(_IdGenerator);
+
+  /**
+   * Show a new toast notification
+   */
+  show(config: ScToastConfig): string {
+    const id = this.idGenerator.getId('sc-toast-');
+
+    const toast: ScToastData = {
+      id,
+      title: config.title,
+      description: config.description,
+      variant: config.variant ?? 'default',
+      action: config.action,
+      duration: config.duration ?? this.defaultDuration,
+    };
+
+    this.toastsSignal.update((toasts) => [...toasts, toast]);
+
+    // Auto-dismiss after duration (if duration > 0)
+    if (toast.duration && toast.duration > 0) {
+      const timeout = setTimeout(() => {
+        this.dismiss(id);
+      }, toast.duration);
+      this.timeouts.set(id, timeout);
+    }
+
+    return id;
+  }
+
+  /**
+   * Dismiss a specific toast by ID
+   */
+  dismiss(id: string): void {
+    // Clear timeout if exists
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+
+    this.toastsSignal.update((toasts) => toasts.filter((t) => t.id !== id));
+  }
+
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll(): void {
+    this.timeouts.forEach((timeout) => clearTimeout(timeout));
+    this.timeouts.clear();
+    this.toastsSignal.set([]);
+  }
+}

package/src/lib/components/toggle/README.md

@@ -0,0 +1,72 @@
+# Toggle
+
+A two-state button that can be either on or off.
+
+## Components
+
+- `ScToggle` - Toggle button with pressed/unpressed state
+
+## Usage
+
+```html
+<button sc-toggle [(pressed)]="bold" aria-label="Toggle bold">
+  <svg><!-- icon --></svg>
+</button>
+```
+
+## Variants
+
+```html
+<!-- Default -->
+<button sc-toggle>Toggle</button>
+
+<!-- Outline -->
+<button sc-toggle variant="outline">Toggle</button>
+```
+
+## Sizes
+
+```html
+<button sc-toggle size="sm">Small</button>
+<button sc-toggle size="default">Default</button>
+<button sc-toggle size="lg">Large</button>
+```
+
+## With Text
+
+```html
+<button sc-toggle [(pressed)]="underline">
+  <svg class="mr-2 size-4"><!-- icon --></svg>
+  Underline
+</button>
+```
+
+## Disabled
+
+```html
+<button sc-toggle [disabled]="true">Toggle</button>
+```
+
+## Inputs
+
+| Input      | Type                        | Default     | Description                |
+| ---------- | --------------------------- | ----------- | -------------------------- |
+| `pressed`  | `boolean`                   | `false`     | The pressed state (model)  |
+| `disabled` | `boolean`                   | `false`     | Whether toggle is disabled |
+| `variant`  | `'default' \| 'outline'`    | `'default'` | Toggle variant             |
+| `size`     | `'default' \| 'sm' \| 'lg'` | `'default'` | Toggle size                |
+| `class`    | `string`                    | `''`        | Additional CSS classes     |
+
+## Outputs
+
+| Output          | Type      | Description                      |
+| --------------- | --------- | -------------------------------- |
+| `pressedChange` | `boolean` | Emits when pressed state changes |
+
+## Accessibility
+
+- Uses `aria-pressed` to communicate state
+- `data-state` attribute: `on` or `off`
+- Should include `aria-label` when using only icons
+- Keyboard accessible (Enter/Space to toggle)
+- Focus ring for keyboard navigation

package/src/lib/components/toggle/index.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/src/lib/components/toggle/toggle.ts

@@ -0,0 +1,53 @@
+import { computed, Directive, input, model } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export type ToggleVariant = 'default' | 'outline';
+export type ToggleSize = 'default' | 'sm' | 'lg';
+
+const variantClasses: Record<ToggleVariant, string> = {
+  default: 'bg-transparent',
+  outline:
+    'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+};
+
+const sizeClasses: Record<ToggleSize, string> = {
+  default: 'h-10 px-3',
+  sm: 'h-9 px-2.5',
+  lg: 'h-11 px-5',
+};
+
+@Directive({
+  selector: 'button[sc-toggle]',
+  host: {
+    'data-slot': 'toggle',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-pressed]': 'pressed()',
+    '[attr.data-state]': 'pressed() ? "on" : "off"',
+    '[disabled]': 'disabled()',
+    '(click)': 'toggle()',
+  },
+})
+export class ScToggle {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly pressed = model<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('default');
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      this.pressed() && 'bg-accent text-accent-foreground',
+      variantClasses[this.variant()],
+      sizeClasses[this.size()],
+      this.classInput(),
+    ),
+  );
+
+  protected toggle(): void {
+    if (!this.disabled()) {
+      this.pressed.update((v) => !v);
+    }
+  }
+}

package/src/lib/components/toggle-group/README.md

@@ -0,0 +1,101 @@
+# Toggle Group
+
+A set of two-state buttons that can be toggled on or off.
+
+## Components
+
+- `ScToggleGroup` - Container for toggle group items
+- `ScToggleGroupItem` - Individual toggle button within the group
+
+## Usage
+
+```html
+<!-- Single selection -->
+<div sc-toggle-group type="single" [(value)]="alignment" aria-label="Text alignment">
+  <button sc-toggle-group-item value="left" aria-label="Align left">Left</button>
+  <button sc-toggle-group-item value="center" aria-label="Align center">Center</button>
+  <button sc-toggle-group-item value="right" aria-label="Align right">Right</button>
+</div>
+
+<!-- Multiple selection -->
+<div sc-toggle-group type="multiple" [(value)]="formatting" aria-label="Text formatting">
+  <button sc-toggle-group-item value="bold" aria-label="Toggle bold">B</button>
+  <button sc-toggle-group-item value="italic" aria-label="Toggle italic">I</button>
+  <button sc-toggle-group-item value="underline" aria-label="Toggle underline">U</button>
+</div>
+```
+
+## Variants
+
+```html
+<!-- Default -->
+<div sc-toggle-group type="single">
+  <button sc-toggle-group-item value="a">A</button>
+  <button sc-toggle-group-item value="b">B</button>
+</div>
+
+<!-- Outline -->
+<div sc-toggle-group type="single" variant="outline">
+  <button sc-toggle-group-item value="a">A</button>
+  <button sc-toggle-group-item value="b">B</button>
+</div>
+```
+
+## Sizes
+
+```html
+<div sc-toggle-group type="single" size="sm">...</div>
+<div sc-toggle-group type="single" size="default">...</div>
+<div sc-toggle-group type="single" size="lg">...</div>
+```
+
+## Disabled
+
+```html
+<!-- Disable entire group -->
+<div sc-toggle-group type="single" [disabled]="true">
+  <button sc-toggle-group-item value="a">A</button>
+  <button sc-toggle-group-item value="b">B</button>
+</div>
+
+<!-- Disable individual items -->
+<div sc-toggle-group type="single">
+  <button sc-toggle-group-item value="a">A</button>
+  <button sc-toggle-group-item value="b" [disabled]="true">B</button>
+</div>
+```
+
+## ScToggleGroup Inputs
+
+| Input      | Type                         | Default     | Description                    |
+| ---------- | ---------------------------- | ----------- | ------------------------------ |
+| `type`     | `'single' \| 'multiple'`     | `'single'`  | Selection mode                 |
+| `value`    | `string \| string[] \| null` | `null`      | Selected value(s) (model)      |
+| `disabled` | `boolean`                    | `false`     | Whether all items are disabled |
+| `variant`  | `'default' \| 'outline'`     | `'default'` | Toggle variant                 |
+| `size`     | `'default' \| 'sm' \| 'lg'`  | `'default'` | Toggle size                    |
+| `class`    | `string`                     | `''`        | Additional CSS classes         |
+
+## ScToggleGroup Outputs
+
+| Output        | Type                         | Description                  |
+| ------------- | ---------------------------- | ---------------------------- |
+| `valueChange` | `string \| string[] \| null` | Emits when selection changes |
+
+## ScToggleGroupItem Inputs
+
+| Input      | Type      | Default | Description                   |
+| ---------- | --------- | ------- | ----------------------------- |
+| `value`    | `string`  | -       | Value of this item (required) |
+| `disabled` | `boolean` | `false` | Whether this item is disabled |
+| `class`    | `string`  | `''`    | Additional CSS classes        |
+
+## Accessibility
+
+- Uses `role="group"` on the container
+- Uses `aria-pressed` to communicate state on items
+- `data-state` attribute: `on` or `off`
+- Should include `aria-label` on container for group description
+- Should include `aria-label` on items when using only icons
+- Keyboard accessible (Enter/Space to toggle)
+- Focus ring for keyboard navigation

package/src/lib/components/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export * from './toggle-group';
+export * from './toggle-group-item';

package/src/lib/components/toggle-group/toggle-group-item.ts

@@ -0,0 +1,62 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import {
+  ScToggleGroup,
+  ToggleGroupSize,
+  ToggleGroupVariant,
+} from './toggle-group';
+
+const variantClasses: Record<ToggleGroupVariant, string> = {
+  default: 'bg-transparent',
+  outline:
+    'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+};
+
+const sizeClasses: Record<ToggleGroupSize, string> = {
+  default: 'h-10 px-3',
+  sm: 'h-9 px-2.5',
+  lg: 'h-11 px-5',
+};
+
+@Directive({
+  selector: 'button[sc-toggle-group-item]',
+  host: {
+    'data-slot': 'toggle-group-item',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-pressed]': 'isSelected()',
+    '[attr.data-state]': 'isSelected() ? "on" : "off"',
+    '[disabled]': 'isDisabled()',
+    '(click)': 'onClick()',
+  },
+})
+export class ScToggleGroupItem {
+  private readonly group = inject(ScToggleGroup);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input.required<string>();
+  readonly disabled = input<boolean>(false);
+
+  protected readonly isSelected = computed(() =>
+    this.group.isSelected(this.value()),
+  );
+  protected readonly isDisabled = computed(
+    () => this.disabled() || this.group.disabled(),
+  );
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      this.isSelected() && 'bg-accent text-accent-foreground',
+      variantClasses[this.group.variant()],
+      sizeClasses[this.group.size()],
+      this.classInput(),
+    ),
+  );
+
+  protected onClick(): void {
+    if (!this.isDisabled()) {
+      this.group.toggle(this.value());
+    }
+  }
+}