@shadng/sng-ui 1.0.0

package/src/lib/tabs/sng-tabs-content.ts

@@ -0,0 +1,66 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+  inject,
+} from '@angular/core';
+import { SNG_TABS } from './sng-tabs';
+import { cn } from './cn';
+
+/**
+ * Content panel that is shown when the corresponding tab trigger is active.
+ * Must be placed inside an `sng-tabs` component.
+ *
+ * @example
+ * ```html
+ * <sng-tabs defaultValue="account">
+ *   <sng-tabs-list>
+ *     <sng-tabs-trigger value="account">Account</sng-tabs-trigger>
+ *     <sng-tabs-trigger value="settings">Settings</sng-tabs-trigger>
+ *   </sng-tabs-list>
+ *   <sng-tabs-content value="account">
+ *     <p>Manage your account details here.</p>
+ *   </sng-tabs-content>
+ *   <sng-tabs-content value="settings">
+ *     <p>Configure your preferences.</p>
+ *   </sng-tabs-content>
+ * </sng-tabs>
+ * ```
+ */
+@Component({
+  selector: 'sng-tabs-content',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'tabpanel',
+    '[class]': 'hostClasses()',
+    '[attr.id]': 'contentId()',
+    '[attr.aria-labelledby]': 'triggerId()',
+    '[attr.data-state]': 'isSelected() ? "active" : "inactive"',
+    '[hidden]': '!isSelected()',
+  },
+  template: `<ng-content />`,
+})
+export class SngTabsContent {
+  private tabs = inject(SNG_TABS);
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /**
+   * Unique identifier for this content panel. Must match the value of the corresponding `sng-tabs-trigger`.
+   */
+  value = input.required<string>();
+
+  isSelected = computed(() => this.tabs.isSelected(this.value()));
+  contentId = computed(() => this.tabs.contentId(this.value()));
+  triggerId = computed(() => this.tabs.triggerId(this.value()));
+
+  hostClasses = computed(() =>
+    cn(
+      'flex-1 outline-none',
+      this.class()
+    )
+  );
+}

package/src/lib/tabs/sng-tabs-list.ts

