<!-- source-hash: 903a9f23525777b275b7f8c4003cd050 -->
Storybook stories for the `DashboardInfoCard` UI component, covering all props and visual states used in dashboard layouts.

## Key Components

| Story | Description |
|---|---|
| `Default` | Basic card with title and numeric value |
| `WithPercentage` | Card showing a percentage alongside the value |
| `WithProgress` | Circular progress indicator with percentage |
| `CustomProgressVariant` | Progress ring with `error`/`warning`/`success`/`info`/`accent` variants |
| `WithTooltip` | Question-mark icon with tooltip text |
| `WithHref` | Clickable card rendered as a Next.js `Link` |
| `WarningWithTag` / `ErrorWithTag` | Overflow percentage displayed as a colored `Tag` component |
| `OverflowWrap` / `OverflowComparison` | Demonstrates `progressOverflow="wrap"` vs `"clamp"` for values >100% |
| `FullyLoaded` | All props enabled simultaneously |
| `CardGrid` | Multi-card dashboard grid layout decorator |

## Usage Example

```typescript
import { DashboardInfoCard } from '@/components/ui/dashboard-info-card'

// Basic usage
<DashboardInfoCard title="Total Devices" value={1284} />

// With progress ring and navigation
<DashboardInfoCard
  title="Compliance Score"
  value={92}
  percentage={92}
  showProgress
  progressVariant="success"
  tooltip="Based on the latest audit results"
  href="/compliance"
/>

// Overflow handling for values exceeding 100%
<DashboardInfoCard
  title="Device Usage"
  value={520}
  percentage={104}
  showProgress
  progressVariant="warning"
  progressOverflow="wrap"
/>
```

### `progressVariant` options

| Value | Use Case |
|---|---|
| `success` | Healthy / on-target metrics |
| `warning` | Approaching limits |
| `error` | Critical / over-limit |
| `info` | Neutral informational |
| `accent` | Brand highlight |