# `SquatchMail.Web.Components`
[🔗](https://github.com/Axio-Intelligence/Squatch-Mail/blob/v0.1.1/lib/squatch_mail/web/components/components.ex#L1)

Shared design-system components for SquatchMail dashboard pages: badges,
stat cards, the live indicator, and empty states. Every visual rule here
traces back to a rule in `DESIGN.md` — see that file before changing colors,
radii, or copy.

# `empty_state`

A big-footprint empty state with field-journal copy, per DESIGN.md.

## Attributes

* `title` (`:string`) (required)
* `copy` (`:string`) (required)

# `live_indicator`

The pulsing "TRACKING LIVE" indicator shown in page headers.

# `stat_card`

One compact "Field Report" stat card: a mono label, a mono number, and an
optional delta vs. the prior period.

## Attributes

* `label` (`:string`) (required)
* `value` (`:string`) (required)
* `delta` (`:string`) - Defaults to `nil`.
* `delta_direction` (`:atom`) - Defaults to `nil`.Must be one of `nil`, `:up`, or `:down`.

# `stat_strip`

The five-card "Field Report" stat strip: Sightings (sent), Delivery rate,
Open rate, Click rate, Bounce rate.

## Attributes

* `sightings` (`:string`) (required)
* `delivery_rate` (`:string`) (required)
* `open_rate` (`:string`) (required)
* `click_rate` (`:string`) (required)
* `bounce_rate` (`:string`) (required)

# `status_badge`

A status badge. One CSS class per status per DESIGN.md — never color alone
conveys status; the text label is always rendered.

## Attributes

* `status` (`:string`) (required)

---

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