popover

1import * as React from "react"
2import { Popover as BasePopover } from "@base-ui/react/popover"
3 
4import { cn } from "@/lib/utils"
5 
6function Popover({ ...props }: React.ComponentProps<typeof BasePopover.Root>) {
7	return <BasePopover.Root data-slot="popover" {...props} />
8}
9 
10function PopoverPortal({
11	...props
12}: React.ComponentProps<typeof BasePopover.Portal>) {
13	return <BasePopover.Portal data-slot="popover-portal" {...props} />
14}
15 
16function PopoverTrigger({
17	...props
18}: React.ComponentProps<typeof BasePopover.Trigger>) {
19	return <BasePopover.Trigger data-slot="popover-trigger" {...props} />
20}
21 
22function PopoverClose({
23	...props
24}: React.ComponentProps<typeof BasePopover.Close>) {
25	return <BasePopover.Close data-slot="popover-close" {...props} />
26}
27 
28function PopoverArrow({
29	...props
30}: React.ComponentProps<typeof BasePopover.Arrow>) {
31	return <BasePopover.Arrow data-slot="popover-arrow" {...props} />
32}
33 
34function PopoverPositioner({
35	...props
36}: React.ComponentProps<typeof BasePopover.Positioner>) {
37	return <BasePopover.Positioner data-slot="popover-positioner" {...props} />
38}
39 
40function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
41	return (
42		<div
43			data-slot="popover-header"
44			className={cn("relative flex flex-col gap-y-1", className)}
45			{...props}
46		/>
47	)
48}
49 
50function PopoverTitle({
51	className,
52	...props
53}: React.ComponentProps<typeof BasePopover.Title>) {
54	return (
55		<BasePopover.Title
56			data-slot="popover-title"
57			className={cn("text-sm font-semibold", className)}
58			{...props}
59		/>
60	)
61}
62 
63function PopoverDescription({
64	className,
65	...props
66}: React.ComponentProps<typeof BasePopover.Description>) {
67	return (
68		<BasePopover.Description
69			data-slot="popover-description"
70			className={cn("text-muted-foreground text-sm", className)}
71			{...props}
72		/>
73	)
74}
75 
76function PopoverContent({
77	children,
78	className,
79	align = "center",
80	sideOffset = 8,
81	arrow = true,
82	...props
83}: React.ComponentProps<typeof BasePopover.Popup> & {
84	align?: BasePopover.Positioner.Props["align"]
85	sideOffset?: BasePopover.Positioner.Props["sideOffset"]
86	arrow?: boolean
87}) {
88	return (
89		<PopoverPortal>
90			<PopoverPositioner sideOffset={sideOffset} align={align}>
91				<BasePopover.Popup
92					data-slot="popover-content"
93					className={cn(
94// … truncated