componente · @solu30/ui-kit/input

OptionCard

Tarjeta de opción con ícono, título y descripción, que se marca al elegirla.

10 sitios de import en 5 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
gestorsalon
luigi
prepchat
zentrya

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { OptionCard, OptionCardGroup, OptionCardItem } from '@solu30/ui-kit/input'

<OptionCard
  title="Con servicio de mozos"
  description="Ocho mozos para 120 invitados."
  active={conMozos}
  onClick={() => setConMozos(true)}
/>

Anatomía

Las partes que componen OptionCard se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

OptionCard
├── OptionCardGroup
└── OptionCardItem

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
active	opcional	`boolean`	—
onClick	opcional	`() => void`	—
title	sí	`string`	—
description	opcional	`ReactNode`	—
icon	opcional	`ReactNode`	—
disabled	opcional	`boolean`	—
className	opcional	`string`	—

Suelta

Cuando cada tarjeta controla su propio estado activo por fuera de un grupo — selección múltiple, o un toggle individual que no compite con otras.

Cargando el espécimen…

export function OptionCardSuelta() {
  const [suelta, setSuelta] = useState(true)

  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs text-content/50">
        OptionCard — la misma tarjeta sin grupo: active + onClick, y el estado disabled
      </span>
      <div className="grid gap-2 sm:grid-cols-2">
        <OptionCard
          title="Con servicio de mozos"
          description="Ocho mozos para 120 invitados."
          icon={<IconTeam className="h-5 w-5" />}
          active={suelta}
          onClick={() => setSuelta(true)}
        />
        <OptionCard
          title="Sin servicio"
          description="El salón se entrega y el catering lo trae el cliente."
          icon={<IconGrid className="h-5 w-5" />}
          active={!suelta}
          onClick={() => setSuelta(false)}
        />
        <OptionCard
          title="Barra de tragos"
          description="No disponible para este salón."
          icon={<IconUser className="h-5 w-5" />}
          disabled
        />
      </div>
    </div>
  )
}

De specimens/input.tsx · OptionCardSuelta: 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.

Ejemplo del paquete

// Tarjeta elegible suelta: el estado lo lleva el consumidor.
<OptionCard active={plan === 'mensual'} onClick={() => setPlan('mensual')}
  title="Mensual" description="Se renueva cada 30 días" icon={<CalendarDays className="size-5" />} />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.