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

Color picker component with native `<input type="color">`, optional swatches,
and a live value display.

Wires up to the `PhiaColorPicker` JavaScript hook which:
  - Syncs the value display span in real time as the user drags the color wheel.
  - Fires a `pushEvent` to the parent LiveView whenever the selected colour
    changes (both from the native input and from swatch clicks).
  - Handles swatch clicks by updating the colour input and firing the event.

Pure HEEx structure — the JS hook is the only dynamic layer.

## Examples

    <%!-- Basic colour picker --%>
    <.color_picker id="theme-color" value={@color} on_change="update_color" />

    <%!-- With swatches and hex format --%>
    <.color_picker
      id="brand-color"
      value={@color}
      format={:hex}
      swatches={["#FF5733", "#4CAF50", "#2196F3"]}
      on_change="pick_color"
    />

## LiveView event handler

The hook pushes `{value: "#rrggbb"}` to the server:

    def handle_event("update_color", %{"value" => color}, socket) do
      {:noreply, assign(socket, color: color)}
    end

## Accessibility

Each swatch button carries an `aria-label` identifying the colour value so
that screen-reader users can distinguish them.

# `color_picker`

Renders a colour picker with a native colour input, a live hex value display,
and optional colour swatches.

## Example

    <.color_picker
      id="accent-color"
      value={@accent}
      swatches={["#6366F1", "#EC4899", "#10B981"]}
      on_change="set_accent"
    />

## Attributes

* `id` (`:string`) (required) - Unique DOM id for the component root and used to derive the input id.
* `value` (`:string`) - Initial/current hex colour string, e.g. "#FF5733". Defaults to `"#000000"`.
* `on_change` (`:string`) - LiveView event name pushed to the server when the colour changes. Defaults to `nil`.
* `format` (`:atom`) - Colour format. Currently stored for future server-side conversion; default is `:hex`. Defaults to `:hex`. Must be one of `:hex`, or `:rgb`.
* `swatches` (`:list`) - List of hex colour strings rendered as quick-pick swatch buttons. Defaults to `[]`.
* `class` (`:string`) - Additional CSS classes merged via `cn/1`. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root container `<div>`.

---

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