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

package/src/lib/tag-input/tag-input.component.spec.ts

@@ -0,0 +1,190 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTagInputComponent } from './tag-input.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyTagInputComponent],
+  template: `
+    <sny-tag-input
+      [(value)]="tags"
+      [maxTags]="maxTags()"
+      [allowDuplicates]="allowDuplicates()"
+      [disabled]="disabled()"
+      [validate]="validateFn()"
+      (tagAdded)="lastAdded = $event"
+      (tagRemoved)="lastRemoved = $event"
+    />
+  `,
+})
+class TestHost {
+  tags = signal<string[]>([]);
+  maxTags = signal<number | null>(null);
+  allowDuplicates = signal(false);
+  disabled = signal(false);
+  validateFn = signal<((t: string) => boolean) | null>(null);
+  lastAdded: string | null = null;
+  lastRemoved: string | null = null;
+}
+
+describe('SnyTagInputComponent', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getInput(): HTMLInputElement {
+    return el.querySelector('input') as HTMLInputElement;
+  }
+
+  function getTags(): string[] {
+    return Array.from(el.querySelectorAll('span')).map((s) => s.textContent?.trim().replace('×', '').trim() ?? '');
+  }
+
+  function typeAndEnter(text: string): void {
+    const input = getInput();
+    input.value = text;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+  }
+
+  it('should render empty with placeholder', () => {
+    expect(getInput().placeholder).toBe('Add tag...');
+  });
+
+  it('should add tag on Enter', () => {
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags()).toContain('Angular');
+    expect(fixture.componentInstance.lastAdded).toBe('Angular');
+  });
+
+  it('should add tag on comma', () => {
+    const input = getInput();
+    input.value = 'React,';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('React');
+  });
+
+  it('should reject duplicates when allowDuplicates=false', () => {
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(1);
+  });
+
+  it('should allow duplicates when allowDuplicates=true', () => {
+    fixture.componentInstance.allowDuplicates.set(true);
+    fixture.detectChanges();
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(2);
+  });
+
+  it('should respect maxTags', () => {
+    fixture.componentInstance.maxTags.set(2);
+    fixture.detectChanges();
+    typeAndEnter('A');
+    typeAndEnter('B');
+    // Input should be hidden now (atMax), so we can't type more
+    const input = el.querySelector('input');
+    expect(input).toBeNull(); // hidden when at max
+    expect(fixture.componentInstance.tags().length).toBe(2);
+  });
+
+  it('should validate with custom function', () => {
+    fixture.componentInstance.validateFn.set((t: string) => t.length >= 3);
+    fixture.detectChanges();
+    typeAndEnter('AB');
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    typeAndEnter('ABC');
+    expect(fixture.componentInstance.tags()).toContain('ABC');
+  });
+
+  it('should remove tag on X click', () => {
+    typeAndEnter('Angular');
+    fixture.detectChanges();
+    const removeBtn = el.querySelector('[aria-label="Remove Angular"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    expect(fixture.componentInstance.lastRemoved).toBe('Angular');
+  });
+
+  it('should remove last tag on Backspace with empty input', () => {
+    typeAndEnter('A');
+    typeAndEnter('B');
+    const input = getInput();
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toEqual(['A']);
+  });
+
+  it('should add tag on blur when addOnBlur=true', () => {
+    const input = getInput();
+    input.value = 'BlurTag';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('blur', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('BlurTag');
+  });
+
+  it('should disable when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it('should emit tagAdded and tagRemoved', () => {
+    typeAndEnter('Test');
+    expect(fixture.componentInstance.lastAdded).toBe('Test');
+    const removeBtn = el.querySelector('[aria-label="Remove Test"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.lastRemoved).toBe('Test');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyTagInputComponent],
+  template: `<sny-tag-input [formControl]="ctrl" />`,
+})
+class ReactiveHost {
+  ctrl = new FormControl<string[]>([]);
+}
+
+describe('SnyTagInputComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveHost);
+    fixture.detectChanges();
+  });
+
+  it('should populate tags from FormControl', () => {
+    fixture.componentInstance.ctrl.setValue(['A', 'B', 'C']);
+    fixture.detectChanges();
+    const tags = fixture.nativeElement.querySelectorAll('span');
+    expect(tags.length).toBe(3);
+  });
+
+  it('should update FormControl when tag added', () => {
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = 'New';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toContain('New');
+  });
+});

