Button Group

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ButtonGroupGlance(Component):
    template = """
      <c-CButtonGroup label="Telescope controls">
        <c-CButton variant="outline">Previous</c-CButton>
        <c-CButton variant="outline">Center</c-CButton>
        <c-CButton variant="outline">Next</c-CButton>
      </c-CButtonGroup>
    """


preview = ButtonGroupGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class RelatedActions(Component):
    template = """
      <c-CButtonGroup label="Map controls">
        <c-CButton variant="outline">Zoom in</c-CButton>
        <c-CButton variant="outline">Reset</c-CButton>
        <c-CButton variant="outline">Zoom out</c-CButton>
      </c-CButtonGroup>
    """


preview = RelatedActions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class Attachment(Component):
    template = """
      <c-CStack gap="md">
        <c-CButtonGroup label="Attached view controls">
          <c-CButton variant="outline">Map</c-CButton>
          <c-CButton variant="outline">Sky</c-CButton>
        </c-CButtonGroup>
        <c-CButtonGroup label="Spaced view controls" c-attached="False">
          <c-CButton variant="outline">Map</c-CButton>
          <c-CButton variant="outline">Sky</c-CButton>
        </c-CButtonGroup>
      </c-CStack>
    """


preview = Attachment()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class Layout(Component):
    template = """
      <c-CStack gap="lg">
        <c-CButtonGroup label="Time range" c-grow="True">
          <c-CButton variant="outline">Night</c-CButton>
          <c-CButton variant="outline">Week</c-CButton>
          <c-CButton variant="outline">Month</c-CButton>
        </c-CButtonGroup>
        <c-CButtonGroup label="Export format" orientation="vertical">
          <c-CButton variant="outline">Star chart</c-CButton>
          <c-CButton variant="outline">Observation log</c-CButton>
        </c-CButtonGroup>
      </c-CStack>
    """


preview = Layout()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class Composition(Component):
    template = """
      <c-CButtonGroup label="Expedition actions">
        <c-CButton intent="primary">Save route</c-CButton>
        <c-CButton variant="outline" href="/preview">Preview</c-CButton>
        <c-CButton variant="ghost" intent="danger">Discard</c-CButton>
      </c-CButtonGroup>
    """


preview = Composition()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class Customization(Component):
    template = """
      <c-CButtonGroup class_="orbit-group" label="Orbit controls">
        <c-CButton variant="outline">Inner</c-CButton>
        <c-CButton variant="outline">Stable</c-CButton>
        <c-CButton variant="outline">Outer</c-CButton>
      </c-CButtonGroup>
    """
    css = """
      :where(.orbit-group) {
        --cui-button-group-radius: 999px;
        --cui-button-group-border-width: 2px;
      }
    """


preview = Customization()
preview  # noqa: B018