@sonny-ui/core 0.1.0-alpha.1 → 0.1.0-alpha.10

package/fesm2022/sonny-ui-core.mjs

@@ -3,9 +3,10 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, signal, computed, Injectable, input, Directive, Component, model, viewChild, ElementRef, HostListener, Injector } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, signal, computed, Injectable, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, effect, forwardRef, HostListener, Injector, afterNextRender, Renderer2, output, contentChildren } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
 
 function cn(...inputs) {
@@ -382,6 +383,7 @@ class SnyToasterComponent {
           [class]="toastClasses[toast.variant ?? 'default']"
           role="alert"
           aria-live="polite"
+          aria-atomic="true"
         >
           <div class="grid gap-1">
             <div class="text-sm font-semibold">{{ toast.title }}</div>
@@ -409,13 +411,14 @@ class SnyToasterComponent {
         </div>
       }
     </div>
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyToasterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-toaster',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div [class]="containerClass()" role="region" aria-label="Notifications" tabindex="-1">
       @for (toast of visibleToasts(); track toast.id) {
@@ -423,6 +426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
           [class]="toastClasses[toast.variant ?? 'default']"
           role="alert"
           aria-live="polite"
+          aria-atomic="true"
         >
           <div class="grid gap-1">
             <div class="text-sm font-semibold">{{ toast.title }}</div>
@@ -622,6 +626,7 @@ const SNY_ACCORDION_ITEM = new InjectionToken('SnyAccordionItem');
 class SnyAccordionDirective {
     multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
     _openItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "_openItems" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('divide-y divide-border', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     isOpen(id) {
@@ -641,16 +646,53 @@ class SnyAccordionDirective {
             return next;
         });
     }
+    onKeydown(event) {
+        const target = event.target;
+        if (!target.hasAttribute('snyaccordiontrigger') && !target.closest('[snyAccordionTrigger]'))
+            return;
+        const triggers = Array.from(this.elRef.nativeElement.querySelectorAll('[snyAccordionTrigger]'));
+        if (triggers.length === 0)
+            return;
+        const currentIndex = triggers.indexOf(target.closest('[snyAccordionTrigger]') || target);
+        if (currentIndex === -1)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                nextIndex = (currentIndex + 1) % triggers.length;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = triggers.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            triggers[nextIndex].focus();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionDirective, isStandalone: true, selector: "[snyAccordion]", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionDirective, isStandalone: true, selector: "[snyAccordion]", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }], exportAs: ["snyAccordion"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[snyAccordion]',
                     standalone: true,
+                    exportAs: 'snyAccordion',
                     providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }],
-                    host: { '[class]': 'computedClass()' },
+                    host: {
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
                 }]
         }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class SnyAccordionItemDirective {
@@ -663,13 +705,14 @@ class SnyAccordionItemDirective {
         this.accordion.toggle(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionItemDirective, isStandalone: true, selector: "[snyAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionItemDirective, isStandalone: true, selector: "[snyAccordionItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }], exportAs: ["snyAccordionItem"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[snyAccordionItem]',
                     standalone: true,
+                    exportAs: 'snyAccordionItem',
                     providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }],
                     host: { '[class]': 'computedClass()' },
                 }]
@@ -679,7 +722,7 @@ class SnyAccordionTriggerDirective {
     item = inject(SNY_ACCORDION_ITEM);
     computedClass = computed(() => cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline cursor-pointer [&>svg]:transition-transform', this.item.isOpen() && '[&>svg]:rotate-180', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionTriggerDirective, isStandalone: true, selector: "[snyAccordionTrigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "item.toggle()" }, properties: { "class": "computedClass()", "attr.aria-expanded": "item.isOpen()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAccordionTriggerDirective, isStandalone: true, selector: "[snyAccordionTrigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "item.toggle()" }, properties: { "class": "computedClass()", "attr.aria-expanded": "item.isOpen()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAccordionTriggerDirective, decorators: [{
             type: Directive,
@@ -689,6 +732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     host: {
                         '[class]': 'computedClass()',
                         '[attr.aria-expanded]': 'item.isOpen()',
+                        'tabindex': '0',
                         '(click)': 'item.toggle()',
                     },
                 }]
@@ -761,13 +805,14 @@ class SnyAvatarComponent {
     } @else {
       <span class="font-medium text-muted-foreground">{{ fallbackText() }}</span>
     }
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAvatarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-avatar',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[class]': 'computedClass()' },
                     template: `
     @if (src() && !error()) {
@@ -1003,12 +1048,39 @@ class SnyComboboxComponent {
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
     triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     searchRef = viewChild('searchEl', ...(ngDevMode ? [{ debugName: "searchRef" }] : /* istanbul ignore next */ []));
     dropdownRef = viewChild('dropdownEl', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
     elRef = inject(ElementRef);
     scrollHandler = null;
     resizeHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(_isDisabled) {
+        this._disabledByCva.set(_isDisabled);
+    }
     selectedLabel = computed(() => {
         const v = this.value();
         if (!v)
@@ -1122,7 +1194,9 @@ class SnyComboboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyComboboxComponent, isStandalone: true, selector: "sny-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block w-full" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyComboboxComponent, isStandalone: true, selector: "sny-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyComboboxComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Trigger button -->
     <button
       #triggerEl
@@ -1132,6 +1206,7 @@ class SnyComboboxComponent {
       aria-haspopup="listbox"
       [class]="triggerClass()"
       (click)="toggle()"
+      (blur)="onTouched()"
     >
       <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
         {{ selectedLabel() || placeholder() }}
@@ -1185,16 +1260,20 @@ class SnyComboboxComponent {
         }
       </div>
     }
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyComboboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-combobox',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'relative inline-block w-full',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyComboboxComponent), multi: true },
+                    ],
                     template: `
     <!-- Trigger button -->
     <button
@@ -1205,6 +1284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       aria-haspopup="listbox"
       [class]="triggerClass()"
       (click)="toggle()"
+      (blur)="onTouched()"
     >
       <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
         {{ selectedLabel() || placeholder() }}
