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

package/src/lib/dock/dock.directives.ts

@@ -0,0 +1,81 @@
+import { Directive, ElementRef, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type DockPosition = 'bottom' | 'top';
+
+@Directive({
+  selector: '[snyDock]',
+  host: {
+    'role': 'toolbar',
+    'aria-label': 'Dock',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyDockDirective {
+  readonly position = input<DockPosition>('bottom');
+  readonly class = input<string>('');
+
+  private readonly elRef = inject(ElementRef);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2 shadow-lg',
+      this.position() === 'bottom' ? 'bottom-4' : 'top-4',
+      this.class()
+    )
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    const items = Array.from(
+      (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('[snyDockItem]')
+    );
+    if (items.length === 0) return;
+
+    const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number | null = null;
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % items.length;
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + items.length) % items.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = items.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      items[nextIndex].focus();
+    }
+  }
+}
+
+@Directive({
+  selector: '[snyDockItem]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.tabindex]': 'active() ? 0 : -1',
+  },
+})
+export class SnyDockItemDirective {
+  readonly active = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full p-2 transition-all hover:scale-110',
+      this.active() && 'bg-primary text-primary-foreground',
+      this.class()
+    )
+  );
+}

package/src/lib/dock/index.ts

@@ -0,0 +1 @@
+export { SnyDockDirective, SnyDockItemDirective, type DockPosition } from './dock.directives';

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

@@ -0,0 +1,62 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyDrawerLayoutDirective, SnyDrawerContentDirective, SnyDrawerSideDirective } from './drawer.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyDrawerLayoutDirective, SnyDrawerContentDirective, SnyDrawerSideDirective],
+  template: `
+    <div snyDrawerLayout #drawer="snyDrawerLayout">
+      <div snyDrawerSide>Sidebar</div>
+      <div snyDrawerContent>Main</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  drawer = viewChild(SnyDrawerLayoutDirective);
+}
+
+describe('SnyDrawerLayoutDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should be closed by default', () => {
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('-translate-x-full');
+  });
+
+  it('should open on toggle', () => {
+    fixture.componentInstance.drawer()!.toggle();
+    fixture.detectChanges();
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('translate-x-0');
+  });
+
+  it('should close after open', () => {
+    const d = fixture.componentInstance.drawer()!;
+    d.open();
+    fixture.detectChanges();
+    d.close();
+    fixture.detectChanges();
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.className).toContain('-translate-x-full');
+  });
+
+  it('should have navigation role on drawer side', () => {
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.getAttribute('role')).toBe('navigation');
+  });
+
+  it('should set aria-modal on side when overlay and open', () => {
+    const side = fixture.nativeElement.querySelector('[snyDrawerSide]');
+    expect(side.getAttribute('aria-modal')).toBeNull();
+    fixture.componentInstance.drawer()!.open();
+    fixture.detectChanges();
+    expect(side.getAttribute('aria-modal')).toBe('true');
+  });
+});

package/src/lib/drawer/drawer.directives.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, Directive, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_DRAWER = new InjectionToken<SnyDrawerLayoutComponent>('SnyDrawer');
+
+@Component({
+  selector: '[snyDrawerLayout]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'snyDrawerLayout',
+  providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }],
+  host: {
+    '[class]': 'computedClass()',
+  },
+  template: `
+    <ng-content />
+    @if (isOpen() && overlay()) {
+      <div
+        class="fixed inset-0 z-30 bg-black/50 transition-opacity"
+        (click)="close()"
+      ></div>
+    }
+  `,
+})
+export class SnyDrawerLayoutComponent {
+  readonly class = input<string>('');
+  readonly overlay = input(true);
+  readonly isOpen = signal(false);
+
+  protected readonly computedClass = computed(() =>
+    cn('relative flex h-full w-full overflow-hidden', this.class())
+  );
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+}
+
+/** @deprecated Use SnyDrawerLayoutComponent instead */
+export const SnyDrawerLayoutDirective = SnyDrawerLayoutComponent;
+
+@Directive({
+  selector: '[snyDrawerContent]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyDrawerContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-1 overflow-auto', this.class())
+  );
+}
+
+export type DrawerSide = 'left' | 'right';
+
+@Directive({
+  selector: '[snyDrawerSide]',
+  host: {
+    'role': 'navigation',
+    'aria-label': 'Sidebar navigation',
+    '[attr.aria-modal]': 'drawer.overlay() && drawer.isOpen() || null',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyDrawerSideDirective {
+  protected readonly drawer = inject(SNY_DRAWER);
+  readonly side = input<DrawerSide>('left');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const isOpen = this.drawer.isOpen();
+    const s = this.side();
+    const base = 'fixed inset-y-0 z-50 w-64 bg-background border-r border-border transition-transform duration-300 ease-in-out overflow-y-auto';
+    const sideClass = s === 'left' ? 'left-0' : 'right-0 border-l border-r-0';
+    const transformClass = isOpen
+      ? 'translate-x-0'
+      : s === 'left' ? '-translate-x-full' : 'translate-x-full';
+    return cn(base, sideClass, transformClass, this.class());
+  });
+}

package/src/lib/drawer/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyDrawerLayoutComponent,
+  SnyDrawerLayoutDirective,
+  SnyDrawerContentDirective,
+  SnyDrawerSideDirective,
+  SNY_DRAWER,
+  type DrawerSide,
+} from './drawer.directives';

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

@@ -0,0 +1,106 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyMenuContentDirective,
+  SnyMenuItemDirective,
+  SnyMenuSeparatorDirective,
+  SnyMenuLabelDirective,
+} from './dropdown.directives';
+import type { DropdownItemVariant } from './dropdown.variants';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyMenuContentDirective,
+    SnyMenuItemDirective,
+    SnyMenuSeparatorDirective,
+    SnyMenuLabelDirective,
+  ],
+  template: `
+    <div snyMenuContent>
+      <div snyMenuLabel>Actions</div>
+      <div snyMenuItem [variant]="variant()">Edit</div>
+      <div snyMenuSeparator></div>
+      <div snyMenuItem variant="destructive">Delete</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<DropdownItemVariant>('default');
+}
+
+describe('SnyMenuContentDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply content classes', () => {
+    const content = fixture.nativeElement.querySelector('[snyMenuContent]');
+    expect(content.className).toContain('rounded-md');
+    expect(content.className).toContain('bg-popover');
+  });
+});
+
+describe('SnyMenuItemDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply default item classes', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyMenuItem]');
+    expect(items[0].className).toContain('text-sm');
+    expect(items[0].className).toContain('rounded-sm');
+  });
+
+  it('should apply destructive variant', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyMenuItem]');
+    expect(items[1].className).toContain('text-destructive');
+  });
+});
+
+describe('SnyMenuSeparatorDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply separator classes and role', () => {
+    const separator = fixture.nativeElement.querySelector('[snyMenuSeparator]');
+    expect(separator.getAttribute('role')).toBe('separator');
+    expect(separator.className).toContain('bg-muted');
+  });
+});
+
+describe('SnyMenuLabelDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply label classes', () => {
+    const label = fixture.nativeElement.querySelector('[snyMenuLabel]');
+    expect(label.className).toContain('font-semibold');
+  });
+});

