Color Picker

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ColorPickerAtAGlance(Component):
    template = '<c-CColorPicker label="Brand color" value="#7f56d9" />'


preview = ColorPickerAtAGlance()
preview  # noqa: B018

# ruff: noqa: E501 - embedded Citry templates remain readable as authored HTML

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ColorPickerFormats(Component):
    template = """<div class="color-format-grid"><c-CColorPicker label="RGB color" value="#12b76a" format="rgb" /><c-CColorPicker label="HSL color" value="#f79009" format="hsl" /></div>"""
    css = ":where(.color-format-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}"


preview = ColorPickerFormats()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201 - public snippets keep focus on component use

import citry_ui
from citry import Component, citry
from citry_ui import CColorSwatch

citry.register_library(citry_ui)


class ColorPickerSwatches(Component):
    def template_data(self, _kwargs, _slots):
        return {
            "swatches": [
                CColorSwatch("#7f56d9", "Violet"),
                CColorSwatch("#12b76a", "Green"),
                CColorSwatch("#f04438", "Red"),
                CColorSwatch("#f79009", "Orange"),
            ]
        }

    template = '<c-CColorPicker label="Accent" c-swatches="swatches" />'


preview = ColorPickerSwatches()
preview  # noqa: B018

# ruff: noqa: E501 - Alpine expression remains readable in the public example

from citry import Component


class ControlledColorPicker(Component):
    template = """
      <section x-data="{color:'#7f56d9',open:false}">
        <c-CColorPicker label="Controlled accent" $c-props="{value:color,open,onValueChange:(next)=>color=next,onOpenChange:(next)=>open=next}" />
        <output x-text="color">#7f56d9</output>
      </section>
    """


preview = ControlledColorPicker()
preview  # noqa: B018

# ruff: noqa: E501 - embedded Citry templates remain readable as authored HTML

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NativeColorForm(Component):
    template = """<form><c-CColorPicker label="Profile color" name="profile_color" value="#1570ef" /><button type="reset">Reset</button><button type="submit">Save</button></form>"""


preview = NativeColorForm()
preview  # noqa: B018

# ruff: noqa: ANN001, ANN201 - public snippets keep focus on component use

import citry_ui
from citry import Component, citry
from citry_ui import CColorSwatch

citry.register_library(citry_ui)


class AccessibleColorPicker(Component):
    def template_data(self, _kwargs, _slots):
        return {"swatches": [CColorSwatch("#005ea8", "Accessible blue"), CColorSwatch("#00703c", "Accessible green")]}

    template = '<c-CColorPicker label="Published theme color" value="#005ea8" c-swatches="swatches" readonly />'


preview = AccessibleColorPicker()
preview  # noqa: B018