Estado en línea.

<p class="ui-sample" data-inline-status="true" data-tone="success" role="status"><span aria-hidden="true">✓</span> Todos los cambios están guardados</p>

<p class="ui-sample border border-slate-300 bg-white p-4 text-slate-950" data-inline-status="true" data-tone="success" role="status"><span aria-hidden="true">✓</span> Todos los cambios están guardados</p>

/** Estado que se informa; define el símbolo que acompaña al texto. */
export type InlineStatusTone = "info" | "success" | "warning" | "error";

export interface InlineStatusProps {
  /** `success` (✓), `warning` (△), `error` (!) o `info` (i). */
  tone?: InlineStatusTone;
  /** Texto del estado; debe decirlo completo, sin depender del símbolo. */
  label?: string;
  className?: string;
}

const INLINE_STATUS_SYMBOLS: Record<InlineStatusTone, string> = {
  info: "i",
  success: "✓",
  warning: "△",
  error: "!",
};

/**
 * Estado en una línea junto al contenido que describe, como el guardado de un documento o la sincronización de un formulario.
 *
 * Usa `role="status"`. El símbolo cambia con el tono y va con `aria-hidden`: el texto dice el estado. El tono queda en `data-tone`.
 *
 * @example <InlineStatus tone="success" label="Todos los cambios están guardados" />
 * @example <InlineStatus tone="warning" label="Guardado localmente; falta sincronizar" />
 */
export function InlineStatus({ tone = "success", label = "Todos los cambios están guardados", className }: InlineStatusProps) {
  return (
    <p className={className} data-inline-status data-tone={tone} role="status">
      <span aria-hidden="true">{INLINE_STATUS_SYMBOLS[tone]}</span>{label ? ` ${label}` : null}
    </p>
  );
}