Stepper

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class StepperAtAGlance(Component):
    template = """
      <c-CStepper label="Account setup" c-active="1" variant="soft">
        <c-CStep>Profile</c-CStep>
        <c-CStep>Security</c-CStep>
        <c-CStep>Review</c-CStep>
      </c-CStepper>
    """


preview = StepperAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class InteractiveStepper(Component):
    template = """
      <section x-data="{ active: 1 }">
        <c-CStepper
          label="Publication workflow"
          c-active="1"
          interactive
          $c-props="{ active, onActiveChange: (next) => active = next }"
        >
          <c-CStep>Draft</c-CStep>
          <c-CStep>Review</c-CStep>
          <c-CStep>Publish</c-CStep>
        </c-CStepper>
        <p>Current zero-based index: <strong x-text="active"></strong></p>
      </section>
    """


preview = InteractiveStepper()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NonlinearStepper(Component):
    template = """
      <section x-data="{ active: 0 }">
        <c-CStepper
          label="Profile sections"
          interactive
          c-linear="False"
          $c-props="{ active, onActiveChange: (next) => active = next }"
        >
          <c-CStep>Identity</c-CStep>
          <c-CStep>Preferences</c-CStep>
          <c-CStep>Notifications</c-CStep>
        </c-CStepper>
      </section>
    """


preview = NonlinearStepper()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class StepperStates(Component):
    template = """
      <c-CStepper label="Checkout" c-active="1" orientation="vertical" variant="outline">
        <c-CStep>
          <c-fill name="default">Delivery address</c-fill>
          <c-fill name="description">Saved</c-fill>
        </c-CStep>
        <c-CStep error>
          <c-fill name="default">Payment</c-fill>
          <c-fill name="description">Check the card number</c-fill>
        </c-CStep>
        <c-CStep optional>
          <c-fill name="default">Gift message</c-fill>
          <c-fill name="description">Optional</c-fill>
        </c-CStep>
      </c-CStepper>
    """


preview = StepperStates()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledStepper(Component):
    template = """
      <section x-data="{ active: 0 }">
        <c-CStepper
          label="Workspace setup"
          interactive
          c-linear="False"
          $c-props="{ active, onActiveChange: (next) => active = next }"
        >
          <c-CStep>Workspace</c-CStep>
          <c-CStep>Members</c-CStep>
          <c-CStep>Permissions</c-CStep>
        </c-CStepper>
        <c-CGroup>
          <c-CButton @click="active = Math.max(0, active - 1)">Previous</c-CButton>
          <c-CButton @click="active = Math.min(2, active + 1)">Next</c-CButton>
        </c-CGroup>
      </section>
    """


preview = ControlledStepper()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class StepperPresentation(Component):
    template = """
      <c-CStack>
        <c-CStepper label="Small plain" size="sm">
          <c-CStep>Start</c-CStep><c-CStep>Finish</c-CStep>
        </c-CStepper>
        <c-CStepper label="Medium soft" variant="soft" c-active="1">
          <c-CStep>Start</c-CStep><c-CStep>Finish</c-CStep>
        </c-CStepper>
        <c-CStepper label="Large vertical outline" orientation="vertical" variant="outline" size="lg">
          <c-CStep>Start</c-CStep><c-CStep>Finish</c-CStep>
        </c-CStepper>
      </c-CStack>
    """


preview = StepperPresentation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomizedStepper(Component):
    css = """
      .orchid-stepper {
        --cui-stepper-active-color: #7f56d9;
        --cui-stepper-complete-color: #039855;
        --cui-stepper-radius: 1.25rem;
      }
      .orchid-stepper [data-citry-ui-part="label"] { letter-spacing: 0.02em; }
    """
    template = """
      <c-CStepper label="Orchid order" c-active="1" variant="outline" class_="orchid-stepper">
        <c-CStep>Choose</c-CStep><c-CStep>Prepare</c-CStep><c-CStep>Deliver</c-CStep>
      </c-CStepper>
    """


preview = CustomizedStepper()
preview  # noqa: B018