Hover Card

1"use client";
2 
3import * as React from "react";
4import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
5 
6import { cn } from "@/lib/utils";
7import {
8  floatingMotion,
9  floatingSurfaceVariants,
10  type FloatingSurfaceProps,
11} from "@/components/ui/recipes";
12 
13const HoverCard = HoverCardPrimitive.Root;
14 
15const HoverCardTrigger = HoverCardPrimitive.Trigger;
16 
17const HoverCardContent = React.forwardRef<
18  React.ElementRef<typeof HoverCardPrimitive.Content>,
19  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> &
20    FloatingSurfaceProps & { size?: "sm" | "md" | "lg" }
21>(
22  (
23    {
24      className,
25      align = "center",
26      sideOffset = 6,
27      collisionPadding = 8,
28      surface,
29      radius,
30      size = "md",
31      style,
32      ...props
33    },
34    ref,
35  ) => (
36    <HoverCardPrimitive.Portal>
37      <HoverCardPrimitive.Content
38        ref={ref}
39        align={align}
40        sideOffset={sideOffset}
41        collisionPadding={collisionPadding}
42        style={
43          {
44            "--poyraz-floating-transform-origin":
45              "var(--radix-hover-card-content-transform-origin)",
46            "--poyraz-floating-slide": "var(--poyraz-floating-slide-distance, 0.5rem)",
47            ...style,
48          } as React.CSSProperties
49        }
50        className={cn(
51          floatingSurfaceVariants({ surface, radius }),
52          floatingMotion,
53          "z-50",
54          size === "sm" && "w-56 p-3",
55          size === "md" && "w-72 p-4",
56          size === "lg" && "w-96 p-5",
57          className,
58        )}
59        {...props}
60      />
61    </HoverCardPrimitive.Portal>
62  ),
63);
64HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
65 
66export { HoverCard, HoverCardTrigger, HoverCardContent };