@@ -1260,7 +1340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchRef: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1291,14 +1371,18 @@ class SnySkeletonDirective {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn(skeletonVariants({ variant: this.variant(), size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySkeletonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySkeletonDirective, isStandalone: true, selector: "[snySkeleton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnySkeletonDirective, isStandalone: true, selector: "[snySkeleton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { attributes: { "aria-busy": "true", "aria-hidden": "true" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySkeletonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[snySkeleton]',
                     standalone: true,
-                    host: { '[class]': 'computedClass()' },
+                    host: {
+                        '[class]': 'computedClass()',
+                        'aria-busy': 'true',
+                        'aria-hidden': 'true',
+                    },
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
@@ -1359,42 +1443,78 @@ class SnySwitchComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.checked();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.checked.set(val ?? false);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
     trackClass = computed(() => cn(switchTrackVariants({ size: this.size() }), this.checked() ? 'bg-primary' : 'bg-input', this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
     thumbClass = computed(() => cn('pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform', switchThumbSize[this.size()], this.checked() ? switchThumbTranslate[this.size()] : 'translate-x-0'), ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SnySwitchComponent, isStandalone: true, selector: "sny-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SnySwitchComponent, isStandalone: true, selector: "sny-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySwitchComponent), multi: true },
+        ], ngImport: i0, template: `
     <button
       type="button"
       role="switch"
       [attr.aria-checked]="checked()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [class]="trackClass()"
       (click)="checked.set(!checked())"
+      (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
     </button>
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySwitchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-switch',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'inline-flex' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySwitchComponent), multi: true },
+                    ],
                     template: `
     <button
       type="button"
       role="switch"
       [attr.aria-checked]="checked()"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [class]="trackClass()"
       (click)="checked.set(!checked())"
+      (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
     </button>
   `,
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const toggleVariants = cva('inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors 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: {
@@ -1419,22 +1539,62 @@ class SnyToggleDirective {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     pressed = model(false, ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.pressed();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.pressed.set(val ?? false);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.pressed.set(!this.pressed());
+    }
     computedClass = computed(() => cn(toggleVariants({ variant: this.variant(), size: this.size() }), this.pressed() ? 'bg-accent text-accent-foreground' : '', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyToggleDirective, isStandalone: true, selector: "button[snyToggle]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { listeners: { "click": "pressed.set(!pressed())" }, properties: { "class": "computedClass()", "attr.aria-pressed": "pressed()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyToggleDirective, isStandalone: true, selector: "button[snyToggle]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { listeners: { "click": "toggle()", "blur": "onTouched()" }, properties: { "class": "computedClass()", "attr.aria-pressed": "pressed()", "attr.disabled": "isDisabled() || null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
+        ], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[snyToggle]',
                     standalone: true,
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyToggleDirective), multi: true },
+                    ],
                     host: {
                         '[class]': 'computedClass()',
                         '[attr.aria-pressed]': 'pressed()',
-                        '(click)': 'pressed.set(!pressed())',
+                        '[attr.disabled]': 'isDisabled() || null',
+                        '(click)': 'toggle()',
+                        '(blur)': 'onTouched()',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const sliderTrackVariants = cva('relative w-full rounded-full bg-secondary cursor-pointer', {
     variants: {
@@ -1462,19 +1622,47 @@ class SnySliderComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     trackRef = viewChild('trackEl', ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
     moveHandler = null;
     upHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? 0);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
     percentage = computed(() => {
         const range = this.max() - this.min();
         if (range <= 0)
             return 0;
         return ((this.value() - this.min()) / range) * 100;
     }, ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
-    trackClass = computed(() => cn(sliderTrackVariants({ size: this.size() }), this.disabled() && 'opacity-50 cursor-not-allowed', this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
+    trackClass = computed(() => cn(sliderTrackVariants({ size: this.size() }), this.isDisabled() && 'opacity-50 cursor-not-allowed', this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
     thumbClass = computed(() => cn('absolute top-1/2 -translate-x-1/2 -translate-y-1/2 block rounded-full border-2 border-primary bg-background shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', sliderThumbSize[this.size()]), ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
     updateValueFromPosition(clientX) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const track = this.trackRef()?.nativeElement;
         if (!track)
@@ -1486,7 +1674,7 @@ class SnySliderComponent {
         this.value.set(Math.max(this.min(), Math.min(this.max(), stepped)));
     }
     onTrackMousedown(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         event.preventDefault();
         this.updateValueFromPosition(event.clientX);
@@ -1494,24 +1682,30 @@ class SnySliderComponent {
             const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
             this.updateValueFromPosition(clientX);
         };
-        this.upHandler = () => this.removeListeners();
+        this.upHandler = () => {
+            this.onTouched();
+            this.removeListeners();
+        };
         document.addEventListener('mousemove', this.moveHandler);
         document.addEventListener('mouseup', this.upHandler);
     }
     onTrackTouchstart(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         this.updateValueFromPosition(event.touches[0].clientX);
         this.moveHandler = (e) => {
             const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
             this.updateValueFromPosition(clientX);
         };
-        this.upHandler = () => this.removeListeners();
+        this.upHandler = () => {
+            this.onTouched();
+            this.removeListeners();
+        };
         document.addEventListener('touchmove', this.moveHandler, { passive: true });
         document.addEventListener('touchend', this.upHandler);
     }
     onKeydown(event) {
-        if (this.disabled())
+        if (this.isDisabled())
             return;
         const step = this.step();
         switch (event.key) {
@@ -1551,7 +1745,9 @@ class SnySliderComponent {
         this.removeListeners();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: SnySliderComponent, isStandalone: true, selector: "sny-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "block" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: SnySliderComponent, isStandalone: true, selector: "sny-slider", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySliderComponent), multi: true },
+        ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #trackEl
       [class]="trackClass()"
@@ -1565,23 +1761,28 @@ class SnySliderComponent {
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
         [attr.aria-valuenow]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         [class]="thumbClass()"
         [style.left.%]="percentage()"
         tabindex="0"
+        (blur)="onTouched()"
       ></button>
     </div>
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySliderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-slider',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'block',
                         '(keydown)': 'onKeydown($event)',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySliderComponent), multi: true },
+                    ],
                     template: `
     <div
       #trackEl
@@ -1596,15 +1797,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         [attr.aria-valuemin]="min()"
         [attr.aria-valuemax]="max()"
         [attr.aria-valuenow]="value()"
-        [disabled]="disabled()"
+        [disabled]="isDisabled()"
         [class]="thumbClass()"
         [style.left.%]="percentage()"
         tabindex="0"
+        (blur)="onTouched()"
       ></button>
     </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 }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], 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 }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['trackEl', { isSignal: true }] }] } });
 
 const loaderVariants = cva('inline-flex items-center justify-center text-current', {
     variants: {
@@ -1650,13 +1852,14 @@ class SnyLoaderComponent {
         </span>
       }
     }
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyLoaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-loader',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'computedClass()',
                         role: 'status',
@@ -1699,22 +1902,56 @@ class SnyTabsDirective {
         this.value.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsDirective, isStandalone: true, selector: "[snyTabs]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsDirective, isStandalone: true, selector: "[snyTabs]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }], exportAs: ["snyTabs"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[snyTabs]',
                     standalone: true,
+                    exportAs: 'snyTabs',
                     providers: [{ provide: SNY_TABS, useExisting: SnyTabsDirective }],
                     host: { '[class]': 'computedClass()' },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class SnyTabsListDirective {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
     computedClass = computed(() => cn('inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onKeydown(event) {
+        const triggers = Array.from(this.elRef.nativeElement.querySelectorAll('[role="tab"]'));
+        if (triggers.length === 0)
+            return;
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                nextIndex = (currentIndex + 1) % triggers.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = triggers.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            triggers[nextIndex].focus();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsListDirective, isStandalone: true, selector: "[snyTabsList]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsListDirective, isStandalone: true, selector: "[snyTabsList]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tablist" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsListDirective, decorators: [{
             type: Directive,
@@ -1724,6 +1961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                     host: {
                         role: 'tablist',
                         '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
                     },
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
@@ -1736,7 +1974,7 @@ class SnyTabsTriggerDirective {
         ? 'bg-background text-foreground shadow-sm'
         : 'hover:bg-background/50', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsTriggerDirective, isStandalone: true, selector: "[snyTabsTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "tabs.select(value())" }, properties: { "class": "computedClass()", "attr.aria-selected": "isActive()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTabsTriggerDirective, isStandalone: true, selector: "[snyTabsTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "tabs.select(value())" }, properties: { "class": "computedClass()", "attr.aria-selected": "isActive()", "attr.tabindex": "isActive() ? 0 : -1" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTabsTriggerDirective, decorators: [{
             type: Directive,
@@ -1747,6 +1985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         role: 'tab',
                         '[class]': 'computedClass()',
                         '[attr.aria-selected]': 'isActive()',
+                        '[attr.tabindex]': 'isActive() ? 0 : -1',
                         '(click)': 'tabs.select(value())',
                     },
                 }]
@@ -1804,11 +2043,39 @@ class SnySelectComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* 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 = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
     selectedLabel = computed(() => {
         const v = this.value();
         if (!v)
@@ -1913,17 +2180,20 @@ class SnySelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnySelectComponent, isStandalone: true, selector: "sny-select", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block w-full" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnySelectComponent, isStandalone: true, selector: "sny-select", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySelectComponent), 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="listbox"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [class]="triggerClass()"
       (click)="toggle()"
       (keydown)="onTriggerKeydown($event)"
+      (blur)="onTouched()"
     >
       <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
         {{ selectedLabel() || placeholder() }}
@@ -1956,16 +2226,20 @@ class SnySelectComponent {
         </ul>
       </div>
     }
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnySelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sny-select',
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'relative inline-block w-full',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySelectComponent), multi: true },
+                    ],
                     template: `
     <button
       #triggerEl
@@ -1973,10 +2247,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       role="combobox"
       [attr.aria-expanded]="open()"
       aria-haspopup="listbox"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       [class]="triggerClass()"
       (click)="toggle()"
       (keydown)="onTriggerKeydown($event)"
+      (blur)="onTouched()"
     >
       <span [class]="selectedLabel() ? '' : 'text-muted-foreground'">
         {{ selectedLabel() || placeholder() }}
@@ -2011,7 +2286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -2352,6 +2627,2720 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+const alertVariants = cva('relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', {
+    variants: {
+        variant: {
+            default: 'bg-background text-foreground border-border',
+            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10',
+            success: 'border-green-500/50 text-green-700 dark:text-green-400 dark:border-green-500 [&>svg]:text-green-600 bg-green-50 dark:bg-green-950/30',
+            warning: 'border-yellow-500/50 text-yellow-700 dark:text-yellow-400 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-50 dark:bg-yellow-950/30',
+            info: 'border-blue-500/50 text-blue-700 dark:text-blue-400 dark:border-blue-500 [&>svg]:text-blue-600 bg-blue-50 dark:bg-blue-950/30',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class SnyAlertDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    role = computed(() => {
+        const v = this.variant();
+        return v === 'destructive' || v === 'warning' || v === 'info' ? 'alert' : 'status';
+    }, ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    ariaLive = computed(() => {
+        const v = this.variant();
+        return v === 'destructive' || v === 'warning' ? 'assertive' : 'polite';
+    }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(alertVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    dismiss() {
+        this.visible.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAlertDirective, isStandalone: true, selector: "[snyAlert]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.role": "role()", "attr.aria-live": "ariaLive()", "style.display": "visible() ? null : \"none\"" } }, exportAs: ["snyAlert"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyAlert]',
+                    exportAs: 'snyAlert',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-live]': 'ariaLive()',
+                        '[style.display]': 'visible() ? null : "none"',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyAlertTitleDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('mb-1 font-medium leading-none tracking-tight', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAlertTitleDirective, isStandalone: true, selector: "[snyAlertTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyAlertTitle]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyAlertDescriptionDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-sm [&_p]:leading-relaxed', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyAlertDescriptionDirective, isStandalone: true, selector: "[snyAlertDescription]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyAlertDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyAlertDescription]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const textareaVariants = cva('flex w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'border-input',
+            error: 'border-destructive focus-visible:ring-destructive text-destructive placeholder:text-destructive/60',
+        },
+        textareaSize: {
+            sm: 'min-h-[60px] text-xs',
+            md: 'min-h-[80px] text-sm',
+            lg: 'min-h-[120px] text-base',
+        },
+        resize: {
+            none: 'resize-none',
+            vertical: 'resize-y',
+            horizontal: 'resize-x',
+            both: 'resize',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        textareaSize: 'md',
+        resize: 'vertical',
+    },
+});
+
+class SnyTextareaDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    textareaSize = input('md', ...(ngDevMode ? [{ debugName: "textareaSize" }] : /* istanbul ignore next */ []));
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    autoResize = input(false, ...(ngDevMode ? [{ debugName: "autoResize" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    el = inject((ElementRef));
+    computedClass = computed(() => cn(textareaVariants({
+        variant: this.variant(),
+        textareaSize: this.textareaSize(),
+        resize: this.autoResize() ? 'none' : this.resize(),
+    }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            if (this.autoResize()) {
+                this.adjustHeight();
+            }
+        });
+        effect(() => {
+            if (this.autoResize()) {
+                this.adjustHeight();
+            }
+        });
+    }
+    onInput() {
+        if (this.autoResize()) {
+            this.adjustHeight();
+        }
+    }
+    adjustHeight() {
+        const textarea = this.el.nativeElement;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTextareaDirective, isStandalone: true, selector: "textarea[snyTextarea]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, textareaSize: { classPropertyName: "textareaSize", publicName: "textareaSize", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()" }, properties: { "class": "computedClass()", "attr.aria-invalid": "variant() === \"error\" || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[snyTextarea]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.aria-invalid]': 'variant() === "error" || null',
+                        '(input)': 'onInput()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], textareaSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaSize", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const progressTrackVariants = cva('relative w-full overflow-hidden rounded-full bg-secondary', {
+    variants: {
+        size: {
+            sm: 'h-1.5',
+            md: 'h-2.5',
+            lg: 'h-4',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+const progressBarVariants = cva('h-full rounded-full transition-all duration-300 ease-in-out', {
+    variants: {
+        variant: {
+            default: 'bg-primary',
+            success: 'bg-green-600 dark:bg-green-500',
+            warning: 'bg-yellow-500 dark:bg-yellow-400',
+            error: 'bg-destructive',
+            info: 'bg-blue-600 dark:bg-blue-500',
+        },
+        indeterminate: {
+            true: 'animate-progress-indeterminate w-1/3',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        indeterminate: false,
+    },
+});
+
+class SnyProgressComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    label = input('Progress', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    percentage = computed(() => Math.min(100, (this.value() / this.max()) * 100), ...(ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []));
+    trackClass = computed(() => cn(progressTrackVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
+    barClass = computed(() => cn(progressBarVariants({
+        variant: this.variant(),
+        indeterminate: this.indeterminate(),
+    })), ...(ngDevMode ? [{ debugName: "barClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SnyProgressComponent, isStandalone: true, selector: "sny-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuenow": "indeterminate() ? null : value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-label": "label()", "class": "\"w-full\"" } }, ngImport: i0, template: `
+    <div [class]="trackClass()">
+      <div
+        [class]="barClass()"
+        [style.width.%]="indeterminate() ? null : percentage()"
+      ></div>
+    </div>
+  `, isInline: true, styles: ["@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}:host .animate-progress-indeterminate{animation:progress-indeterminate 1.5s ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sny-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'role': 'progressbar',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : value()',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-label]': 'label()',
+                        '[class]': '"w-full"',
+                    }, template: `
+    <div [class]="trackClass()">
+      <div
+        [class]="barClass()"
+        [style.width.%]="indeterminate() ? null : percentage()"
+      ></div>
+    </div>
+  `, styles: ["@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}:host .animate-progress-indeterminate{animation:progress-indeterminate 1.5s ease-in-out infinite}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const tooltipVariants = cva('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95', {
+    variants: {
+        position: {
+            top: 'slide-in-from-bottom-2',
+            bottom: 'slide-in-from-top-2',
+            left: 'slide-in-from-right-2',
+            right: 'slide-in-from-left-2',
+        },
+    },
+    defaultVariants: {
+        position: 'top',
+    },
+});
+
+let tooltipIdCounter = 0;
+class SnyTooltipDirective {
+    snyTooltip = input.required(...(ngDevMode ? [{ debugName: "snyTooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    tooltipDelay = input(300, ...(ngDevMode ? [{ debugName: "tooltipDelay" }] : /* istanbul ignore next */ []));
+    tooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    tooltipId = `sny-tooltip-${++tooltipIdCounter}`;
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    showTimeout = null;
+    tooltipEl = null;
+    constructor() {
+        afterNextRender(() => {
+            // cleanup handled in ngOnDestroy
+        });
+    }
+    show() {
+        if (this.tooltipDisabled())
+            return;
+        this.showTimeout = setTimeout(() => {
+            this.createTooltip();
+            this.isOpen.set(true);
+        }, this.tooltipDelay());
+    }
+    hide() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        this.destroyTooltip();
+        this.isOpen.set(false);
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    createTooltip() {
+        if (this.tooltipEl)
+            return;
+        const tooltip = this.renderer.createElement('div');
+        tooltip.id = this.tooltipId;
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.className = cn(tooltipVariants({ position: this.tooltipPosition() }), 'fixed pointer-events-none', this.class());
+        tooltip.textContent = this.snyTooltip();
+        this.renderer.appendChild(document.body, tooltip);
+        this.tooltipEl = tooltip;
+        this.positionTooltip();
+    }
+    positionTooltip() {
+        if (!this.tooltipEl)
+            return;
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const position = this.tooltipPosition();
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case 'top':
+                top = hostRect.top - tooltipRect.height - gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.left - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + gap;
+                break;
+        }
+        this.tooltipEl.style.top = `${top}px`;
+        this.tooltipEl.style.left = `${left}px`;
+    }
+    destroyTooltip() {
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTooltipDirective, isStandalone: true, selector: "[snyTooltip]", inputs: { snyTooltip: { classPropertyName: "snyTooltip", publicName: "snyTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelay: { classPropertyName: "tooltipDelay", publicName: "tooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()", "keydown.escape": "hide()" }, properties: { "attr.aria-describedby": "isOpen() ? tooltipId : null" } }, exportAs: ["snyTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTooltip]',
+                    standalone: true,
+                    exportAs: 'snyTooltip',
+                    host: {
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focus)': 'show()',
+                        '(blur)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { snyTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelay", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const dropdownContentVariants = cva('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', {
+    variants: {},
+    defaultVariants: {},
+});
+const dropdownItemVariants = cva('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[active]:bg-accent data-[active]:text-accent-foreground', {
+    variants: {
+        variant: {
+            default: '',
+            destructive: 'text-destructive data-[active]:bg-destructive/10 data-[active]:text-destructive',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+const SNY_DROPDOWN = new InjectionToken('SnyDropdown');
+class SnyDropdownDirective {
+    elementRef = inject(ElementRef);
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    toggle() { this.isOpen.update((v) => !v); }
+    open() { this.isOpen.set(true); }
+    close() { this.isOpen.set(false); }
+    onDocumentClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownDirective, isStandalone: true, selector: "[snyDropdown]", host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, properties: { "class": "\"relative inline-block\"" } }, providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }], exportAs: ["snyDropdown"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdown]',
+                    standalone: true,
+                    exportAs: 'snyDropdown',
+                    providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
+                    host: {
+                        '[class]': '"relative inline-block"',
+                    },
+                }]
+        }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+class SnyDropdownTriggerDirective {
+    dropdown = inject(SNY_DROPDOWN);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyDropdownTriggerDirective, isStandalone: true, selector: "[snyDropdownTrigger]", host: { listeners: { "click": "dropdown.toggle()" }, properties: { "attr.aria-expanded": "dropdown.isOpen()", "attr.aria-haspopup": "\"menu\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdownTrigger]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'dropdown.toggle()',
+                        '[attr.aria-expanded]': 'dropdown.isOpen()',
+                        '[attr.aria-haspopup]': '"menu"',
+                    },
+                }]
+        }] });
+class SnyDropdownContentDirective {
+    dropdown = inject(SNY_DROPDOWN);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownContentVariants(), 'absolute mt-1 left-0 animate-in fade-in-0 zoom-in-95', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDropdownContentDirective, isStandalone: true, selector: "[snyDropdownContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu" }, properties: { "class": "computedClass()", "style.display": "dropdown.isOpen() ? \"\" : \"none\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDropdownContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDropdownContent]',
+                    standalone: true,
+                    host: {
+                        'role': 'menu',
+                        '[class]': 'computedClass()',
+                        '[style.display]': 'dropdown.isOpen() ? "" : "none"',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownContentVariants(), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuContentDirective, isStandalone: true, selector: "[snyMenuContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuItemDirective {
+    dropdown = inject(SNY_DROPDOWN, { optional: true });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(dropdownItemVariants({ variant: this.variant() }), 'cursor-pointer hover:bg-accent hover:text-accent-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.dropdown?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuItemDirective, isStandalone: true, selector: "[snyMenuItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick()" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuItem]',
+                    standalone: true,
+                    host: {
+                        'role': 'menuitem',
+                        '[class]': 'computedClass()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuSeparatorDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuSeparatorDirective, isStandalone: true, selector: "[snyMenuSeparator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuSeparator]',
+                    standalone: true,
+                    host: {
+                        'role': 'separator',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyMenuLabelDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('px-2 py-1.5 text-sm font-semibold', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyMenuLabelDirective, isStandalone: true, selector: "[snyMenuLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyMenuLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyMenuLabel]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const fileInputVariants = cva('flex w-full cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'border-input',
+            error: 'border-destructive focus-visible:ring-destructive',
+        },
+        size: {
+            sm: 'h-8 text-xs',
+            md: 'h-10 text-sm',
+            lg: 'h-12 text-base',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});
+
+class SnyFileInputComponent {
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    placeholder = input('Choose file...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    fileChange = output();
+    error = output();
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    fileInputRef = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInputRef" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    fileName = computed(() => {
+        const files = this.value();
+        if (!files || files.length === 0)
+            return this.placeholder();
+        if (files.length === 1)
+            return files[0].name;
+        return `${files.length} files selected`;
+    }, ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => cn(fileInputVariants({ variant: this.variant(), size: this.size() }), this.isDragOver() && 'ring-2 ring-ring', this.class()), ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files) {
+            this.processFiles(input.files);
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        if (!this.isDisabled()) {
+            this.isDragOver.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver.set(false);
+        if (!this.isDisabled() && event.dataTransfer?.files) {
+            this.processFiles(event.dataTransfer.files);
+        }
+    }
+    clear() {
+        this.value.set(null);
+        const inputEl = this.fileInputRef()?.nativeElement;
+        if (inputEl)
+            inputEl.value = '';
+    }
+    processFiles(files) {
+        const maxSize = this.maxSize();
+        if (maxSize > 0) {
+            for (let i = 0; i < files.length; i++) {
+                if (files[i].size > maxSize) {
+                    this.error.emit(`File "${files[i].name}" exceeds maximum size of ${maxSize} bytes`);
+                    return;
+                }
+            }
+        }
+        this.value.set(files);
+        this.fileChange.emit(files);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: SnyFileInputComponent, isStandalone: true, selector: "sny-file-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", fileChange: "fileChange", error: "error" }, host: { properties: { "class": "\"w-full\"" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyFileInputComponent), multi: true },
+        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label
+      [class]="labelClass()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="placeholder()"
+        [attr.aria-invalid]="variant() === 'error' || null"
+        (change)="onFileSelected($event)"
+        (blur)="onTouched()"
+      />
+      <span class="truncate text-muted-foreground">{{ fileName() }}</span>
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFileInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-file-input',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '"w-full"',
+                    },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyFileInputComponent), multi: true },
+                    ],
+                    template: `
+    <label
+      [class]="labelClass()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="placeholder()"
+        [attr.aria-invalid]="variant() === 'error' || null"
+        (change)="onFileSelected($event)"
+        (blur)="onTouched()"
+      />
+      <span class="truncate text-muted-foreground">{{ fileName() }}</span>
+    </label>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], error: [{ type: i0.Output, args: ["error"] }], fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+const fieldsetVariants = cva('space-y-4', {
+    variants: {
+        variant: {
+            default: '',
+            bordered: 'rounded-lg border border-border p-4',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class SnyFieldsetDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(fieldsetVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFieldsetDirective, isStandalone: true, selector: "fieldset[snyFieldset]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 } }, host: { properties: { "class": "computedClass()", "attr.disabled": "disabled() || null", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fieldset[snyFieldset]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyFieldsetLegendDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-sm font-medium leading-none', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetLegendDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFieldsetLegendDirective, isStandalone: true, selector: "legend[snyFieldsetLegend]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetLegendDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'legend[snyFieldsetLegend]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyFieldsetContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('space-y-2', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFieldsetContentDirective, isStandalone: true, selector: "[snyFieldsetContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFieldsetContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyFieldsetContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const ratingVariants = cva('inline-flex items-center gap-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded', {
+    variants: {
+        size: {
+            sm: '[&_svg]:w-4 [&_svg]:h-4',
+            md: '[&_svg]:w-5 [&_svg]:h-5',
+            lg: '[&_svg]:w-7 [&_svg]:h-7',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+class SnyRatingComponent {
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    ratingVariant = input('star', ...(ngDevMode ? [{ debugName: "ratingVariant" }] : /* istanbul ignore next */ []));
+    half = input(false, ...(ngDevMode ? [{ debugName: "half" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.readonly() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hoverValue = signal(null, ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? 0);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    displayValue = computed(() => this.hoverValue() ?? this.value(), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    stars = computed(() => {
+        const display = this.displayValue();
+        const m = this.max();
+        return Array.from({ length: m }, (_, i) => {
+            let fill;
+            if (i + 1 <= display) {
+                fill = 'full';
+            }
+            else if (this.half() && i + 0.5 <= display) {
+                fill = 'half';
+            }
+            else {
+                fill = 'empty';
+            }
+            return { index: i, fill };
+        });
+    }, ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(ratingVariants({ size: this.size() }), this.isDisabled() && 'pointer-events-none', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    starClass(star) {
+        const base = 'cursor-pointer transition-colors';
+        switch (star.fill) {
+            case 'full':
+                return cn(base, 'fill-yellow-400 stroke-yellow-400');
+            case 'half':
+                return cn(base, 'fill-yellow-400/50 stroke-yellow-400');
+            case 'empty':
+                return cn(base, 'fill-none stroke-muted-foreground');
+        }
+    }
+    onStarClick(index) {
+        if (this.isDisabled())
+            return;
+        this.value.set(index);
+    }
+    onStarHover(index) {
+        if (this.isDisabled())
+            return;
+        this.hoverValue.set(index);
+    }
+    onMouseLeave() {
+        this.hoverValue.set(null);
+    }
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const step = this.half() ? 0.5 : 1;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.value.update((v) => Math.min(this.max(), v + step));
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.value.update((v) => Math.max(0, v - step));
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.value.set(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.value.set(this.max());
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyRatingComponent, isStandalone: true, selector: "sny-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ratingVariant: { classPropertyName: "ratingVariant", publicName: "ratingVariant", isSignal: true, isRequired: false, transformFunction: null }, half: { classPropertyName: "half", publicName: "half", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "mouseleave": "onMouseLeave()", "blur": "onTouched()" }, properties: { "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-label": "\"Rating\"", "attr.aria-readonly": "readonly() || null", "class": "computedClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyRatingComponent), multi: true },
+        ], ngImport: i0, template: `
+    @for (star of stars(); track star.index) {
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        [class]="starClass(star)"
+        (click)="onStarClick(star.index + 1)"
+        (mouseenter)="onStarHover(star.index + 1)"
+      >
+        @if (ratingVariant() === 'star') {
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        } @else {
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        }
+      </svg>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRatingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-rating',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'slider',
+                        'tabindex': '0',
+                        '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-label]': '"Rating"',
+                        '[attr.aria-readonly]': 'readonly() || null',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(blur)': 'onTouched()',
+                    },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyRatingComponent), multi: true },
+                    ],
+                    template: `
+    @for (star of stars(); track star.index) {
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        [class]="starClass(star)"
+        (click)="onStarClick(star.index + 1)"
+        (mouseenter)="onStarHover(star.index + 1)"
+      >
+        @if (ratingVariant() === 'star') {
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        } @else {
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        }
+      </svg>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ratingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratingVariant", required: false }] }], half: [{ type: i0.Input, args: [{ isSignal: true, alias: "half", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SnyNavbarDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Main navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant();
+        const base = 'flex items-center justify-between px-4 py-2 w-full bg-background';
+        const variantClass = v === 'bordered' ? 'border-b border-border' :
+            v === 'floating' ? 'mx-4 mt-2 rounded-lg border border-border shadow-sm' :
+                '';
+        const stickyClass = this.sticky() ? 'sticky top-0 z-50' : '';
+        return cn(base, variantClass, stickyClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyNavbarDirective, isStandalone: true, selector: "[snyNavbar]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyNavbar]',
+                    standalone: true,
+                    host: {
+                        'role': 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyNavbarBrandDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex items-center gap-2 font-bold text-lg', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarBrandDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyNavbarBrandDirective, isStandalone: true, selector: "[snyNavbarBrand]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarBrandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyNavbarBrand]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyNavbarContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex items-center gap-1', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyNavbarContentDirective, isStandalone: true, selector: "[snyNavbarContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyNavbarContent]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyNavbarEndDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex items-center gap-2 ml-auto', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyNavbarEndDirective, isStandalone: true, selector: "[snyNavbarEnd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyNavbarEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyNavbarEnd]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_DRAWER = new InjectionToken('SnyDrawer');
+class SnyDrawerLayoutComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    overlay = input(true, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative flex h-full w-full overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    toggle() { this.isOpen.update((v) => !v); }
+    open() { this.isOpen.set(true); }
+    close() { this.isOpen.set(false); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDrawerLayoutComponent, isStandalone: true, selector: "[snyDrawerLayout]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }], exportAs: ["snyDrawerLayout"], ngImport: i0, template: `
+    <ng-content />
+    @if (isOpen() && overlay()) {
+      <div
+        class="fixed inset-0 z-30 bg-black/50 transition-opacity"
+        (click)="close()"
+      ></div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[snyDrawerLayout]',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'snyDrawerLayout',
+                    providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }],
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    <ng-content />
+    @if (isOpen() && overlay()) {
+      <div
+        class="fixed inset-0 z-30 bg-black/50 transition-opacity"
+        (click)="close()"
+      ></div>
+    }
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }] } });
+/** @deprecated Use SnyDrawerLayoutComponent instead */
+const SnyDrawerLayoutDirective = SnyDrawerLayoutComponent;
+class SnyDrawerContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-1 overflow-auto', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDrawerContentDirective, isStandalone: true, selector: "[snyDrawerContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDrawerContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyDrawerSideDirective {
+    drawer = inject(SNY_DRAWER);
+    side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const isOpen = this.drawer.isOpen();
+        const s = this.side();
+        const base = 'fixed inset-y-0 z-40 w-64 bg-background border-r border-border transition-transform duration-300 ease-in-out';
+        const sideClass = s === 'left' ? 'left-0' : 'right-0 border-l border-r-0';
+        const transformClass = isOpen
+            ? 'translate-x-0'
+            : s === 'left' ? '-translate-x-full' : 'translate-x-full';
+        return cn(base, sideClass, transformClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerSideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDrawerSideDirective, isStandalone: true, selector: "[snyDrawerSide]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation", "aria-label": "Sidebar navigation" }, properties: { "attr.aria-modal": "drawer.overlay() && drawer.isOpen() || null", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerSideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDrawerSide]',
+                    standalone: true,
+                    host: {
+                        'role': 'navigation',
+                        'aria-label': 'Sidebar navigation',
+                        '[attr.aria-modal]': 'drawer.overlay() && drawer.isOpen() || null',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const paginationItemVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'bg-background hover:bg-accent hover:text-accent-foreground',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+        },
+        size: {
+            sm: 'h-8 w-8 text-xs',
+            md: 'h-9 w-9',
+            lg: 'h-10 w-10',
+        },
+        active: {
+            true: 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+        active: false,
+    },
+});
+
+function computePageRange(totalPages, currentPage, siblingCount, boundaryCount) {
+    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    const startPages = range(1, Math.min(boundaryCount, totalPages));
+    const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+    const result = [...startPages];
+    if (siblingsStart > boundaryCount + 2) {
+        result.push('ellipsis');
+    }
+    else if (boundaryCount + 1 < totalPages - boundaryCount) {
+        result.push(boundaryCount + 1);
+    }
+    result.push(...range(siblingsStart, siblingsEnd));
+    if (siblingsEnd < totalPages - boundaryCount - 1) {
+        result.push('ellipsis');
+    }
+    else if (totalPages - boundaryCount > boundaryCount) {
+        result.push(totalPages - boundaryCount);
+    }
+    result.push(...endPages);
+    return [...new Set(result)].sort((a, b) => {
+        if (a === 'ellipsis')
+            return 0;
+        if (b === 'ellipsis')
+            return 0;
+        return a - b;
+    });
+}
+class SnyPaginationComponent {
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    pages = computed(() => computePageRange(this.totalPages(), this.currentPage(), this.siblingCount(), this.boundaryCount()), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    hasPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    goToPage(page) {
+        if (page === 'ellipsis')
+            return;
+        this.currentPage.set(page);
+    }
+    prev() {
+        if (this.hasPrev())
+            this.currentPage.update((p) => p - 1);
+    }
+    next() {
+        if (this.hasNext())
+            this.currentPage.update((p) => p + 1);
+    }
+    pageClass(page) {
+        return cn(paginationItemVariants({
+            variant: this.variant(),
+            size: this.size(),
+            active: page === this.currentPage(),
+        }));
+    }
+    navBtnClass() {
+        return cn(paginationItemVariants({ variant: this.variant(), size: this.size(), active: false }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyPaginationComponent, isStandalone: true, selector: "sny-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, host: { attributes: { "role": "navigation", "aria-label": "Pagination" } }, ngImport: i0, template: `
+    <div class="flex items-center gap-1">
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasPrev()"
+        [attr.aria-label]="'Go to previous page'"
+        (click)="prev()"
+      >
+        <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>
+
+      @for (page of pages(); track $index) {
+        @if (page === 'ellipsis') {
+          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
+        } @else {
+          <button
+            [class]="pageClass(page)"
+            [attr.aria-label]="'Page ' + page"
+            [attr.aria-current]="page === currentPage() ? 'page' : null"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasNext()"
+        [attr.aria-label]="'Go to next page'"
+        (click)="next()"
+      >
+        <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>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-pagination',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'navigation',
+                        'aria-label': 'Pagination',
+                    },
+                    template: `
+    <div class="flex items-center gap-1">
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasPrev()"
+        [attr.aria-label]="'Go to previous page'"
+        (click)="prev()"
+      >
+        <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>
+
+      @for (page of pages(); track $index) {
+        @if (page === 'ellipsis') {
+          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
+        } @else {
+          <button
+            [class]="pageClass(page)"
+            [attr.aria-label]="'Page ' + page"
+            [attr.aria-current]="page === currentPage() ? 'page' : null"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </button>
+        }
+      }
+
+      <button
+        [class]="navBtnClass()"
+        [disabled]="!hasNext()"
+        [attr.aria-label]="'Go to next page'"
+        (click)="next()"
+      >
+        <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>
+  `,
+                }]
+        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const dividerVariants = cva('shrink-0 bg-border', {
+    variants: {
+        orientation: {
+            horizontal: 'h-[1px] w-full',
+            vertical: 'h-full w-[1px]',
+        },
+        variant: {
+            solid: '',
+            dashed: 'border-dashed',
+            dotted: 'border-dotted',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+        variant: 'solid',
+    },
+});
+
+class SnyDividerComponent {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    hasLabel = computed(() => !!this.label(), ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    dividerClass = computed(() => cn(dividerVariants({ orientation: this.orientation(), variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "dividerClass" }] : /* istanbul ignore next */ []));
+    lineClass = computed(() => cn('flex-1 bg-border', this.orientation() === 'horizontal' ? 'h-[1px]' : 'w-[1px]'), ...(ngDevMode ? [{ debugName: "lineClass" }] : /* istanbul ignore next */ []));
+    labelContainerClass = computed(() => cn('flex items-center', this.orientation() === 'horizontal' ? 'flex-row' : 'flex-col', this.class()), ...(ngDevMode ? [{ debugName: "labelContainerClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDividerComponent, isStandalone: true, selector: "sny-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()" } }, ngImport: i0, template: `
+    @if (hasLabel()) {
+      <div [class]="labelContainerClass()">
+        <div [class]="lineClass()"></div>
+        <span class="px-2 text-xs text-muted-foreground">{{ label() }}</span>
+        <div [class]="lineClass()"></div>
+      </div>
+    } @else {
+      <div [class]="dividerClass()"></div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-divider',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'separator',
+                        '[attr.aria-orientation]': 'orientation()',
+                    },
+                    template: `
+    @if (hasLabel()) {
+      <div [class]="labelContainerClass()">
+        <div [class]="lineClass()"></div>
+        <span class="px-2 text-xs text-muted-foreground">{{ label() }}</span>
+        <div [class]="lineClass()"></div>
+      </div>
+    } @else {
+      <div [class]="dividerClass()"></div>
+    }
+  `,
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_STEPS = new InjectionToken('SnySteps');
+class SnyStepDirective {
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const s = this.status();
+        const base = 'flex items-center gap-2';
+        // Step indicator via before: pseudo-element
+        const indicatorBase = 'before:flex before:items-center before:justify-center before:w-8 before:h-8 before:rounded-full before:border-2 before:text-xs before:shrink-0';
+        const statusIndicator = s === 'completed' ? 'before:bg-primary before:border-primary before:text-primary-foreground before:content-["✓"]' :
+            s === 'active' ? 'before:border-primary before:text-primary before:content-["●"]' :
+                s === 'error' ? 'before:border-destructive before:text-destructive before:content-["!"]' :
+                    'before:border-muted-foreground/30 before:text-muted-foreground before:content-["○"]';
+        const statusClass = s === 'completed' ? 'text-primary' :
+            s === 'active' ? 'text-primary font-medium' :
+                s === 'error' ? 'text-destructive' :
+                    'text-muted-foreground';
+        return cn(base, indicatorBase, statusIndicator, statusClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStepDirective, isStandalone: true, selector: "[snyStep]", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "computedClass()", "attr.aria-current": "status() === \"active\" ? \"step\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStepDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStep]',
+                    standalone: true,
+                    host: {
+                        'role': 'listitem',
+                        '[class]': 'computedClass()',
+                        '[attr.aria-current]': 'status() === "active" ? "step" : null',
+                    },
+                }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyStepsDirective {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    steps = contentChildren(SnyStepDirective, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    activeIndex = computed(() => {
+        const s = this.steps();
+        return s.findIndex((step) => step.status() === 'active');
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const o = this.orientation();
+        const s = this.size();
+        const base = 'flex';
+        const orientationClass = o === 'horizontal'
+            ? 'flex-row items-center gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:flex-1 [&>*+*]:before:h-px [&>*+*]:before:bg-border [&>*+*]:before:mx-2 [&>*+*]:before:min-w-[2rem]'
+            : 'flex-col gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:w-px [&>*+*]:before:h-4 [&>*+*]:before:bg-border [&>*+*]:before:ml-4';
+        const sizeClass = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-base' : 'text-sm';
+        return cn(base, orientationClass, sizeClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStepsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: SnyStepsDirective, isStandalone: true, selector: "[snySteps]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", 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 } }, host: { attributes: { "role": "list", "aria-label": "Progress steps" }, properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_STEPS, useExisting: SnyStepsDirective }], queries: [{ propertyName: "steps", predicate: SnyStepDirective, isSignal: true }], exportAs: ["snySteps"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStepsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snySteps]',
+                    standalone: true,
+                    exportAs: 'snySteps',
+                    providers: [{ provide: SNY_STEPS, useExisting: SnyStepsDirective }],
+                    host: {
+                        'role': 'list',
+                        'aria-label': 'Progress steps',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyStepDirective), { isSignal: true }] }] } });
+
+const SNY_STAT = new InjectionToken('SnyStat');
+let statIdCounter = 0;
+class SnyStatDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    titleId = `sny-stat-title-${++statIdCounter}`;
+    computedClass = computed(() => cn('flex flex-col gap-0.5', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatDirective, isStandalone: true, selector: "[snyStat]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_STAT, useExisting: SnyStatDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStat]',
+                    standalone: true,
+                    providers: [{ provide: SNY_STAT, useExisting: SnyStatDirective }],
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyStatTitleDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    stat = inject(SNY_STAT);
+    computedClass = computed(() => cn('text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatTitleDirective, isStandalone: true, selector: "[snyStatTitle]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "id": "stat.titleId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStatTitle]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[id]': 'stat.titleId',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyStatValueDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    stat = inject(SNY_STAT);
+    computedClass = computed(() => cn('text-2xl font-bold', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatValueDirective, isStandalone: true, selector: "[snyStatValue]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-labelledby": "stat.titleId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStatValue]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.aria-labelledby]': 'stat.titleId',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyStatDescriptionDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant();
+        const variantClass = v === 'success' ? 'text-green-600 dark:text-green-400' :
+            v === 'error' ? 'text-destructive' :
+                'text-muted-foreground';
+        return cn('text-xs', variantClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatDescriptionDirective, isStandalone: true, selector: "[snyStatDescription]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStatDescription]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyStatFigureDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatFigureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatFigureDirective, isStandalone: true, selector: "[snyStatFigure]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatFigureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStatFigure]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_TIMELINE = new InjectionToken('SnyTimeline');
+class SnyTimelineItemDirective {
+    connect = input('both', ...(ngDevMode ? [{ debugName: "connect" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative flex gap-4', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTimelineItemDirective, isStandalone: true, selector: "[snyTimelineItem]", inputs: { connect: { classPropertyName: "connect", publicName: "connect", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTimelineItem]',
+                    standalone: true,
+                    host: { 'role': 'listitem', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { connect: [{ type: i0.Input, args: [{ isSignal: true, alias: "connect", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyTimelineStartDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-sm text-muted-foreground min-w-[80px] text-right', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineStartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTimelineStartDirective, isStandalone: true, selector: "[snyTimelineStart]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineStartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTimelineStart]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyTimelineMiddleDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant();
+        const variantClass = v === 'primary' ? 'bg-primary' :
+            v === 'success' ? 'bg-green-600 dark:bg-green-500' :
+                v === 'error' ? 'bg-destructive' :
+                    'bg-border';
+        return cn('flex flex-col items-center', variantClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineMiddleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTimelineMiddleDirective, isStandalone: true, selector: "[snyTimelineMiddle]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineMiddleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTimelineMiddle]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()', 'aria-hidden': 'true' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyTimelineEndDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-1 pb-8', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineEndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyTimelineEndDirective, isStandalone: true, selector: "[snyTimelineEnd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineEndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTimelineEnd]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyTimelineDirective {
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    items = contentChildren(SnyTimelineItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const o = this.orientation();
+        return cn('relative', o === 'vertical' ? 'flex flex-col' : 'flex flex-row', this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: SnyTimelineDirective, isStandalone: true, selector: "[snyTimeline]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list", "aria-label": "Timeline" }, properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_TIMELINE, useExisting: SnyTimelineDirective }], queries: [{ propertyName: "items", predicate: SnyTimelineItemDirective, isSignal: true }], exportAs: ["snyTimeline"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTimelineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyTimeline]',
+                    standalone: true,
+                    exportAs: 'snyTimeline',
+                    providers: [{ provide: SNY_TIMELINE, useExisting: SnyTimelineDirective }],
+                    host: {
+                        'role': 'list',
+                        'aria-label': 'Timeline',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyTimelineItemDirective), { isSignal: true }] }] } });
+
+const kbdVariants = cva('pointer-events-none inline-flex select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono font-medium text-muted-foreground', {
+    variants: {
+        size: {
+            sm: 'h-5 text-[10px]',
+            md: 'h-6 text-xs',
+            lg: 'h-7 text-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+class SnyKbdDirective {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(kbdVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyKbdDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyKbdDirective, isStandalone: true, selector: "kbd[snyKbd]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyKbdDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kbd[snyKbd]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SnyListDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant();
+        const variantClass = v === 'bordered' ? 'divide-y divide-border border rounded-md' :
+            v === 'hover' ? '[&>[snyListItem]]:hover:bg-accent' :
+                '';
+        return cn('flex flex-col', variantClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyListDirective, isStandalone: true, selector: "[snyList]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyList]',
+                    standalone: true,
+                    host: {
+                        'role': 'list',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyListItemDirective {
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex items-center gap-3 px-3 py-2 transition-colors', this.active() && 'bg-accent text-accent-foreground', this.disabled() && 'opacity-50 pointer-events-none', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyListItemDirective, isStandalone: true, selector: "[snyListItem]", inputs: { active: { classPropertyName: "active", publicName: "active", 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 } }, host: { attributes: { "role": "listitem" }, properties: { "class": "computedClass()", "attr.aria-disabled": "disabled() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyListItem]',
+                    standalone: true,
+                    host: {
+                        'role': 'listitem',
+                        '[class]': 'computedClass()',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyListItemIconDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-shrink-0 text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyListItemIconDirective, isStandalone: true, selector: "[snyListItemIcon]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyListItemIcon]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyListItemContentDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-1 min-w-0', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyListItemContentDirective, isStandalone: true, selector: "[snyListItemContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyListItemContent]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyListItemActionDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-shrink-0', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyListItemActionDirective, isStandalone: true, selector: "[snyListItemAction]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyListItemActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyListItemAction]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const statusVariants = cva('inline-block rounded-full', {
+    variants: {
+        variant: {
+            default: 'bg-primary',
+            success: 'bg-green-500',
+            warning: 'bg-yellow-500',
+            error: 'bg-destructive',
+            info: 'bg-blue-500',
+            neutral: 'bg-muted-foreground',
+        },
+        size: {
+            xs: 'h-1.5 w-1.5',
+            sm: 'h-2 w-2',
+            md: 'h-2.5 w-2.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});
+
+const variantLabels = {
+    default: 'Active',
+    success: 'Online',
+    warning: 'Away',
+    error: 'Error',
+    info: 'Info',
+    neutral: 'Offline',
+};
+class SnyStatusDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    pulse = input(false, ...(ngDevMode ? [{ debugName: "pulse" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => variantLabels[this.variant()], ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(statusVariants({ variant: this.variant(), size: this.size() }), this.pulse() && 'animate-pulse', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyStatusDirective, isStandalone: true, selector: "[snyStatus]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pulse: { classPropertyName: "pulse", publicName: "pulse", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "ariaLabel()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyStatusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyStatus]',
+                    standalone: true,
+                    host: {
+                        'role': 'status',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const positionMap$1 = {
+    'top-start': 'top-0 left-0 -translate-x-1/2 -translate-y-1/2',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2',
+    'top-end': 'top-0 right-0 translate-x-1/2 -translate-y-1/2',
+    'middle-start': 'top-1/2 left-0 -translate-x-1/2 -translate-y-1/2',
+    'middle-end': 'top-1/2 right-0 translate-x-1/2 -translate-y-1/2',
+    'bottom-start': 'bottom-0 left-0 -translate-x-1/2 translate-y-1/2',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+    'bottom-end': 'bottom-0 right-0 translate-x-1/2 translate-y-1/2',
+};
+const variantMap = {
+    default: 'bg-primary text-primary-foreground',
+    primary: 'bg-primary text-primary-foreground',
+    secondary: 'bg-secondary text-secondary-foreground',
+    success: 'bg-green-600 text-white dark:bg-green-500',
+    warning: 'bg-yellow-500 text-white dark:bg-yellow-400 dark:text-black',
+    error: 'bg-destructive text-destructive-foreground',
+};
+class SnyIndicatorDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative inline-flex', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyIndicatorDirective, isStandalone: true, selector: "[snyIndicator]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyIndicator]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyIndicatorBadgeDirective {
+    position = input('top-end', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('absolute z-10 inline-flex items-center justify-center rounded-full text-xs font-bold min-w-[1.25rem] h-5 px-1', positionMap$1[this.position()], variantMap[this.variant()], this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyIndicatorBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyIndicatorBadgeDirective, isStandalone: true, selector: "[snyIndicatorBadge]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyIndicatorBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyIndicatorBadge]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_CHAT_BUBBLE = new InjectionToken('SnyChatBubble');
+class SnyChatBubbleDirective {
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex gap-3 mb-4', this.align() === 'end' && 'flex-row-reverse', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleDirective, isStandalone: true, selector: "[snyChatBubble]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "article" }, properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubble]',
+                    standalone: true,
+                    providers: [{ provide: SNY_CHAT_BUBBLE, useExisting: SnyChatBubbleDirective }],
+                    host: {
+                        'role': 'article',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyChatBubbleAvatarDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex-shrink-0 w-10 h-10 rounded-full overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleAvatarDirective, isStandalone: true, selector: "[snyChatBubbleAvatar]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubbleAvatar]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyChatBubbleHeaderDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-xs text-muted-foreground mb-1', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleHeaderDirective, isStandalone: true, selector: "[snyChatBubbleHeader]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubbleHeader]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyChatBubbleContentDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant();
+        const variantClass = v === 'primary' ? 'bg-primary text-primary-foreground' :
+            v === 'secondary' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100' :
+                v === 'accent' ? 'bg-violet-100 text-violet-900 dark:bg-violet-900 dark:text-violet-100' :
+                    'bg-muted';
+        return cn('rounded-lg px-3 py-2 text-sm max-w-[80%]', variantClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleContentDirective, isStandalone: true, selector: "[snyChatBubbleContent]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubbleContent]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyChatBubbleFooterDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('text-xs text-muted-foreground mt-1', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleFooterDirective, isStandalone: true, selector: "[snyChatBubbleFooter]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubbleFooter]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyChatBubbleBodyDirective {
+    chatBubble = inject(SNY_CHAT_BUBBLE);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex flex-col', this.chatBubble.align() === 'end' && 'items-end', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyChatBubbleBodyDirective, isStandalone: true, selector: "[snyChatBubbleBody]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyChatBubbleBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyChatBubbleBody]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_CAROUSEL = new InjectionToken('SnyCarousel');
+class SnyCarouselItemDirective {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('min-w-0 shrink-0 grow-0 basis-full pl-4', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCarouselItemDirective, isStandalone: true, selector: "[snyCarouselItem]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-roledescription": "\"slide\"", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCarouselItem]',
+                    standalone: true,
+                    host: {
+                        'role': 'group',
+                        '[attr.aria-roledescription]': '"slide"',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyCarouselContentDirective {
+    carousel = inject(SNY_CAROUSEL);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex -ml-4 transition-transform duration-300 ease-in-out', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    transformStyle = computed(() => `translateX(-${this.carousel.currentIndex() * 100}%)`, ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCarouselContentDirective, isStandalone: true, selector: "[snyCarouselContent]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "style.transform": "transformStyle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCarouselContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[style.transform]': 'transformStyle()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyCarouselDirective {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    loop = input(false, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    autoplay = input(0, ...(ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    items = contentChildren(SnyCarouselItemDirective, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+    totalItems = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    autoplayInterval = null;
+    constructor() {
+        effect(() => {
+            const ms = this.autoplay();
+            this.clearAutoplay();
+            if (ms > 0) {
+                this.autoplayInterval = setInterval(() => this.next(), ms);
+            }
+        });
+    }
+    next() {
+        const total = this.totalItems();
+        if (total === 0)
+            return;
+        this.currentIndex.update((i) => {
+            if (i >= total - 1)
+                return this.loop() ? 0 : i;
+            return i + 1;
+        });
+    }
+    prev() {
+        const total = this.totalItems();
+        if (total === 0)
+            return;
+        this.currentIndex.update((i) => {
+            if (i <= 0)
+                return this.loop() ? total - 1 : i;
+            return i - 1;
+        });
+    }
+    goTo(index) {
+        this.currentIndex.set(Math.max(0, Math.min(index, this.totalItems() - 1)));
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.prev();
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.next();
+                break;
+        }
+    }
+    ngOnDestroy() {
+        this.clearAutoplay();
+    }
+    clearAutoplay() {
+        if (this.autoplayInterval) {
+            clearInterval(this.autoplayInterval);
+            this.autoplayInterval = null;
+        }
+    }
+    computedClass = computed(() => cn('relative overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: SnyCarouselDirective, isStandalone: true, selector: "[snyCarousel]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region", "aria-label": "Carousel", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-roledescription": "\"carousel\"", "class": "computedClass()" } }, providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }], queries: [{ propertyName: "items", predicate: SnyCarouselItemDirective, descendants: true, isSignal: true }], exportAs: ["snyCarousel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCarousel]',
+                    standalone: true,
+                    exportAs: 'snyCarousel',
+                    providers: [{ provide: SNY_CAROUSEL, useExisting: SnyCarouselDirective }],
+                    host: {
+                        'role': 'region',
+                        '[attr.aria-roledescription]': '"carousel"',
+                        'aria-label': 'Carousel',
+                        'tabindex': '0',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyCarouselItemDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+class SnyCarouselPrevDirective {
+    carousel = inject(SNY_CAROUSEL);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('absolute left-2 top-1/2 -translate-y-1/2 z-10', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselPrevDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCarouselPrevDirective, isStandalone: true, selector: "[snyCarouselPrev]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.prev()" }, properties: { "attr.aria-label": "\"Previous slide\"", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselPrevDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCarouselPrev]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'carousel.prev()',
+                        '[attr.aria-label]': '"Previous slide"',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyCarouselNextDirective {
+    carousel = inject(SNY_CAROUSEL);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('absolute right-2 top-1/2 -translate-y-1/2 z-10', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCarouselNextDirective, isStandalone: true, selector: "[snyCarouselNext]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "carousel.next()" }, properties: { "attr.aria-label": "\"Next slide\"", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCarouselNextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCarouselNext]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'carousel.next()',
+                        '[attr.aria-label]': '"Next slide"',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SnyDockDirective {
+    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    computedClass = computed(() => cn('fixed left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 rounded-full border bg-background/80 backdrop-blur-sm px-3 py-2 shadow-lg', this.position() === 'bottom' ? 'bottom-4' : 'top-4', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    onKeydown(event) {
+        const items = Array.from(this.elRef.nativeElement.querySelectorAll('[snyDockItem]'));
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        if (currentIndex === -1)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                nextIndex = (currentIndex + 1) % items.length;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                nextIndex = (currentIndex - 1 + items.length) % items.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                nextIndex = items.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            items[nextIndex].focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDockDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDockDirective, isStandalone: true, selector: "[snyDock]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar", "aria-label": "Dock" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDockDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDock]',
+                    standalone: true,
+                    host: {
+                        'role': 'toolbar',
+                        'aria-label': 'Dock',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyDockItemDirective {
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center justify-center rounded-full p-2 transition-all hover:scale-110', this.active() && 'bg-primary text-primary-foreground', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDockItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyDockItemDirective, isStandalone: true, selector: "[snyDockItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()", "attr.tabindex": "active() ? 0 : -1" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDockItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyDockItem]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                        '[attr.tabindex]': 'active() ? 0 : -1',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SNY_FAB = new InjectionToken('SnyFab');
+const positionMap = {
+    'bottom-right': 'fixed bottom-6 right-6',
+    'bottom-left': 'fixed bottom-6 left-6',
+    'top-right': 'fixed top-6 right-6',
+    'top-left': 'fixed top-6 left-6',
+};
+class SnyFabDirective {
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    direction = input('up', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    toggle() { this.isOpen.update((v) => !v); }
+    open() { this.isOpen.set(true); }
+    close() { this.isOpen.set(false); }
+    computedClass = computed(() => cn('z-50 flex flex-col items-center gap-2', positionMap[this.position()], this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFabDirective, isStandalone: true, selector: "[snyFab]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }], exportAs: ["snyFab"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyFab]',
+                    standalone: true,
+                    exportAs: 'snyFab',
+                    providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }],
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyFabTriggerDirective {
+    fab = inject(SNY_FAB);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg h-14 w-14 hover:bg-primary/90 transition-transform', this.fab.isOpen() && 'rotate-45', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFabTriggerDirective, isStandalone: true, selector: "[snyFabTrigger]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Quick actions" }, listeners: { "click": "fab.toggle()" }, properties: { "attr.aria-expanded": "fab.isOpen()", "attr.aria-haspopup": "\"menu\"", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyFabTrigger]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'fab.toggle()',
+                        '[attr.aria-expanded]': 'fab.isOpen()',
+                        '[attr.aria-haspopup]': '"menu"',
+                        'aria-label': 'Quick actions',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyFabActionDirective {
+    fab = inject(SNY_FAB);
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center justify-center rounded-full bg-secondary text-secondary-foreground shadow-md h-10 w-10 transition-all', this.fab.isOpen() ? 'scale-100 opacity-100' : 'scale-0 opacity-0', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyFabActionDirective, isStandalone: true, selector: "[snyFabAction]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, properties: { "attr.aria-label": "ariaLabel() || null", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyFabActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyFabAction]',
+                    standalone: true,
+                    host: {
+                        'role': 'menuitem',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const sizeMap = { sm: 48, md: 72, lg: 96 };
+const variantColorMap = {
+    default: 'stroke-primary',
+    success: 'stroke-green-600 dark:stroke-green-500',
+    warning: 'stroke-yellow-500',
+    error: 'stroke-destructive',
+    info: 'stroke-blue-600 dark:stroke-blue-500',
+};
+class SnyRadialProgressComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    thickness = input(4, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    svgSize = computed(() => sizeMap[this.size()], ...(ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []));
+    radius = computed(() => (this.svgSize() - this.thickness()) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    offset = computed(() => this.circumference() - (this.value() / 100) * this.circumference(), ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    strokeClass = computed(() => variantColorMap[this.variant()], ...(ngDevMode ? [{ debugName: "strokeClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRadialProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SnyRadialProgressComponent, isStandalone: true, selector: "sny-radial-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "class": "\"inline-flex items-center justify-center\"" } }, ngImport: i0, template: `
+    <div class="relative" [style.width.px]="svgSize()" [style.height.px]="svgSize()">
+      <svg [attr.width]="svgSize()" [attr.height]="svgSize()" class="-rotate-90">
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          class="stroke-muted"
+          [attr.stroke-width]="thickness()"
+        />
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          [class]="strokeClass()"
+          [attr.stroke-width]="thickness()"
+          [attr.stroke-dasharray]="circumference()"
+          [attr.stroke-dashoffset]="offset()"
+          stroke-linecap="round"
+          class="transition-all duration-300"
+        />
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRadialProgressComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-radial-progress',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'role': 'progressbar',
+                        '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[class]': '"inline-flex items-center justify-center"',
+                    },
+                    template: `
+    <div class="relative" [style.width.px]="svgSize()" [style.height.px]="svgSize()">
+      <svg [attr.width]="svgSize()" [attr.height]="svgSize()" class="-rotate-90">
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          class="stroke-muted"
+          [attr.stroke-width]="thickness()"
+        />
+        <circle
+          [attr.cx]="svgSize() / 2"
+          [attr.cy]="svgSize() / 2"
+          [attr.r]="radius()"
+          fill="none"
+          [class]="strokeClass()"
+          [attr.stroke-width]="thickness()"
+          [attr.stroke-dasharray]="circumference()"
+          [attr.stroke-dashoffset]="offset()"
+          stroke-linecap="round"
+          class="transition-all duration-300"
+        />
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <ng-content />
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SnyDiffComponent {
+    value = model(50, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    onPointerDown(event) {
+        this.isDragging.set(true);
+        event.target.setPointerCapture?.(event.pointerId);
+        this.updateValue(event);
+    }
+    onPointerMove(event) {
+        if (!this.isDragging())
+            return;
+        this.updateValue(event);
+    }
+    onPointerUp() {
+        this.isDragging.set(false);
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.value.update((v) => Math.max(0, v - 5));
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.value.update((v) => Math.min(100, v + 5));
+                break;
+        }
+    }
+    updateValue(event) {
+        const target = event.currentTarget.closest('sny-diff');
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const pct = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        this.value.set(Math.round(pct));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDiffComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SnyDiffComponent, isStandalone: true, selector: "sny-diff", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp()", "keydown": "onKeydown($event)" }, properties: { "class": "\"relative overflow-hidden select-none w-full\"" } }, ngImport: i0, template: `
+    <div class="relative w-full" [style.aspect-ratio]="'16/9'">
+      <div class="absolute inset-0">
+        <ng-content select="[snyDiffAfter]" />
+      </div>
+      <div class="absolute inset-0 overflow-hidden" [style.width.%]="value()">
+        <ng-content select="[snyDiffBefore]" />
+      </div>
+      <div
+        class="absolute top-0 bottom-0 w-1 bg-foreground cursor-col-resize z-10"
+        [style.left.%]="value()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-valuenow]="value()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="Comparison slider"
+      >
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-foreground/80 flex items-center justify-center text-background text-xs">
+          ⇔
+        </div>
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDiffComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-diff',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '"relative overflow-hidden select-none w-full"',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `
+    <div class="relative w-full" [style.aspect-ratio]="'16/9'">
+      <div class="absolute inset-0">
+        <ng-content select="[snyDiffAfter]" />
+      </div>
+      <div class="absolute inset-0 overflow-hidden" [style.width.%]="value()">
+        <ng-content select="[snyDiffBefore]" />
+      </div>
+      <div
+        class="absolute top-0 bottom-0 w-1 bg-foreground cursor-col-resize z-10"
+        [style.left.%]="value()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-valuenow]="value()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="Comparison slider"
+      >
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-foreground/80 flex items-center justify-center text-background text-xs">
+          ⇔
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const linkVariants = cva('inline-flex items-center gap-1 underline-offset-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded', {
+    variants: {
+        variant: {
+            default: 'text-foreground underline hover:text-foreground/80',
+            primary: 'text-primary underline hover:text-primary/80',
+            secondary: 'text-muted-foreground underline hover:text-foreground',
+            hover: 'text-foreground no-underline hover:underline',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+
+class SnyLinkDirective {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(linkVariants({ variant: this.variant() }), this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyLinkDirective, isStandalone: true, selector: "a[snyLink]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[snyLink]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], 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 {
+    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 */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    viewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    _onChange = () => { };
+    onTouched = () => { };
+    _writing = false;
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            if (this._writing) {
+                this._writing = false;
+                return;
+            }
+            this._onChange(val);
+        });
+    }
+    writeValue(val) {
+        this._writing = true;
+        this.value.set(val ?? null);
+        if (val) {
+            this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    monthYearLabel = computed(() => {
+        const d = this.viewDate();
+        return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
+    }, ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    days = computed(() => {
+        const view = this.viewDate();
+        const year = view.getFullYear();
+        const month = view.getMonth();
+        const today = new Date();
+        const selected = this.value();
+        const minDate = this.min();
+        const maxDate = this.max();
+        const firstDay = new Date(year, month, 1);
+        const startDay = firstDay.getDay();
+        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));
+        }
+        // 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));
+        }
+        // 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));
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    prevMonth() {
+        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+    }
+    nextMonth() {
+        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+    }
+    selectDate(date) {
+        this.value.set(date);
+        this.onTouched();
+    }
+    onKeydown(event) {
+        // Simplified keyboard navigation
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.navigateDays(-1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.navigateDays(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.navigateDays(-7);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.navigateDays(7);
+                break;
+        }
+    }
+    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');
+    }
+    navigateDays(offset) {
+        const current = this.value() ?? new Date();
+        const next = new Date(current);
+        next.setDate(next.getDate() + offset);
+        this.value.set(next);
+        this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
+    }
+    createDay(date, isCurrentMonth, today, selected, 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 };
+    }
+    isSameDay(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            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: [
+            { 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>
+
+    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+      @for (dayName of weekDays; track dayName) {
+        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+      }
+      @for (day of days(); track day.date.getTime()) {
+        <button
+          [class]="dayClass(day)"
+          [disabled]="day.isDisabled"
+          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-current]="day.isToday ? 'date' : null"
+          [attr.aria-disabled]="day.isDisabled || null"
+          (click)="selectDate(day.date)"
+        >
+          {{ day.day }}
+        </button>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCalendarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-calendar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '"inline-block p-3 rounded-md border bg-background"',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    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>
+
+    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+      @for (dayName of weekDays; track dayName) {
+        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+      }
+      @for (day of days(); track day.date.getTime()) {
+        <button
+          [class]="dayClass(day)"
+          [disabled]="day.isDisabled"
+          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-current]="day.isToday ? 'date' : null"
+          [attr.aria-disabled]="day.isDisabled || null"
+          (click)="selectDate(day.date)"
+        >
+          {{ day.day }}
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], 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 }] }] } });
+
+class SnyValidatorDirective {
+    control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.control()?.errors ?? null, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    showErrors = computed(() => {
+        const c = this.control();
+        return c ? c.touched && c.invalid : false;
+    }, ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex flex-col gap-1 mt-1', this.class()), ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyValidatorDirective, isStandalone: true, selector: "[snyValidator]", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyValidator]',
+                    standalone: true,
+                    host: { '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class SnyValidatorHintDirective {
+    when = input('', ...(ngDevMode ? [{ debugName: "when" }] : /* istanbul ignore next */ []));
+    type = input('error', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** @deprecated Use `type` instead */
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => {
+        const v = this.variant() ?? this.type();
+        const variantClass = v === 'success' ? 'text-green-600 dark:text-green-400' :
+            v === 'warning' ? 'text-amber-600 dark:text-amber-400' :
+                v === 'info' ? 'text-blue-600 dark:text-blue-400' :
+                    'text-destructive';
+        return cn('text-xs', variantClass, this.class());
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyValidatorHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyValidatorHintDirective, isStandalone: true, selector: "[snyValidatorHint]", inputs: { when: { classPropertyName: "when", publicName: "when", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyValidatorHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyValidatorHint]',
+                    standalone: true,
+                    host: {
+                        'role': 'alert',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { when: [{ type: i0.Input, args: [{ isSignal: true, alias: "when", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of @sonny-ui/core
  */
@@ -2361,5 +5350,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_CONFIG, SNY_DIALOG_DATA, SNY_SHEET_DATA, SNY_TABLE, SNY_TABS, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCheckboxDirective, SnyComboboxComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyInputDirective, SnyLabelDirective, SnyLoaderComponent, SnyRadioDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, ThemeService, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, comboboxTriggerVariants, inputVariants, labelVariants, loaderVariants, provideSonnyUI, radioVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, toastVariants, toggleVariants };
+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, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyComboboxComponent, 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, 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, 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 };
 //# sourceMappingURL=sonny-ui-core.mjs.map