ng-blatui 1.8.0 → 1.10.0

package/fesm2022/ng-blatui.mjs

@@ -81,7 +81,7 @@ const VARIANTS = {
     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$1 = {
+const TONES$2 = {
     success: {
         soft: 'border-transparent bg-success/10 text-success dark:bg-success/15',
         solid: 'border-transparent bg-success text-success-foreground',
@@ -143,7 +143,7 @@ class BuiBadge {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     computedClass = computed(() => {
         const tone = this.tone();
-        const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$1[tone][intensityFor(this.variant())];
+        const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$2[tone][intensityFor(this.variant())];
         return cn(BASE, SIZES$2[this.size()], toneOrVariant, this.userClass());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
@@ -2801,7 +2801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const TONES = {
+const TONES$1 = {
     default: 'bg-muted text-foreground border-border',
     primary: 'bg-primary text-primary-foreground border-transparent',
     info: 'bg-info/10 text-info border-info/25',
@@ -2824,7 +2824,7 @@ class BuiBanner {
     show = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    computedClass = computed(() => cn('relative flex w-full items-center gap-3 border-b px-4 py-2.5 text-sm', TONES[this.tone()], this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn('relative flex w-full items-center gap-3 border-b px-4 py-2.5 text-sm', TONES$1[this.tone()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         const key = this.persistKey();
@@ -3513,6 +3513,304 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** A bordered group that composes inputs with addons (icons, text, buttons). */
+class BuiInputGroup {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[>textarea]:h-auto dark:bg-input/30', 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: BuiInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputGroup, isStandalone: true, selector: "[buiInputGroup]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group", "role": "group" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiInputGroup]',
+                    host: { 'data-slot': 'input-group', role: 'group', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+const ADDON_ALIGN = {
+    'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+    'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+    'block-start': 'order-first w-full justify-start px-3 pt-3',
+    'block-end': 'order-last w-full justify-start px-3 pb-3',
+};
+class BuiInputGroupAddon {
+    align = input('inline-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", ADDON_ALIGN[this.align()], 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: BuiInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputGroupAddon, isStandalone: true, selector: "[buiInputGroupAddon]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-addon" }, properties: { "attr.data-align": "align()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputGroupAddon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiInputGroupAddon]',
+                    host: {
+                        'data-slot': 'input-group-addon',
+                        '[attr.data-align]': 'align()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiInputGroupInput {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('w-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-3 py-1 text-base shadow-none outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md: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: BuiInputGroupInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputGroupInput, isStandalone: true, selector: "input[buiInputGroupInput], textarea[buiInputGroupInput]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-control" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputGroupInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[buiInputGroupInput], textarea[buiInputGroupInput]',
+                    host: { 'data-slot': 'input-group-control', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiInputGroupText {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4", 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: BuiInputGroupText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputGroupText, isStandalone: true, selector: "[buiInputGroupText]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input-group-text" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputGroupText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiInputGroupText]',
+                    host: { 'data-slot': 'input-group-text', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+const IG_BUTTON_BASE = "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const IG_BUTTON_VARIANTS = {
+    ghost: 'hover:bg-accent hover:text-accent-foreground',
+    outline: 'bg-background hover:bg-accent hover:text-accent-foreground border shadow-xs',
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+};
+const IG_BUTTON_SIZES = {
+    xs: 'h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 text-xs',
+    sm: 'h-8 gap-1.5 px-2.5',
+    'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0',
+    'icon-sm': 'size-8 p-0',
+};
+class BuiInputGroupButton {
+    variant = input('ghost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('xs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(IG_BUTTON_BASE, IG_BUTTON_VARIANTS[this.variant()], IG_BUTTON_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: BuiInputGroupButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiInputGroupButton, isStandalone: true, selector: "button[buiInputGroupButton]", 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: { "type": "button", "data-slot": "input-group-button" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiInputGroupButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiInputGroupButton]',
+                    host: { type: 'button', 'data-slot': 'input-group-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 }] }] } });
+
+/** Visually hides content while keeping it available to assistive tech (sr-only). */
+class BuiVisuallyHidden {
+    focusable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('sr-only', this.focusable() &&
+        'focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:shadow-md', 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: BuiVisuallyHidden, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiVisuallyHidden, isStandalone: true, selector: "[buiVisuallyHidden]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "visually-hidden" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiVisuallyHidden, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiVisuallyHidden]',
+                    host: { 'data-slot': 'visually-hidden', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TONES = {
+    good: 'bg-emerald-600',
+    warning: 'bg-amber-500',
+    danger: 'bg-destructive',
+    default: 'bg-primary',
+};
+/** A labelled meter (`role="meter"`) for a measurement within a known range. */
+class BuiMeter {
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    showValue = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    unit = input('%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    clamped = computed(() => Math.max(this.min(), Math.min(this.max(), this.value())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    pct = computed(() => {
+        const range = this.max() - this.min() || 1;
+        return ((this.clamped() - this.min()) / range) * 100;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pct" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => `${this.value()}${this.unit()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    fillClass = computed(() => TONES[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('grid w-full gap-1.5', 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: BuiMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMeter, isStandalone: true, selector: "bui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "meter" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (label() || showValue()) {
+      <div class="flex items-center justify-between gap-2 text-sm">
+        @if (label()) {
+          <span class="font-medium text-foreground">{{ label() }}</span>
+        } @else {
+          <span aria-hidden="true"></span>
+        }
+        @if (showValue()) {
+          <span class="text-muted-foreground tabular-nums">{{ valueText() }}</span>
+        }
+      </div>
+    }
+    <div
+      role="meter"
+      [attr.aria-label]="label() ?? 'Meter'"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuetext]="valueText()"
+      class="relative h-2 w-full overflow-hidden rounded-full bg-muted"
+    >
+      <div
+        class="absolute inset-y-0 start-0 rounded-full transition-[width] duration-500 ease-out"
+        [class]="fillClass()"
+        [style.width.%]="pct()"
+      ></div>
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMeter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-meter',
+                    host: { 'data-slot': 'meter', '[class]': 'computedClass()' },
+                    template: `
+    @if (label() || showValue()) {
+      <div class="flex items-center justify-between gap-2 text-sm">
+        @if (label()) {
+          <span class="font-medium text-foreground">{{ label() }}</span>
+        } @else {
+          <span aria-hidden="true"></span>
+        }
+        @if (showValue()) {
+          <span class="text-muted-foreground tabular-nums">{{ valueText() }}</span>
+        }
+      </div>
+    }
+    <div
+      role="meter"
+      [attr.aria-label]="label() ?? 'Meter'"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [attr.aria-valuetext]="valueText()"
+      class="relative h-2 w-full overflow-hidden rounded-full bg-muted"
+    >
+      <div
+        class="absolute inset-y-0 start-0 rounded-full transition-[width] duration-500 ease-out"
+        [class]="fillClass()"
+        [style.width.%]="pct()"
+      ></div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const TREND_CLASS = {
+    up: 'text-emerald-600 font-medium',
+    down: 'text-destructive font-medium',
+    neutral: 'text-muted-foreground font-medium',
+};
+/** A KPI / statistic card: label, big value, and a trend-coloured change. */
+class BuiStat {
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    change = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []));
+    trend = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    caption = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    resolvedTrend = computed(() => {
+        const explicit = this.trend();
+        if (explicit) {
+            return explicit;
+        }
+        const change = (this.change() ?? '').trim();
+        if (change.startsWith('+')) {
+            return 'up';
+        }
+        if (change.startsWith('-') || change.startsWith('−')) {
+            return 'down';
+        }
+        return 'neutral';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTrend" }] : /* istanbul ignore next */ []));
+    trendClass = computed(() => TREND_CLASS[this.resolvedTrend()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('flex flex-col gap-1 rounded-lg border bg-card p-4', 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: BuiStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiStat, isStandalone: true, selector: "bui-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, change: { classPropertyName: "change", publicName: "change", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "stat" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-muted-foreground">{{ label() }}</span>
+    }
+    <span class="text-2xl font-semibold tabular-nums">{{ value() }}</span>
+    @if (change()) {
+      <span class="flex items-center gap-1.5 text-sm">
+        <span [class]="trendClass()">{{ change() }}</span>
+        @if (caption()) {
+          <span class="text-muted-foreground">{{ caption() }}</span>
+        }
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiStat, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-stat',
+                    host: { 'data-slot': 'stat', '[class]': 'computedClass()' },
+                    template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-muted-foreground">{{ label() }}</span>
+    }
+    <span class="text-2xl font-semibold tabular-nums">{{ value() }}</span>
+    @if (change()) {
+      <span class="flex items-center gap-1.5 text-sm">
+        <span [class]="trendClass()">{{ change() }}</span>
+        @if (caption()) {
+          <span class="text-muted-foreground">{{ caption() }}</span>
+        }
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], change: [{ type: i0.Input, args: [{ isSignal: true, alias: "change", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -3521,5 +3819,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiInput, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSpinner, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map