@egose/shadcn-theme-ng 0.0.12 → 0.0.14

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" }] : []));

package/spinner/fesm2022/spinner.mjs

@@ -14,15 +14,15 @@ class HlmSpinner {
     spinnerClass = input('', ...(ngDevMode ? [{ debugName: "spinnerClass", alias: 'spinnerClass' }] : [{ alias: 'spinnerClass' }]));
     // Map sizes to Tailwind classes
     sizeClasses = {
-        small: 'tw:size-6!',
-        medium: 'tw:size-8!',
-        large: 'tw:size-12!',
+        small: 'size-6!',
+        medium: 'size-8!',
+        large: 'size-12!',
     };
     // Outer container class (visibility + layout)
-    _containerClass = computed(() => hlm('tw:flex-col tw:items-center tw:justify-center', // base container styles
-    this.show() ? 'tw:flex' : 'tw:hidden', this.wrapperClass()), ...(ngDevMode ? [{ debugName: "_containerClass" }] : []));
+    _containerClass = computed(() => hlm('flex-col items-center justify-center', // base container styles
+    this.show() ? 'flex' : 'hidden', this.wrapperClass()), ...(ngDevMode ? [{ debugName: "_containerClass" }] : []));
     // SVG spinner class (size + animation + color)
-    _iconClass = computed(() => hlm('tw:[&>svg]:animate-spin tw:[&>svg]:text-primary', // base svg styles
+    _iconClass = computed(() => hlm('[&>svg]:animate-spin [&>svg]:text-primary', // base svg styles
     this.sizeClasses[this.size()], this.spinnerClass()), ...(ngDevMode ? [{ debugName: "_iconClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmSpinner, isStandalone: true, selector: "hlm-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, spinnerClass: { classPropertyName: "spinnerClass", publicName: "spinnerClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class": "_containerClass()" } }, ngImport: i0, template: `<ng-icon [svg]="icon" [class]="_iconClass()" />`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });

package/switch/fesm2022/switch.mjs

@@ -6,7 +6,7 @@ import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 class HlmSwitchThumb {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:bg-background tw:dark:group-data-[state=unchecked]:bg-foreground tw:dark:group-data-[state=checked]:bg-primary-foreground tw:pointer-events-none tw:block tw:size-4 tw:rounded-full tw:ring-0 tw:transition-transform tw:data-[state=unchecked]:translate-x-0 tw:group-data-[state=checked]:translate-x-[calc(100%-2px)]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-[calc(100%-2px)]', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmSwitchThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmSwitchThumb, isStandalone: true, selector: "brn-switch-thumb[hlm],[hlmSwitchThumb]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
@@ -27,7 +27,7 @@ const EG_SWITCH_VALUE_ACCESSOR = {
 };
 class HlmSwitch {
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[state=checked]:bg-primary tw:data-[state=unchecked]:bg-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:dark:data-[state=unchecked]:bg-input/80 tw:shadow-xs tw:group tw:inline-flex tw:h-[1.15rem] tw:w-8 tw:shrink-0 tw:items-center tw:rounded-full tw:border tw:border-transparent tw:outline-none tw:transition-all tw:focus-visible:ring-[3px] tw:data-[disabled=true]:cursor-not-allowed tw:data-[disabled=true]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs group inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     /** The checked state of the switch. */
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     /** The disabled state of the switch. */

package/tabs/fesm2022/tabs.mjs

@@ -14,7 +14,7 @@ import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
 class HlmTabs {
     tab = input.required(...(ngDevMode ? [{ debugName: "tab" }] : []));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:flex tw:flex-col tw:gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('flex flex-col gap-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabs, isStandalone: true, selector: "hlm-tabs", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabs, inputs: ["orientation", "orientation", "direction", "direction", "activationMode", "activationMode", "brnTabs", "tab"], outputs: ["tabActivated", "tabActivated"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -40,7 +40,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class HlmTabsContent {
     contentFor = input.required(...(ngDevMode ? [{ debugName: "contentFor", alias: 'hlmTabsContent' }] : [{ alias: 'hlmTabsContent' }]));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:ring-offset-background tw:focus-visible:ring-ring tw:mt-2 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-offset-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTabsContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabsContent, isStandalone: true, selector: "[hlmTabsContent]", inputs: { contentFor: { classPropertyName: "contentFor", publicName: "hlmTabsContent", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabsContent, inputs: ["brnTabsContent", "hlmTabsContent"] }], ngImport: i0 });
 }
@@ -55,11 +55,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
-const listVariants = cva('tw:bg-muted tw:text-muted-foreground tw:inline-flex tw:h-9 tw:w-fit tw:items-center tw:justify-center tw:rounded-lg tw:p-[3px]', {
+const listVariants = cva('bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]', {
     variants: {
         orientation: {
-            horizontal: 'tw:h-10 tw:space-x-1',
-            vertical: 'tw:mt-2 tw:h-fit tw:flex-col tw:space-y-1',
+            horizontal: 'h-10 space-x-1',
+            vertical: 'mt-2 h-fit flex-col space-y-1',
         },
     },
     defaultVariants: {
@@ -96,11 +96,11 @@ class HlmTabsPaginatedList extends BrnTabsPaginatedList {
     nextPaginator = viewChild.required('nextPaginator');
     previousPaginator = viewChild.required('previousPaginator');
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:relative tw:flex tw:flex-shrink-0 tw:gap-1 tw:overflow-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+    _computedClass = computed(() => hlm('relative flex flex-shrink-0 gap-1 overflow-hidden', this.userClass()), ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     tabListClass = input('', ...(ngDevMode ? [{ debugName: "tabListClass", alias: 'tabListClass' }] : [{ alias: 'tabListClass' }]));
     _tabListClass = computed(() => hlm(listVariants(), this.tabListClass()), ...(ngDevMode ? [{ debugName: "_tabListClass" }] : []));
     paginationButtonClass = input('', ...(ngDevMode ? [{ debugName: "paginationButtonClass", alias: 'paginationButtonClass' }] : [{ alias: 'paginationButtonClass' }]));
-    _paginationButtonClass = computed(() => hlm('tw:relative tw:z-[2] tw:select-none tw:disabled:cursor-default', buttonVariants({ variant: 'ghost', size: 'icon' }), this.paginationButtonClass()), ...(ngDevMode ? [{ debugName: "_paginationButtonClass" }] : []));
+    _paginationButtonClass = computed(() => hlm('relative z-[2] select-none disabled:cursor-default', buttonVariants({ variant: 'ghost', size: 'icon' }), this.paginationButtonClass()), ...(ngDevMode ? [{ debugName: "_paginationButtonClass" }] : []));
     _itemSelected(event) {
         event.preventDefault();
     }
@@ -123,9 +123,9 @@ class HlmTabsPaginatedList extends BrnTabsPaginatedList {
       <ng-icon hlm size="base" name="lucideChevronLeft" />
     </button>
 
-    <div #tabListContainer class="tw:z-[1] tw:flex tw:grow tw:overflow-hidden" (keydown)="_handleKeydown($event)">
+    <div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
       <div
-        class="tw:relative tw:grow tw:transition-transform"
+        class="relative grow transition-transform"
         #tabList
         role="tablist"
         (cdkObserveContent)="_onContentChanges()"
@@ -178,9 +178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
       <ng-icon hlm size="base" name="lucideChevronLeft" />
     </button>
 
-    <div #tabListContainer class="tw:z-[1] tw:flex tw:grow tw:overflow-hidden" (keydown)="_handleKeydown($event)">
+    <div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
       <div
-        class="tw:relative tw:grow tw:transition-transform"
+        class="relative grow transition-transform"
         #tabList
         role="tablist"
         (cdkObserveContent)="_onContentChanges()"
@@ -218,7 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
 class HlmTabsTrigger {
     triggerFor = input.required(...(ngDevMode ? [{ debugName: "triggerFor", alias: 'hlmTabsTrigger' }] : [{ alias: 'hlmTabsTrigger' }]));
     userClass = input('', ...(ngDevMode ? [{ debugName: "userClass", alias: 'class' }] : [{ alias: 'class' }]));
-    _computedClass = computed(() => hlm('tw:data-[state=active]:bg-background tw:dark:data-[state=active]:text-foreground tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:outline-ring tw:dark:data-[state=active]:border-input tw:dark:data-[state=active]:bg-input/10 tw:text-foreground tw:dark:text-muted-foreground tw:inline-flex tw:h-[calc(100%-1px)] tw:flex-1 tw:items-center tw:justify-center tw:gap-1.5 tw:whitespace-nowrap tw:rounded-md tw:border tw:border-transparent tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:transition-[color,box-shadow] tw:focus-visible:outline-1 tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:data-[state=active]:shadow-sm 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-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/10 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_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: HlmTabsTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", type: HlmTabsTrigger, isStandalone: true, selector: "[hlmTabsTrigger]", inputs: { triggerFor: { classPropertyName: "triggerFor", publicName: "hlmTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnTabsTrigger, inputs: ["brnTabsTrigger", "hlmTabsTrigger", "disabled", "disabled"] }], ngImport: i0 });
 }

package/tooltip/fesm2022/tooltip.mjs

@@ -21,11 +21,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
-const DEFAULT_TOOLTIP_CONTENT_CLASSES = 'tw:bg-primary tw:text-primary-foreground tw:animate-in tw:fade-in-0 tw:zoom-in-95 tw:z-50 tw:w-fit tw:rounded-md tw:px-3 tw:py-1.5 tw:text-xs tw:text-balance ' +
-    'tw:data-[state=open]:animate-in ' +
-    'tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=closed]:zoom-out-95 ' +
-    'tw:data-[side=below]:slide-in-from-top-2 tw:data-[side=above]:slide-in-from-bottom-2 ' +
-    'tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 ';
+const DEFAULT_TOOLTIP_CONTENT_CLASSES = 'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance ' +
+    'data-[state=open]:animate-in ' +
+    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 ' +
+    'data-[side=below]:slide-in-from-top-2 data-[side=above]:slide-in-from-bottom-2 ' +
+    'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 ';
 class HlmTooltipTrigger {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HlmTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: HlmTooltipTrigger, isStandalone: true, selector: "[hlmTooltipTrigger]", providers: [