CmPortal / CmPortalPanel

import { CmPortal } from "cosmemilton-ui/client";

"use client";

import { useState } from "react";
import { CmButton, CmPortal, CmPortalPanel } from "cosmemilton-ui/client";
import { CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <CmButton variant="outline" onClick={() => setOpen((value) => !value)}>
        Alternar painel
      </CmButton>
      {open ? (
        <CmPortal>
          <CmPortalPanel placement="bottom-end" width={280}>
            <CmStack gap="xs">
              <CmText weight="semibold">Painel em portal</CmText>
              <CmText tone="muted">Renderizado fora da hierarquia local.</CmText>
            </CmStack>
          </CmPortalPanel>
        </CmPortal>
      ) : null}
    </>
  );
}