Popover

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