@egose/shadcn-theme-ng 0.0.13 → 0.0.14

package/dialog/fesm2022/dialog.mjs

@@ -9,7 +9,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
 import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
 
-const hlmDialogOverlayClass = 'tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:bg-black/50';
+const hlmDialogOverlayClass = 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50';
 class HlmDialogOverlay {
     _classSettable = injectCustomClassSettable({ optional: true, host: true });
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
@@ -71,7 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmDialogClose {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:rounded-xs tw:absolute tw:right-4 tw:top-4 tw:flex tw:items-center tw:justify-center tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:outline-none tw:focus:ring-2 tw:focus:ring-offset-2 tw:disabled:pointer-events-none tw:[&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs absolute right-4 top-4 flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmDialogClose, isStandalone: true, selector: "[hlmDialogClose],[brnDialogClose][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -92,7 +92,7 @@ class HlmDialogContent {
     component = this._dialogContext?.$component;
     _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:relative tw:z-50 tw:mx-auto tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:data-[state=closed]:duration-200 tw:data-[state=open]:duration-200 tw:sm:mx-0 tw:sm:max-w-lg', this.userClass(), this._dynamicComponentClass), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg', this.userClass(), this._dynamicComponentClass), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmDialogContent, isStandalone: true, selector: "hlm-dialog-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-state": "state()" } }, providers: [provideIcons({ lucideX })], ngImport: i0, template: `
     @if (component) {
@@ -102,7 +102,7 @@ class HlmDialogContent {
     }
 
     <button brnDialogClose hlm>
-      <span class="tw:sr-only">Close</span>
+      <span class="sr-only">Close</span>
       <ng-icon hlm size="sm" name="lucideX" />
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: BrnDialogClose, selector: "button[brnDialogClose]", inputs: ["delay"] }, { kind: "directive", type: HlmDialogClose, selector: "[hlmDialogClose],[brnDialogClose][hlm]", inputs: ["class"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -125,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
     }
 
     <button brnDialogClose hlm>
-      <span class="tw:sr-only">Close</span>
+      <span class="sr-only">Close</span>
       <ng-icon hlm size="sm" name="lucideX" />
     </button>
   `,
@@ -136,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmDialogDescription {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmDialogDescription, isStandalone: true, selector: "[hlmDialogDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnDialogDescription }], ngImport: i0 });
 }
