Popover

1import * as React from "react"
2import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
3 
4import { cn } from "@/lib/utils"
5 
6function Popover(props: PopoverPrimitive.Root.Props) {
7  return <PopoverPrimitive.Root {...props} />
8}
9 
10function PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {
11  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
12}
13 
14function PopoverContent({
15  className,
16  side = "bottom",
17  sideOffset = 4,
18  align = "center",
19  ...props
20}: PopoverPrimitive.Popup.Props &
21  Pick<PopoverPrimitive.Positioner.Props, "side" | "sideOffset" | "align">) {
22  return (
23    <PopoverPrimitive.Portal>
24      <PopoverPrimitive.Positioner
25        side={side}
26        sideOffset={sideOffset}
27        align={align}
28      >
29        <PopoverPrimitive.Popup
30          data-slot="popover-content"
31          className={cn(
32            "z-50 w-72 origin-[var(--transform-origin)] rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
33            "transition-[transform,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
34            className
35          )}
36          {...props}
37        />
38      </PopoverPrimitive.Positioner>
39    </PopoverPrimitive.Portal>
40  )
41}
42 
43function PopoverClose(props: PopoverPrimitive.Close.Props) {
44  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />
45}
46 
47function PopoverHeader({
48  className,
49  ...props
50}: React.ComponentProps<"div">) {
51  return (
52    <div
53      data-slot="popover-header"
54      className={cn("flex flex-col gap-1.5", className)}
55      {...props}
56    />
57  )
58}
59 
60function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
61  return (
62    <PopoverPrimitive.Title
63      data-slot="popover-title"
64      className={cn("text-sm font-semibold", className)}
65      {...props}
66    />
67  )
68}
69 
70function PopoverDescription({
71  className,
72  ...props
73}: PopoverPrimitive.Description.Props) {
74  return (
75    <PopoverPrimitive.Description
76      data-slot="popover-description"
77      className={cn("text-sm text-muted-foreground", className)}
78      {...props}
79    />
80  )
81}
82 
83export {
84  Popover,
85  PopoverTrigger,
86  PopoverContent,
87  PopoverClose,
88  PopoverHeader,
89  PopoverTitle,
90  PopoverDescription,
91}