Insight Card Glass

1/**
2 * InsightCardGlass Component
3 *
4 * Versatile insight display component with emoji icons, text, and optional interactivity.
5 * Supports 7 semantic variants with distinct styling and multiple display modes for dashboards,
6 * analytics, and feedback interfaces.
7 *
8 * ## Features
9 * - **7 Semantic Variants:** default, tip, highlight, warning, stat, growth, decline
10 * - **2 Display Modes:** card (default) with glass surface, or inline for text integration
11 * - **Emoji Icons:** Default emojis per variant (customizable via `emoji` prop)
12 * - **Clickable Mode:** Optional `onClick` handler with hover glow effect
13 * - **Arrow Indicator:** Optional chevron icon for clickable insights
14 * - **Fade-In Animation:** Optional entrance animation via `animated` prop
15 * - **Detail Text:** Optional secondary text line for additional context
16 * - **Keyboard Accessible:** Space/Enter key support when clickable
17 * - **Theme-Aware:** Variant-specific border colors and glow effects
18 * - **CVA Variants:** Type-safe variant system with automatic styling
19 *
20 * ## CSS Variables
21 * Defined per variant in `insight-card-glass-variants.ts`:
22 *
23 * ### Shared Variables
24 * - `--glass-bg-subtle` - Card background (non-inline mode)
25 * - `--glass-bg` - Hover background for clickable cards
26 * - `--text-primary` - Main text color
27 * - `--text-secondary` - Inline text color
28 * - `--text-muted` - Detail text and arrow icon color
29 *
30 * ### Variant-Specific Variables
31 * Each variant has unique border and glow variables:
32 *
33 * - **default:** `--glass-border`, `--glow-primary`
34 * - **tip:** `--alert-default-border`, `--glow-secondary`
35 * - **highlight:** `--alert-success-border`, `--glow-success`
36 * - **warning:** `--alert-warning-border`, `--glow-warning`
37 * - **stat:** `--glass-border`, no glow
38 * - **growth:** `--alert-success-border`, `--glow-success`
39 * - **decline:** `--alert-destructive-border`, `--glow-error`
40 *
41 * @example Basic usage
42 * ```tsx
43 * import { InsightCardGlass } from 'shadcn-glass-ui'
44 *
45 * function Dashboard() {
46 *   return (
47 *     <InsightCardGlass
48 *       variant="tip"
49 *       text="Your code quality has improved this month"
50 *       detail="Based on 45 merged PRs"
51 *     />
52 *   )
53 * }
54 * ```
55 *
56 * @example Clickable insight with arrow
57 * ```tsx
58 * <InsightCardGlass
59 *   variant="highlight"
60 *   text="New achievements unlocked!"
61 *   detail="View all 3 achievements"
62 *   onClick={() => navigate('/achievements')}
63 *   showArrow={true}
64 * />
65 * ```
66 *
67// … truncated