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

package/src/lib/card/card.directives.ts

@@ -0,0 +1,72 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { cardVariants, type CardVariant, type CardPadding } from './card.variants';
+
+@Directive({
+  selector: '[snyCard]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardDirective {
+  readonly variant = input<CardVariant>('default');
+  readonly padding = input<CardPadding>('none');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(cardVariants({ variant: this.variant(), padding: this.padding() }), this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCardHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-1.5 p-6', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCardTitle]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardTitleDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-2xl font-semibold leading-none tracking-tight', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCardDescription]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardDescriptionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCardContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('p-6 pt-0', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCardFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCardFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex items-center p-6 pt-0', this.class())
+  );
+}

package/src/lib/card/card.variants.ts

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+export const cardVariants = cva(
+  'rounded-sm text-card-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card border border-border',
+        outline: 'border-2 border-border bg-transparent',
+        elevated: 'bg-card shadow-lg',
+        ghost: 'bg-transparent',
+      },
+      padding: {
+        none: '',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      padding: 'none',
+    },
+  }
+);
+
+export type CardVariant = 'default' | 'outline' | 'elevated' | 'ghost';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';

package/src/lib/card/index.ts

@@ -0,0 +1,9 @@
+export {
+  SnyCardDirective,
+  SnyCardHeaderDirective,
+  SnyCardTitleDirective,
+  SnyCardDescriptionDirective,
+  SnyCardContentDirective,
+  SnyCardFooterDirective,
+} from './card.directives';
+export { cardVariants, type CardVariant, type CardPadding } from './card.variants';

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

