Modal

export function ModalMatrix() {
  const [open, setOpen] = useState(false)
  const [variant, setVariant] = useState<ModalVariant>('center')
  const focus = useFocusReturnCheck()

  const close = () => {
    setOpen(false)
    focus.notifyClosed()
  }

  return (
    <Stage label="Modal · 5 variantes de layout, mismo contenido" tall wide>
      <div className="flex flex-col items-center gap-3">
        <Row>
          {MODAL_VARIANTS.map((v) => (
            <TriggerButton
              key={v}
              onClick={(e) =>
                focus.openFrom(e, () => {
                  setVariant(v)
                  setOpen(true)
                })
              }
            >
              {v}
            </TriggerButton>
          ))}
        </Row>
        <FocusReturnNote result={focus.result} />
      </div>

      {/* Mismo motivo que en ConfirmDialogMatrix: 157 sitios de import y el
          panel vive en un portal, así que sin clic la ficha era cinco botones.
          La réplica muestra la forma de `variant="center"`; las otras cuatro
          cambian dónde se ancla el panel, no su contenido, y eso sólo se ve
          abriéndolas de verdad. */}
      <ReplicaContenida nota="réplica del panel center, no el portal">
        <div className="flex flex-col">
          <div className="flex items-center gap-2 border-b border-content/10 px-4 py-3">
            <IconHome className="h-4 w-4 text-content/60" />
            <div className="flex flex-col">
              <span className="text-sm font-medium text-content">Ficha de franquicia</span>
              <span className="text-[11px] text-content/60">Luigi · sucursal Alta Córdoba</span>
            </div>
          </div>
          <div className="flex flex-col gap-1.5 px-4 py-3 text-xs text-content/70">
            <span>Regalías del mes: 8.4% sobre ventas netas.</span>
            <span>Stock crítico: 2 sabores por debajo del mínimo.</span>
          </div>
          <div className="flex justify-end border-t border-content/10 px-4 py-2.5">
            <span className="rounded-md border border-content/10 bg-container px-3 py-1.5 text-xs text-content">
              Cerrar
            </span>
          </div>
        </div>
      </ReplicaContenida>

      <Modal
        isOpen={open}
        onClose={close}
        variant={variant}
        title="Ficha de franquicia"
        subtitle="Luigi · sucursal Alta Córdoba"
        icon={<IconHome className="h-4 w-4" />}
        footer={
          <div className="flex justify-end gap-2">
            <TriggerButton onClick={close}>Cerrar</TriggerButton>
          </div>
        }
      >
        <div className="flex flex-col gap-1.5 text-sm text-content/70">
          <p>Regalías del mes: 8.4% sobre ventas netas.</p>
          <p>Stock crítico: 2 sabores por debajo del mínimo.</p>
        </div>
      </Modal>
    </Stage>
  )
}

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