@egose/shadcn-theme-ng 0.0.13 → 0.0.14

package/button/fesm2022/button.mjs

@@ -8,63 +8,63 @@ import { cva } from 'class-variance-authority';
 import { hlm } from '@egose/shadcn-theme-ng/utils';
 
 const buttonVariants = cva([
-    'tw:cursor-pointer',
-    'tw:active:translate-y-[0.5px]',
-    'tw:disabled:pointer-events-none',
-    'tw:disabled:opacity-50',
-    'tw:focus-visible:outline-none',
-    'tw:focus-visible:ring-1',
-    'tw:focus-visible:ring-ring',
-    'tw:font-medium',
-    'tw:gap-2',
-    'tw:inline-flex',
-    'tw:items-center',
-    'tw:justify-center',
-    'tw:rounded-sm',
-    'tw:text-sm',
-    'tw:transform',
-    'tw:transition',
-    'tw:transition-colors',
-    'tw:whitespace-nowrap',
-    'tw:[&_svg]:pointer-events-none',
-    'tw:[&_svg]:shrink-0',
-    'tw:[&_svg]:size-4',
+    'cursor-pointer',
+    'active:translate-y-[0.5px]',
+    'disabled:pointer-events-none',
+    'disabled:opacity-50',
+    'focus-visible:outline-none',
+    'focus-visible:ring-1',
+    'focus-visible:ring-ring',
+    'font-medium',
+    'gap-2',
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-sm',
+    'text-sm',
+    'transform',
+    'transition',
+    'transition-colors',
+    'whitespace-nowrap',
+    '[&_svg]:pointer-events-none',
+    '[&_svg]:shrink-0',
+    '[&_svg]:size-4',
 ], {
     variants: {
         variant: {
-            primary: 'tw:border tw:border-primary tw:bg-primary tw:text-primary-foreground tw:shadow-sm tw:hover:bg-primary/90',
-            secondary: 'tw:border tw:border-secondary tw:bg-secondary tw:text-secondary-foreground tw:shadow-sm tw:hover:bg-secondary/90',
-            success: 'tw:border tw:border-success tw:bg-success tw:text-success-foreground tw:shadow-sm tw:hover:bg-success/90',
-            warning: 'tw:border tw:border-warning tw:bg-warning tw:text-warning-foreground tw:shadow-sm tw:hover:bg-warning/90',
-            danger: 'tw:border tw:border-danger tw:bg-danger tw:text-danger-foreground tw:shadow-sm tw:hover:bg-danger/90',
-            info: 'tw:border tw:border-info tw:bg-info tw:text-info-foreground tw:shadow-sm tw:hover:bg-info/90',
-            light: 'tw:border tw:border-light tw:bg-light tw:text-light-foreground tw:shadow-sm tw:hover:bg-light/90',
-            dark: 'tw:border tw:border-dark tw:bg-dark tw:text-dark-foreground tw:shadow-sm tw:hover:bg-dark/90',
-            accent: 'tw:border tw:border-accent tw:bg-accent tw:text-accent-foreground tw:shadow-sm tw:hover:bg-accent/90',
-            destructive: 'tw:border tw:border-destructive tw:bg-destructive tw:text-destructive-foreground tw:shadow-sm tw:hover:bg-destructive/90',
-            muted: 'tw:border tw:border-muted tw:bg-muted tw:text-muted-foreground tw:shadow-sm 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: 'border border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+            secondary: 'border border-secondary bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90',
+            success: 'border border-success bg-success text-success-foreground shadow-sm hover:bg-success/90',
+            warning: 'border border-warning bg-warning text-warning-foreground shadow-sm hover:bg-warning/90',
+            danger: 'border border-danger bg-danger text-danger-foreground shadow-sm hover:bg-danger/90',
+            info: 'border border-info bg-info text-info-foreground shadow-sm hover:bg-info/90',
+            light: 'border border-light bg-light text-light-foreground shadow-sm hover:bg-light/90',
+            dark: 'border border-dark bg-dark text-dark-foreground shadow-sm hover:bg-dark/90',
+            accent: 'border border-accent bg-accent text-accent-foreground shadow-sm hover:bg-accent/90',
+            destructive: 'border border-destructive bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+            muted: 'border border-muted bg-muted text-muted-foreground shadow-sm hover:bg-muted/90',
+            link: 'text-primary underline-offset-4 hover:underline',
+            ghost: 'hover:bg-light hover:text-light-foreground',
         },
         size: {
-            xs: 'tw:h-7 tw:rounded-xs tw:px-2 tw:text-xs',
-            sm: 'tw:h-8 tw:rounded-sm tw:px-3',
-            default: 'tw:h-9 tw:px-4 tw:py-2',
-            lg: 'tw:h-10 tw:rounded-sm tw:px-7 tw:text-base',
-            icon: 'tw:h-9 tw:w-9',
-            'compact-xs': 'tw:h-6 tw:px-2 tw:py-1 tw:text-xs',
-            'compact-sm': 'tw:h-7 tw:px-2 tw:py-1',
-            'compact-default': 'tw:h-8 tw:px-2 tw:py-1',
-            'compact-lg': 'tw:h-9 tw:px-2 tw:py-1 tw:text-base',
-            'compact-icon': 'tw:h-8 tw:w-8',
+            xs: 'h-7 rounded-xs px-2 text-xs',
+            sm: 'h-8 rounded-sm px-3',
+            default: 'h-9 px-4 py-2',
+            lg: 'h-10 rounded-sm px-7 text-base',
+            icon: 'h-9 w-9',
+            'compact-xs': 'h-6 px-2 py-1 text-xs',
+            'compact-sm': 'h-7 px-2 py-1',
+            'compact-default': 'h-8 px-2 py-1',
+            'compact-lg': 'h-9 px-2 py-1 text-base',
+            'compact-icon': 'h-8 w-8',
         },
         appearance: {
             solid: '',
-            outline: 'tw:bg-white tw:border',
-            'outline-filled': 'tw:bg-white tw:border',
+            outline: 'bg-white border',
+            'outline-filled': 'bg-white border',
         },
         loading: {
-            true: 'tw:pointer-events-none',
+            true: 'pointer-events-none',
             false: null,
         },
     },
@@ -102,7 +102,7 @@ class HlmButton {
             appearance: this.appearance(),
             loading: this.loading(),
             className: this.userClass(),
-        }), outlineClasses, this.loading() ? 'tw:pointer-events-none' : '', this._additionalClasses());
+        }), outlineClasses, this.loading() ? 'pointer-events-none' : '', this._additionalClasses());
     }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     /** Computed spinner classes */
     spinnerClass = computed(() => {
@@ -117,73 +117,73 @@ class HlmButton {
     /** Helper functions */
     getOutlineClasses(variant) {
         const colors = {
-            primary: 'tw:border-primary tw:text-primary tw:shadow-sm tw:hover:bg-primary/10',
-            secondary: 'tw:border-secondary tw:text-secondary tw:shadow-sm tw:hover:bg-secondary/10',
-            success: 'tw:border-success tw:text-success tw:shadow-sm tw:hover:bg-success/10',
-            warning: 'tw:border-warning tw:text-warning tw:shadow-sm tw:hover:bg-warning/10',
-            danger: 'tw:border-danger tw:text-danger tw:shadow-sm tw:hover:bg-danger/10',
-            info: 'tw:border-info tw:text-info tw:shadow-sm tw:hover:bg-info/10',
-            light: 'tw:border-light tw:text-light-foreground tw:shadow-sm tw:hover:bg-light/10',
-            dark: 'tw:border-dark tw:text-dark tw:shadow-sm tw:hover:bg-dark/10',
-            accent: 'tw:border-accent tw:text-accent tw:shadow-sm tw:hover:bg-accent/10',
-            destructive: 'tw:border-destructive tw:text-destructive tw:shadow-sm tw:hover:bg-destructive/10',
-            muted: 'tw:border-muted tw:text-muted-foreground tw:shadow-sm tw:hover:bg-muted/10',
-            link: 'tw:text-primary',
-            ghost: 'tw:text-light-foreground',
+            primary: 'border-primary text-primary shadow-sm hover:bg-primary/10',
+            secondary: 'border-secondary text-secondary shadow-sm hover:bg-secondary/10',
+            success: 'border-success text-success shadow-sm hover:bg-success/10',
+            warning: 'border-warning text-warning shadow-sm hover:bg-warning/10',
+            danger: 'border-danger text-danger shadow-sm hover:bg-danger/10',
+            info: 'border-info text-info shadow-sm hover:bg-info/10',
+            light: 'border-light text-light-foreground shadow-sm hover:bg-light/10',
+            dark: 'border-dark text-dark shadow-sm hover:bg-dark/10',
+            accent: 'border-accent text-accent shadow-sm hover:bg-accent/10',
+            destructive: 'border-destructive text-destructive shadow-sm hover:bg-destructive/10',
+            muted: 'border-muted text-muted-foreground shadow-sm hover:bg-muted/10',
+            link: 'text-primary',
+            ghost: 'text-light-foreground',
         };
         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];
     }
     getSpinnerClasses(variant) {
         const colors = {
-            primary: 'tw:[&>svg]:text-primary-foreground',
-            secondary: 'tw:[&>svg]:text-secondary-foreground',
-            success: 'tw:[&>svg]:text-success-foreground',
-            warning: 'tw:[&>svg]:text-warning-foreground',
-            danger: 'tw:[&>svg]:text-danger-foreground',
-            info: 'tw:[&>svg]:text-info-foreground',
-            light: 'tw:[&>svg]:text-light-foreground',
-            dark: 'tw:[&>svg]:text-dark-foreground',
-            accent: 'tw:[&>svg]:text-accent-foreground',
-            destructive: 'tw:[&>svg]:text-destructive-foreground',
-            muted: 'tw:[&>svg]:text-muted-foreground',
-            link: 'tw:[&>svg]:text-primary',
-            ghost: 'tw:[&>svg]:text-light-foreground',
+            primary: '[&>svg]:text-primary-foreground',
+            secondary: '[&>svg]:text-secondary-foreground',
+            success: '[&>svg]:text-success-foreground',
+            warning: '[&>svg]:text-warning-foreground',
+            danger: '[&>svg]:text-danger-foreground',
+            info: '[&>svg]:text-info-foreground',
+            light: '[&>svg]:text-light-foreground',
+            dark: '[&>svg]:text-dark-foreground',
+            accent: '[&>svg]:text-accent-foreground',
+            destructive: '[&>svg]:text-destructive-foreground',
+            muted: '[&>svg]:text-muted-foreground',
+            link: '[&>svg]:text-primary',
+            ghost: '[&>svg]:text-light-foreground',
         };
         return colors[variant];
     }
     getOutlineSpinnerClasses(variant) {
         const colors = {
-            primary: 'tw:[&>svg]:text-primary',
-            secondary: 'tw:[&>svg]:text-secondary',
-            success: 'tw:[&>svg]:text-success',
-            warning: 'tw:[&>svg]:text-warning',
-            danger: 'tw:[&>svg]:text-danger',
-            info: 'tw:[&>svg]:text-info',
-            light: 'tw:[&>svg]:text-light',
-            dark: 'tw:[&>svg]:text-dark',
-            accent: 'tw:[&>svg]:text-accent',
-            destructive: 'tw:[&>svg]:text-destructive',
-            muted: 'tw:[&>svg]:text-muted-foreground',
-            link: 'tw:[&>svg]:text-primary',
-            ghost: 'tw:[&>svg]:text-light-foreground',
+            primary: '[&>svg]:text-primary',
+            secondary: '[&>svg]:text-secondary',
+            success: '[&>svg]:text-success',
+            warning: '[&>svg]:text-warning',
+            danger: '[&>svg]:text-danger',
+            info: '[&>svg]:text-info',
+            light: '[&>svg]:text-light',
+            dark: '[&>svg]:text-dark',
+            accent: '[&>svg]:text-accent',
+            destructive: '[&>svg]:text-destructive',
+            muted: '[&>svg]:text-muted-foreground',
+            link: '[&>svg]:text-primary',
+            ghost: '[&>svg]:text-light-foreground',
         };
         return colors[variant];
     }
@@ -194,16 +194,16 @@ class HlmButton {
     </ng-template>
 
     @if (loading()) {
-      <div class="tw:relative tw:inline-flex tw:items-center">
-        <span class="tw:invisible">
+      <div class="relative inline-flex items-center">
+        <span class="invisible">
           <ng-container *ngTemplateOutlet="projected" />
         </span>
-        <span class="tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center">
+        <span class="absolute inset-0 flex items-center justify-center">
           <hlm-spinner size="small" [spinnerClass]="spinnerClass()" />
         </span>
       </div>
     } @else {
-      <div class="tw:flex tw:items-center tw:gap-1">
+      <div class="flex items-center gap-1">
         @if (icon() && iconPosition() === 'left') {
           <ng-container *ngTemplateOutlet="icon()" />
         }
@@ -234,16 +234,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
     </ng-template>
 
     @if (loading()) {
-      <div class="tw:relative tw:inline-flex tw:items-center">
-        <span class="tw:invisible">
+      <div class="relative inline-flex items-center">
+        <span class="invisible">
           <ng-container *ngTemplateOutlet="projected" />
         </span>
-        <span class="tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center">
+        <span class="absolute inset-0 flex items-center justify-center">
           <hlm-spinner size="small" [spinnerClass]="spinnerClass()" />
         </span>
       </div>
     } @else {
-      <div class="tw:flex tw:items-center tw:gap-1">
+      <div class="flex items-center gap-1">
         @if (icon() && iconPosition() === 'left') {
           <ng-container *ngTemplateOutlet="icon()" />
         }