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

DateStrip — a horizontal scrollable strip of day cards (week selector).

Renders a row of date cards, each displaying the day number and abbreviated
day name. Supports selected state, today highlight, click events, size
variants, and optional horizontal scrolling. Zero JavaScript.

## Examples

    <%!-- Basic week strip --%>
    <.date_strip dates={@week_dates} />

    <%!-- With selected date --%>
    <.date_strip dates={@week_dates} selected_date={@selected} on_select="pick_date" />

    <%!-- With today highlight --%>
    <.date_strip dates={@week_dates} today={Date.utc_today()} selected_date={@selected} />

    <%!-- Small variant --%>
    <.date_strip dates={@week_dates} size={:sm} />

    <%!-- Non-scrollable (wraps) --%>
    <.date_strip dates={@week_dates} scrollable={false} />

# `date_strip`

Renders a horizontal strip of date cards.

## Examples

    <.date_strip dates={@dates} selected_date={@selected} on_select="pick_date" today={Date.utc_today()} />

## Attributes

* `dates` (`:list`) (required) - List of Date.t() values to render as cards.
* `selected_date` (`:any`) - Currently selected Date.t(), or nil for no selection. Defaults to `nil`.
* `today` (`:any`) - Date.t() to highlight as today. Caller is responsible for supplying this. Defaults to `nil`.
* `on_select` (`:string`) - phx-click event name fired when a card is clicked. Receives phx-value-date (ISO 8601). Defaults to `nil`.
* `size` (`:atom`) - Card size variant. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `scrollable` (`:boolean`) - When true (default) the strip scrolls horizontally. When false, cards wrap. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes merged onto the wrapper. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the wrapper div.

---

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