popover

1import * as React from "react"
2import * as PopoverPrimitive from "@radix-ui/react-popover"
3 
4import { cn } from "@/lib/utils"
5import "./popover.css"
6 
7/* ------------------------------------------------------------------ */
8/*  Popover                                                            */
9/* ------------------------------------------------------------------ */
10 
11function Popover({
12  ...props
13}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
14  return <PopoverPrimitive.Root {...props} />
15}
16 
17/* ------------------------------------------------------------------ */
18/*  PopoverTrigger                                                     */
19/* ------------------------------------------------------------------ */
20 
21function PopoverTrigger({
22  ...props
23}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
24  return (
25    <PopoverPrimitive.Trigger
26      data-slot="popover-trigger"
27      {...props}
28    />
29  )
30}
31 
32/* ------------------------------------------------------------------ */
33/*  PopoverAnchor                                                      */
34/* ------------------------------------------------------------------ */
35 
36function PopoverAnchor({
37  ...props
38}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
39  return (
40    <PopoverPrimitive.Anchor
41      data-slot="popover-anchor"
42      {...props}
43    />
44  )
45}
46 
47/* ------------------------------------------------------------------ */
48/*  PopoverContent                                                     */
49/* ------------------------------------------------------------------ */
50 
51function PopoverContent({
52  className,
53  sideOffset = 6,
54  align = "center",
55  children,
56  ...props
57}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
58  return (
59    <PopoverPrimitive.Portal>
60      <PopoverPrimitive.Content
61        data-slot="popover-content"
62        sideOffset={sideOffset}
63        align={align}
64        className={cn(
65          "popover-content z-50 min-w-[8rem] overflow-hidden rounded-[var(--layout-radius-xl)] p-[var(--layout-padding-lg)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
66          className
67        )}
68        {...props}
69      >
70        {children}
71      </PopoverPrimitive.Content>
72    </PopoverPrimitive.Portal>
73  )
74}
75 
76// … truncated