Popover

import { Popover } from 'yarcl';

Filters

<Popover>
  <Popover.Trigger>
    <Button variant="outline">Filters</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Checkbox>Archived</Checkbox>
  </Popover.Content>
</Popover>

• Positioned with Floating UI: it flips and shifts to stay on screen.
• Closes on Esc and outside click; focus returns to the trigger.
• modal traps focus inside while open.

For lists, use Menu, Select or Combobox instead.

Props

Popover

Prop	Type	Default	Description
children	ReactNode		Popover.Trigger and Popover.Content.
defaultOpen	boolean	false	Initial open state when uncontrolled.
modal	boolean	false	Traps focus inside the content while open.
onOpenChange	(open: boolean) => void		Called when the popover opens or closes.
open	boolean		Controlled open state.
placement	Placement	'bottom'	Preferred side. Flips when there isn't room.

Popover.Content

Prop	Type	Default	Description
padding	Spacingconfig	config.defaults.padding	Inner padding, from the spacing config.
radius	Radiusconfig	config.defaults.radius	Corner radius, from the radii config.