hover-card

1"use client"
2 
3import * as React from "react"
4 
5import { HoverCard as HoverCardPrimitive } from "@ark-ui/react/hover-card"
6 
7import { cn } from "@/lib/utils"
8 
9const HoverCard = HoverCardPrimitive.Root
10 
11const HoverCardArrow = React.forwardRef<
12  React.ElementRef<typeof HoverCardPrimitive.Arrow>,
13  HoverCardPrimitive.ArrowProps
14>(({ className, ...props }, ref) => (
15  <HoverCardPrimitive.Arrow
16    ref={ref}
17    className={cn(
18      "[--arrow-background:var(--popover)] [--arrow-size:calc(var(--spacing)*2)]",
19      className
20    )}
21    {...props}
22  >
23    <HoverCardPrimitive.ArrowTip className="border-t border-l" />
24  </HoverCardPrimitive.Arrow>
25))
26HoverCardArrow.displayName = "HoverCardArrow"
27 
28const HoverCardContent = React.forwardRef<
29  React.ElementRef<typeof HoverCardPrimitive.Content>,
30  HoverCardPrimitive.ContentProps
31>(({ className, ...props }, ref) => (
32  <HoverCardPrimitive.Positioner>
33    <HoverCardPrimitive.Content
34      ref={ref}
35      className={cn(
36        "group 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-[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 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in",
37        className
38      )}
39      {...props}
40    />
41  </HoverCardPrimitive.Positioner>
42))
43HoverCardContent.displayName = "HoverCardContent"
44 
45const HoverCardContext = HoverCardPrimitive.Context
46 
47const HoverCardRootProvider = HoverCardPrimitive.RootProvider
48 
49const HoverCardTrigger = HoverCardPrimitive.Trigger
50 
51export {
52  HoverCard,
53  HoverCardArrow,
54  HoverCardContent,
55  HoverCardContext,
56  HoverCardRootProvider,
57  HoverCardTrigger,
58}
59 
60export {
61  useHoverCard,
62  useHoverCardContext,
63  type HoverCardOpenChangeDetails,
64} from "@ark-ui/react/hover-card"