# CircularProgress

## Overview

SVG-based circular progress with customizable size, stroke widths, end-cap shape, and optional centered label.

---

## Props

| Prop                  | Type                          | Default      | Description                                       |
| --------------------- | ----------------------------- | ------------ | ------------------------------------------------- | ---------------------- |
| `value`               | `number`                      | **required** | Percentage [0-100].                               |
| `renderLabel`         | `(progress: number) => number | string`      | `undefined`                                       | Custom label renderer. |
| `size`                | `number`                      | `100`        | Diameter in px.                                   |
| `strokeWidth`         | `number`                      | `undefined`  | Overrides both circle and progress stroke widths. |
| `circleStrokeWidth`   | `number`                      | `10`         | Base circle stroke width.                         |
| `progressStrokeWidth` | `number`                      | `10`         | Progress stroke width.                            |
| `shape`               | `"square"                     | "round"`     | `"round"`                                         | Stroke line cap.       |
| `className`           | `string`                      | `undefined`  | Base circle classes.                              |
| `progressClassName`   | `string`                      | `undefined`  | Progress circle classes.                          |
| `labelClassName`      | `string`                      | `undefined`  | Center label classes.                             |
| `showLabel`           | `boolean`                     | `false`      | Show `{value}` (or `renderLabel(value)`) inside.  |

---

## Examples

```tsx
import { CircularProgress } from "laif-ds";

export function Basic() {
  return <CircularProgress value={65} size={100} showLabel />;
}

export function CustomLabel() {
  return (
    <CircularProgress
      value={42}
      size={120}
      showLabel
      renderLabel={(v) => `${v}%`}
    />
  );
}
```

---

## Notes

- **Theming**: Base circle uses `stroke-d-primary/25`; progress uses `stroke-d-primary`.
- **Performance**: Pure SVG; safe to animate via CSS if needed.