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

package/fesm2022/sonny-ui-core.mjs

@@ -3,8 +3,8 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, Injector, afterNextRender, effect, Renderer2, output, contentChildren } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, forwardRef, HostListener, TemplateRef, output, contentChildren, contentChild, effect, untracked, Injector, afterNextRender, Renderer2, linkedSignal } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { createGlobalPositionStrategy } from '@angular/cdk/overlay';
@@ -2417,6 +2417,1146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { 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 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 }] }] } });
+
+class SnyCellDefDirective {
+    snyCell = input.required(...(ngDevMode ? [{ debugName: "snyCell" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyCellDefDirective, isStandalone: true, selector: "[snyCell]", inputs: { snyCell: { classPropertyName: "snyCell", publicName: "snyCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { snyCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyCell", required: true }] }] } });
+class SnyHeaderCellDefDirective {
+    snyHeaderCell = input.required(...(ngDevMode ? [{ debugName: "snyHeaderCell" }] : /* istanbul ignore next */ []));
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyHeaderCellDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SnyHeaderCellDefDirective, isStandalone: true, selector: "[snyHeaderCell]", inputs: { snyHeaderCell: { classPropertyName: "snyHeaderCell", publicName: "snyHeaderCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyHeaderCellDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyHeaderCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { snyHeaderCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "snyHeaderCell", required: true }] }] } });
+class SnyBulkActionsDefDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyBulkActionsDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyBulkActionsDefDirective, isStandalone: true, selector: "[snyBulkActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyBulkActionsDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyBulkActions]',
+                    standalone: true,
+                }]
+        }] });
+class SnyRowExpandDefDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRowExpandDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SnyRowExpandDefDirective, isStandalone: true, selector: "[snyRowExpand]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyRowExpandDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[snyRowExpand]',
+                    standalone: true,
+                }]
+        }] });
+
+const DEFAULT_PAGINATION = {
+    pageSize: 10,
+    pageSizeOptions: [5, 10, 25, 50],
+};
+class SnyDataTableComponent {
+    // Inputs
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    density = input('normal', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    paginated = input(true, ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
+    filterable = input(true, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    showExport = input(false, ...(ngDevMode ? [{ debugName: "showExport" }] : /* istanbul ignore next */ []));
+    showColumnToggle = input(false, ...(ngDevMode ? [{ debugName: "showColumnToggle" }] : /* istanbul ignore next */ []));
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadingRows = input(5, ...(ngDevMode ? [{ debugName: "loadingRows" }] : /* istanbul ignore next */ []));
+    paginationConfig = input(DEFAULT_PAGINATION, ...(ngDevMode ? [{ debugName: "paginationConfig" }] : /* istanbul ignore next */ []));
+    trackBy = input('', ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    noDataText = input('No data available', ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
+    // Model
+    selectedRows = model([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
+    // Outputs
+    sortChanged = output();
+    rowClicked = output();
+    dataExported = output();
+    // Content queries
+    cellDefs = contentChildren(SnyCellDefDirective, ...(ngDevMode ? [{ debugName: "cellDefs" }] : /* istanbul ignore next */ []));
+    headerCellDefs = contentChildren(SnyHeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDefs" }] : /* istanbul ignore next */ []));
+    bulkActionsDef = contentChild(SnyBulkActionsDefDirective, ...(ngDevMode ? [{ debugName: "bulkActionsDef" }] : /* istanbul ignore next */ []));
+    rowExpandDef = contentChild(SnyRowExpandDefDirective, ...(ngDevMode ? [{ debugName: "rowExpandDef" }] : /* istanbul ignore next */ []));
+    // Internal state
+    sortState = signal({ key: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    hiddenColumns = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
+    expandedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
+    // Template def maps
+    cellDefMap = computed(() => {
+        const map = new Map();
+        for (const def of this.cellDefs()) {
+            map.set(def.snyCell(), def.template);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "cellDefMap" }] : /* istanbul ignore next */ []));
+    headerCellDefMap = computed(() => {
+        const map = new Map();
+        for (const def of this.headerCellDefs()) {
+            map.set(def.snyHeaderCell(), def.template);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "headerCellDefMap" }] : /* istanbul ignore next */ []));
+    // Visible columns
+    visibleColumns = computed(() => this.columns().filter((col) => col.visible !== false && !this.hiddenColumns().has(col.key)), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    // Page size options
+    pageSizeOptions = computed(() => this.paginationConfig().pageSizeOptions.map((n) => ({
+        value: String(n),
+        label: String(n),
+    })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeValue = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeValue" }] : /* istanbul ignore next */ []));
+    // Skeleton rows
+    skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    // Bulk actions visibility
+    showBulkActions = computed(() => this.selectable() &&
+        this.selectedRows().length > 0 &&
+        this.bulkActionsDef() != null, ...(ngDevMode ? [{ debugName: "showBulkActions" }] : /* istanbul ignore next */ []));
+    // Data pipeline (filter uses all columns, not just visible)
+    filteredData = computed(() => {
+        const text = this.filterText().toLowerCase().trim();
+        const rows = this.data();
+        if (!text)
+            return rows;
+        const cols = this.columns().filter((c) => c.filterable !== false);
+        return rows.filter((row) => cols.some((col) => String(row[col.key] ?? '').toLowerCase().includes(text)));
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    sortedData = computed(() => {
+        const { key, direction } = this.sortState();
+        const rows = this.filteredData();
+        if (!key || !direction)
+            return rows;
+        return [...rows].sort((a, b) => {
+            const aVal = a[key];
+            const bVal = b[key];
+            if (aVal == null && bVal == null)
+                return 0;
+            if (aVal == null)
+                return direction === 'asc' ? -1 : 1;
+            if (bVal == null)
+                return direction === 'asc' ? 1 : -1;
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return direction === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            const cmp = String(aVal).localeCompare(String(bVal));
+            return direction === 'asc' ? cmp : -cmp;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => Math.max(1, Math.ceil(this.filteredData().length / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    paginatedData = computed(() => {
+        if (!this.paginated())
+            return this.sortedData();
+        const start = (this.currentPage() - 1) * this.pageSize();
+        return this.sortedData().slice(start, start + this.pageSize());
+    }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : /* istanbul ignore next */ []));
+    totalColSpan = computed(() => this.visibleColumns().length +
+        (this.selectable() ? 1 : 0) +
+        (this.expandable() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColSpan" }] : /* istanbul ignore next */ []));
+    // Selection computed
+    allSelected = computed(() => {
+        const page = this.paginatedData();
+        if (page.length === 0)
+            return false;
+        const selected = this.selectedRows();
+        return page.every((row) => this.isRowInList(row, selected));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => {
+        const page = this.paginatedData();
+        const selected = this.selectedRows();
+        return page.some((row) => this.isRowInList(row, selected));
+    }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const config = this.paginationConfig();
+            untracked(() => this.pageSize.set(config.pageSize));
+        });
+        effect(() => {
+            this.filterText();
+            this.pageSize();
+            this.data();
+            untracked(() => this.currentPage.set(1));
+        });
+    }
+    // Sort
+    toggleSort(key) {
+        const current = this.sortState();
+        let direction;
+        if (current.key !== key) {
+            direction = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            direction = 'desc';
+        }
+        else if (current.direction === 'desc') {
+            direction = null;
+        }
+        else {
+            direction = 'asc';
+        }
+        const next = { key: direction ? key : '', direction };
+        this.sortState.set(next);
+        this.sortChanged.emit(next);
+    }
+    // Filter
+    onFilterInput(event) {
+        this.filterText.set(event.target.value);
+    }
+    // Page size
+    onPageSizeChange(value) {
+        this.pageSize.set(Number(value));
+    }
+    // Selection
+    toggleSelectAll() {
+        if (this.allSelected()) {
+            const page = this.paginatedData();
+            this.selectedRows.update((sel) => sel.filter((r) => !page.some((p) => this.rowsEqual(r, p))));
+        }
+        else {
+            const page = this.paginatedData();
+            this.selectedRows.update((sel) => {
+                const newSel = [...sel];
+                for (const row of page) {
+                    if (!this.isRowInList(row, newSel))
+                        newSel.push(row);
+                }
+                return newSel;
+            });
+        }
+    }
+    toggleRowSelection(row) {
+        this.selectedRows.update((sel) => this.isRowInList(row, sel)
+            ? sel.filter((r) => !this.rowsEqual(r, row))
+            : [...sel, row]);
+    }
+    // Row click
+    onRowClick(row) {
+        this.rowClicked.emit(row);
+    }
+    // Export
+    onExport() {
+        this.dataExported.emit(this.filteredData());
+    }
+    // Column visibility
+    toggleColumnVisibility(key) {
+        this.hiddenColumns.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    // Expansion
+    toggleRowExpansion(row) {
+        const key = this.trackBy() ? row[this.trackBy()] : row;
+        this.expandedRows.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
+    isExpanded(row) {
+        const key = this.trackBy() ? row[this.trackBy()] : row;
+        return this.expandedRows().has(key);
+    }
+    // Helpers
+    isSelected(row) {
+        return this.isRowInList(row, this.selectedRows());
+    }
+    trackByFn(row, index) {
+        const key = this.trackBy();
+        return key ? row[key] : index;
+    }
+    isRowInList(row, list) {
+        return list.some((r) => this.rowsEqual(r, row));
+    }
+    rowsEqual(a, b) {
+        const key = this.trackBy();
+        if (key)
+            return a[key] === b[key];
+        return a === b;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDataTableComponent, isStandalone: true, selector: "sny-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortChanged: "sortChanged", rowClicked: "rowClicked", dataExported: "dataExported" }, queries: [{ propertyName: "cellDefs", predicate: SnyCellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: SnyHeaderCellDefDirective, isSignal: true }, { propertyName: "bulkActionsDef", first: true, predicate: SnyBulkActionsDefDirective, descendants: true, isSignal: true }, { propertyName: "rowExpandDef", first: true, predicate: SnyRowExpandDefDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <!-- Toolbar -->
+    @if (filterable() || showExport() || showColumnToggle()) {
+      <div class="flex items-center justify-between gap-4 mb-4 flex-wrap">
+        @if (filterable()) {
+          <input
+            snyInput
+            [value]="filterText()"
+            (input)="onFilterInput($event)"
+            placeholder="Filter..."
+            class="w-full sm:max-w-sm"
+          />
+        }
+        <div class="flex items-center gap-2">
+          @if (showExport()) {
+            <button snyBtn variant="outline" size="sm" (click)="onExport()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>
+              <span class="hidden sm:inline">Export</span>
+            </button>
+          }
+          @if (showColumnToggle()) {
+            <div snyDropdown class="relative">
+              <button snyBtn variant="outline" size="sm" snyDropdownTrigger>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
+                <span class="hidden sm:inline">Columns</span>
+              </button>
+              <div snyDropdownContent class="w-48 right-0 left-auto">
+                @for (col of columns(); track col.key) {
+                  <label snyMenuItem class="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="!hiddenColumns().has(col.key)"
+                      (change)="toggleColumnVisibility(col.key)"
+                      (click)="$event.stopPropagation()"
+                    />
+                    {{ col.label }}
+                  </label>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Bulk Actions Bar -->
+    @if (showBulkActions()) {
+      @let selected = selectedRows();
+      <div class="flex items-center gap-2 mb-4 p-3 bg-muted/50 rounded-sm border border-border flex-wrap">
+        <span class="text-sm font-medium text-muted-foreground mr-2">
+          {{ selected.length }} selected
+        </span>
+        <ng-container
+          [ngTemplateOutlet]="bulkActionsDef()!.template"
+          [ngTemplateOutletContext]="{ $implicit: selected }"
+        />
+        <button
+          snyBtn variant="ghost" size="sm" class="ml-auto"
+          (click)="selectedRows.set([])"
+        >
+          Clear
+        </button>
+      </div>
+    }
+
+    <!-- Table -->
+    <div class="overflow-auto border border-border rounded-sm">
+      <table
+        snyTable
+        [variant]="variant()"
+        [density]="density()"
+        [hoverable]="hoverable()"
+        [stickyHeader]="stickyHeader()"
+      >
+        <thead snyTableHeader>
+          <tr snyTableRow>
+            @if (selectable()) {
+              <th snyTableHead class="w-12">
+                <input
+                  type="checkbox"
+                  snyCheckbox
+                  [checked]="allSelected()"
+                  [indeterminate]="someSelected() && !allSelected()"
+                  (change)="toggleSelectAll()"
+                />
+              </th>
+            }
+            @if (expandable()) {
+              <th snyTableHead class="w-10"></th>
+            }
+            @let sort = sortState();
+            @let headerDefs = headerCellDefMap();
+            @for (col of visibleColumns(); track col.key) {
+              <th
+                snyTableHead
+                [style.width]="col.width ?? null"
+                [class]="col.sortable ? 'cursor-pointer select-none' : ''"
+                (click)="col.sortable ? toggleSort(col.key) : null"
+              >
+                @if (headerDefs.has(col.key)) {
+                  <ng-container
+                    [ngTemplateOutlet]="headerDefs.get(col.key)!"
+                    [ngTemplateOutletContext]="{ $implicit: col }"
+                  />
+                } @else {
+                  <div class="flex items-center gap-1">
+                    <span>{{ col.label }}</span>
+                    @if (col.sortable) {
+                      @let isActive = sort.key === col.key;
+                      @if (isActive && sort.direction === 'asc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/></svg>
+                      } @else if (isActive && sort.direction === 'desc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 12-7 7-7-7"/></svg>
+                      } @else {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+                      }
+                    }
+                  </div>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody snyTableBody>
+          @if (loading()) {
+            @for (i of skeletonRows(); track i) {
+              <tr snyTableRow>
+                @if (selectable()) {
+                  <td snyTableCell class="w-12"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    <div snySkeleton class="w-full h-4 rounded"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (paginatedData().length === 0) {
+            <tr snyTableRow>
+              <td
+                snyTableCell
+                [attr.colspan]="totalColSpan()"
+                class="text-center text-muted-foreground py-8"
+              >
+                {{ noDataText() }}
+              </td>
+            </tr>
+          } @else {
+            @let cellDefs = cellDefMap();
+            @let cols = visibleColumns();
+            @let expandTpl = rowExpandDef();
+            @for (row of paginatedData(); track trackByFn(row, $index)) {
+              <tr
+                snyTableRow
+                [attr.data-state]="isSelected(row) ? 'selected' : null"
+                (click)="onRowClick(row)"
+                class="cursor-pointer"
+              >
+                @if (selectable()) {
+                  <td snyTableCell class="w-12">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="isSelected(row)"
+                      (change)="toggleRowSelection(row)"
+                      (click)="$event.stopPropagation()"
+                    />
+                  </td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10">
+                    <button
+                      class="p-0.5 rounded hover:bg-accent transition-transform duration-150"
+                      [class.rotate-90]="isExpanded(row)"
+                      (click)="toggleRowExpansion(row); $event.stopPropagation()"
+                    >
+                      <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>
+                  </td>
+                }
+                @for (col of cols; track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    @if (cellDefs.has(col.key)) {
+                      <ng-container
+                        [ngTemplateOutlet]="cellDefs.get(col.key)!"
+                        [ngTemplateOutletContext]="{ $implicit: row[col.key], row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+              @if (expandable() && isExpanded(row) && expandTpl) {
+                <tr snyTableRow>
+                  <td snyTableCell [attr.colspan]="totalColSpan()" class="bg-muted/30">
+                    <ng-container
+                      [ngTemplateOutlet]="expandTpl.template"
+                      [ngTemplateOutletContext]="{ $implicit: row }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer -->
+    @if (paginated()) {
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4 gap-3 sm:gap-4">
+        <span class="text-sm text-muted-foreground">
+          @if (selectable()) {
+            {{ selectedRows().length }} of {{ filteredData().length }} row(s) selected
+          } @else {
+            {{ filteredData().length }} row(s)
+          }
+        </span>
+        <div class="flex items-center gap-3 sm:gap-4 flex-wrap">
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">Rows per page</span>
+            <sny-select
+              [options]="pageSizeOptions()"
+              [value]="pageSizeValue()"
+              (valueChange)="onPageSizeChange($event)"
+              size="sm"
+              class="w-20"
+            />
+          </div>
+          <sny-pagination
+            [currentPage]="currentPage()"
+            (currentPageChange)="currentPage.set($event)"
+            [totalPages]="totalPages()"
+          />
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SnyTableDirective, selector: "table[snyTable]", inputs: ["variant", "density", "hoverable", "stickyHeader", "class"] }, { kind: "directive", type: SnyTableHeaderDirective, selector: "thead[snyTableHeader]", inputs: ["class"] }, { kind: "directive", type: SnyTableBodyDirective, selector: "tbody[snyTableBody]", inputs: ["class"] }, { kind: "directive", type: SnyTableRowDirective, selector: "tr[snyTableRow]", inputs: ["class"] }, { kind: "directive", type: SnyTableHeadDirective, selector: "th[snyTableHead]", inputs: ["class"] }, { kind: "directive", type: SnyTableCellDirective, selector: "td[snyTableCell]", inputs: ["class"] }, { kind: "component", type: SnyPaginationComponent, selector: "sny-pagination", inputs: ["currentPage", "totalPages", "siblingCount", "boundaryCount", "size", "variant", "class"], outputs: ["currentPageChange"] }, { kind: "directive", type: SnyCheckboxDirective, selector: "input[type=\"checkbox\"][snyCheckbox]", inputs: ["size", "class"] }, { kind: "directive", type: SnyInputDirective, selector: "input[snyInput], textarea[snyInput]", inputs: ["variant", "inputSize", "class", "ariaDescribedBy"] }, { kind: "directive", type: SnyButtonDirective, selector: "button[snyBtn], a[snyBtn]", inputs: ["variant", "size", "disabled", "loading", "class"] }, { kind: "component", type: SnySelectComponent, selector: "sny-select", inputs: ["options", "placeholder", "size", "disabled", "class", "value"], outputs: ["valueChange"] }, { kind: "directive", type: SnySkeletonDirective, selector: "[snySkeleton]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: SnyDropdownDirective, selector: "[snyDropdown]", exportAs: ["snyDropdown"] }, { kind: "directive", type: SnyDropdownTriggerDirective, selector: "[snyDropdownTrigger]" }, { kind: "directive", type: SnyDropdownContentDirective, selector: "[snyDropdownContent]", inputs: ["class"] }, { kind: "directive", type: SnyMenuItemDirective, selector: "[snyMenuItem]", inputs: ["variant", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDataTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sny-data-table',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgTemplateOutlet,
+                        SnyTableDirective,
+                        SnyTableHeaderDirective,
+                        SnyTableBodyDirective,
+                        SnyTableRowDirective,
+                        SnyTableHeadDirective,
+                        SnyTableCellDirective,
+                        SnyPaginationComponent,
+                        SnyCheckboxDirective,
+                        SnyInputDirective,
+                        SnyButtonDirective,
+                        SnySelectComponent,
+                        SnySkeletonDirective,
+                        SnyDropdownDirective,
+                        SnyDropdownTriggerDirective,
+                        SnyDropdownContentDirective,
+                        SnyMenuItemDirective,
+                    ],
+                    template: `
+    <!-- Toolbar -->
+    @if (filterable() || showExport() || showColumnToggle()) {
+      <div class="flex items-center justify-between gap-4 mb-4 flex-wrap">
+        @if (filterable()) {
+          <input
+            snyInput
+            [value]="filterText()"
+            (input)="onFilterInput($event)"
+            placeholder="Filter..."
+            class="w-full sm:max-w-sm"
+          />
+        }
+        <div class="flex items-center gap-2">
+          @if (showExport()) {
+            <button snyBtn variant="outline" size="sm" (click)="onExport()">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="m9 15 3-3 3 3"/></svg>
+              <span class="hidden sm:inline">Export</span>
+            </button>
+          }
+          @if (showColumnToggle()) {
+            <div snyDropdown class="relative">
+              <button snyBtn variant="outline" size="sm" snyDropdownTrigger>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sm:mr-2"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>
+                <span class="hidden sm:inline">Columns</span>
+              </button>
+              <div snyDropdownContent class="w-48 right-0 left-auto">
+                @for (col of columns(); track col.key) {
+                  <label snyMenuItem class="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="!hiddenColumns().has(col.key)"
+                      (change)="toggleColumnVisibility(col.key)"
+                      (click)="$event.stopPropagation()"
+                    />
+                    {{ col.label }}
+                  </label>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+
+    <!-- Bulk Actions Bar -->
+    @if (showBulkActions()) {
+      @let selected = selectedRows();
+      <div class="flex items-center gap-2 mb-4 p-3 bg-muted/50 rounded-sm border border-border flex-wrap">
+        <span class="text-sm font-medium text-muted-foreground mr-2">
+          {{ selected.length }} selected
+        </span>
+        <ng-container
+          [ngTemplateOutlet]="bulkActionsDef()!.template"
+          [ngTemplateOutletContext]="{ $implicit: selected }"
+        />
+        <button
+          snyBtn variant="ghost" size="sm" class="ml-auto"
+          (click)="selectedRows.set([])"
+        >
+          Clear
+        </button>
+      </div>
+    }
+
+    <!-- Table -->
+    <div class="overflow-auto border border-border rounded-sm">
+      <table
+        snyTable
+        [variant]="variant()"
+        [density]="density()"
+        [hoverable]="hoverable()"
+        [stickyHeader]="stickyHeader()"
+      >
+        <thead snyTableHeader>
+          <tr snyTableRow>
+            @if (selectable()) {
+              <th snyTableHead class="w-12">
+                <input
+                  type="checkbox"
+                  snyCheckbox
+                  [checked]="allSelected()"
+                  [indeterminate]="someSelected() && !allSelected()"
+                  (change)="toggleSelectAll()"
+                />
+              </th>
+            }
+            @if (expandable()) {
+              <th snyTableHead class="w-10"></th>
+            }
+            @let sort = sortState();
+            @let headerDefs = headerCellDefMap();
+            @for (col of visibleColumns(); track col.key) {
+              <th
+                snyTableHead
+                [style.width]="col.width ?? null"
+                [class]="col.sortable ? 'cursor-pointer select-none' : ''"
+                (click)="col.sortable ? toggleSort(col.key) : null"
+              >
+                @if (headerDefs.has(col.key)) {
+                  <ng-container
+                    [ngTemplateOutlet]="headerDefs.get(col.key)!"
+                    [ngTemplateOutletContext]="{ $implicit: col }"
+                  />
+                } @else {
+                  <div class="flex items-center gap-1">
+                    <span>{{ col.label }}</span>
+                    @if (col.sortable) {
+                      @let isActive = sort.key === col.key;
+                      @if (isActive && sort.direction === 'asc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/></svg>
+                      } @else if (isActive && sort.direction === 'desc') {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 12-7 7-7-7"/></svg>
+                      } @else {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-30"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+                      }
+                    }
+                  </div>
+                }
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody snyTableBody>
+          @if (loading()) {
+            @for (i of skeletonRows(); track i) {
+              <tr snyTableRow>
+                @if (selectable()) {
+                  <td snyTableCell class="w-12"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10"><div snySkeleton class="w-4 h-4 rounded"></div></td>
+                }
+                @for (col of visibleColumns(); track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    <div snySkeleton class="w-full h-4 rounded"></div>
+                  </td>
+                }
+              </tr>
+            }
+          } @else if (paginatedData().length === 0) {
+            <tr snyTableRow>
+              <td
+                snyTableCell
+                [attr.colspan]="totalColSpan()"
+                class="text-center text-muted-foreground py-8"
+              >
+                {{ noDataText() }}
+              </td>
+            </tr>
+          } @else {
+            @let cellDefs = cellDefMap();
+            @let cols = visibleColumns();
+            @let expandTpl = rowExpandDef();
+            @for (row of paginatedData(); track trackByFn(row, $index)) {
+              <tr
+                snyTableRow
+                [attr.data-state]="isSelected(row) ? 'selected' : null"
+                (click)="onRowClick(row)"
+                class="cursor-pointer"
+              >
+                @if (selectable()) {
+                  <td snyTableCell class="w-12">
+                    <input
+                      type="checkbox"
+                      snyCheckbox
+                      [checked]="isSelected(row)"
+                      (change)="toggleRowSelection(row)"
+                      (click)="$event.stopPropagation()"
+                    />
+                  </td>
+                }
+                @if (expandable()) {
+                  <td snyTableCell class="w-10">
+                    <button
+                      class="p-0.5 rounded hover:bg-accent transition-transform duration-150"
+                      [class.rotate-90]="isExpanded(row)"
+                      (click)="toggleRowExpansion(row); $event.stopPropagation()"
+                    >
+                      <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>
+                  </td>
+                }
+                @for (col of cols; track col.key) {
+                  <td snyTableCell [style.width]="col.width ?? null">
+                    @if (cellDefs.has(col.key)) {
+                      <ng-container
+                        [ngTemplateOutlet]="cellDefs.get(col.key)!"
+                        [ngTemplateOutletContext]="{ $implicit: row[col.key], row: row }"
+                      />
+                    } @else {
+                      {{ row[col.key] }}
+                    }
+                  </td>
+                }
+              </tr>
+              @if (expandable() && isExpanded(row) && expandTpl) {
+                <tr snyTableRow>
+                  <td snyTableCell [attr.colspan]="totalColSpan()" class="bg-muted/30">
+                    <ng-container
+                      [ngTemplateOutlet]="expandTpl.template"
+                      [ngTemplateOutletContext]="{ $implicit: row }"
+                    />
+                  </td>
+                </tr>
+              }
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer -->
+    @if (paginated()) {
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mt-4 gap-3 sm:gap-4">
+        <span class="text-sm text-muted-foreground">
+          @if (selectable()) {
+            {{ selectedRows().length }} of {{ filteredData().length }} row(s) selected
+          } @else {
+            {{ filteredData().length }} row(s)
+          }
+        </span>
+        <div class="flex items-center gap-3 sm:gap-4 flex-wrap">
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:inline text-sm text-muted-foreground whitespace-nowrap">Rows per page</span>
+            <sny-select
+              [options]="pageSizeOptions()"
+              [value]="pageSizeValue()"
+              (valueChange)="onPageSizeChange($event)"
+              size="sm"
+              class="w-20"
+            />
+          </div>
+          <sny-pagination
+            [currentPage]="currentPage()"
+            (currentPageChange)="currentPage.set($event)"
+            [totalPages]="totalPages()"
+          />
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], paginationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationConfig", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], dataExported: [{ type: i0.Output, args: ["dataExported"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyCellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SnyHeaderCellDefDirective), { isSignal: true }] }], bulkActionsDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SnyBulkActionsDefDirective), { isSignal: true }] }], rowExpandDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SnyRowExpandDefDirective), { isSignal: true }] }] } });
+
 class SnySheetRef {
     cdkRef;
     constructor(cdkRef) {
@@ -2896,226 +4036,65 @@ class SnyTooltipDirective {
         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();
+        this.renderer.appendChild(document.body, tooltip);
+        this.tooltipEl = tooltip;
+        this.positionTooltip();
     }
-    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 });
+    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: SnyMenuLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[snyMenuLabel]',
+                    selector: '[snyTooltip]',
                     standalone: true,
+                    exportAs: 'snyTooltip',
                     host: {
-                        '[class]': 'computedClass()',
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focus)': 'show()',
+                        '(blur)': 'hide()',
+                        '(keydown.escape)': 'hide()',
+                        '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
                     },
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], 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 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: {
@@ -3644,219 +4623,45 @@ class SnyDrawerContentDirective {
     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 });
+            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: SnyPaginationComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDrawerSideDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'sny-pagination',
+                    selector: '[snyDrawerSide]',
                     standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'role': 'navigation',
-                        'aria-label': 'Pagination',
+                        'aria-label': 'Sidebar navigation',
+                        '[attr.aria-modal]': 'drawer.overlay() && drawer.isOpen() || null',
+                        '[class]': 'computedClass()',
                     },
-                    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 }] }] } });
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 const dividerVariants = cva('shrink-0 bg-border', {
     variants: {
@@ -4961,93 +5766,714 @@ class SnyDiffComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDiffComponent, decorators: [{
+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 {
+    // Existing inputs (backwards compatible)
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    // Range mode inputs
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    rangeValue = model(null, ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
+    showNavigation = input(true, ...(ngDevMode ? [{ debugName: "showNavigation" }] : /* istanbul ignore next */ []));
+    initialViewDate = input(undefined, ...(ngDevMode ? [{ debugName: "initialViewDate" }] : /* istanbul ignore next */ []));
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => this.borderless()
+        ? 'inline-block p-3 bg-background'
+        : 'inline-block p-4 rounded-md border border-border bg-background', ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    // Internal state
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []));
+    viewDate = linkedSignal(() => this.initialViewDate() ?? new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    // CVA
+    _onChange = () => { };
+    onTouched = () => { };
+    writeValue(val) {
+        if (this.mode() === 'range') {
+            this.rangeValue.set(val ?? null);
+            const range = val;
+            if (range?.start) {
+                this.viewDate.set(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+            }
+        }
+        else {
+            this.value.set(val ?? null);
+            if (val) {
+                const d = val;
+                this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Computed
+    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 rangeVal = this.mode() === 'range' ? this.rangeValue() : null;
+        const hovered = this.hoveredDate();
+        const minDate = this.min();
+        const maxDate = this.max();
+        const firstDay = new Date(year, month, 1);
+        const startDay = firstDay.getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const days = [];
+        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, rangeVal, hovered, minDate, maxDate));
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            const date = new Date(year, month, d);
+            days.push(this.createDay(date, true, today, selected, rangeVal, hovered, minDate, maxDate));
+        }
+        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, rangeVal, hovered, minDate, maxDate));
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    // Navigation
+    prevMonth() {
+        this.viewDate.set(new Date(this.viewDate().getFullYear(), this.viewDate().getMonth() - 1, 1));
+    }
+    nextMonth() {
+        this.viewDate.set(new Date(this.viewDate().getFullYear(), this.viewDate().getMonth() + 1, 1));
+    }
+    // Click handler
+    onDayClick(date) {
+        if (this.mode() === 'single') {
+            this.value.set(date);
+            this._onChange(date);
+            this.onTouched();
+            return;
+        }
+        // Range mode
+        const current = this.rangeValue();
+        if (!current?.start || (current.start && current.end)) {
+            this.rangeValue.set({ start: date, end: null });
+        }
+        else {
+            const start = current.start;
+            if (date < start) {
+                this.rangeValue.set({ start: date, end: start });
+            }
+            else if (this.isSameDay(date, start)) {
+                this.rangeValue.set({ start: date, end: date });
+            }
+            else {
+                this.rangeValue.set({ start, end: date });
+            }
+        }
+        this._onChange(this.rangeValue());
+        this.onTouched();
+    }
+    // Hover handler
+    onDayHover(date) {
+        if (this.mode() === 'range') {
+            this.hoveredDate.set(date);
+        }
+    }
+    // Keyboard
+    onKeydown(event) {
+        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;
+        }
+    }
+    // Styling
+    dayClass(day) {
+        const isEndpoint = day.isRangeStart || day.isRangeEnd;
+        return cn('inline-flex items-center justify-center text-sm h-9 w-9 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 
+        // Shape
+        day.isRangeStart && !day.isRangeEnd ? 'rounded-l-md rounded-r-none' :
+            day.isRangeEnd && !day.isRangeStart ? 'rounded-r-md rounded-l-none' :
+                day.isInRange || day.isRangePreview ? 'rounded-none' :
+                    'rounded-md', 
+        // Base text color
+        !day.isCurrentMonth && 'text-muted-foreground/40', day.isCurrentMonth && !day.isSelected && !isEndpoint && 'text-foreground', 
+        // Today indicator
+        day.isToday && !day.isSelected && !isEndpoint && 'bg-accent text-accent-foreground font-semibold', 
+        // Single selected
+        day.isSelected && this.mode() === 'single' && 'bg-primary text-primary-foreground font-semibold shadow-sm', 
+        // Range endpoints
+        isEndpoint && 'bg-primary text-primary-foreground font-semibold shadow-sm', 
+        // Range band
+        day.isInRange && 'bg-primary/10 text-foreground', day.isRangePreview && 'bg-primary/5 text-foreground', 
+        // States
+        day.isDisabled && 'opacity-40 cursor-not-allowed pointer-events-none', !day.isDisabled && !day.isSelected && !isEndpoint && 'hover:bg-accent hover:text-accent-foreground cursor-pointer');
+    }
+    // Private helpers
+    navigateDays(offset) {
+        const current = this.value() ?? new Date();
+        const next = new Date(current);
+        next.setDate(next.getDate() + offset);
+        this.value.set(next);
+        this._onChange(next);
+        this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
+    }
+    createDay(date, isCurrentMonth, today, selected, rangeVal, hoveredDate, minDate, maxDate) {
+        const isToday = this.isSameDay(date, today);
+        const isSelected = selected ? this.isSameDay(date, selected) : false;
+        const isDisabled = this._disabledByCva() ||
+            (minDate ? date < minDate : false) ||
+            (maxDate ? date > maxDate : false);
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+        let isRangePreview = false;
+        if (rangeVal) {
+            const { start, end } = rangeVal;
+            if (start)
+                isRangeStart = this.isSameDay(date, start);
+            if (end)
+                isRangeEnd = this.isSameDay(date, end);
+            if (start && end) {
+                isInRange = date > start && date < end && !isRangeStart && !isRangeEnd;
+            }
+            // Preview: start set, no end yet, user hovering
+            if (start && !end && hoveredDate && !this.isSameDay(hoveredDate, start)) {
+                const previewStart = hoveredDate > start ? start : hoveredDate;
+                const previewEnd = hoveredDate > start ? hoveredDate : start;
+                if (date > previewStart && date < previewEnd) {
+                    isRangePreview = true;
+                }
+                if (this.isSameDay(date, hoveredDate) && !isRangeStart) {
+                    isRangePreview = true;
+                }
+            }
+        }
+        return {
+            date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled,
+            isRangeStart, isRangeEnd, isInRange, isRangePreview,
+        };
+    }
+    isSameDay(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: true, isRequired: false, transformFunction: null }, initialViewDate: { classPropertyName: "initialViewDate", publicName: "initialViewDate", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange" }, host: { attributes: { "role": "application", "aria-label": "Calendar" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "hostClass()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
+        ], ngImport: i0, template: `
+    @if (showNavigation()) {
+      <div class="flex items-center justify-between mb-3">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (click)="prevMonth()"
+          aria-label="Previous month"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-sm font-semibold tracking-tight">{{ monthYearLabel() }}</span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (click)="nextMonth()"
+          aria-label="Next month"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
+      </div>
+    }
+
+    <div role="grid" class="grid grid-cols-7 gap-1">
+      @for (dayName of weekDays; track dayName) {
+        <div class="text-center text-xs text-muted-foreground font-medium h-9 flex items-center justify-center" role="columnheader">{{ dayName }}</div>
+      }
+      @for (day of days(); track day.date.getTime()) {
+        <button
+          type="button"
+          [class]="dayClass(day)"
+          [disabled]="day.isDisabled"
+          [attr.aria-selected]="day.isSelected || day.isRangeStart || day.isRangeEnd || null"
+          [attr.aria-current]="day.isToday ? 'date' : null"
+          [attr.aria-disabled]="day.isDisabled || null"
+          [attr.aria-label]="day.date.toLocaleDateString(locale(), { month: 'long', day: 'numeric', year: 'numeric' })"
+          role="gridcell"
+          (click)="onDayClick(day.date)"
+          (mouseenter)="onDayHover(day.date)"
+          (mouseleave)="onDayHover(null)"
+        >
+          {{ day.day }}
+        </button>
+      }
+    </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-diff',
+                    selector: 'sny-calendar',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '[class]': '"relative overflow-hidden select-none w-full"',
-                        '(pointerdown)': 'onPointerDown($event)',
-                        '(pointermove)': 'onPointerMove($event)',
-                        '(pointerup)': 'onPointerUp()',
+                        '[class]': 'hostClass()',
                         '(keydown)': 'onKeydown($event)',
+                        'role': 'application',
+                        'aria-label': 'Calendar',
                     },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
+                    ],
                     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>
+    @if (showNavigation()) {
+      <div class="flex items-center justify-between mb-3">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (click)="prevMonth()"
+          aria-label="Previous month"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-sm font-semibold tracking-tight">{{ monthYearLabel() }}</span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (click)="nextMonth()"
+          aria-label="Next month"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
       </div>
+    }
+
+    <div role="grid" class="grid grid-cols-7 gap-1">
+      @for (dayName of weekDays; track dayName) {
+        <div class="text-center text-xs text-muted-foreground font-medium h-9 flex items-center justify-center" role="columnheader">{{ dayName }}</div>
+      }
+      @for (day of days(); track day.date.getTime()) {
+        <button
+          type="button"
+          [class]="dayClass(day)"
+          [disabled]="day.isDisabled"
+          [attr.aria-selected]="day.isSelected || day.isRangeStart || day.isRangeEnd || null"
+          [attr.aria-current]="day.isToday ? 'date' : null"
+          [attr.aria-disabled]="day.isDisabled || null"
+          [attr.aria-label]="day.date.toLocaleDateString(locale(), { month: 'long', day: 'numeric', year: 'numeric' })"
+          role="gridcell"
+          (click)="onDayClick(day.date)"
+          (mouseenter)="onDayHover(day.date)"
+          (mouseleave)="onDayHover(null)"
+        >
+          {{ day.day }}
+        </button>
+      }
     </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 }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], initialViewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialViewDate", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }] } });
 
-const 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', {
+const datePickerTriggerVariants = cva('inline-flex w-full items-center justify-between whitespace-nowrap rounded-sm border border-border bg-background px-3 py-2 text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
     variants: {
-        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',
+        size: {
+            sm: 'h-9 text-xs',
+            md: 'h-10 text-sm',
+            lg: 'h-11 text-base',
         },
     },
-    defaultVariants: {
-        variant: 'default',
-    },
+    defaultVariants: { size: 'md' },
 });
 
-class SnyLinkDirective {
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+class SnyDatePickerComponent {
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    dateFormat = input({
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }, ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    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 });
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    dropdownRef = viewChild('dropdownEl', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    scrollHandler = null;
+    resizeHandler = null;
+    _onChange = () => { };
+    onTouched = () => { };
+    // CVA
+    writeValue(val) {
+        this.value.set(val ?? null);
+        this.internalValue.set(val ?? null);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledByCva.set(isDisabled);
+    }
+    // Display
+    displayValue = computed(() => {
+        const d = this.value();
+        if (!d)
+            return '';
+        return d.toLocaleDateString(this.locale(), this.dateFormat());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => cn(datePickerTriggerVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    // Actions
+    onDateSelected(date) {
+        this.value.set(date);
+        this._onChange(date);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.internalValue.set(null);
+        this._onChange(null);
+    }
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.internalValue.set(this.value());
+            this.updateDropdownPosition();
+            this.open.set(true);
+            this.addGlobalListeners();
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
+    close() {
+        this.open.set(false);
+        this.removeGlobalListeners();
+    }
+    // Positioning (combobox pattern)
+    updateDropdownPosition() {
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const dropdown = this.dropdownRef()?.nativeElement;
+        if (dropdown) {
+            dropdown.style.top = `${rect.bottom + 4}px`;
+            dropdown.style.left = `${rect.left}px`;
+        }
+    }
+    addGlobalListeners() {
+        this.removeGlobalListeners();
+        this.scrollHandler = () => {
+            requestAnimationFrame(() => this.updateDropdownPosition());
+        };
+        this.resizeHandler = () => {
+            requestAnimationFrame(() => this.updateDropdownPosition());
+        };
+        document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+        window.addEventListener('resize', this.resizeHandler, { passive: true });
+    }
+    removeGlobalListeners() {
+        if (this.scrollHandler) {
+            document.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+    }
+    ngOnDestroy() {
+        this.removeGlobalListeners();
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDatePickerComponent, isStandalone: true, selector: "sny-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        }
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <sny-calendar
+          [(value)]="internalValue"
+          [min]="min()"
+          [max]="max()"
+          [locale]="locale()"
+          (valueChange)="onDateSelected($event)"
+        />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SnyCalendarComponent, selector: "sny-calendar", inputs: ["value", "min", "max", "locale", "class", "mode", "rangeValue", "showNavigation", "initialViewDate", "borderless"], outputs: ["valueChange", "rangeValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyLinkDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDatePickerComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: 'a[snyLink]',
+                    selector: 'sny-date-picker',
                     standalone: true,
-                    host: {
-                        '[class]': 'computedClass()',
-                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SnyCalendarComponent],
+                    host: { class: 'relative inline-block w-full' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDatePickerComponent), multi: true },
+                    ],
+                    template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        }
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
+      >
+        <sny-calendar
+          [(value)]="internalValue"
+          [min]="min()"
+          [max]="max()"
+          [locale]="locale()"
+          (valueChange)="onDateSelected($event)"
+        />
+      </div>
+    }
+  `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
 
-class SnyCalendarComponent {
+class SnyDateRangePickerComponent {
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Pick a date range...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    dateFormat = input({
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    }, ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    separator = input(' \u2014 ', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    dualCalendar = input(false, ...(ngDevMode ? [{ debugName: "dualCalendar" }] : /* istanbul ignore next */ []));
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
     min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-    locale = input('en-US', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    internalRange = signal(null, ...(ngDevMode ? [{ debugName: "internalRange" }] : /* istanbul ignore next */ []));
+    leftViewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "leftViewDate" }] : /* istanbul ignore next */ []));
     _disabledByCva = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByCva" }] : /* istanbul ignore next */ []));
-    viewDate = signal(new Date(), ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
-    weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    isDisabled = computed(() => this.disabled() || this._disabledByCva(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    dropdownRef = viewChild('dropdownEl', ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
+    elRef = inject(ElementRef);
+    scrollHandler = null;
+    resizeHandler = null;
     _onChange = () => { };
     onTouched = () => { };
+    // Computed
+    rightViewDate = computed(() => {
+        const d = this.leftViewDate();
+        return new Date(d.getFullYear(), d.getMonth() + 1, 1);
+    }, ...(ngDevMode ? [{ debugName: "rightViewDate" }] : /* istanbul ignore next */ []));
+    leftMonthLabel = computed(() => this.leftViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' }), ...(ngDevMode ? [{ debugName: "leftMonthLabel" }] : /* istanbul ignore next */ []));
+    rightMonthLabel = computed(() => this.rightViewDate().toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' }), ...(ngDevMode ? [{ debugName: "rightMonthLabel" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const r = this.value();
+        if (!r?.start)
+            return '';
+        const fmt = (d) => d.toLocaleDateString(this.locale(), this.dateFormat());
+        if (!r.end)
+            return fmt(r.start) + this.separator() + '...';
+        return fmt(r.start) + this.separator() + fmt(r.end);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => cn(datePickerTriggerVariants({ size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    // CVA
     writeValue(val) {
         this.value.set(val ?? null);
-        if (val) {
-            this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+        this.internalRange.set(val ?? null);
+        if (val?.start) {
+            this.leftViewDate.set(new Date(val.start.getFullYear(), val.start.getMonth(), 1));
         }
     }
     registerOnChange(fn) {
@@ -5059,189 +6485,370 @@ class SnyCalendarComponent {
     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));
+    // Actions
+    onRangeChanged(range) {
+        this.internalRange.set(range);
+        if (range?.start && range?.end) {
+            this.value.set(range);
+            this._onChange(range);
+            setTimeout(() => this.close(), 150);
         }
-        // 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 */ []));
+    }
+    selectPreset(preset) {
+        this.value.set(preset.range);
+        this.internalRange.set(preset.range);
+        this._onChange(preset.range);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set(null);
+        this.internalRange.set(null);
+        this._onChange(null);
+    }
     prevMonth() {
-        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+        this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
     }
     nextMonth() {
-        this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+        this.leftViewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
     }
-    selectDate(date) {
-        this.value.set(date);
-        this._onChange(date);
-        this.onTouched();
+    toggle() {
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.internalRange.set(this.value());
+            this.updateDropdownPosition();
+            this.open.set(true);
+            this.addGlobalListeners();
+            setTimeout(() => this.updateDropdownPosition());
+        }
     }
-    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;
+    close() {
+        this.open.set(false);
+        this.removeGlobalListeners();
+    }
+    // Positioning
+    updateDropdownPosition() {
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const dropdown = this.dropdownRef()?.nativeElement;
+        if (dropdown) {
+            dropdown.style.top = `${rect.bottom + 4}px`;
+            dropdown.style.left = `${rect.left}px`;
         }
     }
-    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');
+    addGlobalListeners() {
+        this.removeGlobalListeners();
+        this.scrollHandler = () => {
+            requestAnimationFrame(() => this.updateDropdownPosition());
+        };
+        this.resizeHandler = () => {
+            requestAnimationFrame(() => this.updateDropdownPosition());
+        };
+        document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+        window.addEventListener('resize', this.resizeHandler, { passive: true });
     }
-    navigateDays(offset) {
-        const current = this.value() ?? new Date();
-        const next = new Date(current);
-        next.setDate(next.getDate() + offset);
-        this.value.set(next);
-        this._onChange(next);
-        this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
+    removeGlobalListeners() {
+        if (this.scrollHandler) {
+            document.removeEventListener('scroll', this.scrollHandler, { capture: true });
+            this.scrollHandler = null;
+        }
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
     }
-    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 };
+    ngOnDestroy() {
+        this.removeGlobalListeners();
     }
-    isSameDay(a, b) {
-        return (a.getFullYear() === b.getFullYear() &&
-            a.getMonth() === b.getMonth() &&
-            a.getDate() === b.getDate());
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
     }
-    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"
+    onEscape() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyDateRangePickerComponent, isStandalone: true, selector: "sny-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, dualCalendar: { classPropertyName: "dualCalendar", publicName: "dualCalendar", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()" }, classAttribute: "relative inline-block w-full" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), multi: true },
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()?.start) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date range"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        }
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date range"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
       >
-        <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 class="flex flex-col sm:flex-row">
+          <!-- Presets sidebar -->
+          @if (presets().length > 0) {
+            <div class="border-b sm:border-b-0 sm:border-r border-border p-3 space-y-0.5 sm:min-w-[150px]">
+              <p class="px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Presets</p>
+              @for (preset of presets(); track preset.label) {
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 text-sm rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                  (mousedown)="selectPreset(preset); $event.preventDefault()"
+                >
+                  {{ preset.label }}
+                </button>
+              }
+            </div>
+          }
 
-    <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 });
+          <!-- Calendar(s) -->
+          <div class="flex flex-col sm:flex-row">
+            @if (dualCalendar()) {
+              <!-- Left calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="prevMonth()"
+                    aria-label="Previous month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                  </button>
+                  <span class="text-sm font-semibold tracking-tight">{{ leftMonthLabel() }}</span>
+                  <div class="w-8"></div>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="leftViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+              <div class="border-t sm:border-t-0 sm:border-l border-border"></div>
+              <!-- Right calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <div class="w-8"></div>
+                  <span class="text-sm font-semibold tracking-tight">{{ rightMonthLabel() }}</span>
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="nextMonth()"
+                    aria-label="Next month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="rightViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+            } @else {
+              <!-- Single calendar -->
+              <sny-calendar
+                mode="range"
+                [(rangeValue)]="internalRange"
+                [min]="min()"
+                [max]="max()"
+                [locale]="locale()"
+                (rangeValueChange)="onRangeChanged($event)"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SnyCalendarComponent, selector: "sny-calendar", inputs: ["value", "min", "max", "locale", "class", "mode", "rangeValue", "showNavigation", "initialViewDate", "borderless"], outputs: ["valueChange", "rangeValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sny-calendar',
+                    selector: 'sny-date-range-picker',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': '"inline-block p-3 rounded-md border bg-background"',
-                        '(keydown)': 'onKeydown($event)',
-                    },
+                    imports: [SnyCalendarComponent],
+                    host: { class: 'relative inline-block w-full' },
                     providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyDateRangePickerComponent), 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"
+    <button
+      #triggerEl
+      type="button"
+      role="combobox"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      [disabled]="isDisabled()"
+      [class]="triggerClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="displayValue() ? 'truncate' : 'text-muted-foreground truncate'">
+        {{ displayValue() || placeholder() }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0">
+        @if (clearable() && value()?.start) {
+          <button
+            type="button"
+            class="rounded-sm p-0.5 hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+            (click)="clear($event)"
+            aria-label="Clear date range"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        }
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
+      </div>
+    </button>
+
+    @if (open()) {
+      <div
+        #dropdownEl
+        role="dialog"
+        aria-modal="true"
+        aria-label="Choose date range"
+        class="fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95"
       >
-        <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 class="flex flex-col sm:flex-row">
+          <!-- Presets sidebar -->
+          @if (presets().length > 0) {
+            <div class="border-b sm:border-b-0 sm:border-r border-border p-3 space-y-0.5 sm:min-w-[150px]">
+              <p class="px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Presets</p>
+              @for (preset of presets(); track preset.label) {
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 text-sm rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+                  (mousedown)="selectPreset(preset); $event.preventDefault()"
+                >
+                  {{ preset.label }}
+                </button>
+              }
+            </div>
+          }
 
-    <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>
+          <!-- Calendar(s) -->
+          <div class="flex flex-col sm:flex-row">
+            @if (dualCalendar()) {
+              <!-- Left calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="prevMonth()"
+                    aria-label="Previous month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                  </button>
+                  <span class="text-sm font-semibold tracking-tight">{{ leftMonthLabel() }}</span>
+                  <div class="w-8"></div>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="leftViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+              <div class="border-t sm:border-t-0 sm:border-l border-border"></div>
+              <!-- Right calendar -->
+              <div class="p-1">
+                <div class="flex items-center justify-between px-3 py-2">
+                  <div class="w-8"></div>
+                  <span class="text-sm font-semibold tracking-tight">{{ rightMonthLabel() }}</span>
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+                    (click)="nextMonth()"
+                    aria-label="Next month"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                  </button>
+                </div>
+                <sny-calendar
+                  mode="range"
+                  [(rangeValue)]="internalRange"
+                  [min]="min()"
+                  [max]="max()"
+                  [locale]="locale()"
+                  [showNavigation]="false"
+                  [borderless]="true"
+                  [initialViewDate]="rightViewDate()"
+                  (rangeValueChange)="onRangeChanged($event)"
+                />
+              </div>
+            } @else {
+              <!-- Single calendar -->
+              <sny-calendar
+                mode="range"
+                [(rangeValue)]="internalRange"
+                [min]="min()"
+                [max]="max()"
+                [locale]="locale()"
+                (rangeValueChange)="onRangeChanged($event)"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], dualCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualCalendar", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: ['dropdownEl', { isSignal: true }] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
 
 class SnyValidatorDirective {
     control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
@@ -5302,5 +6909,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, 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 };
+export { SNY_ACCORDION, SNY_ACCORDION_ITEM, SNY_CAROUSEL, SNY_CHAT_BUBBLE, SNY_CONFIG, SNY_DIALOG_DATA, SNY_DRAWER, SNY_DROPDOWN, SNY_FAB, SNY_SHEET_DATA, SNY_STEPS, SNY_TABLE, SNY_TABS, SNY_TIMELINE, SnyAccordionContentDirective, SnyAccordionDirective, SnyAccordionItemDirective, SnyAccordionTriggerDirective, SnyAlertDescriptionDirective, SnyAlertDirective, SnyAlertTitleDirective, SnyAvatarComponent, SnyBadgeDirective, SnyBreadcrumbDirective, SnyBreadcrumbItemDirective, SnyBreadcrumbLinkDirective, SnyBreadcrumbListDirective, SnyBreadcrumbPageDirective, SnyBreadcrumbSeparatorDirective, SnyBulkActionsDefDirective, SnyButtonDirective, SnyButtonGroupDirective, SnyCalendarComponent, SnyCardContentDirective, SnyCardDescriptionDirective, SnyCardDirective, SnyCardFooterDirective, SnyCardHeaderDirective, SnyCardTitleDirective, SnyCarouselContentDirective, SnyCarouselDirective, SnyCarouselItemDirective, SnyCarouselNextDirective, SnyCarouselPrevDirective, SnyCellDefDirective, SnyChatBubbleAvatarDirective, SnyChatBubbleBodyDirective, SnyChatBubbleContentDirective, SnyChatBubbleDirective, SnyChatBubbleFooterDirective, SnyChatBubbleHeaderDirective, SnyCheckboxDirective, SnyComboboxComponent, SnyDataTableComponent, SnyDatePickerComponent, SnyDateRangePickerComponent, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, comboboxTriggerVariants, datePickerTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
 //# sourceMappingURL=sonny-ui-core.mjs.map