ng-blatui 1.0.0

package/fesm2022/ng-blatui.mjs

@@ -0,0 +1,1831 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as i0 from '@angular/core';
+import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable } from '@angular/core';
+import { cva } from 'class-variance-authority';
+export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
+export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
+export { DIALOG_DATA, Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * Merge class names with `clsx` semantics and resolve Tailwind conflicts with
+ * `tailwind-merge`. The single utility every ng-blatui component uses to combine
+ * its variant classes with consumer-provided ones.
+ */
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+            destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            xs: 'h-7 gap-1 rounded-md px-2.5 text-xs has-[>svg]:px-2 [&_svg:not([class*=size-])]:size-3.5',
+            sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+            'icon-xs': 'size-7 [&_svg:not([class*=size-])]:size-3.5',
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10',
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+/**
+ * Applies BlatUI button styling to a native `<button>` or `<a>`, keeping native
+ * semantics, focus and keyboard behavior (accessibility for free).
+ */
+class BuiButton {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiButton, isStandalone: true, selector: "button[buiButton], a[buiButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiButton], a[buiButton]',
+                    host: {
+                        'data-slot': 'button',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const BASE = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
+const SIZES = {
+    sm: 'px-1.5 py-px text-[0.625rem]',
+    default: 'px-2 py-0.5 text-xs',
+    lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
+};
+const VARIANTS = {
+    default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+    secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+    destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+    outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+};
+const TONES = {
+    success: {
+        soft: 'border-transparent bg-success/10 text-success dark:bg-success/15',
+        solid: 'border-transparent bg-success text-success-foreground',
+        outline: 'text-success border-success/40',
+    },
+    warning: {
+        soft: 'border-transparent bg-warning/10 text-warning dark:bg-warning/15',
+        solid: 'border-transparent bg-warning text-warning-foreground',
+        outline: 'text-warning border-warning/40',
+    },
+    danger: {
+        soft: 'border-transparent bg-destructive/10 text-destructive dark:bg-destructive/15',
+        solid: 'border-transparent bg-destructive text-destructive-foreground',
+        outline: 'text-destructive border-destructive/40',
+    },
+    info: {
+        soft: 'border-transparent bg-info/10 text-info dark:bg-info/15',
+        solid: 'border-transparent bg-info text-info-foreground',
+        outline: 'text-info border-info/40',
+    },
+    neutral: {
+        soft: 'border-transparent bg-muted text-muted-foreground',
+        solid: 'border-transparent bg-foreground/85 text-background',
+        outline: 'text-muted-foreground border-border',
+    },
+};
+function brandClass(variant) {
+    switch (variant) {
+        case 'secondary': {
+            return VARIANTS.secondary;
+        }
+        case 'destructive': {
+            return VARIANTS.destructive;
+        }
+        case 'outline': {
+            return VARIANTS.outline;
+        }
+        default: {
+            return VARIANTS.default;
+        }
+    }
+}
+function intensityFor(variant) {
+    return variant === 'solid' || variant === 'outline' ? variant : 'soft';
+}
+/**
+ * BlatUI badge. Brand variants (`default | secondary | destructive | outline`)
+ * or semantic `tone` (`success | warning | danger | info | neutral`) where
+ * `variant` then selects intensity (`soft | solid | outline`). Built on a native
+ * element so it stays in the document flow and screen-reader friendly.
+ */
+class BuiBadge {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    tone = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => {
+        const tone = this.tone();
+        const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES[tone][intensityFor(this.variant())];
+        return cn(BASE, SIZES[this.size()], toneOrVariant, this.userClass());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiBadge, isStandalone: true, selector: "[buiBadge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "badge" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiBadge]',
+                    host: {
+                        'data-slot': 'badge',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * BlatUI label. Apply to a native `<label>` (use `for`/`id` to associate it with
+ * a control) so the click-to-focus and screen-reader association work natively.
+ */
+class BuiLabel {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiLabel, isStandalone: true, selector: "label[buiLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "label" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[buiLabel]',
+                    host: {
+                        'data-slot': 'label',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * BlatUI separator. `decorative` (default) renders `role="none"`; set
+ * `[decorative]="false"` for a semantic `role="separator"` with `aria-orientation`.
+ */
+class BuiSeparator {
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    decorative = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiSeparator, isStandalone: true, selector: "[buiSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "separator" }, properties: { "attr.role": "decorative() ? 'none' : 'separator'", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiSeparator]',
+                    host: {
+                        'data-slot': 'separator',
+                        '[attr.role]': "decorative() ? 'none' : 'separator'",
+                        '[attr.aria-orientation]': 'decorative() ? null : orientation()',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * BlatUI skeleton placeholder. Marked `aria-hidden` so assistive tech ignores the
+ * shimmering placeholder; announce real loading state separately (e.g. aria-busy).
+ */
+class BuiSkeleton {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('animate-pulse rounded-md bg-accent', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiSkeleton, isStandalone: true, selector: "[buiSkeleton]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "skeleton", "aria-hidden": "true" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSkeleton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiSkeleton]',
+                    host: {
+                        'data-slot': 'skeleton',
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const CARD_VARIANTS = {
+    // Simple padded box — the dominant use case.
+    default: 'bg-card text-card-foreground rounded-xl border p-6 shadow-sm',
+    // Sectioned layout for card-header / card-content / card-footer (each supplies its own px-6).
+    sectioned: 'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+};
+/** BlatUI card container. Use `variant="sectioned"` with the header/content/footer parts. */
+class BuiCard {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(CARD_VARIANTS[this.variant()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCard, isStandalone: true, selector: "[buiCard]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCard]',
+                    host: { 'data-slot': 'card', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardHeader {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardHeader, isStandalone: true, selector: "[buiCardHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-header" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardHeader]',
+                    host: { 'data-slot': 'card-header', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('leading-none font-semibold', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardTitle, isStandalone: true, selector: "[buiCardTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardTitle]',
+                    host: { 'data-slot': 'card-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm text-muted-foreground', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardDescription, isStandalone: true, selector: "[buiCardDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardDescription]',
+                    host: { 'data-slot': 'card-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardAction {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardAction, isStandalone: true, selector: "[buiCardAction]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-action" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardAction]',
+                    host: { 'data-slot': 'card-action', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('px-6', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardContent, isStandalone: true, selector: "[buiCardContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardContent]',
+                    host: { 'data-slot': 'card-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiCardFooter {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex items-center px-6 [.border-t]:pt-6', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiCardFooter, isStandalone: true, selector: "[buiCardFooter]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "card-footer" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCardFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiCardFooter]',
+                    host: { 'data-slot': 'card-footer', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const ALERT_BASE = 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current';
+const ALERT_VARIANTS = {
+    default: 'bg-card text-card-foreground',
+    destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive',
+};
+const ALERT_TONES = {
+    success: 'border-success/20 bg-success/10 text-success [&>svg]:text-success *:data-[slot=alert-description]:text-success',
+    warning: 'border-warning/20 bg-warning/10 text-warning [&>svg]:text-warning *:data-[slot=alert-description]:text-warning',
+    danger: 'border-destructive/20 bg-destructive/10 text-destructive [&>svg]:text-destructive *:data-[slot=alert-description]:text-destructive',
+    info: 'border-info/20 bg-info/10 text-info [&>svg]:text-info *:data-[slot=alert-description]:text-info',
+    neutral: 'border-border bg-muted text-foreground [&>svg]:text-foreground *:data-[slot=alert-description]:text-muted-foreground',
+};
+/**
+ * BlatUI alert. `role="alert"` for assistive tech. Brand `variant`
+ * (`default | destructive`) or semantic `tone` (`success | warning | danger | info | neutral`).
+ */
+class BuiAlert {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    tone = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => {
+        const tone = this.tone();
+        const toneOrVariant = tone === null ? ALERT_VARIANTS[this.variant()] : ALERT_TONES[tone];
+        return cn(ALERT_BASE, toneOrVariant, this.userClass());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlert, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlert, isStandalone: true, selector: "[buiAlert]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert", "role": "alert" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlert, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlert]',
+                    host: { 'data-slot': 'alert', role: 'alert', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertTitle, isStandalone: true, selector: "[buiAlertTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertTitle]',
+                    host: { 'data-slot': 'alert-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDescription, isStandalone: true, selector: "[buiAlertDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDescription]',
+                    host: { 'data-slot': 'alert-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const INPUT_BASE = 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive';
+const INPUT_SIZES = {
+    sm: 'h-8 px-2.5 py-1 text-sm file:h-6 file:text-xs',
+    default: 'h-9 px-3 py-1 text-base md:text-sm file:h-7 file:text-sm',
+    lg: 'h-10 px-4 py-2 text-base file:h-8 file:text-sm',
+};
+/** Applies BlatUI input styling to a native `<input>` (keeps native validation & a11y). */
+class BuiInput {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(INPUT_BASE, INPUT_SIZES[this.size()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInput, isStandalone: true, selector: "input[buiInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[buiInput]',
+                    host: {
+                        'data-slot': 'input',
+                        '[attr.data-size]': 'size()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TEXTAREA_BASE = 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content w-full rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+const TEXTAREA_SIZES = {
+    sm: 'min-h-14 px-2.5 py-1.5 text-sm',
+    default: 'min-h-16 px-3 py-2 text-base md:text-sm',
+    lg: 'min-h-20 px-4 py-2.5 text-base',
+};
+/** Applies BlatUI textarea styling to a native `<textarea>` (auto-grows via field-sizing). */
+class BuiTextarea {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(TEXTAREA_BASE, TEXTAREA_SIZES[this.size()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTextarea, isStandalone: true, selector: "textarea[buiTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "textarea" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTextarea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[buiTextarea]',
+                    host: {
+                        'data-slot': 'textarea',
+                        '[attr.data-size]': 'size()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * BlatUI linear progress bar. Exposes the full `progressbar` ARIA contract
+ * (valuemin/max/now/text). Set `[indeterminate]="true"` for an unknown-duration bar.
+ */
+class BuiProgress {
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Progress', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    pct = computed(() => Math.max(0, Math.min(100, this.value())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
+    rounded = computed(() => Math.round(this.pct()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => `${this.rounded()}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    indicatorTransform = computed(() => `translateX(-${100 - this.pct()}%)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative block h-2 w-full overflow-hidden rounded-full bg-primary/20', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiProgress, isStandalone: true, selector: "bui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "progress", "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "indeterminate() ? null : rounded()", "attr.aria-valuetext": "indeterminate() ? null : valueText()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (indeterminate()) {
+      <span
+        data-slot="progress-indicator"
+        class="absolute inset-y-0 w-2/5 animate-progress-indeterminate rounded-full bg-primary"
+      ></span>
+    } @else {
+      <span
+        data-slot="progress-indicator"
+        class="block h-full w-full rounded-full bg-primary transition-all"
+        [style.transform]="indicatorTransform()"
+      ></span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-progress',
+                    host: {
+                        'data-slot': 'progress',
+                        role: 'progressbar',
+                        'aria-valuemin': '0',
+                        'aria-valuemax': '100',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : rounded()',
+                        '[attr.aria-valuetext]': 'indeterminate() ? null : valueText()',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    @if (indeterminate()) {
+      <span
+        data-slot="progress-indicator"
+        class="absolute inset-y-0 w-2/5 animate-progress-indeterminate rounded-full bg-primary"
+      ></span>
+    } @else {
+      <span
+        data-slot="progress-indicator"
+        class="block h-full w-full rounded-full bg-primary transition-all"
+        [style.transform]="indicatorTransform()"
+      ></span>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * BlatUI avatar. Renders the image when `src` is set and loads; otherwise shows
+ * the projected fallback (initials, icon). Falls back automatically on load error.
+ */
+class BuiAvatar {
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    error = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiAvatar, isStandalone: true, selector: "bui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "avatar" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (src() && !error()) {
+      <img
+        data-slot="avatar-image"
+        class="aspect-square size-full"
+        [src]="src()"
+        [alt]="alt()"
+        (error)="error.set(true)"
+      />
+    } @else {
+      <span
+        data-slot="avatar-fallback"
+        class="flex size-full items-center justify-center rounded-full bg-muted text-sm"
+      >
+        <ng-content />
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAvatar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-avatar',
+                    host: {
+                        'data-slot': 'avatar',
+                        '[class]': 'computedClass()',
+                    },
+                    template: `
+    @if (src() && !error()) {
+      <img
+        data-slot="avatar-image"
+        class="aspect-square size-full"
+        [src]="src()"
+        [alt]="alt()"
+        (error)="error.set(true)"
+      />
+    } @else {
+      <span
+        data-slot="avatar-fallback"
+        class="flex size-full items-center justify-center rounded-full bg-muted text-sm"
+      >
+        <ng-content />
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const CHECKBOX_BASE = 'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center';
+/**
+ * BlatUI checkbox. A native `<button role="checkbox">` (Space/Enter toggle for free)
+ * with `[(checked)]` two-way binding and tri-state `[(indeterminate)]`.
+ */
+class BuiCheckbox {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    indeterminate = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    state = computed(() => {
+        if (this.indeterminate()) {
+            return 'indeterminate';
+        }
+        return this.checked() ? 'checked' : 'unchecked';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    ariaChecked = computed(() => this.indeterminate() ? 'mixed' : String(this.checked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(CHECKBOX_BASE, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.indeterminate()) {
+            this.indeterminate.set(false);
+            this.checked.set(true);
+        }
+        else {
+            this.checked.update((value) => !value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCheckbox, isStandalone: true, selector: "button[buiCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "button", "role": "checkbox", "data-slot": "checkbox" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "ariaChecked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (checked() || indeterminate()) {
+      <span data-slot="checkbox-indicator" class="flex items-center justify-center text-current">
+        @if (indeterminate()) {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        } @else {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiCheckbox]',
+                    host: {
+                        type: 'button',
+                        role: 'checkbox',
+                        'data-slot': 'checkbox',
+                        '[attr.aria-checked]': 'ariaChecked()',
+                        '[attr.data-state]': 'state()',
+                        '[disabled]': 'disabled()',
+                        '[class]': 'computedClass()',
+                        '(click)': 'toggle()',
+                    },
+                    template: `
+    @if (checked() || indeterminate()) {
+      <span data-slot="checkbox-indicator" class="flex items-center justify-center text-current">
+        @if (indeterminate()) {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        } @else {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        }
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const SWITCH_BASE = 'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+const SWITCH_TRACK = {
+    sm: 'h-4 w-7',
+    default: 'h-[1.15rem] w-8',
+    lg: 'h-6 w-10',
+};
+const SWITCH_THUMB = {
+    sm: 'size-3.5',
+    default: 'size-4',
+    lg: 'size-5',
+};
+const THUMB_BASE = 'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0';
+/**
+ * BlatUI switch. A native `<button role="switch">` with `[(checked)]` two-way
+ * binding; keyboard activation (Space/Enter) and focus come from the native button.
+ */
+class BuiSwitch {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    state = computed(() => (this.checked() ? 'checked' : 'unchecked'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn(SWITCH_BASE, SWITCH_TRACK[this.size()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    thumbClass = computed(() => cn(THUMB_BASE, SWITCH_THUMB[this.size()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbClass" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.checked.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiSwitch, isStandalone: true, selector: "button[buiSwitch]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "type": "button", "role": "switch", "data-slot": "switch" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "state()", "disabled": "disabled()", "class": "computedClass()" } }, ngImport: i0, template: `
+    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()"></span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSwitch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[buiSwitch]',
+                    host: {
+                        type: 'button',
+                        role: 'switch',
+                        'data-slot': 'switch',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'state()',
+                        '[disabled]': 'disabled()',
+                        '[class]': 'computedClass()',
+                        '(click)': 'toggle()',
+                    },
+                    template: `
+    <span data-slot="switch-thumb" [attr.data-state]="state()" [class]="thumbClass()"></span>
+  `,
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TRIGGER = 'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg]:text-muted-foreground [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>svg]:transition-transform [&>svg]:duration-200 [&[aria-expanded=true]>svg]:rotate-180';
+class BuiAccordion {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('w-full', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAccordion, isStandalone: true, selector: "[buiAccordion]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "accordion" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAccordion]',
+                    host: { 'data-slot': 'accordion', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAccordionItem {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('border-b last:border-b-0', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAccordionItem, isStandalone: true, selector: "[buiAccordionItem]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "accordion-item" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAccordionItem]',
+                    host: { 'data-slot': 'accordion-item', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAccordionTrigger {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(TRIGGER, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAccordionTrigger, isStandalone: true, selector: "button[buiAccordionTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "accordion-trigger" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiAccordionTrigger]',
+                    host: { 'data-slot': 'accordion-trigger', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAccordionContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('overflow-hidden text-sm', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAccordionContent, isStandalone: true, selector: "[buiAccordionContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "accordion-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAccordionContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAccordionContent]',
+                    host: { 'data-slot': 'accordion-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TAB_TRIGGER = 'text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 cursor-default items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-background aria-selected:shadow-sm dark:aria-selected:text-foreground dark:aria-selected:border-input dark:aria-selected:bg-input/30';
+class BuiTabs {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col gap-2', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTabs, isStandalone: true, selector: "[buiTabs]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabs, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTabs]',
+                    host: { 'data-slot': 'tabs', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiTabList {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTabList, isStandalone: true, selector: "[buiTabList]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-list" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTabList]',
+                    host: { 'data-slot': 'tabs-list', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiTabTrigger {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(TAB_TRIGGER, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTabTrigger, isStandalone: true, selector: "[buiTabTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-trigger" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTabTrigger]',
+                    host: { 'data-slot': 'tabs-trigger', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiTabPanel {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex-1 outline-none', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiTabPanel, isStandalone: true, selector: "[buiTabPanel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTabPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTabPanel]',
+                    host: { 'data-slot': 'tabs-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const DIALOG_CONTENT = 'bg-background relative grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg';
+class BuiDialogContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(DIALOG_CONTENT, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDialogContent, isStandalone: true, selector: "[buiDialogContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-content" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDialogContent]',
+                    host: { 'data-slot': 'dialog-content', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDialogHeader {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDialogHeader, isStandalone: true, selector: "[buiDialogHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-header" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDialogHeader]',
+                    host: { 'data-slot': 'dialog-header', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDialogTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-lg leading-none font-semibold', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDialogTitle, isStandalone: true, selector: "[buiDialogTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDialogTitle]',
+                    host: { 'data-slot': 'dialog-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDialogDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm text-muted-foreground', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDialogDescription, isStandalone: true, selector: "[buiDialogDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDialogDescription]',
+                    host: { 'data-slot': 'dialog-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDialogFooter {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDialogFooter, isStandalone: true, selector: "[buiDialogFooter]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dialog-footer" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDialogFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDialogFooter]',
+                    host: { 'data-slot': 'dialog-footer', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Every token the `@theme inline` mapping references — emitted into `:root` on export. */
+const THEME_TOKENS = [
+    '--radius',
+    '--spacing',
+    '--tracking-normal',
+    '--font-sans',
+    '--font-serif',
+    '--font-mono',
+    '--shadow-2xs',
+    '--shadow-xs',
+    '--shadow-sm',
+    '--shadow',
+    '--shadow-md',
+    '--shadow-lg',
+    '--shadow-xl',
+    '--shadow-2xl',
+    '--background',
+    '--foreground',
+    '--card',
+    '--card-foreground',
+    '--popover',
+    '--popover-foreground',
+    '--primary',
+    '--primary-foreground',
+    '--secondary',
+    '--secondary-foreground',
+    '--muted',
+    '--muted-foreground',
+    '--accent',
+    '--accent-foreground',
+    '--destructive',
+    '--destructive-foreground',
+    '--border',
+    '--input',
+    '--ring',
+    '--chart-1',
+    '--chart-2',
+    '--chart-3',
+    '--chart-4',
+    '--chart-5',
+    '--sidebar',
+    '--sidebar-foreground',
+    '--sidebar-primary',
+    '--sidebar-primary-foreground',
+    '--sidebar-accent',
+    '--sidebar-accent-foreground',
+    '--sidebar-border',
+    '--sidebar-ring',
+];
+const THEME_SCAFFOLD = `@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+  --font-mono: var(--font-mono);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --spacing: var(--spacing);
+
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}`;
+const DEFAULTS = {
+    mode: 'light',
+    base: 'neutral',
+    preset: 'default',
+    radius: '0.625',
+    font: 'sans',
+    fontHeading: 'sans',
+    shadow: 'default',
+    spacing: 'default',
+    tracking: 'normal',
+    inputStyle: 'outline',
+};
+/**
+ * Live theme engine (the brain behind `<bui-theme-customizer>`). Mirrors BlatUI:
+ * every dimension just toggles a `data-*` attribute / the `.dark` class on `<html>`,
+ * and `blatui.css` holds all the token values. `exportCss()` serialises the active
+ * theme to a paste-ready stylesheet. SSR-safe and persisted to localStorage.
+ */
+class ThemeStore {
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    mode = signal(DEFAULTS.mode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    base = signal(DEFAULTS.base, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "base" }] : /* istanbul ignore next */ []));
+    preset = signal(DEFAULTS.preset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    radius = signal(DEFAULTS.radius, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    font = signal(DEFAULTS.font, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "font" }] : /* istanbul ignore next */ []));
+    fontHeading = signal(DEFAULTS.fontHeading, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fontHeading" }] : /* istanbul ignore next */ []));
+    shadow = signal(DEFAULTS.shadow, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    spacing = signal(DEFAULTS.spacing, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    tracking = signal(DEFAULTS.tracking, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
+    inputStyle = signal(DEFAULTS.inputStyle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    systemDark = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
+    isDark = computed(() => this.mode() === 'dark' || (this.mode() === 'system' && this.systemDark()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.load();
+        const mql = typeof globalThis.matchMedia === 'function'
+            ? globalThis.matchMedia('(prefers-color-scheme: dark)')
+            : null;
+        if (mql) {
+            this.systemDark.set(mql.matches);
+            mql.addEventListener('change', (event) => {
+                this.systemDark.set(event.matches);
+            });
+        }
+        effect(() => {
+            this.apply();
+        });
+    }
+    setMode(value) {
+        this.mode.set(value);
+    }
+    setBase(value) {
+        this.base.set(value);
+    }
+    setPreset(value) {
+        this.preset.set(value);
+    }
+    setRadius(value) {
+        this.radius.set(value);
+    }
+    setFont(value) {
+        this.font.set(value);
+    }
+    setFontHeading(value) {
+        this.fontHeading.set(value);
+    }
+    setShadow(value) {
+        this.shadow.set(value);
+    }
+    setSpacing(value) {
+        this.spacing.set(value);
+    }
+    setTracking(value) {
+        this.tracking.set(value);
+    }
+    setInputStyle(value) {
+        this.inputStyle.set(value);
+    }
+    toggle() {
+        this.setMode(this.isDark() ? 'light' : 'dark');
+    }
+    reset() {
+        this.mode.set(DEFAULTS.mode);
+        this.base.set(DEFAULTS.base);
+        this.preset.set(DEFAULTS.preset);
+        this.radius.set(DEFAULTS.radius);
+        this.font.set(DEFAULTS.font);
+        this.fontHeading.set(DEFAULTS.fontHeading);
+        this.shadow.set(DEFAULTS.shadow);
+        this.spacing.set(DEFAULTS.spacing);
+        this.tracking.set(DEFAULTS.tracking);
+        this.inputStyle.set(DEFAULTS.inputStyle);
+    }
+    /** Serialise the active theme to a complete, paste-ready stylesheet. */
+    exportCss() {
+        if (!this.isBrowser) {
+            return '';
+        }
+        const root = document.documentElement;
+        const wasDark = root.classList.contains('dark');
+        root.classList.remove('dark');
+        const light = this.readTokens();
+        root.classList.add('dark');
+        const dark = this.readTokens();
+        root.classList.toggle('dark', wasDark);
+        const block = (source, keys) => keys
+            .filter((token) => source[token])
+            .map((token) => `  ${token}: ${source[token] ?? ''};`)
+            .join('\n');
+        const darkKeys = THEME_TOKENS.filter((token) => dark[token] && dark[token] !== light[token]);
+        return `${THEME_SCAFFOLD}\n\n:root {\n${block(light, THEME_TOKENS)}\n}\n\n.dark {\n${block(dark, darkKeys)}\n}\n`;
+    }
+    readTokens() {
+        const cs = getComputedStyle(document.documentElement);
+        const out = {};
+        for (const token of THEME_TOKENS) {
+            out[token] = cs.getPropertyValue(token).trim();
+        }
+        return out;
+    }
+    load() {
+        const read = (key, fallback) => localStorage.getItem(`theme:${key}`) ?? fallback;
+        this.mode.set(read('mode', DEFAULTS.mode));
+        this.base.set(read('base', DEFAULTS.base));
+        this.preset.set(read('preset', DEFAULTS.preset));
+        this.radius.set(read('radius', DEFAULTS.radius));
+        this.font.set(read('font', DEFAULTS.font));
+        this.fontHeading.set(read('fontHeading', DEFAULTS.fontHeading));
+        this.shadow.set(read('shadow', DEFAULTS.shadow));
+        this.spacing.set(read('spacing', DEFAULTS.spacing));
+        this.tracking.set(read('tracking', DEFAULTS.tracking));
+        this.inputStyle.set(read('inputStyle', DEFAULTS.inputStyle));
+    }
+    apply() {
+        const root = document.documentElement;
+        const state = {
+            mode: this.mode(),
+            base: this.base(),
+            preset: this.preset(),
+            radius: this.radius(),
+            font: this.font(),
+            fontHeading: this.fontHeading(),
+            shadow: this.shadow(),
+            spacing: this.spacing(),
+            tracking: this.tracking(),
+            inputStyle: this.inputStyle(),
+        };
+        root.classList.toggle('dark', this.isDark());
+        this.attr(root, 'data-base', state.base, DEFAULTS.base);
+        this.attr(root, 'data-theme', state.preset, DEFAULTS.preset);
+        this.attr(root, 'data-font', state.font, DEFAULTS.font);
+        this.attr(root, 'data-font-heading', state.fontHeading, DEFAULTS.fontHeading);
+        this.attr(root, 'data-shadow', state.shadow, DEFAULTS.shadow);
+        this.attr(root, 'data-spacing', state.spacing, DEFAULTS.spacing);
+        this.attr(root, 'data-tracking', state.tracking, DEFAULTS.tracking);
+        this.attr(root, 'data-input-style', state.inputStyle, DEFAULTS.inputStyle);
+        root.setAttribute('data-radius', state.radius);
+        for (const [key, value] of Object.entries(state)) {
+            localStorage.setItem(`theme:${key}`, value);
+        }
+    }
+    attr(root, name, value, fallback) {
+        if (value && value !== fallback) {
+            root.setAttribute(name, value);
+        }
+        else {
+            root.removeAttribute(name);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const FONTS = [
+    { value: 'sans', label: 'Default', family: "'Instrument Sans', sans-serif" },
+    { value: 'inter', label: 'Inter', family: "'Inter', sans-serif" },
+    { value: 'geist', label: 'Geist', family: "'Geist', sans-serif" },
+    { value: 'manrope', label: 'Manrope', family: "'Manrope', sans-serif" },
+    { value: 'jakarta', label: 'Jakarta', family: "'Plus Jakarta Sans', sans-serif" },
+    { value: 'space-grotesk', label: 'Grotesk', family: "'Space Grotesk', sans-serif" },
+    { value: 'dm-sans', label: 'DM Sans', family: "'DM Sans', sans-serif" },
+    { value: 'outfit', label: 'Outfit', family: "'Outfit', sans-serif" },
+    { value: 'sora', label: 'Sora', family: "'Sora', sans-serif" },
+    { value: 'system', label: 'System', family: 'system-ui, sans-serif' },
+    { value: 'serif', label: 'Serif', family: 'ui-serif, Georgia, serif' },
+    { value: 'mono', label: 'Mono', family: 'ui-monospace, monospace' },
+];
+/**
+ * BlatUI's "Customize" toolbar, ported to Angular. Tunes every theme dimension
+ * live (mode, base, accent, radius, input style, fonts, shadow, spacing, tracking)
+ * through {@link ThemeStore}, then exports a paste-ready stylesheet via "Copy CSS".
+ */
+class BuiThemeCustomizer {
+    theme = inject(ThemeStore);
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    modes = [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'system', label: 'System' },
+    ];
+    bases = [
+        { value: 'neutral', color: 'oklch(0.205 0 0)' },
+        { value: 'stone', color: 'oklch(0.216 0.006 56.043)' },
+        { value: 'zinc', color: 'oklch(0.21 0.006 285.885)' },
+        { value: 'slate', color: 'oklch(0.208 0.042 265.755)' },
+        { value: 'gray', color: 'oklch(0.21 0.034 264.665)' },
+        { value: 'mauve', color: 'oklch(0.212 0.019 322.12)' },
+        { value: 'olive', color: 'oklch(0.228 0.013 107.4)' },
+        { value: 'mist', color: 'oklch(0.218 0.008 223.9)' },
+        { value: 'taupe', color: 'oklch(0.214 0.009 43.1)' },
+    ];
+    accents = [
+        { value: 'default', color: 'var(--primary)' },
+        { value: 'blue', color: 'oklch(0.488 0.243 264.376)' },
+        { value: 'indigo', color: 'oklch(0.457 0.24 277.023)' },
+        { value: 'violet', color: 'oklch(0.491 0.27 292.581)' },
+        { value: 'purple', color: 'oklch(0.496 0.265 301.924)' },
+        { value: 'fuchsia', color: 'oklch(0.518 0.253 323.949)' },
+        { value: 'pink', color: 'oklch(0.525 0.223 3.958)' },
+        { value: 'rose', color: 'oklch(0.514 0.222 16.935)' },
+        { value: 'red', color: 'oklch(0.505 0.213 27.518)' },
+        { value: 'orange', color: 'oklch(0.553 0.195 38.402)' },
+        { value: 'amber', color: 'oklch(0.555 0.163 48.998)' },
+        { value: 'green', color: 'oklch(0.527 0.154 150.069)' },
+        { value: 'emerald', color: 'oklch(0.508 0.118 165.612)' },
+        { value: 'teal', color: 'oklch(0.511 0.096 186.391)' },
+        { value: 'cyan', color: 'oklch(0.52 0.105 223.128)' },
+        { value: 'sky', color: 'oklch(0.5 0.134 242.749)' },
+    ];
+    radii = ['0', '0.3', '0.5', '0.625', '0.75', '1'];
+    inputStyles = [
+        { value: 'outline', label: 'Outline' },
+        { value: 'fill', label: 'Fill' },
+        { value: 'inset', label: 'Inset' },
+    ];
+    fonts = FONTS;
+    shadows = [
+        { value: 'none', label: 'None' },
+        { value: 'sm', label: 'SM' },
+        { value: 'default', label: 'Base' },
+        { value: 'lg', label: 'LG' },
+        { value: 'xl', label: 'XL' },
+    ];
+    spacings = [
+        { value: 'compact', label: 'S' },
+        { value: 'default', label: 'M' },
+        { value: 'comfortable', label: 'L' },
+    ];
+    trackings = [
+        { value: 'tight', label: 'S' },
+        { value: 'normal', label: 'M' },
+        { value: 'wide', label: 'L' },
+    ];
+    _hasClipboard = computed(() => typeof navigator !== 'undefined' && !!navigator.clipboard, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasClipboard" }] : /* istanbul ignore next */ []));
+    async copyCss() {
+        if (!this._hasClipboard()) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(this.theme.exportCss());
+            this.copied.set(true);
+            setTimeout(() => {
+                this.copied.set(false);
+            }, 2000);
+        }
+        catch {
+            // Clipboard unavailable / permission denied — silently ignore.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiThemeCustomizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiThemeCustomizer, isStandalone: true, selector: "bui-theme-customizer", host: { attributes: { "data-slot": "theme-customizer" } }, ngImport: i0, template: `
+    <button
+      buiButton
+      variant="outline"
+      size="sm"
+      class="fixed right-4 bottom-4 z-50 shadow-md"
+      [attr.aria-expanded]="open()"
+      (click)="open.set(!open())"
+    >
+      {{ open() ? 'Close' : 'Customize' }}
+    </button>
+
+    @if (open()) {
+      <div
+        role="dialog"
+        aria-label="Theme customizer"
+        class="fixed right-4 bottom-16 z-50 max-h-[80vh] w-[340px] space-y-5 overflow-y-auto rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div>
+            <h4 class="text-sm font-semibold">Customize</h4>
+            <p class="text-xs text-muted-foreground">
+              Tune it live. Every preset is pure CSS variables.
+            </p>
+          </div>
+          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">Reset</button>
+        </div>
+
+        <!-- Mode -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Mode</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (m of modes; track m.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.mode() === m.value"
+                (click)="theme.setMode(m.value)"
+              >
+                {{ m.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Base color -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Base color</span>
+          <div class="grid grid-cols-9 gap-2">
+            @for (b of bases; track b.value) {
+              <button
+                type="button"
+                class="flex h-8 items-center justify-center rounded-md border border-input ring-offset-2 ring-offset-background transition-all data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                [style.background]="b.color"
+                [attr.data-active]="theme.base() === b.value"
+                (click)="theme.setBase(b.value)"
+              >
+                <span class="sr-only">{{ b.value }}</span>
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Accent -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Accent</span>
+          <div class="grid grid-cols-6 gap-2">
+            @for (a of accents; track a.value) {
+              <button
+                type="button"
+                class="flex h-8 items-center justify-center rounded-md border border-input ring-offset-2 ring-offset-background transition-all data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                [style.background]="a.color"
+                [attr.data-active]="theme.preset() === a.value"
+                (click)="theme.setPreset(a.value)"
+              >
+                <span class="sr-only">{{ a.value }}</span>
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Radius -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Radius</span>
+          <div class="grid grid-cols-6 gap-2">
+            @for (r of radii; track r) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.radius() === r"
+                (click)="theme.setRadius(r)"
+              >
+                {{ r }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Input style -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Input style</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (i of inputStyles; track i.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.inputStyle() === i.value"
+                (click)="theme.setInputStyle(i.value)"
+              >
+                {{ i.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Body font -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Body font</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (f of fonts; track f.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [style.fontFamily]="f.family"
+                [attr.data-active]="theme.font() === f.value"
+                (click)="theme.setFont(f.value)"
+              >
+                {{ f.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Heading font -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Heading font</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (f of fonts; track f.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [style.fontFamily]="f.family"
+                [attr.data-active]="theme.fontHeading() === f.value"
+                (click)="theme.setFontHeading(f.value)"
+              >
+                {{ f.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Shadow -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Shadow</span>
+          <div class="grid grid-cols-5 gap-2">
+            @for (s of shadows; track s.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.shadow() === s.value"
+                (click)="theme.setShadow(s.value)"
+              >
+                {{ s.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Spacing + Tracking -->
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-1.5">
+            <span class="text-xs font-medium">Spacing</span>
+            <div class="grid grid-cols-3 gap-1.5">
+              @for (s of spacings; track s.value) {
+                <button
+                  type="button"
+                  class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                  [attr.data-active]="theme.spacing() === s.value"
+                  (click)="theme.setSpacing(s.value)"
+                >
+                  {{ s.label }}
+                </button>
+              }
+            </div>
+          </div>
+          <div class="space-y-1.5">
+            <span class="text-xs font-medium">Tracking</span>
+            <div class="grid grid-cols-3 gap-1.5">
+              @for (t of trackings; track t.value) {
+                <button
+                  type="button"
+                  class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                  [attr.data-active]="theme.tracking() === t.value"
+                  (click)="theme.setTracking(t.value)"
+                >
+                  {{ t.label }}
+                </button>
+              }
+            </div>
+          </div>
+        </div>
+
+        <!-- Export -->
+        <div class="border-t pt-4">
+          <p class="mb-2.5 text-xs leading-relaxed text-muted-foreground">
+            Copy your complete theme and paste it as your app stylesheet — the Tailwind import,
+            every token and the
+            <code class="rounded bg-muted px-1 py-0.5 text-[11px]">&#64;theme</code>
+            mapping are included.
+          </p>
+          <button buiButton size="sm" class="w-full" (click)="copyCss()">
+            {{ copied() ? 'Copied to clipboard' : 'Copy theme CSS' }}
+          </button>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: BuiButton, selector: "button[buiButton], a[buiButton]", inputs: ["variant", "size", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiThemeCustomizer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-theme-customizer',
+                    imports: [BuiButton],
+                    host: { 'data-slot': 'theme-customizer' },
+                    template: `
+    <button
+      buiButton
+      variant="outline"
+      size="sm"
+      class="fixed right-4 bottom-4 z-50 shadow-md"
+      [attr.aria-expanded]="open()"
+      (click)="open.set(!open())"
+    >
+      {{ open() ? 'Close' : 'Customize' }}
+    </button>
+
+    @if (open()) {
+      <div
+        role="dialog"
+        aria-label="Theme customizer"
+        class="fixed right-4 bottom-16 z-50 max-h-[80vh] w-[340px] space-y-5 overflow-y-auto rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div>
+            <h4 class="text-sm font-semibold">Customize</h4>
+            <p class="text-xs text-muted-foreground">
+              Tune it live. Every preset is pure CSS variables.
+            </p>
+          </div>
+          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">Reset</button>
+        </div>
+
+        <!-- Mode -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Mode</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (m of modes; track m.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.mode() === m.value"
+                (click)="theme.setMode(m.value)"
+              >
+                {{ m.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Base color -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Base color</span>
+          <div class="grid grid-cols-9 gap-2">
+            @for (b of bases; track b.value) {
+              <button
+                type="button"
+                class="flex h-8 items-center justify-center rounded-md border border-input ring-offset-2 ring-offset-background transition-all data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                [style.background]="b.color"
+                [attr.data-active]="theme.base() === b.value"
+                (click)="theme.setBase(b.value)"
+              >
+                <span class="sr-only">{{ b.value }}</span>
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Accent -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Accent</span>
+          <div class="grid grid-cols-6 gap-2">
+            @for (a of accents; track a.value) {
+              <button
+                type="button"
+                class="flex h-8 items-center justify-center rounded-md border border-input ring-offset-2 ring-offset-background transition-all data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                [style.background]="a.color"
+                [attr.data-active]="theme.preset() === a.value"
+                (click)="theme.setPreset(a.value)"
+              >
+                <span class="sr-only">{{ a.value }}</span>
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Radius -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Radius</span>
+          <div class="grid grid-cols-6 gap-2">
+            @for (r of radii; track r) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.radius() === r"
+                (click)="theme.setRadius(r)"
+              >
+                {{ r }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Input style -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Input style</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (i of inputStyles; track i.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.inputStyle() === i.value"
+                (click)="theme.setInputStyle(i.value)"
+              >
+                {{ i.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Body font -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Body font</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (f of fonts; track f.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [style.fontFamily]="f.family"
+                [attr.data-active]="theme.font() === f.value"
+                (click)="theme.setFont(f.value)"
+              >
+                {{ f.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Heading font -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Heading font</span>
+          <div class="grid grid-cols-3 gap-2">
+            @for (f of fonts; track f.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [style.fontFamily]="f.family"
+                [attr.data-active]="theme.fontHeading() === f.value"
+                (click)="theme.setFontHeading(f.value)"
+              >
+                {{ f.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Shadow -->
+        <div class="space-y-1.5">
+          <span class="text-xs font-medium">Shadow</span>
+          <div class="grid grid-cols-5 gap-2">
+            @for (s of shadows; track s.value) {
+              <button
+                type="button"
+                class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                [attr.data-active]="theme.shadow() === s.value"
+                (click)="theme.setShadow(s.value)"
+              >
+                {{ s.label }}
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Spacing + Tracking -->
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-1.5">
+            <span class="text-xs font-medium">Spacing</span>
+            <div class="grid grid-cols-3 gap-1.5">
+              @for (s of spacings; track s.value) {
+                <button
+                  type="button"
+                  class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                  [attr.data-active]="theme.spacing() === s.value"
+                  (click)="theme.setSpacing(s.value)"
+                >
+                  {{ s.label }}
+                </button>
+              }
+            </div>
+          </div>
+          <div class="space-y-1.5">
+            <span class="text-xs font-medium">Tracking</span>
+            <div class="grid grid-cols-3 gap-1.5">
+              @for (t of trackings; track t.value) {
+                <button
+                  type="button"
+                  class="inline-flex h-8 items-center justify-center rounded-md border border-input text-xs font-medium transition-colors hover:bg-accent data-[active=true]:border-primary data-[active=true]:bg-accent"
+                  [attr.data-active]="theme.tracking() === t.value"
+                  (click)="theme.setTracking(t.value)"
+                >
+                  {{ t.label }}
+                </button>
+              }
+            </div>
+          </div>
+        </div>
+
+        <!-- Export -->
+        <div class="border-t pt-4">
+          <p class="mb-2.5 text-xs leading-relaxed text-muted-foreground">
+            Copy your complete theme and paste it as your app stylesheet — the Tailwind import,
+            every token and the
+            <code class="rounded bg-muted px-1 py-0.5 text-[11px]">&#64;theme</code>
+            mapping are included.
+          </p>
+          <button buiButton size="sm" class="w-full" (click)="copyCss()">
+            {{ copied() ? 'Copied to clipboard' : 'Copy theme CSS' }}
+          </button>
+        </div>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/*
+ * Public API Surface of ng-blatui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAvatar, BuiBadge, BuiButton, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiInput, BuiLabel, BuiProgress, BuiSeparator, BuiSkeleton, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTabs, BuiTextarea, BuiThemeCustomizer, THEME_TOKENS, ThemeStore, buttonVariants, cn };
+//# sourceMappingURL=ng-blatui.mjs.map