Hover Card

1"use client"
2 
3import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
4 
5import { cn, floatingSurfaceClasses } from "@/registry/lib/surface"
6import { ThemedPortalShell } from "@/registry/lib/portal-container"
7 
8function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
9  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
10}
11 
12function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
13  return (
14    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
15  )
16}
17 
18function HoverCardContent({
19  className,
20  side = "bottom",
21  sideOffset = 4,
22  align = "center",
23  alignOffset = 0,
24  ...props
25}: PreviewCardPrimitive.Popup.Props &
26  Pick<
27    PreviewCardPrimitive.Positioner.Props,
28    "align" | "alignOffset" | "side" | "sideOffset"
29  >) {
30  return (
31    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
32      <ThemedPortalShell>
33        <PreviewCardPrimitive.Positioner
34          align={align}
35          alignOffset={alignOffset}
36          side={side}
37          sideOffset={sideOffset}
38          className="isolate z-50"
39        >
40          <PreviewCardPrimitive.Popup
41            data-slot="hover-card-content"
42            className={cn(
43              "z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm",
44              floatingSurfaceClasses(),
45              className
46            )}
47            {...props}
48          />
49        </PreviewCardPrimitive.Positioner>
50      </ThemedPortalShell>
51    </PreviewCardPrimitive.Portal>
52  )
53}
54 
55export { HoverCard, HoverCardTrigger, HoverCardContent }