Toggle

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToggleGlance(Component):
    template = """
      <c-CToggleGroup label="Star map layers" value="constellations" c-mandatory="True">
        <c-CToggle value="constellations">Constellations</c-CToggle>
        <c-CToggle value="planets">Planets</c-CToggle>
        <c-CToggle value="grid">Grid</c-CToggle>
      </c-CToggleGroup>
    """


preview = ToggleGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class StandaloneToggle(Component):
    template = """
      <c-CToggle c-pressed="True">Pin observation</c-CToggle>
    """


preview = StandaloneToggle()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToggleGroups(Component):
    template = """
      <c-CStack gap="lg">
        <c-CToggleGroup label="Chart scale" value="linear">
          <c-CToggle value="linear">Linear</c-CToggle>
          <c-CToggle value="log">Log</c-CToggle>
        </c-CToggleGroup>
        <c-CToggleGroup label="Visible layers" c-value="['stars', 'labels']" c-multiple="True">
          <c-CToggle value="stars">Stars</c-CToggle>
          <c-CToggle value="labels">Labels</c-CToggle>
          <c-CToggle value="grid">Grid</c-CToggle>
        </c-CToggleGroup>
      </c-CStack>
    """


preview = ToggleGroups()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class MandatoryToggle(Component):
    template = """
      <c-CToggleGroup label="Coordinate system" value="equatorial" c-mandatory="True">
        <c-CToggle value="equatorial">Equatorial</c-CToggle>
        <c-CToggle value="galactic">Galactic</c-CToggle>
      </c-CToggleGroup>
    """


preview = MandatoryToggle()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledToggle(Component):
    template = """
      <section x-data="{ view: 'sky' }">
        <p>Current view: <strong x-text="view"></strong></p>
        <c-CToggleGroup
          label="Observation view"
          value="sky"
          $c-props="{ value: view, onValueChange: (next) => view = next }"
        >
          <c-CToggle value="sky">Sky</c-CToggle>
          <c-CToggle value="spectrum">Spectrum</c-CToggle>
        </c-CToggleGroup>
      </section>
    """


preview = ControlledToggle()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TogglePresentation(Component):
    template = """
      <c-CStack gap="md">
        <c-for each="variant in variants">
          <c-CToggleGroup c-label="variant + ' display'" value="one" c-variant="variant">
            <c-CToggle value="one">One</c-CToggle>
            <c-CToggle value="two">Two</c-CToggle>
          </c-CToggleGroup>
        </c-for>
      </c-CStack>
    """

    def template_data(self, kwargs, slots):  # noqa: ANN001, ANN201, ARG002
        return {"variants": ("soft", "outline", "plain")}


preview = TogglePresentation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ToggleCustomization(Component):
    template = """
      <c-CToggleGroup class_="nebula-toggle" label="Nebula filter" value="oxygen">
        <c-CToggle value="oxygen">Oxygen</c-CToggle>
        <c-CToggle value="hydrogen">Hydrogen</c-CToggle>
      </c-CToggleGroup>
    """
    css = """
      :where(.nebula-toggle) {
        --cui-toggle-pressed-background: light-dark(#7c3aed, #a78bfa);
        --cui-toggle-pressed-foreground: white;
        --cui-toggle-radius: 999px;
      }
    """


preview = ToggleCustomization()
preview  # noqa: B018