# `PhiaUi.Components.ProgressEnhanced`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/progress_enhanced.ex#L1)

Enhanced progress components extending the basic `Progress` component with
labeled, multi-segment, quota, and step-based variants.

Inspired by Mantine Progress with sections, Ant Design Progress variants,
GitHub's storage quota bar, and Linear's sprint progress.

Pure HEEx — no JavaScript required.

## Sub-components

| Component              | Purpose                                                     |
|------------------------|-------------------------------------------------------------|
| `labeled_progress/1`   | Progress bar with title, value label, and percentage text   |
| `segmented_progress/1` | Multi-color segments (storage breakdown, team allocation)    |
| `quota_bar/1`          | Usage/limit bar with warning color zones (80% → amber, 95% → red) |
| `step_progress_bar/1`  | Step-based progress shown as N equal segments               |

## Labeled progress (with title and percentage)

    <.labeled_progress label="Upload progress" value={72} />
    <.labeled_progress label="Tasks completed" value={18} max={24} show_count />

## Segmented (storage breakdown)

    <.segmented_progress
      segments={[
        %{label: "Documents", value: 30, color: "bg-primary"},
        %{label: "Images", value: 45, color: "bg-blue-500"},
        %{label: "Videos", value: 15, color: "bg-violet-500"}
      ]}
      max={100}
    />

## Quota bar (GitHub-style)

    <.quota_bar used={8_200} limit={10_000} unit="MB" label="Storage" />

## Step progress bar

    <.step_progress_bar current={3} total={5} />

# `labeled_progress`

Renders a labeled progress bar with title and percentage display.

## Example

    <.labeled_progress label="Storage" value={42} />
    <.labeled_progress label="Tasks" value={18} max={24} show_count />

## Attributes

* `label` (`:string`) (required) - Accessible label and visible title.
* `value` (`:integer`) - Current progress value (between 0 and `:max`). Defaults to `0`.
* `max` (`:integer`) - Maximum value. Default: `100`. Defaults to `100`.
* `show_count` (`:boolean`) - When `true`, shows `value/max` instead of just percentage. Defaults to `false`.
* `size` (`:atom`) - Bar height. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `variant` (`:atom`) - Fill color variant. Defaults to `:default`. Must be one of `:default`, `:success`, `:warning`, or `:destructive`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.

# `quota_bar`

Renders a usage/limit progress bar with automatic color zones.

The bar fills `bg-primary` below `:warn_at` percent, amber (warning) between
`:warn_at` and `:danger_at`, and red (destructive) above `:danger_at`.
This follows GitHub's storage quota and Heroku's dyno usage patterns.

## Example

    <.quota_bar used={8_500} limit={10_000} unit="MB" label="Storage" />
    <.quota_bar used={950} limit={1_000} unit="req/hr" label="API requests" warn_at={70} />

## Attributes

* `used` (`:integer`) (required) - Amount currently used.
* `limit` (`:integer`) (required) - Maximum allowed amount.
* `label` (`:string`) - Label shown above the bar. Defaults to `"Usage"`.
* `unit` (`:string`) - Unit suffix (e.g. `"MB"`, `"GB"`, `"requests"`). Defaults to `nil`.
* `warn_at` (`:integer`) - Percentage at which the bar turns amber (warning zone). Defaults to `80`.
* `danger_at` (`:integer`) - Percentage at which the bar turns red (danger zone). Defaults to `95`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.

# `segmented_progress`

Renders a multi-color segmented progress bar.

Each segment occupies a proportional width based on its value relative to `:max`.
Useful for storage breakdowns, budget allocation, team capacity visualizations.

## Example

    <.segmented_progress
      segments={[
        %{label: "Documents", value: 30, color: "bg-primary"},
        %{label: "Images", value: 45, color: "bg-blue-400"},
        %{label: "Videos", value: 15, color: "bg-violet-400"}
      ]}
      max={100}
    />

## Attributes

* `segments` (`:list`) (required) - List of segment maps. Each map must have:
  - `:label` (string) — accessible label for this segment
  - `:value` (integer) — segment value
  - `:color` (string) — Tailwind `bg-*` class for the segment color

  Example: `[%{label: "Docs", value: 30, color: "bg-primary"}]`

* `max` (`:integer`) - Total maximum value (sum of all segments should not exceed this). Defaults to `100`.
* `size` (`:atom`) - Bar height. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `show_legend` (`:boolean`) - When `true`, renders a color legend below the bar. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.

# `step_progress_bar`

Renders a step-based progress bar as N equal segments.

Completed steps are filled with `bg-primary`; the current step is a
lighter fill; upcoming steps are `bg-secondary`. Useful for multi-step
forms, onboarding flows, and checkout wizards as a compact alternative
to the `step_tracker/1` component.

## Example

    <%!-- Step 2 of 4 --%>
    <.step_progress_bar current={2} total={4} />

## Attributes

* `current` (`:integer`) (required) - Current step number (1-indexed).
* `total` (`:integer`) (required) - Total number of steps.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attrs forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*