Glass Card

1/**
2 * GlassCard Component
3 *
4 * Glass-themed container with backdrop blur, glow effects, and hover animations.
5 * Provides a foundational card component for glassmorphism UIs.
6 *
7 * ## Features
8 * - Theme-aware styling (glass/light/aurora) via CSS variables
9 * - Configurable blur intensity (subtle 8px, medium 16px, strong 24px)
10 * - Optional glow effects (blue, violet, cyan)
11 * - Hover animations with scale and glow effects
12 * - Polymorphic rendering via `asChild` (Radix UI Slot pattern)
13 * - Padding variants (none, compact, default, featured)
14 * - Touch-friendly interactions (minimum 44x44px for interactive use)
15 *
16 * ## CSS Variables
17 * Customize styling via theme CSS variables:
18 * - `--card-subtle-bg`, `--card-medium-bg`, `--card-strong-bg` - Background colors
19 * - `--card-subtle-border`, `--card-medium-border`, `--card-strong-border` - Border colors
20 * - `--card-hover-bg`, `--card-hover-border`, `--card-hover-glow` - Hover states
21 * - `--glow-blue`, `--glow-violet`, `--glow-cyan`, `--glow-neutral` - Glow effects
22 * - `--blur-sm` (8px), `--blur-md` (16px), `--blur-lg` (24px) - Backdrop blur
23 *
24 * @example Basic card with medium intensity
25 * ```tsx
26 * import { GlassCard } from 'shadcn-glass-ui'
27 *
28 * function MyCard() {
29 *   return (
30 *     <GlassCard intensity="medium" className="p-6">
31 *       <h3>Card Title</h3>
32 *       <p>Card content goes here</p>
33 *     </GlassCard>
34 *   )
35 * }
36 * ```
37 *
38 * @example With glow effects
39 * ```tsx
40 * <GlassCard glow="blue" intensity="strong">
41 *   <h3>Highlighted Card</h3>
42 *   <p>This card has a blue glow effect</p>
43 * </GlassCard>
44 *
45 * <GlassCard glow="violet" hover={true}>
46 *   <h3>Interactive Card</h3>
47 *   <p>Hover over this card for effects</p>
48 * </GlassCard>
49 * ```
50 *
51 * @example As clickable link (asChild pattern)
52 * ```tsx
53 * <GlassCard asChild intensity="medium" hover={true}>
54 *   <a href="/product/123" aria-label="View product details">
55 *     <img src="/product.jpg" alt="Product" />
56 *     <h3>Product Name</h3>
57 *     <p>$99.99</p>
58 *   </a>
59 * </GlassCard>
60 *
61 * // With Next.js Link
62 * <GlassCard asChild>
63 *   <Link href="/dashboard">
64 *     <Dashboard className="w-6 h-6" />
65 *     <span>Go to Dashboard</span>
66 *   </Link>
67 * </GlassCard>
68 * ```
69 *
70 * @example Different intensity levels
71 * ```tsx
72 * <div className="grid grid-cols-3 gap-4">
73 *   <GlassCard intensity="subtle">
74 *     Subtle blur (8px)
75 *   </GlassCard>
76 *   <GlassCard intensity="medium">
77 *     Medium blur (16px)
78 *   </GlassCard>
79// … truncated