package/src/lib/tag-input/tag-input.component.ts

@@ -0,0 +1,172 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';
+
+@Component({
+  selector: 'sny-tag-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyTagInputComponent), multi: true },
+  ],
+  template: `
+    <div [class]="containerClass()" (click)="focusInput()">
+      @for (tag of value(); track tag; let i = $index) {
+        <span [class]="tagClass()">
+          {{ tag }}
+          @if (removable() && !isDisabled()) {
+            <button
+              type="button"
+              class="hover:text-destructive transition-colors leading-none"
+              (click)="removeTag(i); $event.stopPropagation()"
+              [attr.aria-label]="'Remove ' + tag"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          }
+        </span>
+      }
+      @if (!atMax()) {
+        <input
+          #inputEl
+          type="text"
+          class="flex-1 min-w-[80px] outline-none bg-transparent"
+          [placeholder]="value().length === 0 ? placeholder() : ''"
+          [disabled]="isDisabled()"
+          [value]="inputValue()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          [attr.aria-label]="'Add tag'"
+        />
+      }
+    </div>
+  `,
+})
+export class SnyTagInputComponent implements ControlValueAccessor {
+  readonly value = model<string[]>([]);
+  readonly placeholder = input('Add tag...');
+  readonly maxTags = input<number | null>(null);
+  readonly allowDuplicates = input(false);
+  readonly removable = input(true);
+  readonly addOnBlur = input(true);
+  readonly separators = input<string[]>(['Enter', ',']);
+  readonly validate = input<((tag: string) => boolean) | null>(null);
+  readonly disabled = input(false);
+  readonly size = input<TagInputSize>('md');
+  readonly class = input<string>('');
+
+  readonly tagAdded = output<string>();
+  readonly tagRemoved = output<string>();
+
+  readonly inputValue = signal('');
+  private readonly _disabledByCva = signal(false);
+  readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+  readonly atMax = computed(() => this.maxTags() !== null && this.value().length >= this.maxTags()!);
+
+  readonly containerClass = computed(() =>
+    cn(tagInputContainerVariants({ size: this.size() }), this.isDisabled() && 'opacity-50 cursor-not-allowed', this.class())
+  );
+
+  readonly tagClass = computed(() =>
+    cn(tagVariants({ size: this.size() }), 'bg-secondary text-secondary-foreground')
+  );
+
+  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  private _onChange: (value: string[]) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  writeValue(val: string[]): void {
+    this.value.set(val ?? []);
+  }
+
+  registerOnChange(fn: (value: string[]) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  focusInput(): void {
+    this.inputRef()?.nativeElement.focus();
+  }
+
+  onInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    // Check if separator character was typed (e.g. comma)
+    const seps = this.separators().filter((s) => s.length === 1);
+    for (const sep of seps) {
+      if (val.includes(sep)) {
+        const parts = val.split(sep);
+        for (const part of parts) {
+          this.addTag(part);
+        }
+        this.inputValue.set('');
+        return;
+      }
+    }
+    this.inputValue.set(val);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.separators().includes(event.key) && event.key !== ',') {
+      event.preventDefault();
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+      return;
+    }
+
+    if (event.key === 'Backspace' && this.inputValue() === '') {
+      const tags = this.value();
+      if (tags.length > 0) {
+        this.removeTag(tags.length - 1);
+      }
+    }
+  }
+
+  onBlur(): void {
+    if (this.addOnBlur() && this.inputValue().trim()) {
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+    }
+    this._onTouched();
+  }
+
+  addTag(raw: string): void {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (this.atMax()) return;
+    if (!this.allowDuplicates() && this.value().includes(tag)) return;
+
+    const validateFn = this.validate();
+    if (validateFn && !validateFn(tag)) return;
+
+    this.value.update((tags) => [...tags, tag]);
+    this._onChange(this.value());
+    this.tagAdded.emit(tag);
+  }
+
+  removeTag(index: number): void {
+    const removed = this.value()[index];
+    this.value.update((tags) => tags.filter((_, i) => i !== index));
+    this._onChange(this.value());
+    this.tagRemoved.emit(removed);
+  }
+}

