Select

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class SelectAtAGlance(Component):
    template = """
      <c-CField>
        <c-fill name="label">Workspace</c-fill>
        <c-fill name="description">Choose where new observations belong.</c-fill>
        <c-fill name="default">
          <c-CSelect c-options="options" placeholder="Choose a workspace" value="atlas" />
        </c-fill>
      </c-CField>
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "options": [
                CSelectOption("atlas", "Atlas research", "12 collaborators"),
                CSelectOption("aurora", "Aurora field notes", "7 collaborators"),
                CSelectOption("archive", "Archived studies", disabled=True),
            ]
        }


preview = SelectAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class SelectForm(Component):
    template = """
      <form x-data @submit.prevent="result = Array.from(new FormData($event.target).entries())">
        <c-CField required>
          <c-fill name="label">Review status</c-fill>
          <c-fill name="default">
            <c-CSelect c-options="options" placeholder="Choose a status" name="status" />
          </c-fill>
        </c-CField>
        <c-CButton type="submit">Save</c-CButton>
        <c-CButton type="reset" variant="ghost">Reset</c-CButton>
        <output x-text="JSON.stringify(result)"></output>
      </form>
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"options": [CSelectOption("draft", "Draft"), CSelectOption("review", "Ready for review")]}


preview = SelectForm()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class GroupedSelect(Component):
    template = """
      <c-CSelect
        c-options="options"
        placeholder="Choose a destination"
        c-trigger_attrs="{'aria-label':'Destination'}"
      />
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "options": [
                CSelectOption("oslo", "Oslo", group="Europe"),
                CSelectOption("prague", "Prague", group="Europe"),
                CSelectOption("kyoto", "Kyoto", group="Asia"),
                CSelectOption("seoul", "Seoul", group="Asia"),
            ]
        }


preview = GroupedSelect()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class ControlledSelect(Component):
    template = """
      <div x-data>
        <c-CSelect
          c-options="options"
          placeholder="Choose a status"
          value="draft"
          c-trigger_attrs="{'aria-label':'Status'}"
          $c-props="{
            value:$store.selectExample.value,
            onValueChange:(next) => $store.selectExample.value = next,
          }"
        />
        <p>Current: <strong x-text="$store.selectExample.value"></strong></p>
      </div>
    """
    js = "Alpine.store('selectExample', {value:'draft'});"

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"options": [CSelectOption("draft", "Draft"), CSelectOption("published", "Published")]}


preview = ControlledSelect()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class SelectStates(Component):
    template = """
      <c-CStack>
        <c-CSelect
          c-options="options" placeholder="Choose" value="active" readonly
          c-trigger_attrs="{'aria-label':'Read-only state'}"
        />
        <c-CSelect
          c-options="options" placeholder="Choose" disabled
          c-trigger_attrs="{'aria-label':'Disabled state'}"
        />
        <c-CSelect c-options="options" placeholder="Choose" invalid c-trigger_attrs="{'aria-label':'Invalid state'}" />
      </c-CStack>
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"options": [CSelectOption("active", "Active"), CSelectOption("paused", "Paused")]}


preview = SelectStates()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class SelectVariants(Component):
    template = """
      <c-CStack>
        <c-CSelect
          c-options="options" placeholder="Outline" variant="outline" size="sm"
          c-trigger_attrs="{'aria-label':'Small outline'}"
        />
        <c-CSelect
          c-options="options" placeholder="Filled" variant="filled"
          c-trigger_attrs="{'aria-label':'Medium filled'}"
        />
        <c-CSelect
          c-options="options" placeholder="Plain" variant="plain" size="lg"
          c-trigger_attrs="{'aria-label':'Large plain'}"
        />
      </c-CStack>
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"options": [CSelectOption("one", "One"), CSelectOption("two", "Two")]}


preview = SelectVariants()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class KeyboardSelect(Component):
    template = """
      <c-CSelect
        c-options="options"
        placeholder="Focus and use the keyboard"
        loop
        c-trigger_attrs="{'aria-label':'Planet keyboard example'}"
      />
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {
            "options": [
                CSelectOption("earth", "Earth"),
                CSelectOption("mars", "Mars"),
                CSelectOption("jupiter", "Jupiter"),
            ]
        }


preview = KeyboardSelect()
preview  # noqa: B018

import citry_ui
from citry import Component, citry
from citry_ui import CSelectOption

citry.register_library(citry_ui)


class CustomizedSelect(Component):
    css = """
      .brand-select {
        --cui-select-radius: 1rem;
        --cui-select-selected-background: #53389e;
        --cui-select-selected-foreground: white;
        --cui-select-focus-color: #7f56d9;
        inline-size: min(100%, 22rem);
      }
    """
    template = """
      <c-CSelect
        class_="brand-select"
        c-options="options"
        placeholder="Choose a collection"
        c-trigger_attrs="{'aria-label':'Collection'}"
      />
    """

    def template_data(self, _kwargs: object, _slots: object) -> dict[str, object]:
        return {"options": [CSelectOption("botany", "Botany"), CSelectOption("astronomy", "Astronomy")]}


preview = CustomizedSelect()
preview  # noqa: B018