componente · @solu30/ui-kit/display

Alerts

Los cinco colores de Alert ya fijados como atajos: Alerts.Info, Alerts.Success, Alerts.Error, Alerts.Warning y Alerts.Special.

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

luigi

El componente, montado

Cargando el espécimen…

export function AlertMatrix() {
  return (
    <Stage label="Alert · 4 colores semánticos + Alerts.* + Alert crudo (lg, sin ícono, con onClose)" tall wide>
      <div className="flex w-full flex-col gap-2.5">
        <Alert color="info" size="sm" title="Información" showDefaultIcon>
          El preset se importa una sola vez, en el globals.css del host.
        </Alert>
        <Alert color="success" size="sm" title="Confirmado" showDefaultIcon>
          La reserva quedó registrada y el salón se marcó como ocupado.
        </Alert>
        <Alert color="warning" size="sm" title="Revisar" showDefaultIcon>
          Hay dos eventos superpuestos en la misma franja horaria.
        </Alert>
        <Alert color="error" size="sm" title="No se pudo guardar" showDefaultIcon>
          El período de facturación ya está cerrado.
        </Alert>
        <Alerts.Info title="Pronóstico">
          Sábado con 60% de probabilidad de lluvia — avisale al cliente de la carpa.
        </Alerts.Info>
        <Alerts.Success title="Reserva #482">Seña recibida, cupo confirmado para 180 invitados.</Alerts.Success>
        <Alerts.Warning title="Disponibilidad">
          Quedan 2 lanchas para el charter del domingo — no reservar una tercera salida.
        </Alerts.Warning>
        <Alerts.Error title="Cobro rechazado">La tarjeta terminada en 4021 rechazó la seña de $45.000.</Alerts.Error>
        <Alerts.Special title="Beta">El heladero ya puede subir fotos del local desde WhatsApp.</Alerts.Special>
        <Alert color="info" size="lg" showDefaultIcon={false} onClose={() => {}}>
          Sin ícono default, tamaño lg, con botón de cerrar.
        </Alert>
      </div>
    </Stage>
  )
}

De specimens/feedback.tsx · AlertMatrix: 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.

Cómo se usa

import { Alerts } from '@solu30/ui-kit/display'

Props

El catálogo no extrajo props para este símbolo, y eso admite dos lecturas: que el tipo no declare ninguna propia —heredarlas de un elemento HTML es lo normal en las piezas de composición— o que su interfaz se llame distinto y el extractor no la siga. Los filtros de columna son el segundo caso: declaran cuatro props requeridas en SelectFilterProps.

Ejemplo del paquete

// Los atajos de <Alert>: mismo componente, el color ya puesto.
<Alerts.Success title="Guardado">Los cambios ya están aplicados.</Alerts.Success>
<Alerts.Error title="No se pudo guardar">Revisá la conexión.</Alerts.Error>

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.