Hover Card (Base UI)

1"use client";
2 
3import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4import { motion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9// ---------------------------------------------------------------------------
10// Design tokens
11// ---------------------------------------------------------------------------
12 
13const controlCornerClassName =
14  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
15 
16const surfaceCornerClassName =
17  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
18 
19const hoverCardThemeClassName =
20  "[--hc-surface:#ffffff] [--hc-foreground:#111111] [--hc-border:#e3e7ec] [--hc-ring:rgba(17,17,17,0.16)] dark:[--hc-surface:#111111] dark:[--hc-foreground:#f6f3ec] dark:[--hc-border:#2b2a25] dark:[--hc-ring:rgba(246,243,236,0.18)]";
21 
22const hoverCardPanelClassName = cn(
23  surfaceCornerClassName,
24  "relative z-50 w-72 transform-gpu border border-[color:var(--hc-border)] bg-[color:var(--hc-surface)] p-4 text-[color:var(--hc-foreground)] shadow-none outline-none"
25);
26 
27const hoverCardTriggerClassName = cn(
28  controlCornerClassName,
29  "inline-flex min-h-9 cursor-pointer items-center px-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--hc-ring),transparent_40%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--hc-surface)]"
30);
31 
32// ---------------------------------------------------------------------------
33// Types
34// ---------------------------------------------------------------------------
35 
36type Side = "top" | "right" | "bottom" | "left";
37type Align = "start" | "center" | "end";
38type CollisionPadding = React.ComponentPropsWithoutRef<
39  typeof PopoverPrimitive.Positioner
40>["collisionPadding"];
41 
42type HoverCardContextValue = {
43  actionsRef: React.RefObject<PopoverPrimitive.Root.Actions | null>;
44  open: boolean;
45  contentId: string;
46  triggerId: string;
47  getTriggerNode: () => HTMLElement | null;
48  setContentNode: (node: HTMLDivElement | null) => void;
49  setTriggerNode: (node: HTMLElement | null) => void;
50  handleFocusEnd: (event: React.FocusEvent<HTMLElement>) => void;
51  handleFocusStart: () => void;
52  handleHoverEnd: (event: React.PointerEvent<HTMLElement>) => void;
53  handleHoverStart: (event: React.PointerEvent<HTMLElement>) => void;
54};
55 
56// Base UI popup render function receives its own props shape
57// … truncated