From 2b53dd0a11b0b95ae8f2c9720018becb18464d97 Mon Sep 17 00:00:00 2001
From: Miguel Ortega <miguelangelortegamazun@gmail.com>
Date: Mon, 14 Sep 2026 20:44:00 -0500
Subject: [PATCH] refactor(ui): migrar componente Spinner a HeroUI

---
 src/components/ui/Spinner.tsx | 50 ++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/ui/Spinner.tsx b/src/components/ui/Spinner.tsx
index e44489a..f26d76f 100644
--- a/src/components/ui/Spinner.tsx
+++ b/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';
-  color?: 'cyan' | 'blue' | 'white' | 'slate' | 'current';
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  color?: "cyan" | "blue" | "white" | "slate" | "current";
   className?: string;
   label?: string;
 }
 
 const sizeClasses = {
-  xs: 'w-3.5 h-3.5 border-2',
-  sm: 'w-4 h-4 border-2',
-  md: 'w-6 h-6 border-2',
-  lg: 'w-8 h-8 border-3',
-  xl: 'w-12 h-12 border-4',
+  xs: "w-3.5 h-3.5",
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+  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',
-  blue: 'border-blue-500/20 border-t-blue-500 dark:border-blue-400/20 dark:border-t-blue-400',
-  white: 'border-white/30 border-t-white',
-  slate: 'border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200',
-  current: 'border-current/20 border-t-current',
+  cyan: "text-cyan-500 dark:text-cyan-400",
+  blue: "text-blue-500 dark:text-blue-400",
+  white: "text-white",
+  slate: "text-slate-700 dark:text-slate-200",
+  current: "text-current",
 };
 
 export const Spinner: React.FC<SpinnerProps> = ({
-  size = 'md',
-  color = 'cyan',
-  className = '',
-  label = 'Cargando...',
+  size = "md",
+  color = "cyan",
+  className = "",
+  label = "Cargando...",
 }) => {
   return (
-    <div
-      role="status"
+    <HeroSpinner
       aria-label={label}
-      className={`inline-flex items-center justify-center ${className}`}
-    >
-      <div
-        className={`rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]}`}
-      />
-      <span className="sr-only">{label}</span>
-    </div>
+      className={`inline-block animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
+    />
   );
-};
+};
\ No newline at end of file