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

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, viewChildren } 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,2074 @@ 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']
+            }] } });
+
+function hexToRgb(hex) {
+    const clean = hex.replace(/^#/, '');
+    if (!/^[0-9a-fA-F]+$/.test(clean))
+        return null;
+    if (clean.length === 3) {
+        const r = parseInt(clean[0] + clean[0], 16);
+        const g = parseInt(clean[1] + clean[1], 16);
+        const b = parseInt(clean[2] + clean[2], 16);
+        return { r, g, b };
+    }
+    if (clean.length === 6) {
+        const r = parseInt(clean.slice(0, 2), 16);
+        const g = parseInt(clean.slice(2, 4), 16);
+        const b = parseInt(clean.slice(4, 6), 16);
+        return { r, g, b };
+    }
+    return null;
+}
+function rgbToHex(rgb) {
+    const toHex = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0');
+    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+function rgbToHsl(rgb) {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100),
+    };
+}
+function hslToRgb(hsl) {
+    const h = hsl.h / 360;
+    const s = hsl.s / 100;
+    const l = hsl.l / 100;
+    if (s === 0) {
+        const v = Math.round(l * 255);
+        return { r: v, g: v, b: v };
+    }
+    const hue2rgb = (p, q, t) => {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return {
+        r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+        g: Math.round(hue2rgb(p, q, h) * 255),
+        b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+    };
+}
+function rgbToHsv(rgb) {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (max !== min) {
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: Math.round(h * 360), s, v };
+}
+function hsvToRgb(hsv) {
+    const h = hsv.h / 360;
+    const s = hsv.s;
+    const v = hsv.v;
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    let r, g, b;
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        default:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+    };
+}
+function parseColor(input) {
+    const trimmed = input.trim().toLowerCase();
+    // HEX
+    if (trimmed.startsWith('#')) {
+        return hexToRgb(trimmed);
+    }
+    // rgb(r, g, b)
+    const rgbMatch = trimmed.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
+    if (rgbMatch) {
+        return {
+            r: Math.min(255, parseInt(rgbMatch[1])),
+            g: Math.min(255, parseInt(rgbMatch[2])),
+            b: Math.min(255, parseInt(rgbMatch[3])),
+        };
+    }
+    // hsl(h, s%, l%)
+    const hslMatch = trimmed.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/);
+    if (hslMatch) {
+        return hslToRgb({
+            h: Math.min(360, parseInt(hslMatch[1])),
+            s: Math.min(100, parseInt(hslMatch[2])),
+            l: Math.min(100, parseInt(hslMatch[3])),
+        });
+    }
+    return null;
+}
+function formatColor(rgb, format, alpha) {
+    switch (format) {
+        case 'hex':
+            return rgbToHex(rgb);
+        case 'rgb':
+            if (alpha !== undefined && alpha < 1) {
+                return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+            }
+            return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+        case 'hsl': {
+            const hsl = rgbToHsl(rgb);
+            if (alpha !== undefined && alpha < 1) {
+                return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+            }
+            return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+        }
+    }
+}
+function isValidColor(input) {
+    return parseColor(input) !== null;
+}
+
+const colorPickerTriggerVariants = cva('inline-flex w-full items-center gap-2 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 SnyColorPickerComponent {
+    // Public API
+    value = model('#000000', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    format = input('hex', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    showInput = input(true, ...(ngDevMode ? [{ debugName: "showInput" }] : /* istanbul ignore next */ []));
+    showEyeDropper = input(true, ...(ngDevMode ? [{ debugName: "showEyeDropper" }] : /* istanbul ignore next */ []));
+    showFavorites = input(false, ...(ngDevMode ? [{ debugName: "showFavorites" }] : /* istanbul ignore next */ []));
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a color...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    colorChange = output();
+    formatChange = output();
+    // Internal state
+    hsv = signal({ h: 0, s: 0, v: 0 }, ...(ngDevMode ? [{ debugName: "hsv" }] : /* istanbul ignore next */ []));
+    currentFormat = signal('hex', ...(ngDevMode ? [{ debugName: "currentFormat" }] : /* istanbul ignore next */ []));
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    favorites = signal([], ...(ngDevMode ? [{ debugName: "favorites" }] : /* istanbul ignore next */ []));
+    copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* 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 */ []));
+    panelRef = viewChild('panelEl', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    satPanelRef = viewChild('satPanel', ...(ngDevMode ? [{ debugName: "satPanelRef" }] : /* istanbul ignore next */ []));
+    hueTrackRef = viewChild('hueTrack', ...(ngDevMode ? [{ debugName: "hueTrackRef" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    moveHandler = null;
+    upHandler = null;
+    scrollHandler = null;
+    resizeHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    hasEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
+    // Computed
+    rgb = computed(() => hsvToRgb(this.hsv()), ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => formatColor(this.rgb(), this.currentFormat()), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    saturationBg = computed(() => `linear-gradient(to right, #fff, hsl(${this.hsv().h}, 100%, 50%))`, ...(ngDevMode ? [{ debugName: "saturationBg" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => cn(colorPickerTriggerVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => this.inline()
+        ? 'inline-block p-3 rounded-md border border-border bg-popover text-popover-foreground w-60'
+        : 'fixed z-50 p-3 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 w-60', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync format input
+        effect(() => {
+            const fmt = this.format();
+            untracked(() => this.currentFormat.set(fmt));
+        });
+        // Sync value → HSV when value changes externally
+        effect(() => {
+            const val = this.value();
+            untracked(() => {
+                const rgb = parseColor(val);
+                if (rgb) {
+                    this.hsv.set(rgbToHsv(rgb));
+                    this.inputValue.set(this.displayValue());
+                }
+            });
+        });
+    }
+    // CVA
+    writeValue(val) {
+        this.value.set(val ?? '#000000');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Emit helper
+    emitColor() {
+        const formatted = this.displayValue();
+        this.value.set(formatted);
+        this.inputValue.set(formatted);
+        this._onChange(formatted);
+        this.colorChange.emit(formatted);
+    }
+    // Saturation panel
+    onSatPanelDown(event) {
+        event.preventDefault();
+        this.updateSatFromPosition(event.clientX, event.clientY);
+        this.startDrag((e) => {
+            const x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+            const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+            this.updateSatFromPosition(x, y);
+        });
+    }
+    onSatPanelTouch(event) {
+        this.updateSatFromPosition(event.touches[0].clientX, event.touches[0].clientY);
+        this.startDrag((e) => {
+            const x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+            const y = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+            this.updateSatFromPosition(x, y);
+        }, true);
+    }
+    updateSatFromPosition(clientX, clientY) {
+        const panel = this.satPanelRef()?.nativeElement;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        const s = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const v = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+        this.hsv.update((prev) => ({ ...prev, s, v }));
+        this.emitColor();
+    }
+    // Hue slider
+    onHueDown(event) {
+        event.preventDefault();
+        this.updateHueFromPosition(event.clientX);
+        this.startDrag((e) => {
+            const x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+            this.updateHueFromPosition(x);
+        });
+    }
+    onHueTouch(event) {
+        this.updateHueFromPosition(event.touches[0].clientX);
+        this.startDrag((e) => {
+            const x = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+            this.updateHueFromPosition(x);
+        }, true);
+    }
+    updateHueFromPosition(clientX) {
+        const track = this.hueTrackRef()?.nativeElement;
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const h = Math.round(percent * 360);
+        this.hsv.update((prev) => ({ ...prev, h }));
+        this.emitColor();
+    }
+    // Drag helpers (same pattern as slider component)
+    startDrag(handler, touch = false) {
+        this.removeDragListeners();
+        this.moveHandler = handler;
+        this.upHandler = () => {
+            this.onTouched();
+            this.removeDragListeners();
+        };
+        if (touch) {
+            document.addEventListener('touchmove', this.moveHandler, { passive: true });
+            document.addEventListener('touchend', this.upHandler);
+        }
+        else {
+            document.addEventListener('mousemove', this.moveHandler);
+            document.addEventListener('mouseup', this.upHandler);
+        }
+    }
+    removeDragListeners() {
+        if (this.moveHandler) {
+            document.removeEventListener('mousemove', this.moveHandler);
+            document.removeEventListener('touchmove', this.moveHandler);
+            this.moveHandler = null;
+        }
+        if (this.upHandler) {
+            document.removeEventListener('mouseup', this.upHandler);
+            document.removeEventListener('touchend', this.upHandler);
+            this.upHandler = null;
+        }
+    }
+    // Input
+    onInputChange(event) {
+        this.inputValue.set(event.target.value);
+    }
+    commitInput() {
+        const val = this.inputValue().trim();
+        if (isValidColor(val)) {
+            const rgb = parseColor(val);
+            this.hsv.set(rgbToHsv(rgb));
+            this.emitColor();
+        }
+        else {
+            this.inputValue.set(this.displayValue());
+        }
+    }
+    // Format
+    cycleFormat() {
+        const formats = ['hex', 'rgb', 'hsl'];
+        const idx = formats.indexOf(this.currentFormat());
+        const next = formats[(idx + 1) % formats.length];
+        this.currentFormat.set(next);
+        this.inputValue.set(this.displayValue());
+        this.formatChange.emit(next);
+    }
+    // Copy
+    copyColor() {
+        navigator.clipboard.writeText(this.displayValue());
+        this.copied.set(true);
+        setTimeout(() => this.copied.set(false), 2000);
+    }
+    // Presets & favorites
+    selectColor(color) {
+        const rgb = parseColor(color);
+        if (rgb) {
+            this.hsv.set(rgbToHsv(rgb));
+            this.emitColor();
+        }
+    }
+    addFavorite() {
+        const hex = rgbToHex(this.rgb());
+        this.favorites.update((favs) => favs.includes(hex) ? favs : [...favs, hex]);
+    }
+    removeFavorite(color) {
+        this.favorites.update((favs) => favs.filter((f) => f !== color));
+    }
+    // EyeDropper
+    async pickFromScreen() {
+        if (!this.hasEyeDropper)
+            return;
+        try {
+            const dropper = new window.EyeDropper();
+            const result = await dropper.open();
+            this.selectColor(result.sRGBHex);
+        }
+        catch {
+            // User cancelled
+        }
+    }
+    // Popover
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.open.set(true);
+            this.addPositionListeners();
+            setTimeout(() => this.updatePanelPosition());
+        }
+    }
+    close() {
+        this.open.set(false);
+        this.removePositionListeners();
+    }
+    updatePanelPosition() {
+        if (this.inline())
+            return;
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const panel = this.panelRef()?.nativeElement;
+        if (panel) {
+            panel.style.top = `${rect.bottom + 4}px`;
+            panel.style.left = `${rect.left}px`;
+        }
+    }
+    addPositionListeners() {
+        this.removePositionListeners();
+        this.scrollHandler = () => requestAnimationFrame(() => this.updatePanelPosition());
+        this.resizeHandler = () => requestAnimationFrame(() => this.updatePanelPosition());
+        document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+        window.addEventListener('resize', this.resizeHandler, { passive: true });
+    }
+    removePositionListeners() {
+        if (this.scrollHandler) {
+            document.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    ngOnDestroy() {
+        this.removeDragListeners();
+        this.removePositionListeners();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyColorPickerComponent, isStandalone: true, selector: "sny-color-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showInput: { classPropertyName: "showInput", publicName: "showInput", isSignal: true, isRequired: false, transformFunction: null }, showEyeDropper: { classPropertyName: "showEyeDropper", publicName: "showEyeDropper", isSignal: true, isRequired: false, transformFunction: null }, showFavorites: { classPropertyName: "showFavorites", publicName: "showFavorites", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", colorChange: "colorChange", formatChange: "formatChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, classAttribute: "relative inline-block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyColorPickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "satPanelRef", first: true, predicate: ["satPanel"], descendants: true, isSignal: true }, { propertyName: "hueTrackRef", first: true, predicate: ["hueTrack"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Trigger -->
+    @if (!inline()) {
+      <button
+        #triggerEl
+        type="button"
+        role="combobox"
+        [attr.aria-expanded]="open()"
+        aria-haspopup="dialog"
+        [disabled]="isDisabled()"
+        [class]="triggerClass()"
+        (click)="toggle()"
+        (blur)="onTouched()"
+      >
+        <div
+          class="h-5 w-5 rounded-sm border border-border shrink-0"
+          [style.backgroundColor]="displayValue()"
+        ></div>
+        <span class="truncate">{{ displayValue() || placeholder() }}</span>
+      </button>
+    }
+
+    <!-- Panel -->
+    @if (open() || inline()) {
+      <div
+        #panelEl
+        [class]="panelClass()"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Color picker"
+      >
+        <!-- Saturation/Brightness Panel -->
+        <div
+          #satPanel
+          class="relative h-36 w-full rounded-md cursor-crosshair overflow-hidden"
+          [style.background]="saturationBg()"
+          (mousedown)="onSatPanelDown($event)"
+          (touchstart)="onSatPanelTouch($event)"
+        >
+          <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+          <div
+            class="absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none"
+            [style.left.%]="hsv().s * 100"
+            [style.top.%]="(1 - hsv().v) * 100"
+          ></div>
+        </div>
+
+        <!-- Hue Slider -->
+        <div
+          #hueTrack
+          class="relative h-3 w-full rounded-full cursor-pointer mt-3"
+          style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))"
+          (mousedown)="onHueDown($event)"
+          (touchstart)="onHueTouch($event)"
+        >
+          <div
+            class="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none"
+            [style.left.%]="hsv().h / 360 * 100"
+            [style.backgroundColor]="'hsl(' + hsv().h + ', 100%, 50%)'"
+          ></div>
+        </div>
+
+        <!-- Input + Format + Copy + Actions -->
+        @if (showInput()) {
+          <div class="mt-3 flex items-center gap-1.5">
+            <div
+              class="h-8 w-8 rounded-sm border border-border shrink-0"
+              [style.backgroundColor]="displayValue()"
+            ></div>
+            <input
+              class="flex-1 min-w-0 h-8 rounded-sm border border-border bg-background px-2 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-ring"
+              [value]="inputValue()"
+              (input)="onInputChange($event)"
+              (blur)="commitInput()"
+              (keydown.enter)="commitInput()"
+            />
+            <button
+              type="button"
+              class="h-8 px-1.5 rounded-sm border border-border text-[10px] font-semibold uppercase hover:bg-accent transition-colors shrink-0"
+              (click)="cycleFormat()"
+              title="Switch format"
+            >
+              {{ currentFormat() }}
+            </button>
+            <button
+              type="button"
+              class="h-8 w-8 inline-flex items-center justify-center rounded-sm border border-border hover:bg-accent transition-colors shrink-0"
+              (click)="copyColor()"
+              [title]="copied() ? 'Copied!' : 'Copy color'"
+            >
+              @if (copied()) {
+                <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="M20 6 9 17l-5-5"/></svg>
+              } @else {
+                <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"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+              }
+            </button>
+          </div>
+          <!-- Secondary actions row -->
+          <div class="mt-2 flex items-center gap-1.5">
+            @if (showEyeDropper() && hasEyeDropper) {
+              <button
+                type="button"
+                class="h-7 px-2 inline-flex items-center gap-1.5 rounded-sm border border-border text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                (click)="pickFromScreen()"
+                title="Pick from screen"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 22 1-1h3l9-9"/><path d="M3 21v-3l9-9"/><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z"/></svg>
+                Pick
+              </button>
+            }
+            @if (showFavorites()) {
+              <button
+                type="button"
+                class="h-7 px-2 inline-flex items-center gap-1.5 rounded-sm border border-border text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                (click)="addFavorite()"
+                title="Save to favorites"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
+                Save
+              </button>
+            }
+          </div>
+        }
+
+        <!-- Presets -->
+        @for (preset of presets(); track $index) {
+          <div class="mt-3">
+            @if (preset.label) {
+              <p class="text-xs font-medium text-muted-foreground mb-1.5">{{ preset.label }}</p>
+            }
+            <div class="flex flex-wrap gap-1.5">
+              @for (color of preset.colors; track color) {
+                <button
+                  type="button"
+                  class="h-6 w-6 rounded-sm border border-border hover:scale-110 transition-transform cursor-pointer"
+                  [style.backgroundColor]="color"
+                  [title]="color"
+                  (click)="selectColor(color)"
+                ></button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Favorites -->
+        @if (showFavorites() && favorites().length > 0) {
+          <div class="mt-3">
+            <p class="text-xs font-medium text-muted-foreground mb-1.5">Favorites</p>
+            <div class="flex flex-wrap gap-1.5">
+              @for (fav of favorites(); track fav) {
+                <div class="relative group">
+                  <button
+                    type="button"
+                    class="h-6 w-6 rounded-sm border border-border hover:scale-110 transition-transform cursor-pointer"
+                    [style.backgroundColor]="fav"
+                    [title]="fav"
+                    (click)="selectColor(fav)"
+                  ></button>
+                  <button
+                    type="button"
+                    class="absolute -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-destructive text-destructive-foreground text-[8px] leading-none items-center justify-center hidden group-hover:inline-flex"
+                    (click)="removeFavorite(fav); $event.stopPropagation()"
+                  >×</button>
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-color-picker',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative inline-block' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyColorPickerComponent), multi: true },
+                    ],
+                    template: `
+    <!-- Trigger -->
+    @if (!inline()) {
+      <button
+        #triggerEl
+        type="button"
+        role="combobox"
+        [attr.aria-expanded]="open()"
+        aria-haspopup="dialog"
+        [disabled]="isDisabled()"
+        [class]="triggerClass()"
+        (click)="toggle()"
+        (blur)="onTouched()"
+      >
+        <div
+          class="h-5 w-5 rounded-sm border border-border shrink-0"
+          [style.backgroundColor]="displayValue()"
+        ></div>
+        <span class="truncate">{{ displayValue() || placeholder() }}</span>
+      </button>
+    }
+
+    <!-- Panel -->
+    @if (open() || inline()) {
+      <div
+        #panelEl
+        [class]="panelClass()"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Color picker"
+      >
+        <!-- Saturation/Brightness Panel -->
+        <div
+          #satPanel
+          class="relative h-36 w-full rounded-md cursor-crosshair overflow-hidden"
+          [style.background]="saturationBg()"
+          (mousedown)="onSatPanelDown($event)"
+          (touchstart)="onSatPanelTouch($event)"
+        >
+          <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+          <div
+            class="absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none"
+            [style.left.%]="hsv().s * 100"
+            [style.top.%]="(1 - hsv().v) * 100"
+          ></div>
+        </div>
+
+        <!-- Hue Slider -->
+        <div
+          #hueTrack
+          class="relative h-3 w-full rounded-full cursor-pointer mt-3"
+          style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))"
+          (mousedown)="onHueDown($event)"
+          (touchstart)="onHueTouch($event)"
+        >
+          <div
+            class="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md pointer-events-none"
+            [style.left.%]="hsv().h / 360 * 100"
+            [style.backgroundColor]="'hsl(' + hsv().h + ', 100%, 50%)'"
+          ></div>
+        </div>
+
+        <!-- Input + Format + Copy + Actions -->
+        @if (showInput()) {
+          <div class="mt-3 flex items-center gap-1.5">
+            <div
+              class="h-8 w-8 rounded-sm border border-border shrink-0"
+              [style.backgroundColor]="displayValue()"
+            ></div>
+            <input
+              class="flex-1 min-w-0 h-8 rounded-sm border border-border bg-background px-2 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-ring"
+              [value]="inputValue()"
+              (input)="onInputChange($event)"
+              (blur)="commitInput()"
+              (keydown.enter)="commitInput()"
+            />
+            <button
+              type="button"
+              class="h-8 px-1.5 rounded-sm border border-border text-[10px] font-semibold uppercase hover:bg-accent transition-colors shrink-0"
+              (click)="cycleFormat()"
+              title="Switch format"
+            >
+              {{ currentFormat() }}
+            </button>
+            <button
+              type="button"
+              class="h-8 w-8 inline-flex items-center justify-center rounded-sm border border-border hover:bg-accent transition-colors shrink-0"
+              (click)="copyColor()"
+              [title]="copied() ? 'Copied!' : 'Copy color'"
+            >
+              @if (copied()) {
+                <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="M20 6 9 17l-5-5"/></svg>
+              } @else {
+                <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"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+              }
+            </button>
+          </div>
+          <!-- Secondary actions row -->
+          <div class="mt-2 flex items-center gap-1.5">
+            @if (showEyeDropper() && hasEyeDropper) {
+              <button
+                type="button"
+                class="h-7 px-2 inline-flex items-center gap-1.5 rounded-sm border border-border text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                (click)="pickFromScreen()"
+                title="Pick from screen"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 22 1-1h3l9-9"/><path d="M3 21v-3l9-9"/><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z"/></svg>
+                Pick
+              </button>
+            }
+            @if (showFavorites()) {
+              <button
+                type="button"
+                class="h-7 px-2 inline-flex items-center gap-1.5 rounded-sm border border-border text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                (click)="addFavorite()"
+                title="Save to favorites"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
+                Save
+              </button>
+            }
+          </div>
+        }
+
+        <!-- Presets -->
+        @for (preset of presets(); track $index) {
+          <div class="mt-3">
+            @if (preset.label) {
+              <p class="text-xs font-medium text-muted-foreground mb-1.5">{{ preset.label }}</p>
+            }
+            <div class="flex flex-wrap gap-1.5">
+              @for (color of preset.colors; track color) {
+                <button
+                  type="button"
+                  class="h-6 w-6 rounded-sm border border-border hover:scale-110 transition-transform cursor-pointer"
+                  [style.backgroundColor]="color"
+                  [title]="color"
+                  (click)="selectColor(color)"
+                ></button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Favorites -->
+        @if (showFavorites() && favorites().length > 0) {
+          <div class="mt-3">
+            <p class="text-xs font-medium text-muted-foreground mb-1.5">Favorites</p>
+            <div class="flex flex-wrap gap-1.5">
+              @for (fav of favorites(); track fav) {
+                <div class="relative group">
+                  <button
+                    type="button"
+                    class="h-6 w-6 rounded-sm border border-border hover:scale-110 transition-transform cursor-pointer"
+                    [style.backgroundColor]="fav"
+                    [title]="fav"
+                    (click)="selectColor(fav)"
+                  ></button>
+                  <button
+                    type="button"
+                    class="absolute -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-destructive text-destructive-foreground text-[8px] leading-none items-center justify-center hidden group-hover:inline-flex"
+                    (click)="removeFavorite(fav); $event.stopPropagation()"
+                  >×</button>
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInput", required: false }] }], showEyeDropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEyeDropper", required: false }] }], showFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFavorites", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], colorChange: [{ type: i0.Output, args: ["colorChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panelEl', { isSignal: true }] }], satPanelRef: [{ type: i0.ViewChild, args: ['satPanel', { isSignal: true }] }], hueTrackRef: [{ type: i0.ViewChild, args: ['hueTrack', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+const otpCellVariants = cva('text-center font-mono font-semibold border border-border bg-background rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed', {
+    variants: {
+        size: {
+            sm: 'h-9 w-9 text-sm',
+            md: 'h-11 w-11 text-lg',
+            lg: 'h-14 w-14 text-2xl',
+        },
+    },
+    defaultVariants: { size: 'md' },
+});
+
+class SnyOtpInputComponent {
+    // Public API
+    length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    mask = input(false, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    autoFocus = input(true, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    separator = input(null, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    completed = output();
+    // Internal state
+    digits = linkedSignal(() => Array(this.length()).fill(''), ...(ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    inputRefs = viewChildren('inputEl', ...(ngDevMode ? [{ debugName: "inputRefs" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva() || this.status() === 'loading', ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    _onTouched = () => { };
+    // Computed
+    fullValue = computed(() => this.digits().join(''), ...(ngDevMode ? [{ debugName: "fullValue" }] : /* istanbul ignore next */ []));
+    isComplete = computed(() => {
+        const d = this.digits();
+        return d.length === this.length() && d.every((c) => c !== '');
+    }, ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync value → digits when value changes externally (e.g. reset)
+        effect(() => {
+            const val = this.value();
+            untracked(() => {
+                const chars = val.split('').slice(0, this.length());
+                const padded = [...chars, ...Array(this.length() - chars.length).fill('')];
+                const current = this.digits();
+                if (padded.join('') !== current.join('')) {
+                    this.digits.set(padded);
+                }
+            });
+        });
+        afterNextRender(() => {
+            if (this.autoFocus()) {
+                this.focusInput(0);
+            }
+        });
+    }
+    // CVA
+    writeValue(val) {
+        const str = val ?? '';
+        this.value.set(str);
+        const chars = str.split('').slice(0, this.length());
+        const padded = [...chars, ...Array(this.length() - chars.length).fill('')];
+        this.digits.set(padded);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Cell class
+    cellClass(index) {
+        const isFocused = this.focusedIndex() === index;
+        const hasValue = this.digits()[index] !== '';
+        const st = this.status();
+        return cn(otpCellVariants({ size: this.size() }), st === 'idle' && isFocused && 'border-primary ring-2 ring-ring', st === 'idle' && hasValue && !isFocused && 'border-primary/50', st === 'loading' && 'border-muted-foreground/30 opacity-70', st === 'success' && 'border-green-500 bg-green-500/5', st === 'error' && 'border-destructive bg-destructive/5 animate-shake');
+    }
+    // Input handler
+    onInput(event, index) {
+        const input = event.target;
+        const char = input.value.slice(-1);
+        if (!this.isValidChar(char)) {
+            input.value = this.digits()[index];
+            return;
+        }
+        this.setDigit(index, char);
+        if (index < this.length() - 1) {
+            this.focusInput(index + 1);
+        }
+        this.emitValue();
+    }
+    // Keyboard handler
+    onKeydown(event, index) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (this.digits()[index] !== '') {
+                    this.setDigit(index, '');
+                    this.emitValue();
+                }
+                else if (index > 0) {
+                    this.setDigit(index - 1, '');
+                    this.focusInput(index - 1);
+                    this.emitValue();
+                }
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.setDigit(index, '');
+                this.emitValue();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0)
+                    this.focusInput(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < this.length() - 1)
+                    this.focusInput(index + 1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusInput(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusInput(this.length() - 1);
+                break;
+        }
+    }
+    // Paste handler
+    onPaste(event, index) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text') ?? '';
+        const chars = text.split('').filter((c) => this.isValidChar(c));
+        if (chars.length === 0)
+            return;
+        const newDigits = [...this.digits()];
+        let lastFilledIndex = index;
+        for (let i = 0; i < chars.length && index + i < this.length(); i++) {
+            newDigits[index + i] = chars[i];
+            lastFilledIndex = index + i;
+        }
+        this.digits.set(newDigits);
+        const nextIndex = Math.min(lastFilledIndex + 1, this.length() - 1);
+        this.focusInput(nextIndex);
+        this.emitValue();
+    }
+    // Blur
+    onBlur() {
+        this.focusedIndex.set(-1);
+        this._onTouched();
+    }
+    // Helpers
+    setDigit(index, char) {
+        this.digits.update((d) => {
+            const next = [...d];
+            next[index] = char;
+            return next;
+        });
+    }
+    emitValue() {
+        const val = this.fullValue();
+        this.value.set(val);
+        this._onChange(val);
+        if (this.isComplete()) {
+            this.completed.emit(val);
+        }
+    }
+    focusInput(index) {
+        const refs = this.inputRefs();
+        if (refs[index]) {
+            const el = refs[index].nativeElement;
+            el.focus();
+            el.select();
+        }
+    }
+    isValidChar(char) {
+        if (!char || char.length !== 1)
+            return false;
+        if (this.type() === 'number')
+            return /^[0-9]$/.test(char);
+        return /^[a-zA-Z0-9]$/.test(char);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyOtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyOtpInputComponent, isStandalone: true, selector: "sny-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyOtpInputComponent), multi: true },
+        ], viewQueries: [{ propertyName: "inputRefs", predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      role="group"
+      [attr.aria-label]="'OTP input, ' + length() + ' digits'"
+      class="flex items-center gap-2"
+    >
+      @for (digit of digits(); track $index; let i = $index) {
+        @if (separator() !== null && i === separator() && i > 0) {
+          <span class="text-muted-foreground text-lg select-none" aria-hidden="true">—</span>
+        }
+        <input
+          #inputEl
+          [type]="mask() ? 'password' : 'text'"
+          [inputMode]="type() === 'number' ? 'numeric' : 'text'"
+          [attr.pattern]="type() === 'number' ? '[0-9]' : '[a-zA-Z0-9]'"
+          maxlength="1"
+          autocomplete="one-time-code"
+          [value]="digit"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [class]="cellClass(i)"
+          [attr.aria-label]="'Digit ' + (i + 1) + ' of ' + length()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="focusedIndex.set(i)"
+          (blur)="onBlur()"
+        />
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyOtpInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-otp-input',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyOtpInputComponent), multi: true },
+                    ],
+                    template: `
+    <div
+      role="group"
+      [attr.aria-label]="'OTP input, ' + length() + ' digits'"
+      class="flex items-center gap-2"
+    >
+      @for (digit of digits(); track $index; let i = $index) {
+        @if (separator() !== null && i === separator() && i > 0) {
+          <span class="text-muted-foreground text-lg select-none" aria-hidden="true">—</span>
+        }
+        <input
+          #inputEl
+          [type]="mask() ? 'password' : 'text'"
+          [inputMode]="type() === 'number' ? 'numeric' : 'text'"
+          [attr.pattern]="type() === 'number' ? '[0-9]' : '[a-zA-Z0-9]'"
+          maxlength="1"
+          autocomplete="one-time-code"
+          [value]="digit"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [class]="cellClass(i)"
+          [attr.aria-label]="'Digit ' + (i + 1) + ' of ' + length()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="focusedIndex.set(i)"
+          (blur)="onBlur()"
+        />
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], inputRefs: [{ type: i0.ViewChildren, args: ['inputEl', { isSignal: true }] }] } });
+
+class SnyCommandPaletteComponent {
+    config = inject(SNY_DIALOG_DATA);
+    dialogRef = inject(DialogRef);
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    filteredGroups = computed(() => {
+        const q = this.query().toLowerCase().trim();
+        const commands = this.config.commands.filter((cmd) => {
+            if (cmd.disabled)
+                return false;
+            if (!q)
+                return true;
+            return (cmd.label.toLowerCase().includes(q) ||
+                cmd.description?.toLowerCase().includes(q) ||
+                cmd.keywords?.some((k) => k.toLowerCase().includes(q)));
+        });
+        const groups = new Map();
+        for (const cmd of commands) {
+            const group = cmd.group ?? '';
+            if (!groups.has(group))
+                groups.set(group, []);
+            groups.get(group).push(cmd);
+        }
+        return [...groups.entries()].map(([name, cmds]) => ({ name, commands: cmds }));
+    }, ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
+    flatResults = computed(() => this.filteredGroups().flatMap((g) => g.commands), ...(ngDevMode ? [{ debugName: "flatResults" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.searchInput()?.nativeElement.focus();
+        });
+    }
+    onQueryChange(value) {
+        this.query.set(value);
+        this.activeIndex.set(0);
+    }
+    flatIndex(cmd) {
+        return this.flatResults().indexOf(cmd);
+    }
+    execute(cmd) {
+        this.dialogRef.close();
+        cmd.action();
+    }
+    onKeydown(event) {
+        const results = this.flatResults();
+        const len = results.length;
+        if (len === 0 && event.key !== 'Escape')
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.activeIndex.update((i) => (i + 1) % len);
+                this.scrollActiveIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update((i) => (i - 1 + len) % len);
+                this.scrollActiveIntoView();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                const active = results[this.activeIndex()];
+                if (active)
+                    this.execute(active);
+                break;
+        }
+    }
+    scrollActiveIntoView() {
+        requestAnimationFrame(() => {
+            const el = document.querySelector(`[data-cmd-idx="${this.activeIndex()}"]`);
+            el?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyCommandPaletteComponent, isStandalone: true, selector: "sny-command-palette", host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "block" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Search -->
+    <div class="flex items-center gap-2 border-b border-border px-4 py-3">
+      <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="text-muted-foreground shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        #searchInput
+        snyInput
+        class="border-none shadow-none h-8 px-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        [placeholder]="config.placeholder ?? 'Type a command...'"
+        [value]="query()"
+        (input)="onQueryChange(searchInput.value)"
+      />
+      <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">Esc</kbd>
+    </div>
+
+    <!-- Results -->
+    <div class="max-h-[300px] overflow-y-auto p-2 sny-scrollbar">
+      @if (flatResults().length === 0) {
+        <p class="py-6 text-center text-sm text-muted-foreground">
+          {{ config.emptyText ?? 'No results found.' }}
+        </p>
+      } @else {
+        @for (group of filteredGroups(); track group.name) {
+          @if (group.name) {
+            <p class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">{{ group.name }}</p>
+          }
+          @for (cmd of group.commands; track cmd.id) {
+            @let idx = flatIndex(cmd);
+            <button
+              [attr.data-cmd-idx]="idx"
+              [class]="
+                'w-full text-left rounded-sm px-3 py-2 text-sm transition-colors flex items-center gap-3 cursor-pointer ' +
+                (idx === activeIndex()
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-foreground hover:bg-accent/50')
+              "
+              (click)="execute(cmd)"
+              (mouseenter)="activeIndex.set(idx)"
+            >
+              @if (cmd.icon) {
+                <span class="shrink-0 w-5 text-center text-muted-foreground" [innerHTML]="cmd.icon"></span>
+              }
+              <div class="flex-1 min-w-0">
+                <span class="block truncate font-medium">{{ cmd.label }}</span>
+                @if (cmd.description) {
+                  <span class="block text-xs text-muted-foreground truncate">{{ cmd.description }}</span>
+                }
+              </div>
+              @if (cmd.shortcut) {
+                <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">{{ cmd.shortcut }}</kbd>
+              }
+            </button>
+          }
+        }
+      }
+    </div>
+
+    <!-- Footer -->
+    <div class="border-t border-border px-4 py-2">
+      <div class="flex items-center gap-3 text-xs text-muted-foreground">
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&uarr;&darr;</kbd>
+          Navigate
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&crarr;</kbd>
+          Execute
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">Esc</kbd>
+          Close
+        </span>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;background-color:var(--sny-background);border:1px solid var(--sny-border);border-radius:.5rem;box-shadow:0 25px 50px -12px #00000040;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: SnyInputDirective, selector: "input[snyInput], textarea[snyInput]", inputs: ["variant", "inputSize", "class", "ariaDescribedBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCommandPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sny-command-palette', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SnyInputDirective], host: {
+                        '(keydown)': 'onKeydown($event)',
+                        'class': 'block',
+                    }, template: `
+    <!-- Search -->
+    <div class="flex items-center gap-2 border-b border-border px-4 py-3">
+      <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="text-muted-foreground shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        #searchInput
+        snyInput
+        class="border-none shadow-none h-8 px-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        [placeholder]="config.placeholder ?? 'Type a command...'"
+        [value]="query()"
+        (input)="onQueryChange(searchInput.value)"
+      />
+      <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">Esc</kbd>
+    </div>
+
+    <!-- Results -->
+    <div class="max-h-[300px] overflow-y-auto p-2 sny-scrollbar">
+      @if (flatResults().length === 0) {
+        <p class="py-6 text-center text-sm text-muted-foreground">
+          {{ config.emptyText ?? 'No results found.' }}
+        </p>
+      } @else {
+        @for (group of filteredGroups(); track group.name) {
+          @if (group.name) {
+            <p class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">{{ group.name }}</p>
+          }
+          @for (cmd of group.commands; track cmd.id) {
+            @let idx = flatIndex(cmd);
+            <button
+              [attr.data-cmd-idx]="idx"
+              [class]="
+                'w-full text-left rounded-sm px-3 py-2 text-sm transition-colors flex items-center gap-3 cursor-pointer ' +
+                (idx === activeIndex()
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-foreground hover:bg-accent/50')
+              "
+              (click)="execute(cmd)"
+              (mouseenter)="activeIndex.set(idx)"
+            >
+              @if (cmd.icon) {
+                <span class="shrink-0 w-5 text-center text-muted-foreground" [innerHTML]="cmd.icon"></span>
+              }
+              <div class="flex-1 min-w-0">
+                <span class="block truncate font-medium">{{ cmd.label }}</span>
+                @if (cmd.description) {
+                  <span class="block text-xs text-muted-foreground truncate">{{ cmd.description }}</span>
+                }
+              </div>
+              @if (cmd.shortcut) {
+                <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">{{ cmd.shortcut }}</kbd>
+              }
+            </button>
+          }
+        }
+      }
+    </div>
+
+    <!-- Footer -->
+    <div class="border-t border-border px-4 py-2">
+      <div class="flex items-center gap-3 text-xs text-muted-foreground">
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&uarr;&darr;</kbd>
+          Navigate
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&crarr;</kbd>
+          Execute
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">Esc</kbd>
+          Close
+        </span>
+      </div>
+    </div>
+  `, styles: [":host{display:block;background-color:var(--sny-background);border:1px solid var(--sny-border);border-radius:.5rem;box-shadow:0 25px 50px -12px #00000040;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+class SnyCommandPaletteService {
+    dialogService = inject(SnyDialogService);
+    isOpen = false;
+    open(config) {
+        if (this.isOpen)
+            return null;
+        this.isOpen = true;
+        const ref = this.dialogService.open(SnyCommandPaletteComponent, {
+            width: config.width ?? '32rem',
+            data: config,
+        });
+        ref.closed.subscribe(() => {
+            this.isOpen = false;
+        });
+        return ref;
+    }
+    close() {
+        if (this.isOpen) {
+            this.dialogService.closeAll();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCommandPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCommandPaletteService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCommandPaletteService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class SnyValidatorDirective {
     control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
@@ -6107,5 +8296,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, SnyColorPickerComponent, SnyComboboxComponent, SnyCommandPaletteComponent, SnyCommandPaletteService, SnyDataTableComponent, SnyDatePickerComponent, SnyDateRangePickerComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyOtpInputComponent, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, colorPickerTriggerVariants, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, formatColor, hexToRgb, hslToRgb, hsvToRgb, inputVariants, isValidColor, kbdVariants, labelVariants, linkVariants, loaderVariants, otpCellVariants, paginationItemVariants, parseColor, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, rgbToHex, rgbToHsl, rgbToHsv, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
 //# sourceMappingURL=sonny-ui-core.mjs.map