Popover

function DefaultPopover() {
  const [isPresented, setIsPresented] = useState(false)
  const anchorRef = useRef<ComponentRef<'button'>>(null)

  return (
    <>
      <button ref={anchorRef} className="sw-button" onClick={() => setIsPresented((value) => !value)} type="button">
        Show Popover
      </button>
      <Popover anchorRef={anchorRef} isPresented={isPresented} onDismiss={() => setIsPresented(false)}>
        <VStack spacing="sm">
          <Text>Quick actions</Text>
          <Text style={{ color: 'var(--sw-color-label-secondary)' }}>
            Popovers stay anchored to the triggering control.
          </Text>
        </VStack>
      </Popover>
    </>
  )
}