@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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