@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.20

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

@@ -0,0 +1,100 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+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');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyToggleDirective],
+  template: `<button snyToggle [formControl]="ctrl">Toggle</button>`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(false);
+}
+
+describe('SnyToggleDirective — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(true);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    button.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Directive, computed, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';
+
+@Directive({
+  selector: 'button[snyToggle]',
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
+  ],
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-pressed]': 'pressed()',
+    '[attr.disabled]': 'isDisabled() || null',
+    '(click)': 'toggle()',
+    '(blur)': 'onTouched()',
+  },
+})
+export class SnyToggleDirective implements ControlValueAccessor {
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('md');
+  readonly pressed = model(false);
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this._disabledByCva());
+
+  private _onChange: (value: boolean) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(val: boolean): void {
+    this.pressed.set(val ?? false);
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  protected toggle(): void {
+    if (this.isDisabled()) return;
+    const newVal = !this.pressed();
+    this.pressed.set(newVal);
+    this._onChange(newVal);
+  }
+
+  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';

package/src/lib/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { SnyTooltipDirective } from './tooltip.directive';
+export { tooltipVariants, type TooltipPosition } from './tooltip.variants';

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

@@ -0,0 +1,113 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTooltipDirective } from './tooltip.directive';
+import type { TooltipPosition } from './tooltip.variants';
+import { vi } from 'vitest';
+
+@Component({
+  standalone: true,
+  imports: [SnyTooltipDirective],
+  template: `
+    <button
+      [snyTooltip]="text()"
+      [tooltipPosition]="position()"
+      [tooltipDelay]="delay()"
+      [tooltipDisabled]="disabled()"
+    >
+      Hover me
+    </button>
+  `,
+})
+class TestHostComponent {
+  text = signal('Tooltip text');
+  position = signal<TooltipPosition>('top');
+  delay = signal(0);
+  disabled = signal(false);
+}
+
+describe('SnyTooltipDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.querySelectorAll('[role="tooltip"]').forEach((el) => el.remove());
+  });
+
+  it('should not show tooltip initially', () => {
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+    expect(button.getAttribute('aria-describedby')).toBeNull();
+  });
+
+  it('should show tooltip on mouseenter after delay', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    const tooltip = document.querySelector('[role="tooltip"]');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip!.textContent).toBe('Tooltip text');
+  });
+
+  it('should hide tooltip on mouseleave', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new MouseEvent('mouseleave'));
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should set aria-describedby when visible', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    expect(button.getAttribute('aria-describedby')).toBeTruthy();
+  });
+
+  it('should not show when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should hide on Escape key', () => {
+    button.dispatchEvent(new MouseEvent('mouseenter'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+
+    button.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+
+  it('should show on focus and hide on blur', () => {
+    button.dispatchEvent(new Event('focus'));
+    vi.advanceTimersByTime(0);
+    fixture.detectChanges();
+    expect(document.querySelector('[role="tooltip"]')).not.toBeNull();
+
+    button.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+});

package/src/lib/tooltip/tooltip.directive.ts

@@ -0,0 +1,130 @@
+import {
+  Directive,
+  ElementRef,
+  OnDestroy,
+  Renderer2,
+  computed,
+  inject,
+  input,
+  signal,
+  afterNextRender,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { tooltipVariants, type TooltipPosition } from './tooltip.variants';
+
+let tooltipIdCounter = 0;
+
+@Directive({
+  selector: '[snyTooltip]',
+  exportAs: 'snyTooltip',
+  host: {
+    '(mouseenter)': 'show()',
+    '(mouseleave)': 'hide()',
+    '(focus)': 'show()',
+    '(blur)': 'hide()',
+    '(keydown.escape)': 'hide()',
+    '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
+  },
+})
+export class SnyTooltipDirective implements OnDestroy {
+  readonly snyTooltip = input.required<string>();
+  readonly tooltipPosition = input<TooltipPosition>('top');
+  readonly tooltipDelay = input(300);
+  readonly tooltipDisabled = input(false);
+  readonly class = input<string>('');
+
+  readonly isOpen = signal(false);
+  readonly tooltipId = `sny-tooltip-${++tooltipIdCounter}`;
+
+  private readonly el = inject(ElementRef<HTMLElement>);
+  private readonly renderer = inject(Renderer2);
+  private showTimeout: ReturnType<typeof setTimeout> | null = null;
+  private tooltipEl: HTMLElement | null = null;
+
+  constructor() {
+    afterNextRender(() => {
+      // cleanup handled in ngOnDestroy
+    });
+  }
+
+  show(): void {
+    if (this.tooltipDisabled()) return;
+    this.showTimeout = setTimeout(() => {
+      this.createTooltip();
+      this.isOpen.set(true);
+    }, this.tooltipDelay());
+  }
+
+  hide(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout);
+      this.showTimeout = null;
+    }
+    this.destroyTooltip();
+    this.isOpen.set(false);
+  }
+
+  ngOnDestroy(): void {
+    this.hide();
+  }
+
+  private createTooltip(): void {
+    if (this.tooltipEl) return;
+
+    const tooltip = this.renderer.createElement('div') as HTMLElement;
+    tooltip.id = this.tooltipId;
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.className = cn(
+      tooltipVariants({ position: this.tooltipPosition() }),
+      'fixed pointer-events-none',
+      this.class()
+    );
+    tooltip.textContent = this.snyTooltip();
+
+    this.renderer.appendChild(document.body, tooltip);
+    this.tooltipEl = tooltip;
+
+    this.positionTooltip();
+  }
+
+  private positionTooltip(): void {
+    if (!this.tooltipEl) return;
+
+    const hostRect = this.el.nativeElement.getBoundingClientRect();
+    const tooltipRect = this.tooltipEl.getBoundingClientRect();
+    const position = this.tooltipPosition();
+    const gap = 8;
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case 'top':
+        top = hostRect.top - tooltipRect.height - gap;
+        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = hostRect.bottom + gap;
+        left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.left - tooltipRect.width - gap;
+        break;
+      case 'right':
+        top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+        left = hostRect.right + gap;
+        break;
+    }
+
+    this.tooltipEl.style.top = `${top}px`;
+    this.tooltipEl.style.left = `${left}px`;
+  }
+
+  private destroyTooltip(): void {
+    if (this.tooltipEl) {
+      this.tooltipEl.remove();
+      this.tooltipEl = null;
+    }
+  }
+}

package/src/lib/tooltip/tooltip.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const tooltipVariants = cva(
+  'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
+  {
+    variants: {
+      position: {
+        top: 'slide-in-from-bottom-2',
+        bottom: 'slide-in-from-top-2',
+        left: 'slide-in-from-right-2',
+        right: 'slide-in-from-left-2',
+      },
+    },
+    defaultVariants: {
+      position: 'top',
+    },
+  }
+);
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

package/src/lib/validator/index.ts

@@ -0,0 +1,5 @@
+export {
+  SnyValidatorDirective,
+  SnyValidatorHintDirective,
+  type ValidatorHintVariant,
+} from './validator.directives';

package/src/lib/validator/validator.directives.spec.ts

@@ -0,0 +1,47 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyValidatorDirective, SnyValidatorHintDirective } from './validator.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyValidatorDirective, SnyValidatorHintDirective],
+  template: `
+    <div snyValidator>
+      <div snyValidatorHint when="required" variant="error">Required</div>
+      <div snyValidatorHint when="minlength" variant="error">Too short</div>
+      <div snyValidatorHint variant="success">Looks good!</div>
+    </div>
+  `,
+})
+class TestHostComponent {}
+
+describe('SnyValidatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render validator container', () => {
+    const el = fixture.nativeElement.querySelector('[snyValidator]');
+    expect(el).toBeTruthy();
+  });
+
+  it('should render hints with alert role', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints.length).toBe(3);
+    hints.forEach((h: HTMLElement) => expect(h.getAttribute('role')).toBe('alert'));
+  });
+
+  it('should apply error variant to error hints', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints[0].className).toContain('text-destructive');
+  });
+
+  it('should apply success variant', () => {
+    const hints = fixture.nativeElement.querySelectorAll('[snyValidatorHint]');
+    expect(hints[2].className).toContain('text-green-600');
+  });
+});

