popover

1"use client"
2
3import * as React from "react"
4import { Popover as BasePopover } from "@base-ui/react/popover"
5import { cn } from "@/lib/utils"
6
7const Popover = BasePopover.Root
8
9const PopoverTrigger = BasePopover.Trigger
10
11type PopoverContentProps = React.ComponentPropsWithoutRef<typeof BasePopover.Popup> & {
12    align?: "start" | "center" | "end"
13    sideOffset?: number
14}
15
16const PopoverContent = React.forwardRef<
17    React.ComponentRef<typeof BasePopover.Popup>,
18    PopoverContentProps
19>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
20    <BasePopover.Portal>
21        <BasePopover.Positioner sideOffset={sideOffset} align={align}>
22            <BasePopover.Popup
23                ref={ref}
24                className={cn(
25                    "z-50 w-72 rounded-base border-2 border-black bg-white p-4 text-black outline-none transition-opacity motion-reduce:transition-none data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
26                    className
27                )}
28                {...props}
29            />
30        </BasePopover.Positioner>
31    </BasePopover.Portal>
32))
33PopoverContent.displayName = "PopoverContent"
34
35export { Popover, PopoverTrigger, PopoverContent }