Switch

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SwitchAtAGlance(Component):
    template = """
      <section class="switch-room">
        <h2>Evening room</h2>
        <c-CSwitch checked>Reading lamp</c-CSwitch>
        <c-CSwitch>Window shades</c-CSwitch>
        <c-CSwitch checked>
          <c-fill name="default">Quiet ventilation</c-fill>
          <c-fill name="description">Keep air moving below the bedroom.</c-fill>
        </c-CSwitch>
      </section>
    """
    css = """
      :where(.switch-room) {
        display: grid;
        gap: 0.9rem;
        max-inline-size: 28rem;
        padding: 1.25rem;
        border: 1px solid light-dark(#c8bda8, #665d50);
        border-radius: 0.9rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.switch-room h2) {
        margin: 0;
      }
    """


preview = SwitchAtAGlance()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class HomeSettings(Component):
    template = """
      <c-CStack>
        <c-CSwitch checked>Porch light</c-CSwitch>
        <c-CSwitch>Robot vacuum schedule</c-CSwitch>
        <c-CSwitch checked>Door chime</c-CSwitch>
      </c-CStack>
    """


preview = HomeSettings()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class DescribedSwitches(Component):
    template = """
      <c-CStack>
        <c-CSwitch checked>
          <c-fill name="default">Air purifier</c-fill>
          <c-fill name="description">Runs quietly until the room reaches clean-air target.</c-fill>
        </c-CSwitch>
        <c-CSwitch disabled>
          <c-fill name="default">Fireplace fan</c-fill>
          <c-fill name="description">Available while the fireplace is warm.</c-fill>
        </c-CSwitch>
      </c-CStack>
    """


preview = DescribedSwitches()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledSwitch(Component):
    template = """
      <section class="switch-controlled" x-data="{enabled: true}">
        <c-CSwitch
          $c-props="{checked: enabled}"
          @input="enabled = $event.target.checked"
        >Reading mode</c-CSwitch>
        <output x-text="enabled ? 'Reading mode is on' : 'Reading mode is off'"></output>
      </section>
    """
    css = """
      :where(.switch-controlled) {
        display: grid;
        gap: 0.7rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }

      :where(.switch-controlled output) {
        color: light-dark(#3f6212, #bef264);
        font-size: 0.82rem;
      }
    """


preview = ControlledSwitch()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SwitchForm(Component):
    template = """
      <form
        class="switch-form"
        x-data="{result: ''}"
        @submit.prevent="result = new FormData($event.target).has('quiet_hours') ? 'Saved' : 'Enable quiet hours'"
      >
        <c-CSwitch name="quiet_hours" value="enabled" required>Quiet hours</c-CSwitch>
        <c-CGroup>
          <c-CButton type="submit">Save home settings</c-CButton>
          <button type="reset">Reset</button>
        </c-CGroup>
        <output x-text="result"></output>
      </form>
    """
    css = """
      :where(.switch-form) {
        display: grid;
        gap: 1rem;
        color: CanvasText;
        font-family: ui-sans-serif, system-ui, sans-serif;
      }
    """


preview = SwitchForm()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SwitchPresentation(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <c-CStack>
        <c-for each="size in sizes">
          <c-CSwitch c-size="size" checked>{{ size }} switch</c-CSwitch>
        </c-for>
        <c-CSwitch label_pos="start" checked>Label before track</c-CSwitch>
      </c-CStack>
    """

    def template_data(
        self,
        kwargs: Kwargs,  # noqa: ARG002
        slots: Slots,  # noqa: ARG002
    ) -> dict[str, object]:
        return {"sizes": ("sm", "md", "lg")}


preview = SwitchPresentation()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class SwitchField(Component):
    template = """
      <c-CField control_id="away-mode" required>
        <c-fill name="label">Away mode</c-fill>
        <c-fill name="default"><c-CSwitch name="away_mode" /></c-fill>
        <c-fill name="description">Lower heating and pause routine lighting.</c-fill>
        <c-fill name="error">Enable away mode before leaving.</c-fill>
      </c-CField>
    """


preview = SwitchField()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ChoiceSemantics(Component):
    template = """
      <c-CStack>
        <c-CSwitch checked>
          <c-fill name="default">Automatic hallway lighting</c-fill>
          <c-fill name="description">Takes effect immediately.</c-fill>
        </c-CSwitch>
        <c-CCheckbox>
          <c-fill name="default">Include spare keys in the move checklist</c-fill>
          <c-fill name="description">A selection, not an immediate setting.</c-fill>
        </c-CCheckbox>
      </c-CStack>
    """


preview = ChoiceSemantics()

preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomSwitch(Component):
    template = """
      <section class="switch-oak">
        <c-CSwitch checked size="lg">Oak reading nook</c-CSwitch>
      </section>
    """
    css = """
      :where(.switch-oak) {
        --cui-switch-on-color: light-dark(#7c4a25, #d8a06f);
        --cui-switch-off-color: light-dark(#8f8376, #9f9385);
        --cui-switch-thumb-color: light-dark(#fffaf2, #2a2119);
        --cui-switch-width: 3.4rem;
        --cui-switch-height: 1.9rem;
        padding: 1rem;
        border: 1px solid light-dark(#c6ad91, #725b44);
        border-radius: 0.8rem;
      }
    """


preview = CustomSwitch()

preview  # noqa: B018