package/src/lib/validator/validator.directives.ts

@@ -0,0 +1,50 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import type { AbstractControl } from '@angular/forms';
+
+export type ValidatorHintVariant = 'error' | 'success' | 'warning' | 'info';
+
+@Directive({
+  selector: '[snyValidator]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyValidatorDirective {
+  readonly control = input<AbstractControl | null>(null);
+  readonly state = input<'default' | 'error' | 'success' | 'warning'>('default');
+  readonly class = input<string>('');
+
+  readonly errors = computed(() => this.control()?.errors ?? null);
+  readonly showErrors = computed(() => {
+    const c = this.control();
+    return c ? c.touched && c.invalid : false;
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col gap-1 mt-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyValidatorHint]',
+  host: {
+    'role': 'alert',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyValidatorHintDirective {
+  readonly when = input<string>('');
+  readonly type = input<ValidatorHintVariant>('error');
+  /** @deprecated Use `type` instead */
+  readonly variant = input<ValidatorHintVariant | undefined>(undefined);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant() ?? this.type();
+    const variantClass =
+      v === 'success' ? 'text-green-600 dark:text-green-400' :
+      v === 'warning' ? 'text-amber-600 dark:text-amber-400' :
+      v === 'info' ? 'text-blue-600 dark:text-blue-400' :
+      'text-destructive';
+    return cn('text-xs', variantClass, this.class());
+  });
+}

package/src/styles/sonny-theme.css

@@ -17,6 +17,8 @@
   --color-destructive-foreground: var(--sny-destructive-foreground);
   --color-card: var(--sny-card);
   --color-card-foreground: var(--sny-card-foreground);
+  --color-popover: var(--sny-popover);
+  --color-popover-foreground: var(--sny-popover-foreground);
   --color-border: var(--sny-border);
   --color-input: var(--sny-input);
   --color-ring: var(--sny-ring);
@@ -38,6 +40,8 @@
   --sny-destructive-foreground: #fafafa;
   --sny-card: #ffffff;
   --sny-card-foreground: #0a0a0a;
+  --sny-popover: #ffffff;
+  --sny-popover-foreground: #0a0a0a;
   --sny-border: #e5e5e5;
   --sny-input: #e5e5e5;
   --sny-ring: #0a0a0a;
@@ -60,6 +64,8 @@
   --sny-destructive-foreground: #fafafa;
   --sny-card: #0a0a0a;
   --sny-card-foreground: #fafafa;
+  --sny-popover: #171717;
+  --sny-popover-foreground: #fafafa;
   --sny-border: #262626;
   --sny-input: #262626;
   --sny-ring: #d4d4d4;
@@ -80,12 +86,39 @@
   --sny-destructive-foreground: #ffffff;
   --sny-card: #ffffff;
   --sny-card-foreground: #0f172a;
+  --sny-popover: #ffffff;
+  --sny-popover-foreground: #0f172a;
   --sny-border: #cbd5e1;
   --sny-input: #cbd5e1;
   --sny-ring: #3b82f6;
   --sny-radius: 0.375rem;
 }
 
+/* ─── Custom scrollbar ─── */
+
+.sny-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sny-muted-foreground) transparent;
+}
+
+.sny-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.sny-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sny-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--sny-muted-foreground);
+  border-radius: 9999px;
+}
+
+.sny-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sny-foreground);
+}
+
 /* ─── Dialog / Sheet overlay ─── */
 
 .sny-dialog-backdrop {