DialogClose

export function DialogCompositionMatrix({ abiertoAlMontar = false }: { abiertoAlMontar?: boolean }) {
  const [open, setOpen] = useState(abiertoAlMontar)

  return (
    <Stage label="Dialog composable · Trigger + Content + Close, y el panel replicado adentro" tall wide>
      <div className="flex flex-col items-center gap-3">
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:justify-center">
          <Dialog open={open} onOpenChange={setOpen}>
            {/* `asChild` clona el hijo en vez de envolverlo en otro botón: sin
                esto quedan dos `<button>` anidados, que es HTML inválido. Es la
                forma en que los consumidores lo usan de verdad —GestorSalon tiene
                70 `TooltipTrigger asChild`— así que el espécimen la muestra. Que
                el botón salga sin estilo era culpa de `TriggerButton`, que pisaba
                su propio className con el spread; ver la nota allá arriba. */}
            <DialogTrigger asChild>
              <TriggerButton>Ver el detalle de la reserva</TriggerButton>
            </DialogTrigger>

            <DialogContent>
              <DialogHeader>
                <DialogTitle>Reserva #482 · Salón Jardín</DialogTitle>
                <DialogDescription>Sábado 22, de 21:00 a 04:00. 120 invitados confirmados.</DialogDescription>
              </DialogHeader>
              <ul className="flex flex-col gap-1.5 px-6 py-2 text-sm text-content/70">
                <li>Seña acreditada — 30%, el 12 de agosto</li>
                <li>Menú: cada invitado elige por el portal</li>
                <li>Servicio de mozos incluido</li>
              </ul>
              <DialogFooter>
                {/* `DialogClose` no necesita saber nada del estado de acá: cierra
                    por el contexto de Radix. Es la pieza que esta ficha muestra. */}
                <DialogClose asChild>
                  <TriggerButton>Cerrar</TriggerButton>
                </DialogClose>
                <DialogClose asChild>
                  <TriggerButton tone="danger">Cancelar la reserva</TriggerButton>
                </DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <ReplicaContenida>
            <div className="flex flex-col gap-2 p-4">
              <p className="text-sm font-medium text-content">Reserva #482 · Salón Jardín</p>
              <p className="text-xs text-content/60">
                Sábado 22, de 21:00 a 04:00. 120 invitados confirmados.
              </p>
              <ul className="flex flex-col gap-1 border-t border-content/10 pt-2 text-xs text-content/70">
                <li>Seña acreditada — 30%, el 12 de agosto</li>
                <li>Menú: cada invitado elige por el portal</li>
                <li>Servicio de mozos incluido</li>
              </ul>
              <div className="flex justify-end gap-2 border-t border-content/10 pt-2">
                <span className="rounded-md border border-content/10 bg-container px-3 py-1.5 text-xs text-content">
                  Cerrar
                </span>
                <span className="rounded-md border border-red/30 bg-red/10 px-3 py-1.5 text-xs text-red">
                  Cancelar la reserva
                </span>
              </div>
            </div>
          </ReplicaContenida>
        </div>
        <p className="max-w-[520px] text-center text-[11px] text-content/50">
          El componente REAL es el de la izquierda y abre de verdad: su panel sale por un portal a
        document.body y se dibuja sobre la página, no adentro de este recuadro. A la derecha, la
        misma forma replicada acá para poder verla sin tapar la ficha. El botón es DialogTrigger;
          los dos del pie del panel, DialogClose.
        </p>
      </div>
    </Stage>
  )
}

De specimens/feedback.tsx · DialogCompositionMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.