Popover

import { Popover, usePopover } from '@tangible/ui';

Interactive docs and examples: Popover in Storybook.

Popover props

Prop	Type	Default	Description
`children`	`ReactNode`
`defaultOpen?`	`boolean`	`false`	Default open state for uncontrolled usage.
`onOpenChange?`	`(open: boolean) => void`		Callback when open state changes.
`open?`	`boolean`		Controlled open state.

Also exported as PopoverTrigger.

Prop	Type	Default	Description
`children`	`ReactNode`
`asChild?`	`boolean`	`false`	Merge trigger behavior into the child element instead of wrapping it. The child must accept ref and event props (e.g. Button, IconButton).

Also exported as PopoverContent.

Prop	Type	Default	Description
`children`	`ReactNode`
`align?`	`"center" \| "end" \| "start"`	`'start'`	Alignment along the side.
`aria-label?`	`string`		Accessible name for the dialog. Provide this (or aria-labelledby via a heading inside) so the popover announces meaningfully.
`className?`	`string`
`initialFocus?`	`number`	`0`	Initial focus target: 0 focuses the first tabbable element inside the popover, -1 leaves focus on the trigger.
`modal?`	`boolean`	`false`	Trap focus inside the popover while open. Use for content with multiple interactive controls (forms, pickers); leave off for light informational content.
`side?`	`"bottom" \| "left" \| "right" \| "top"`	`'bottom'`	Side of the trigger to render against.
`sideOffset?`	`number`	`4`	Gap between trigger and content, in px.
`style?`	`CSSProperties`

usePopover(): PopoverContextValue

Returns:

Stories: Basic, Placement, Form Content, Controlled (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.