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

package/src/lib/combobox/combobox.component.ts

@@ -0,0 +1,236 @@
+import {
+  Component,
+  computed,
+  ElementRef,
+  HostListener,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { comboboxTriggerVariants, type ComboboxSize } from './combobox.variants';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+@Component({
+  selector: 'sny-combobox',
+  standalone: true,
+  host: {
+    class: 'relative inline-block w-full',
+  },
+  template: `
+    <!-- Trigger button -->
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="listbox"
+      [class]="triggerClass()"
+      (click)="toggle()"
+    >
+      <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <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" class="shrink-0 opacity-50"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+    </button>
+
+    <!-- Dropdown popover -->
+    @if (open()) {
+      <div
+        #dropdownEl
+        class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
+      >
+        <!-- Search input -->
+        <div class="flex items-center border-b border-border px-3">
+          <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" class="mr-2 shrink-0 opacity-50"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input
+            #searchEl
+            type="text"
+            class="flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+            [placeholder]="searchPlaceholder()"
+            [value]="query()"
+            (input)="onSearchInput($event)"
+            (keydown)="onKeydown($event)"
+          />
+        </div>
+
+        <!-- Options list -->
+        @if (filtered().length > 0) {
+          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+            @for (opt of filtered(); track opt.value; let i = $index) {
+              <li
+                role="option"
+                [id]="'sny-cb-opt-' + opt.value"
+                [attr.aria-selected]="value() === opt.value"
+                [class]="optionClass(i)"
+                (mousedown)="select(opt); $event.preventDefault()"
+                (mouseenter)="activeIndex.set(i)"
+              >
+                <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"
+                  [class]="value() === opt.value ? 'mr-2 shrink-0 opacity-100' : 'mr-2 shrink-0 opacity-0'"
+                ><path d="M20 6 9 17l-5-5"/></svg>
+                {{ opt.label }}
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="py-6 text-center text-sm text-muted-foreground">No results found.</div>
+        }
+      </div>
+    }
+  `,
+})
+export class SnyComboboxComponent implements OnDestroy {
+  readonly options = input<ComboboxOption[]>([]);
+  readonly placeholder = input('Select...');
+  readonly searchPlaceholder = input('Search...');
+  readonly size = input<ComboboxSize>('md');
+  readonly class = input<string>('');
+  readonly value = model<string>('');
+
+  readonly open = signal(false);
+  readonly query = signal('');
+  readonly activeIndex = signal(0);
+
+  private readonly triggerRef = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+  private readonly searchRef = viewChild<ElementRef<HTMLInputElement>>('searchEl');
+  private readonly dropdownRef = viewChild<ElementRef<HTMLDivElement>>('dropdownEl');
+  private readonly elRef = inject(ElementRef);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  readonly selectedLabel = computed(() => {
+    const v = this.value();
+    if (!v) return '';
+    const opt = this.options().find(o => o.value === v);
+    return opt?.label ?? '';
+  });
+
+  readonly filtered = computed(() => {
+    const q = this.query().toLowerCase();
+    if (!q) return this.options();
+    return this.options().filter(o => o.label.toLowerCase().includes(q));
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(comboboxTriggerVariants({ size: this.size() }), this.class())
+  );
+
+  optionClass(index: number): string {
+    const base = 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors';
+    const active = index === this.activeIndex() ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/50';
+    return cn(base, active);
+  }
+
+  private updateDropdownPosition(): void {
+    const trigger = this.triggerRef()?.nativeElement;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const dropdown = this.dropdownRef()?.nativeElement;
+    if (dropdown) {
+      dropdown.style.top = `${rect.bottom + 4}px`;
+      dropdown.style.left = `${rect.left}px`;
+      dropdown.style.width = `${rect.width}px`;
+    }
+  }
+
+  private addGlobalListeners(): void {
+    this.removeGlobalListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeGlobalListeners(): void {
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler, { capture: true } as EventListenerOptions);
+      this.scrollHandler = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeGlobalListeners();
+  }
+
+  toggle(): void {
+    if (this.open()) {
+      this.close();
+    } else {
+      this.updateDropdownPosition();
+      this.open.set(true);
+      this.query.set('');
+      this.activeIndex.set(0);
+      this.addGlobalListeners();
+      setTimeout(() => {
+        this.updateDropdownPosition();
+        this.searchRef()?.nativeElement.focus();
+      });
+    }
+  }
+
+  close(): void {
+    this.open.set(false);
+    this.query.set('');
+    this.removeGlobalListeners();
+  }
+
+  onSearchInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    this.query.set(val);
+    this.activeIndex.set(0);
+  }
+
+  select(opt: ComboboxOption): void {
+    this.value.set(opt.value);
+    this.close();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const items = this.filtered();
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.activeIndex.update(i => Math.min(i + 1, items.length - 1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.activeIndex.update(i => Math.max(i - 1, 0));
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (items[this.activeIndex()]) {
+          this.select(items[this.activeIndex()]);
+        }
+        break;
+      case 'Escape':
+        this.close();
+        break;
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+}

package/src/lib/combobox/combobox.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const comboboxTriggerVariants = cva(
+  'inline-flex w-full items-center justify-between whitespace-nowrap rounded-sm border border-border bg-background px-3 py-2 text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-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',
+  {
+    variants: {
+      size: {
+        sm: 'h-9 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type ComboboxSize = 'sm' | 'md' | 'lg';

package/src/lib/combobox/index.ts

@@ -0,0 +1,2 @@
+export { SnyComboboxComponent, type ComboboxOption } from './combobox.component';
+export { comboboxTriggerVariants, type ComboboxSize } from './combobox.variants';

package/src/lib/input/index.ts

@@ -0,0 +1,3 @@
+export { SnyInputDirective } from './input.directive';
+export { SnyLabelDirective } from './label.directive';
+export { inputVariants, labelVariants, type InputVariant, type InputSize } from './input.variants';

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

@@ -0,0 +1,103 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyInputDirective } from './input.directive';
+import { SnyLabelDirective } from './label.directive';
+import type { InputVariant, InputSize } from './input.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyInputDirective, SnyLabelDirective],
+  template: `
+    <label snyLabel [variant]="variant()">Name</label>
+    <input snyInput [variant]="variant()" [inputSize]="inputSize()" [ariaDescribedBy]="describedBy()" />
+  `,
+})
+class TestHostComponent {
+  variant = signal<InputVariant>('default');
+  inputSize = signal<InputSize>('md');
+  describedBy = signal('');
+}
+
+describe('SnyInputDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let input: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    input = fixture.nativeElement.querySelector('input');
+  });
+
+  it('should apply default input classes', () => {
+    expect(input.className).toContain('border-input');
+    expect(input.className).toContain('h-10');
+  });
+
+  it('should apply error variant', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-destructive');
+  });
+
+  it('should set aria-invalid on error', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('should not set aria-invalid on default', () => {
+    expect(input.getAttribute('aria-invalid')).toBeNull();
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(input.className).toContain('border-green-500');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.inputSize.set('sm');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-9');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.inputSize.set('lg');
+    fixture.detectChanges();
+    expect(input.className).toContain('h-11');
+  });
+
+  it('should set aria-describedby', () => {
+    fixture.componentInstance.describedBy.set('help-text');
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-describedby')).toBe('help-text');
+  });
+});
+
+describe('SnyLabelDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let label: HTMLLabelElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    label = fixture.nativeElement.querySelector('label');
+  });
+
+  it('should apply label classes', () => {
+    expect(label.className).toContain('text-sm');
+    expect(label.className).toContain('font-medium');
+  });
+
+  it('should apply error variant to label', () => {
+    fixture.componentInstance.variant.set('error');
+    fixture.detectChanges();
+    expect(label.className).toContain('text-destructive');
+  });
+});

