Listbox

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListboxAtAGlance(Component):
    template = """
      <c-CListbox label="Choose a workspace" value="atlas" variant="soft">
        <c-CListboxOption value="atlas">
          <c-fill name="default">Atlas research</c-fill>
          <c-fill name="description">12 collaborators</c-fill>
          <c-fill name="end">Active</c-fill>
        </c-CListboxOption>
        <c-CListboxOption value="aurora">
          <c-fill name="default">Aurora field notes</c-fill>
          <c-fill name="description">7 collaborators</c-fill>
        </c-CListboxOption>
        <c-CListboxOption value="archive" disabled>Archived studies</c-CListboxOption>
      </c-CListbox>
    """


preview = ListboxAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SingleSelection(Component):
    template = """
      <c-CListbox label="Density" value="comfortable" mandatory variant="outline">
        <c-CListboxOption value="compact">Compact</c-CListboxOption>
        <c-CListboxOption value="comfortable">Comfortable</c-CListboxOption>
        <c-CListboxOption value="spacious">Spacious</c-CListboxOption>
      </c-CListbox>
    """


preview = SingleSelection()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class MultipleSelection(Component):
    template = """
      <c-CListbox label="Include signals" multiple c-value="['temperature', 'humidity']" variant="outline">
        <c-CListboxOption value="temperature">Temperature</c-CListboxOption>
        <c-CListboxOption value="humidity">Humidity</c-CListboxOption>
        <c-CListboxOption value="pressure">Pressure</c-CListboxOption>
        <c-CListboxOption value="wind">Wind speed</c-CListboxOption>
      </c-CListbox>
    """


preview = MultipleSelection()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class GroupedOptions(Component):
    template = """
      <c-CListbox label="Choose a destination" value="prague">
        <c-CListboxGroup label="Europe">
          <c-CListboxOption value="prague">Prague</c-CListboxOption>
          <c-CListboxOption value="lisbon">Lisbon</c-CListboxOption>
        </c-CListboxGroup>
        <c-CListboxGroup label="Asia Pacific">
          <c-CListboxOption value="kyoto">Kyoto</c-CListboxOption>
          <c-CListboxOption value="wellington">Wellington</c-CListboxOption>
        </c-CListboxGroup>
      </c-CListbox>
    """


preview = GroupedOptions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledListbox(Component):
    template = """
      <div x-data>
        <c-CListbox
          label="Review status"
          value="draft"
          $c-props="{
            value: $store.listboxExample.value,
            onValueChange: (next) => $store.listboxExample.value = next,
          }"
        >
          <c-CListboxOption value="draft">Draft</c-CListboxOption>
          <c-CListboxOption value="review">Ready for review</c-CListboxOption>
          <c-CListboxOption value="approved">Approved</c-CListboxOption>
        </c-CListbox>
        <p>Current: <strong x-text="$store.listboxExample.value"></strong></p>
      </div>
    """
    js = """
      Alpine.store('listboxExample', {value: 'draft'});
    """


preview = ControlledListbox()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DisabledListbox(Component):
    template = """
      <c-CStack gap="lg">
        <c-CListbox label="Deployment region" value="eu" variant="outline">
          <c-CListboxOption value="eu">Europe</c-CListboxOption>
          <c-CListboxOption value="us" disabled>United States — unavailable</c-CListboxOption>
          <c-CListboxOption value="apac">Asia Pacific</c-CListboxOption>
        </c-CListbox>
        <c-CListbox label="Locked policy" value="strict" disabled variant="soft">
          <c-CListboxOption value="standard">Standard</c-CListboxOption>
          <c-CListboxOption value="strict">Strict</c-CListboxOption>
        </c-CListbox>
      </c-CStack>
    """


preview = DisabledListbox()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class KeyboardListbox(Component):
    template = """
      <c-CListbox label="Jump to a city" value="brno" loop variant="outline">
        <c-CListboxOption value="brno">Brno</c-CListboxOption>
        <c-CListboxOption value="budapest">Budapest</c-CListboxOption>
        <c-CListboxOption value="krakow">Kraków</c-CListboxOption>
        <c-CListboxOption value="prague">Prague</c-CListboxOption>
        <c-CListboxOption value="vienna">Vienna</c-CListboxOption>
      </c-CListbox>
    """


preview = KeyboardListbox()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedListbox(Component):
    css = """
      .copper-listbox {
        --cui-listbox-radius: 1.1rem;
        --cui-listbox-selected-background: light-dark(#7c2d12, #fed7aa);
        --cui-listbox-selected-foreground: light-dark(#fff7ed, #431407);
        --cui-listbox-border-color: light-dark(#c2410c, #fdba74);
        --cui-listbox-option-padding: 0.7rem 0.8rem;
      }
    """
    template = """
      <c-CListbox label="Finish" value="copper" class_="copper-listbox" variant="outline">
        <c-CListboxOption value="copper">
          <c-fill name="start"><span aria-hidden="true">◆</span></c-fill>
          <c-fill name="default">Burnished copper</c-fill>
          <c-fill name="description">Warm and tactile</c-fill>
        </c-CListboxOption>
        <c-CListboxOption value="slate">Deep slate</c-CListboxOption>
        <c-CListboxOption value="linen">Soft linen</c-CListboxOption>
      </c-CListbox>
    """


preview = CustomizedListbox()
preview  # noqa: B018