Circular Metric Glass

1// ========================================
2// CIRCULAR METRIC GLASS COMPONENT
3// Compact circular metric display for mobile
4// ========================================
5 
6import { forwardRef } from 'react';
7import { cn } from '@/lib/utils';
8import {
9  CircularProgressGlass,
10  type CircularProgressGradient,
11} from '../ui/circular-progress-glass';
12import '@/glass-theme.css';
13 
14// ========================================
15// TYPES
16// ========================================
17 
18export type CircularMetricColor = 'emerald' | 'amber' | 'blue' | 'red';
19 
20/**
21 * Props for CircularMetricGlass component.
22 *
23 * Extends standard div attributes for maximum flexibility.
24 * All props are readonly to ensure immutability.
25 *
26 * @example
27 * ```tsx
28 * const props: CircularMetricGlassProps = {
29 *   label: 'Reg',
30 *   value: 84,
31 *   color: 'emerald',
32 *   size: 'sm',
33 * };
34 * ```
35 */
36export interface CircularMetricGlassProps extends React.HTMLAttributes<HTMLDivElement> {
37  /**
38   * Metric label displayed below the circular progress indicator.
39   *
40   * Typically a short abbreviation (2-6 characters) for mobile-friendly display.
41   * Examples: "Reg" (Regression), "Imp" (Impact), "Div" (Diversity), "Collab" (Collaboration).
42   */
43  readonly label: string;
44 
45  /**
46   * Metric value as a percentage (0-100).
47   *
48   * Controls the circular progress fill amount.
49   * Displayed as percentage text inside the circle.
50   *
51   * @example
52   * ```tsx
53   * <CircularMetricGlass value={84} /> // Shows "84%" at center
54   * ```
55   */
56  readonly value: number;
57 
58  /**
59   * Color theme for the metric.
60   *
61   * Maps to semantic color variants:
62   * - `emerald`: Success/positive metrics (--metric-success-*)
63   * - `amber`: Warning/moderate metrics (--metric-warning-*)
64   * - `blue`: Default/neutral metrics (--metric-default-*)
65   * - `red`: Destructive/negative metrics (--metric-destructive-*)
66   *
67   * @default 'blue'
68   */
69  readonly color?: CircularMetricColor;
70 
71  /**
72   * Size variant of the circular progress indicator.
73   *
74   * - `sm`: 80px diameter, 6px thickness (mobile-optimized)
75   * - `md`: 112px diameter, 8px thickness (desktop/tablet)
76   *
77   * @default 'sm'
78   */
79  readonly size?: 'sm' | 'md';
80}
81 
82// ========================================
83// HELPERS
84// ========================================
85 
86// Map CircularMetricColor to CircularProgressGlass gradient and CSS variable
87const colorMap: Record<
88  CircularMetricColor,
89  { gradient: CircularProgressGradient; textVar: string }
90> = {
91// … truncated