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

package/fesm2022/sonny-ui-core.mjs

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