Componer mensaje.

<form class="ui-sample ui-service" data-compose-message><header><strong>Nuevo mensaje</strong><button class="btn btn--icon" type="button" aria-label="Cerrar borrador">×</button></header><label>Para <input class="input" type="email" value="equipo@example.cl"></label><label>Asunto <input class="input" value="Revisión del documento"></label><label>Mensaje <textarea class="input" rows="4"></textarea></label><footer class="ui-actions"><button class="btn btn--primary" type="submit">Enviar</button><button class="btn btn--secondary" type="button">Programar</button><span>Borrador guardado 18:24 CLT</span></footer></form>

<form class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-compose-message><header class="flex flex-wrap items-center justify-between gap-3"><strong>Nuevo mensaje</strong><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Cerrar borrador">×</button></header><label>Para <input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="email" value="equipo@example.cl"></label><label>Asunto <input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" value="Revisión del documento"></label><label>Mensaje <textarea class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" rows="4"></textarea></label><footer class="ui-actions flex flex-wrap items-center justify-between gap-3"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Enviar</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Programar</button><span>Borrador guardado 18:24 CLT</span></footer></form>

import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from "react";

export interface ComposeMessageProps {
  title?: string;
  /** Nombre accesible del botón que cierra el borrador. */
  closeLabel?: string;
  onClose?: MouseEventHandler<HTMLButtonElement>;
  /** Etiqueta del campo del destinatario. */
  toLabel?: string;
  /** Nombre del parámetro enviado con el destinatario; sin él, el formulario nativo no envía este campo. */
  toName?: string;
  /** Destinatario inicial del campo «Para» no controlado. */
  defaultTo?: string;
  /** Destinatario controlado; va junto con `onToChange`. */
  to?: string;
  onToChange?: ChangeEventHandler<HTMLInputElement>;
  /** Etiqueta del campo del asunto. */
  subjectLabel?: string;
  /** Nombre del parámetro enviado con el asunto; sin él, el formulario nativo no envía este campo. */
  subjectName?: string;
  /** Asunto inicial de un campo no controlado. */
  defaultSubject?: string;
  /** Asunto controlado; va junto con `onSubjectChange`. */
  subject?: string;
  onSubjectChange?: ChangeEventHandler<HTMLInputElement>;
  /** Etiqueta del cuerpo del mensaje. */
  messageLabel?: string;
  /** Nombre del parámetro enviado con el cuerpo; sin él, el formulario nativo no envía este campo. */
  messageName?: string;
  /** Texto inicial del cuerpo no controlado. */
  defaultMessage?: string;
  /** Cuerpo controlado; va junto con `onMessageChange`. */
  message?: string;
  onMessageChange?: ChangeEventHandler<HTMLTextAreaElement>;
  /** Alto visible del cuerpo, en líneas. */
  messageRows?: number;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del botón para programar el envío; vacío lo oculta. */
  scheduleLabel?: string;
  onSchedule?: MouseEventHandler<HTMLButtonElement>;
  /** Estado del borrador junto a los botones («Borrador guardado 18:24 CLT»); vacío lo oculta. */
  status?: string;
  /** URL que recibe el formulario nativo (atributo `action`). */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario para redactar un mensaje con destinatario, asunto y cuerpo, enviarlo o programar su envío, con el estado del borrador; se usa en bandejas de correo y en la mensajería de un servicio.
 *
 * Es un `<form>` nativo: para enviarlo sin JavaScript, pasa `action`, `method` y los `name` de cada campo. Cada campo es controlado sólo si llegan su valor y su `onChange` (`to` + `onToChange`, `subject` + `onSubjectChange`, `message` + `onMessageChange`).
 *
 * @example <ComposeMessage defaultTo="equipo@example.cl" defaultSubject="Revisión del documento" defaultMessage="Adjunto la versión corregida." toName="to" subjectName="subject" messageName="body" action="/mensajes" method="post" />
 * @example <ComposeMessage message={cuerpo} onMessageChange={cambiarCuerpo} status="Guardando borrador" onSubmit={enviar} onClose={cerrar} />
 */
export function ComposeMessage({
  title = "Nuevo mensaje",
  closeLabel = "Cerrar borrador",
  onClose,
  toLabel = "Para",
  toName,
  defaultTo = "equipo@example.cl",
  to,
  onToChange,
  subjectLabel = "Asunto",
  subjectName,
  defaultSubject = "Revisión del documento",
  subject,
  onSubjectChange,
  messageLabel = "Mensaje",
  messageName,
  defaultMessage = "",
  message,
  onMessageChange,
  messageRows = 4,
  submitLabel = "Enviar",
  scheduleLabel = "Programar",
  onSchedule,
  status = "Borrador guardado 18:24 CLT",
  action,
  method,
  onSubmit,
  className,
}: ComposeMessageProps) {
  const para = to !== undefined && onToChange !== undefined ? { value: to, onChange: onToChange } : { defaultValue: to ?? defaultTo };
  const asunto = subject !== undefined && onSubjectChange !== undefined ? { value: subject, onChange: onSubjectChange } : { defaultValue: subject ?? defaultSubject };
  const cuerpo = message !== undefined && onMessageChange !== undefined ? { value: message, onChange: onMessageChange } : { defaultValue: message ?? defaultMessage };
  return (
    <form className={["ui-service", className].filter(Boolean).join(" ")} data-compose-message action={action} method={method} onSubmit={onSubmit}>
      <header>
        <strong>{title}</strong>
        <button className="btn btn--icon" type="button" aria-label={closeLabel} onClick={onClose}>×</button>
      </header>
      <label>
        {`${toLabel} `}
        <input className="input" type="email" name={toName} {...para} />
      </label>
      <label>
        {`${subjectLabel} `}
        <input className="input" name={subjectName} {...asunto} />
      </label>
      <label>
        {`${messageLabel} `}
        <textarea className="input" rows={messageRows} name={messageName} {...cuerpo} />
      </label>
      <footer className="ui-actions">
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {scheduleLabel ? <button className="btn btn--secondary" type="button" onClick={onSchedule}>{scheduleLabel}</button> : null}
        {status ? <span>{status}</span> : null}
      </footer>
    </form>
  );
}