@@ -0,0 +1,85 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyCarouselDirective, SnyCarouselContentDirective, SnyCarouselItemDirective } from './carousel.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyCarouselDirective, SnyCarouselContentDirective, SnyCarouselItemDirective],
+  template: `
+    <div snyCarousel [loop]="true">
+      <div snyCarouselContent>
+        <div snyCarouselItem>Slide 1</div>
+        <div snyCarouselItem>Slide 2</div>
+        <div snyCarouselItem>Slide 3</div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  carousel = viewChild(SnyCarouselDirective);
+}
+
+describe('SnyCarouselDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  });
+
+  it('should render with region role', () => {
+    const el = fixture.nativeElement.querySelector('[snyCarousel]');
+    expect(el.getAttribute('role')).toBe('region');
+    expect(el.getAttribute('aria-roledescription')).toBe('carousel');
+  });
+
+  it('should render slides with group role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyCarouselItem]');
+    expect(items.length).toBe(3);
+    expect(items[0].getAttribute('role')).toBe('group');
+  });
+
+  it('should detect items via contentChildren', () => {
+    const c = fixture.componentInstance.carousel()!;
+    expect(c.totalItems()).toBe(3);
+  });
+
+  it('should navigate to next', () => {
+    const c = fixture.componentInstance.carousel()!;
+    expect(c.currentIndex()).toBe(0);
+    c.next();
+    expect(c.currentIndex()).toBe(1);
+  });
+
+  it('should loop around', () => {
+    const c = fixture.componentInstance.carousel()!;
+    c.goTo(2);
+    c.next();
+    expect(c.currentIndex()).toBe(0);
+  });
+
+  it('should navigate prev with loop', () => {
+    const c = fixture.componentInstance.carousel()!;
+    c.prev();
+    expect(c.currentIndex()).toBe(2);
+  });
+
+  it('should navigate next on ArrowRight keydown', () => {
+    const c = fixture.componentInstance.carousel()!;
+    const host = fixture.nativeElement.querySelector('[snyCarousel]');
+    expect(c.currentIndex()).toBe(0);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    expect(c.currentIndex()).toBe(1);
+  });
+
+  it('should navigate prev on ArrowLeft keydown', () => {
+    const c = fixture.componentInstance.carousel()!;
+    const host = fixture.nativeElement.querySelector('[snyCarousel]');
+    c.goTo(1);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+    expect(c.currentIndex()).toBe(0);
+  });
+});

package/src/lib/carousel/carousel.directives.ts

@@ -0,0 +1,159 @@
+import {
+  Directive, InjectionToken, computed, contentChildren, inject, input, signal, effect, OnDestroy,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_CAROUSEL = new InjectionToken<SnyCarouselDirective>('SnyCarousel');
+
+@Directive({
+  selector: '[snyCarouselItem]',
+  host: {
+    'role': 'group',
+    '[attr.aria-roledescription]': '"slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselItemDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('min-w-0 shrink-0 grow-0 basis-full pl-4', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselContent]',
+  host: {
+    '[class]': 'computedClass()',
+    '[style.transform]': 'transformStyle()',
+  },
+})
+export class SnyCarouselContentDirective {
+  private readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex -ml-4 transition-transform duration-300 ease-in-out', this.class())
+  );
+
+  protected readonly transformStyle = computed(() =>
+    `translateX(-${this.carousel.currentIndex() * 100}%)`
+  );
+}
+
+@Directive({
+  selector: '[snyCarousel]',
+  exportAs: 'snyCarousel',
+  providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }],
+  host: {
+    'role': 'region',
+    '[attr.aria-roledescription]': '"carousel"',
+    'aria-label': 'Carousel',
+    'tabindex': '0',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class SnyCarouselDirective implements OnDestroy {
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+  readonly loop = input(false);
+  readonly autoplay = input(0);
+  readonly class = input<string>('');
+
+  readonly items = contentChildren(SnyCarouselItemDirective, { descendants: true });
+  readonly currentIndex = signal(0);
+  readonly totalItems = computed(() => this.items().length);
+
+  private autoplayInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    effect(() => {
+      const ms = this.autoplay();
+      this.clearAutoplay();
+      if (ms > 0) {
+        this.autoplayInterval = setInterval(() => this.next(), ms);
+      }
+    });
+  }
+
+  next(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i >= total - 1) return this.loop() ? 0 : i;
+      return i + 1;
+    });
+  }
+
+  prev(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i <= 0) return this.loop() ? total - 1 : i;
+      return i - 1;
+    });
+  }
+
+  goTo(index: number): void {
+    this.currentIndex.set(Math.max(0, Math.min(index, this.totalItems() - 1)));
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.prev();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.next();
+        break;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearAutoplay();
+  }
+
+  private clearAutoplay(): void {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+      this.autoplayInterval = null;
+    }
+  }
+
+  protected readonly computedClass = computed(() =>
+    cn('relative overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselPrev]',
+  host: {
+    '(click)': 'carousel.prev()',
+    '[attr.aria-label]': '"Previous slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselPrevDirective {
+  readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute left-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyCarouselNext]',
+  host: {
+    '(click)': 'carousel.next()',
+    '[attr.aria-label]': '"Next slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyCarouselNextDirective {
+  readonly carousel = inject(SNY_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute right-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}

package/src/lib/carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyCarouselDirective,
+  SnyCarouselContentDirective,
+  SnyCarouselItemDirective,
+  SnyCarouselPrevDirective,
+  SnyCarouselNextDirective,
+  SNY_CAROUSEL,
+} from './carousel.directives';

package/src/lib/chat-bubble/chat-bubble.directives.spec.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyChatBubbleDirective, SnyChatBubbleContentDirective, type ChatBubbleAlign, type ChatBubbleContentVariant } from './chat-bubble.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyChatBubbleDirective, SnyChatBubbleContentDirective],
+  template: `
+    <div snyChatBubble [align]="align()">
+      <div snyChatBubbleContent [variant]="variant()">Hello!</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  align = signal<ChatBubbleAlign>('start');
+  variant = signal<ChatBubbleContentVariant>('default');
+}
+
+describe('SnyChatBubbleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with article role', () => {
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.getAttribute('role')).toBe('article');
+  });
+
+  it('should apply start alignment by default', () => {
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.className).toContain('flex');
+    expect(bubble.className).not.toContain('flex-row-reverse');
+  });
+
+  it('should apply end alignment', () => {
+    fixture.componentInstance.align.set('end');
+    fixture.detectChanges();
+    const bubble = fixture.nativeElement.querySelector('[snyChatBubble]');
+    expect(bubble.className).toContain('flex-row-reverse');
+  });
+
+  it('should apply primary content variant', () => {
+    fixture.componentInstance.variant.set('primary');
+    fixture.detectChanges();
+    const content = fixture.nativeElement.querySelector('[snyChatBubbleContent]');
+    expect(content.className).toContain('bg-primary');
+  });
+});

