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

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

@@ -0,0 +1,25 @@
+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]',
+  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,16 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { labelVariants, type InputVariant } from './input.variants';
+
+@Directive({
+  selector: 'label[snyLabel]',
+  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/kbd/index.ts

@@ -0,0 +1,2 @@
+export { SnyKbdDirective } from './kbd.directive';
+export { kbdVariants, type KbdSize } from './kbd.variants';

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

@@ -0,0 +1,42 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyKbdDirective } from './kbd.directive';
+import type { KbdSize } from './kbd.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyKbdDirective],
+  template: `<kbd snyKbd [size]="size()">Ctrl+K</kbd>`,
+})
+class TestHostComponent {
+  size = signal<KbdSize>('md');
+}
+
+describe('SnyKbdDirective', () => {
+  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('kbd');
+  });
+
+  it('should apply default size classes', () => {
+    expect(el.className).toContain('font-mono');
+    expect(el.className).toContain('h-6');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-7');
+  });
+});

package/src/lib/kbd/kbd.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { kbdVariants, type KbdSize } from './kbd.variants';
+
+@Directive({
+  selector: 'kbd[snyKbd]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyKbdDirective {
+  readonly size = input<KbdSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(kbdVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/kbd/kbd.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const kbdVariants = cva(
+  'pointer-events-none inline-flex select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono font-medium text-muted-foreground',
+  {
+    variants: {
+      size: {
+        sm: 'h-5 text-[10px]',
+        md: 'h-6 text-xs',
+        lg: 'h-7 text-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type KbdSize = 'sm' | 'md' | 'lg';

package/src/lib/link/index.ts

@@ -0,0 +1,2 @@
+export { SnyLinkDirective } from './link.directive';
+export { linkVariants, type LinkVariant } from './link.variants';

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

@@ -0,0 +1,41 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyLinkDirective } from './link.directive';
+import type { LinkVariant } from './link.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyLinkDirective],
+  template: `<a snyLink [variant]="variant()" href="#">Click me</a>`,
+})
+class TestHostComponent {
+  variant = signal<LinkVariant>('default');
+}
+
+describe('SnyLinkDirective', () => {
+  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('a');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('underline');
+  });
+
+  it('should apply primary variant', () => {
+    fixture.componentInstance.variant.set('primary');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-primary');
+  });
+
+  it('should apply hover variant', () => {
+    fixture.componentInstance.variant.set('hover');
+    fixture.detectChanges();
+    expect(el.className).toContain('no-underline');
+  });
+});

package/src/lib/link/link.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { linkVariants, type LinkVariant } from './link.variants';
+
+@Directive({
+  selector: 'a[snyLink]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyLinkDirective {
+  readonly variant = input<LinkVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(linkVariants({ variant: this.variant() }), this.class())
+  );
+}

package/src/lib/link/link.variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+export const linkVariants = cva(
+  'inline-flex items-center gap-1 underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded',
+  {
+    variants: {
+      variant: {
+        default: 'text-foreground underline hover:text-foreground/80',
+        primary: 'text-primary underline hover:text-primary/80',
+        secondary: 'text-muted-foreground underline hover:text-foreground',
+        hover: 'text-foreground no-underline hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type LinkVariant = 'default' | 'primary' | 'secondary' | 'hover';

package/src/lib/list/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyListDirective,
+  SnyListItemDirective,
+  SnyListItemIconDirective,
+  SnyListItemContentDirective,
+  SnyListItemActionDirective,
+  type ListVariant,
+} from './list.directives';

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

@@ -0,0 +1,65 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyListDirective, SnyListItemDirective, SnyListItemContentDirective, type ListVariant } from './list.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyListDirective, SnyListItemDirective, SnyListItemContentDirective],
+  template: `
+    <div snyList [variant]="variant()">
+      <div snyListItem [active]="active()" [disabled]="disabled()">
+        <div snyListItemContent>Item 1</div>
+      </div>
+      <div snyListItem>
+        <div snyListItemContent>Item 2</div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<ListVariant>('default');
+  active = signal(false);
+  disabled = signal(false);
+}
+
+describe('SnyListDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with list role', () => {
+    const list = fixture.nativeElement.querySelector('[snyList]');
+    expect(list.getAttribute('role')).toBe('list');
+  });
+
+  it('should render items with listitem role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyListItem]');
+    expect(items.length).toBe(2);
+    expect(items[0].getAttribute('role')).toBe('listitem');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    const list = fixture.nativeElement.querySelector('[snyList]');
+    expect(list.className).toContain('border');
+  });
+
+  it('should apply active state', () => {
+    fixture.componentInstance.active.set(true);
+    fixture.detectChanges();
+    const item = fixture.nativeElement.querySelector('[snyListItem]');
+    expect(item.className).toContain('bg-accent');
+  });
+
+  it('should set aria-disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    const item = fixture.nativeElement.querySelector('[snyListItem]');
+    expect(item.getAttribute('aria-disabled')).toBe('true');
+  });
+});

package/src/lib/list/list.directives.ts

@@ -0,0 +1,81 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type ListVariant = 'default' | 'bordered' | 'hover';
+
+@Directive({
+  selector: '[snyList]',
+  host: {
+    'role': 'list',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyListDirective {
+  readonly variant = input<ListVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'bordered' ? 'divide-y divide-border border rounded-md' :
+      v === 'hover' ? '[&>[snyListItem]]:hover:bg-accent' :
+      '';
+    return cn('flex flex-col', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyListItem]',
+  host: {
+    'role': 'listitem',
+    '[class]': 'computedClass()',
+    '[attr.aria-disabled]': 'disabled() || null',
+  },
+})
+export class SnyListItemDirective {
+  readonly active = input(false);
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex items-center gap-3 px-3 py-2 transition-colors',
+      this.active() && 'bg-accent text-accent-foreground',
+      this.disabled() && 'opacity-50 pointer-events-none',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyListItemIcon]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemIconDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0 text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyListItemContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 min-w-0', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyListItemAction]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyListItemActionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0', 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 { ChangeDetectionStrategy, 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',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  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;
+  }
+}

package/src/lib/modal/dialog.directives.ts

@@ -0,0 +1,84 @@
+import { Directive, computed, input, inject } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { cn } from '../core/utils/cn';
+
+@Directive({
+  selector: '[snyDialogHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-1.5 text-center sm:text-left', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogTitle]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogTitleDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-lg font-semibold leading-none tracking-tight', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogDescription]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogDescriptionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative bg-background rounded-sm border border-border shadow-lg p-6 w-full max-w-lg mx-auto',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyDialogFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyDialogFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyDialogClose]',
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick()',
+  },
+})
+export class SnyDialogCloseDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',
+      this.class()
+    )
+  );
+
+  private readonly dialogRef = inject(DialogRef, { optional: true });
+
+  onClick(): void {
+    this.dialogRef?.close();
+  }
+}