Popover 💬🗯️

Hey there, Popover Pro! 👋

The popover module lets you create delightful little pop-up boxes of content that are anchored to a trigger element. Think tooltips, non-modal dialogs, or extra information displays! 💡

It's like a sticky note 🗒️ for your UI elements, providing context without cluttering the main interface.

Cool Features:

• 🎯 Anchored Positioning: Uses @ryvora/react-popper to smartly position itself relative to a trigger or a custom anchor.
• 🚪 Modal/Non-Modal: Can be configured to be modal (trapping focus, overlay) or non-modal.
• 💨 Dismissable: Easily closed by clicking outside, pressing Escape, or via a close button (integrates with DismissableLayer).
• 🧩 Composable API: Popover.Root, Popover.Trigger, Popover.Anchor (optional), Popover.Portal, Popover.Content, Popover.Close, Popover.Arrow.
• 🎬 Animatable: Works nicely with @ryvora/react-presence for smooth entrances and exits.

Quick Example:

import * as Popover from '@ryvora/react-popover';

function MyInfoPopover() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button>More Info</button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content sideOffset={5}>
          Here's some extra information for you!
          <Popover.Close asChild>
            <button aria-label="Close">X</button>
          </Popover.Close>
          <Popover.Arrow style={{ fill: 'white' }} />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
}

Go ahead, make your UI pop with helpful info! ✨