@sonny-ui/core 0.1.0-alpha.7 → 0.1.0-alpha.9

package/src/lib/toast/toast.variants.ts

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-sm border p-6 pr-8 shadow-lg transition-all',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background border-border text-foreground',
+        destructive: 'bg-destructive border-destructive text-destructive-foreground',
+        success: 'bg-green-600 border-green-600 text-white',
+        warning: 'bg-yellow-500 border-yellow-500 text-white',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastConfig {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: ToastAction;
+}
+
+export interface ToastData extends ToastConfig {
+  id: string;
+}

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

@@ -0,0 +1,80 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { SnyToastService } from './toast.service';
+import { toastVariants, type ToastPosition, type ToastVariant } from './toast.variants';
+import { cn } from '../core/utils/cn';
+
+@Component({
+  selector: 'sny-toaster',
+  standalone: true,
+  template: `
+    <div [class]="containerClass()" role="region" aria-label="Notifications" tabindex="-1">
+      @for (toast of visibleToasts(); track toast.id) {
+        <div
+          [class]="toastClasses[toast.variant ?? 'default']"
+          role="alert"
+          aria-live="polite"
+        >
+          <div class="grid gap-1">
+            <div class="text-sm font-semibold">{{ toast.title }}</div>
+            @if (toast.description) {
+              <div class="text-sm opacity-90">{{ toast.description }}</div>
+            }
+          </div>
+          <div class="flex items-center gap-2">
+            @if (toast.action) {
+              <button
+                class="inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary"
+                (click)="toast.action!.onClick()"
+              >
+                {{ toast.action!.label }}
+              </button>
+            }
+            <button
+              class="absolute right-2 top-2 rounded-sm p-1 opacity-0 transition-opacity hover:opacity-100 group-hover:opacity-100 focus:opacity-100"
+              aria-label="Close"
+              (click)="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>
+        </div>
+      }
+    </div>
+  `,
+})
+export class SnyToasterComponent {
+  private readonly toastService = inject(SnyToastService);
+
+  readonly position = input<ToastPosition>('bottom-right');
+  readonly maxToasts = input(5);
+
+  readonly visibleToasts = computed(() =>
+    this.toastService.toasts().slice(-this.maxToasts())
+  );
+
+  readonly containerClass = computed(() => {
+    const pos = this.position();
+    const base = 'fixed z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:max-w-[420px]';
+    const posMap: Record<ToastPosition, string> = {
+      'top-right': 'top-0 right-0',
+      'top-left': 'top-0 left-0',
+      'bottom-right': 'bottom-0 right-0',
+      'bottom-left': 'bottom-0 left-0',
+      'top-center': 'top-0 left-1/2 -translate-x-1/2',
+      'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    };
+    return cn(base, posMap[pos]);
+  });
+
+  /** Pre-computed toast classes by variant — avoids method calls in the template. */
+  readonly toastClasses: Record<ToastVariant, string> = {
+    default: cn(toastVariants({ variant: 'default' })),
+    destructive: cn(toastVariants({ variant: 'destructive' })),
+    success: cn(toastVariants({ variant: 'success' })),
+    warning: cn(toastVariants({ variant: 'warning' })),
+  };
+
+  dismiss(id: string): void {
+    this.toastService.dismiss(id);
+  }
+}

package/src/lib/toggle/index.ts

@@ -0,0 +1,2 @@
+export { SnyToggleDirective } from './toggle.directive';
+export { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';

package/src/lib/toggle/toggle.directive.spec.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyToggleDirective } from './toggle.directive';
+import type { ToggleVariant, ToggleSize } from './toggle.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyToggleDirective],
+  template: `<button snyToggle [variant]="variant()" [size]="size()" [(pressed)]="pressed">Toggle</button>`,
+})
+class TestHostComponent {
+  variant = signal<ToggleVariant>('default');
+  size = signal<ToggleSize>('md');
+  pressed = signal(false);
+}
+
+describe('SnyToggleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should apply default classes', () => {
+    expect(button.className).toContain('inline-flex');
+    expect(button.className).toContain('rounded-sm');
+  });
+
+  it('should be unpressed by default', () => {
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('should toggle pressed on click', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+    expect(button.className).toContain('bg-accent');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(button.className).toContain('border');
+  });
+});

package/src/lib/toggle/toggle.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, computed, input, model } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';
+
+@Directive({
+  selector: 'button[snyToggle]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-pressed]': 'pressed()',
+    '(click)': 'pressed.set(!pressed())',
+  },
+})
+export class SnyToggleDirective {
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('md');
+  readonly pressed = model(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      toggleVariants({ variant: this.variant(), size: this.size() }),
+      this.pressed() ? 'bg-accent text-accent-foreground' : '',
+      this.class()
+    )
+  );
+}

package/src/lib/toggle/toggle.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent hover:bg-muted hover:text-muted-foreground',
+        outline: 'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        sm: 'h-9 px-2.5',
+        md: 'h-10 px-3',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type ToggleVariant = 'default' | 'outline';
+export type ToggleSize = 'sm' | 'md' | 'lg';