Popover

1"use client";
2 
3import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4 
5import { cn } from "@/lib/utils";
6 
7function Popover(props: PopoverPrimitive.Root.Props) {
8  return <PopoverPrimitive.Root {...props} />;
9}
10 
11function PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {
12  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
13}
14 
15function PopoverContent({
16  align = "start",
17  className,
18  sideOffset = 6,
19  ...props
20}: PopoverPrimitive.Popup.Props & {
21  align?: PopoverPrimitive.Positioner.Props["align"];
22  sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"];
23}) {
24  return (
25    <PopoverPrimitive.Portal>
26      <PopoverPrimitive.Positioner align={align} sideOffset={sideOffset}>
27        <PopoverPrimitive.Popup
28          className={cn(
29            "fade-in-0 slide-in-from-bottom-1 z-50 animate-in rounded-lg border border-border/60 bg-card p-3 duration-200 motion-reduce:animate-none",
30            className
31          )}
32          data-slot="popover-content"
33          {...props}
34        />
35      </PopoverPrimitive.Positioner>
36    </PopoverPrimitive.Portal>
37  );
38}
39 
40export { Popover, PopoverContent, PopoverTrigger };