package/src/lib/input/input.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { inputVariants, type InputVariant, type InputSize } from './input.variants';
+
+@Directive({
+  selector: 'input[snyInput], textarea[snyInput]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-invalid]': 'variant() === "error" || null',
+    '[attr.aria-describedby]': 'ariaDescribedBy() || null',
+  },
+})
+export class SnyInputDirective {
+  readonly variant = input<InputVariant>('default');
+  readonly inputSize = input<InputSize>('md');
+  readonly class = input<string>('');
+  readonly ariaDescribedBy = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      inputVariants({ variant: this.variant(), inputSize: this.inputSize() }),
+      this.class()
+    )
+  );
+}

package/src/lib/input/input.variants.ts

@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  'flex w-full rounded-sm border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-input',
+        error: 'border-destructive focus-visible:ring-destructive',
+        success: 'border-green-500 focus-visible:ring-green-500',
+      },
+      inputSize: {
+        sm: 'h-9 text-xs',
+        md: 'h-10',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'md',
+    },
+  }
+);
+
+export const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  {
+    variants: {
+      variant: {
+        default: '',
+        error: 'text-destructive',
+        success: 'text-green-600',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type InputVariant = 'default' | 'error' | 'success';
+export type InputSize = 'sm' | 'md' | 'lg';

package/src/lib/input/label.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { labelVariants, type InputVariant } from './input.variants';
+
+@Directive({
+  selector: 'label[snyLabel]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyLabelDirective {
+  readonly variant = input<InputVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(labelVariants({ variant: this.variant() }), this.class())
+  );
+}

package/src/lib/loader/index.ts

@@ -0,0 +1,2 @@
+export { SnyLoaderComponent } from './loader.component';
+export { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.variants';

package/src/lib/loader/loader.component.spec.ts

@@ -0,0 +1,58 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyLoaderComponent } from './loader.component';
+import type { LoaderVariant, LoaderSize } from './loader.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyLoaderComponent],
+  template: `<sny-loader [variant]="variant()" [size]="size()" />`,
+})
+class TestHostComponent {
+  variant = signal<LoaderVariant>('spinner');
+  size = signal<LoaderSize>('md');
+}
+
+describe('SnyLoaderComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('sny-loader');
+  });
+
+  it('should have status role', () => {
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('should render spinner by default', () => {
+    expect(el.querySelector('svg')).toBeTruthy();
+    expect(el.className).toContain('h-6');
+  });
+
+  it('should render dots variant', () => {
+    fixture.componentInstance.variant.set('dots');
+    fixture.detectChanges();
+    const dots = el.querySelectorAll('.rounded-full');
+    expect(dots.length).toBe(3);
+  });
+
+  it('should render bars variant', () => {
+    fixture.componentInstance.variant.set('bars');
+    fixture.detectChanges();
+    const bars = el.querySelectorAll('.rounded-sm');
+    expect(bars.length).toBe(4);
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-8');
+  });
+});

