ConfirmDialog

export function ConfirmDialogMatrix() {
  const [activeScenario, setActiveScenario] = useState<ConfirmScenarioKey | null>(null)
  const [loading, setLoading] = useState(false)
  const focus = useFocusReturnCheck()

  const close = () => {
    setActiveScenario(null)
    focus.notifyClosed()
  }

  const scenario = activeScenario ? CONFIRM_SCENARIOS[activeScenario] : null

  return (
    <Stage label="ConfirmDialog · 3 variantes, una instancia" tall wide>
      <div className="flex flex-col items-center gap-3">
        <Row>
          {CONFIRM_ORDER.map((key) => (
            <TriggerButton
              key={key}
              tone={key === 'danger' ? 'danger' : 'default'}
              onClick={(e) => focus.openFrom(e, () => setActiveScenario(key))}
            >
              {CONFIRM_SCENARIOS[key].trigger}
            </TriggerButton>
          ))}
        </Row>
        <FocusReturnNote result={focus.result} />
      </div>

      {/* La misma razón que en DialogCompositionMatrix y SheetCompositionMatrix:
          `ConfirmDialog` sale por un portal y su panel NO se dibuja adentro del
          escenario. 217 sitios de import y lo único que la ficha mostraba sin
          hacer clic eran tres botones — o sea el disparador, no la pieza. La
          réplica deja ver la forma del panel de una; el componente real sigue
          al lado y sigue abriendo de verdad. Rotulada, como manda el contrato
          de `ReplicaContenida`: una réplica que se lee como la pieza real es
          peor que no tenerla. */}
      <ReplicaContenida nota="réplica del panel danger, no el portal">
        <div className="flex flex-col gap-3 p-4">
          <p className="text-sm font-semibold text-content">{CONFIRM_SCENARIOS.danger.title}</p>
          <p className="text-xs text-content/70">{CONFIRM_SCENARIOS.danger.description}</p>
          <div className="flex justify-end gap-2">
            <span className="rounded-md border border-content/10 bg-container px-3 py-1.5 text-xs text-content">
              Cancelar
            </span>
            <span className="rounded-md border border-transparent bg-red/80 px-3 py-1.5 text-xs font-medium text-white">
              {CONFIRM_SCENARIOS.danger.confirmLabel}
            </span>
          </div>
        </div>
      </ReplicaContenida>

      <ConfirmDialog
        isOpen={activeScenario !== null}
        onCancel={close}
        onConfirm={() => {
          setLoading(true)
          setTimeout(() => {
            setLoading(false)
            close()
          }, 700)
        }}
        variant={activeScenario ?? 'default'}
        title={scenario?.title ?? ''}
        description={scenario?.description}
        confirmLabel={scenario?.confirmLabel}
        cancelLabel="Cancelar"
        loading={loading}
      />
    </Stage>
  )
}

De specimens/feedback.tsx · ConfirmDialogMatrix: 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.