Hover Card

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cloneElement, isValidElement } from "hono/jsx"
4import { cn, type ClassValue } from "@/registry/lib/cn"
5 
6// Hover Card — shadcn-htmx, htmx v4 + Tailwind v4.
7//
8// A rich preview surface revealed when the user shows INTEREST in a trigger
9// (hover, keyboard focus, or long-press). Unlike Tooltip — which the APG
10// forbids from holding interactive content and which defers to this primitive
11// — a Hover Card MAY contain links, buttons and other interactive content
12// (e.g. a "Follow" button on a user preview).
13//
14// Built entirely on the native Popover API "interest invoker" mechanism — zero
15// JS:
16//   - The trigger (an <a> or <button>) carries `interestfor` pointing at the
17//     card's id. The browser reveals the card on hover / focus / long-press
18//     and hides it on lose-interest, with NO state machine of ours.
19//   - The card is `popover="hint"`. Per spec a `hint` popover does NOT light-
20//     dismiss `auto` popovers, can itself be light-dismissed, and responds to
21//     ESC (close request) — exactly the contract we want for a preview card.
22//   - Associating a popover with its interest invoker creates an IMPLICIT
23//     anchor reference, so the card is positioned with CSS `position-area`
24//     relative to the trigger — no JS positioner, unlike registry/ui/popover.tsx
25//     which targets older click-popovers without anchor support.
26//
27// Progressive enhancement: in browsers without interest invokers the trigger
28// is just a normal <a>/<button> (which still works), and `popover="hint"`
29// falls back to `popover="manual"`, so the card simply stays hidden — no error,
30// no broken UI.
31//
32// Refs:
33//   repos/mdn/files/en-us/web/api/popover_api/using_interest_invokers/index.md
34//   repos/mdn/files/en-us/web/api/popover_api/index.md  (popover="hint" state)
35//   repos/mdn/files/en-us/web/html/reference/elements/a/index.md:89  (interestfor)
36//   repos/mdn/files/en-us/web/css/reference/properties/position-area/index.md
37//   repos/shadcn-ui/apps/v4/registry/  (HoverCard anatomy: trigger + content)
38 
39export type HoverCardSide = "top" | "right" | "bottom" | "left"
40 
41// Layout-only positioning utilities (see app/styles/input.css). They map a
42// side hint onto a CSS `position-area` tile relative to the implicit anchor
43// (the interest invoker), and fall back to a centred placement in browsers
44// … truncated