StatusPanel
Pantalla de resultado de un proceso: en curso, hecho, aviso o error.
Usar
import { StatusPanel } from "@unozero-ai/ui/react";
<StatusPanel></StatusPanel>Cuándo usarlo
En un producto, StatusPanel es la página entera a la que se llega de rebote cuando termina un proceso que el usuario no controla: la vuelta de un pago con Stripe o Wompi, la de una autorización con Google o Meta. Ocupa toda la pantalla (min-height: 100dvh, fondo y 16 px de aire en el propio elemento) con una tarjeta centrada, y su título es el encabezado de nivel 1. Muchos huéspedes solo verán esta pantalla del producto, por eso todas cuentan el resultado igual. En las demos de abajo va con className="min-h-0 bg-transparent p-0" y level={3} para que quepa en el recuadro y no rompa el esquema de esta página; en tu página, quita las dos cosas. Para una lista sin datos usa EmptyState.
Hecho
tone="success". El título va en heading (en el kit React era title) y dice el resultado, message lo concreta con el importe o la reserva y footnote cuenta qué pasa después. Los botones van en el slot actions, no en una prop. Una sola acción rellena: la que el usuario quiere hacer ahora (la Regla de una Sola Decisión).
En curso
tone="pending", el tono por defecto, no es un final: muestra un Spinner y oculta las acciones aunque las pases, para que nadie salga a mitad de un canje de código. Esta demo pone un botón en actions y no se ve.
Error
Di qué falló y qué no pasó («no se hizo ningún cargo»). Si el mensaje lleva marcado, como el importe en negrita, va como contenido en vez de message. La salida principal es reintentar; la alternativa va en outline. El icono cambia de forma con cada tono, así que el estado se lee sin depender del color (la Regla del Tenant).
Aviso
Para un final que no es un error del usuario ni del sistema: un enlace caducado, un permiso a medias.
Del proceso al resultado
Es el mismo elemento de principio a fin: cambia tone, heading y message cuando llegue la respuesta. El icono nuevo entra con un fundido y el título es una región viva, así que el lector de pantalla anuncia el cambio sin que el usuario haga nada. Las acciones aparecen solas al dejar pending.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).