refactor(ui): migrar componente Card a HeroUI

src/components/ui/Card.tsx

@@ -1,30 +1,44 @@
 "use client";
 import React from 'react';
+import { 
+  Card as HeroUICard, 
+  CardHeader as HeroUICardHeader, 
+  CardFooter as HeroUICardFooter,
+  CardProps as HeroUICardProps,
+} from '@heroui/react';
+import { tv } from '@heroui/styles';
 
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: 'default' | 'elevated' | 'glass' | 'outline' | 'interactive';
-  padding?: 'none' | 'sm' | 'md' | 'lg';
-}
-
-const variantStyles: Record<NonNullable<CardProps['variant']>, string> = {
-  default:
-    'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800/80 shadow-sm',
-  elevated:
-    'bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-black/40',
-  glass:
-    'bg-white/80 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-lg',
-  outline:
-    'bg-transparent border border-slate-300 dark:border-slate-800 shadow-none',
-  interactive:
-    'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl hover:shadow-cyan-500/10 hover:border-cyan-500/50 dark:hover:border-cyan-500/40 cursor-pointer transform hover:-translate-y-1 transition-all duration-300 ease-out',
-};
-
-const paddingStyles: Record<NonNullable<CardProps['padding']>, string> = {
+const cardStyles = tv({
+  // Desactivamos los estilos de sombra/borde base de HeroUI para tener control total
+  base: 'rounded-2xl overflow-hidden transition-colors border-none shadow-none',
+  variants: {
+    customVariant: {
+      default: 'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800/80 shadow-sm',
+      elevated: 'bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-xl shadow-slate-200/50 dark:shadow-black/40',
+      glass: 'bg-white/80 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200/70 dark:border-slate-800/70 shadow-lg',
+      outline: 'bg-transparent border border-slate-300 dark:border-slate-800 shadow-none',
+      interactive: 'bg-white dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl hover:shadow-cyan-500/10 hover:border-cyan-500/50 dark:hover:border-cyan-500/40 cursor-pointer transform hover:-translate-y-1 transition-all duration-300 ease-out',
+    },
+    customPadding: {
       none: 'p-0',
       sm: 'p-4',
       md: 'p-6',
       lg: 'p-8',
-};
+    }
+  },
+  defaultVariants: {
+    customVariant: 'default',
+    customPadding: 'none',
+  }
+});
+
+// 1. Omitimos las props conflictivas y declaramos tu API
+export interface CardProps extends Omit<HeroUICardProps, 'className' | 'children' | 'variant'> {
+  variant?: 'default' | 'elevated' | 'glass' | 'outline' | 'interactive';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
   (
@@ -38,24 +52,24 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     ref
   ) => {
     return (
-      <div
+      <HeroUICard
         ref={ref}
-        className={`
-          rounded-2xl overflow-hidden transition-colors
-          ${variantStyles[variant]}
-          ${paddingStyles[padding]}
-          ${className}
-        `}
+        className={cardStyles({ 
+          customVariant: variant, 
+          customPadding: padding, 
+          className 
+        })}
+        // El radius interno de HeroUI se sobrescribe usando tu 'rounded-2xl'
         {...props}
       >
         {children}
-      </div>
+      </HeroUICard>
     );
   }
 );
-
 Card.displayName = 'Card';
 
+// 2. Subcomponentes: Mapeados a HeroUI
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   bordered?: boolean;
 }
@@ -67,7 +81,7 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
   ...props
 }) => {
   return (
-    <div
+    <HeroUICardHeader
       className={`
         p-5 sm:p-6 flex flex-col space-y-1.5
         ${bordered ? 'border-b border-slate-100 dark:border-slate-800/80' : ''}
@@ -76,10 +90,11 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
       {...props}
     >
       {children}
-    </div>
+    </HeroUICardHeader>
   );
 };
 
+// 3. CardTitle y CardDescription: Se mantienen como HTML estándar
 export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
   className = '',
   children,
@@ -110,13 +125,14 @@ export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement
   );
 };
 
+// 4. CardContent: Mapeado a CardBody de HeroUI
 export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className = '',
   children,
   ...props
 }) => {
   return (
-    <div className={`p-5 sm:p-6 ${className}`} {...props}>
+    <div className={`p-5 sm:p-6 overflow-visible ${className}`} {...props}>
       {children}
     </div>
   );
@@ -133,7 +149,7 @@ export const CardFooter: React.FC<CardFooterProps> = ({
   ...props
 }) => {
   return (
-    <div
+    <HeroUICardFooter
       className={`
         p-5 sm:p-6 flex items-center justify-between
         ${bordered ? 'border-t border-slate-100 dark:border-slate-800/80' : ''}
@@ -142,6 +158,6 @@ export const CardFooter: React.FC<CardFooterProps> = ({
       {...props}
     >
       {children}
-    </div>
+    </HeroUICardFooter>
   );
 };