@adamosuiteservices/ui 1.7.13 → 1.8.13

package/docs/components/ui/card.md

@@ -1,1265 +1,1265 @@
-# Card
-
-Contenedor versátil con bordes redondeados, padding y sombra para agrupar contenido relacionado. Incluye 6 variantes de color y un sistema de layout con grid automático para headers con acciones.
-
-## Características Principales
-
-- **6 variantes de color**: Default, Primary, Muted, Success, Warning, Destructive
-- **Composición modular**: 6 subcomponentes (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter)
-- **Grid automático en header**: Detecta `CardAction` y ajusta layout automáticamente con `has-data-[slot=card-action]:grid-cols-[1fr_auto]`
-- **Container queries**: CardHeader usa `@container/card-header` para layouts responsive
-- **Spacing flexible**: `gap-6` entre secciones principales, spacing auto en header/footer con bordes
-- **Bordes opcionales**: Clases `.border-b` y `.border-t` añaden separadores con padding automático
-- **Data slots**: Cada subcomponente tiene `data-slot` para targeting CSS específico
-- **Integración con otros componentes**: Background transparente para Calendar/otros componentes anidados
-
-## Importación
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardAction,
-  CardContent,
-  CardFooter,
-} from "@adamosuiteservices/ui/card";
-```
-
-## Uso Básico
-
-### Card Completa
-
-Estructura típica con todos los componentes.
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from "@adamosuiteservices/ui/card";
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content goes here.</p>
-  </CardContent>
-  <CardFooter>
-    <Button>Action</Button>
-  </CardFooter>
-</Card>;
-```
-
-### Card Simple (Solo Contenido)
-
-Para contenedores minimalistas sin header/footer.
-
-```tsx
-<Card className="w-[350px]">
-  <CardContent>
-    <h3 className="text-lg font-semibold">Simple Card</h3>
-    <p className="text-sm text-muted-foreground">
-      This is a simple card with just content.
-    </p>
-  </CardContent>
-</Card>
-```
-
-### Con Acción en Header
-
-Botón de acción que se alinea automáticamente a la derecha.
-
-```tsx
-import { MoreHorizontalIcon } from "lucide-react";
-
-<Card className="w-[400px]">
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>You have 3 unread messages.</CardDescription>
-    <CardAction>
-      <Button variant="outline" size="sm">
-        <MoreHorizontalIcon />
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>{/* Notification items */}</CardContent>
-</Card>;
-```
-
-**Nota**: El grid se ajusta automáticamente cuando hay `CardAction`.
-
-## Componentes
-
-### Card
-
-Contenedor principal de la card.
-
-#### Props
-
-| Prop        | Tipo                                                                           | Default     | Descripción                |
-| ----------- | ------------------------------------------------------------------------------ | ----------- | -------------------------- |
-| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo |
-| `className` | `string`                                                                       | -           | Clases CSS adicionales     |
-| `children`  | `ReactNode`                                                                    | -           | Contenido de la card       |
-
-### CardHeader
-
-Sección de encabezado con grid automático para título, descripción y acción.
-
-#### Props
-
-| Prop        | Tipo        | Descripción                                                |
-| ----------- | ----------- | ---------------------------------------------------------- |
-| `className` | `string`    | Clases CSS adicionales                                     |
-| `children`  | `ReactNode` | Usualmente contiene CardTitle, CardDescription, CardAction |
-
-**Características**:
-
-- Grid automático: 2 filas (`grid-rows-[auto_auto]`)
-- Columnas adaptativas: 1 columna por defecto, 2 cuando hay `CardAction` (`has-data-[slot=card-action]:grid-cols-[1fr_auto]`)
-- Container query: `@container/card-header` para responsive interno
-- Padding inferior automático: `[.border-b]:pb-6` cuando se agrega clase `.border-b`
-
-### CardTitle
-
-Título principal de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Texto del título       |
-
-**Estilos default**: `leading-none font-semibold`
-
-### CardDescription
-
-Descripción o subtítulo de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Texto de descripción   |
-
-**Estilos default**: `text-muted-foreground text-sm`
-
-### CardAction
-
-Botón o acción alineada a la derecha del header.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Usualmente un Button   |
-
-**Posicionamiento**:
-
-- `col-start-2 row-span-2 row-start-1`: Ocupa columna 2, ambas filas
-- `self-start justify-self-end`: Alineado superior-derecha
-
-### CardContent
-
-Contenido principal de la card.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Contenido principal    |
-
-**Estilos default**: `px-6` (padding horizontal matching header/footer)
-
-### CardFooter
-
-Pie de la card para acciones o información adicional.
-
-#### Props
-
-| Prop        | Tipo        | Descripción            |
-| ----------- | ----------- | ---------------------- |
-| `className` | `string`    | Clases CSS adicionales |
-| `children`  | `ReactNode` | Usualmente botones     |
-
-**Estilos default**:
-
-- `flex items-center px-6`: Layout flex horizontal centrado
-- `[.border-t]:pt-6`: Padding superior automático con clase `.border-t`
-
-## Variantes
-
-### Default
-
-Card estándar con fondo blanco/oscuro según tema.
-
-```tsx
-<Card variant="default" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Default Card</CardTitle>
-    <CardDescription>Standard card appearance</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">Standard styling with default colors.</p>
-  </CardContent>
-</Card>
-```
-
-**Colores**: `bg-card text-card-foreground`
-
-### Primary
-
-Fondo azul claro para información importante.
-
-```tsx
-<Card variant="primary" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Important Information</CardTitle>
-    <CardDescription>Please read carefully</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      This is important information that requires attention.
-    </p>
-  </CardContent>
-  <CardFooter>
-    <Button>Acknowledge</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-primary-50` con iconos y texto ajustados
-
-### Success
-
-Fondo verde claro para confirmaciones exitosas.
-
-```tsx
-<Card variant="success" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Payment Successful</CardTitle>
-    <CardDescription>Your transaction completed</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">Your payment has been processed successfully.</p>
-  </CardContent>
-  <CardFooter>
-    <Button variant="outline">View Receipt</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-success-50` con texto `text-success/90`
-
-### Warning
-
-Fondo naranja/amarillo para advertencias.
-
-```tsx
-<Card variant="warning" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Storage Almost Full</CardTitle>
-    <CardDescription>You're running out of space</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">You've used 95% of storage. Consider upgrading.</p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Manage
-    </Button>
-    <Button size="sm">Upgrade</Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-warning-50` con texto `text-warning/90`
-
-### Destructive
-
-Fondo rojo claro para acciones destructivas o errores.
-
-```tsx
-<Card variant="destructive" className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Delete Account</CardTitle>
-    <CardDescription>This action cannot be undone</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Permanently delete your account? All data will be lost.
-    </p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <Button variant="destructive" size="sm">
-      Delete
-    </Button>
-  </CardFooter>
-</Card>
-```
-
-**Colores**: `bg-destructive-50` con texto `text-destructive/90`
-
-### Muted
-
-Fondo gris claro para información secundaria.
-
-```tsx
-<Card variant="muted" className="w-full">
-  <CardHeader>
-    <CardTitle>Muted Card</CardTitle>
-    <CardDescription>Less prominent information</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Information that doesn't require immediate attention.
-    </p>
-  </CardContent>
-</Card>
-```
-
-**Colores**: `bg-muted` con texto `text-muted/90`
-
-**Colores**: `bg-muted` con texto `text-muted/90`
-
-## Patrones Avanzados
-
-### Formulario de Login
-
-Card completa con form, inputs y múltiples acciones.
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-import { Label } from "@adamosuiteservices/ui/label";
-
-<Card className="w-full max-w-sm">
-  <CardHeader>
-    <CardTitle>Login to your account</CardTitle>
-    <CardDescription>Enter your email below to login</CardDescription>
-    <CardAction>
-      <Button variant="link">Sign Up</Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <form>
-      <div className="flex flex-col gap-6">
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div className="grid gap-2">
-          <div className="flex items-center">
-            <Label htmlFor="password">Password</Label>
-            <a
-              href="#"
-              className="ml-auto text-sm underline-offset-4 hover:underline"
-            >
-              Forgot password?
-            </a>
-          </div>
-          <Input id="password" type="password" required />
-        </div>
-      </div>
-    </form>
-  </CardContent>
-  <CardFooter className="flex-col gap-2">
-    <Button type="submit" className="w-full">
-      Login
-    </Button>
-    <Button variant="outline" className="w-full">
-      Login with Google
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Perfil de Usuario
-
-Card con avatar, stats y acciones múltiples.
-
-```tsx
-import { Avatar } from "@adamosuiteservices/ui/avatar";
-import {
-  HeartIcon,
-  StarIcon,
-  ShareIcon,
-  ExternalLinkIcon,
-  UserIcon,
-} from "lucide-react";
-
-<Card className="w-[380px]">
-  <CardHeader>
-    <div className="flex items-center space-x-4">
-      <Avatar className="h-12 w-12">
-        <UserIcon />
-      </Avatar>
-      <div>
-        <CardTitle>Sofia Davis</CardTitle>
-        <CardDescription>Product Designer</CardDescription>
-      </div>
-    </div>
-    <CardAction>
-      <Button variant="outline" size="sm">
-        Follow
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <div className="text-sm text-muted-foreground">
-      Passionate about creating beautiful user experiences.
-    </div>
-  </CardContent>
-  <CardFooter className="flex justify-between">
-    <div className="flex space-x-4 text-sm text-muted-foreground">
-      <div className="flex items-center">
-        <HeartIcon className="mr-1 h-3 w-3" />
-        256
-      </div>
-      <div className="flex items-center">
-        <StarIcon className="mr-1 h-3 w-3" />
-        98
-      </div>
-    </div>
-    <div className="flex space-x-1">
-      <Button variant="ghost" size="sm">
-        <ShareIcon />
-      </Button>
-      <Button variant="ghost" size="sm">
-        <ExternalLinkIcon />
-      </Button>
-    </div>
-  </CardFooter>
-</Card>;
-```
-
-### Card de Producto
-
-E-commerce card con imagen, badge, precio y acciones.
-
-```tsx
-import { Badge } from "@adamosuiteservices/ui/badge";
-import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
-
-<Card className="w-[350px]">
-  <CardHeader>
-    <div className="aspect-square rounded-md bg-muted"></div>
-  </CardHeader>
-  <CardContent>
-    <div className="space-y-2">
-      <Badge variant="secondary">Electronics</Badge>
-      <CardTitle>Wireless Headphones</CardTitle>
-      <CardDescription>
-        Premium wireless headphones with noise cancellation.
-      </CardDescription>
-      <div className="flex items-center justify-between">
-        <div className="text-2xl font-bold">$299.99</div>
-        <div className="flex items-center text-sm text-muted-foreground">
-          <StarIcon className="mr-1 h-4 w-4 fill-current" />
-          4.5 (128)
-        </div>
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter className="flex gap-2">
-    <Button className="flex-1">
-      <CreditCardIcon />
-      Add to Cart
-    </Button>
-    <Button variant="outline" size="sm">
-      <HeartIcon />
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Stats Cards (Dashboard)
-
-Grid de cards para métricas con iconos y tendencias.
-
-```tsx
-import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
-
-<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
-      <DollarSignIcon className="h-4 w-4 text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">$45,231.89</div>
-      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
-      <UserIcon className="h-4 w-4 text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+2350</div>
-      <p className="text-xs text-muted-foreground">+180.1% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Sales</CardTitle>
-      <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+12,234</div>
-      <p className="text-xs text-muted-foreground">+19% from last month</p>
-    </CardContent>
-  </Card>
-
-  <Card>
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <CardTitle className="text-sm font-medium">Active Now</CardTitle>
-      <UserIcon className="h-4 w-4 text-muted-foreground" />
-    </CardHeader>
-    <CardContent>
-      <div className="text-2xl font-bold">+573</div>
-      <p className="text-xs text-muted-foreground">+201 since last hour</p>
-    </CardContent>
-  </Card>
-</div>;
-```
-
-### Card de Notificaciones
-
-Lista de notificaciones con items y acción de marcar leído.
-
-```tsx
-import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
-
-<Card className="w-[380px]">
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>You have 3 unread messages.</CardDescription>
-  </CardHeader>
-  <CardContent className="grid gap-4">
-    <div className="flex items-center space-x-4 rounded-md border p-4">
-      <BellIcon className="h-4 w-4" />
-      <div className="flex-1 space-y-1">
-        <p className="text-sm font-medium leading-none">Push Notifications</p>
-        <p className="text-sm text-muted-foreground">
-          Send notifications to device.
-        </p>
-      </div>
-    </div>
-    <div className="flex items-center space-x-4 rounded-md border p-4">
-      <MailIcon className="h-4 w-4" />
-      <div className="flex-1 space-y-1">
-        <p className="text-sm font-medium leading-none">Email Notifications</p>
-        <p className="text-sm text-muted-foreground">
-          Send notifications to email.
-        </p>
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button className="w-full">
-      <CheckIcon />
-      Mark all as read
-    </Button>
-  </CardFooter>
-</Card>;
-```
-
-### Con Separadores (Border)
-
-Usa `.border-b` y `.border-t` para separadores visuales.
-
-```tsx
-<Card className="w-[350px]">
-  <CardHeader className="border-b">
-    <CardTitle>Settings</CardTitle>
-    <CardDescription>Manage your preferences</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <div className="space-y-4">{/* Settings content */}</div>
-  </CardContent>
-  <CardFooter className="border-t">
-    <Button className="w-full">Save Changes</Button>
-  </CardFooter>
-</Card>
-```
-
-**Nota**: El padding se ajusta automáticamente (`pb-6` en header, `pt-6` en footer).
-
-### Grid de Variantes
-
-Mostrar todas las variantes en una vista comparativa.
-
-```tsx
-<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-  <Card variant="default">
-    <CardHeader>
-      <CardTitle>Default</CardTitle>
-      <CardDescription>Standard card</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Standard styling.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="primary">
-    <CardHeader>
-      <CardTitle>Primary</CardTitle>
-      <CardDescription>Important info</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Highlight important content.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="success">
-    <CardHeader>
-      <CardTitle>Success</CardTitle>
-      <CardDescription>Success message</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Successful operations.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="warning">
-    <CardHeader>
-      <CardTitle>Warning</CardTitle>
-      <CardDescription>Caution message</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Important warnings.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="destructive">
-    <CardHeader>
-      <CardTitle>Destructive</CardTitle>
-      <CardDescription>Error or danger</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Errors or destructive actions.</p>
-    </CardContent>
-  </Card>
-
-  <Card variant="muted">
-    <CardHeader>
-      <CardTitle>Muted</CardTitle>
-      <CardDescription>Secondary info</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p className="text-sm">Less important information.</p>
-    </CardContent>
-  </Card>
-</div>
-```
-
-### Header con Layout Custom
-
-Override del grid para layouts específicos.
-
-```tsx
-{
-  /* Horizontal layout con custom spacing */
-}
-<Card className="w-[400px]">
-  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-    <CardTitle className="text-sm font-medium">Custom Layout</CardTitle>
-    <Badge>New</Badge>
-  </CardHeader>
-  <CardContent>
-    <div className="text-2xl font-bold">Content</div>
-  </CardContent>
-</Card>;
-```
-
-### Footer con Múltiples Acciones
-
-Diferentes arreglos de botones.
-
-```tsx
-{
-  /* Botones horizontales con gap */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Confirm Action</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Are you sure?</p>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <Button size="sm">Confirm</Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* Botones apilados verticalmente */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Choose Option</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Select an action:</p>
-  </CardContent>
-  <CardFooter className="flex-col gap-2">
-    <Button className="w-full">Primary Action</Button>
-    <Button variant="outline" className="w-full">
-      Secondary
-    </Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* Acciones distribuidas */
-}
-<Card>
-  <CardHeader>
-    <CardTitle>Actions</CardTitle>
-  </CardHeader>
-  <CardContent>
-    <p>Multiple actions available.</p>
-  </CardContent>
-  <CardFooter className="justify-between">
-    <Button variant="outline" size="sm">
-      Cancel
-    </Button>
-    <div className="flex gap-2">
-      <Button variant="outline" size="sm">
-        Save Draft
-      </Button>
-      <Button size="sm">Publish</Button>
-    </div>
-  </CardFooter>
-</Card>;
-```
-
-## Casos de Uso Comunes
-
-### Authentication Forms
-
-```tsx
-<Card className="w-full max-w-md">
-  <CardHeader>
-    <CardTitle>Create Account</CardTitle>
-    <CardDescription>Sign up to get started</CardDescription>
-  </CardHeader>
-  <CardContent className="space-y-4">
-    <Input type="text" placeholder="Full Name" />
-    <Input type="email" placeholder="Email" />
-    <Input type="password" placeholder="Password" />
-  </CardContent>
-  <CardFooter>
-    <Button className="w-full">Create Account</Button>
-  </CardFooter>
-</Card>
-```
-
-### Dashboard Widgets
-
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Recent Activity</CardTitle>
-    <CardDescription>Your latest actions</CardDescription>
-    <CardAction>
-      <Button variant="ghost" size="sm">
-        View All
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>{/* Activity list */}</CardContent>
-</Card>
-```
-
-### Settings Panels
-
-```tsx
-<Card className="border-b">
-  <CardHeader>
-    <CardTitle>Account Settings</CardTitle>
-    <CardDescription>Manage your account preferences</CardDescription>
-  </CardHeader>
-  <CardContent className="space-y-4">{/* Settings options */}</CardContent>
-  <CardFooter className="border-t">
-    <Button>Save Changes</Button>
-  </CardFooter>
-</Card>
-```
-
-### Pricing Cards
-
-```tsx
-<div className="grid gap-4 md:grid-cols-3">
-  <Card>
-    <CardHeader>
-      <CardTitle>Basic</CardTitle>
-      <CardDescription>For individuals</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <div className="text-3xl font-bold">$9/mo</div>
-      <ul className="mt-4 space-y-2 text-sm">
-        <li>✓ Feature 1</li>
-        <li>✓ Feature 2</li>
-      </ul>
-    </CardContent>
-    <CardFooter>
-      <Button variant="outline" className="w-full">
-        Choose Plan
-      </Button>
-    </CardFooter>
-  </Card>
-  {/* More pricing tiers */}
-</div>
-```
-
-### Status/Alert Cards
-
-```tsx
-<Card variant="warning">
-  <CardHeader>
-    <CardTitle>Action Required</CardTitle>
-    <CardDescription>Your subscription expires soon</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p className="text-sm">
-      Renew your subscription to continue accessing premium features.
-    </p>
-  </CardContent>
-  <CardFooter>
-    <Button>Renew Now</Button>
-  </CardFooter>
-</Card>
-```
-
-## Mejores Prácticas
-
-### Usa Anchos Fijos para Consistencia
-
-```tsx
-{
-  /* ✅ Correcto - Ancho consistente */
-}
-<Card className="w-[350px]">
-  <CardContent>Consistent width</CardContent>
-</Card>;
-
-{
-  /* ✅ También correcto - max-w para responsive */
-}
-<Card className="w-full max-w-md">
-  <CardContent>Responsive width</CardContent>
-</Card>;
-
-{
-  /* ❌ Evitar - Sin ancho puede expandirse inesperadamente */
-}
-<Card>
-  <CardContent>No width constraint</CardContent>
-</Card>;
-```
-
-### Variantes Semánticas
-
-```tsx
-{/* ✅ Correcto - Variante según significado */}
-<Card variant="success">
-  <CardContent>Payment processed!</CardContent>
-</Card>
-
-<Card variant="destructive">
-  <CardContent>Error occurred</CardContent>
-</Card>
-
-{/* ❌ Incorrecto - Variante no semántica */}
-<Card variant="success">
-  <CardContent>Error occurred</CardContent>  {/* Confuso */}
-</Card>
-```
-
-### Estructura de Header Completa
-
-```tsx
-{
-  /* ✅ Correcto - Título + Descripción */
-}
-<CardHeader>
-  <CardTitle>Title</CardTitle>
-  <CardDescription>Description</CardDescription>
-</CardHeader>;
-
-{
-  /* ⚠️ Aceptable - Solo título */
-}
-<CardHeader>
-  <CardTitle>Title Only</CardTitle>
-</CardHeader>;
-
-{
-  /* ❌ Evitar - Solo descripción sin título */
-}
-<CardHeader>
-  <CardDescription>No title</CardDescription>
-</CardHeader>;
-```
-
-### CardAction Solo en CardHeader
-
-```tsx
-{
-  /* ✅ Correcto - CardAction dentro de CardHeader */
-}
-<CardHeader>
-  <CardTitle>Title</CardTitle>
-  <CardDescription>Description</CardDescription>
-  <CardAction>
-    <Button size="sm">Action</Button>
-  </CardAction>
-</CardHeader>;
-
-{
-  /* ❌ Incorrecto - CardAction fuera de CardHeader */
-}
-<Card>
-  <CardTitle>Title</CardTitle>
-  <CardAction>
-    <Button>Won't position correctly</Button>
-  </CardAction>
-</Card>;
-```
-
-### Footer Flex para Múltiples Botones
-
-```tsx
-{
-  /* ✅ Correcto - Gap entre botones */
-}
-<CardFooter className="gap-2">
-  <Button variant="outline">Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>;
-
-{
-  /* ✅ Correcto - Full width individual */
-}
-<CardFooter className="flex-col gap-2">
-  <Button className="w-full">Primary</Button>
-  <Button variant="outline" className="w-full">
-    Secondary
-  </Button>
-</CardFooter>;
-
-{
-  /* ❌ Evitar - Sin gap entre botones */
-}
-<CardFooter>
-  <Button>Button1</Button>
-  <Button>Button2</Button> {/* Se pegan */}
-</CardFooter>;
-```
-
-### Bordes Opcionales
-
-```tsx
-{
-  /* ✅ Correcto - Border con padding automático */
-}
-<Card>
-  <CardHeader className="border-b">
-    <CardTitle>Title</CardTitle>
-  </CardHeader>
-  <CardContent>Content</CardContent>
-  <CardFooter className="border-t">
-    <Button>Action</Button>
-  </CardFooter>
-</Card>;
-
-{
-  /* ❌ Evitar - Border sin la clase en header/footer */
-}
-<Card className="border-b">
-  {" "}
-  {/* No aplica padding correcto */}
-  <CardHeader>
-    <CardTitle>Title</CardTitle>
-  </CardHeader>
-</Card>;
-```
-
-### Grid en Stats Cards
-
-```tsx
-{
-  /* ✅ Correcto - Override spacing cuando es necesario */
-}
-<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-  <CardTitle className="text-sm font-medium">Stat</CardTitle>
-  <Icon className="h-4 w-4 text-muted-foreground" />
-</CardHeader>;
-
-{
-  /* ❌ Incorrecto - Usar grid default con layout horizontal */
-}
-<CardHeader className="flex-row">
-  {" "}
-  {/* Grid sigue activo */}
-  <CardTitle>Stat</CardTitle>
-  <Icon />
-</CardHeader>;
-```
-
-## Notas de Implementación
-
-- **Basado en CVA**: Usa `class-variance-authority` para variantes de color
-- **Data Slots**: Cada componente tiene `data-slot` para CSS targeting específico (`data-slot="card"`, `data-slot="card-header"`, etc.)
-- **Grid Automático**: CardHeader usa `has-data-[slot=card-action]:grid-cols-[1fr_auto]` para detectar CardAction y ajustar layout
-- **Container Queries**: CardHeader tiene `@container/card-header` para responsive interno (requiere Tailwind CSS container queries)
-- **Spacing Consistente**: `gap-6` entre secciones (header, content, footer), `px-6` horizontal en todas las secciones
-- **Padding Condicional**: `.border-b` y `.border-t` triggers automáticos para `pb-6` y `pt-6` respectivamente
-- **Variantes de Color**: Cada variante ajusta `bg-*-50` y `text-*-foreground`, con ajustes para iconos SVG (`[&>svg]:text-current`)
-- **Rounded Corners**: `rounded-xl` por defecto (12px)
-- **Shadow**: `shadow-sm` para elevación sutil
-- **Flex Column**: Card root usa `flex flex-col gap-6` para layout vertical automático
-
-## Accesibilidad
-
-### Estructura Semántica
-
-Cards usan `<div>` por defecto, pero considera añadir roles ARIA cuando sea apropiado.
-
-```tsx
-{
-  /* Para cards interactivas */
-}
-<Card role="article" aria-labelledby="card-title">
-  <CardHeader>
-    <CardTitle id="card-title">Article Title</CardTitle>
-  </CardHeader>
-  <CardContent>Content</CardContent>
-</Card>;
-
-{
-  /* Para cards clickeables */
-}
-<Card
-  role="button"
-  tabIndex={0}
-  onClick={handleClick}
-  onKeyDown={(e) => e.key === "Enter" && handleClick()}
->
-  <CardContent>Clickable card</CardContent>
-</Card>;
-```
-
-### Labels para CardAction
-
-```tsx
-{
-  /* ✅ Correcto - aria-label descriptiva */
-}
-<CardAction>
-  <Button variant="outline" size="sm" aria-label="More options">
-    <MoreHorizontalIcon />
-  </Button>
-</CardAction>;
-
-{
-  /* ❌ Incorrecto - Sin label para icono solo */
-}
-<CardAction>
-  <Button variant="outline" size="sm">
-    <MoreHorizontalIcon />
-  </Button>
-</CardAction>;
-```
-
-### Formularios Accesibles
-
-```tsx
-{
-  /* ✅ Correcto - Labels asociadas */
-}
-<CardContent>
-  <div className="space-y-4">
-    <div className="grid gap-2">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" />
-    </div>
-  </div>
-</CardContent>;
-```
-
-### Focus Management
-
-Cards no son focuseables por defecto. Si necesitas interactividad:
-
-```tsx
-{
-  /* Para cards clickeables */
-}
-<Card
-  tabIndex={0}
-  role="button"
-  className="cursor-pointer hover:shadow-md transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-  onClick={handleClick}
->
-  <CardContent>Interactive card</CardContent>
-</Card>;
-```
-
-## Troubleshooting
-
-### CardAction No Se Alinea a la Derecha
-
-**Problema**: CardAction no aparece en la posición correcta.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - CardAction fuera de CardHeader
-<Card>
-  <CardTitle>Title</CardTitle>
-  <CardAction>
-    <Button>Action</Button>
-  </CardAction>
-</Card>
-
-// ✅ Solución - CardAction dentro de CardHeader
-<Card>
-  <CardHeader>
-    <CardTitle>Title</CardTitle>
-    <CardDescription>Description</CardDescription>
-    <CardAction>
-      <Button>Action</Button>
-    </CardAction>
-  </CardHeader>
-</Card>
-```
-
-### Gap Excesivo entre Secciones
-
-**Problema**: Mucho espacio entre header/content/footer.
-
-**Solución**:
-
-```tsx
-// ✅ El gap-6 es intencional, pero puedes reducirlo
-<Card className="gap-4">  {/* Override gap-6 */}
-  <CardHeader>...</CardHeader>
-  <CardContent>...</CardContent>
-</Card>
-
-// O eliminar gap completamente
-<Card className="gap-0">
-  <CardHeader>...</CardHeader>
-  <CardContent>...</CardContent>
-</Card>
-```
-
-### Bordes No Muestran Padding
-
-**Problema**: `.border-b` o `.border-t` no agregan padding.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - Border en elemento incorrecto
-<Card className="border-b">
-  <CardHeader>...</CardHeader>
-</Card>
-
-// ✅ Solución - Border en CardHeader o CardFooter
-<Card>
-  <CardHeader className="border-b">...</CardHeader>
-  <CardContent>...</CardContent>
-  <CardFooter className="border-t">...</CardFooter>
-</Card>
-```
-
-### Variante No Cambia Color
-
-**Problema**: Variante primary/success/etc no aplica colores.
-
-**Solución**:
-
-```tsx
-// ✅ Verifica que la prop sea en Card root
-<Card variant="primary">  {/* Correcto */}
-  <CardHeader>...</CardHeader>
-</Card>
-
-// ❌ No funciona en subcomponentes
-<Card>
-  <CardHeader variant="primary">  {/* No existe esta prop */}
-    ...
-  </CardHeader>
-</Card>
-```
-
-### Stats Cards con Layout Incorrecto
-
-**Problema**: Íconos y títulos no se alinean horizontalmente.
-
-**Solución**:
-
-```tsx
-// ✅ Override grid con flex
-<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-  <CardTitle className="text-sm font-medium">Revenue</CardTitle>
-  <DollarSignIcon className="h-4 w-4" />
-</CardHeader>
-```
-
-### Footer Buttons No Se Distribuyen
-
-**Problema**: Botones en footer se pegan sin espacio.
-
-**Solución**:
-
-```tsx
-// ❌ Problema - Sin gap
-<CardFooter>
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-
-// ✅ Solución - Añade gap
-<CardFooter className="gap-2">
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-
-// ✅ O usa justify-between
-<CardFooter className="justify-between">
-  <Button>Cancel</Button>
-  <Button>Confirm</Button>
-</CardFooter>
-```
-
-## Referencias
-
-- **CVA (Class Variance Authority)**: https://cva.style/docs
-- **shadcn/ui Card**: https://ui.shadcn.com/docs/components/card
-- **Tailwind Container Queries**: https://tailwindcss.com/docs/hover-focus-and-other-states#container-queries
-- **ARIA Article Role**: https://www.w3.org/TR/wai-aria-1.2/#article
+# Card
+
+Contenedor versátil con bordes redondeados, padding y sombra para agrupar contenido relacionado. Incluye 6 variantes de color y un sistema de layout con grid automático para headers con acciones.
+
+## Características Principales
+
+- **6 variantes de color**: Default, Primary, Muted, Success, Warning, Destructive
+- **Composición modular**: 6 subcomponentes (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter)
+- **Grid automático en header**: Detecta `CardAction` y ajusta layout automáticamente con `has-data-[slot=card-action]:grid-cols-[1fr_auto]`
+- **Container queries**: CardHeader usa `@container/card-header` para layouts responsive
+- **Spacing flexible**: `gap-6` entre secciones principales, spacing auto en header/footer con bordes
+- **Bordes opcionales**: Clases `.border-b` y `.border-t` añaden separadores con padding automático
+- **Data slots**: Cada subcomponente tiene `data-slot` para targeting CSS específico
+- **Integración con otros componentes**: Background transparente para Calendar/otros componentes anidados
+
+## Importación
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardContent,
+  CardFooter,
+} from "@adamosuiteservices/ui/card";
+```
+
+## Uso Básico
+
+### Card Completa
+
+Estructura típica con todos los componentes.
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@adamosuiteservices/ui/card";
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content goes here.</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>;
+```
+
+### Card Simple (Solo Contenido)
+
+Para contenedores minimalistas sin header/footer.
+
+```tsx
+<Card className="w-[350px]">
+  <CardContent>
+    <h3 className="text-lg font-semibold">Simple Card</h3>
+    <p className="text-sm text-muted-foreground">
+      This is a simple card with just content.
+    </p>
+  </CardContent>
+</Card>
+```
+
+### Con Acción en Header
+
+Botón de acción que se alinea automáticamente a la derecha.
+
+```tsx
+import { MoreHorizontalIcon } from "lucide-react";
+
+<Card className="w-[400px]">
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+    <CardAction>
+      <Button variant="outline" size="sm">
+        <MoreHorizontalIcon />
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>{/* Notification items */}</CardContent>
+</Card>;
+```
+
+**Nota**: El grid se ajusta automáticamente cuando hay `CardAction`.
+
+## Componentes
+
+### Card
+
+Contenedor principal de la card.
+
+#### Props
+
+| Prop        | Tipo                                                                           | Default     | Descripción                |
+| ----------- | ------------------------------------------------------------------------------ | ----------- | -------------------------- |
+| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo |
+| `className` | `string`                                                                       | -           | Clases CSS adicionales     |
+| `children`  | `ReactNode`                                                                    | -           | Contenido de la card       |
+
+### CardHeader
+
+Sección de encabezado con grid automático para título, descripción y acción.
+
+#### Props
+
+| Prop        | Tipo        | Descripción                                                |
+| ----------- | ----------- | ---------------------------------------------------------- |
+| `className` | `string`    | Clases CSS adicionales                                     |
+| `children`  | `ReactNode` | Usualmente contiene CardTitle, CardDescription, CardAction |
+
+**Características**:
+
+- Grid automático: 2 filas (`grid-rows-[auto_auto]`)
+- Columnas adaptativas: 1 columna por defecto, 2 cuando hay `CardAction` (`has-data-[slot=card-action]:grid-cols-[1fr_auto]`)
+- Container query: `@container/card-header` para responsive interno
+- Padding inferior automático: `[.border-b]:pb-6` cuando se agrega clase `.border-b`
+
+### CardTitle
+
+Título principal de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Texto del título       |
+
+**Estilos default**: `leading-none font-semibold`
+
+### CardDescription
+
+Descripción o subtítulo de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Texto de descripción   |
+
+**Estilos default**: `text-muted-foreground text-sm`
+
+### CardAction
+
+Botón o acción alineada a la derecha del header.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Usualmente un Button   |
+
+**Posicionamiento**:
+
+- `col-start-2 row-span-2 row-start-1`: Ocupa columna 2, ambas filas
+- `self-start justify-self-end`: Alineado superior-derecha
+
+### CardContent
+
+Contenido principal de la card.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Contenido principal    |
+
+**Estilos default**: `px-6` (padding horizontal matching header/footer)
+
+### CardFooter
+
+Pie de la card para acciones o información adicional.
+
+#### Props
+
+| Prop        | Tipo        | Descripción            |
+| ----------- | ----------- | ---------------------- |
+| `className` | `string`    | Clases CSS adicionales |
+| `children`  | `ReactNode` | Usualmente botones     |
+
+**Estilos default**:
+
+- `flex items-center px-6`: Layout flex horizontal centrado
+- `[.border-t]:pt-6`: Padding superior automático con clase `.border-t`
+
+## Variantes
+
+### Default
+
+Card estándar con fondo blanco/oscuro según tema.
+
+```tsx
+<Card variant="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Default Card</CardTitle>
+    <CardDescription>Standard card appearance</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">Standard styling with default colors.</p>
+  </CardContent>
+</Card>
+```
+
+**Colores**: `bg-card text-card-foreground`
+
+### Primary
+
+Fondo azul claro para información importante.
+
+```tsx
+<Card variant="primary" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Important Information</CardTitle>
+    <CardDescription>Please read carefully</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      This is important information that requires attention.
+    </p>
+  </CardContent>
+  <CardFooter>
+    <Button>Acknowledge</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-primary-50` con iconos y texto ajustados
+
+### Success
+
+Fondo verde claro para confirmaciones exitosas.
+
+```tsx
+<Card variant="success" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Payment Successful</CardTitle>
+    <CardDescription>Your transaction completed</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">Your payment has been processed successfully.</p>
+  </CardContent>
+  <CardFooter>
+    <Button variant="outline">View Receipt</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-success-50` con texto `text-success/90`
+
+### Warning
+
+Fondo naranja/amarillo para advertencias.
+
+```tsx
+<Card variant="warning" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Storage Almost Full</CardTitle>
+    <CardDescription>You're running out of space</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">You've used 95% of storage. Consider upgrading.</p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Manage
+    </Button>
+    <Button size="sm">Upgrade</Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-warning-50` con texto `text-warning/90`
+
+### Destructive
+
+Fondo rojo claro para acciones destructivas o errores.
+
+```tsx
+<Card variant="destructive" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Delete Account</CardTitle>
+    <CardDescription>This action cannot be undone</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Permanently delete your account? All data will be lost.
+    </p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <Button variant="destructive" size="sm">
+      Delete
+    </Button>
+  </CardFooter>
+</Card>
+```
+
+**Colores**: `bg-destructive-50` con texto `text-destructive/90`
+
+### Muted
+
+Fondo gris claro para información secundaria.
+
+```tsx
+<Card variant="muted" className="w-full">
+  <CardHeader>
+    <CardTitle>Muted Card</CardTitle>
+    <CardDescription>Less prominent information</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Information that doesn't require immediate attention.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Colores**: `bg-muted` con texto `text-muted/90`
+
+**Colores**: `bg-muted` con texto `text-muted/90`
+
+## Patrones Avanzados
+
+### Formulario de Login
+
+Card completa con form, inputs y múltiples acciones.
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+import { Label } from "@adamosuiteservices/ui/label";
+
+<Card className="w-full max-w-sm">
+  <CardHeader>
+    <CardTitle>Login to your account</CardTitle>
+    <CardDescription>Enter your email below to login</CardDescription>
+    <CardAction>
+      <Button variant="link">Sign Up</Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>
+    <form>
+      <div className="flex flex-col gap-6">
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" required />
+        </div>
+        <div className="grid gap-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">Password</Label>
+            <a
+              href="#"
+              className="ml-auto text-sm underline-offset-4 hover:underline"
+            >
+              Forgot password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+      </div>
+    </form>
+  </CardContent>
+  <CardFooter className="flex-col gap-2">
+    <Button type="submit" className="w-full">
+      Login
+    </Button>
+    <Button variant="outline" className="w-full">
+      Login with Google
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Perfil de Usuario
+
+Card con avatar, stats y acciones múltiples.
+
+```tsx
+import { Avatar } from "@adamosuiteservices/ui/avatar";
+import {
+  HeartIcon,
+  StarIcon,
+  ShareIcon,
+  ExternalLinkIcon,
+  UserIcon,
+} from "lucide-react";
+
+<Card className="w-[380px]">
+  <CardHeader>
+    <div className="flex items-center space-x-4">
+      <Avatar className="h-12 w-12">
+        <UserIcon />
+      </Avatar>
+      <div>
+        <CardTitle>Sofia Davis</CardTitle>
+        <CardDescription>Product Designer</CardDescription>
+      </div>
+    </div>
+    <CardAction>
+      <Button variant="outline" size="sm">
+        Follow
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>
+    <div className="text-sm text-muted-foreground">
+      Passionate about creating beautiful user experiences.
+    </div>
+  </CardContent>
+  <CardFooter className="flex justify-between">
+    <div className="flex space-x-4 text-sm text-muted-foreground">
+      <div className="flex items-center">
+        <HeartIcon className="mr-1 h-3 w-3" />
+        256
+      </div>
+      <div className="flex items-center">
+        <StarIcon className="mr-1 h-3 w-3" />
+        98
+      </div>
+    </div>
+    <div className="flex space-x-1">
+      <Button variant="ghost" size="sm">
+        <ShareIcon />
+      </Button>
+      <Button variant="ghost" size="sm">
+        <ExternalLinkIcon />
+      </Button>
+    </div>
+  </CardFooter>
+</Card>;
+```
+
+### Card de Producto
+
+E-commerce card con imagen, badge, precio y acciones.
+
+```tsx
+import { Badge } from "@adamosuiteservices/ui/badge";
+import { StarIcon, CreditCardIcon, HeartIcon } from "lucide-react";
+
+<Card className="w-[350px]">
+  <CardHeader>
+    <div className="aspect-square rounded-md bg-muted"></div>
+  </CardHeader>
+  <CardContent>
+    <div className="space-y-2">
+      <Badge variant="secondary">Electronics</Badge>
+      <CardTitle>Wireless Headphones</CardTitle>
+      <CardDescription>
+        Premium wireless headphones with noise cancellation.
+      </CardDescription>
+      <div className="flex items-center justify-between">
+        <div className="text-2xl font-bold">$299.99</div>
+        <div className="flex items-center text-sm text-muted-foreground">
+          <StarIcon className="mr-1 h-4 w-4 fill-current" />
+          4.5 (128)
+        </div>
+      </div>
+    </div>
+  </CardContent>
+  <CardFooter className="flex gap-2">
+    <Button className="flex-1">
+      <CreditCardIcon />
+      Add to Cart
+    </Button>
+    <Button variant="outline" size="sm">
+      <HeartIcon />
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Stats Cards (Dashboard)
+
+Grid de cards para métricas con iconos y tendencias.
+
+```tsx
+import { DollarSignIcon, UserIcon, CreditCardIcon } from "lucide-react";
+
+<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+      <DollarSignIcon className="h-4 w-4 text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">$45,231.89</div>
+      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+      <UserIcon className="h-4 w-4 text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+2350</div>
+      <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Sales</CardTitle>
+      <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+12,234</div>
+      <p className="text-xs text-muted-foreground">+19% from last month</p>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+      <UserIcon className="h-4 w-4 text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">+573</div>
+      <p className="text-xs text-muted-foreground">+201 since last hour</p>
+    </CardContent>
+  </Card>
+</div>;
+```
+
+### Card de Notificaciones
+
+Lista de notificaciones con items y acción de marcar leído.
+
+```tsx
+import { BellIcon, MailIcon, CheckIcon } from "lucide-react";
+
+<Card className="w-[380px]">
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+  </CardHeader>
+  <CardContent className="grid gap-4">
+    <div className="flex items-center space-x-4 rounded-md border p-4">
+      <BellIcon className="h-4 w-4" />
+      <div className="flex-1 space-y-1">
+        <p className="text-sm font-medium leading-none">Push Notifications</p>
+        <p className="text-sm text-muted-foreground">
+          Send notifications to device.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-center space-x-4 rounded-md border p-4">
+      <MailIcon className="h-4 w-4" />
+      <div className="flex-1 space-y-1">
+        <p className="text-sm font-medium leading-none">Email Notifications</p>
+        <p className="text-sm text-muted-foreground">
+          Send notifications to email.
+        </p>
+      </div>
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button className="w-full">
+      <CheckIcon />
+      Mark all as read
+    </Button>
+  </CardFooter>
+</Card>;
+```
+
+### Con Separadores (Border)
+
+Usa `.border-b` y `.border-t` para separadores visuales.
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader className="border-b">
+    <CardTitle>Settings</CardTitle>
+    <CardDescription>Manage your preferences</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <div className="space-y-4">{/* Settings content */}</div>
+  </CardContent>
+  <CardFooter className="border-t">
+    <Button className="w-full">Save Changes</Button>
+  </CardFooter>
+</Card>
+```
+
+**Nota**: El padding se ajusta automáticamente (`pb-6` en header, `pt-6` en footer).
+
+### Grid de Variantes
+
+Mostrar todas las variantes en una vista comparativa.
+
+```tsx
+<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  <Card variant="default">
+    <CardHeader>
+      <CardTitle>Default</CardTitle>
+      <CardDescription>Standard card</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Standard styling.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="primary">
+    <CardHeader>
+      <CardTitle>Primary</CardTitle>
+      <CardDescription>Important info</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Highlight important content.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="success">
+    <CardHeader>
+      <CardTitle>Success</CardTitle>
+      <CardDescription>Success message</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Successful operations.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="warning">
+    <CardHeader>
+      <CardTitle>Warning</CardTitle>
+      <CardDescription>Caution message</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Important warnings.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="destructive">
+    <CardHeader>
+      <CardTitle>Destructive</CardTitle>
+      <CardDescription>Error or danger</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Errors or destructive actions.</p>
+    </CardContent>
+  </Card>
+
+  <Card variant="muted">
+    <CardHeader>
+      <CardTitle>Muted</CardTitle>
+      <CardDescription>Secondary info</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm">Less important information.</p>
+    </CardContent>
+  </Card>
+</div>
+```
+
+### Header con Layout Custom
+
+Override del grid para layouts específicos.
+
+```tsx
+{
+  /* Horizontal layout con custom spacing */
+}
+<Card className="w-[400px]">
+  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <CardTitle className="text-sm font-medium">Custom Layout</CardTitle>
+    <Badge>New</Badge>
+  </CardHeader>
+  <CardContent>
+    <div className="text-2xl font-bold">Content</div>
+  </CardContent>
+</Card>;
+```
+
+### Footer con Múltiples Acciones
+
+Diferentes arreglos de botones.
+
+```tsx
+{
+  /* Botones horizontales con gap */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Confirm Action</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Are you sure?</p>
+  </CardContent>
+  <CardFooter className="gap-2">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <Button size="sm">Confirm</Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* Botones apilados verticalmente */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Choose Option</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Select an action:</p>
+  </CardContent>
+  <CardFooter className="flex-col gap-2">
+    <Button className="w-full">Primary Action</Button>
+    <Button variant="outline" className="w-full">
+      Secondary
+    </Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* Acciones distribuidas */
+}
+<Card>
+  <CardHeader>
+    <CardTitle>Actions</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Multiple actions available.</p>
+  </CardContent>
+  <CardFooter className="justify-between">
+    <Button variant="outline" size="sm">
+      Cancel
+    </Button>
+    <div className="flex gap-2">
+      <Button variant="outline" size="sm">
+        Save Draft
+      </Button>
+      <Button size="sm">Publish</Button>
+    </div>
+  </CardFooter>
+</Card>;
+```
+
+## Casos de Uso Comunes
+
+### Authentication Forms
+
+```tsx
+<Card className="w-full max-w-md">
+  <CardHeader>
+    <CardTitle>Create Account</CardTitle>
+    <CardDescription>Sign up to get started</CardDescription>
+  </CardHeader>
+  <CardContent className="space-y-4">
+    <Input type="text" placeholder="Full Name" />
+    <Input type="email" placeholder="Email" />
+    <Input type="password" placeholder="Password" />
+  </CardContent>
+  <CardFooter>
+    <Button className="w-full">Create Account</Button>
+  </CardFooter>
+</Card>
+```
+
+### Dashboard Widgets
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Recent Activity</CardTitle>
+    <CardDescription>Your latest actions</CardDescription>
+    <CardAction>
+      <Button variant="ghost" size="sm">
+        View All
+      </Button>
+    </CardAction>
+  </CardHeader>
+  <CardContent>{/* Activity list */}</CardContent>
+</Card>
+```
+
+### Settings Panels
+
+```tsx
+<Card className="border-b">
+  <CardHeader>
+    <CardTitle>Account Settings</CardTitle>
+    <CardDescription>Manage your account preferences</CardDescription>
+  </CardHeader>
+  <CardContent className="space-y-4">{/* Settings options */}</CardContent>
+  <CardFooter className="border-t">
+    <Button>Save Changes</Button>
+  </CardFooter>
+</Card>
+```
+
+### Pricing Cards
+
+```tsx
+<div className="grid gap-4 md:grid-cols-3">
+  <Card>
+    <CardHeader>
+      <CardTitle>Basic</CardTitle>
+      <CardDescription>For individuals</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div className="text-3xl font-bold">$9/mo</div>
+      <ul className="mt-4 space-y-2 text-sm">
+        <li>✓ Feature 1</li>
+        <li>✓ Feature 2</li>
+      </ul>
+    </CardContent>
+    <CardFooter>
+      <Button variant="outline" className="w-full">
+        Choose Plan
+      </Button>
+    </CardFooter>
+  </Card>
+  {/* More pricing tiers */}
+</div>
+```
+
+### Status/Alert Cards
+
+```tsx
+<Card variant="warning">
+  <CardHeader>
+    <CardTitle>Action Required</CardTitle>
+    <CardDescription>Your subscription expires soon</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Renew your subscription to continue accessing premium features.
+    </p>
+  </CardContent>
+  <CardFooter>
+    <Button>Renew Now</Button>
+  </CardFooter>
+</Card>
+```
+
+## Mejores Prácticas
+
+### Usa Anchos Fijos para Consistencia
+
+```tsx
+{
+  /* ✅ Correcto - Ancho consistente */
+}
+<Card className="w-[350px]">
+  <CardContent>Consistent width</CardContent>
+</Card>;
+
+{
+  /* ✅ También correcto - max-w para responsive */
+}
+<Card className="w-full max-w-md">
+  <CardContent>Responsive width</CardContent>
+</Card>;
+
+{
+  /* ❌ Evitar - Sin ancho puede expandirse inesperadamente */
+}
+<Card>
+  <CardContent>No width constraint</CardContent>
+</Card>;
+```
+
+### Variantes Semánticas
+
+```tsx
+{/* ✅ Correcto - Variante según significado */}
+<Card variant="success">
+  <CardContent>Payment processed!</CardContent>
+</Card>
+
+<Card variant="destructive">
+  <CardContent>Error occurred</CardContent>
+</Card>
+
+{/* ❌ Incorrecto - Variante no semántica */}
+<Card variant="success">
+  <CardContent>Error occurred</CardContent>  {/* Confuso */}
+</Card>
+```
+
+### Estructura de Header Completa
+
+```tsx
+{
+  /* ✅ Correcto - Título + Descripción */
+}
+<CardHeader>
+  <CardTitle>Title</CardTitle>
+  <CardDescription>Description</CardDescription>
+</CardHeader>;
+
+{
+  /* ⚠️ Aceptable - Solo título */
+}
+<CardHeader>
+  <CardTitle>Title Only</CardTitle>
+</CardHeader>;
+
+{
+  /* ❌ Evitar - Solo descripción sin título */
+}
+<CardHeader>
+  <CardDescription>No title</CardDescription>
+</CardHeader>;
+```
+
+### CardAction Solo en CardHeader
+
+```tsx
+{
+  /* ✅ Correcto - CardAction dentro de CardHeader */
+}
+<CardHeader>
+  <CardTitle>Title</CardTitle>
+  <CardDescription>Description</CardDescription>
+  <CardAction>
+    <Button size="sm">Action</Button>
+  </CardAction>
+</CardHeader>;
+
+{
+  /* ❌ Incorrecto - CardAction fuera de CardHeader */
+}
+<Card>
+  <CardTitle>Title</CardTitle>
+  <CardAction>
+    <Button>Won't position correctly</Button>
+  </CardAction>
+</Card>;
+```
+
+### Footer Flex para Múltiples Botones
+
+```tsx
+{
+  /* ✅ Correcto - Gap entre botones */
+}
+<CardFooter className="gap-2">
+  <Button variant="outline">Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>;
+
+{
+  /* ✅ Correcto - Full width individual */
+}
+<CardFooter className="flex-col gap-2">
+  <Button className="w-full">Primary</Button>
+  <Button variant="outline" className="w-full">
+    Secondary
+  </Button>
+</CardFooter>;
+
+{
+  /* ❌ Evitar - Sin gap entre botones */
+}
+<CardFooter>
+  <Button>Button1</Button>
+  <Button>Button2</Button> {/* Se pegan */}
+</CardFooter>;
+```
+
+### Bordes Opcionales
+
+```tsx
+{
+  /* ✅ Correcto - Border con padding automático */
+}
+<Card>
+  <CardHeader className="border-b">
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter className="border-t">
+    <Button>Action</Button>
+  </CardFooter>
+</Card>;
+
+{
+  /* ❌ Evitar - Border sin la clase en header/footer */
+}
+<Card className="border-b">
+  {" "}
+  {/* No aplica padding correcto */}
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+</Card>;
+```
+
+### Grid en Stats Cards
+
+```tsx
+{
+  /* ✅ Correcto - Override spacing cuando es necesario */
+}
+<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+  <CardTitle className="text-sm font-medium">Stat</CardTitle>
+  <Icon className="h-4 w-4 text-muted-foreground" />
+</CardHeader>;
+
+{
+  /* ❌ Incorrecto - Usar grid default con layout horizontal */
+}
+<CardHeader className="flex-row">
+  {" "}
+  {/* Grid sigue activo */}
+  <CardTitle>Stat</CardTitle>
+  <Icon />
+</CardHeader>;
+```
+
+## Notas de Implementación
+
+- **Basado en CVA**: Usa `class-variance-authority` para variantes de color
+- **Data Slots**: Cada componente tiene `data-slot` para CSS targeting específico (`data-slot="card"`, `data-slot="card-header"`, etc.)
+- **Grid Automático**: CardHeader usa `has-data-[slot=card-action]:grid-cols-[1fr_auto]` para detectar CardAction y ajustar layout
+- **Container Queries**: CardHeader tiene `@container/card-header` para responsive interno (requiere Tailwind CSS container queries)
+- **Spacing Consistente**: `gap-6` entre secciones (header, content, footer), `px-6` horizontal en todas las secciones
+- **Padding Condicional**: `.border-b` y `.border-t` triggers automáticos para `pb-6` y `pt-6` respectivamente
+- **Variantes de Color**: Cada variante ajusta `bg-*-50` y `text-*-foreground`, con ajustes para iconos SVG (`[&>svg]:text-current`)
+- **Rounded Corners**: `rounded-xl` por defecto (12px)
+- **Shadow**: `shadow-sm` para elevación sutil
+- **Flex Column**: Card root usa `flex flex-col gap-6` para layout vertical automático
+
+## Accesibilidad
+
+### Estructura Semántica
+
+Cards usan `<div>` por defecto, pero considera añadir roles ARIA cuando sea apropiado.
+
+```tsx
+{
+  /* Para cards interactivas */
+}
+<Card role="article" aria-labelledby="card-title">
+  <CardHeader>
+    <CardTitle id="card-title">Article Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+</Card>;
+
+{
+  /* Para cards clickeables */
+}
+<Card
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={(e) => e.key === "Enter" && handleClick()}
+>
+  <CardContent>Clickable card</CardContent>
+</Card>;
+```
+
+### Labels para CardAction
+
+```tsx
+{
+  /* ✅ Correcto - aria-label descriptiva */
+}
+<CardAction>
+  <Button variant="outline" size="sm" aria-label="More options">
+    <MoreHorizontalIcon />
+  </Button>
+</CardAction>;
+
+{
+  /* ❌ Incorrecto - Sin label para icono solo */
+}
+<CardAction>
+  <Button variant="outline" size="sm">
+    <MoreHorizontalIcon />
+  </Button>
+</CardAction>;
+```
+
+### Formularios Accesibles
+
+```tsx
+{
+  /* ✅ Correcto - Labels asociadas */
+}
+<CardContent>
+  <div className="space-y-4">
+    <div className="grid gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input id="email" type="email" />
+    </div>
+  </div>
+</CardContent>;
+```
+
+### Focus Management
+
+Cards no son focuseables por defecto. Si necesitas interactividad:
+
+```tsx
+{
+  /* Para cards clickeables */
+}
+<Card
+  tabIndex={0}
+  role="button"
+  className="cursor-pointer hover:shadow-md transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  onClick={handleClick}
+>
+  <CardContent>Interactive card</CardContent>
+</Card>;
+```
+
+## Troubleshooting
+
+### CardAction No Se Alinea a la Derecha
+
+**Problema**: CardAction no aparece en la posición correcta.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - CardAction fuera de CardHeader
+<Card>
+  <CardTitle>Title</CardTitle>
+  <CardAction>
+    <Button>Action</Button>
+  </CardAction>
+</Card>
+
+// ✅ Solución - CardAction dentro de CardHeader
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+    <CardAction>
+      <Button>Action</Button>
+    </CardAction>
+  </CardHeader>
+</Card>
+```
+
+### Gap Excesivo entre Secciones
+
+**Problema**: Mucho espacio entre header/content/footer.
+
+**Solución**:
+
+```tsx
+// ✅ El gap-6 es intencional, pero puedes reducirlo
+<Card className="gap-4">  {/* Override gap-6 */}
+  <CardHeader>...</CardHeader>
+  <CardContent>...</CardContent>
+</Card>
+
+// O eliminar gap completamente
+<Card className="gap-0">
+  <CardHeader>...</CardHeader>
+  <CardContent>...</CardContent>
+</Card>
+```
+
+### Bordes No Muestran Padding
+
+**Problema**: `.border-b` o `.border-t` no agregan padding.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - Border en elemento incorrecto
+<Card className="border-b">
+  <CardHeader>...</CardHeader>
+</Card>
+
+// ✅ Solución - Border en CardHeader o CardFooter
+<Card>
+  <CardHeader className="border-b">...</CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter className="border-t">...</CardFooter>
+</Card>
+```
+
+### Variante No Cambia Color
+
+**Problema**: Variante primary/success/etc no aplica colores.
+
+**Solución**:
+
+```tsx
+// ✅ Verifica que la prop sea en Card root
+<Card variant="primary">  {/* Correcto */}
+  <CardHeader>...</CardHeader>
+</Card>
+
+// ❌ No funciona en subcomponentes
+<Card>
+  <CardHeader variant="primary">  {/* No existe esta prop */}
+    ...
+  </CardHeader>
+</Card>
+```
+
+### Stats Cards con Layout Incorrecto
+
+**Problema**: Íconos y títulos no se alinean horizontalmente.
+
+**Solución**:
+
+```tsx
+// ✅ Override grid con flex
+<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+  <CardTitle className="text-sm font-medium">Revenue</CardTitle>
+  <DollarSignIcon className="h-4 w-4" />
+</CardHeader>
+```
+
+### Footer Buttons No Se Distribuyen
+
+**Problema**: Botones en footer se pegan sin espacio.
+
+**Solución**:
+
+```tsx
+// ❌ Problema - Sin gap
+<CardFooter>
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+
+// ✅ Solución - Añade gap
+<CardFooter className="gap-2">
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+
+// ✅ O usa justify-between
+<CardFooter className="justify-between">
+  <Button>Cancel</Button>
+  <Button>Confirm</Button>
+</CardFooter>
+```
+
+## Referencias
+
+- **CVA (Class Variance Authority)**: https://cva.style/docs
+- **shadcn/ui Card**: https://ui.shadcn.com/docs/components/card
+- **Tailwind Container Queries**: https://tailwindcss.com/docs/hover-focus-and-other-states#container-queries
+- **ARIA Article Role**: https://www.w3.org/TR/wai-aria-1.2/#article