Renders a styled metric display pairing a prominent primary value with a smaller secondary label, suitable for dashboards and stat blocks.
## Key Components
**`MetricValue`** — Named export functional component
| Prop | Type | Required | Description |
|---|---|---|---|
| `value` | `string \| number` | ✅ | The primary metric to display (e.g., `30`, `"99%"`) |
| `label` | `string` | ✅ | Descriptive label rendered below/beside the value (e.g., `"Generation Time"`) |
| `className` | `string` | ❌ | Optional class overrides via `cn()` utility |
## Usage Example
```typescript
import { MetricValue } from '@/components/metric-value';
// Basic numeric stat
// String percentage with custom class
// Inside a stat grid
```
## Notes
- Uses `text-h4` for the value and `text-h6 text-ods-text-secondary` for the label, following the ODS (OpenFrame Design System) typography scale.
- `whitespace-nowrap` prevents wrapping on tight layouts.
- Composes with [`cn()`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/utils/cn.ts) for safe Tailwind class merging.