fix: apply designer agent improvements to src/components/ui/Card.tsx

src/components/ui/Card.tsx

@@ -1,25 +1,50 @@
 import React from 'react'
 import clsx from 'clsx'
 
+/* ── Card Root ──────────────────────────────────────────────────────────────── */
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   hover?:   boolean
   padding?: 'none' | 'sm' | 'md' | 'lg'
+  as?:      React.ElementType
 }
 
-const paddingClasses = {
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ hover = false, padding = 'none', as: Tag = 'div', className, children, ...props }, ref) => {
+    const paddingClasses = {
       none: '',
       sm:   'p-4',
       md:   'p-5',
       lg:   'p-6',
-}
+    }
 
-export function Card({ hover, padding = 'md', className, children, ...props }: CardProps) {
+    return (
+      <Tag
+        ref={ref}
+        className={clsx(
+          'bg-white rounded-xl border border-surface-200 shadow-soft',
+          hover && 'transition-all duration-200 cursor-pointer hover:shadow-soft-md hover:-translate-y-0.5',
+          paddingClasses[padding],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    )
+  },
+)
+Card.displayName = 'Card'
+
+/* ── Card Header ────────────────────────────────────────────────────────────── */
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  border?: boolean
+}
+export function CardHeader({ border = true, className, children, ...props }: CardHeaderProps) {
   return (
     <div
       className={clsx(
-        'bg-white rounded-xl border border-slate-200 shadow-card',
+        'px-5 py-4',
-        hover && 'transition-all duration-200 hover:shadow-card-md hover:border-slate-300 hover:-translate-y-px',
+        border && 'border-b border-surface-100',
-        paddingClasses[padding],
         className,
       )}
       {...props}
@@ -29,34 +54,50 @@ export function Card({ hover, padding = 'md', className, children, ...props }: C
   )
 }
 
-export function CardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+/* ── Card Body ──────────────────────────────────────────────────────────────── */
+export function CardBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={clsx('flex items-center justify-between mb-4', className)} {...props}>
+    <div className={clsx('px-5 py-4', className)} {...props}>
       {children}
     </div>
   )
 }
 
+/* ── Card Footer ────────────────────────────────────────────────────────────── */
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  border?: boolean
+}
+export function CardFooter({ border = true, className, children, ...props }: CardFooterProps) {
+  return (
+    <div
+      className={clsx(
+        'px-5 py-3',
+        border && 'border-t border-surface-100',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+/* ── Card Title ─────────────────────────────────────────────────────────────── */
 export function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
   return (
-    <h3 className={clsx('text-base font-semibold text-slate-900', className)} {...props}>
+    <h3 className={clsx('text-base font-semibold text-ink', className)} {...props}>
       {children}
     </h3>
   )
 }
 
+/* ── Card Description ───────────────────────────────────────────────────────── */
 export function CardDescription({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
   return (
-    <p className={clsx('text-sm text-slate-500', className)} {...props}>
+    <p className={clsx('text-sm text-ink-muted mt-0.5', className)} {...props}>
       {children}
     </p>
   )
 }
 
-export function CardFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export default Card
-  return (
-    <div className={clsx('mt-4 pt-4 border-t border-slate-100 flex items-center gap-3', className)} {...props}>
-      {children}
-    </div>
-  )
-}