package/src/lib/chat-bubble/chat-bubble.directives.ts

@@ -0,0 +1,96 @@
+import { Directive, InjectionToken, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type ChatBubbleAlign = 'start' | 'end';
+export type ChatBubbleContentVariant = 'default' | 'primary' | 'secondary' | 'accent';
+
+export const SNY_CHAT_BUBBLE = new InjectionToken<SnyChatBubbleDirective>('SnyChatBubble');
+
+@Directive({
+  selector: '[snyChatBubble]',
+  providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }],
+  host: {
+    'role': 'article',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyChatBubbleDirective {
+  readonly align = input<ChatBubbleAlign>('start');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex gap-3 mb-4',
+      this.align() === 'end' && 'flex-row-reverse',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleAvatar]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleAvatarDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0 w-10 h-10 rounded-full overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mb-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleContentDirective {
+  readonly variant = input<ChatBubbleContentVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'primary' ? 'bg-primary text-primary-foreground' :
+      v === 'secondary' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100' :
+      v === 'accent' ? 'bg-violet-100 text-violet-900 dark:bg-violet-900 dark:text-violet-100' :
+      'bg-muted';
+    return cn('rounded-lg px-3 py-2 text-sm max-w-[80%]', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snyChatBubbleFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mt-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyChatBubbleBody]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyChatBubbleBodyDirective {
+  private readonly chatBubble = inject(SNY_CHAT_BUBBLE);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col',
+      this.chatBubble.align() === 'end' && 'items-end',
+      this.class()
+    )
+  );
+}

package/src/lib/chat-bubble/index.ts

@@ -0,0 +1,11 @@
+export {
+  SnyChatBubbleDirective,
+  SnyChatBubbleAvatarDirective,
+  SnyChatBubbleHeaderDirective,
+  SnyChatBubbleContentDirective,
+  SnyChatBubbleFooterDirective,
+  SnyChatBubbleBodyDirective,
+  SNY_CHAT_BUBBLE,
+  type ChatBubbleAlign,
+  type ChatBubbleContentVariant,
+} from './chat-bubble.directives';

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

@@ -0,0 +1,57 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyCheckboxDirective } from './checkbox.directive';
+import type { CheckboxSize } from './checkbox.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyCheckboxDirective],
+  template: `<input type="checkbox" snyCheckbox [size]="size()" />`,
+})
+class TestHostComponent {
+  size = signal<CheckboxSize>('md');
+}
+
+describe('SnyCheckboxDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('input[type="checkbox"]');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('appearance-none');
+    expect(el.className).toContain('rounded-sm');
+    expect(el.className).toContain('border');
+  });
+
+  it('should apply default md size', () => {
+    expect(el.className).toContain('h-4');
+    expect(el.className).toContain('w-4');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-3.5');
+    expect(el.className).toContain('w-3.5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+    expect(el.className).toContain('w-5');
+  });
+
+  it('should have checked styles in class list', () => {
+    expect(el.className).toContain('checked:bg-primary');
+  });
+});

package/src/lib/checkbox/checkbox.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { checkboxVariants, type CheckboxSize } from './checkbox.variants';
+
+@Directive({
+  selector: 'input[type="checkbox"][snyCheckbox]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyCheckboxDirective {
+  readonly size = input<CheckboxSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(checkboxVariants({ size: this.size() }), this.class())
+  );
+}

package/src/lib/checkbox/checkbox.variants.ts

@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const checkboxVariants = cva(
+  'peer appearance-none shrink-0 rounded-sm border border-border bg-background transition-colors checked:bg-primary checked:border-primary 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: {
+      size: {
+        sm: 'h-3.5 w-3.5',
+        md: 'h-4 w-4',
+        lg: 'h-5 w-5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';

package/src/lib/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { SnyCheckboxDirective } from './checkbox.directive';
+export { checkboxVariants, type CheckboxSize } from './checkbox.variants';