Notification Glass

1/**
2 * NotificationGlass Component
3 *
4 * Glass-themed toast notification with variant-based styling, icons, and dismiss functionality.
5 * Provides visual feedback for user actions and system events.
6 *
7 * ## Features
8 * - **shadcn/ui Compatible** - Variant API (default, destructive, success, warning)
9 * - **Theme-aware styling** - Works with all 3 themes (glass, light, aurora) via CSS variables
10 * - **Variant-specific icons** - Info (default), CheckCircle (success), AlertTriangle (warning), AlertCircle (error)
11 * - **Glow effects on hover** - Variant-specific glow colors (blue, green, yellow, red)
12 * - **Dismissible** - Close button with X icon
13 * - **Responsive sizing** - Different text/icon sizes for mobile and desktop
14 * - **ARIA support** - role="alert", aria-live="polite" for screen reader announcements
15 *
16 * ## CSS Variables
17 * Customize styling via theme CSS variables:
18 * - `--notification-bg` - Notification background color
19 * - `--notification-border` - Notification border color
20 * - `--notification-shadow` - Default box shadow
21 * - `--notification-info-color` - Info icon color (blue)
22 * - `--notification-info-icon-bg` - Info icon background
23 * - `--notification-info-glow` - Info hover glow
24 * - `--notification-success-color` - Success icon color (green)
25 * - `--notification-success-icon-bg` - Success icon background
26 * - `--notification-success-glow` - Success hover glow
27 * - `--notification-warning-color` - Warning icon color (yellow)
28 * - `--notification-warning-icon-bg` - Warning icon background
29 * - `--notification-warning-glow` - Warning hover glow
30 * - `--notification-error-color` - Error icon color (red)
31 * - `--notification-error-icon-bg` - Error icon background
32 * - `--notification-error-glow` - Error hover glow
33 * - `--text-primary`, `--text-secondary`, `--text-muted` - Text colors
34 *
35 * @example Basic usage (default variant)
36 * ```tsx
37 * import { NotificationGlass } from 'shadcn-glass-ui'
38 *
39 * function MyComponent() {
40 *   const [showNotif, setShowNotif] = useState(true)
41 *
42 *   return showNotif ? (
43 *     <NotificationGlass
44 *       variant="default"
45 *       title="New update available"
46 *       message="Version 2.0 is ready to install with new features."
47 *       onClose={() => setShowNotif(false)}
48 *     />
49 *   ) : null
50 * }
51 * ```
52 *
53 * @example Success notification
54 * ```tsx
55 * <NotificationGlass
56 *   variant="success"
57 *   title="Payment successful"
58 *   message="Your payment has been processed successfully."
59// … truncated