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

TimeSlotGrid component — a responsive grid of time-slot buttons for appointment booking.

Displays time slots as pill buttons arranged in a configurable column grid (2, 3, or 4
columns). Each slot may be in one of four states: default (available), selected,
disabled (individual slot), or fully disabled (entire grid).

Zero JavaScript — state is managed by the LiveView.

## States

| State               | Description                                              |
|---------------------|----------------------------------------------------------|
| available (default) | White bg, border, hover highlight                        |
| selected            | Blue border (2 px), blue text, semibold                  |
| slot disabled       | Muted bg, opacity-50, cursor-not-allowed                 |
| grid disabled       | All slots muted, opacity-50, cursor-not-allowed          |

## Slot formats accepted

- Plain string: `"9:00 AM"` — value and label both equal the string
- Map with value only: `%{value: "9:00 AM"}` — label defaults to value
- Map with value + label: `%{value: "9:00AM", label: "9:00 AM"}`
- Full map: `%{value: "9:00AM", label: "9:00 AM", disabled: true}`

## Examples

    <%!-- Basic usage --%>
    <.time_slot_grid slots={~w(9:00AM 9:30AM 10:00AM)} />

    <%!-- With selected slot and LiveView handler --%>
    <.time_slot_grid
      slots={@available_slots}
      selected={@selected_time}
      on_select="pick_slot"
    />

    <%!-- 4-column grid, grid-level disabled --%>
    <.time_slot_grid slots={@slots} cols={4} disabled={@loading} />

# `time_slot_grid`

Renders a grid of time-slot pill buttons.

## Examples

    <.time_slot_grid slots={~w(3:00PM 3:30PM 4:00PM)} selected="3:30PM" on_select="pick" />

## Attributes

* `slots` (`:list`) (required) - List of time slot strings or maps (%{value:, label:, disabled:}).
* `selected` (`:string`) - Value of the currently selected slot. Defaults to `nil`.
* `on_select` (`:string`) - phx-click event name fired when a slot is clicked. Defaults to `nil`.
* `cols` (`:integer`) - Number of grid columns — 2, 3, or 4 (defaults to 3). Defaults to `3`.
* `disabled` (`:boolean`) - Disables the entire grid — all slots become non-interactive. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root wrapper element.

---

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