package/src/lib/tag-input/tag-input.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const tagInputContainerVariants = cva(
+  'flex flex-wrap gap-1.5 border border-border rounded-md bg-background px-2 cursor-text transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'min-h-[36px] py-1 text-xs',
+        md: 'min-h-[40px] py-1.5 text-sm',
+        lg: 'min-h-[44px] py-2 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-md font-medium',
+  {
+    variants: {
+      size: {
+        sm: 'px-1.5 py-0.5 text-xs',
+        md: 'px-2 py-0.5 text-sm',
+        lg: 'px-2.5 py-1 text-sm',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type TagInputSize = 'sm' | 'md' | 'lg';

package/src/lib/textarea/textarea.directive.ts

@@ -17,7 +17,6 @@ import {
 
 @Directive({
   selector: 'textarea[snyTextarea]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-invalid]': 'variant() === "error" || null',

package/src/lib/timeline/timeline.directives.ts

@@ -8,7 +8,6 @@ export type TimelineMiddleVariant = 'default' | 'primary' | 'success' | 'error';
 
 @Directive({
   selector: '[snyTimelineItem]',
-  standalone: true,
   host: { 'role': 'listitem', '[class]': 'computedClass()' },
 })
 export class SnyTimelineItemDirective {
@@ -21,7 +20,6 @@ export class SnyTimelineItemDirective {
 
 @Directive({
   selector: '[snyTimelineStart]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTimelineStartDirective {
@@ -33,7 +31,6 @@ export class SnyTimelineStartDirective {
 
 @Directive({
   selector: '[snyTimelineMiddle]',
-  standalone: true,
   host: { '[class]': 'computedClass()', 'aria-hidden': 'true' },
 })
 export class SnyTimelineMiddleDirective {
@@ -52,7 +49,6 @@ export class SnyTimelineMiddleDirective {
 
 @Directive({
   selector: '[snyTimelineEnd]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyTimelineEndDirective {
@@ -64,7 +60,6 @@ export class SnyTimelineEndDirective {
 
 @Directive({
   selector: '[snyTimeline]',
-  standalone: true,
   exportAs: 'snyTimeline',
   providers: [{ provide: SNY_TIMELINE, useExisting: SnyTimelineDirective }],
   host: {

package/src/lib/toast/toaster.component.ts

@@ -5,7 +5,6 @@ import { cn } from '../core/utils/cn';
 
 @Component({
   selector: 'sny-toaster',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div [class]="containerClass()" role="region" aria-label="Notifications" tabindex="-1">

package/src/lib/toggle/toggle.directive.ts

@@ -5,7 +5,6 @@ import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.va
 
 @Directive({
   selector: 'button[snyToggle]',
-  standalone: true,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
   ],

package/src/lib/tooltip/tooltip.directive.ts

@@ -16,7 +16,6 @@ let tooltipIdCounter = 0;
 
 @Directive({
   selector: '[snyTooltip]',
-  standalone: true,
   exportAs: 'snyTooltip',
   host: {
     '(mouseenter)': 'show()',

package/src/lib/validator/validator.directives.ts

@@ -6,7 +6,6 @@ export type ValidatorHintVariant = 'error' | 'success' | 'warning' | 'info';
 
 @Directive({
   selector: '[snyValidator]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyValidatorDirective {
@@ -27,7 +26,6 @@ export class SnyValidatorDirective {
 
 @Directive({
   selector: '[snyValidatorHint]',
-  standalone: true,
   host: {
     'role': 'alert',
     '[class]': 'computedClass()',

package/types/sonny-ui-core.d.ts

@@ -1997,6 +1997,151 @@ declare class SnyCommandPaletteService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SnyCommandPaletteService>;
 }
 
+declare const numberInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type NumberInputSize = 'sm' | 'md' | 'lg';
+
+declare class SnyNumberInputComponent implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<number>;
+    readonly min: _angular_core.InputSignal<number | null>;
+    readonly max: _angular_core.InputSignal<number | null>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<NumberInputSize>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly inputValue: _angular_core.WritableSignal<string>;
+    private readonly _disabledByCva;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly atMin: _angular_core.Signal<boolean>;
+    readonly atMax: _angular_core.Signal<boolean>;
+    readonly containerClass: _angular_core.Signal<string>;
+    private _onChange;
+    private _onTouched;
+    constructor();
+    writeValue(val: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    increment(): void;
+    decrement(): void;
+    onInput(event: Event): void;
+    commitValue(): void;
+    onKeydown(event: KeyboardEvent): void;
+    private setValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyNumberInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyNumberInputComponent, "sny-number-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+interface AvatarGroupItem {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+}
+type AvatarGroupSize = 'sm' | 'md' | 'lg';
+type AvatarGroupSpacing = 'tight' | 'normal';
+declare class SnyAvatarGroupComponent {
+    readonly items: _angular_core.InputSignal<AvatarGroupItem[]>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<AvatarGroupSize>;
+    readonly spacing: _angular_core.InputSignal<AvatarGroupSpacing>;
+    readonly visibleItems: _angular_core.Signal<AvatarGroupItem[]>;
+    readonly overflowCount: _angular_core.Signal<number>;
+    readonly containerClass: _angular_core.Signal<string>;
+    readonly avatarClass: _angular_core.Signal<string>;
+    readonly fallbackClass: _angular_core.Signal<string>;
+    readonly counterClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyAvatarGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyAvatarGroupComponent, "sny-avatar-group", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const tagInputContainerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tagVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TagInputSize = 'sm' | 'md' | 'lg';
+
+declare class SnyTagInputComponent implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<string[]>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly maxTags: _angular_core.InputSignal<number | null>;
+    readonly allowDuplicates: _angular_core.InputSignal<boolean>;
+    readonly removable: _angular_core.InputSignal<boolean>;
+    readonly addOnBlur: _angular_core.InputSignal<boolean>;
+    readonly separators: _angular_core.InputSignal<string[]>;
+    readonly validate: _angular_core.InputSignal<((tag: string) => boolean) | null>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<TagInputSize>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly tagAdded: _angular_core.OutputEmitterRef<string>;
+    readonly tagRemoved: _angular_core.OutputEmitterRef<string>;
+    readonly inputValue: _angular_core.WritableSignal<string>;
+    private readonly _disabledByCva;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly atMax: _angular_core.Signal<boolean>;
+    readonly containerClass: _angular_core.Signal<string>;
+    readonly tagClass: _angular_core.Signal<string>;
+    private readonly inputRef;
+    private _onChange;
+    private _onTouched;
+    writeValue(val: string[]): void;
+    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    focusInput(): void;
+    onInput(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    onBlur(): void;
+    addTag(raw: string): void;
+    removeTag(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyTagInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyTagInputComponent, "sny-tag-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "addOnBlur": { "alias": "addOnBlur"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "tagAdded": "tagAdded"; "tagRemoved": "tagRemoved"; }, never, never, true, never>;
+}
+
+declare const SNY_POPOVER: InjectionToken<SnyPopoverDirective>;
+declare class SnyPopoverDirective implements OnDestroy {
+    private readonly elRef;
+    readonly matchWidth: _angular_core.InputSignal<boolean>;
+    readonly offset: _angular_core.InputSignal<number>;
+    readonly closeOnOutside: _angular_core.InputSignal<boolean>;
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly triggerEl: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly panelEl: _angular_core.WritableSignal<HTMLElement | null>;
+    private scrollHandler;
+    private resizeHandler;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    updatePosition(): void;
+    private addListeners;
+    private removeListeners;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyPopoverDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SnyPopoverDirective, "[snyPopover]", ["snyPopover"], { "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "closeOnOutside": { "alias": "closeOnOutside"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class SnyPopoverTriggerDirective {
+    protected readonly popover: SnyPopoverDirective;
+    private readonly elRef;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyPopoverTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SnyPopoverTriggerDirective, "[snyPopoverTrigger]", never, {}, {}, never, never, true, never>;
+}
+declare class SnyPopoverContentDirective {
+    protected readonly popover: SnyPopoverDirective;
+    private readonly elRef;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly computedClass: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyPopoverContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SnyPopoverContentDirective, "[snyPopoverContent]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type ValidatorHintVariant = 'error' | 'success' | 'warning' | 'info';
 declare class SnyValidatorDirective {
     readonly control: _angular_core.InputSignal<AbstractControl<any, any, any> | null>;
@@ -2019,5 +2164,5 @@ declare class SnyValidatorHintDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SnyValidatorHintDirective, "[snyValidatorHint]", never, { "when": { "alias": "when"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyBulkActionsDefDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyCellDefDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyColorPickerComponent, SnyComboboxComponent, SnyCommandPaletteComponent, SnyCommandPaletteService, SnyDataTableComponent, SnyDatePickerComponent, SnyDateRangePickerComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyOtpInputComponent, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, colorPickerTriggerVariants, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, formatColor, hexToRgb, hslToRgb, hsvToRgb, inputVariants, isValidColor, kbdVariants, labelVariants, linkVariants, loaderVariants, otpCellVariants, paginationItemVariants, parseColor, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, rgbToHex, rgbToHsl, rgbToHsv, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
-export type { AlertVariant, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, ButtonGroupOrientation, ButtonSize, ButtonVariant, CalendarDay, CalendarMode, CardPadding, CardVariant, ChatBubbleAlign, ChatBubbleContentVariant, CheckboxSize, ColorFormat, ColorPickerPreset, ColorPickerSize, ComboboxOption, ComboboxSize, Command, CommandGroup, CommandPaletteConfig, DataTableColumn, DataTablePaginationConfig, DatePickerPreset, DatePickerSize, DateRange, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, HSL, HSV, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, OtpInputSize, OtpInputType, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, RGB, RadialProgressSize, RadialProgressVariant, RadioSize, RatingSize, RatingVariant, SelectOption, SelectSize, SheetSide, SkeletonSize, SkeletonVariant, SliderSize, SnyDialogConfig, SnySheetConfig, SonnyConfig, SortDirection, SortState, StatDescriptionVariant, StatusSize, StatusVariant, StepStatus, StepsOrientation, StepsSize, SwitchSize, TableDensity, TableVariant, TextareaResize, TextareaSize, TextareaVariant, Theme, TimelineConnect, TimelineMiddleVariant, TimelineOrientation, ToastAction, ToastConfig, ToastData, ToastPosition, ToastVariant, ToggleSize, ToggleVariant, TooltipPosition, ValidatorHintVariant };
+export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_POPOVER, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyAvatarGroupComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyBulkActionsDefDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyCellDefDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyColorPickerComponent, SnyComboboxComponent, SnyCommandPaletteComponent, SnyCommandPaletteService, SnyDataTableComponent, SnyDatePickerComponent, SnyDateRangePickerComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyNumberInputComponent, SnyOtpInputComponent, SnyPaginationComponent, SnyPopoverContentDirective, SnyPopoverDirective, SnyPopoverTriggerDirective, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTagInputComponent, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, colorPickerTriggerVariants, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, formatColor, hexToRgb, hslToRgb, hsvToRgb, inputVariants, isValidColor, kbdVariants, labelVariants, linkVariants, loaderVariants, numberInputVariants, otpCellVariants, paginationItemVariants, parseColor, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, rgbToHex, rgbToHsl, rgbToHsv, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, tagInputContainerVariants, tagVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
+export type { AlertVariant, AvatarGroupItem, AvatarGroupSize, AvatarGroupSpacing, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, ButtonGroupOrientation, ButtonSize, ButtonVariant, CalendarDay, CalendarMode, CardPadding, CardVariant, ChatBubbleAlign, ChatBubbleContentVariant, CheckboxSize, ColorFormat, ColorPickerPreset, ColorPickerSize, ComboboxOption, ComboboxSize, Command, CommandGroup, CommandPaletteConfig, DataTableColumn, DataTablePaginationConfig, DatePickerPreset, DatePickerSize, DateRange, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, HSL, HSV, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, NumberInputSize, OtpInputSize, OtpInputType, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, RGB, RadialProgressSize, RadialProgressVariant, RadioSize, RatingSize, RatingVariant, SelectOption, SelectSize, SheetSide, SkeletonSize, SkeletonVariant, SliderSize, SnyDialogConfig, SnySheetConfig, SonnyConfig, SortDirection, SortState, StatDescriptionVariant, StatusSize, StatusVariant, StepStatus, StepsOrientation, StepsSize, SwitchSize, TableDensity, TableVariant, TagInputSize, TextareaResize, TextareaSize, TextareaVariant, Theme, TimelineConnect, TimelineMiddleVariant, TimelineOrientation, ToastAction, ToastConfig, ToastData, ToastPosition, ToastVariant, ToggleSize, ToggleVariant, TooltipPosition, ValidatorHintVariant };