Card

export function CardVariantes() {
  return (
    <Row>
      {CARD_VARIANTS.map((v) => (
        <Card key={v} variant={v} padding="sm" className="w-32 text-center">
          <p className="text-xs font-medium text-content">{v}</p>
        </Card>
      ))}
    </Row>
  )
}

De specimens/display.tsx · CardVariantes: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function CardPaddings() {
  return (
    <Row>
      {CARD_PADDINGS.map((p) => (
        <Card key={p} variant="outline" padding={p} className="w-28 text-center">
          <p className="text-xs text-content/70">padding {p}</p>
        </Card>
      ))}
    </Row>
  )
}

De specimens/display.tsx · CardPaddings: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

export function CardComposicion() {
  return (
    <Card variant="elevated" padding="md" className="w-full max-w-sm">
      <CardHeader action={<Badge color="success" size="sm">Confirmado</Badge>}>
        <CardTitle>Salón Los Álamos</CardTitle>
        <CardDescription>Sábado 21:00 · 180 invitados</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-content/70">
          Salón principal + terraza. Catering incluido, DJ a cargo del cliente.
        </p>
      </CardContent>
      <CardFooter>
        <CardAction>
          <Button variant="ghost" size="sm">
            Ver ficha
          </Button>
        </CardAction>
      </CardFooter>
    </Card>
  )
}

De specimens/display.tsx · CardComposicion: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.