Number input

class SeatOrder(PageState):
    seats: int = field(default=5)


def seats_changed(order: SeatOrder) -> None:
    """The typed parameter receives the new count; the total follows."""


@refreshable(deps=[SeatOrder])
def order_total() -> None:
    seats = SeatOrder().seats
    with ui.hstack(justify="between"):
        ui.text(f"{seats} × €{SEAT_PRICE:.0f} / month", color="muted")
        ui.heading(f"€{seats * SEAT_PRICE:,.2f}", level=3, size="xl")


def seat_calculator() -> None:
    with ui.card(padding="md", classes="w-full max-w-sm"), ui.vstack(gap="md"):
        with ui.form_field(label="Seats", hint="From 1 to 50 on the Team plan."):
            ui.number_input(value=SeatOrder().seats, min=1, max=50,
                            on_change=seats_changed)
        ui.divider()
        order_total()

def bounds_and_steps() -> None:
    with ui.grid(cols={"base": 1, "sm": 3}, gap="md", classes="w-full max-w-2xl"):
        with ui.form_field(label="Discount (%)", hint="Steps of 5."):
            ui.number_input(value=15, min=0, max=100, step=5)
        with ui.form_field(label="Parcel weight (kg)", hint="Steps of 0.1."):
            ui.number_input(value=2.4, min=0.1, max=30, step=0.1)
        with ui.form_field(label="Retries", hint="Between 0 and 5."):
            ui.number_input(value=3, min=0, max=5)

def sizes() -> None:
    with ui.vstack(gap="sm", classes="w-full max-w-xs"):
        for size in ("xs", "sm", "md", "lg", "xl"):
            ui.number_input(size=size, placeholder=f"Quantity ({size})", min=0)

def booking() -> None:
    with ui.card(padding="md", classes="w-full max-w-lg"), ui.vstack(gap="md"):
        ui.heading("Harbour View Loft · 3 nights", level=3, size="md")
        with ui.grid(cols={"base": 1, "sm": 3}, gap="md"):
            with ui.form_field(label="Adults"):
                ui.number_input(value=2, min=1, max=6, color="secondary")
            with ui.form_field(label="Children"):
                ui.number_input(value=0, min=0, max=4, color="secondary")
            with ui.form_field(label="Pets", hint="Not allowed here."):
                ui.number_input(value=0, disabled=True)