Stat Item Glass

1/**
2 * StatItemGlass Component
3 *
4 * Compact statistic display component with icon, value, and label for profile cards and dashboards.
5 * Designed for inline metrics with automatic value formatting and flexible layouts.
6 *
7 * ## Features
8 * - **Icon + Value + Label:** Clean three-part layout with Lucide icon support
9 * - **3 Size Variants:** sm (12px), md (14px), lg (16px) text sizes
10 * - **2 Layout Modes:** horizontal (default) and vertical layouts
11 * - **Value Formatting:** Automatic number abbreviation (1.2k, 2.5M) in abbreviated mode
12 * - **Flexible Values:** Supports both numbers and pre-formatted strings
13 * - **Theme-Aware Colors:** Uses CSS variables for icon accent and text
14 * - **Customizable Icon Size:** Configurable icon dimensions via `iconSize` prop
15 * - **Compact Design:** Minimal spacing optimized for inline use
16 * - **Atomic Component:** Extracted from ProfileHeaderGlass for reusability
17 *
18 * ## CSS Variables
19 * Uses inline theme CSS variables (no component-specific variables):
20 * - `--text-secondary` - Stat value and label text color
21 * - `--text-accent` - Icon color
22 *
23 * @example Basic usage
24 * ```tsx
25 * import { StatItemGlass } from 'shadcn-glass-ui'
26 * import { Star } from 'lucide-react'
27 *
28 * function UserProfile() {
29 *   return (
30 *     <StatItemGlass
31 *       icon={Star}
32 *       value={1234}
33 *       label="stars"
34 *     />
35 *   )
36 * }
37 * ```
38 *
39 * @example With abbreviated values
40 * ```tsx
41 * import { GitCommit } from 'lucide-react'
42 *
43 * <StatItemGlass
44 *   icon={GitCommit}
45 *   value={15678}
46 *   label="commits"
47 *   abbreviated={true}
48 * />
49 * // Renders: "15.7k commits"
50 * ```
51 *
52 * @example Vertical layout with large size
53 * ```tsx
54 * import { Users } from 'lucide-react'
55 *
56 * <StatItemGlass
57 *   icon={Users}
58 *   value={250}
59 *   label="followers"
60 *   size="lg"
61 *   layout="vertical"
62 *   iconSize={20}
63 * />
64 * ```
65 *
66 * @example With pre-formatted string value
67 * ```tsx
68 * import { Calendar } from 'lucide-react'
69 *
70 * <StatItemGlass
71 *   icon={Calendar}
72 *   value="2 years"
73 *   label="active"
74 *   size="sm"
75 * />
76 * ```
77 *
78 * @accessibility
79 * - Uses semantic `<span>` element for inline display
80 * - Icon has proper color contrast via `--text-accent`
81 * - Font weight (`font-medium`) improves readability
82 * - Supports custom `aria-label` via spread props
83 * - No interactive elements, purely informational
84 * - WCAG 2.1 AA compliant color contrast
85 *
86 * @since v1.0.0
87 */
88 
89// ========================================
90// … truncated