@sonny-ui/core 0.1.0-alpha.14 → 0.1.0-alpha.15

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

@@ -0,0 +1,340 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  HostListener,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { SnyCalendarComponent } from '../calendar/calendar.component';
+import type { DateRange, DatePickerPreset } from '../calendar/calendar.types';
+import { datePickerTriggerVariants, type DatePickerSize } from '../date-picker/date-picker.variants';
+
+@Component({
+  selector: 'sny-date-range-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SnyCalendarComponent],
+  host: { class: 'relative inline-block w-full' },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), multi: true },
+  ],
+  template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()?.start) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date range"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
+        }
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date range"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <div class="flex flex-col sm:flex-row">
+          <!-- Presets sidebar -->
+          @if (presets().length > 0) {
+            <div class="border-b sm:border-b-0 sm:border-r border-border p-3 space-y-0.5 sm:min-w-[150px]">
+              <p class="px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Presets</p>
+              @for (preset of presets(); track preset.label) {
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 text-sm rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                  (mousedown)="selectPreset(preset); $event.preventDefault()"
+                >
+                  {{ preset.label }}
+                </button>
+              }
+            </div>
+          }
+
+          <!-- Calendar(s) -->
+          <div class="flex flex-col sm:flex-row">
+            @if (dualCalendar()) {
+              <!-- Left calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="prevMonth()"
+                    aria-label="Previous month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                  </button>
+                  <span class="text-sm font-semibold tracking-tight">{{ leftMonthLabel() }}</span>
+                  <div class="w-8"></div>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="leftViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+              <div class="border-t sm:border-t-0 sm:border-l border-border"></div>
+              <!-- Right calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <div class="w-8"></div>
+                  <span class="text-sm font-semibold tracking-tight">{{ rightMonthLabel() }}</span>
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="nextMonth()"
+                    aria-label="Next month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="rightViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+            } @else {
+              <!-- Single calendar -->
+              <sny-calendar
+                mode="range"
+                [(rangeValue)]="internalRange"
+                [min]="min()"
+                [max]="max()"
+                [locale]="locale()"
+                (rangeValueChange)="onRangeChanged($event)"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class SnyDateRangePickerComponent implements ControlValueAccessor, OnDestroy {
+  readonly value = model<DateRange | null>(null);
+  readonly placeholder = input('Pick a date range...');
+  readonly size = input<DatePickerSize>('md');
+  readonly locale = input('en-US');
+  readonly dateFormat = input<Intl.DateTimeFormatOptions>({
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+  readonly separator = input(' \u2014 ');
+  readonly dualCalendar = input(false);
+  readonly presets = input<DatePickerPreset[]>([]);
+  readonly min = input<Date | undefined>(undefined);
+  readonly max = input<Date | undefined>(undefined);
+  readonly clearable = input(true);
+  readonly disabled = input(false);
+  readonly class = input<string>('');
+
+  readonly open = signal(false);
+  readonly internalRange = signal<DateRange | null>(null);
+  readonly leftViewDate = signal(new Date());
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private readonly triggerRef = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+  private readonly dropdownRef = viewChild<ElementRef<HTMLDivElement>>('dropdownEl');
+  private readonly elRef = inject(ElementRef);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  private _onChange: (value: DateRange | null) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  // Computed
+  readonly rightViewDate = computed(() => {
+    const d = this.leftViewDate();
+    return new Date(d.getFullYear(), d.getMonth() + 1, 1);
+  });
+
+  readonly leftMonthLabel = computed(() =>
+    this.leftViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' })
+  );
+
+  readonly rightMonthLabel = computed(() =>
+    this.rightViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' })
+  );
+
+  readonly displayValue = computed(() => {
+    const r = this.value();
+    if (!r?.start) return '';
+    const fmt = (d: Date) => d.toLocaleDateString(this.locale(), this.dateFormat());
+    if (!r.end) return fmt(r.start) + this.separator() + '...';
+    return fmt(r.start) + this.separator() + fmt(r.end);
+  });
+
+  protected readonly triggerClass = computed(() =>
+    cn(datePickerTriggerVariants({ size: this.size() }), this.class())
+  );
+
+  // CVA
+  writeValue(val: DateRange | null): void {
+    this.value.set(val ?? null);
+    this.internalRange.set(val ?? null);
+    if (val?.start) {
+      this.leftViewDate.set(new Date(val.start.getFullYear(), val.start.getMonth(), 1));
+    }
+  }
+
+  registerOnChange(fn: (value: DateRange | null) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  // Actions
+  onRangeChanged(range: DateRange | null): void {
+    this.internalRange.set(range);
+    if (range?.start && range?.end) {
+      this.value.set(range);
+      this._onChange(range);
+      setTimeout(() => this.close(), 150);
+    }
+  }
+
+  selectPreset(preset: DatePickerPreset): void {
+    this.value.set(preset.range);
+    this.internalRange.set(preset.range);
+    this._onChange(preset.range);
+    this.close();
+  }
+
+  clear(event: Event): void {
+    event.stopPropagation();
+    this.value.set(null);
+    this.internalRange.set(null);
+    this._onChange(null);
+  }
+
+  prevMonth(): void {
+    this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  }
+
+  nextMonth(): void {
+    this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+  }
+
+  toggle(): void {
+    if (this.open()) {
+      this.close();
+    } else {
+      this.internalRange.set(this.value());
+      this.updateDropdownPosition();
+      this.open.set(true);
+      this.addGlobalListeners();
+      setTimeout(() => this.updateDropdownPosition());
+    }
+  }
+
+  close(): void {
+    this.open.set(false);
+    this.removeGlobalListeners();
+  }
+
+  // Positioning
+  private updateDropdownPosition(): void {
+    const trigger = this.triggerRef()?.nativeElement;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const dropdown = this.dropdownRef()?.nativeElement;
+    if (dropdown) {
+      dropdown.style.top = `${rect.bottom + 4}px`;
+      dropdown.style.left = `${rect.left}px`;
+    }
+  }
+
+  private addGlobalListeners(): void {
+    this.removeGlobalListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updateDropdownPosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeGlobalListeners(): void {
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler, { capture: true } as EventListenerOptions);
+      this.scrollHandler = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
+
+  ngOnDestroy(): void {
+    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/index.ts

@@ -0,0 +1 @@
+export { SnyDateRangePickerComponent } from './date-range-picker.component';

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

@@ -1636,6 +1636,10 @@ declare class SnyLinkDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SnyLinkDirective, "a[snyLink]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
 interface CalendarDay {
     date: Date;
     day: number;
@@ -1643,34 +1647,151 @@ interface CalendarDay {
     isToday: boolean;
     isSelected: boolean;
     isDisabled: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+    isRangePreview: boolean;
+}
+type CalendarMode = 'single' | 'range';
+interface DatePickerPreset {
+    label: string;
+    range: DateRange;
 }
+
 declare class SnyCalendarComponent implements ControlValueAccessor {
     readonly value: _angular_core.ModelSignal<Date | null>;
     readonly min: _angular_core.InputSignal<Date | undefined>;
     readonly max: _angular_core.InputSignal<Date | undefined>;
     readonly locale: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
+    readonly mode: _angular_core.InputSignal<CalendarMode>;
+    readonly rangeValue: _angular_core.ModelSignal<DateRange | null>;
+    readonly showNavigation: _angular_core.InputSignal<boolean>;
+    readonly initialViewDate: _angular_core.InputSignal<Date | undefined>;
+    readonly borderless: _angular_core.InputSignal<boolean>;
+    readonly hostClass: _angular_core.Signal<"inline-block p-3 bg-background" | "inline-block p-4 rounded-md border border-border bg-background">;
     private readonly _disabledByCva;
+    readonly hoveredDate: _angular_core.WritableSignal<Date | null>;
     readonly viewDate: _angular_core.WritableSignal<Date>;
     readonly weekDays: string[];
     private _onChange;
     protected onTouched: () => void;
-    writeValue(val: Date | null): void;
-    registerOnChange(fn: (value: Date | null) => void): void;
+    writeValue(val: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     readonly monthYearLabel: _angular_core.Signal<string>;
     readonly days: _angular_core.Signal<CalendarDay[]>;
     prevMonth(): void;
     nextMonth(): void;
-    selectDate(date: Date): void;
+    onDayClick(date: Date): void;
+    onDayHover(date: Date | null): void;
     onKeydown(event: KeyboardEvent): void;
     dayClass(day: CalendarDay): string;
     private navigateDays;
     private createDay;
     private isSameDay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyCalendarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyCalendarComponent, "sny-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyCalendarComponent, "sny-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "rangeValue": { "alias": "rangeValue"; "required": false; "isSignal": true; }; "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "initialViewDate": { "alias": "initialViewDate"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "rangeValue": "rangeValueChange"; }, never, never, true, never>;
+}
+
+declare const datePickerTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DatePickerSize = 'sm' | 'md' | 'lg';
+
+declare class SnyDatePickerComponent implements ControlValueAccessor, OnDestroy {
+    readonly value: _angular_core.ModelSignal<Date | null>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<DatePickerSize>;
+    readonly locale: _angular_core.InputSignal<string>;
+    readonly dateFormat: _angular_core.InputSignal<Intl.DateTimeFormatOptions>;
+    readonly min: _angular_core.InputSignal<Date | undefined>;
+    readonly max: _angular_core.InputSignal<Date | undefined>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    readonly internalValue: _angular_core.WritableSignal<Date | null>;
+    private readonly _disabledByCva;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private readonly triggerRef;
+    private readonly dropdownRef;
+    private readonly elRef;
+    private scrollHandler;
+    private resizeHandler;
+    private _onChange;
+    protected onTouched: () => void;
+    writeValue(val: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    readonly displayValue: _angular_core.Signal<string>;
+    protected readonly triggerClass: _angular_core.Signal<string>;
+    onDateSelected(date: Date | null): void;
+    clear(event: Event): void;
+    toggle(): void;
+    close(): void;
+    private updateDropdownPosition;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    ngOnDestroy(): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyDatePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyDatePickerComponent, "sny-date-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class SnyDateRangePickerComponent implements ControlValueAccessor, OnDestroy {
+    readonly value: _angular_core.ModelSignal<DateRange | null>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<DatePickerSize>;
+    readonly locale: _angular_core.InputSignal<string>;
+    readonly dateFormat: _angular_core.InputSignal<Intl.DateTimeFormatOptions>;
+    readonly separator: _angular_core.InputSignal<string>;
+    readonly dualCalendar: _angular_core.InputSignal<boolean>;
+    readonly presets: _angular_core.InputSignal<DatePickerPreset[]>;
+    readonly min: _angular_core.InputSignal<Date | undefined>;
+    readonly max: _angular_core.InputSignal<Date | undefined>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    readonly internalRange: _angular_core.WritableSignal<DateRange | null>;
+    readonly leftViewDate: _angular_core.WritableSignal<Date>;
+    private readonly _disabledByCva;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private readonly triggerRef;
+    private readonly dropdownRef;
+    private readonly elRef;
+    private scrollHandler;
+    private resizeHandler;
+    private _onChange;
+    protected onTouched: () => void;
+    readonly rightViewDate: _angular_core.Signal<Date>;
+    readonly leftMonthLabel: _angular_core.Signal<string>;
+    readonly rightMonthLabel: _angular_core.Signal<string>;
+    readonly displayValue: _angular_core.Signal<string>;
+    protected readonly triggerClass: _angular_core.Signal<string>;
+    writeValue(val: DateRange | null): void;
+    registerOnChange(fn: (value: DateRange | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onRangeChanged(range: DateRange | null): void;
+    selectPreset(preset: DatePickerPreset): void;
+    clear(event: Event): void;
+    prevMonth(): void;
+    nextMonth(): void;
+    toggle(): void;
+    close(): void;
+    private updateDropdownPosition;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    ngOnDestroy(): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnyDateRangePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SnyDateRangePickerComponent, "sny-date-range-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "dualCalendar": { "alias": "dualCalendar"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 type ValidatorHintVariant = 'error' | 'success' | 'warning' | 'info';
@@ -1695,5 +1816,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, SnyComboboxComponent, SnyDataTableComponent, 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, 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, comboboxTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
-export type { AlertVariant, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, ButtonGroupOrientation, ButtonSize, ButtonVariant, CardPadding, CardVariant, ChatBubbleAlign, ChatBubbleContentVariant, CheckboxSize, ComboboxOption, ComboboxSize, DataTableColumn, DataTablePaginationConfig, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, 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_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, SnyComboboxComponent, 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, 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, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, 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, ComboboxOption, ComboboxSize, DataTableColumn, DataTablePaginationConfig, DatePickerPreset, DatePickerSize, DateRange, DividerOrientation, DividerVariant, DockPosition, DrawerSide, DropdownItemVariant, FabDirection, FabPosition, FieldsetVariant, FileInputSize, FileInputVariant, IndicatorPosition, IndicatorVariant, InputSize, InputVariant, KbdSize, LinkVariant, ListVariant, LoaderSize, LoaderVariant, NavbarVariant, PaginationSize, PaginationVariant, ProgressSize, ProgressVariant, 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 };