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

Color swatch card component for displaying a named color with its hex, RGB,
and HSL values, plus an optional one-click copy button.

Designed for design-system documentation pages, theme browsers, and any UI
where users need to inspect or copy color values at a glance.

## Anatomy

The card is a bordered rounded panel with two regions (top to bottom):

1. **Swatch block** — a solid-color `div` whose `background-color` is set
   from the `hex` attribute via an inline style. Height varies by `size`.
2. **Info panel** — shows `name`, monospace `hex` badge, optional `rgb` /
   `hsl` labels, a copy button (when `copyable={true}`), and a `:tags` slot.

## Size reference

| `:size` | Swatch height   |
|---------|-----------------|
| `:sm`   | `h-16` (64px)   |
| `:md`   | `h-24` (96px)   |
| `:lg`   | `h-32` (128px)  |

## Copy button

When `copyable={true}` (default), a `copy_button/1` is rendered beside the
hex badge. Clicking it writes the hex value to the clipboard and shows a
brief checkmark confirmation via the `PhiaCopyButton` JS hook.

## Examples

    <%!-- Minimal — just name and hex --%>
    <.color_swatch_card name="Ocean Blue" hex="#1E90FF" />

    <%!-- With all color formats and large swatch --%>
    <.color_swatch_card
      name="Sunset"
      hex="#FF6B35"
      rgb="rgb(255, 107, 53)"
      hsl="hsl(18, 100%, 60%)"
      size={:lg}
    />

    <%!-- No copy button, with tag slot --%>
    <.color_swatch_card name="Forest" hex="#228B22" copyable={false}>
      <:tags>
        <.badge variant={:secondary}>nature</.badge>
      </:tags>
    </.color_swatch_card>

## Design system palette gallery

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <%= for color <- @palette do %>
        <.color_swatch_card
          name={color.name}
          hex={color.hex}
          rgb={color.rgb}
        />
      <% end %>
    </div>

# `color_swatch_card`

Renders a color swatch card displaying a color block with its name and hex value.

## Sizes

- `:sm` — h-16 color block
- `:md` — h-24 color block
- `:lg` — h-32 color block

## Examples

    <.color_swatch_card name="Ocean Blue" hex="#1E90FF" />

    <.color_swatch_card name="Sunset" hex="#FF6B35" rgb="rgb(255, 107, 53)" size={:lg} />

    <.color_swatch_card name="Forest" hex="#228B22" copyable={false}>
      <:tags><span class="badge">nature</span></:tags>
    </.color_swatch_card>

## Attributes

* `name` (`:string`) (required) - Color name (e.g. 'Ocean Blue').
* `hex` (`:string`) (required) - Hex color value (e.g. '#1E90FF').
* `rgb` (`:string`) - Optional RGB representation (e.g. 'rgb(30, 144, 255)'). Defaults to `nil`.
* `hsl` (`:string`) - Optional HSL representation (e.g. 'hsl(210, 100%, 56%)'). Defaults to `nil`.
* `copyable` (`:boolean`) - Whether to show a copy button for the hex value. Defaults to `true`.
* `size` (`:atom`) - Size variant controlling swatch height. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the wrapper element.
## Slots

* `tags` - Optional tags to display below the color info.

---

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