Diálogo.

<div class="ui-sample"><button class="btn btn--secondary" type="button" data-dialog-open="dialog-0">Publicar</button><dialog class="ui-dialog" id="dialog-0" aria-labelledby="dialog-title-0" open=""><header><h3 id="dialog-title-0">Publicar versión</h3><button class="btn btn--icon" type="button" data-dialog-close="true" aria-label="Cerrar diálogo">×</button></header><p>La versión quedará visible para los consumidores autorizados.</p><footer><button class="btn btn--primary" type="button">Publicar versión</button><button class="btn btn--secondary" type="button" data-dialog-close="true">Cancelar</button></footer></dialog></div>

<div class="ui-sample border border-slate-300 bg-white p-4 text-slate-950"><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" data-dialog-open="dialog-0">Publicar</button><dialog class="ui-dialog" id="dialog-0" aria-labelledby="dialog-title-0" open=""><header class="flex flex-wrap items-center justify-between gap-3"><h3 id="dialog-title-0">Publicar versión</h3><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" data-dialog-close="true" aria-label="Cerrar diálogo">×</button></header><p>La versión quedará visible para los consumidores autorizados.</p><footer class="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="button">Publicar versión</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" data-dialog-close="true">Cancelar</button></footer></dialog></div>

import type { MouseEventHandler, ReactNode } from "react";

export interface DialogProps {
  /** Texto del botón que abre el diálogo: nombra la acción que el diálogo confirma («Publicar»), no el diálogo. */
  triggerLabel?: string;
  /** Id del `<dialog>`; el título usa `${id}-titulo` salvo que pases `titleId`. */
  id?: string;
  titleId?: string;
  /** Muestra el diálogo abierto (atributo nativo `open`). */
  open?: boolean;
  title?: string;
  /** Cuerpo del diálogo; un texto se envuelve en un párrafo. */
  children?: ReactNode;
  confirmLabel?: string;
  /** `destructive` para acciones que borran o descartan. */
  confirmTone?: "primary" | "destructive";
  cancelLabel?: string;
  closeLabel?: string;
  onOpen?: MouseEventHandler<HTMLButtonElement>;
  onConfirm?: MouseEventHandler<HTMLButtonElement>;
  /** Se llama al cerrar con la equis o con el botón de cancelar. */
  onClose?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Diálogo modal de confirmación con botón que lo abre, título, texto, acción principal y cancelar.
 *
 * Usa el elemento nativo `<dialog>`: `open` lo muestra sin JavaScript. Para acciones que borran, `confirmTone="destructive"`.
 *
 * @example <Dialog id="publicar" triggerLabel="Publicar" open={abierto} onOpen={abrir} title="Publicar versión" confirmLabel="Publicar versión" onConfirm={publicar} onClose={cerrar}>La versión quedará visible.</Dialog>
 */
export function Dialog({
  triggerLabel = "Publicar",
  id = "dialog-0",
  titleId,
  open = true,
  title = "Publicar versión",
  children = "La versión quedará visible para los consumidores autorizados.",
  confirmLabel = "Publicar versión",
  confirmTone = "primary",
  cancelLabel = "Cancelar",
  closeLabel = "Cerrar diálogo",
  onOpen,
  onConfirm,
  onClose,
  className,
}: DialogProps) {
  const tituloId = titleId ?? (id === "dialog-0" ? "dialog-title-0" : `${id}-titulo`);
  return (
    <div className={className}>
      <button className="btn btn--secondary" type="button" data-dialog-open={id} onClick={onOpen}>{triggerLabel}</button>
      <dialog className="ui-dialog" id={id} aria-labelledby={tituloId} open={open}>
        <header>
          <h3 id={tituloId}>{title}</h3>
          <button className="btn btn--icon" type="button" data-dialog-close aria-label={closeLabel} onClick={onClose}>×</button>
        </header>
        {typeof children === "string" ? <p>{children}</p> : children}
        <footer>
          <button className={`btn btn--${confirmTone}`} type="button" onClick={onConfirm}>{confirmLabel}</button>
          <button className="btn btn--secondary" type="button" data-dialog-close onClick={onClose}>{cancelLabel}</button>
        </footer>
      </dialog>
    </div>
  );
}