InputPopover

A thin wrapper over Mantine Popover with the dropdown look of the composer pickers (ModelPicker, ModeSelector). Use it for your own toolbar controls in InputBar leftActions or rightActions so they match. The trigger element's own onClick still runs and then toggles the dropdown; a non-element trigger is wrapped in a span. It works controlled (open and onOpenChange) or uncontrolled (defaultOpen). side and align map to Mantine positions (top and start by default, so it opens above the composer), sideOffset sets the gap. The dropdown renders in a portal, so it is not clipped by a narrow widget.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Branch picker
API reference
Prop
Type
Required
trigger
React.ReactNode
Yes
Element that toggles the popover
children
React.ReactNode
Yes
Dropdown content
open
boolean
No
Controlled opened state
defaultOpen
boolean
No
Initial opened state in uncontrolled mode
onOpenChange
(open: boolean) => void
No
side
PopoverSide
No
Side of the trigger the dropdown is placed on, `'top'` by default
align
PopoverAlign
No
Alignment along the chosen side, `'start'` by default
sideOffset
number
No
Gap between trigger and dropdown in px, `6` by default
className
string
No
Class name applied to the dropdown
style
React.CSSProperties
No