package/src/lib/dropdown/dropdown.directives.ts

@@ -0,0 +1,136 @@
+import { Directive, ElementRef, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import {
+  dropdownContentVariants,
+  dropdownItemVariants,
+  type DropdownItemVariant,
+} from './dropdown.variants';
+
+export const SNY_DROPDOWN = new InjectionToken<SnyDropdownDirective>('SnyDropdown');
+
+@Directive({
+  selector: '[snyDropdown]',
+  exportAs: 'snyDropdown',
+  providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
+  host: {
+    '[class]': '"relative inline-block"',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
+})
+export class SnyDropdownDirective {
+  private readonly elementRef = inject(ElementRef);
+  readonly isOpen = signal(false);
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  onEscape(): void {
+    this.close();
+  }
+}
+
+@Directive({
+  selector: '[snyDropdownTrigger]',
+  host: {
+    '(click)': 'dropdown.toggle()',
+    '[attr.aria-expanded]': 'dropdown.isOpen()',
+    '[attr.aria-haspopup]': '"menu"',
+  },
+})
+export class SnyDropdownTriggerDirective {
+  readonly dropdown = inject(SNY_DROPDOWN);
+}
+
+@Directive({
+  selector: '[snyDropdownContent]',
+  host: {
+    'role': 'menu',
+    '[class]': 'computedClass()',
+    '[style.display]': 'dropdown.isOpen() ? "" : "none"',
+  },
+})
+export class SnyDropdownContentDirective {
+  readonly dropdown = inject(SNY_DROPDOWN);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      dropdownContentVariants(),
+      'absolute mt-1 left-0 animate-in fade-in-0 zoom-in-95',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyMenuContent]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuContentDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(dropdownContentVariants(), this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyMenuItem]',
+  host: {
+    'role': 'menuitem',
+    '[class]': 'computedClass()',
+    '(click)': 'onClick()',
+  },
+})
+export class SnyMenuItemDirective {
+  private readonly dropdown = inject(SNY_DROPDOWN, { optional: true });
+  readonly variant = input<DropdownItemVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(dropdownItemVariants({ variant: this.variant() }), 'cursor-pointer hover:bg-accent hover:text-accent-foreground', this.class())
+  );
+
+  onClick(): void {
+    this.dropdown?.close();
+  }
+}
+
+@Directive({
+  selector: '[snyMenuSeparator]',
+  host: {
+    'role': 'separator',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuSeparatorDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('-mx-1 my-1 h-px bg-muted', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyMenuLabel]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyMenuLabelDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('px-2 py-1.5 text-sm font-semibold', this.class())
+  );
+}

package/src/lib/dropdown/dropdown.variants.ts

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+
+export const dropdownContentVariants = cva(
+  'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+  {
+    variants: {},
+    defaultVariants: {},
+  }
+);
+
+export const dropdownItemVariants = cva(
+  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[active]:bg-accent data-[active]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: '',
+        destructive:
+          'text-destructive data-[active]:bg-destructive/10 data-[active]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type DropdownItemVariant = 'default' | 'destructive';

package/src/lib/dropdown/index.ts

@@ -0,0 +1,15 @@
+export {
+  SnyDropdownDirective,
+  SnyDropdownTriggerDirective,
+  SnyDropdownContentDirective,
+  SnyMenuContentDirective,
+  SnyMenuItemDirective,
+  SnyMenuSeparatorDirective,
+  SnyMenuLabelDirective,
+  SNY_DROPDOWN,
+} from './dropdown.directives';
+export {
+  dropdownContentVariants,
+  dropdownItemVariants,
+  type DropdownItemVariant,
+} from './dropdown.variants';

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

@@ -0,0 +1,60 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyFabDirective, SnyFabTriggerDirective, SnyFabActionDirective } from './fab.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyFabDirective, SnyFabTriggerDirective, SnyFabActionDirective],
+  template: `
+    <div snyFab>
+      <button snyFabAction ariaLabel="Edit item">Action 1</button>
+      <button snyFabAction>Action 2</button>
+      <button snyFabTrigger>+</button>
+    </div>
+  `,
+})
+class TestHostComponent {
+  fab = viewChild(SnyFabDirective);
+}
+
+describe('SnyFabDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should be closed by default', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.className).toContain('scale-0'));
+  });
+
+  it('should open on trigger click', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyFabTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.className).toContain('scale-100'));
+  });
+
+  it('should have aria-expanded on trigger', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyFabTrigger]');
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have menuitem role on actions', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    actions.forEach((a: HTMLElement) => expect(a.getAttribute('role')).toBe('menuitem'));
+  });
+
+  it('should set aria-label on action when ariaLabel input is provided', () => {
+    const actions = fixture.nativeElement.querySelectorAll('[snyFabAction]');
+    expect(actions[0].getAttribute('aria-label')).toBe('Edit item');
+    expect(actions[1].getAttribute('aria-label')).toBeNull();
+  });
+});