@@ -0,0 +1,55 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  inject,
+} from '@angular/core';
+import { SNG_TABS } from './sng-tabs';
+import { cn } from './cn';
+
+// Style customization via [class]:
+// Default (muted bg):    class="bg-muted rounded-lg p-1"  (built-in)
+// Underline:             class="border-b border-border bg-transparent p-0 rounded-none"
+// Pills:                 class="bg-transparent gap-1 p-0"
+
+/**
+ * Container for tab triggers that provides proper tablist semantics.
+ * Must be placed inside an `sng-tabs` component.
+ *
+ * @example
+ * ```html
+ * <sng-tabs defaultValue="tab1">
+ *   <sng-tabs-list>
+ *     <sng-tabs-trigger value="tab1">Tab 1</sng-tabs-trigger>
+ *     <sng-tabs-trigger value="tab2">Tab 2</sng-tabs-trigger>
+ *   </sng-tabs-list>
+ * </sng-tabs>
+ * ```
+ */
+@Component({
+  selector: 'sng-tabs-list',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'role': 'tablist',
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngTabsList {
+  /** @internal */
+  readonly tabs = inject(SNG_TABS);
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  hostClasses = computed(() =>
+    cn(
+      'inline-flex items-center justify-center bg-muted rounded-lg p-1',
+      this.class()
+    )
+  );
+}

package/src/lib/tabs/sng-tabs-trigger.ts

@@ -0,0 +1,86 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  input,
+  computed,
+  inject,
+} from '@angular/core';
+import { SNG_TABS } from './sng-tabs';
+import { cn } from './cn';
+
+const baseClasses = 'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none';
+
+// Style customization via [class] + data-state attribute:
+// Default (muted bg):    (built-in) — active: bg-background text-foreground shadow-sm, inactive: text-muted-foreground
+// Underline:             class="border-b-2 -mb-px pb-1 px-0 py-0 rounded-none border-transparent data-[state=active]:border-foreground data-[state=active]:text-foreground"
+// Pills:                 class="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:hover:bg-muted"
+
+/**
+ * A clickable tab trigger that activates the corresponding content panel.
+ * Must be placed inside an `sng-tabs-list` component.
+ *
+ * @example
+ * ```html
+ * <sng-tabs-list>
+ *   <sng-tabs-trigger value="overview">Overview</sng-tabs-trigger>
+ *   <sng-tabs-trigger value="analytics">Analytics</sng-tabs-trigger>
+ *   <sng-tabs-trigger value="reports">Reports</sng-tabs-trigger>
+ * </sng-tabs-list>
+ * ```
+ */
+@Component({
+  selector: 'sng-tabs-trigger',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'tab',
+    '[class]': 'hostClasses()',
+    '[attr.data-state]': 'isSelected() ? "active" : "inactive"',
+    '[attr.data-value]': 'value()',
+    '[attr.id]': 'triggerId()',
+    '[attr.aria-controls]': 'contentId()',
+    '[attr.tabindex]': '0',
+    '[attr.aria-selected]': 'isSelected()',
+    '(click)': 'onClick()',
+  },
+  template: `<ng-content />`,
+})
+export class SngTabsTrigger {
+  private tabs = inject(SNG_TABS);
+  /** @internal */
+  _elementRef = inject(ElementRef);
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /**
+   * Unique identifier for this tab. Must match the value of the corresponding `sng-tabs-content`.
+   */
+  value = input.required<string>();
+
+  isSelected = computed(() => this.tabs.isSelected(this.value()));
+  triggerId = computed(() => this.tabs.triggerId(this.value()));
+  contentId = computed(() => this.tabs.contentId(this.value()));
+
+  hostClasses = computed(() => {
+    const selected = this.isSelected();
+    return cn(
+      baseClasses,
+      'rounded-md',
+      selected
+        ? 'bg-background text-foreground shadow-sm'
+        : 'text-muted-foreground hover:text-foreground',
+      this.class()
+    );
+  });
+
+  onClick() {
+    this.tabs.select(this.value());
+  }
+
+  /** @internal Focus this trigger element. */
+  _focus() {
+    this._elementRef.nativeElement.focus();
+  }
+}

package/src/lib/tabs/sng-tabs.ts

