Hover Card Glass

1/**
2 * HoverCardGlass Component
3 *
4 * Hover-triggered floating glass-themed container for rich content previews.
5 * Unlike PopoverGlass (click-triggered), HoverCardGlass opens on hover after a configurable delay.
6 *
7 * ## Features
8 * - Hover-triggered (vs click for PopoverGlass)
9 * - Configurable delays: openDelay (200ms) and closeDelay (100ms)
10 * - Arrow pointer with glass styling (shown by default)
11 * - 12 positioning options: 4 sides × 3 alignments
12 * - Fade animations with slide-in effects
13 * - Portal rendering (always in document.body)
14 * - Compound component API (recommended)
15 * - Legacy API for backward compatibility
16 * - Theme-aware glass styling via CSS variables
17 * - 100% shadcn/ui compatible API
18 *
19 * ## Sub-Components
20 * - **HoverCardGlass / HoverCard**: Root component with delay configuration
21 * - **HoverCardGlassTrigger / HoverCardTrigger**: Element that triggers hover (supports asChild)
22 * - **HoverCardGlassContent / HoverCardContent**: Content container with glass styling and arrow
23 *
24 * ## CSS Variables
25 * Customize appearance via theme CSS variables:
26 * - `--hovercard-bg`: Card background color (glass effect)
27 * - `--hovercard-border`: Card border color
28 * - `--hovercard-shadow`: Card shadow/glow effect
29 * - `--hovercard-arrow-bg`: Arrow pointer background color
30 *
31 * @example User preview card
32 * ```tsx
33 * import { HoverCardGlass, HoverCardGlassTrigger, HoverCardGlassContent } from 'shadcn-glass-ui'
34 *
35 * function UserPreview() {
36 *   return (
37 *     <HoverCardGlass openDelay={200} closeDelay={100}>
38 *       <HoverCardGlassTrigger asChild>
39 *         <span className="underline">@shadcn</span>
40 *       </HoverCardGlassTrigger>
41 *       <HoverCardGlassContent side="bottom" align="start">
42 *         <div className="flex gap-4">
43 *           <Avatar src="..." />
44 *           <div>
45 *             <h4>shadcn</h4>
46 *             <p>Creator of shadcn/ui</p>
47 *           </div>
48 *         </div>
49 *       </HoverCardGlassContent>
50 *     </HoverCardGlass>
51 *   )
52 * }
53 * ```
54 *
55 * @example Link preview with metadata
56 * ```tsx
57 * <HoverCardGlass>
58 *   <HoverCardGlassTrigger asChild>
59 *     <a href="https://github.com">GitHub</a>
60 *   </HoverCardGlassTrigger>
61 *   <HoverCardGlassContent>
62 *     <h4>GitHub</h4>
63 *     <p>Where developers shape the future of software</p>
64 *   </HoverCardGlassContent>
65 * </HoverCardGlass>
66 * ```
67 *
68 * @example Rich tooltip with image
69 * ```tsx
70 * <HoverCardGlass openDelay={300}>
71 *   <HoverCardGlassTrigger asChild>
72// … truncated