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

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 } 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) {
@@ -2906,216 +4046,55 @@ class SnyTooltipDirective {
         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();
+        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`;
     }
-    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 });
+    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: {
@@ -3684,180 +4663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const paginationItemVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', {
-    variants: {
-        variant: {
-            default: 'bg-background hover:bg-accent hover:text-accent-foreground',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-        },
-        size: {
-            sm: 'h-8 w-8 text-xs',
-            md: 'h-9 w-9',
-            lg: 'h-10 w-10',
-        },
-        active: {
-            true: 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground',
-            false: '',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'md',
-        active: false,
-    },
-});
-
-function computePageRange(totalPages, currentPage, siblingCount, boundaryCount) {
-    const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    const startPages = range(1, Math.min(boundaryCount, totalPages));
-    const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
-    const siblingsStart = Math.max(Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-    const siblingsEnd = Math.min(Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
-    const result = [...startPages];
-    if (siblingsStart > boundaryCount + 2) {
-        result.push('ellipsis');
-    }
-    else if (boundaryCount + 1 < totalPages - boundaryCount) {
-        result.push(boundaryCount + 1);
-    }
-    result.push(...range(siblingsStart, siblingsEnd));
-    if (siblingsEnd < totalPages - boundaryCount - 1) {
-        result.push('ellipsis');
-    }
-    else if (totalPages - boundaryCount > boundaryCount) {
-        result.push(totalPages - boundaryCount);
-    }
-    result.push(...endPages);
-    return [...new Set(result)].sort((a, b) => {
-        if (a === 'ellipsis')
-            return 0;
-        if (b === 'ellipsis')
-            return 0;
-        return a - b;
-    });
-}
-class SnyPaginationComponent {
-    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
-    totalPages = input.required(...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
-    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    pages = computed(() => computePageRange(this.totalPages(), this.currentPage(), this.siblingCount(), this.boundaryCount()), ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
-    hasPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
-    hasNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
-    goToPage(page) {
-        if (page === 'ellipsis')
-            return;
-        this.currentPage.set(page);
-    }
-    prev() {
-        if (this.hasPrev())
-            this.currentPage.update((p) => p - 1);
-    }
-    next() {
-        if (this.hasNext())
-            this.currentPage.update((p) => p + 1);
-    }
-    pageClass(page) {
-        return cn(paginationItemVariants({
-            variant: this.variant(),
-            size: this.size(),
-            active: page === this.currentPage(),
-        }));
-    }
-    navBtnClass() {
-        return cn(paginationItemVariants({ variant: this.variant(), size: this.size(), active: false }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnyPaginationComponent, isStandalone: true, selector: "sny-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: true, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange" }, host: { attributes: { "role": "navigation", "aria-label": "Pagination" } }, ngImport: i0, template: `
-    <div class="flex items-center gap-1">
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasPrev()"
-        [attr.aria-label]="'Go to previous page'"
-        (click)="prev()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-
-      @for (page of pages(); track $index) {
-        @if (page === 'ellipsis') {
-          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
-        } @else {
-          <button
-            [class]="pageClass(page)"
-            [attr.aria-label]="'Page ' + page"
-            [attr.aria-current]="page === currentPage() ? 'page' : null"
-            (click)="goToPage(page)"
-          >
-            {{ page }}
-          </button>
-        }
-      }
-
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasNext()"
-        [attr.aria-label]="'Go to next page'"
-        (click)="next()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnyPaginationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sny-pagination',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'role': 'navigation',
-                        'aria-label': 'Pagination',
-                    },
-                    template: `
-    <div class="flex items-center gap-1">
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasPrev()"
-        [attr.aria-label]="'Go to previous page'"
-        (click)="prev()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-      </button>
-
-      @for (page of pages(); track $index) {
-        @if (page === 'ellipsis') {
-          <span class="flex h-9 w-9 items-center justify-center" aria-hidden="true">...</span>
-        } @else {
-          <button
-            [class]="pageClass(page)"
-            [attr.aria-label]="'Page ' + page"
-            [attr.aria-current]="page === currentPage() ? 'page' : null"
-            (click)="goToPage(page)"
-          >
-            {{ page }}
-          </button>
-        }
-      }
-
-      <button
-        [class]="navBtnClass()"
-        [disabled]="!hasNext()"
-        [attr.aria-label]="'Go to next page'"
-        (click)="next()"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-      </button>
-    </div>
-  `,
-                }]
-        }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: true }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
 const dividerVariants = cva('shrink-0 bg-border', {
     variants: {
         orientation: {
@@ -5302,5 +6107,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, SnyDialogCloseDirective, SnyDialogContentDirective, SnyDialogDescriptionDirective, SnyDialogFooterDirective, SnyDialogHeaderDirective, SnyDialogRef, SnyDialogService, SnyDialogTitleDirective, SnyDiffComponent, SnyDividerComponent, SnyDockDirective, SnyDockItemDirective, SnyDrawerContentDirective, SnyDrawerLayoutComponent, SnyDrawerLayoutDirective, SnyDrawerSideDirective, SnyDropdownContentDirective, SnyDropdownDirective, SnyDropdownTriggerDirective, SnyFabActionDirective, SnyFabDirective, SnyFabTriggerDirective, SnyFieldsetContentDirective, SnyFieldsetDirective, SnyFieldsetLegendDirective, SnyFileInputComponent, SnyHeaderCellDefDirective, SnyIndicatorBadgeDirective, SnyIndicatorDirective, SnyInputDirective, SnyKbdDirective, SnyLabelDirective, SnyLinkDirective, SnyListDirective, SnyListItemActionDirective, SnyListItemContentDirective, SnyListItemDirective, SnyListItemIconDirective, SnyLoaderComponent, SnyMenuContentDirective, SnyMenuItemDirective, SnyMenuLabelDirective, SnyMenuSeparatorDirective, SnyNavbarBrandDirective, SnyNavbarContentDirective, SnyNavbarDirective, SnyNavbarEndDirective, SnyPaginationComponent, SnyProgressComponent, SnyRadialProgressComponent, SnyRadioDirective, SnyRatingComponent, SnyRowExpandDefDirective, SnySelectComponent, SnySheetCloseDirective, SnySheetContentDirective, SnySheetDescriptionDirective, SnySheetHeaderDirective, SnySheetRef, SnySheetService, SnySheetTitleDirective, SnySkeletonDirective, SnySliderComponent, SnyStatDescriptionDirective, SnyStatDirective, SnyStatFigureDirective, SnyStatTitleDirective, SnyStatValueDirective, SnyStatusDirective, SnyStepDirective, SnyStepsDirective, SnySwitchComponent, SnyTableBodyDirective, SnyTableCaptionDirective, SnyTableCellDirective, SnyTableDirective, SnyTableFooterDirective, SnyTableHeadDirective, SnyTableHeaderDirective, SnyTableRowDirective, SnyTabsContentDirective, SnyTabsDirective, SnyTabsListDirective, SnyTabsTriggerDirective, SnyTextareaDirective, SnyTimelineDirective, SnyTimelineEndDirective, SnyTimelineItemDirective, SnyTimelineMiddleDirective, SnyTimelineStartDirective, SnyToastService, SnyToasterComponent, SnyToggleDirective, SnyTooltipDirective, SnyValidatorDirective, SnyValidatorHintDirective, ThemeService, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, checkboxVariants, cn, comboboxTriggerVariants, dividerVariants, dropdownContentVariants, dropdownItemVariants, fieldsetVariants, fileInputVariants, inputVariants, kbdVariants, labelVariants, linkVariants, loaderVariants, paginationItemVariants, progressBarVariants, progressTrackVariants, provideSonnyUI, radioVariants, ratingVariants, selectTriggerVariants, skeletonVariants, sliderTrackVariants, statusVariants, switchTrackVariants, tableCellVariants, tableVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipVariants };
 //# sourceMappingURL=sonny-ui-core.mjs.map