refactor(ui): migrar componente Spinner a HeroUI

src/components/ui/Spinner.tsx

@@ -1,45 +1,41 @@
 "use client";
-import React from 'react';
+
+import React from "react";
+import { Spinner as HeroSpinner } from "@heroui/react";
 
 export interface SpinnerProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  color?: 'cyan' | 'blue' | 'white' | 'slate' | 'current';
+  color?: "cyan" | "blue" | "white" | "slate" | "current";
   className?: string;
   label?: string;
 }
 
 const sizeClasses = {
-  xs: 'w-3.5 h-3.5 border-2',
+  xs: "w-3.5 h-3.5",
-  sm: 'w-4 h-4 border-2',
+  sm: "w-4 h-4",
-  md: 'w-6 h-6 border-2',
+  md: "w-6 h-6",
-  lg: 'w-8 h-8 border-3',
+  lg: "w-8 h-8",
-  xl: 'w-12 h-12 border-4',
+  xl: "w-12 h-12",
 };
 
 const colorClasses = {
-  cyan: 'border-cyan-500/20 border-t-cyan-500 dark:border-cyan-400/20 dark:border-t-cyan-400',
+  cyan: "text-cyan-500 dark:text-cyan-400",
-  blue: 'border-blue-500/20 border-t-blue-500 dark:border-blue-400/20 dark:border-t-blue-400',
+  blue: "text-blue-500 dark:text-blue-400",
-  white: 'border-white/30 border-t-white',
+  white: "text-white",
-  slate: 'border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200',
+  slate: "text-slate-700 dark:text-slate-200",
-  current: 'border-current/20 border-t-current',
+  current: "text-current",
 };
 
 export const Spinner: React.FC<SpinnerProps> = ({
-  size = 'md',
+  size = "md",
-  color = 'cyan',
+  color = "cyan",
-  className = '',
+  className = "",
-  label = 'Cargando...',
+  label = "Cargando...",
 }) => {
   return (
-    <div
+    <HeroSpinner
-      role="status"
       aria-label={label}
-      className={`inline-flex items-center justify-center ${className}`}
+      className={`inline-block animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
-    >
+    />
-      <div
-        className={`rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]}`}
-      />
-      <span className="sr-only">{label}</span>
-    </div>
   );
-};
+};