package/src/lib/fab/fab.directives.ts

@@ -0,0 +1,77 @@
+import { Directive, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_FAB = new InjectionToken<SnyFabDirective>('SnyFab');
+export type FabPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export type FabDirection = 'up' | 'down' | 'left' | 'right';
+
+const positionMap: Record<FabPosition, string> = {
+  'bottom-right': 'fixed bottom-6 right-6',
+  'bottom-left': 'fixed bottom-6 left-6',
+  'top-right': 'fixed top-6 right-6',
+  'top-left': 'fixed top-6 left-6',
+};
+
+@Directive({
+  selector: '[snyFab]',
+  exportAs: 'snyFab',
+  providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyFabDirective {
+  readonly position = input<FabPosition>('bottom-right');
+  readonly direction = input<FabDirection>('up');
+  readonly class = input<string>('');
+  readonly isOpen = signal(false);
+
+  toggle(): void { this.isOpen.update((v) => !v); }
+  open(): void { this.isOpen.set(true); }
+  close(): void { this.isOpen.set(false); }
+
+  protected readonly computedClass = computed(() =>
+    cn('z-50 flex flex-col items-center gap-2', positionMap[this.position()], this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyFabTrigger]',
+  host: {
+    '(click)': 'fab.toggle()',
+    '[attr.aria-expanded]': 'fab.isOpen()',
+    '[attr.aria-haspopup]': '"menu"',
+    'aria-label': 'Quick actions',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFabTriggerDirective {
+  readonly fab = inject(SNY_FAB);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg h-14 w-14 hover:bg-primary/90 transition-transform',
+      this.fab.isOpen() && 'rotate-45',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyFabAction]',
+  host: {
+    'role': 'menuitem',
+    '[attr.aria-label]': 'ariaLabel() || null',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyFabActionDirective {
+  readonly fab = inject(SNY_FAB);
+  readonly ariaLabel = input<string>('');
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-secondary text-secondary-foreground shadow-md h-10 w-10 transition-all',
+      this.fab.isOpen() ? 'scale-100 opacity-100' : 'scale-0 opacity-0',
+      this.class()
+    )
+  );
+}

package/src/lib/fab/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyFabDirective,
+  SnyFabTriggerDirective,
+  SnyFabActionDirective,
+  SNY_FAB,
+  type FabPosition,
+  type FabDirection,
+} from './fab.directives';