@@ -153,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmDialogFooter {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:flex-col-reverse tw:gap-2 tw:sm:flex-row tw:sm:justify-end', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmDialogFooter, isStandalone: true, selector: "hlm-dialog-footer", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -171,7 +171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmDialogHeader {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex flex-col gap-2 text-center sm:text-left', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmDialogHeader, isStandalone: true, selector: "hlm-dialog-header", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -189,7 +189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmDialogTitle {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-lg tw:font-semibold tw:leading-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-lg font-semibold leading-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmDialogTitle, isStandalone: true, selector: "[hlmDialogTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnDialogTitle }], ngImport: i0 });
 }

package/form-date-picker/fesm2022/form-date-picker.mjs

@@ -31,13 +31,13 @@ class EgFormDatePicker {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed classes
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $pickerClass = computed(() => hlm('tw:mb-1', this.pickerClass()), ...(ngDevMode ? [{ debugName: "$pickerClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $pickerClass = computed(() => hlm('mb-1', this.pickerClass()), ...(ngDevMode ? [{ debugName: "$pickerClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormDatePicker, isStandalone: true, selector: "eg-form-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormDatePicker, isStandalone: true, selector: "eg-form-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, autoCloseOnSelect: { classPropertyName: "autoCloseOnSelect", publicName: "autoCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pickerClass: { classPropertyName: "pickerClass", publicName: "pickerClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let nm = controlName();
     @let err = error();
@@ -48,7 +48,7 @@ class EgFormDatePicker {
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }
@@ -85,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-date-picker',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmDatePicker],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -101,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }

package/form-field/fesm2022/form-field.mjs

@@ -6,7 +6,7 @@ import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 
 class HlmError {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-destructive tw:block tw:text-sm tw:font-medium', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-destructive block text-sm font-medium', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmError, isStandalone: true, selector: "hlm-error", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -22,7 +22,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmFormField {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:block tw:space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('block space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     control = contentChild(BrnFormFieldControl, ...(ngDevMode ? [{ debugName: "control" }] : []));
     errorChildren = contentChildren(HlmError, ...(ngDevMode ? [{ debugName: "errorChildren" }] : []));
     _hasDisplayedMessage = computed(() => this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint', ...(ngDevMode ? [{ debugName: "_hasDisplayedMessage" }] : []));
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmHint {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:block tw:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-muted-foreground block text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmHint, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmHint, isStandalone: true, selector: "hlm-hint", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }

package/form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs

@@ -26,13 +26,13 @@ class EgFormSearchableMultiselect {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed class names
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $controlClass = computed(() => hlm('tw:w-full', this.controlClass()), ...(ngDevMode ? [{ debugName: "$controlClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1 gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $controlClass = computed(() => hlm('w-full', this.controlClass()), ...(ngDevMode ? [{ debugName: "$controlClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormSearchableMultiselect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormSearchableMultiselect, isStandalone: true, selector: "eg-form-searchable-multiselect", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormSearchableMultiselect, isStandalone: true, selector: "eg-form-searchable-multiselect", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, controlClass: { classPropertyName: "controlClass", publicName: "controlClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label(); @let nm = controlName(); @let err = error(); @let hnt = hint(); @let rqrd = required();
 
     <hlm-form-field>
@@ -40,7 +40,7 @@ class EgFormSearchableMultiselect {
       <span hlmLabel [class]="$labelClass()">
         {{ lbl }}
         @if (rqrd) {
-        <span class="tw:text-red-500">*</span>
+        <span class="text-red-500">*</span>
         }
       </span>
       }
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-searchable-multiselect',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, EgSearchableMultiselect],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -84,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       <span hlmLabel [class]="$labelClass()">
         {{ lbl }}
         @if (rqrd) {
-        <span class="tw:text-red-500">*</span>
+        <span class="text-red-500">*</span>
         }
       </span>
       }

package/form-select/fesm2022/form-select.mjs

@@ -30,13 +30,13 @@ class EgFormSelect {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed classes
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $selectClass = computed(() => hlm('tw:w-full', this.selectClass()), ...(ngDevMode ? [{ debugName: "$selectClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1 gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $selectClass = computed(() => hlm('w-full', this.selectClass()), ...(ngDevMode ? [{ debugName: "$selectClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormSelect, isStandalone: true, selector: "eg-form-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormSelect, isStandalone: true, selector: "eg-form-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let nm = controlName();
     @let err = error();
@@ -47,7 +47,7 @@ class EgFormSelect {
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }
@@ -94,7 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-select',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, BrnSelectImports, HlmSelectImports],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -110,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }

package/form-text-input/fesm2022/form-text-input.mjs

@@ -66,13 +66,13 @@ class EgFormTextInput {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed class bindings
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $inputClass = computed(() => hlm('tw:mb-1', this.inputClass()), ...(ngDevMode ? [{ debugName: "$inputClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1 gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $inputClass = computed(() => hlm('mb-1', this.inputClass()), ...(ngDevMode ? [{ debugName: "$inputClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormTextInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextInput, isStandalone: true, selector: "eg-form-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextInput, isStandalone: true, selector: "eg-form-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let nm = controlName();
     @let err = error();
@@ -83,7 +83,7 @@ class EgFormTextInput {
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }
@@ -128,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-text-input',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmInput],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -144,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }

package/form-textarea/fesm2022/form-textarea.mjs

@@ -33,13 +33,13 @@ class EgFormTextarea {
     errorClass = input('', ...(ngDevMode ? [{ debugName: "errorClass" }] : []));
     hintClass = input('', ...(ngDevMode ? [{ debugName: "hintClass" }] : []));
     // Computed class bindings
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
-    $textareaClass = computed(() => hlm('tw:mb-1', this.textareaClass()), ...(ngDevMode ? [{ debugName: "$textareaClass" }] : []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
+    $userClass = computed(() => hlm('flex flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "$userClass" }] : []));
+    $labelClass = computed(() => hlm('mb-1 gap-0', this.labelClass()), ...(ngDevMode ? [{ debugName: "$labelClass" }] : []));
+    $textareaClass = computed(() => hlm('mb-1', this.textareaClass()), ...(ngDevMode ? [{ debugName: "$textareaClass" }] : []));
+    $errorClass = computed(() => hlm('mt-0', this.errorClass()), ...(ngDevMode ? [{ debugName: "$errorClass" }] : []));
+    $hintClass = computed(() => hlm('mt-0', this.hintClass()), ...(ngDevMode ? [{ debugName: "$hintClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EgFormTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EgFormTextarea, isStandalone: true, selector: "eg-form-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, textareaClass: { classPropertyName: "textareaClass", publicName: "textareaClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let nm = controlName();
     @let err = error();
@@ -50,7 +50,7 @@ class EgFormTextarea {
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     selector: 'eg-form-textarea',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        class: 'w-full',
                     },
                     imports: [ReactiveFormsModule, HlmFormField, HlmError, HlmHint, HlmLabel, HlmInput],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
@@ -107,7 +107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (lbl) {
         <span hlmLabel [class]="$labelClass()">{{ lbl }}
         @if (rqrd) {
-          <span class="tw:text-red-500">*</span>
+          <span class="text-red-500">*</span>
         }
         </span>
       }

package/input/fesm2022/input.mjs

@@ -6,11 +6,11 @@ import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 import { cva } from 'class-variance-authority';
 
-const inputVariants = cva('tw:file:text-foreground tw:placeholder:text-muted-foreground tw:selection:bg-primary tw:selection:text-primary-foreground tw:dark:bg-input/10 tw:border-input tw:shadow-xs tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:h-9 tw:w-full tw:min-w-0 tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-1 tw:text-base tw:outline-none tw:transition-[color,box-shadow] tw:file:inline-flex tw:file:h-7 tw:file:border-0 tw:file:bg-transparent tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 md:text-sm', {
+const inputVariants = cva('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', {
     variants: {
         error: {
-            auto: 'tw:[&.ng-invalid.ng-touched]:text-destructive/20 tw:dark:[&.ng-invalid.ng-touched]:text-destructive/40 tw:[&.ng-invalid.ng-touched]:border-destructive tw:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
-            true: 'tw:text-destructive/90 dark:text-destructive/60 tw:border-destructive tw:focus-visible:ring-destructive',
+            auto: '[&.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
+            true: 'text-destructive/90 dark:text-destructive/60 border-destructive focus-visible:ring-destructive',
         },
     },
     defaultVariants: {

package/label/fesm2022/label.mjs

@@ -6,7 +6,7 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmLabel {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:select-none tw:items-center tw:gap-2 tw:text-sm tw:font-medium tw:leading-none tw:peer-disabled:cursor-not-allowed tw:peer-disabled:opacity-50 tw:has-[[disabled]]:cursor-not-allowed tw:has-[[disabled]]:opacity-50 tw:group-data-[disabled=true]:pointer-events-none tw:group-data-[disabled=true]:opacity-50 tw:peer-data-[disabled]:cursor-not-allowed tw:peer-data-[disabled]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmLabel, isStandalone: true, selector: "[hlmLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnLabel, inputs: ["id", "id"] }], ngImport: i0 });
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Angular shadcn UI theme",
   "license": "MIT",
   "sideEffects": false,

package/popover/fesm2022/popover.mjs

@@ -5,7 +5,7 @@ import { injectExposesStateProvider } from '@spartan-ng/brain/core';
 
 class HlmPopoverClose {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:right-4 tw:top-4 tw:rounded-sm tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:outline-none tw:focus:ring-2 tw:focus:ring-offset-2 tw:disabled:pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmPopoverClose, isStandalone: true, selector: "[hlmPopoverClose],[brnPopoverClose][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -30,7 +30,7 @@ class HlmPopoverContent {
         });
     }
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:border-border tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:relative tw:w-72 tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:outline-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative w-72 rounded-md border p-4 shadow-md outline-none', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmPopoverContent, isStandalone: true, selector: "[hlmPopoverContent],[brnPopoverContent][hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }

package/radio-group/fesm2022/radio-group.mjs

@@ -11,7 +11,7 @@ class HlmRadio {
     _elementRef = inject(ElementRef);
     _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:group tw:flex tw:items-center tw:gap-x-3', this.userClass(), this._state().disabled() ? 'tw:cursor-not-allowed tw:opacity-50' : ''), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('group flex items-center gap-x-3', this.userClass(), this._state().disabled() ? 'cursor-not-allowed opacity-50' : ''), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     /** Used to set the id on the underlying brn element. */
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
     /** Used to set the aria-label attribute on the underlying brn element. */
@@ -104,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmRadioGroup {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:grid tw:gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('grid gap-3', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioGroup, isStandalone: true, selector: "hlm-radio-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnRadioGroup, inputs: ["name", "name", "value", "value", "disabled", "disabled", "required", "required", "direction", "direction"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -129,9 +129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmRadioIndicator {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:border-input tw:text-primary tw:group-has-[:focus-visible]:border-ring tw:group-has-[:focus-visible]:ring-ring/50 tw:dark:bg-input/10 tw:shadow-xs tw:group-data=[disabled=true]:cursor-not-allowed tw:group-data=[disabled=true]:opacity-50 tw:relative tw:flex tw:aspect-square tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:border tw:outline-none tw:transition-[color,box-shadow] tw:group-has-[:focus-visible]:ring-[3px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/10 shadow-xs group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border outline-none transition-[color,box-shadow] group-has-[:focus-visible]:ring-[3px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmRadioIndicator, isStandalone: true, selector: "hlm-radio-indicator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmRadioIndicator, decorators: [{
             type: Component,
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     host: {
                         '[class]': '_computedClass()',
                     },
-                    template: ` <div class="tw:group-data-[checked=true]:bg-primary tw:size-2 tw:rounded-full tw:bg-transparent"></div> `,
+                    template: ` <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });