Destinatarios.

<div class="ui-sample ui-form" data-recipient-input><label for="recipients-0">Destinatarios</label><ul><li>martin@example.cl <button class="btn btn--icon" type="button" aria-label="Quitar martin@example.cl">×</button></li></ul><input class="input" id="recipients-0" type="email" placeholder="Agregar destinatario"><small>Separa cada dirección con Enter.</small></div>

<div class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950" data-recipient-input><label for="recipients-0">Destinatarios</label><ul class="grid gap-2"><li>martin@example.cl <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="Quitar martin@example.cl">×</button></li></ul><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="recipients-0" type="email" placeholder="Agregar destinatario"><small class="text-sm text-slate-600">Separa cada dirección con Enter.</small></div>

import type { ChangeEventHandler, KeyboardEventHandler } from "react";

export interface RecipientInputRecipient {
  /** Dirección de correo del destinatario. */
  email: string;
}

export interface RecipientInputProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Destinatarios ya agregados; sin destinatarios no se muestra la lista. */
  recipients?: RecipientInputRecipient[];
  /** Verbo del botón que quita un destinatario; el nombre accesible es `${removeLabel} ${recipient.email}`. */
  removeLabel?: string;
  /** Se llama al pulsar la equis de un destinatario. */
  onRemove?: (recipient: RecipientInputRecipient, index: number) => void;
  /** Id del campo para agregar. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  placeholder?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Para agregar el destinatario al presionar Enter. */
  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
  /** Texto bajo el campo: instrucción o cantidad de destinatarios; vacío lo oculta. */
  help?: string;
  className?: string;
}

/**
 * Campo de destinatarios de correo con las direcciones agregadas, cada una con un botón para quitarla, y una entrada para agregar otra; se usa al redactar un mensaje o al invitar a varias personas.
 *
 * Quien lo usa mantiene la lista: agrega en `onKeyDown` (Enter) y quita en `onRemove`.
 *
 * @example <RecipientInput id="destinatarios" recipients={[{ email: "martin@example.cl" }, { email: "equipo@example.cl" }]} help="2 destinatarios" onRemove={quitar} onKeyDown={agregarConEnter} />
 */
export function RecipientInput({
  label = "Destinatarios",
  recipients = [{ email: "martin@example.cl" }],
  removeLabel = "Quitar",
  onRemove,
  id = "recipients-0",
  name,
  placeholder = "Agregar destinatario",
  defaultValue,
  value,
  onChange,
  onKeyDown,
  help = "Separa cada dirección con Enter.",
  className,
}: RecipientInputProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-form", className].filter(Boolean).join(" ")} data-recipient-input>
      <label htmlFor={id}>{label}</label>
      {recipients.length ? (
        <ul>
          {recipients.map((recipient, i) => (
            <li key={`${i}-${recipient.email}`}>
              {`${recipient.email} `}
              <button className="btn btn--icon" type="button" aria-label={`${removeLabel} ${recipient.email}`} onClick={onRemove ? () => onRemove(recipient, i) : undefined}>×</button>
            </li>
          ))}
        </ul>
      ) : null}
      <input
        className="input"
        id={id}
        name={name}
        type="email"
        placeholder={placeholder}
        onKeyDown={onKeyDown}
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      {help ? <small>{help}</small> : null}
    </div>
  );
}