"use client";
import * as React from "react";
import * as H from "@radix-ui/react-hover-card";
import { AnimatePresence, motion } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const HoverCardCtx = React.createContext(false);

export function HoverCard({ open, defaultOpen, onOpenChange, openDelay = 200, closeDelay = 150, ...p }: React.ComponentProps<typeof H.Root>) {
  const [inner, setInner] = React.useState(defaultOpen ?? false);
  const current = open ?? inner;
  return (
    <HoverCardCtx.Provider value={current}>
      <H.Root
        open={current}
        openDelay={openDelay}
        closeDelay={closeDelay}
        onOpenChange={(v) => {
          setInner(v);
          onOpenChange?.(v);
        }}
        {...p}
      />
    </HoverCardCtx.Provider>
  );
}
export const HoverCardTrigger = H.Trigger;

export function HoverCardContent({ className, children, align = "center", sideOffset = 8, ...p }: React.ComponentProps<typeof H.Content>) {
  const open = React.useContext(HoverCardCtx);
  return (
    <AnimatePresence>
      {open && (
        <H.Portal forceMount>
          <H.Content asChild forceMount align={align} sideOffset={sideOffset} {...p}>
            <motion.div
              className={cn("z-50 w-72 rounded-xl bg-surface p-4 text-on-surface shadow-clay outline-none", className)}
              style={{ transformOrigin: "var(--radix-hover-card-content-transform-origin)" }}
              initial={{ opacity: 0, scale: 0.9, y: 6 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.12 } }}
              transition={springs.bouncy}
            >
              {children}
            </motion.div>
          </H.Content>
        </H.Portal>
      )}
    </AnimatePresence>
  );
}
Installation
