popover

1"use client"
2 
3import * as React from "react"
4 
5import { Popover as PopoverPrimitive } from "@ark-ui/react/popover"
6import { Portal } from "@ark-ui/react/portal"
7 
8import { cn } from "@/lib/utils"
9 
10const Popover = PopoverPrimitive.Root
11 
12const PopoverAnchor = PopoverPrimitive.Anchor
13 
14const PopoverArrow = React.forwardRef<
15  React.ElementRef<typeof PopoverPrimitive.Arrow>,
16  PopoverPrimitive.ArrowProps
17>(({ className, ...props }, ref) => (
18  <PopoverPrimitive.Arrow
19    ref={ref}
20    className={cn(
21      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
22      className
23    )}
24    {...props}
25  >
26    <PopoverPrimitive.ArrowTip className="border-t border-l" />
27  </PopoverPrimitive.Arrow>
28))
29PopoverArrow.displayName = "PopoverArrow"
30 
31const PopoverCloseTrigger = PopoverPrimitive.CloseTrigger
32 
33const PopoverContent = React.forwardRef<
34  React.ElementRef<typeof PopoverPrimitive.Content>,
35  PopoverPrimitive.ContentProps
36>(({ className, ...props }, ref) => (
37  <Portal>
38    <PopoverPrimitive.Positioner>
39      <PopoverPrimitive.Content
40        ref={ref}
41        className={cn(
42          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
43          className
44        )}
45        {...props}
46      />
47    </PopoverPrimitive.Positioner>
48  </Portal>
49))
50PopoverContent.displayName = "PopoverContent"
51 
52const PopoverContext = PopoverPrimitive.Context
53 
54const PopoverDescription = React.forwardRef<
55  React.ElementRef<typeof PopoverPrimitive.Description>,
56  PopoverPrimitive.DescriptionProps
57>(({ className, ...props }, ref) => (
58  <PopoverPrimitive.Description
59    ref={ref}
60    className={cn("text-muted-foreground text-sm", className)}
61    {...props}
62  />
63))
64PopoverDescription.displayName = "PopoverDescription"
65 
66const PopoverRootProvider = PopoverPrimitive.RootProvider
67 
68const PopoverTitle = React.forwardRef<
69  React.ElementRef<typeof PopoverPrimitive.Title>,
70  PopoverPrimitive.TitleProps
71>(({ className, ...props }, ref) => (
72  <PopoverPrimitive.Title
73    ref={ref}
74    className={cn("font-semibold text-lg leading-none", className)}
75    {...props}
76  />
77))
78// … truncated