User Stats Line Glass

1// ========================================
2// USER STATS LINE GLASS - COMPOSITE COMPONENT
3// User statistics line (repos, followers, following)
4// Level 3: Composite (extracted from ProfileHeaderGlass)
5// ========================================
6 
7import { forwardRef, type HTMLAttributes } from 'react';
8import { FolderGit2, Users, User } from 'lucide-react';
9import { cn } from '@/lib/utils';
10import { StatItemGlass } from '../atomic/stat-item-glass';
11import '@/glass-theme.css';
12 
13/**
14 * Props for UserStatsLineGlass component.
15 *
16 * Extends standard div attributes for maximum flexibility.
17 * All props are readonly to ensure immutability.
18 *
19 * @example
20 * ```tsx
21 * const props: UserStatsLineGlassProps = {
22 *   repos: 42,
23 *   followers: 1234,
24 *   following: 567,
25 *   wrap: true,
26 *   abbreviated: false,
27 * };
28 * ```
29 */
30export interface UserStatsLineGlassProps extends HTMLAttributes<HTMLDivElement> {
31  /**
32   * Number of repositories.
33   *
34   * Displayed with FolderGit2 icon and "repos" label.
35   * Supports thousand separators and abbreviation.
36   *
37   * @example
38   * ```tsx
39   * <UserStatsLineGlass repos={42} /> // Shows "📁 42 repos"
40   * ```
41   */
42  readonly repos: number;
43 
44  /**
45   * Number of followers.
46   *
47   * Displayed with Users icon and "followers" label.
48   * Supports thousand separators and abbreviation.
49   *
50   * @example
51   * ```tsx
52   * <UserStatsLineGlass followers={1234} /> // Shows "👥 1,234 followers"
53   * <UserStatsLineGlass followers={1234} abbreviated /> // Shows "👥 1.2k followers"
54   * ```
55   */
56  readonly followers: number;
57 
58  /**
59   * Number of users following.
60   *
61   * Displayed with User icon and "following" label.
62   * Supports thousand separators and abbreviation.
63   *
64   * @example
65   * ```tsx
66   * <UserStatsLineGlass following={567} /> // Shows "👤 567 following"
67   * ```
68   */
69  readonly following: number;
70 
71  /**
72   * Whether to wrap stats on mobile.
73   *
74   * - `true`: Stats wrap to multiple lines on narrow screens
75   * - `false`: Stats stay in single line (may overflow)
76   *
77   * @default true
78   */
79  readonly wrap?: boolean;
80 
81  /**
82   * Abbreviate large numbers (1.2k instead of 1,234).
83   *
84   * Useful for mobile layouts with limited space.
85   * Applied to all three stat values (repos, followers, following).
86   *
87   * @default false
88   *
89   * @example
90   * ```tsx
91   * // Standard: "1,234 followers"
92   * <UserStatsLineGlass followers={1234} />
93   *
94   * // Abbreviated: "1.2k followers"
95// … truncated