Hover Card

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { HoverCard as HoverCardPrimitive } from "radix-ui";
5import * as React from "react";
6 
7import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9 
10/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
11const hoverCardContentVariants = cva(
12  "z-50 w-64 rounded-xl p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out 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",
13  {
14    variants: {
15      variant: {
16        default: "bg-popover text-popover-foreground border",
17        glass: "text-foreground",
18      },
19    },
20    defaultVariants: {
21      variant: "glass",
22    },
23  },
24);
25 
26/* Role: bordered + veiled adaptive glass. */
27const ROLE = {
28  border: true,
29  veil: true,
30};
31 
32const HoverCard = HoverCardPrimitive.Root;
33 
34const HoverCardTrigger = HoverCardPrimitive.Trigger;
35 
36const HoverCardContent = React.forwardRef<
37  React.ElementRef<typeof HoverCardPrimitive.Content>,
38  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & VariantProps<typeof hoverCardContentVariants> & MaterialAxisProps
39>(({ className, align = "center", sideOffset = 4, variant = "glass", ...props }, ref) => {
40  const [axes, rest] = splitAxisProps(props);
41  const m = materialSurface(variant === "default" ? null : ROLE, axes);
42 
43  return (
44    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
45      <HoverCardPrimitive.Content
46        ref={ref}
47        data-slot="hover-card-content"
48        data-material={m?.["data-material"]}
49        align={align}
50        sideOffset={sideOffset}
51        className={cn(
52          m?.className,
53          hoverCardContentVariants({
54            variant,
55          }),
56          className,
57        )}
58        {...rest}
59      />
60    </HoverCardPrimitive.Portal>
61  );
62});
63HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
64 
65export { HoverCard, HoverCardContent, HoverCardTrigger };