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

Drum roll / iOS-style scroll wheel picker component.

Each column shows 5 visible items at a time: the center item is the selected
value (large, bold, full opacity). Adjacent rows are progressively smaller and
more transparent, and gradient overlays at the top and bottom create the
classic drum-wheel illusion. Zero JavaScript — all state is managed server-side.

## Column map keys

Each entry in `columns` must be a map with:

| Key              | Type    | Description                          |
|------------------|---------|--------------------------------------|
| `:name`          | string  | Column identifier (used in events)   |
| `:items`         | list    | All selectable string values         |
| `:selected`      | string  | Currently selected value             |

Clicking a non-selected visible item fires the `on_change` event with
`phx-value-column` (column name) and `phx-value-value` (new value).

## Examples

    <%!-- Single-column month picker --%>
    <.wheel_picker
      columns={[%{name: "month", items: @months, selected: @month}]}
      on_change="month_changed"
    />

    <%!-- Multi-column date picker --%>
    <.wheel_picker
      columns={[
        %{name: "month", items: @months, selected: @month},
        %{name: "day",   items: @days,   selected: @day},
        %{name: "year",  items: @years,  selected: @year}
      ]}
      on_change="date_changed"
    />

# `wheel_picker`

Renders an iOS-style drum-roll wheel picker.

## Attributes

* `columns` (required) — list of column maps, each with `:name`, `:items`,
  and `:selected` keys.
* `on_change` — LiveView event name fired when a non-selected item is clicked.
  The event receives `phx-value-column` and `phx-value-value`.
* `separator` — when `true` (default) a vertical divider line separates
  adjacent columns via Tailwind's `divide-x` utility.
* `class` — additional CSS classes merged onto the wrapper element.
* `rest` — any other HTML attributes forwarded to the root `<div>`.

## Attributes

* `columns` (`:list`) (required) - List of column maps (%{name:, items:, selected:}).
* `on_change` (`:string`) - LiveView event name for column value changes. Defaults to `nil`.
* `separator` (`:boolean`) - Show divider line between columns (divide-x). Defaults to `true`.
* `class` (`:string`) - Additional CSS classes applied to the wrapper. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.

---

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