@@ -0,0 +1,83 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  signal,
+  input,
+  output,
+  InjectionToken,
+  computed,
+} from '@angular/core';
+import { cn } from './cn';
+
+export const SNG_TABS = new InjectionToken<SngTabs>('SNG_TABS');
+
+/**
+ * Container component for a tabbed interface.
+ * Manages tab selection state and coordinates between triggers and content panels.
+ *
+ * @example
+ * ```html
+ * <sng-tabs defaultValue="account">
+ *   <sng-tabs-list>
+ *     <sng-tabs-trigger value="account">Account</sng-tabs-trigger>
+ *     <sng-tabs-trigger value="password">Password</sng-tabs-trigger>
+ *   </sng-tabs-list>
+ *   <sng-tabs-content value="account">Account settings here.</sng-tabs-content>
+ *   <sng-tabs-content value="password">Password settings here.</sng-tabs-content>
+ * </sng-tabs>
+ * ```
+ */
+@Component({
+  selector: 'sng-tabs',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: SNG_TABS, useExisting: SngTabs }],
+  host: {
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngTabs {
+  private static _instanceCounter = 0;
+  private readonly _instanceId = `sng-tabs-${++SngTabs._instanceCounter}`;
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /**
+   * The value of the tab that should be selected by default.
+   */
+  defaultValue = input<string>('');
+
+  /**
+   * Emitted when the selected tab changes.
+   */
+  valueChange = output<string>();
+
+  private _selectedValue = signal<string | null>(null);
+
+  hostClasses = computed(() => cn('flex flex-col gap-1', this.class()));
+
+  selectedValue = computed(() => this._selectedValue() ?? this.defaultValue());
+
+  select(value: string) {
+    this._selectedValue.set(value);
+    this.valueChange.emit(value);
+  }
+
+  isSelected(value: string): boolean {
+    return this.selectedValue() === value;
+  }
+
+  triggerId(value: string): string {
+    return `${this._instanceId}-trigger-${this.slug(value)}`;
+  }
+
+  contentId(value: string): string {
+    return `${this._instanceId}-content-${this.slug(value)}`;
+  }
+
+  private slug(value: string): string {
+    return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
+  }
+}

package/src/lib/toast/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/toast/index.ts

@@ -0,0 +1,3 @@
+export * from './sng-toast.service';
+export * from './sng-toast';
+export * from './sng-toaster';

package/src/lib/toast/sng-toast.service.ts

@@ -0,0 +1,258 @@
+import { Injectable, signal, Signal, inject } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { Subscription, timer } from 'rxjs';
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export type ToastPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+export type ToastDismissType = 'countdown' | 'fixed';
+
+/**
+ * Screen reader announcement priority for toast notifications.
+ * - 'polite': Waits for silence (default, use for success/info)
+ * - 'assertive': Interrupts immediately (use for errors)
+ */
+export type ToastPriority = 'polite' | 'assertive';
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  action?: ToastAction;
+  /**
+   * Custom Tailwind classes for styling. No variant input - use classes directly.
+   *
+   * Common styling patterns:
+   * - Success: `class="border-green-500 text-green-600"`
+   * - Error: `class="border-red-500 text-red-600"`
+   * - Warning: `class="border-yellow-500 text-yellow-600"`
+   * - Info: `class="border-blue-500 text-blue-600"`
+   * - Custom width: `class="w-[400px]"` (default: w-[360px])
+   */
+  class?: string;
+  /** Screen reader announcement priority. */
+  priority?: ToastPriority;
+  duration?: number;
+  position?: ToastPosition;
+  dismissType?: ToastDismissType;
+  /** @internal Animation state for enter/exit transitions. */
+  _state?: 'open' | 'closed';
+}
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  action?: ToastAction;
+  /**
+   * Custom Tailwind classes for styling. No variant input - use classes directly.
+   *
+   * Common styling patterns:
+   * - Success: `class="border-green-500 text-green-600"`
+   * - Error: `class="border-red-500 text-red-600"`
+   * - Warning: `class="border-yellow-500 text-yellow-600"`
+   * - Info: `class="border-blue-500 text-blue-600"`
+   * - Custom width: `class="w-[400px]"` (default: w-[360px])
+   */
+  class?: string;
+  /** Screen reader announcement priority. */
+  priority?: ToastPriority;
+  duration?: number;
+  position?: ToastPosition;
+  dismissType?: ToastDismissType;
+}
+
+const TOASTS = signal<Toast[]>([]);
+let nextToastId = 0;
+
+function getToastsSignal() {
+  return TOASTS;
+}
+
+const MAX_TOASTS = 5;
+
+/**
+ * Service for displaying toast notifications. Provides methods for showing
+ * different types of toasts (success, error, warning) with customizable
+ * position, duration, and actions. Automatically announces messages to
+ * screen readers for accessibility.
+ *
+ * @example
+ * ```typescript
+ * export class MyComponent {
+ *   private toastService = inject(SngToastService);
+ *
+ *   showSuccess(): void {
+ *     this.toastService.success('Changes saved', 'Your settings have been updated.');
+ *   }
+ *
+ *   showWithAction(): void {
+ *     this.toastService.show({
+ *       title: 'File deleted',
+ *       description: 'The file has been moved to trash.',
+ *       action: { label: 'Undo', onClick: () => this.undoDelete() },
+ *     });
+ *   }
+ * }
+ * ```
+ */
+@Injectable({ providedIn: 'root' })
+export class SngToastService {
+  private liveAnnouncer = inject(LiveAnnouncer);
+  private autoDismissSubscriptions = new Map<string, Subscription>();
+  private removalSubscriptions = new Map<string, Subscription>();
+
+  /** Readonly signal containing all currently visible toasts. */
+  readonly toasts: Signal<readonly Toast[]> = getToastsSignal().asReadonly();
+
+  private generateId(): string {
+    nextToastId += 1;
+    return `toast-${nextToastId}`;
+  }
+
+  /**
+   * Shows a toast notification with the provided options.
+   * @param options - Configuration for the toast including title, description, class, etc.
+   * @returns The unique ID of the created toast (can be used with dismiss()).
+   */
+  show(options: ToastOptions): string {
+    const id = this.generateId();
+    const dismissType = options.dismissType ?? 'countdown';
+    const toast: Toast = {
+      id,
+      title: options.title,
+      description: options.description,
+      action: options.action,
+      class: options.class,
+      priority: options.priority ?? 'polite',
+      duration: options.duration ?? 3000,
+      position: options.position ?? 'bottom-right',
+      dismissType,
+    };
+
+    getToastsSignal().update(toasts => {
+      const newToasts = [...toasts, toast];
+      // Remove oldest toasts if exceeding max limit
+      if (newToasts.length > MAX_TOASTS) {
+        const removedToasts = newToasts.slice(0, newToasts.length - MAX_TOASTS);
+        removedToasts.forEach(removed => this.clearToastTimers(removed.id));
+        return newToasts.slice(-MAX_TOASTS);
+      }
+      return newToasts;
+    });
+
+    // Announce to screen readers
+    const message = options.description
+      ? `${options.title}. ${options.description}`
+      : options.title;
+    this.liveAnnouncer.announce(message, toast.priority!);
+
+    // Only auto-dismiss for countdown type
+    if (dismissType === 'countdown' && toast.duration && toast.duration > 0) {
+      const subscription = timer(toast.duration).subscribe(() => {
+        this.autoDismissSubscriptions.delete(id);
+        this.dismiss(id);
+      });
+      this.autoDismissSubscriptions.set(id, subscription);
+    }
+
+    return id;
+  }
+
+  /**
+   * Shows a success toast notification with green styling.
+   * Uses polite screen reader announcement.
+   * @param title - The toast title.
+   * @param description - Optional description text.
+   * @returns The unique ID of the created toast.
+   */
+  success(title: string, description?: string): string {
+    return this.show({
+      title,
+      description,
+      class: 'border-green-500 text-green-600',
+      priority: 'polite',
+    });
+  }
+
+  /**
+   * Shows an error toast notification with red styling.
+   * Uses assertive screen reader announcement (interrupts immediately).
+   * @param title - The toast title.
+   * @param description - Optional description text.
+   * @returns The unique ID of the created toast.
+   */
+  error(title: string, description?: string): string {
+    return this.show({
+      title,
+      description,
+      class: 'border-red-500 text-red-600',
+      priority: 'assertive',
+    });
+  }
+
+  /**
+   * Shows a warning toast notification with yellow styling.
+   * Uses polite screen reader announcement.
+   * @param title - The toast title.
+   * @param description - Optional description text.
+   * @returns The unique ID of the created toast.
+   */
+  warning(title: string, description?: string): string {
+    return this.show({
+      title,
+      description,
+      class: 'border-yellow-500 text-yellow-600',
+      priority: 'polite',
+    });
+  }
+
+  /**
+   * Dismisses a specific toast by its ID with an exit animation.
+   * Sets the toast state to 'closed' to trigger the CSS exit animation,
+   * then removes the toast from the array after the animation completes.
+   * @param id - The unique ID of the toast to dismiss.
+   */
+  dismiss(id: string): void {
+    this.autoDismissSubscriptions.get(id)?.unsubscribe();
+    this.autoDismissSubscriptions.delete(id);
+
+    const currentToasts = getToastsSignal();
+    const targetToast = currentToasts().find(t => t.id === id);
+    if (!targetToast) return;
+
+    if (this.removalSubscriptions.has(id)) {
+      return;
+    }
+
+    // Set state to 'closed' to trigger exit animation
+    currentToasts.update(toasts =>
+      toasts.map(t => t.id === id ? { ...t, _state: 'closed' as const } : t)
+    );
+
+    // Remove after exit animation completes (300ms matches sng-toast-exit duration)
+    const subscription = timer(300).subscribe(() => {
+      this.removalSubscriptions.delete(id);
+      currentToasts.update(toasts => toasts.filter(t => t.id !== id));
+    });
+    this.removalSubscriptions.set(id, subscription);
+  }
+
+  /** Immediately dismisses all visible toasts without animation. */
+  dismissAll(): void {
+    this.autoDismissSubscriptions.forEach(subscription => subscription.unsubscribe());
+    this.autoDismissSubscriptions.clear();
+    this.removalSubscriptions.forEach(subscription => subscription.unsubscribe());
+    this.removalSubscriptions.clear();
+    getToastsSignal().set([]);
+  }
+
+  private clearToastTimers(id: string): void {
+    this.autoDismissSubscriptions.get(id)?.unsubscribe();
+    this.autoDismissSubscriptions.delete(id);
+    this.removalSubscriptions.get(id)?.unsubscribe();
+    this.removalSubscriptions.delete(id);
+  }
+}

