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

package/fesm2022/sonny-ui-core.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, TemplateRef, output, contentChildren, contentChild, effect, untracked, Injector, afterNextRender, Renderer2 } from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, TemplateRef, output, contentChildren, contentChild, effect, untracked, Injector, afterNextRender, Renderer2, linkedSignal } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -5839,20 +5839,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class SnyCalendarComponent {
+    // Existing inputs (backwards compatible)
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    // Range mode inputs
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    rangeValue = model(null, ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
+    showNavigation = input(true, ...(ngDevMode ? [{ debugName: "showNavigation" }] : /* istanbul ignore next */ []));
+    initialViewDate = input(undefined, ...(ngDevMode ? [{ debugName: "initialViewDate" }] : /* istanbul ignore next */ []));
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => this.borderless()
+        ? 'inline-block p-3 bg-background'
+        : 'inline-block p-4 rounded-md border border-border bg-background', ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    // Internal state
     _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
-    viewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    viewDate = linkedSignal(() => this.initialViewDate() ?? new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
     weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    // CVA
     _onChange = () => { };
     onTouched = () => { };
     writeValue(val) {
-        this.value.set(val ?? null);
-        if (val) {
-            this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+        if (this.mode() === 'range') {
+            this.rangeValue.set(val ?? null);
+            const range = val;
+            if (range?.start) {
+                this.viewDate.set(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+            }
+        }
+        else {
+            this.value.set(val ?? null);
+            if (val) {
+                const d = val;
+                this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+            }
         }
     }
     registerOnChange(fn) {
@@ -5864,6 +5887,7 @@ class SnyCalendarComponent {
     setDisabledState(isDisabled) {
         this._disabledByCva.set(isDisabled);
     }
+    // Computed
     monthYearLabel = computed(() => {
         const d = this.viewDate();
         return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
@@ -5874,6 +5898,8 @@ class SnyCalendarComponent {
         const month = view.getMonth();
         const today = new Date();
         const selected = this.value();
+        const rangeVal = this.mode() === 'range' ? this.rangeValue() : null;
+        const hovered = this.hoveredDate();
         const minDate = this.min();
         const maxDate = this.max();
         const firstDay = new Date(year, month, 1);
@@ -5881,37 +5907,64 @@ class SnyCalendarComponent {
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
         const days = [];
-        // Previous month
         for (let i = startDay - 1; i >= 0; i--) {
             const date = new Date(year, month - 1, daysInPrevMonth - i);
-            days.push(this.createDay(date, false, today, selected, minDate, maxDate));
+            days.push(this.createDay(date, false, today, selected, rangeVal, hovered, minDate, maxDate));
         }
-        // Current month
         for (let d = 1; d <= daysInMonth; d++) {
             const date = new Date(year, month, d);
-            days.push(this.createDay(date, true, today, selected, minDate, maxDate));
+            days.push(this.createDay(date, true, today, selected, rangeVal, hovered, minDate, maxDate));
         }
-        // Next month fill
         const remaining = 42 - days.length;
         for (let d = 1; d <= remaining; d++) {
             const date = new Date(year, month + 1, d);
-            days.push(this.createDay(date, false, today, selected, minDate, maxDate));
+            days.push(this.createDay(date, false, today, selected, rangeVal, hovered, minDate, maxDate));
         }
         return days;
     }, ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    // Navigation
     prevMonth() {
-        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+        this.viewDate.set(new Date(this.viewDate().getFullYear(), this.viewDate().getMonth() - 1, 1));
     }
     nextMonth() {
-        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+        this.viewDate.set(new Date(this.viewDate().getFullYear(), this.viewDate().getMonth() + 1, 1));
     }
-    selectDate(date) {
-        this.value.set(date);
-        this._onChange(date);
+    // Click handler
+    onDayClick(date) {
+        if (this.mode() === 'single') {
+            this.value.set(date);
+            this._onChange(date);
+            this.onTouched();
+            return;
+        }
+        // Range mode
+        const current = this.rangeValue();
+        if (!current?.start || (current.start && current.end)) {
+            this.rangeValue.set({ start: date, end: null });
+        }
+        else {
+            const start = current.start;
+            if (date < start) {
+                this.rangeValue.set({ start: date, end: start });
+            }
+            else if (this.isSameDay(date, start)) {
+                this.rangeValue.set({ start: date, end: date });
+            }
+            else {
+                this.rangeValue.set({ start, end: date });
+            }
+        }
+        this._onChange(this.rangeValue());
         this.onTouched();
     }
+    // Hover handler
+    onDayHover(date) {
+        if (this.mode() === 'range') {
+            this.hoveredDate.set(date);
+        }
+    }
+    // Keyboard
     onKeydown(event) {
-        // Simplified keyboard navigation
         switch (event.key) {
             case 'ArrowLeft':
                 event.preventDefault();
@@ -5931,9 +5984,29 @@ class SnyCalendarComponent {
                 break;
         }
     }
+    // Styling
     dayClass(day) {
-        return cn('inline-flex items-center justify-center rounded-md text-sm h-8 w-8 transition-colors', day.isCurrentMonth ? 'text-foreground' : 'text-muted-foreground/50', day.isToday && !day.isSelected && 'bg-accent font-bold', day.isSelected && 'bg-primary text-primary-foreground', day.isDisabled && 'opacity-50 cursor-not-allowed', !day.isDisabled && !day.isSelected && 'hover:bg-accent cursor-pointer');
-    }
+        const isEndpoint = day.isRangeStart || day.isRangeEnd;
+        return cn('inline-flex items-center justify-center text-sm h-9 w-9 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 
+        // Shape
+        day.isRangeStart && !day.isRangeEnd ? 'rounded-l-md rounded-r-none' :
+            day.isRangeEnd && !day.isRangeStart ? 'rounded-r-md rounded-l-none' :
+                day.isInRange || day.isRangePreview ? 'rounded-none' :
+                    'rounded-md', 
+        // Base text color
+        !day.isCurrentMonth && 'text-muted-foreground/40', day.isCurrentMonth && !day.isSelected && !isEndpoint && 'text-foreground', 
+        // Today indicator
+        day.isToday && !day.isSelected && !isEndpoint && 'bg-accent text-accent-foreground font-semibold', 
+        // Single selected
+        day.isSelected && this.mode() === 'single' && 'bg-primary text-primary-foreground font-semibold shadow-sm', 
+        // Range endpoints
+        isEndpoint && 'bg-primary text-primary-foreground font-semibold shadow-sm', 
+        // Range band
+        day.isInRange && 'bg-primary/10 text-foreground', day.isRangePreview && 'bg-primary/5 text-foreground', 
+        // States
+        day.isDisabled && 'opacity-40 cursor-not-allowed pointer-events-none', !day.isDisabled && !day.isSelected && !isEndpoint && 'hover:bg-accent hover:text-accent-foreground cursor-pointer');
+    }
+    // Private helpers
     navigateDays(offset) {
         const current = this.value() ?? new Date();
         const next = new Date(current);
@@ -5942,12 +6015,41 @@ class SnyCalendarComponent {
         this._onChange(next);
         this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
     }
-    createDay(date, isCurrentMonth, today, selected, minDate, maxDate) {
+    createDay(date, isCurrentMonth, today, selected, rangeVal, hoveredDate, minDate, maxDate) {
         const isToday = this.isSameDay(date, today);
         const isSelected = selected ? this.isSameDay(date, selected) : false;
         const isDisabled = this._disabledByCva() ||
-            (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
-        return { date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled };
+            (minDate ? date < minDate : false) ||
+            (maxDate ? date > maxDate : false);
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+        let isRangePreview = false;
+        if (rangeVal) {
+            const { start, end } = rangeVal;
+            if (start)
+                isRangeStart = this.isSameDay(date, start);
+            if (end)
+                isRangeEnd = this.isSameDay(date, end);
+            if (start && end) {
+                isInRange = date > start && date < end && !isRangeStart && !isRangeEnd;
+            }
+            // Preview: start set, no end yet, user hovering
+            if (start && !end && hoveredDate && !this.isSameDay(hoveredDate, start)) {
+                const previewStart = hoveredDate > start ? start : hoveredDate;
+                const previewEnd = hoveredDate > start ? hoveredDate : start;
+                if (date > previewStart && date < previewEnd) {
+                    isRangePreview = true;
+                }
+                if (this.isSameDay(date, hoveredDate) && !isRangeStart) {
+                    isRangePreview = true;
+                }
+            }
+        }
+        return {
+            date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled,
+            isRangeStart, isRangeEnd, isInRange, isRangePreview,
+        };
     }
     isSameDay(a, b) {
         return (a.getFullYear() === b.getFullYear() &&
@@ -5955,39 +6057,48 @@ class SnyCalendarComponent {
             a.getDate() === b.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyCalendarComponent, isStandalone: true, selector: "sny-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "\"inline-block p-3 rounded-md border bg-background\"" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyCalendarComponent, isStandalone: true, selector: "sny-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, initialViewDate: { classPropertyName: "initialViewDate", publicName: "initialViewDate", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange" }, host: { attributes: { "role": "application", "aria-label": "Calendar" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "hostClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
         ], ngImport: i0, template: `
-    <div class="flex items-center justify-between mb-4">
-      <button
-        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
-        (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"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-      <span class="text-sm font-medium">{{ monthYearLabel() }}</span>
-      <button
-        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
-        (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"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
+    @if (showNavigation()) {
+      <div class="flex items-center justify-between mb-3">
+        <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">{{ monthYearLabel() }}</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>
+    }
 
-    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+    <div role="grid" class="grid grid-cols-7 gap-1">
       @for (dayName of weekDays; track dayName) {
-        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+        <div class="text-center text-xs text-muted-foreground font-medium h-9 flex items-center justify-center" role="columnheader">{{ dayName }}</div>
       }
       @for (day of days(); track day.date.getTime()) {
         <button
+          type="button"
           [class]="dayClass(day)"
           [disabled]="day.isDisabled"
-          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-selected]="day.isSelected || day.isRangeStart || day.isRangeEnd || null"
           [attr.aria-current]="day.isToday ? 'date' : null"
           [attr.aria-disabled]="day.isDisabled || null"
-          (click)="selectDate(day.date)"
+          [attr.aria-label]="day.date.toLocaleDateString(locale(), { month: 'long', day: 'numeric', year: 'numeric' })"
+          role="gridcell"
+          (click)="onDayClick(day.date)"
+          (mouseenter)="onDayHover(day.date)"
+          (mouseleave)="onDayHover(null)"
         >
           {{ day.day }}
         </button>
@@ -6002,43 +6113,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '[class]': '"inline-block p-3 rounded-md border bg-background"',
+                        '[class]': 'hostClass()',
                         '(keydown)': 'onKeydown($event)',
+                        'role': 'application',
+                        'aria-label': 'Calendar',
                     },
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
                     ],
                     template: `
-    <div class="flex items-center justify-between mb-4">
-      <button
-        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
-        (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"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-      <span class="text-sm font-medium">{{ monthYearLabel() }}</span>
-      <button
-        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
-        (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"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
+    @if (showNavigation()) {
+      <div class="flex items-center justify-between mb-3">
+        <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">{{ monthYearLabel() }}</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>
+    }
 
-    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+    <div role="grid" class="grid grid-cols-7 gap-1">
       @for (dayName of weekDays; track dayName) {
-        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+        <div class="text-center text-xs text-muted-foreground font-medium h-9 flex items-center justify-center" role="columnheader">{{ dayName }}</div>
       }
       @for (day of days(); track day.date.getTime()) {
         <button
+          type="button"
           [class]="dayClass(day)"
           [disabled]="day.isDisabled"
-          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-selected]="day.isSelected || day.isRangeStart || day.isRangeEnd || null"
           [attr.aria-current]="day.isToday ? 'date' : null"
           [attr.aria-disabled]="day.isDisabled || null"
-          (click)="selectDate(day.date)"
+          [attr.aria-label]="day.date.toLocaleDateString(locale(), { month: 'long', day: 'numeric', year: 'numeric' })"
+          role="gridcell"
+          (click)="onDayClick(day.date)"
+          (mouseenter)="onDayHover(day.date)"
+          (mouseleave)="onDayHover(null)"
         >
           {{ day.day }}
         </button>
@@ -6046,7 +6168,687 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], initialViewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialViewDate", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }] } });
+
+const datePickerTriggerVariants = cva('inline-flex w-full items-center justify-between whitespace-nowrap rounded-sm border border-border bg-background px-3 py-2 text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+    variants: {
+        size: {
+            sm: 'h-9 text-xs',
+            md: 'h-10 text-sm',
+            lg: 'h-11 text-base',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+
+class SnyDatePickerComponent {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    dateFormat = input({
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }, ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    dropdownRef = viewChild('dropdownEl', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    scrollHandler = null;
+    resizeHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    // CVA
+    writeValue(val) {
+        this.value.set(val ?? null);
+        this.internalValue.set(val ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Display
+    displayValue = computed(() => {
+        const d = this.value();
+        if (!d)
+            return '';
+        return d.toLocaleDateString(this.locale(), this.dateFormat());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => cn(datePickerTriggerVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    // Actions
+    onDateSelected(date) {
+        this.value.set(date);
+        this._onChange(date);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.internalValue.set(null);
+        this._onChange(null);
+    }
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.internalValue.set(this.value());
+            this.updateDropdownPosition();
+            this.open.set(true);
+            this.addGlobalListeners();
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
+    close() {
+        this.open.set(false);
+        this.removeGlobalListeners();
+    }
+    // Positioning (combobox pattern)
+    updateDropdownPosition() {
+        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`;
+        }
+    }
+    addGlobalListeners() {
+        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 });
+    }
+    removeGlobalListeners() {
+        if (this.scrollHandler) {
+            document.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    ngOnDestroy() {
+        this.removeGlobalListeners();
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDatePickerComponent, isStandalone: true, selector: "sny-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, 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()) {
+          <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"
+          >
+            <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"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <sny-calendar
+          [(value)]="internalValue"
+          [min]="min()"
+          [max]="max()"
+          [locale]="locale()"
+          (valueChange)="onDateSelected($event)"
+        />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SnyCalendarComponent, selector: "sny-calendar", inputs: ["value", "min", "max", "locale", "class", "mode", "rangeValue", "showNavigation", "initialViewDate", "borderless"], outputs: ["valueChange", "rangeValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-date-picker',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SnyCalendarComponent],
+                    host: { class: 'relative inline-block w-full' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), 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()) {
+          <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"
+          >
+            <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"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <sny-calendar
+          [(value)]="internalValue"
+          [min]="min()"
+          [max]="max()"
+          [locale]="locale()"
+          (valueChange)="onDateSelected($event)"
+        />
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+class SnyDateRangePickerComponent {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date range...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    dateFormat = input({
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }, ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    separator = input(' \u2014 ', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    dualCalendar = input(false, ...(ngDevMode ? [{ debugName: "dualCalendar" }] : /* istanbul ignore next */ []));
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    internalRange = signal(null, ...(ngDevMode ? [{ debugName: "internalRange" }] : /* istanbul ignore next */ []));
+    leftViewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "leftViewDate" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    dropdownRef = viewChild('dropdownEl', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    scrollHandler = null;
+    resizeHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    // Computed
+    rightViewDate = computed(() => {
+        const d = this.leftViewDate();
+        return new Date(d.getFullYear(), d.getMonth() + 1, 1);
+    }, ...(ngDevMode ? [{ debugName: "rightViewDate" }] : /* istanbul ignore next */ []));
+    leftMonthLabel = computed(() => this.leftViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' }), ...(ngDevMode ? [{ debugName: "leftMonthLabel" }] : /* istanbul ignore next */ []));
+    rightMonthLabel = computed(() => this.rightViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' }), ...(ngDevMode ? [{ debugName: "rightMonthLabel" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const r = this.value();
+        if (!r?.start)
+            return '';
+        const fmt = (d) => d.toLocaleDateString(this.locale(), this.dateFormat());
+        if (!r.end)
+            return fmt(r.start) + this.separator() + '...';
+        return fmt(r.start) + this.separator() + fmt(r.end);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => cn(datePickerTriggerVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    // CVA
+    writeValue(val) {
+        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) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Actions
+    onRangeChanged(range) {
+        this.internalRange.set(range);
+        if (range?.start && range?.end) {
+            this.value.set(range);
+            this._onChange(range);
+            setTimeout(() => this.close(), 150);
+        }
+    }
+    selectPreset(preset) {
+        this.value.set(preset.range);
+        this.internalRange.set(preset.range);
+        this._onChange(preset.range);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.internalRange.set(null);
+        this._onChange(null);
+    }
+    prevMonth() {
+        this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+    }
+    nextMonth() {
+        this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+    }
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.internalRange.set(this.value());
+            this.updateDropdownPosition();
+            this.open.set(true);
+            this.addGlobalListeners();
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
+    close() {
+        this.open.set(false);
+        this.removeGlobalListeners();
+    }
+    // Positioning
+    updateDropdownPosition() {
+        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`;
+        }
+    }
+    addGlobalListeners() {
+        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 });
+    }
+    removeGlobalListeners() {
+        if (this.scrollHandler) {
+            document.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    ngOnDestroy() {
+        this.removeGlobalListeners();
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDateRangePickerComponent, isStandalone: true, selector: "sny-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, dualCalendar: { classPropertyName: "dualCalendar", publicName: "dualCalendar", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, 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>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SnyCalendarComponent, selector: "sny-calendar", inputs: ["value", "min", "max", "locale", "class", "mode", "rangeValue", "showNavigation", "initialViewDate", "borderless"], outputs: ["valueChange", "rangeValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], dualCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualCalendar", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
 
 class SnyValidatorDirective {
     control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
@@ -6107,5 +6909,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=sonny-ui-core.mjs.map