Popover

1"use client";
2 
3import * as React from "react";
4import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5 
6import { cn } from "@/lib/utils";
7 
8function Popover({ ...props } = {}) {
9	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
10}
11 
12function PopoverTrigger({ ...props } = {}) {
13	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
14}
15 
16function PopoverContent({
17	className = "",
18	positionerClassName = "",
19	align = "center",
20	alignOffset = 0,
21	side = "bottom",
22	sideOffset = 4,
23	...props
24}) {
25	return (
26		<PopoverPrimitive.Portal>
27			<PopoverPrimitive.Positioner
28				align={align}
29				alignOffset={alignOffset}
30				side={side}
31				sideOffset={sideOffset}
32				className={cn("isolate z-50", positionerClassName)}
33			>
34				<PopoverPrimitive.Popup
35					data-slot="popover-content"
36					className={cn(
37						"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-lg p-2.5 text-xs shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden",
38						className,
39					)}
40					{...props}
41				/>
42			</PopoverPrimitive.Positioner>
43		</PopoverPrimitive.Portal>
44	);
45}
46 
47function PopoverHeader({ className = "", ...props }) {
48	return (
49		<div
50			data-slot="popover-header"
51			className={cn("flex flex-col gap-1 text-xs", className)}
52			{...props}
53		/>
54	);
55}
56 
57function PopoverTitle({ className = "", ...props }) {
58	return (
59		<PopoverPrimitive.Title
60			data-slot="popover-title"
61			className={cn("text-sm font-medium", className)}
62			{...props}
63		/>
64	);
65}
66 
67function PopoverDescription({ className = "", ...props }) {
68	return (
69		<PopoverPrimitive.Description
70			data-slot="popover-description"
71			className={cn("text-muted-foreground", className)}
72			{...props}
73		/>
74	);
75}
76 
77Popover.displayName = "Popover";
78PopoverContent.displayName = "PopoverContent";
79PopoverDescription.displayName = "PopoverDescription";
80PopoverHeader.displayName = "PopoverHeader";
81PopoverTitle.displayName = "PopoverTitle";
82PopoverTrigger.displayName = "PopoverTrigger";
83 
84export {
85	Popover,
86	PopoverContent,
87	PopoverDescription,
88	PopoverHeader,
89	PopoverTitle,
90	PopoverTrigger,
91};