Segmented progress bar component with responsive sizing, threshold-based color states, and support for both normal and inverted value semantics. ## Key Components ### `ProgressBar` (exported component) A responsive, segmented progress bar that dynamically calculates the number of segments based on container width using a `ResizeObserver`. Color state is driven by configurable thresholds and ODS design tokens. **Props:** | Prop | Type | Default | Description | |---|---|---|---| | `progress` | `number` | — | Current value (0–100) | | `warningThreshold` | `number` | `75` | Threshold for warning color | | `criticalThreshold` | `number` | `90` | Threshold for critical color | | `segmentWidth` | `number` | `3.43` | Desktop segment width (px) | | `mobileSegmentWidth` | `number` | `5` | Mobile segment width (px) | | `segmentGap` | `number` | `2` | Gap between segments (px) | | `height` | `number` | `24` | Desktop segment height (px) | | `mobileHeight` | `number` | `8` | Mobile segment height (px) | | `inverted` | `boolean` | `false` | Reverses color semantics (high = green, low = red) | **Color mapping (normal mode):** - `≥ criticalThreshold` → `--color-error` (red) - `≥ warningThreshold` → `--color-warning` (yellow) - Below both → `--color-success` (green) **Inverted mode** reverses this — useful for metrics like battery health where higher is better. ## Usage Example ```typescript // Disk usage — high values are bad (normal mode) // Battery health — high values are good (inverted mode) // Custom sizing ``` ## Notes - Uses `useMdUp` hook to switch between desktop and mobile dimensions - Segment count recalculates automatically on container resize via `ResizeObserver` - Unfilled segments render with `--color-bg-surface-active` - Requires a Client Component context (`'use client'`) **Source:** [`progress-bar.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/progress-bar.tsx)