Hover Card

1// Base UI base hover-card — runs on @octanejs/base-ui's `PreviewCard`, which is Base UI's name for
2// this family. Class strings from the maintainer-supplied radix source.
3//
4// THE OPEN/CLOSED DIALECT HAD TO BE REWRITTEN, and this is the one that would have failed loudest.
5// The radix source for this family uses the OLDER spelling — `data-[state=open]:animate-in`,
6// `data-[state=closed]:animate-out` — where the other menu families in this base use `data-open:`.
7// Base UI publishes NO `data-state` attribute at all (verified by rendering an open card and
8// querying for one: there is none). Copied across, every entry and exit utility would match nothing
9// and the card would pop in and out with no animation whatsoever.
10//
11//     data-[state=open]:…    ->  data-open:…
12//     data-[state=closed]:…  ->  data-closed:…
13//
14// The transform-origin variable is renamed for the same reason as every other overlay here:
15// `--radix-hover-card-content-transform-origin` -> `--transform-origin`.
16//
17// PART TREE. Radix has Portal > Content; Base UI splits positioning into its own layer, the same
18// shape this base's popover and dropdown-menu use:
19//
20//     radix     Root > Portal > Content
21//     Base UI   Root > Portal > Positioner > Popup
22//
23// Positioning props are therefore destructured and forwarded to the Positioner. Swept onto `Popup`
24// by a rest spread they are inert — `side="top"` would silently leave the card on its default side
25// and also land on the DOM as an invalid attribute.
26import { createElement } from 'octane';
27import { PreviewCard as PreviewCardPrimitive } from '@octanejs/base-ui/preview-card';
28 
29import { cn } from '@/lib/utils';
30 
31export interface BaseUiPositioningProps {
32	/** Forwarded to the Positioner; see the note at the top of this file. */
33	side?: 'top' | 'right' | 'bottom' | 'left';
34	sideOffset?: number;
35	align?: 'start' | 'center' | 'end';
36	alignOffset?: number;
37	anchor?: unknown;
38	positionMethod?: 'absolute' | 'fixed';
39	collisionBoundary?: unknown;
40	collisionPadding?: unknown;
41	collisionAvoidance?: unknown;
42	arrowPadding?: number;
43	sticky?: boolean;
44	disableAnchorTracking?: boolean;
45}
46 
47export function HoverCard(props: Record<string, unknown>) @{
48	<PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
49}
50 
51export function HoverCardTrigger(props: Record<string, unknown>) @{
52	<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
53}
54 
55// … truncated