@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/button/fesm2022/button.mjs

@@ -1,71 +1,76 @@
 import * as i0 from '@angular/core';
-import { input, signal, computed, Component, NgModule } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { input, signal, computed, Component, InjectionToken, inject, Directive, NgModule } from '@angular/core';
 import * as i1 from '@spartan-ng/brain/button';
 import { BrnButton } from '@spartan-ng/brain/button';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+import { NgTemplateOutlet } from '@angular/common';
 import { HlmSpinner } from '@egose/shadcn-theme-ng/spinner';
 import { cva } from 'class-variance-authority';
-import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 const buttonVariants = cva([
-    'cursor-pointer',
-    'active:translate-y-[0.5px]',
-    'disabled:pointer-events-none',
-    'disabled:opacity-50',
-    'focus-visible:outline-none',
-    'focus-visible:ring-1',
-    'focus-visible:ring-ring',
-    'font-medium',
-    'gap-2',
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'rounded-sm',
-    'text-sm',
-    'transform',
-    'transition',
-    'transition-colors',
-    'whitespace-nowrap',
-    '[&_svg]:pointer-events-none',
-    '[&_svg]:shrink-0',
-    '[&_svg]:size-4',
-    'no-underline',
+    "cursor-pointer",
+    "active:translate-y-[0.5px]",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "focus-visible:ring-ring",
+    "font-medium",
+    "gap-2",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-sm",
+    "text-sm",
+    "transform",
+    "transition",
+    "transition-colors",
+    "whitespace-nowrap",
+    "[&_svg]:pointer-events-none",
+    "[&_svg]:shrink-0",
+    "[&_svg]:size-4",
+    "no-underline",
 ], {
     variants: {
         variant: {
-            primary: 'border border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
-            secondary: 'border border-secondary bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90',
-            success: 'border border-success bg-success text-success-foreground shadow-sm hover:bg-success/90',
-            warning: 'border border-warning bg-warning text-warning-foreground shadow-sm hover:bg-warning/90',
-            danger: 'border border-danger bg-danger text-danger-foreground shadow-sm hover:bg-danger/90',
-            info: 'border border-info bg-info text-info-foreground shadow-sm hover:bg-info/90',
-            light: 'border border-light bg-light text-light-foreground shadow-sm hover:bg-light/90',
-            dark: 'border border-dark bg-dark text-dark-foreground shadow-sm hover:bg-dark/90',
-            accent: 'border border-accent bg-accent text-accent-foreground shadow-sm hover:bg-accent/90',
-            destructive: 'border border-destructive bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-            muted: 'border border-muted bg-muted text-muted-foreground shadow-sm hover:bg-muted/90',
-            link: 'text-primary underline-offset-4 hover:underline',
-            ghost: 'hover:bg-light hover:text-light-foreground',
+            default: "border border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+            primary: "border border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+            secondary: "border border-secondary bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90",
+            success: "border border-success bg-success text-success-foreground shadow-sm hover:bg-success/90",
+            warning: "border border-warning bg-warning text-warning-foreground shadow-sm hover:bg-warning/90",
+            danger: "border border-danger bg-danger text-danger-foreground shadow-sm hover:bg-danger/90",
+            info: "border border-info bg-info text-info-foreground shadow-sm hover:bg-info/90",
+            light: "border border-light bg-light text-light-foreground shadow-sm hover:bg-light/90",
+            dark: "border border-dark bg-dark text-dark-foreground shadow-sm hover:bg-dark/90",
+            accent: "border border-accent bg-accent text-accent-foreground shadow-sm hover:bg-accent/90",
+            destructive: "border border-destructive bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+            muted: "border border-muted bg-muted text-muted-foreground shadow-sm hover:bg-muted/90",
+            outline: "border border-primary bg-white text-primary shadow-sm hover:bg-primary/10",
+            link: "text-primary underline-offset-4 hover:underline",
+            ghost: "hover:bg-light hover:text-light-foreground",
         },
         size: {
-            xs: 'h-7 rounded-xs px-2 text-xs',
-            sm: 'h-8 rounded-sm px-3',
-            default: 'h-9 px-4 py-2',
-            lg: 'h-10 rounded-sm px-7 text-base',
-            icon: 'h-9 w-9',
-            'compact-xs': 'h-6 px-2 py-1 text-xs',
-            'compact-sm': 'h-7 px-2 py-1',
-            'compact-default': 'h-8 px-2 py-1',
-            'compact-lg': 'h-9 px-2 py-1 text-base',
-            'compact-icon': 'h-8 w-8',
+            xs: "h-7 rounded-xs px-2 text-xs",
+            sm: "h-8 rounded-sm px-3",
+            default: "h-9 px-4 py-2",
+            lg: "h-10 rounded-sm px-7 text-base",
+            icon: "h-9 w-9",
+            'icon-xs': "h-6 w-6 rounded-xs",
+            'icon-sm': "h-8 w-8 rounded-sm",
+            'icon-lg': "h-10 w-10 rounded-sm",
+            'compact-xs': "h-6 px-2 py-1 text-xs",
+            'compact-sm': "h-7 px-2 py-1",
+            'compact-default': "h-8 px-2 py-1",
+            'compact-lg': "h-9 px-2 py-1 text-base",
+            'compact-icon': "h-8 w-8",
         },
         appearance: {
             solid: '',
-            outline: 'bg-white border',
-            'outline-filled': 'bg-white border',
+            outline: "bg-white border",
+            'outline-filled': "bg-white border",
         },
         loading: {
-            true: 'pointer-events-none',
+            true: "pointer-events-none",
             false: null,
         },
     },
@@ -78,17 +83,27 @@ const buttonVariants = cva([
 });
 class HlmButton {
     /** Props as signal-based inputs */
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    iconPosition = input('left', ...(ngDevMode ? [{ debugName: "iconPosition" }] : []));
-    userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    spinnerUserClass = input('', ...(ngDevMode ? [{ debugName: "spinnerUserClass" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    _additionalClasses = signal('', ...(ngDevMode ? [{ debugName: "_additionalClasses" }] : []));
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    appearance = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    icon = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconPosition = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    spinnerUserClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinnerUserClass" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    _additionalClasses = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_additionalClasses" }] : /* istanbul ignore next */ []));
     /** Computed button class merging */
     _computedClass = computed(() => {
         const outlineClasses = this.appearance() === 'outline' || this.appearance() === 'outline-filled'
@@ -103,120 +118,105 @@ class HlmButton {
             appearance: this.appearance(),
             loading: this.loading(),
             className: this.userClass(),
-        }), outlineClasses, this.loading() ? 'pointer-events-none' : '', this._additionalClasses());
-    }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        }), outlineClasses, this.loading() ? "pointer-events-none" : '', this._additionalClasses());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
     /** Computed spinner classes */
     spinnerClass = computed(() => {
         const base = this.appearance() === 'outline' || this.appearance() === 'outline-filled'
             ? this.getOutlineSpinnerClasses(this.variant())
             : this.getSpinnerClasses(this.variant());
         return hlm(base, this.spinnerUserClass());
-    }, ...(ngDevMode ? [{ debugName: "spinnerClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinnerClass" }] : /* istanbul ignore next */ []));
     setClass(classes) {
         this._additionalClasses.set(classes);
     }
     /** Helper functions */
     getOutlineClasses(variant) {
         const colors = {
-            primary: 'border-primary text-primary shadow-sm hover:bg-primary/10',
-            secondary: 'border-secondary text-secondary shadow-sm hover:bg-secondary/10',
-            success: 'border-success text-success shadow-sm hover:bg-success/10',
-            warning: 'border-warning text-warning shadow-sm hover:bg-warning/10',
-            danger: 'border-danger text-danger shadow-sm hover:bg-danger/10',
-            info: 'border-info text-info shadow-sm hover:bg-info/10',
-            light: 'border-light text-light-foreground shadow-sm hover:bg-light/10',
-            dark: 'border-dark text-dark shadow-sm hover:bg-dark/10',
-            accent: 'border-accent text-accent shadow-sm hover:bg-accent/10',
-            destructive: 'border-destructive text-destructive shadow-sm hover:bg-destructive/10',
-            muted: 'border-muted text-muted-foreground shadow-sm hover:bg-muted/10',
-            link: 'text-primary',
-            ghost: 'text-light-foreground',
+            default: "border-primary text-primary shadow-sm hover:bg-primary/10",
+            primary: "border-primary text-primary shadow-sm hover:bg-primary/10",
+            secondary: "border-secondary text-secondary shadow-sm hover:bg-secondary/10",
+            success: "border-success text-success shadow-sm hover:bg-success/10",
+            warning: "border-warning text-warning shadow-sm hover:bg-warning/10",
+            danger: "border-danger text-danger shadow-sm hover:bg-danger/10",
+            info: "border-info text-info shadow-sm hover:bg-info/10",
+            light: "border-light text-light-foreground shadow-sm hover:bg-light/10",
+            dark: "border-dark text-dark shadow-sm hover:bg-dark/10",
+            accent: "border-accent text-accent shadow-sm hover:bg-accent/10",
+            destructive: "border-destructive text-destructive shadow-sm hover:bg-destructive/10",
+            muted: "border-muted text-muted-foreground shadow-sm hover:bg-muted/10",
+            outline: "border-primary text-primary shadow-sm hover:bg-primary/10",
+            link: "text-primary",
+            ghost: "text-light-foreground",
         };
         return colors[variant];
     }
     getOutlineFilledClasses(variant) {
         const colors = {
-            primary: 'hover:bg-primary hover:text-primary-foreground',
-            secondary: 'hover:bg-secondary hover:text-secondary-foreground',
-            success: 'hover:bg-success hover:text-success-foreground',
-            warning: 'hover:bg-warning hover:text-warning-foreground',
-            danger: 'hover:bg-danger hover:text-danger-foreground',
-            info: 'hover:bg-info hover:text-info-foreground',
-            light: 'hover:bg-light hover:text-light-foreground',
-            dark: 'hover:bg-dark hover:text-dark-foreground',
-            accent: 'hover:bg-accent hover:text-accent-foreground',
-            destructive: 'hover:bg-destructive hover:text-destructive-foreground',
-            muted: 'hover:bg-muted hover:text-muted-foreground',
-            link: 'hover:underline',
-            ghost: 'hover:bg-light',
+            default: "hover:bg-primary hover:text-primary-foreground",
+            primary: "hover:bg-primary hover:text-primary-foreground",
+            secondary: "hover:bg-secondary hover:text-secondary-foreground",
+            success: "hover:bg-success hover:text-success-foreground",
+            warning: "hover:bg-warning hover:text-warning-foreground",
+            danger: "hover:bg-danger hover:text-danger-foreground",
+            info: "hover:bg-info hover:text-info-foreground",
+            light: "hover:bg-light hover:text-light-foreground",
+            dark: "hover:bg-dark hover:text-dark-foreground",
+            accent: "hover:bg-accent hover:text-accent-foreground",
+            destructive: "hover:bg-destructive hover:text-destructive-foreground",
+            muted: "hover:bg-muted hover:text-muted-foreground",
+            outline: "hover:bg-primary hover:text-primary-foreground",
+            link: "hover:underline",
+            ghost: "hover:bg-light",
         };
         return colors[variant];
     }
     getSpinnerClasses(variant) {
         const colors = {
-            primary: '[&>svg]:text-primary-foreground',
-            secondary: '[&>svg]:text-secondary-foreground',
-            success: '[&>svg]:text-success-foreground',
-            warning: '[&>svg]:text-warning-foreground',
-            danger: '[&>svg]:text-danger-foreground',
-            info: '[&>svg]:text-info-foreground',
-            light: '[&>svg]:text-light-foreground',
-            dark: '[&>svg]:text-dark-foreground',
-            accent: '[&>svg]:text-accent-foreground',
-            destructive: '[&>svg]:text-destructive-foreground',
-            muted: '[&>svg]:text-muted-foreground',
-            link: '[&>svg]:text-primary',
-            ghost: '[&>svg]:text-light-foreground',
+            default: "[&>svg]:text-primary-foreground",
+            primary: "[&>svg]:text-primary-foreground",
+            secondary: "[&>svg]:text-secondary-foreground",
+            success: "[&>svg]:text-success-foreground",
+            warning: "[&>svg]:text-warning-foreground",
+            danger: "[&>svg]:text-danger-foreground",
+            info: "[&>svg]:text-info-foreground",
+            light: "[&>svg]:text-light-foreground",
+            dark: "[&>svg]:text-dark-foreground",
+            accent: "[&>svg]:text-accent-foreground",
+            destructive: "[&>svg]:text-destructive-foreground",
+            muted: "[&>svg]:text-muted-foreground",
+            outline: "[&>svg]:text-primary",
+            link: "[&>svg]:text-primary",
+            ghost: "[&>svg]:text-light-foreground",
         };
         return colors[variant];
     }
     getOutlineSpinnerClasses(variant) {
         const colors = {
-            primary: '[&>svg]:text-primary',
-            secondary: '[&>svg]:text-secondary',
-            success: '[&>svg]:text-success',
-            warning: '[&>svg]:text-warning',
-            danger: '[&>svg]:text-danger',
-            info: '[&>svg]:text-info',
-            light: '[&>svg]:text-light',
-            dark: '[&>svg]:text-dark',
-            accent: '[&>svg]:text-accent',
-            destructive: '[&>svg]:text-destructive',
-            muted: '[&>svg]:text-muted-foreground',
-            link: '[&>svg]:text-primary',
-            ghost: '[&>svg]:text-light-foreground',
+            default: "[&>svg]:text-primary",
+            primary: "[&>svg]:text-primary",
+            secondary: "[&>svg]:text-secondary",
+            success: "[&>svg]:text-success",
+            warning: "[&>svg]:text-warning",
+            danger: "[&>svg]:text-danger",
+            info: "[&>svg]:text-info",
+            light: "[&>svg]:text-light",
+            dark: "[&>svg]:text-dark",
+            accent: "[&>svg]:text-accent",
+            destructive: "[&>svg]:text-destructive",
+            muted: "[&>svg]:text-muted-foreground",
+            outline: "[&>svg]:text-primary",
+            link: "[&>svg]:text-primary",
+            ghost: "[&>svg]:text-light-foreground",
         };
         return colors[variant];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HlmButton, isStandalone: true, selector: "button[hlmButton], a[hlmButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerUserClass: { classPropertyName: "spinnerUserClass", publicName: "spinnerUserClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.aria-busy": "loading() || null", "attr.disabled": "(loading() || disabled()) ? true : null", "attr.type": "type()" } }, hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0, template: `
-    <ng-template #projected>
-      <ng-content></ng-content>
-    </ng-template>
-
-    @if (loading()) {
-      <div class="relative inline-flex items-center">
-        <span class="invisible">
-          <ng-container *ngTemplateOutlet="projected" />
-        </span>
-        <span class="absolute inset-0 flex items-center justify-center">
-          <hlm-spinner [spinnerClass]="spinnerClass()" />
-        </span>
-      </div>
-    } @else {
-      <div class="flex items-center gap-1">
-        @if (icon() && iconPosition() === 'left') {
-          <ng-container *ngTemplateOutlet="icon()" />
-        }
-        <ng-container *ngTemplateOutlet="projected" />
-        @if (icon() && iconPosition() === 'right') {
-          <ng-container *ngTemplateOutlet="icon()" />
-        }
-      </div>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["size", "show", "class", "spinnerClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmButton, isStandalone: true, selector: "button[hlmButton], a[hlmButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerUserClass: { classPropertyName: "spinnerUserClass", publicName: "spinnerUserClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.aria-busy": "loading() || null", "attr.disabled": "(loading() || disabled()) ? true : null", "attr.type": "type()" } }, hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "\n    <ng-template #projected>\n      <ng-content></ng-content>\n    </ng-template>\n\n    @if (loading()) {\n      <div class=\"relative inline-flex items-center\">\n        <span class=\"invisible\">\n          <ng-container *ngTemplateOutlet=\"projected\" />\n        </span>\n        <span class=\"absolute inset-0 flex items-center justify-center\">\n          <hlm-spinner [spinnerClass]=\"spinnerClass()\" />\n        </span>\n      </div>\n    } @else {\n      <div class=\"flex items-center gap-1\">\n        @if (icon() && iconPosition() === 'left') {\n          <ng-container *ngTemplateOutlet=\"icon()\" />\n        }\n        <ng-container *ngTemplateOutlet=\"projected\" />\n        @if (icon() && iconPosition() === 'right') {\n          <ng-container *ngTemplateOutlet=\"icon()\" />\n        }\n      </div>\n    }\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["size", "show", "class", "spinnerClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[hlmButton], a[hlmButton]',
@@ -229,45 +229,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.disabled]': '(loading() || disabled()) ? true : null',
                         '[attr.type]': 'type()',
                     },
-                    template: `
-    <ng-template #projected>
-      <ng-content></ng-content>
-    </ng-template>
+                    template: "\n    <ng-template #projected>\n      <ng-content></ng-content>\n    </ng-template>\n\n    @if (loading()) {\n      <div class=\"relative inline-flex items-center\">\n        <span class=\"invisible\">\n          <ng-container *ngTemplateOutlet=\"projected\" />\n        </span>\n        <span class=\"absolute inset-0 flex items-center justify-center\">\n          <hlm-spinner [spinnerClass]=\"spinnerClass()\" />\n        </span>\n      </div>\n    } @else {\n      <div class=\"flex items-center gap-1\">\n        @if (icon() && iconPosition() === 'left') {\n          <ng-container *ngTemplateOutlet=\"icon()\" />\n        }\n        <ng-container *ngTemplateOutlet=\"projected\" />\n        @if (icon() && iconPosition() === 'right') {\n          <ng-container *ngTemplateOutlet=\"icon()\" />\n        }\n      </div>\n    }\n  ",
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], spinnerUserClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerUserClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
-    @if (loading()) {
-      <div class="relative inline-flex items-center">
-        <span class="invisible">
-          <ng-container *ngTemplateOutlet="projected" />
-        </span>
-        <span class="absolute inset-0 flex items-center justify-center">
-          <hlm-spinner [spinnerClass]="spinnerClass()" />
-        </span>
-      </div>
-    } @else {
-      <div class="flex items-center gap-1">
-        @if (icon() && iconPosition() === 'left') {
-          <ng-container *ngTemplateOutlet="icon()" />
-        }
-        <ng-container *ngTemplateOutlet="projected" />
-        @if (icon() && iconPosition() === 'right') {
-          <ng-container *ngTemplateOutlet="icon()" />
-        }
-      </div>
+const defaultConfig = {
+    variant: 'default',
+    size: 'default',
+};
+const BrnButtonConfigToken = new InjectionToken('BrnButtonConfig');
+function provideBrnButtonConfig(config) {
+    return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+function injectBrnButtonConfig() {
+    return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}
+
+class HlmBtn {
+    _config = injectBrnButtonConfig();
+    _additionalClasses = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_additionalClasses" }] : /* istanbul ignore next */ []));
+    variant = input(this._config.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input(this._config.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    _computedClass = computed(() => hlm(buttonVariants({
+        variant: this.variant(),
+        size: this.size(),
+    }), this.userClass(), this._additionalClasses()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    setClass(classes) {
+        this._additionalClasses.set(classes);
     }
-  `,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmBtn, isStandalone: true, selector: "button[hlmBtn], a[hlmBtn]", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button" }, properties: { "class": "_computedClass()", "attr.type": "type()" } }, exportAs: ["hlmBtn"], hostDirectives: [{ directive: i1.BrnButton, inputs: ["disabled", "disabled"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmBtn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[hlmBtn], a[hlmBtn]',
+                    exportAs: 'hlmBtn',
+                    standalone: true,
+                    hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.type]': 'type()',
+                        'data-slot': 'button',
+                    },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], spinnerUserClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerUserClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+        }], 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 }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 /*
  * Public API Surface of button
  */
