@sonny-ui/core 0.1.0-alpha.16 → 0.1.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.18",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/src/lib/accordion/accordion.directives.ts

@@ -6,7 +6,6 @@ export const SNY_ACCORDION_ITEM = new InjectionToken<SnyAccordionItemDirective>(
 
 @Directive({
   selector: '[snyAccordion]',
-  standalone: true,
   exportAs: 'snyAccordion',
   providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }],
   host: {
@@ -81,7 +80,6 @@ export class SnyAccordionDirective {
 
 @Directive({
   selector: '[snyAccordionItem]',
-  standalone: true,
   exportAs: 'snyAccordionItem',
   providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }],
   host: { '[class]': 'computedClass()' },
@@ -104,7 +102,6 @@ export class SnyAccordionItemDirective {
 
 @Directive({
   selector: '[snyAccordionTrigger]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-expanded]': 'item.isOpen()',
@@ -127,7 +124,6 @@ export class SnyAccordionTriggerDirective {
 
 @Directive({
   selector: '[snyAccordionContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     role: 'region',

package/src/lib/alert/alert.directives.ts

@@ -5,7 +5,6 @@ import { alertVariants, type AlertVariant } from './alert.variants';
 @Directive({
   selector: '[snyAlert]',
   exportAs: 'snyAlert',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.role]': 'role()',
@@ -41,7 +40,6 @@ export class SnyAlertDirective {
 
 @Directive({
   selector: '[snyAlertTitle]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -56,7 +54,6 @@ export class SnyAlertTitleDirective {
 
 @Directive({
   selector: '[snyAlertDescription]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

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

@@ -4,7 +4,6 @@ import { avatarVariants, type AvatarSize, type AvatarVariant } from './avatar.va
 
 @Component({
   selector: 'sny-avatar',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { '[class]': 'computedClass()' },
   template: `

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

@@ -0,0 +1,74 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyAvatarGroupComponent, type AvatarGroupItem } from './avatar-group.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyAvatarGroupComponent],
+  template: `<sny-avatar-group [items]="items()" [max]="max()" [size]="size()" />`,
+})
+class TestHost {
+  items = signal<AvatarGroupItem[]>([
+    { src: 'a.jpg', alt: 'Alice' },
+    { src: 'b.jpg', alt: 'Bob' },
+    { src: 'c.jpg', alt: 'Carol' },
+    { src: 'd.jpg', alt: 'David' },
+    { src: 'e.jpg', alt: 'Eve' },
+  ]);
+  max = signal(3);
+  size = signal<'sm' | 'md' | 'lg'>('md');
+}
+
+describe('SnyAvatarGroupComponent', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  it('should render max avatars', () => {
+    const imgs = el.querySelectorAll('img');
+    expect(imgs.length).toBe(3);
+  });
+
+  it('should show overflow counter', () => {
+    const counter = el.querySelector('[title="2 more"]');
+    expect(counter).not.toBeNull();
+    expect(counter?.textContent).toContain('+2');
+  });
+
+  it('should not show counter when no overflow', () => {
+    fixture.componentInstance.max.set(5);
+    fixture.detectChanges();
+    const counter = el.querySelector('[title]');
+    expect(counter).toBeNull();
+  });
+
+  it('should render all when max >= items', () => {
+    fixture.componentInstance.max.set(10);
+    fixture.detectChanges();
+    const imgs = el.querySelectorAll('img');
+    expect(imgs.length).toBe(5);
+  });
+
+  it('should render fallback initials when no src', () => {
+    fixture.componentInstance.items.set([
+      { fallback: 'AB' },
+      { fallback: 'CD' },
+    ]);
+    fixture.componentInstance.max.set(2);
+    fixture.detectChanges();
+    const fallbacks = el.querySelectorAll('.bg-muted');
+    expect(fallbacks.length).toBe(2);
+    expect(fallbacks[0].textContent).toContain('AB');
+  });
+
+  it('should have aria-label on group', () => {
+    const group = el.querySelector('[role="group"]');
+    expect(group?.getAttribute('aria-label')).toBe('Group of 5 users');
+  });
+});

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.ts

@@ -4,7 +4,6 @@ import { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.varian
 
 @Directive({
   selector: '[snyBadge]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBadgeDirective {

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

@@ -3,7 +3,6 @@ import { cn } from '../core/utils/cn';
 
 @Directive({
   selector: 'nav[snyBreadcrumb]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     'aria-label': 'Breadcrumb',
@@ -16,7 +15,6 @@ export class SnyBreadcrumbDirective {
 
 @Directive({
   selector: 'ol[snyBreadcrumbList]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbListDirective {
@@ -28,7 +26,6 @@ export class SnyBreadcrumbListDirective {
 
 @Directive({
   selector: 'li[snyBreadcrumbItem]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbItemDirective {
@@ -40,7 +37,6 @@ export class SnyBreadcrumbItemDirective {
 
 @Directive({
   selector: '[snyBreadcrumbLink]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyBreadcrumbLinkDirective {
@@ -52,7 +48,6 @@ export class SnyBreadcrumbLinkDirective {
 
 @Directive({
   selector: '[snyBreadcrumbSeparator]',
-  standalone: true,
   host: {
     role: 'presentation',
     '[aria-hidden]': 'true',
@@ -68,7 +63,6 @@ export class SnyBreadcrumbSeparatorDirective {
 
 @Directive({
   selector: '[snyBreadcrumbPage]',
-  standalone: true,
   host: {
     role: 'link',
     'aria-disabled': 'true',

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

@@ -4,7 +4,6 @@ import { buttonVariants, type ButtonVariant, type ButtonSize } from './button.va
 
 @Directive({
   selector: 'button[snyBtn], a[snyBtn]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-disabled]': 'disabled() || loading() || null',

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

@@ -4,7 +4,6 @@ import { buttonGroupVariants, type ButtonGroupOrientation } from './button-group
 
 @Directive({
   selector: '[snyButtonGroup]',
-  standalone: true,
   host: {
     role: 'group',
     '[class]': 'computedClass()',

package/src/lib/calendar/calendar.component.ts

@@ -14,7 +14,6 @@ import type { CalendarDay, CalendarMode, DateRange } from './calendar.types';
 
 @Component({
   selector: 'sny-calendar',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': 'hostClass()',

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

@@ -4,7 +4,6 @@ import { cardVariants, type CardVariant, type CardPadding } from './card.variant
 
 @Directive({
   selector: '[snyCard]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardDirective {
@@ -19,7 +18,6 @@ export class SnyCardDirective {
 
 @Directive({
   selector: '[snyCardHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardHeaderDirective {
@@ -31,7 +29,6 @@ export class SnyCardHeaderDirective {
 
 @Directive({
   selector: '[snyCardTitle]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardTitleDirective {
@@ -43,7 +40,6 @@ export class SnyCardTitleDirective {
 
 @Directive({
   selector: '[snyCardDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardDescriptionDirective {
@@ -55,7 +51,6 @@ export class SnyCardDescriptionDirective {
 
 @Directive({
   selector: '[snyCardContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardContentDirective {
@@ -67,7 +62,6 @@ export class SnyCardContentDirective {
 
 @Directive({
   selector: '[snyCardFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCardFooterDirective {

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

@@ -7,7 +7,6 @@ export const SNY_CAROUSEL = new InjectionToken<SnyCarouselDirective>('SnyCarouse
 
 @Directive({
   selector: '[snyCarouselItem]',
-  standalone: true,
   host: {
     'role': 'group',
     '[attr.aria-roledescription]': '"slide"',
@@ -23,7 +22,6 @@ export class SnyCarouselItemDirective {
 
 @Directive({
   selector: '[snyCarouselContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[style.transform]': 'transformStyle()',
@@ -44,7 +42,6 @@ export class SnyCarouselContentDirective {
 
 @Directive({
   selector: '[snyCarousel]',
-  standalone: true,
   exportAs: 'snyCarousel',
   providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }],
   host: {
@@ -131,7 +128,6 @@ export class SnyCarouselDirective implements OnDestroy {
 
 @Directive({
   selector: '[snyCarouselPrev]',
-  standalone: true,
   host: {
     '(click)': 'carousel.prev()',
     '[attr.aria-label]': '"Previous slide"',
@@ -148,7 +144,6 @@ export class SnyCarouselPrevDirective {
 
 @Directive({
   selector: '[snyCarouselNext]',
-  standalone: true,
   host: {
     '(click)': 'carousel.next()',
     '[attr.aria-label]': '"Next slide"',

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

@@ -8,7 +8,6 @@ export const SNY_CHAT_BUBBLE = new InjectionToken<SnyChatBubbleDirective>('SnyCh
 
 @Directive({
   selector: '[snyChatBubble]',
-  standalone: true,
   providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }],
   host: {
     'role': 'article',
@@ -30,7 +29,6 @@ export class SnyChatBubbleDirective {
 
 @Directive({
   selector: '[snyChatBubbleAvatar]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleAvatarDirective {
@@ -42,7 +40,6 @@ export class SnyChatBubbleAvatarDirective {
 
 @Directive({
   selector: '[snyChatBubbleHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleHeaderDirective {
@@ -54,7 +51,6 @@ export class SnyChatBubbleHeaderDirective {
 
 @Directive({
   selector: '[snyChatBubbleContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleContentDirective {
@@ -74,7 +70,6 @@ export class SnyChatBubbleContentDirective {
 
 @Directive({
   selector: '[snyChatBubbleFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleFooterDirective {
@@ -86,7 +81,6 @@ export class SnyChatBubbleFooterDirective {
 
 @Directive({
   selector: '[snyChatBubbleBody]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyChatBubbleBodyDirective {

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

@@ -4,7 +4,6 @@ import { checkboxVariants, type CheckboxSize } from './checkbox.variants';
 
 @Directive({
   selector: 'input[type="checkbox"][snyCheckbox]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyCheckboxDirective {

package/src/lib/color-picker/color-picker.component.ts

@@ -5,7 +5,6 @@ import {
   effect,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -30,9 +29,12 @@ import { colorPickerTriggerVariants, type ColorPickerSize } from './color-picker
 
 @Component({
   selector: 'sny-color-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'relative inline-block' },
+  host: {
+    class: 'relative inline-block',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyColorPickerComponent), multi: true },
   ],
@@ -518,14 +520,12 @@ export class SnyColorPickerComponent implements ControlValueAccessor, OnDestroy
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

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

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -23,10 +22,10 @@ export interface ComboboxOption {
 
 @Component({
   selector: 'sny-combobox',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
   },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyComboboxComponent), multi: true },
@@ -257,7 +256,6 @@ export class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
     }
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();

package/src/lib/command-palette/command-palette.component.ts

@@ -15,7 +15,6 @@ import type { Command, CommandGroup, CommandPaletteConfig } from './command-pale
 
 @Component({
   selector: 'sny-command-palette',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyInputDirective],
   host: {

package/src/lib/data-table/data-table.component.ts

@@ -54,7 +54,6 @@ const DEFAULT_PAGINATION: DataTablePaginationConfig = {
 
 @Component({
   selector: 'sny-data-table',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgTemplateOutlet,

package/src/lib/data-table/data-table.directives.ts

@@ -2,7 +2,6 @@ import { Directive, TemplateRef, inject, input } from '@angular/core';
 
 @Directive({
   selector: '[snyCell]',
-  standalone: true,
 })
 export class SnyCellDefDirective {
   readonly snyCell = input.required<string>();
@@ -11,7 +10,6 @@ export class SnyCellDefDirective {
 
 @Directive({
   selector: '[snyHeaderCell]',
-  standalone: true,
 })
 export class SnyHeaderCellDefDirective {
   readonly snyHeaderCell = input.required<string>();
@@ -20,7 +18,6 @@ export class SnyHeaderCellDefDirective {
 
 @Directive({
   selector: '[snyBulkActions]',
-  standalone: true,
 })
 export class SnyBulkActionsDefDirective {
   readonly template = inject(TemplateRef);
@@ -28,7 +25,6 @@ export class SnyBulkActionsDefDirective {
 
 @Directive({
   selector: '[snyRowExpand]',
-  standalone: true,
 })
 export class SnyRowExpandDefDirective {
   readonly template = inject(TemplateRef);

package/src/lib/date-picker/date-picker.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -19,10 +18,13 @@ import { datePickerTriggerVariants, type DatePickerSize } from './date-picker.va
 
 @Component({
   selector: 'sny-date-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyCalendarComponent],
-  host: { class: 'relative inline-block w-full' },
+  host: {
+    class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
   ],
@@ -206,14 +208,12 @@ export class SnyDatePickerComponent implements ControlValueAccessor, OnDestroy {
     this.removeGlobalListeners();
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

package/src/lib/date-range-picker/date-range-picker.component.ts

@@ -4,7 +4,6 @@ import {
   computed,
   ElementRef,
   forwardRef,
-  HostListener,
   inject,
   input,
   model,
@@ -20,10 +19,13 @@ import { datePickerTriggerVariants, type DatePickerSize } from '../date-picker/d
 
 @Component({
   selector: 'sny-date-range-picker',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SnyCalendarComponent],
-  host: { class: 'relative inline-block w-full' },
+  host: {
+    class: 'relative inline-block w-full',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
+  },
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), multi: true },
   ],
@@ -326,14 +328,12 @@ export class SnyDateRangePickerComponent implements ControlValueAccessor, OnDest
     this.removeGlobalListeners();
   }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }

package/src/lib/diff/diff.component.ts

@@ -3,7 +3,6 @@ import { cn } from '../core/utils/cn';
 
 @Component({
   selector: 'sny-diff',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"relative overflow-hidden select-none w-full"',

package/src/lib/divider/divider.component.ts

@@ -8,7 +8,6 @@ import {
 
 @Component({
   selector: 'sny-divider',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'role': 'separator',