A React SVG-based circular progress ring component with support for multiple semantic variants, configurable sizing, and overflow handling for values exceeding 100%. ## Key Components ### Types - **`CircularProgressVariant`** — `'success' | 'warning' | 'error' | 'info' | 'accent'` - **`CircularProgressOverflow`** — `'clamp'` (default, caps ring at 100%) or `'wrap'` (ring wraps per 100 units, label shows raw value) ### `CircularProgress` Component | Prop | Type | Default | Description | |---|---|---|---| | `percentage` | `number` | — | Progress value (0–100 in clamp mode; can exceed 100 in wrap mode) | | `variant` | `CircularProgressVariant` | `'success'` | Controls ring and track colors via ODS tokens | | `size` | `number` | `56` | Width/height in pixels | | `strokeWidth` | `number` | `10` | Ring stroke thickness in pixels | | `showLabel` | `boolean` | `true` | Renders centered text label | | `labelFormat` | `'percent' \| 'value'` | `'percent'` | `'percent'` → `"70%"`, `'value'` → `"70"` | | `overflow` | `CircularProgressOverflow` | `'clamp'` | How values > 100 are handled | | `className` | `string` | — | Additional CSS classes on the wrapper | ## Usage Example ```typescript // Default success ring at 75% // Warning ring with wrap overflow — ring shows 30%, label shows "130%" // Compact error ring, value-only label, no label // Accent ring, large, no label ``` **Source:** [`circular-progress.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/circular-progress.tsx)