-const HlmButtonImports = [HlmButton];
+const HlmButtonImports = [HlmButton, HlmBtn];
 class HlmButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: HlmButtonModule, imports: [HlmButton], exports: [HlmButton] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmButtonModule, imports: [HlmButtonImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, imports: [HlmButton, HlmBtn], exports: [HlmButton, HlmBtn] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, imports: [HlmButton] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HlmButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmButtonImports],
@@ -279,5 +303,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { HlmButton, HlmButtonImports, HlmButtonModule, buttonVariants };
-//# sourceMappingURL=button.mjs.map
+export { HlmBtn, HlmButton, HlmButtonImports, HlmButtonModule, buttonVariants, injectBrnButtonConfig, provideBrnButtonConfig };
+

package/button/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "button",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.2.0 || ^22.0.0",
+    "@angular/core": "^20.2.0 || ^22.0.0",
+    "@spartan-ng/brain": "^0.0.1-alpha.512"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/button.mjs",
+  "typings": "types/button.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/button.d.ts",
+      "default": "./fesm2022/button.mjs"
+    }
+  },
+  "type": "module"
+}

package/button/{index.d.ts → types/button.d.ts}

@@ -1,13 +1,27 @@
 import * as _angular_core from '@angular/core';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import { TemplateRef, ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
 import * as i1 from '@spartan-ng/brain/button';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare class HlmBtn {
+    private readonly _config;
+    private readonly _additionalClasses;
+    readonly variant: _angular_core.InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "accent" | "destructive" | "muted" | "outline" | "link" | "ghost" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "compact-xs" | "compact-sm" | "compact-default" | "compact-lg" | "compact-icon" | null | undefined>;
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    protected readonly _computedClass: _angular_core.Signal<string>;
+    setClass(classes: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmBtn, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmBtn, "button[hlmBtn], a[hlmBtn]", ["hlmBtn"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnButton; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+}
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "accent" | "destructive" | "muted" | "link" | "ghost" | null | undefined;
-    size?: "xs" | "sm" | "default" | "lg" | "icon" | "compact-xs" | "compact-sm" | "compact-default" | "compact-lg" | "compact-icon" | null | undefined;
-    appearance?: "solid" | "outline" | "outline-filled" | null | undefined;
+    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "accent" | "destructive" | "muted" | "outline" | "link" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "compact-xs" | "compact-sm" | "compact-default" | "compact-lg" | "compact-icon" | null | undefined;
+    appearance?: "outline" | "solid" | "outline-filled" | null | undefined;
     loading?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -20,7 +34,7 @@ declare class HlmButton {
     readonly size: _angular_core.InputSignal<SizeType>;
     readonly appearance: _angular_core.InputSignal<AppearanceType>;
     readonly loading: _angular_core.InputSignal<boolean>;
-    readonly icon: _angular_core.InputSignal<any>;
+    readonly icon: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     readonly iconPosition: _angular_core.InputSignal<"left" | "right">;
     readonly userClass: _angular_core.InputSignal<ClassValue>;
     readonly spinnerUserClass: _angular_core.InputSignal<ClassValue>;
@@ -41,12 +55,19 @@ declare class HlmButton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmButton, "button[hlmButton], a[hlmButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "spinnerUserClass": { "alias": "spinnerUserClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.BrnButton; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
-declare const HlmButtonImports: readonly [typeof HlmButton];
+interface BrnButtonConfig {
+    variant: ButtonVariants['variant'];
+    size: ButtonVariants['size'];
+}
+declare function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider;
+declare function injectBrnButtonConfig(): BrnButtonConfig;
+
+declare const HlmButtonImports: readonly [typeof HlmButton, typeof HlmBtn];
 declare class HlmButtonModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmButtonModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<HlmButtonModule, never, [typeof HlmButton], [typeof HlmButton]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<HlmButtonModule, never, [typeof HlmButton, typeof HlmBtn], [typeof HlmButton, typeof HlmBtn]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<HlmButtonModule>;
 }
 
-export { HlmButton, HlmButtonImports, HlmButtonModule, buttonVariants };
-export type { AppearanceType, ButtonVariants, SizeType, VariantType };
+export { HlmBtn, HlmButton, HlmButtonImports, HlmButtonModule, buttonVariants, injectBrnButtonConfig, provideBrnButtonConfig };
+export type { AppearanceType, BrnButtonConfig, ButtonVariants, SizeType, VariantType };

package/button-group/README.md

@@ -0,0 +1,11 @@
+# ButtonGroup
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build button-group
+```