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

package/src/lib/avatar-group/avatar-group.component.ts

@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export interface AvatarGroupItem {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+}
+
+const sizeMap = {
+  sm: { avatar: 'h-7 w-7 text-xs', counter: 'h-7 w-7 text-[10px]' },
+  md: { avatar: 'h-9 w-9 text-sm', counter: 'h-9 w-9 text-xs' },
+  lg: { avatar: 'h-11 w-11 text-base', counter: 'h-11 w-11 text-sm' },
+};
+
+const spacingMap = {
+  tight: '-space-x-3',
+  normal: '-space-x-2',
+};
+
+export type AvatarGroupSize = 'sm' | 'md' | 'lg';
+export type AvatarGroupSpacing = 'tight' | 'normal';
+
+@Component({
+  selector: 'sny-avatar-group',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div [class]="containerClass()" role="group" [attr.aria-label]="'Group of ' + items().length + ' users'">
+      @for (item of visibleItems(); track $index) {
+        @if (item.src) {
+          <img
+            [src]="item.src"
+            [alt]="item.alt ?? ''"
+            [class]="avatarClass()"
+          />
+        } @else {
+          <div [class]="fallbackClass()">
+            {{ item.fallback ?? '?' }}
+          </div>
+        }
+      }
+      @if (overflowCount() > 0) {
+        <div [class]="counterClass()" [title]="overflowCount() + ' more'">
+          +{{ overflowCount() }}
+        </div>
+      }
+    </div>
+  `,
+})
+export class SnyAvatarGroupComponent {
+  readonly items = input.required<AvatarGroupItem[]>();
+  readonly max = input(3);
+  readonly size = input<AvatarGroupSize>('md');
+  readonly spacing = input<AvatarGroupSpacing>('normal');
+
+  readonly visibleItems = computed(() => this.items().slice(0, this.max()));
+  readonly overflowCount = computed(() => Math.max(0, this.items().length - this.max()));
+
+  readonly containerClass = computed(() =>
+    cn('flex items-center', spacingMap[this.spacing()])
+  );
+
+  readonly avatarClass = computed(() =>
+    cn(
+      'inline-block rounded-full object-cover ring-2 ring-background',
+      sizeMap[this.size()].avatar
+    )
+  );
+
+  readonly fallbackClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-medium ring-2 ring-background',
+      sizeMap[this.size()].avatar
+    )
+  );
+
+  readonly counterClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground font-semibold ring-2 ring-background',
+      sizeMap[this.size()].counter
+    )
+  );
+}

package/src/lib/avatar-group/index.ts

@@ -0,0 +1 @@
+export { SnyAvatarGroupComponent, type AvatarGroupItem, type AvatarGroupSize, type AvatarGroupSpacing } from './avatar-group.component';

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

@@ -0,0 +1,74 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyBadgeDirective } from './badge.directive';
+import type { BadgeVariant, BadgeSize } from './badge.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyBadgeDirective],
+  template: `<span snyBadge [variant]="variant()" [size]="size()">Badge</span>`,
+})
+class TestHostComponent {
+  variant = signal<BadgeVariant>('default');
+  size = signal<BadgeSize>('md');
+}
+
+describe('SnyBadgeDirective', () => {
+  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('[snyBadge]');
+  });
+
+  it('should apply default variant classes', () => {
+    expect(el.className).toContain('bg-primary');
+    expect(el.className).toContain('text-primary-foreground');
+  });
+
+  it('should apply destructive variant', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(el.className).toContain('border-border');
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-green-600');
+  });
+
+  it('should apply warning variant', () => {
+    fixture.componentInstance.variant.set('warning');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-yellow-500');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-[10px]');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-sm');
+  });
+
+  it('should have rounded-full class', () => {
+    expect(el.className).toContain('rounded-full');
+  });
+});

package/src/lib/badge/badge.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.variants';
+
+@Directive({
+  selector: '[snyBadge]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBadgeDirective {
+  readonly variant = input<BadgeVariant>('default');
+  readonly size = input<BadgeSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(badgeVariants({ variant: this.variant(), size: this.size() }), this.class())
+  );
+}

package/src/lib/badge/badge.variants.ts

@@ -0,0 +1,29 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'border-border text-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        success: 'border-transparent bg-green-600 text-white dark:bg-green-500',
+        warning: 'border-transparent bg-yellow-500 text-white dark:bg-yellow-400 dark:text-black',
+      },
+      size: {
+        sm: 'px-2 py-0.5 text-[10px]',
+        md: 'px-2.5 py-0.5 text-xs',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning';
+export type BadgeSize = 'sm' | 'md' | 'lg';

package/src/lib/badge/index.ts

@@ -0,0 +1,2 @@
+export { SnyBadgeDirective } from './badge.directive';
+export { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.variants';

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

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyBreadcrumbDirective,
+  SnyBreadcrumbListDirective,
+  SnyBreadcrumbItemDirective,
+  SnyBreadcrumbLinkDirective,
+  SnyBreadcrumbSeparatorDirective,
+  SnyBreadcrumbPageDirective,
+} from './breadcrumb.directives';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyBreadcrumbDirective,
+    SnyBreadcrumbListDirective,
+    SnyBreadcrumbItemDirective,
+    SnyBreadcrumbLinkDirective,
+    SnyBreadcrumbSeparatorDirective,
+    SnyBreadcrumbPageDirective,
+  ],
+  template: `
+    <nav snyBreadcrumb>
+      <ol snyBreadcrumbList>
+        <li snyBreadcrumbItem>
+          <a snyBreadcrumbLink href="/">Home</a>
+        </li>
+        <li snyBreadcrumbSeparator>/</li>
+        <li snyBreadcrumbItem>
+          <span snyBreadcrumbPage>Current</span>
+        </li>
+      </ol>
+    </nav>
+  `,
+})
+class TestHostComponent {}
+
+describe('Breadcrumb Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should set aria-label on nav', () => {
+    const nav = fixture.nativeElement.querySelector('nav');
+    expect(nav.getAttribute('aria-label')).toBe('Breadcrumb');
+  });
+
+  it('should apply list classes', () => {
+    const ol = fixture.nativeElement.querySelector('ol');
+    expect(ol.className).toContain('flex');
+    expect(ol.className).toContain('items-center');
+  });
+
+  it('should apply link hover classes', () => {
+    const link = fixture.nativeElement.querySelector('[snyBreadcrumbLink]');
+    expect(link.className).toContain('hover:text-foreground');
+  });
+
+  it('should set aria-current="page" on page', () => {
+    const page = fixture.nativeElement.querySelector('[snyBreadcrumbPage]');
+    expect(page.getAttribute('aria-current')).toBe('page');
+  });
+
+  it('should set aria-hidden on separator', () => {
+    const sep = fixture.nativeElement.querySelector('[snyBreadcrumbSeparator]');
+    expect(sep.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('should set role="presentation" on separator', () => {
+    const sep = fixture.nativeElement.querySelector('[snyBreadcrumbSeparator]');
+    expect(sep.getAttribute('role')).toBe('presentation');
+  });
+});

package/src/lib/breadcrumb/breadcrumb.directives.ts

@@ -0,0 +1,78 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+@Directive({
+  selector: 'nav[snyBreadcrumb]',
+  host: {
+    '[class]': 'computedClass()',
+    'aria-label': 'Breadcrumb',
+  },
+})
+export class SnyBreadcrumbDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() => cn('', this.class()));
+}
+
+@Directive({
+  selector: 'ol[snyBreadcrumbList]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbListDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.class())
+  );
+}
+
+@Directive({
+  selector: 'li[snyBreadcrumbItem]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbItemDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('inline-flex items-center gap-1.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbLink]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbLinkDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('transition-colors hover:text-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbSeparator]',
+  host: {
+    role: 'presentation',
+    '[aria-hidden]': 'true',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyBreadcrumbSeparatorDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('[&>svg]:size-3.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbPage]',
+  host: {
+    role: 'link',
+    'aria-disabled': 'true',
+    '[attr.aria-current]': '"page"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyBreadcrumbPageDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('font-normal text-foreground', this.class())
+  );
+}

package/src/lib/breadcrumb/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyBreadcrumbDirective,
+  SnyBreadcrumbListDirective,
+  SnyBreadcrumbItemDirective,
+  SnyBreadcrumbLinkDirective,
+  SnyBreadcrumbSeparatorDirective,
+  SnyBreadcrumbPageDirective,
+} from './breadcrumb.directives';

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

@@ -0,0 +1,92 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyButtonDirective } from './button.directive';
+import type { ButtonVariant, ButtonSize } from './button.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyButtonDirective],
+  template: `<button snyBtn [variant]="variant()" [size]="size()" [disabled]="disabled()" [loading]="loading()">Click</button>`,
+})
+class TestHostComponent {
+  variant = signal<ButtonVariant>('default');
+  size = signal<ButtonSize>('md');
+  disabled = signal(false);
+  loading = signal(false);
+}
+
+describe('SnyButtonDirective', () => {
+  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 variant classes', () => {
+    expect(button.className).toContain('bg-primary');
+    expect(button.className).toContain('text-primary-foreground');
+  });
+
+  it('should apply destructive variant', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(button.className).toContain('bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(button.className).toContain('border');
+    expect(button.className).toContain('bg-background');
+  });
+
+  it('should apply ghost variant', () => {
+    fixture.componentInstance.variant.set('ghost');
+    fixture.detectChanges();
+    expect(button.className).toContain('hover:bg-accent');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(button.className).toContain('h-9');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(button.className).toContain('h-11');
+  });
+
+  it('should apply icon size', () => {
+    fixture.componentInstance.size.set('icon');
+    fixture.detectChanges();
+    expect(button.className).toContain('w-10');
+  });
+
+  it('should set aria-disabled when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('should set aria-disabled when loading', () => {
+    fixture.componentInstance.loading.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+    expect(button.className).toContain('cursor-wait');
+  });
+
+  it('should set tabindex=-1 when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('tabindex')).toBe('-1');
+  });
+});

package/src/lib/button/button.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { buttonVariants, type ButtonVariant, type ButtonSize } from './button.variants';
+
+@Directive({
+  selector: 'button[snyBtn], a[snyBtn]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-disabled]': 'disabled() || loading() || null',
+    '[attr.disabled]': 'disabled() || loading() || null',
+    '[attr.tabindex]': '(disabled() || loading()) ? -1 : null',
+  },
+})
+export class SnyButtonDirective {
+  readonly variant = input<ButtonVariant>('default');
+  readonly size = input<ButtonSize>('md');
+  readonly disabled = input(false);
+  readonly loading = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this.loading() && 'cursor-wait opacity-70',
+      this.class()
+    )
+  );
+}

package/src/lib/button/button.variants.ts

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-9 rounded-sm px-3',
+        md: 'h-10 px-4 py-2',
+        lg: 'h-11 rounded-sm px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';

package/src/lib/button/index.ts

@@ -0,0 +1,2 @@
+export { SnyButtonDirective } from './button.directive';
+export { buttonVariants, type ButtonVariant, type ButtonSize } from './button.variants';

package/src/lib/button-group/button-group.directive.spec.ts

@@ -0,0 +1,46 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyButtonGroupDirective } from './button-group.directive';
+import type { ButtonGroupOrientation } from './button-group.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyButtonGroupDirective],
+  template: `<div snyButtonGroup [orientation]="orientation()"><button>A</button><button>B</button></div>`,
+})
+class TestHostComponent {
+  orientation = signal<ButtonGroupOrientation>('horizontal');
+}
+
+describe('SnyButtonGroupDirective', () => {
+  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('[snyButtonGroup]');
+  });
+
+  it('should have role="group"', () => {
+    expect(el.getAttribute('role')).toBe('group');
+  });
+
+  it('should apply inline-flex', () => {
+    expect(el.className).toContain('inline-flex');
+  });
+
+  it('should apply horizontal orientation by default', () => {
+    expect(el.className).toContain('flex-row');
+  });
+
+  it('should apply vertical orientation', () => {
+    fixture.componentInstance.orientation.set('vertical');
+    fixture.detectChanges();
+    expect(el.className).toContain('flex-col');
+  });
+});

package/src/lib/button-group/button-group.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.variants';
+
+@Directive({
+  selector: '[snyButtonGroup]',
+  host: {
+    role: 'group',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyButtonGroupDirective {
+  readonly orientation = input<ButtonGroupOrientation>('horizontal');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(buttonGroupVariants({ orientation: this.orientation() }), this.class())
+  );
+}

package/src/lib/button-group/button-group.variants.ts

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonGroupVariants = cva(
+  'inline-flex [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:-ml-px',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'flex-row',
+        vertical: 'flex-col [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-b-none [&>*:first-child:not(:last-child)]:rounded-r-sm [&>*:last-child:not(:first-child)]:rounded-t-none [&>*:last-child:not(:first-child)]:rounded-l-sm [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:ml-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+);
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';

package/src/lib/button-group/index.ts

@@ -0,0 +1,2 @@
+export { SnyButtonGroupDirective } from './button-group.directive';
+export { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.variants';