`ProgressCircle` is a circular progress indicator with theme-aware variants and an optional dynamic color mode that smoothly blends colors based on the current value.

Features:

- Theme variants: accent, success, warning, danger, inverse - Indeterminate state (spinning) - Size controlled by diameter `size` (in px) and `strokeWidth` - Insert `<ProgressCircle.Value />` as a child to display the percentage value - Advanced color blending with `variant="based-on-value"` + `dynamicColors`

Usage Guidelines:

- Use for visualizing a completion ratio or progress when space is constrained - Prefer `indeterminate` when the duration is unknown - Adjust `size` and `strokeWidth` for different visual densities - For semantic meaning (success, warning, etc.), use theme variants - For continuous color feedback, use `based-on-value` with `dynamicColors`

Accessibility:

- Exposes proper ARIA attributes: role, aria-valuemin/max/now - `indeterminate` omits value to screen readers as the progress is unknown Basic: Shows a default circular progress with value text. - Uses theme `accent` by default. - `showValue` renders the percentage inside the circle.

Sizes: Demonstrates different diameters and stroke widths.

- `size` controls the diameter in pixels. - `strokeWidth` defaults to `size / 16`, but can be customized.

Variants: Shows theme-driven color variants.

- Choose a variant to convey semantic meaning.

Based-on-value: Demonstrates continuous color blending driven by `value`.

- Set `variant="based-on-value"` and provide `dynamicColors`. - Accepts either an array of colors (evenly spaced) or stops with `{ at, color }`. - Colors are smoothly mixed between stops using the current progress value.