Envío programado.

<form class="ui-sample ui-form" data-scheduled-send="true"><h3>Programar envío</h3><label>Fecha <input class="input" type="date" value="2026-08-26"/></label><label>Hora <input class="input" type="time" value="09:30"/></label><label>Zona horaria <select class="input"><option>America/Santiago</option></select></label><div class="ui-actions"><button class="btn btn--primary" type="submit">Programar para el 26 de agosto</button><button class="btn btn--secondary" type="button">Cancelar</button></div></form>

<form class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-scheduled-send="true"><h3>Programar envío</h3><label>Fecha <input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="date" value="2026-08-26"/></label><label>Hora <input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="time" value="09:30"/></label><label>Zona horaria <select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2"><option>America/Santiago</option></select></label><div class="ui-actions"><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">Programar para el 26 de agosto</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">Cancelar</button></div></form>

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

export interface ScheduledSendTimeZone {
  /** Texto visible de la zona horaria («America/Santiago»). */
  label: string;
  /** Identificador IANA enviado; si falta, se envía el texto. */
  value?: string;
}

export interface ScheduledSendProps {
  title?: string;
  /** Etiqueta del campo de fecha. */
  dateLabel?: string;
  dateName?: string;
  /** Fecha inicial de un campo no controlado, en formato `AAAA-MM-DD`. */
  defaultDate?: string;
  /** Fecha de un campo controlado; va junto con `onDateChange`. */
  date?: string;
  onDateChange?: ChangeEventHandler<HTMLInputElement>;
  /** Primera fecha que se puede elegir, en formato `AAAA-MM-DD`; normalmente, hoy. */
  min?: string;
  /** Etiqueta del campo de hora. */
  timeLabel?: string;
  timeName?: string;
  /** Hora inicial de un campo no controlado, en formato `HH:MM`. */
  defaultTime?: string;
  /** Hora de un campo controlado; va junto con `onTimeChange`. */
  time?: string;
  onTimeChange?: ChangeEventHandler<HTMLInputElement>;
  /** Etiqueta del selector de zona horaria. */
  timeZoneLabel?: string;
  timeZoneName?: string;
  /** Zonas horarias del selector; vacío oculta el selector. */
  timeZones?: ScheduledSendTimeZone[];
  /** Zona elegida al inicio en un selector no controlado; sin valor queda la primera. */
  defaultTimeZone?: string;
  /** Zona de un selector controlado; va junto con `onTimeZoneChange`. */
  timeZone?: string;
  onTimeZoneChange?: ChangeEventHandler<HTMLSelectElement>;
  /** Texto del botón que programa el envío; conviene repetir la fecha elegida. */
  submitLabel?: string;
  /** Texto del botón que descarta la programación; vacío oculta el botón. */
  cancelLabel?: string;
  onCancel?: MouseEventHandler<HTMLButtonElement>;
  /** Destino del formulario; sin JavaScript, el envío va ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

const SCHEDULED_SEND_TIME_ZONES: ScheduledSendTimeZone[] = [{ label: "America/Santiago" }];

/**
 * Formulario para programar el envío de un mensaje en una fecha, hora y zona horaria, con botones para confirmar o cancelar.
 *
 * Cada campo es controlado sólo si llegan su valor y su `onChange` (`date` + `onDateChange`, `time` + `onTimeChange`, `timeZone` + `onTimeZoneChange`). Si sólo llega el `onChange`, el campo queda no controlado y el `onChange` igual se llama.
 *
 * @example <ScheduledSend defaultDate="2026-08-26" defaultTime="09:30" min="2026-08-25" submitLabel="Programar para el 26 de agosto" onCancel={cerrar} />
 * @example <ScheduledSend date={fecha} onDateChange={cambiarFecha} time={hora} onTimeChange={cambiarHora} onSubmit={programar} />
 */
export function ScheduledSend({
  title = "Programar envío",
  dateLabel = "Fecha",
  dateName,
  defaultDate = "2026-08-26",
  date,
  onDateChange,
  min,
  timeLabel = "Hora",
  timeName,
  defaultTime = "09:30",
  time,
  onTimeChange,
  timeZoneLabel = "Zona horaria",
  timeZoneName,
  timeZones = SCHEDULED_SEND_TIME_ZONES,
  defaultTimeZone,
  timeZone,
  onTimeZoneChange,
  submitLabel = "Programar para el 26 de agosto",
  cancelLabel = "Cancelar",
  onCancel,
  action,
  method,
  onSubmit,
  className,
}: ScheduledSendProps) {
  const fecha = date !== undefined && onDateChange !== undefined ? { value: date } : { defaultValue: date ?? defaultDate };
  const hora = time !== undefined && onTimeChange !== undefined ? { value: time } : { defaultValue: time ?? defaultTime };
  const zona = timeZone !== undefined && onTimeZoneChange !== undefined ? { value: timeZone } : { defaultValue: timeZone ?? defaultTimeZone };
  return (
    <form className={["ui-form", className].filter(Boolean).join(" ")} data-scheduled-send action={action} method={method} onSubmit={onSubmit}>
      <h3>{title}</h3>
      <label>
        {`${dateLabel} `}
        <input className="input" type="date" name={dateName} min={min} onChange={onDateChange} {...fecha} />
      </label>
      <label>
        {`${timeLabel} `}
        <input className="input" type="time" name={timeName} onChange={onTimeChange} {...hora} />
      </label>
      {timeZones.length ? (
        <label>
          {`${timeZoneLabel} `}
          <select className="input" name={timeZoneName} onChange={onTimeZoneChange} {...zona}>
            {timeZones.map((zonaHoraria, i) => (
              <option key={zonaHoraria.value ?? `${i}-${zonaHoraria.label}`} value={zonaHoraria.value}>
                {zonaHoraria.label}
              </option>
            ))}
          </select>
        </label>
      ) : null}
      <div className="ui-actions">
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {cancelLabel ? <button className="btn btn--secondary" type="button" onClick={onCancel}>{cancelLabel}</button> : null}
      </div>
    </form>
  );
}