@egose/shadcn-theme-ng 0.0.13 → 0.0.15

package/accordion/fesm2022/accordion.mjs

@@ -10,7 +10,7 @@ import { provideHlmIconConfig } from '@egose/shadcn-theme-ng/icon';
 class HlmAccordion {
     _brn = inject(BrnAccordion);
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex', this._brn.orientation() === 'horizontal' ? 'tw:flex-row' : 'tw:flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex', this._brn.orientation() === 'horizontal' ? 'flex-row' : 'flex-col', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAccordion, isStandalone: true, selector: "[hlmAccordion], hlm-accordion", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordion, inputs: ["type", "type", "dir", "dir", "orientation", "orientation"] }], ngImport: i0 });
 }
@@ -28,13 +28,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class HlmAccordionContent extends BrnAccordionContent {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     _computedClass = computed(() => {
-        const gridRows = this.state() === 'open' ? 'tw:grid-rows-[1fr]' : 'tw:hidden';
-        return hlm('tw:grid tw:text-sm tw:transition-all', gridRows, this.userClass());
+        const gridRows = this.state() === 'open' ? 'grid-rows-[1fr]' : 'hidden';
+        return hlm('grid text-sm transition-all', gridRows, this.userClass());
     }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAccordionContent, isStandalone: true, selector: "hlm-accordion-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, usesInheritance: true, ngImport: i0, template: `
-    <div [attr.inert]="_addInert()" style="tw:overflow:hidden">
-      <div class="tw:flex tw:flex-col tw:gap-4 tw:text-balance tw:pb-4 tw:pt-0">
+    <div [attr.inert]="_addInert()" style="overflow:hidden">
+      <div class="flex flex-col gap-4 text-balance pb-4 pt-0">
         <ng-content />
       </div>
     </div>
@@ -45,8 +45,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
             args: [{
                     selector: 'hlm-accordion-content',
                     template: `
-    <div [attr.inert]="_addInert()" style="tw:overflow:hidden">
-      <div class="tw:flex tw:flex-col tw:gap-4 tw:text-balance tw:pb-4 tw:pt-0">
+    <div [attr.inert]="_addInert()" style="overflow:hidden">
+      <div class="flex flex-col gap-4 text-balance pb-4 pt-0">
         <ng-content />
       </div>
     </div>
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmAccordionIcon {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:pointer-events-none tw:size-4 tw:shrink-0 tw:translate-y-0.5 tw:transition-transform tw:duration-200', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAccordionIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAccordionIcon, isStandalone: true, selector: "ng-icon[egAccordionIcon], ng-icon[hlmAccIcon]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
 }
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmAccordionItem {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:border-border tw:flex tw:flex-1 tw:flex-col tw:border-b', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-border flex flex-1 flex-col border-b', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAccordionItem, isStandalone: true, selector: "[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionItem, inputs: ["isOpened", "isOpened"] }], ngImport: i0 });
 }
@@ -100,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmAccordionTrigger {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:flex-1 tw:items-start tw:justify-between tw:gap-4 tw:rounded-md tw:py-4 tw:text-left tw:text-sm tw:font-medium tw:outline-none tw:transition-all tw:hover:underline tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:[&[data-state=open]>[egAccIcon]]:rotate-180', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[egAccIcon]]:rotate-180', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAccordionTrigger, isStandalone: true, selector: "[hlmAccordionTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--tw-ring-offset-shadow": "\"0 0 #000\"", "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionTrigger }], ngImport: i0 });
 }

package/alert/fesm2022/alert.mjs

@@ -4,93 +4,93 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 import { cva } from 'class-variance-authority';
 import { provideHlmIconConfig } from '@egose/shadcn-theme-ng/icon';
 
-const alertVariants = cva('tw:relative tw:w-full tw:items-start tw:gap-y-0.5 tw:rounded-lg tw:border tw:px-4 tw:py-3 tw:text-sm tw:has-[>[hlmAlertIcon]]:grid tw:has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] tw:has-[>[hlmAlertIcon]]:gap-x-3 tw:[&>[hlmAlertIcon]]:size-4 tw:[&>[hlmAlertIcon]]:translate-y-0.5 tw:[&>[hlmAlertIcon]]:text-current', {
+const alertVariants = cva('relative w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current', {
     variants: {
         variant: {
-            primary: 'tw:bg-primary tw:text-primary-foreground tw:[&>[hlmAlertDescription]]:text-primary-foreground/90',
-            secondary: 'tw:bg-secondary tw:text-secondary-foreground tw:[&>[hlmAlertDescription]]:text-secondary-foreground/90',
-            success: 'tw:bg-success tw:text-success-foreground tw:[&>[hlmAlertDescription]]:text-success-foreground/90',
-            warning: 'tw:bg-warning tw:text-warning-foreground tw:[&>[hlmAlertDescription]]:text-warning-foreground/90',
-            danger: 'tw:bg-danger tw:text-danger-foreground tw:[&>[hlmAlertDescription]]:text-danger-foreground/90',
-            info: 'tw:bg-info tw:text-info-foreground tw:[&>[hlmAlertDescription]]:text-info-foreground/90',
-            light: 'tw:bg-light tw:text-light-foreground tw:[&>[hlmAlertDescription]]:text-light-foreground/90',
-            dark: 'tw:bg-dark tw:text-dark-foreground tw:[&>[hlmAlertDescription]]:text-dark-foreground/90',
-            accent: 'tw:bg-accent tw:text-accent-foreground tw:[&>[hlmAlertDescription]]:text-accent-foreground/90',
-            destructive: 'tw:bg-destructive tw:text-destructive-foreground tw:[&>[hlmAlertDescription]]:text-destructive-foreground/90',
-            muted: 'tw:bg-muted tw:text-muted-foreground tw:[&>[hlmAlertDescription]]:text-muted-foreground/90',
-            link: 'tw:text-primary tw:underline-offset-4 tw:[&>[hlmAlertDescription]]:text-primary/90',
-            ghost: 'tw:[&>[hlmAlertDescription]]:text-muted-foreground',
+            primary: 'bg-primary text-primary-foreground [&>[hlmAlertDescription]]:text-primary-foreground/90',
+            secondary: 'bg-secondary text-secondary-foreground [&>[hlmAlertDescription]]:text-secondary-foreground/90',
+            success: 'bg-success text-success-foreground [&>[hlmAlertDescription]]:text-success-foreground/90',
+            warning: 'bg-warning text-warning-foreground [&>[hlmAlertDescription]]:text-warning-foreground/90',
+            danger: 'bg-danger text-danger-foreground [&>[hlmAlertDescription]]:text-danger-foreground/90',
+            info: 'bg-info text-info-foreground [&>[hlmAlertDescription]]:text-info-foreground/90',
+            light: 'bg-light text-light-foreground [&>[hlmAlertDescription]]:text-light-foreground/90',
+            dark: 'bg-dark text-dark-foreground [&>[hlmAlertDescription]]:text-dark-foreground/90',
+            accent: 'bg-accent text-accent-foreground [&>[hlmAlertDescription]]:text-accent-foreground/90',
+            destructive: 'bg-destructive text-destructive-foreground [&>[hlmAlertDescription]]:text-destructive-foreground/90',
+            muted: 'bg-muted text-muted-foreground [&>[hlmAlertDescription]]:text-muted-foreground/90',
+            link: 'text-primary underline-offset-4 [&>[hlmAlertDescription]]:text-primary/90',
+            ghost: '[&>[hlmAlertDescription]]:text-muted-foreground',
         },
         appearance: {
             solid: '',
-            light: 'tw:text-semibold',
+            light: 'text-semibold',
         },
     },
     compoundVariants: [
         {
             variant: 'primary',
             appearance: 'light',
-            class: 'tw:bg-primary/20 tw:text-primary tw:[&>[hlmAlertDescription]]:text-primary',
+            class: 'bg-primary/20 text-primary [&>[hlmAlertDescription]]:text-primary',
         },
         {
             variant: 'secondary',
             appearance: 'light',
-            class: 'tw:bg-secondary/20 tw:text-secondary tw:[&>[hlmAlertDescription]]:text-secondary',
+            class: 'bg-secondary/20 text-secondary [&>[hlmAlertDescription]]:text-secondary',
         },
         {
             variant: 'success',
             appearance: 'light',
-            class: 'tw:bg-success/20 tw:text-success tw:[&>[hlmAlertDescription]]:text-success',
+            class: 'bg-success/20 text-success [&>[hlmAlertDescription]]:text-success',
         },
         {
             variant: 'warning',
             appearance: 'light',
-            class: 'tw:bg-warning/20 tw:text-warning tw:[&>[hlmAlertDescription]]:text-warning',
+            class: 'bg-warning/20 text-warning [&>[hlmAlertDescription]]:text-warning',
         },
         {
             variant: 'danger',
             appearance: 'light',
-            class: 'tw:bg-danger/20 tw:text-danger tw:[&>[hlmAlertDescription]]:text-danger',
+            class: 'bg-danger/20 text-danger [&>[hlmAlertDescription]]:text-danger',
         },
         {
             variant: 'info',
             appearance: 'light',
-            class: 'tw:bg-info/20 tw:text-info tw:[&>[hlmAlertDescription]]:text-info',
+            class: 'bg-info/20 text-info [&>[hlmAlertDescription]]:text-info',
         },
         {
             variant: 'light',
             appearance: 'light',
-            class: 'tw:bg-light/20 tw:text-light tw:[&>[hlmAlertDescription]]:text-light',
+            class: 'bg-light/20 text-light [&>[hlmAlertDescription]]:text-light',
         },
         {
             variant: 'dark',
             appearance: 'light',
-            class: 'tw:bg-dark/20 tw:text-dark tw:[&>[hlmAlertDescription]]:text-dark',
+            class: 'bg-dark/20 text-dark [&>[hlmAlertDescription]]:text-dark',
         },
         {
             variant: 'accent',
             appearance: 'light',
-            class: 'tw:bg-accent/20 tw:text-accent tw:[&>[hlmAlertDescription]]:text-accent',
+            class: 'bg-accent/20 text-accent [&>[hlmAlertDescription]]:text-accent',
         },
         {
             variant: 'destructive',
             appearance: 'light',
-            class: 'tw:bg-destructive/20 tw:text-destructive tw:[&>[hlmAlertDescription]]:text-destructive',
+            class: 'bg-destructive/20 text-destructive [&>[hlmAlertDescription]]:text-destructive',
         },
         {
             variant: 'muted',
             appearance: 'light',
-            class: 'tw:bg-muted/20 tw:text-muted tw:[&>[hlmAlertDescription]]:text-muted',
+            class: 'bg-muted/20 text-muted [&>[hlmAlertDescription]]:text-muted',
         },
         {
             variant: 'link',
             appearance: 'light',
-            class: 'tw:bg-primary/10 tw:text-primary tw:[&>[hlmAlertDescription]]:text-primary',
+            class: 'bg-primary/10 text-primary [&>[hlmAlertDescription]]:text-primary',
         },
         {
             variant: 'ghost',
             appearance: 'light',
-            class: 'tw:bg-muted/10 tw:text-muted-foreground tw:[&>[hlmAlertDescription]]:text-muted-foreground',
+            class: 'bg-muted/10 text-muted-foreground [&>[hlmAlertDescription]]:text-muted-foreground',
         },
     ],
     defaultVariants: {
@@ -122,7 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmAlertDescription {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:text-current tw:col-start-2 tw:grid tw:justify-items-start tw:gap-1 tw:text-sm tw:[&_p]:leading-relaxed', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-current col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAlertDescription, isStandalone: true, selector: "[hlmAlertDesc],[hlmAlertDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -150,7 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 
 class HlmAlertTitle {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:col-start-2 tw:line-clamp-1 tw:min-h-4 tw:text-md tw:font-semibold tw:tracking-tight', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('col-start-2 line-clamp-1 min-h-4 text-md font-semibold tracking-tight', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAlertTitle, isStandalone: true, selector: "[hlmAlertTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }

package/autocomplete/fesm2022/autocomplete.mjs

@@ -14,7 +14,7 @@ import { BrnDialog } from '@spartan-ng/brain/dialog';
 
 class HlmAutocompleteEmpty {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:py-2 tw:text-center tw:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('py-2 text-center text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteEmpty, isStandalone: true, selector: "[hlmAutocompleteEmpty]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -32,7 +32,7 @@ class HlmAutocompleteGroup {
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     /** The styles to apply  */
-    _computedClass = computed(() => hlm('tw:text-foreground tw:block tw:overflow-hidden tw:p-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('text-foreground block overflow-hidden p-1', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteGroup, isStandalone: true, selector: "hlm-autocomplete-group", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteGroup, inputs: ["id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -58,7 +58,7 @@ class HlmAutocompleteItem {
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     /** The styles to apply  */
-    _computedClass = computed(() => hlm('tw:data-[selected]:bg-accent tw:data-[selected]:text-accent-foreground tw:[&>ng-icon]:text-muted-foreground tw:outline-hidden tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:data-[disabled]:pointer-events-none tw:data-[hidden]:hidden tw:data-[disabled]:opacity-50 tw:[&>ng-icon]:pointer-events-none tw:[&>ng-icon]:shrink-0 tw:[&>ng-icon]:text-base', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('data-[selected]:bg-accent data-[selected]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteItem, isStandalone: true, selector: "button[hlm-autocomplete-item]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteItem, inputs: ["value", "value", "disabled", "disabled", "id", "id"], outputs: ["selected", "selected"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -85,7 +85,7 @@ class HlmAutocompleteList {
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     /** The styles to apply  */
-    _computedClass = computed(() => hlm('tw:block tw:max-h-60 tw:overflow-y-auto tw:overflow-x-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('block max-h-60 overflow-y-auto overflow-x-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteList, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteList, isStandalone: true, selector: "hlm-autocomplete-list", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteList, inputs: ["id", "id"] }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -111,7 +111,7 @@ class HlmAutocompleteSearch {
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     /** The styles to apply  */
-    _computedClass = computed(() => hlm('tw:border-input tw:focus-within:border-ring tw:bg-background tw:focus-within:ring-ring/50 tw:shadow-xs tw:dark:bg-input/10 tw:flex tw:h-9 tw:min-w-0 tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-3 tw:focus-within:ring-[3px] tw:[&>_ng-icon]:flex-none tw:[&>_ng-icon]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('border-input focus-within:border-ring bg-background focus-within:ring-ring/50 shadow-xs dark:bg-input/10 flex h-9 min-w-0 items-center gap-2 rounded-md border px-3 focus-within:ring-[3px] [&>_ng-icon]:flex-none [&>_ng-icon]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteSearch, isStandalone: true, selector: "hlm-autocomplete-search", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideHlmIconConfig({ size: 'sm' })], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -132,7 +132,7 @@ class HlmAutocompleteSearchInput {
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
     /** The styles to apply  */
-    _computedClass = computed(() => hlm('tw:placeholder:text-muted-foreground tw:flex tw:h-9 tw:w-full tw:bg-transparent tw:py-1 tw:text-base tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50 tw:md:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-1 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmAutocompleteSearchInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmAutocompleteSearchInput, isStandalone: true, selector: "input[hlm-autocomplete-search-input]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAutocompleteSearchInput, inputs: ["value", "value"] }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -206,7 +206,7 @@ class HlmAutocomplete {
     onSelect = input(...(ngDevMode ? [undefined, { debugName: "onSelect" }] : []));
     /** The user defined class  */
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:block tw:w-full', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('block w-full', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     /** Custom class for the autocomplete list. */
     autocompleteListClass = input('', ...(ngDevMode ? [{ debugName: "autocompleteListClass" }] : []));
     _computedAutocompleteListClass = computed(() => hlm('', this.autocompleteListClass()), ...(ngDevMode ? [{ debugName: "_computedAutocompleteListClass" }] : []));
@@ -348,7 +348,7 @@ class HlmAutocomplete {
           />
 
           <button
-            class="tw:flex tw:items-center tw:justify-center tw:outline-none tw:disabled:cursor-not-allowed tw:[&>_ng-icon]:opacity-50"
+            class="flex items-center justify-center outline-none disabled:cursor-not-allowed [&>_ng-icon]:opacity-50"
             tabindex="-1"
             type="button"
             [attr.aria-label]="ariaLabelToggleButton()"
@@ -362,7 +362,7 @@ class HlmAutocomplete {
         <div
           *brnPopoverContent="let ctx"
           hlmPopoverContent
-          class="tw:p-0"
+          class="p-0"
           [style.width.px]="_elementRef.nativeElement.offsetWidth"
         >
           <hlm-autocomplete-list
@@ -443,7 +443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
           />
 
           <button
-            class="tw:flex tw:items-center tw:justify-center tw:outline-none tw:disabled:cursor-not-allowed tw:[&>_ng-icon]:opacity-50"
+            class="flex items-center justify-center outline-none disabled:cursor-not-allowed [&>_ng-icon]:opacity-50"
             tabindex="-1"
             type="button"
             [attr.aria-label]="ariaLabelToggleButton()"
@@ -457,7 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         <div
           *brnPopoverContent="let ctx"
           hlmPopoverContent
-          class="tw:p-0"
+          class="p-0"
           [style.width.px]="_elementRef.nativeElement.offsetWidth"
         >
           <hlm-autocomplete-list

package/badge/fesm2022/badge.mjs

@@ -4,41 +4,41 @@ import { cva } from 'class-variance-authority';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 const badgeVariants = cva([
-    'tw:inline-flex',
-    'tw:items-center',
-    'tw:rounded-sm',
-    'tw:font-medium',
-    'tw:whitespace-nowrap',
-    'tw:transition-colors',
-    'tw:focus-visible:outline-none',
-    'tw:focus-visible:ring-1',
-    'tw:focus-visible:ring-ring',
+    'inline-flex',
+    'items-center',
+    'rounded-sm',
+    'font-medium',
+    'whitespace-nowrap',
+    'transition-colors',
+    'focus-visible:outline-none',
+    'focus-visible:ring-1',
+    'focus-visible:ring-ring',
 ], {
     variants: {
         variant: {
-            primary: 'tw:bg-primary tw:text-primary-foreground tw:hover:bg-primary/90',
-            secondary: 'tw:bg-secondary tw:text-secondary-foreground tw:hover:bg-secondary/90',
-            success: 'tw:bg-success tw:text-success-foreground tw:hover:bg-success/90',
-            warning: 'tw:bg-warning tw:text-warning-foreground tw:hover:bg-warning/90',
-            danger: 'tw:bg-danger tw:text-danger-foreground tw:hover:bg-danger/90',
-            info: 'tw:bg-info tw:text-info-foreground tw:hover:bg-info/90',
-            light: 'tw:bg-light tw:text-light-foreground tw:hover:bg-light/90',
-            dark: 'tw:bg-dark tw:text-dark-foreground tw:hover:bg-dark/90',
-            accent: 'tw:bg-accent tw:text-accent-foreground tw:hover:bg-accent/90',
-            destructive: 'tw:bg-destructive tw:text-destructive-foreground tw:hover:bg-destructive/90',
-            muted: 'tw:bg-muted tw:text-muted-foreground tw:hover:bg-muted/90',
-            link: 'tw:text-primary tw:underline-offset-4 tw:hover:underline',
-            ghost: 'tw:hover:bg-light tw:hover:text-light-foreground',
+            primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90',
+            success: 'bg-success text-success-foreground hover:bg-success/90',
+            warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
+            danger: 'bg-danger text-danger-foreground hover:bg-danger/90',
+            info: 'bg-info text-info-foreground hover:bg-info/90',
+            light: 'bg-light text-light-foreground hover:bg-light/90',
+            dark: 'bg-dark text-dark-foreground hover:bg-dark/90',
+            accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
+            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+            muted: 'bg-muted text-muted-foreground hover:bg-muted/90',
+            link: 'text-primary underline-offset-4 hover:underline',
+            ghost: 'hover:bg-light hover:text-light-foreground',
         },
         size: {
-            sm: 'tw:h-5 tw:px-2 tw:text-xs',
-            default: 'tw:h-6 tw:px-3 tw:text-sm',
-            lg: 'tw:h-7 tw:px-4 tw:text-base',
+            sm: 'h-5 px-2 text-xs',
+            default: 'h-6 px-3 text-sm',
+            lg: 'h-7 px-4 text-base',
         },
         appearance: {
             solid: '',
-            outline: 'tw:bg-white tw:border',
-            'outline-filled': 'tw:bg-white tw:border',
+            outline: 'bg-white border',
+            'outline-filled': 'bg-white border',
         },
     },
     defaultVariants: {
@@ -75,37 +75,37 @@ class HlmBadge {
     /** Helper functions */
     getOutlineClasses(variant) {
         const colors = {
-            primary: 'tw:border-primary tw:text-primary tw:hover:bg-primary/10',
-            secondary: 'tw:border-secondary tw:text-secondary tw:hover:bg-secondary/10',
-            success: 'tw:border-success tw:text-success tw:hover:bg-success/10',
-            warning: 'tw:border-warning tw:text-warning tw:hover:bg-warning/10',
-            danger: 'tw:border-danger tw:text-danger tw:hover:bg-danger/10',
-            info: 'tw:border-info tw:text-info tw:hover:bg-info/10',
-            light: 'tw:border-light tw:text-light-foreground tw:hover:bg-light/10',
-            dark: 'tw:border-dark tw:text-dark tw:hover:bg-dark/10',
-            accent: 'tw:border-accent tw:text-accent tw:hover:bg-accent/10',
-            destructive: 'tw:border-destructive tw:text-destructive tw:hover:bg-destructive/10',
-            muted: 'tw:border-muted tw:text-muted-foreground tw:hover:bg-muted/10',
-            link: 'tw:text-primary',
-            ghost: 'tw:text-light-foreground',
+            primary: 'border-primary text-primary hover:bg-primary/10',
+            secondary: 'border-secondary text-secondary hover:bg-secondary/10',
+            success: 'border-success text-success hover:bg-success/10',
+            warning: 'border-warning text-warning hover:bg-warning/10',
+            danger: 'border-danger text-danger hover:bg-danger/10',
+            info: 'border-info text-info hover:bg-info/10',
+            light: 'border-light text-light-foreground hover:bg-light/10',
+            dark: 'border-dark text-dark hover:bg-dark/10',
+            accent: 'border-accent text-accent hover:bg-accent/10',
+            destructive: 'border-destructive text-destructive hover:bg-destructive/10',
+            muted: 'border-muted text-muted-foreground hover:bg-muted/10',
+            link: 'text-primary',
+            ghost: 'text-light-foreground',
         };
         return colors[variant];
     }
     getOutlineFilledClasses(variant) {
         const colors = {
-            primary: 'tw:hover:bg-primary tw:hover:text-primary-foreground',
-            secondary: 'tw:hover:bg-secondary tw:hover:text-secondary-foreground',
-            success: 'tw:hover:bg-success tw:hover:text-success-foreground',
-            warning: 'tw:hover:bg-warning tw:hover:text-warning-foreground',
-            danger: 'tw:hover:bg-danger tw:hover:text-danger-foreground',
-            info: 'tw:hover:bg-info tw:hover:text-info-foreground',
-            light: 'tw:hover:bg-light tw:hover:text-light-foreground',
-            dark: 'tw:hover:bg-dark tw:hover:text-dark-foreground',
-            accent: 'tw:hover:bg-accent tw:hover:text-accent-foreground',
-            destructive: 'tw:hover:bg-destructive tw:hover:text-destructive-foreground',
-            muted: 'tw:hover:bg-muted tw:hover:text-muted-foreground',
-            link: 'tw:hover:underline',
-            ghost: 'tw:hover:bg-light',
+            primary: 'hover:bg-primary hover:text-primary-foreground',
+            secondary: 'hover:bg-secondary hover:text-secondary-foreground',
+            success: 'hover:bg-success hover:text-success-foreground',
+            warning: 'hover:bg-warning hover:text-warning-foreground',
+            danger: 'hover:bg-danger hover:text-danger-foreground',
+            info: 'hover:bg-info hover:text-info-foreground',
+            light: 'hover:bg-light hover:text-light-foreground',
+            dark: 'hover:bg-dark hover:text-dark-foreground',
+            accent: 'hover:bg-accent hover:text-accent-foreground',
+            destructive: 'hover:bg-destructive hover:text-destructive-foreground',
+            muted: 'hover:bg-muted hover:text-muted-foreground',
+            link: 'hover:underline',
+            ghost: 'hover:bg-light',
         };
         return colors[variant];
     }

package/basic-alert/fesm2022/basic-alert.mjs

@@ -56,7 +56,7 @@ class EgBasicAlert {
         ], ngImport: i0, template: `
     <div hlmAlert [variant]="variant()" [appearance]="appearance()" class="">
       <ng-icon hlm hlmAlertIcon [name]="getIconName(variant())" />
-      <h4 hlmAlertTitle class="tw:capitalize">{{ title() }}</h4>
+      <h4 hlmAlertTitle class="capitalize">{{ title() }}</h4>
       <p hlmAlertDescription>{{ description() }}</p>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: HlmAlert, selector: "[hlmAlert]", inputs: ["class", "variant", "appearance"] }, { kind: "directive", type: HlmAlertIcon, selector: "[hlmAlertIcon]" }, { kind: "directive", type: HlmAlertTitle, selector: "[hlmAlertTitle]", inputs: ["class"] }, { kind: "directive", type: HlmAlertDescription, selector: "[hlmAlertDesc],[hlmAlertDescription]", 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"] }] });
@@ -84,7 +84,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                     template: `
     <div hlmAlert [variant]="variant()" [appearance]="appearance()" class="">
       <ng-icon hlm hlmAlertIcon [name]="getIconName(variant())" />
-      <h4 hlmAlertTitle class="tw:capitalize">{{ title() }}</h4>
+      <h4 hlmAlertTitle class="capitalize">{{ title() }}</h4>
       <p hlmAlertDescription>{{ description() }}</p>
     </div>
   `,