package/src/lib/toast/sng-toast.ts

@@ -0,0 +1,101 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  output,
+  computed,
+} from '@angular/core';
+import type { Toast } from './sng-toast.service';
+import { cn } from './cn';
+
+/**
+ * Individual toast notification component that displays a message with optional
+ * action button and close functionality.
+ *
+ * Styling is controlled via the `class` property on the Toast object.
+ * See SngToastService for styling patterns.
+ *
+ * @example
+ * ```html
+ * <sng-toast [toast]="toastData" (dismissed)="onDismiss()" />
+ * ```
+ */
+@Component({
+  selector: 'sng-toast',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {},
+  styles: [`
+    .sng-toast[data-state=open] {
+      animation: sng-toast-enter var(--sng-toast-duration, 300ms) var(--sng-toast-ease, ease) both;
+    }
+    .sng-toast[data-state=closed] {
+      animation: sng-toast-exit var(--sng-toast-duration, 300ms) var(--sng-toast-ease, ease) both;
+    }
+    @keyframes sng-toast-enter {
+      from { opacity: 0; transform: translateX(1rem); }
+    }
+    @keyframes sng-toast-exit {
+      to { opacity: 0; transform: translateX(1rem); }
+    }
+  `],
+  template: `
+    <div class="sng-toast" [attr.data-state]="toast()._state ?? 'open'" [class]="containerClasses()">
+      <div class="flex-1 min-w-0 space-y-1 pr-6">
+        <div class="text-sm font-semibold">{{ toast().title }}</div>
+        @if (toast().description) {
+          <div class="text-sm text-muted-foreground">{{ toast().description }}</div>
+        }
+      </div>
+      @if (toast().action) {
+        <button
+          type="button"
+          class="inline-flex h-8 shrink-0 items-center justify-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 mr-6"
+          (click)="onAction()"
+        >
+          {{ toast().action!.label }}
+        </button>
+      }
+      <button
+        type="button"
+        [attr.aria-label]="dismissAriaLabel()"
+        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 hover:text-foreground"
+        (click)="dismissed.emit()"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  `,
+})
+export class SngToast {
+  /** The toast data object containing title, description, class, and other options. */
+  toast = input.required<Toast>();
+
+  /** Emits when the toast is dismissed via the close button or action button. */
+  dismissed = output<void>();
+
+  /** Aria label for the dismiss button. */
+  dismissAriaLabel = input<string>('Dismiss notification');
+
+  containerClasses = computed(() => {
+    const toast = this.toast();
+
+    // Base styles (always applied) — animation is driven by data-state attribute
+    const base = 'group pointer-events-auto relative flex items-start justify-between gap-4 overflow-hidden rounded-lg border p-4 shadow-lg text-sm bg-background border-border';
+
+    // Custom class (user-provided styling, e.g., "border-green-500 text-green-600 w-[400px]")
+    // Default width is w-[360px] if not specified
+    const customClass = toast.class || 'w-[360px]';
+
+    return cn(base, customClass);
+  });
+
+  onAction(): void {
+    this.toast().action?.onClick();
+    this.dismissed.emit();
+  }
+}