package/src/lib/loader/loader.component.ts

@@ -0,0 +1,47 @@
+import { Component, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.variants';
+
+@Component({
+  selector: 'sny-loader',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'status',
+    '[attr.aria-label]': '"Loading"',
+  },
+  template: `
+    @switch (variant()) {
+      @case ('spinner') {
+        <svg class="animate-spin h-full w-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      }
+      @case ('dots') {
+        <span class="flex items-center gap-1">
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]"></span>
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]"></span>
+          <span class="h-1.5 w-1.5 rounded-full bg-current animate-bounce"></span>
+        </span>
+      }
+      @case ('bars') {
+        <span class="flex items-end gap-0.5 h-full">
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.3s]" style="height:60%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.15s]" style="height:100%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm" style="height:40%"></span>
+          <span class="w-1 bg-current animate-pulse rounded-sm [animation-delay:-0.2s]" style="height:80%"></span>
+        </span>
+      }
+    }
+  `,
+})
+export class SnyLoaderComponent {
+  readonly variant = input<LoaderVariant>('spinner');
+  readonly size = input<LoaderSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(loaderVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/loader/loader.variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const loaderVariants = cva(
+  'inline-flex items-center justify-center text-current',
+  {
+    variants: {
+      size: {
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LoaderVariant = 'spinner' | 'dots' | 'bars';

package/src/lib/modal/dialog-ref.ts

@@ -0,0 +1,19 @@
+import type { Observable } from 'rxjs';
+
+/** Structural interface for the subset of CDK DialogRef we consume. */
+interface CdkDialogRefLike<R> {
+  close(result?: R): void;
+  readonly closed: Observable<R | undefined>;
+}
+
+export class SnyDialogRef<R = unknown> {
+  constructor(private readonly cdkRef: CdkDialogRefLike<R>) {}
+
+  close(result?: R): void {
+    this.cdkRef.close(result);
+  }
+
+  get closed(): Observable<R | undefined> {
+    return this.cdkRef.closed;
+  }
+}