tailjng 0.0.61 → 0.1.0

package/src/lib/components/alert/alert-toast/toast-alert.component.html

@@ -2,86 +2,118 @@
   @for (toast of toasts(); track toast.id) {
     <div
       @toastTransition
-      class="j-dialog-toas relative ml-auto w-100 border border-border border-l-4 p-4 rounded-lg shadow-lg overflow-hidden flex gap-3"
-      [ngClass]="getToastClass(toast.config.type)"
+      class="j-toast group relative ml-auto w-full overflow-hidden rounded-xl border border-border/40 dark:border-dark-border/40 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/40 pointer-events-auto"
+      [ngClass]="getToastSurfaceClass(toast.config.type)"
+      role="alert"
+      aria-live="polite"
     >
-      <!-- Close button -->
-      @if (toast.btnClose) {
-        <button
-          class="absolute p-1 top-2 right-2 cursor-pointer rounded transition duration-300 hover:bg-background dark:hover:bg-dark-background"
-          [ngClass]="getIconClass(toast.config.type)"
-          (click)="closeToast(toast.id)"
-        >
-          <lucide-icon
-            [name]="iconsService.icons.close"
-            [size]="16"
-          ></lucide-icon>
-        </button>
-      }
+      <div
+        class="absolute left-0 top-0 w-1 z-[1]"
+        [ngClass]="getAccentBarClass(toast.config.type)"
+        [class.bottom-0]="!hasAutoClose(toast)"
+        [class.bottom-1]="hasAutoClose(toast)"
+      ></div>
 
-      <!-- Big icon in the bottom left corner -->
+      <!-- Icono decorativo grande -->
       <div
+        class="j-toast-watermark j-toast-watermark--lg absolute -bottom-8 -left-5 z-0 pointer-events-none select-none"
         [ngClass]="{ 'animate-spin': toast.config.type === 'loading' }"
-        class="absolute -bottom-5 opacity-15 dark:opacity-25 -left-5 text-black dark:text-white z-2 pointer-events-none"
       >
         <lucide-icon
           [name]="getIcon(toast.config.type)"
-          [size]="100"
-          [ngClass]="getIconClass(toast.config.type)"
+          [size]="104"
+          [ngClass]="getWatermarkIconClass(toast.config.type)"
         ></lucide-icon>
       </div>
 
-      <!-- Small icon in the top right corner -->
+      <!-- Icono decorativo pequeño -->
       <div
+        class="j-toast-watermark j-toast-watermark--sm absolute top-2 z-0 pointer-events-none select-none"
+        [class.right-9]="toast.btnClose"
+        [class.right-3]="!toast.btnClose"
         [ngClass]="{ 'animate-spin': toast.config.type === 'loading' }"
-        class="absolute top-5 opacity-15 dark:opacity-25 right-5 text-black dark:text-white z-2 pointer-events-none"
       >
         <lucide-icon
           [name]="getIcon(toast.config.type)"
-          [size]="30"
-          [ngClass]="getIconClass(toast.config.type)"
+          [size]="32"
+          [ngClass]="getWatermarkIconClass(toast.config.type, true)"
         ></lucide-icon>
       </div>
 
-      <!-- Content -->
-      <div class="flex-1">
-        <h3 class="text-sm font-semibold text-black dark:text-white pb-2">
+      <!-- Texto -->
+      <div
+        class="relative z-10 pl-5 pr-4 pt-3.5"
+        [class.pr-10]="toast.btnClose"
+        [class.pb-2]="hasActions(toast)"
+        [class.pb-3.5]="!hasActions(toast) && !hasAutoClose(toast)"
+        [class.pb-4]="!hasActions(toast) && hasAutoClose(toast)"
+      >
+        <h3 class="m-0 text-sm font-semibold leading-tight text-foreground dark:text-white">
           {{ toast.config.title }}
         </h3>
-        <p
-          class="text-sm text-black/80 dark:text-dark-muted-foreground"
-          [innerHTML]="toast.config.description"
-        ></p>
 
-        <!-- Action buttons -->
-        <div class="flex justify-end gap-2 mt-2">
-          <!-- Button Cancel -->
-          @if (toast.config.type !== "success" && toast.onCancelCallback) {
+        @if (toast.config.description) {
+          <p
+            class="m-0 mt-1 text-xs leading-relaxed text-muted-foreground dark:text-dark-muted-foreground [&_b]:font-semibold [&_b]:text-foreground dark:[&_b]:text-white"
+            [innerHTML]="toast.config.description"
+          ></p>
+        }
+
+        @if (toast.btnClose) {
+          <button
+            type="button"
+            class="absolute top-2.5 right-2.5 z-20 flex h-7 w-7 items-center justify-center rounded-lg transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
+            [ngClass]="getIconClass(toast.config.type)"
+            [attr.aria-label]="'Cerrar notificación'"
+            (click)="closeToast(toast.id)"
+          >
+            <lucide-icon [name]="iconsService.icons.close" [size]="15"></lucide-icon>
+          </button>
+        }
+      </div>
+
+      <!-- Acciones: alineadas a la card, no al bloque de texto -->
+      @if (hasActions(toast)) {
+        <div
+          class="relative z-10 flex flex-wrap justify-end gap-1.5 pl-5 pr-4"
+          [class.pb-3.5]="!hasAutoClose(toast)"
+          [class.pb-4]="hasAutoClose(toast)"
+        >
+          @if (toast.config.type !== 'success' && toast.onCancelCallback) {
             <JButton
+              size="xs"
               (clicked)="handleAction(toast.id, 'cancel')"
               [disabled]="toast.isCancelLoading || toast.isActionLoading"
               [isLoading]="toast.isCancelLoading"
-              classes="text-[10px] min-w-auto"
               [ngClasses]="getButtonSecondaryClass(toast.config.type)"
             >
-              {{ toast.config.titleBtnCancel || "Cancelar" }}
+              {{ toast.config.titleBtnCancel || 'Cancelar' }}
             </JButton>
           }
 
-          <!-- Button Action -->
-          @if (toast.config.type !== "loading" && toast.onActionCallback) {
+          @if (toast.config.type !== 'loading' && toast.onActionCallback) {
             <JButton
+              size="xs"
               (clicked)="handleAction(toast.id, 'action')"
               [disabled]="toast.isCancelLoading || toast.isActionLoading"
               [isLoading]="toast.isActionLoading"
-              classes="text-[10px] min-w-auto"
               [ngClasses]="getButtonClass(toast.config.type)"
             >
               {{ toast.actionNameButton }}
             </JButton>
           }
         </div>
-      </div>
+      }
+
+      @if (hasAutoClose(toast)) {
+        <div class="j-toast-timeline absolute inset-x-0 bottom-0 z-20 h-1 bg-black/5 dark:bg-white/10">
+          <div
+            class="j-toast-progress h-full origin-left"
+            [ngClass]="getAccentBarClass(toast.config.type)"
+            [style.animation-duration.ms]="getAutoCloseDelay(toast)"
+          ></div>
+        </div>
+      }
     </div>
   }
 </div>

package/src/lib/components/alert/alert-toast/toast-alert.component.ts

@@ -3,8 +3,7 @@ import { trigger, transition, style, animate } from "@angular/animations";
 import { NgClass } from '@angular/common';
 import { LucideAngularModule } from 'lucide-angular';
 import { JButtonComponent } from '../../button/button.component';
-import { JColorsService } from '../../color/colors.service';
-import { JIconsService, JAlertToastService } from 'tailjng';
+import { JIconsService, JAlertToastService, JColorsService } from 'tailjng';
 
 @Component({
   selector: 'JAlertToast',
@@ -12,16 +11,16 @@ import { JIconsService, JAlertToastService } from 'tailjng';
   templateUrl: './toast-alert.component.html',
   styleUrl: './toast-alert.component.css',
   animations: [
-    trigger("toastTransition", [
-      transition(":enter", [
-        style({ opacity: 0, transform: "translateY(10px)" }),
-        animate("300ms ease-out", style({ opacity: 1, transform: "translateY(0)" }))
+    trigger('toastTransition', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateX(1.25rem) scale(0.98)' }),
+        animate('320ms cubic-bezier(0.16, 1, 0.3, 1)', style({ opacity: 1, transform: 'translateX(0) scale(1)' })),
       ]),
-      transition(":leave", [
-        animate("150ms ease-in", style({ opacity: 0, transform: "translateY(10px)" }))
-      ])
-    ])
-  ]
+      transition(':leave', [
+        animate('180ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'translateX(0.75rem) scale(0.98)' })),
+      ]),
+    ]),
+  ],
 })
 export class JAlertToastComponent {
   
@@ -71,15 +70,81 @@ export class JAlertToastComponent {
 
 
   /**
-   * Get the class of the toast.
-   * @param type The type of the toast.
-   * @returns The class of the toast.
+   * Fondo suave del toast según el tipo (tinte del diseño anterior + glass actual).
+   */
+  getToastSurfaceClass(type: string): string {
+    if (this.monocromatic) {
+      return 'bg-white/95 dark:bg-foreground/95';
+    }
+
+    const surfaces: Record<string, string> = {
+      success: 'bg-green-50/95 dark:bg-[#15241f]/95',
+      error: 'bg-red-50/95 dark:bg-[#21181c]/95',
+      warning: 'bg-yellow-50/95 dark:bg-[#1f1c1a]/95',
+      info: 'bg-blue-50/95 dark:bg-[#1a1a24]/95',
+      question: 'bg-purple-50/95 dark:bg-[#241732]/95',
+      loading: 'bg-gray-50/95 dark:bg-[#15181e]/95',
+    };
+
+    return surfaces[type] ?? 'bg-white/95 dark:bg-foreground/95';
+  }
+
+  /**
+   * Opacidad del icono decorativo de fondo.
+   */
+  getWatermarkIconClass(type: string, subtle = false): string {
+    if (subtle) {
+      return `${this.getIconClass(type)} opacity-[0.12] dark:opacity-[0.2]`;
+    }
+    return `${this.getIconClass(type)} opacity-[0.2] dark:opacity-[0.3]`;
+  }
+
+  /**
+   * Barra lateral de acento según el tipo de toast.
    */
-  getToastClass(type: string) {
-    return this.colorsService.getAlertClass(type, this.monocromatic);
+  getAccentBarClass(type: string): string {
+    if (this.monocromatic) return 'bg-primary';
+
+    const accents: Record<string, string> = {
+      success: 'bg-green-500',
+      error: 'bg-red-500',
+      warning: 'bg-yellow-500',
+      info: 'bg-blue-500',
+      question: 'bg-purple-500',
+      loading: 'bg-gray-500',
+    };
+
+    return accents[type] ?? 'bg-primary';
   }
 
+  /**
+   * Indica si el toast muestra botones de acción o cancelar.
+   */
+  hasActions(toast: {
+    config: { type?: string };
+    onCancelCallback?: unknown;
+    onActionCallback?: unknown;
+  }): boolean {
+    return (
+      (toast.config.type !== 'success' && Boolean(toast.onCancelCallback)) ||
+      (toast.config.type !== 'loading' && Boolean(toast.onActionCallback))
+    );
+  }
 
+  /**
+   * Indica si el toast se cierra automáticamente.
+   */
+  hasAutoClose(toast: { config: { type?: string; autoClose?: boolean } }): boolean {
+    const { config } = toast;
+    return config.autoClose === true || (config.type === 'success' && config.autoClose !== false);
+  }
+
+  /**
+   * Duración del auto-cierre en milisegundos.
+   */
+  getAutoCloseDelay(toast: { config: { autoCloseDelay?: number } }): number {
+    return toast.config.autoCloseDelay ?? 5000;
+  }
 
   /**
    * Get the class of the icon.
@@ -119,12 +184,12 @@ export class JAlertToastComponent {
    * @returns The class of the toast.
    */
   getPositionClass(): string {
-    const base = 'w-full fixed z-1000 flex flex-col gap-2 max-w-md';
+    const base = 'w-full fixed z-1000 flex flex-col gap-3 max-w-[22rem] pointer-events-none p-1';
     switch (this.position) {
       case 'top-left':
-        return `${base} top-4 left-4`;
+        return `${base} top-18 left-3`;
       case 'top-right':
-        return `${base} top-20 right-4`;
+        return `${base} top-18 right-3`;
       case 'bottom-left':
         return `${base} bottom-4 left-4`;
       case 'bottom-right':

package/src/lib/components/badge/badge.component.ts

@@ -1,9 +1,8 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { JTooltipDirective } from '../tooltip/tooltip.directive';
-import { JIconsService } from 'tailjng';
+import { JIconsService, JColorsService } from 'tailjng';
 import { LucideAngularModule } from 'lucide-angular';
 import { NgClass } from '@angular/common';
-import { JColorsService } from '../color/colors.service';
 
 @Component({
   selector: 'JBadge',

package/src/lib/components/button/button.component.css

@@ -0,0 +1,14 @@
+:host {
+  display: inline-flex;
+}
+
+:host:has(button.w-full),
+:host:has(button[class*="w-full"]) {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+
+button {
+  line-height: 1.2;
+}

package/src/lib/components/button/button.component.html

@@ -7,30 +7,30 @@
   [class]="classes"
   (click)="handleClick($event)"
 >
-  <div class="flex items-center justify-center gap-2">
-
+  <span
+    class="inline-flex items-center justify-center"
+    [ngClass]="innerContentClasses"
+  >
     @if (isLoading) {
-      <div [ngClass]="{ 'pt-1 pb-1': icon }">
-        <lucide-icon [name]="iconsService.icons.loading" [size]="iconSize || 15" class="animate-spin" />
-      </div>
+      <lucide-icon
+        [name]="iconsService.icons.loading"
+        [size]="resolvedIconSize"
+        class="animate-spin shrink-0"
+      />
     }
 
     @if (!isLoading && icon) {
-      <div class="pt-1 pb-1">
-
-        @if (!isChangeIcon) {
-          <lucide-icon [name]="icon" [size]="iconSize" />
-        } @else {
-          <lucide-icon [name]="iconChange" [size]="iconSize" />
-        }
-        
-      </div>
+      @if (!isChangeIcon) {
+        <lucide-icon [name]="icon" [size]="resolvedIconSize" class="shrink-0" />
+      } @else {
+        <lucide-icon [name]="iconChange" [size]="resolvedIconSize" class="shrink-0" />
+      }
     }
 
     @if (text && (!isLoading || isLoadingText)) {
-      <span class="text-[15px] max-[400px]:text-[12px]">{{ text }}</span>
+      <span>{{ text }}</span>
     }
 
     <ng-content></ng-content>
-  </div>
-</button>
+  </span>
+</button>

package/src/lib/components/button/button.component.ts

@@ -1,96 +1,187 @@
-import { NgClass } from "@angular/common"
-import { Component, Input, Output, EventEmitter } from "@angular/core"
-import { LucideAngularModule } from "lucide-angular"
-import { JIconsService } from "tailjng";
-import { JColorsService } from '../color/colors.service';
-import { JTooltipDirective } from "../tooltip/tooltip.directive"
+import { NgClass } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService, JColorsService } from 'tailjng';
+import { JTooltipDirective } from '../tooltip/tooltip.directive';
+
+export type JButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon';
 
 @Component({
   selector: 'JButton',
   imports: [NgClass, LucideAngularModule, JTooltipDirective],
   templateUrl: './button.component.html',
-  styleUrl: './button.component.css'
+  styleUrl: './button.component.css',
 })
 export class JButtonComponent {
 
-  @Input() type: "button" | "submit" | "reset" = "button";
-  @Input() tooltipPosition: "top" | "right" | "bottom" | "left" = "top";
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() tooltipPosition: 'top' | 'right' | 'bottom' | 'left' = 'top';
 
   @Input() text!: string | number;
-  @Input() tooltip: string = "";
+  @Input() tooltip: string = '';
 
   @Input() icon!: any;
-  @Input() iconSize: number = 15;
+  @Input() iconSize: number = 0;
   @Input() iconChange!: any;
   @Input() isChangeIcon: boolean = false;
 
+  /** xs/sm: alertas y cards · md: formularios · lg: acciones destacadas · icon: solo icono */
+  @Input() size: JButtonSize = 'md';
+
   @Output() clicked = new EventEmitter<Event>();
 
   @Input() disabled = false;
   @Input() isLoading = false;
   @Input() isLoadingText = true;
 
-  @Input() classes: string = "";
+  @Input() classes: string = '';
   @Input() ngClasses: { [key: string]: boolean } = {};
 
+  constructor(
+    public readonly iconsService: JIconsService,
+    private readonly colorsService: JColorsService,
+  ) { }
 
-  // Define classes based on button type (switch)
   get variantClasses(): string {
-    return this.colorsService.variants[this.getActiveVariant()] || "min-w-[100px] text-black dark:text-white shadow-md"
+    return this.colorsService.variants[this.getActiveVariant()]
+      ?? 'text-black dark:text-white shadow-md border border-border dark:border-dark-border';
+  }
+
+  get resolvedIconSize(): number {
+    if (this.iconSize > 0) return this.iconSize;
+
+    switch (this.size) {
+      case 'xs': return 14;
+      case 'sm': return 14;
+      case 'icon': return 16;
+      case 'lg': return 18;
+      default: return 15;
+    }
   }
 
-  // Combine base classes with variants
   get computedClasses() {
+    const result: Record<string, boolean> = {
+      'inline-flex items-center justify-center font-semibold border border-border dark:border-dark-border transition duration-300 select-none': true,
+      [this.dimensionClasses]: !this.hasCustomDimensions(),
+      [this.paddingClasses]: !this.hasCustomPadding(),
+      [this.radiusClasses]: !this.hasCustomRadius(),
+      [this.variantClasses]: true,
+      'cursor-pointer': !this.disabled && !this.isLoading,
+      'cursor-default opacity-50 pointer-events-none': this.disabled || this.isLoading,
+      ...this.ngClasses,
+    };
+
+    if (!this.hasCustomTextSize() && this.textSizeClasses) {
+      result[this.textSizeClasses] = true;
+    }
+
+    return result;
+  }
+
+  get innerContentClasses(): Record<string, boolean> {
     return {
-      "flex gap-3 items-center justify-center font-semibold border border-border dark:border-dark-border px-3 max-[400px]:px-2! py-2 max-[400px]:py-1 rounded transition duration-300 select-none": true,
-      [this.variantClasses]: true, // Apply variant classes based on switch
-      "cursor-pointer": !this.disabled && !this.isLoading, // Default cursor when active
-      "cursor-default opacity-50 pointer-events-none": this.disabled || this.isLoading, // Disabled cursor
-      ...this.ngClasses, // Allows using dynamic validations with [ngClass]
+      'gap-1': this.size === 'xs' || this.size === 'icon',
+      'gap-1.5': this.size === 'sm',
+      'gap-2': this.size === 'md' || this.size === 'lg',
+    };
+  }
+
+  get dimensionClasses(): string {
+    switch (this.size) {
+      case 'xs':
+        return 'h-7 min-w-0';
+      case 'sm':
+        return 'h-8 min-w-0';
+      case 'icon':
+        return 'h-8 w-8 min-w-0 shrink-0';
+      case 'lg':
+        return 'min-h-10 min-w-[7.5rem]';
+      case 'md':
+      default:
+        return this.icon && !this.text
+          ? 'min-h-9 min-w-9'
+          : 'min-h-9 min-w-[6.25rem]';
     }
   }
 
+  get paddingClasses(): string {
+    switch (this.size) {
+      case 'xs':
+        return 'px-2.5 py-0';
+      case 'sm':
+        return 'px-3 py-0';
+      case 'icon':
+        return 'p-0';
+      case 'lg':
+        return 'px-4 py-2.5';
+      case 'md':
+      default:
+        return 'px-3 py-2 max-[400px]:px-2 max-[400px]:py-1.5';
+    }
+  }
 
-  constructor(
-    public readonly iconsService: JIconsService,
-    private readonly colorsService: JColorsService,
-  ) { }
+  get textSizeClasses(): string {
+    switch (this.size) {
+      case 'xs':
+        return 'text-[11px] leading-tight font-medium';
+      case 'sm':
+        return 'text-xs leading-tight font-medium';
+      case 'lg':
+        return 'text-base leading-snug';
+      case 'icon':
+        return '';
+      case 'md':
+      default:
+        return 'text-sm leading-snug max-[400px]:text-xs';
+    }
+  }
 
+  get radiusClasses(): string {
+    return this.size === 'icon' || this.size === 'xs' || this.size === 'sm'
+      ? 'rounded-lg'
+      : 'rounded-md';
+  }
 
-  /**
-   * Verify if a class is present in `classes` or `ngClasses`
-   * Split the class string by spaces to check each class individually
-   * @param className Name of the class to check
-   * @returns True if the class is present, false otherwise
-   */
-  private hasClass(className: string): boolean {
-    const classArray = this.classes.split(" ")
-    return classArray.includes(className) || this.ngClasses[className]
+  private getClassTokens(): string[] {
+    const fromClasses = this.classes.split(/\s+/).filter(Boolean);
+    const fromNgClasses = Object.entries(this.ngClasses)
+      .filter(([, active]) => active)
+      .map(([className]) => className);
+    return [...fromClasses, ...fromNgClasses];
   }
 
+  private matchesTokenPattern(pattern: RegExp): boolean {
+    return this.getClassTokens().some((token) => pattern.test(token));
+  }
 
+  hasCustomDimensions(): boolean {
+    return this.matchesTokenPattern(/^!?((min|max)-)?[wh](-|\[|$)|^!?size-/);
+  }
 
-  /**
-   * Get the active variant based on the provided classes.
-   * It checks if the class exists in the `variants` object of `JColorsService
-   * @returns The active variant based on the provided classes.
-   */
-  private getActiveVariant(): string {
-    const variant = Object.keys(this.colorsService.variants).find((variant) => this.hasClass(variant))
-    return variant ?? "default"
+  hasCustomPadding(): boolean {
+    return this.matchesTokenPattern(/^!?p[xytblr]?(-|\[|$)|^!?p$/);
   }
 
+  hasCustomTextSize(): boolean {
+    return this.matchesTokenPattern(/^!?text(-|\[|$)/);
+  }
+
+  hasCustomRadius(): boolean {
+    return this.matchesTokenPattern(/^!?rounded(-|\[|$)/);
+  }
 
+  private hasClass(className: string): boolean {
+    return this.getClassTokens().includes(className);
+  }
+
+  private getActiveVariant(): string {
+    const variants = Object.keys(this.colorsService.variants).sort((a, b) => b.length - a.length);
+    return variants.find((variant) => this.hasClass(variant)) ?? 'default';
+  }
 
-  /**
-   * Handle click event on the button.
-   * Emits the clicked event if the button is not disabled and not loading.
-   * @param event The click event
-   */
   handleClick(event: Event) {
     if (!this.disabled && !this.isLoading) {
-      this.clicked.emit(event)
+      this.clicked.emit(event);
     }
   }
-
 }

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.ts

@@ -48,6 +48,8 @@ export class JCompleteCrudCardComponent implements OnInit {
   };
 
   @Input() endpoint!: string;
+  // Clave alternativa de response.data cuando difiere del mainEndpoint (ej. reminders en reminder/mine)
+  @Input() responseKey?: string;
   mainEndpoint!: string;
   @Input() columns: TableColumn<any>[] = [];
   @Input() defaultFilters: { [key: string]: any } = {};
@@ -177,7 +179,9 @@ export class JCompleteCrudCardComponent implements OnInit {
     // setTimeout(() => {
     this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
       next: (response) => {
-        this.data = response.data[this.mainEndpoint] ?? [];
+        // Usa responseKey si la API devuelve una colección con nombre distinto al endpoint
+        const dataKey = this.responseKey ?? this.mainEndpoint;
+        this.data = response.data[dataKey] ?? [];
 
         if (response.meta?.page) {
           this.totalItems = response.meta.page.totalRecords;

package/src/lib/components/checkbox/checkbox-switch/switch-checkbox.component.html

@@ -10,7 +10,7 @@
         >
             <!-- Slider background -->
             <div class="absolute inset-0 rounded-full transition-all duration-300"
-                 [ngClass]="isChecked ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-500'">
+                 [ngClass]="isChecked ? 'bg-dark-primary dark:bg-primary' : 'bg-gray-300 dark:bg-gray-500'">
             </div>
 
             <!-- Circle -->

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -95,7 +95,7 @@
             [tooltipPosition]="button.tooltipPosition ?? 'top'"
             (clicked)="filterBottomClick(button)"
             [classes]="button.classes ?? ''"
-            [ngClasses]="{ 'min-w-auto p-1! pl-2! pr-2!': true }"
+            [ngClasses]="{ 'min-w-auto p-1! pl-2! pr-2! w-[40px]! h-[40px]!': true }"
           />
 
           @if (button.type === "upload") {