@egose/shadcn-theme-ng 0.0.13 → 0.0.15

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.15",
   "description": "Angular shadcn UI theme",
   "license": "MIT",
   "sideEffects": false,
@@ -63,6 +63,14 @@
       "types": "./form-field/index.d.ts",
       "default": "./form-field/fesm2022/form-field.mjs"
     },
+    "./form-field-simple": {
+      "types": "./form-field-simple/index.d.ts",
+      "default": "./form-field-simple/fesm2022/form-field-simple.mjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "default": "./checkbox/fesm2022/checkbox.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "default": "./popover/fesm2022/popover.mjs"
@@ -134,6 +142,10 @@
     "./form-searchable-multiselect": {
       "types": "./form-searchable-multiselect/index.d.ts",
       "default": "./form-searchable-multiselect/fesm2022/form-searchable-multiselect.mjs"
+    },
+    "./form-checkbox": {
+      "types": "./form-checkbox/index.d.ts",
+      "default": "./form-checkbox/fesm2022/form-checkbox.mjs"
     }
   }
 }

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,
                 }]
         }] });

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

@@ -100,32 +100,32 @@ class EgSearchableMultiselect {
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: HlmAutocomplete, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
+    <div class="flex flex-col gap-2 w-full">
       <!-- Selected items -->
       <div
-        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
-               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
-               tw:[&::-webkit-scrollbar]:hidden"
+        class="flex gap-2 overflow-x-auto whitespace-nowrap
+               [scrollbar-width:none] [-ms-overflow-style:none]
+               [&::-webkit-scrollbar]:hidden"
       >
         @if (selectedItems().length === 0) {
           <span
-            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
-                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+            class="bg-gray-100 text-gray-400 rounded-full
+                   px-2 py-1 inline-flex items-center text-xs"
           >
             {{ placeholder() }}
           </span>
         } @else {
           @for (item of selectedItems(); track item.value) {
             <span
-              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
-                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+              class="bg-gray-200 rounded-full px-2 py-1
+                     inline-flex items-center gap-2 text-xs"
             >
               {{ item.label }}
               <button
                 type="button"
                 (click)="removeItem(item.value)"
-                class="tw:bg-transparent tw:border-0 tw:text-gray-600
-                       tw:hover:text-red-500 tw:cursor-pointer"
+                class="bg-transparent border-0 text-gray-600
+                       hover:text-red-500 cursor-pointer"
               >
                 ✕
               </button>
@@ -161,32 +161,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         },
                     ],
                     template: `
-    <div class="tw:flex tw:flex-col tw:gap-2 tw:w-full">
+    <div class="flex flex-col gap-2 w-full">
       <!-- Selected items -->
       <div
-        class="tw:flex tw:gap-2 tw:overflow-x-auto tw:whitespace-nowrap
-               tw:[scrollbar-width:none] tw:[-ms-overflow-style:none]
-               tw:[&::-webkit-scrollbar]:hidden"
+        class="flex gap-2 overflow-x-auto whitespace-nowrap
+               [scrollbar-width:none] [-ms-overflow-style:none]
+               [&::-webkit-scrollbar]:hidden"
       >
         @if (selectedItems().length === 0) {
           <span
-            class="tw:bg-gray-100 tw:text-gray-400 tw:rounded-full
-                   tw:px-2 tw:py-1 tw:inline-flex tw:items-center tw:text-xs"
+            class="bg-gray-100 text-gray-400 rounded-full
+                   px-2 py-1 inline-flex items-center text-xs"
           >
             {{ placeholder() }}
           </span>
         } @else {
           @for (item of selectedItems(); track item.value) {
             <span
-              class="tw:bg-gray-200 tw:rounded-full tw:px-2 tw:py-1
-                     tw:inline-flex tw:items-center tw:gap-2 tw:text-xs"
+              class="bg-gray-200 rounded-full px-2 py-1
+                     inline-flex items-center gap-2 text-xs"
             >
               {{ item.label }}
               <button
                 type="button"
                 (click)="removeItem(item.value)"
-                class="tw:bg-transparent tw:border-0 tw:text-gray-600
-                       tw:hover:text-red-500 tw:cursor-pointer"
+                class="bg-transparent border-0 text-gray-600
+                       hover:text-red-500 cursor-pointer"
               >
                 ✕
               </button>

package/select/fesm2022/select.mjs

@@ -11,7 +11,7 @@ import { cva } from 'class-variance-authority';
 
 class HlmSelect {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('space-y-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelect, isStandalone: true, selector: "hlm-select, brn-select [hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -32,7 +32,7 @@ class HlmSelectContent {
         }]));
     _stateProvider = injectExposesStateProvider({ optional: true });
     _sideProvider = injectExposedSideProvider({ optional: true });
-    _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:z-50 tw:w-full tw:min-w-[8rem] tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-md tw:data-[side=bottom]:top-[2px] tw:data-[side=top]:bottom-[2px]', 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 z-50 w-full min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:top-[2px] data-[side=top]:bottom-[2px]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectContent, isStandalone: true, selector: "[hlmSelectContent], hlm-select-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, stickyLabels: { classPropertyName: "stickyLabels", publicName: "stickyLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-state": "_stateProvider?.state() ?? \"open\"", "attr.data-side": "_sideProvider?.side() ?? \"bottom\"" } }, ngImport: i0 });
 }
@@ -69,7 +69,7 @@ class HlmSelectLabel {
     _selectContent = inject(HlmSelectContent);
     _stickyLabels = computed(() => this._selectContent.stickyLabels(), ...(ngDevMode ? [{ debugName: "_stickyLabels" }] : []));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:px-2 tw:py-1.5 tw:text-xs', this._stickyLabels() ? 'tw:bg-popover tw:sticky tw:top-0 tw:z-[2] tw:block' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-muted-foreground px-2 py-1.5 text-xs', this._stickyLabels() ? 'bg-popover sticky top-0 z-[2] block' : '', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectLabel, isStandalone: true, selector: "[hlmSelectLabel], hlm-select-label", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSelectLabel }], ngImport: i0 });
 }
@@ -87,10 +87,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class HlmSelectOption {
     _brnSelectOption = inject(BrnSelectOption, { host: true });
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[active]:bg-accent tw:data-[active]:text-accent-foreground tw:[&>ng-icon]:text-muted-foreground tw:*:[span]:last:flex tw:*:[span]:last:items-center tw:*:[span]:last:gap-2 tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pl-2 tw:pr-8 tw:text-sm tw:outline-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:size-4 tw:[&>ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('data-[active]:bg-accent data-[active]:text-accent-foreground [&>ng-icon]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HlmSelectOption, isStandalone: true, selector: "hlm-option", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCheck })], hostDirectives: [{ directive: i1.BrnSelectOption, inputs: ["disabled", "disabled", "value", "value"] }], ngImport: i0, template: `
-    <span class="tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center">
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
       @if (this._brnSelectOption.selected()) {
         <ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
       }
@@ -110,7 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                         '[class]': '_computedClass()',
                     },
                     template: `
-    <span class="tw:absolute tw:right-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center">
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
       @if (this._brnSelectOption.selected()) {
         <ng-icon hlm size="sm" aria-hidden="true" name="lucideCheck" />
       }
@@ -124,9 +124,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmSelectScrollDown {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex cursor-default items-center justify-center py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `, isInline: true, dependencies: [{ 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollDown, isStandalone: true, selector: "hlm-select-scroll-down", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" /> `, isInline: true, dependencies: [{ 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollDown, decorators: [{
             type: Component,
@@ -137,16 +137,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     host: {
                         '[class]': '_computedClass()',
                     },
-                    template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronDown" /> `,
+                    template: ` <ng-icon hlm size="sm" class="ml-2" name="lucideChevronDown" /> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
 class HlmSelectScrollUp {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:cursor-default tw:items-center tw:justify-center tw:py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex cursor-default items-center justify-center py-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronUp })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `, isInline: true, dependencies: [{ 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectScrollUp, isStandalone: true, selector: "hlm-select-scroll-up", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronUp })], ngImport: i0, template: ` <ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" /> `, isInline: true, dependencies: [{ 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectScrollUp, decorators: [{
             type: Component,
@@ -157,16 +157,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     host: {
                         '[class]': '_computedClass()',
                     },
-                    template: ` <ng-icon hlm size="sm" class="tw:ml-2" name="lucideChevronUp" /> `,
+                    template: ` <ng-icon hlm size="sm" class="ml-2" name="lucideChevronUp" /> `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-const selectTriggerVariants = cva(`tw:border-input tw:[&>ng-icon]:text-muted-foreground tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:bg-input/10 tw:dark:hover:bg-input/50 tw:shadow-xs tw:flex tw:w-fit tw:items-center tw:justify-between tw:gap-2 tw:whitespace-nowrap tw:rounded-md tw:border tw:bg-transparent tw:px-3 tw:py-2 tw:text-sm tw:outline-none tw:transition-[color,box-shadow] tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:data-[size=default]:h-9 tw:data-[size=sm]:h-8 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:size-4 tw:[&>ng-icon]:shrink-0`, {
+const selectTriggerVariants = cva(`border-input [&>ng-icon]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/10 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 [&>ng-icon]:pointer-events-none [&>ng-icon]:size-4 [&>ng-icon]:shrink-0`, {
     variants: {
         error: {
-            auto: 'tw:[&.ng-invalid.ng-touched]:text-destructive tw:[&.ng-invalid.ng-touched]:border-destructive tw:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 tw:dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
-            true: 'tw:text-destructive tw:border-destructive tw:focus-visible:ring-destructive/20 tw:dark:focus-visible:ring-destructive/40',
+            auto: '[&.ng-invalid.ng-touched]:text-destructive [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:focus-visible:ring-destructive/40',
+            true: 'text-destructive border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         },
     },
     defaultVariants: {
@@ -186,7 +186,7 @@ class HlmSelectTrigger {
       @if (_icon()) {
         <ng-content select="ng-icon" />
       } @else {
-        <ng-icon hlm size="sm" class="tw:ml-2 tw:flex-none" name="lucideChevronDown" />
+        <ng-icon hlm size="sm" class="ml-2 flex-none" name="lucideChevronDown" />
       }
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: BrnSelectTrigger, selector: "[brnSelectTrigger]" }, { 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 });
@@ -203,7 +203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       @if (_icon()) {
         <ng-content select="ng-icon" />
       } @else {
-        <ng-icon hlm size="sm" class="tw:ml-2 tw:flex-none" name="lucideChevronDown" />
+        <ng-icon hlm size="sm" class="ml-2 flex-none" name="lucideChevronDown" />
       }
     </button>
   `,
@@ -213,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmSelectValue {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[placeholder]:text-muted-foreground tw:line-clamp-1 tw:flex tw:items-center tw:gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('data-[placeholder]:text-muted-foreground line-clamp-1 flex items-center gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSelectValue, isStandalone: true, selector: "hlm-select-value,[hlmSelectValue], brn-select-value[hlm]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }

package/separator/fesm2022/separator.mjs

@@ -6,7 +6,7 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmSeparator {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:bg-border tw:inline-flex tw:shrink-0 tw:data-[orientation=horizontal]:h-px tw:data-[orientation=vertical]:h-full tw:data-[orientation=horizontal]:w-full tw:data-[orientation=vertical]:w-px', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('bg-border inline-flex shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSeparator, isStandalone: true, selector: "[hlmSeparator],hlm-separator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnSeparator, inputs: ["orientation", "orientation", "decorative", "decorative"] }], ngImport: i0 });
 }

package/sonner/fesm2022/sonner.mjs

@@ -27,10 +27,10 @@ class HlmToaster {
         }]));
     toastOptions = input({
         classes: {
-            toast: 'tw:group tw:toast tw:group-[.toaster]:bg-background tw:group-[.toaster]:text-foreground tw:group-[.toaster]:border-border tw:group-[.toaster]:shadow-lg',
-            description: 'tw:group-[.toast]:text-muted-foreground',
-            actionButton: 'tw:group-[.toast]:bg-primary tw:group-[.toast]:text-primary-foreground',
-            cancelButton: 'tw:group-[.toast]:bg-muted tw:group-[.toast]:text-muted-foreground',
+            toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+            description: 'group-[.toast]:text-muted-foreground',
+            actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+            cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },
     }, ...(ngDevMode ? [{ debugName: "toastOptions" }] : []));
     offset = input(null, ...(ngDevMode ? [{ debugName: "offset" }] : []));