NumberInput

from decimal import Decimal
from typing import Any

import citry_ui
from citry import Component, citry
from citry_ui import CNumberInput

citry.register_library(citry_ui)


class BasicNumberInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]:  # noqa: ARG002
        return {
            "python_control": CNumberInput(
                name="threshold",
                value=Decimal("2.5"),
                min=Decimal(0),
                max=Decimal(10),
                step=Decimal("0.5"),
                input_attrs={"aria-label": "Python threshold"},
            )
        }

    template = """
      <section class="number-input-demo-grid">
        <c-CField required>
          <c-fill name="label">Crates</c-fill>
          <c-fill name="description">Choose from 1 through 20.</c-fill>
          <c-fill name="default">
            <c-CNumberInput name="crates" value="2" min="1" max="20" />
          </c-fill>
        </c-CField>
        <article><h3>Python composition</h3>{{ python_control }}</article>
      </section>
    """

    css = """
      :where(.number-input-demo-grid) {
        display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;align-items:start
      }
      :where(.number-input-demo-grid article) { display:grid;gap:.75rem }
      :where(.number-input-demo-grid h3) { margin:0 }
    """


preview = BasicNumberInput()
preview  # noqa: B018

from citry import Component


class ExactDecimalNumberInput(Component):
    template = """
      <section class="number-input-example-stack">
        <c-CField>
          <c-fill name="label">Calibration offset</c-fill>
          <c-fill name="description">Exact increments of 0.0001.</c-fill>
          <c-fill name="default">
            <c-CNumberInput name="offset" value="0.1001" min="-1" max="1" step="0.0001" />
          </c-fill>
        </c-CField>
        <p>The submitted enhanced value remains the exact string <code>0.1001</code>.</p>
      </section>
    """
    css = ":where(.number-input-example-stack){display:grid;gap:.75rem;max-inline-size:28rem}"


preview = ExactDecimalNumberInput()
preview  # noqa: B018

from citry import Component


class NumberInputConstraints(Component):
    template = """
      <section class="number-input-example-grid">
        <c-CField required>
          <c-fill name="label">Validate the draft</c-fill>
          <c-fill name="description">Enter a quarter step from 0 through 3.</c-fill>
          <c-fill name="default"><c-CNumberInput value="1" min="0" max="3" step="0.25" /></c-fill>
        </c-CField>
        <c-CField>
          <c-fill name="label">Clamp on commit</c-fill>
          <c-fill name="description">A parse-valid outside value moves to the nearest bound.</c-fill>
          <c-fill name="default"><c-CNumberInput value="1" min="0" max="3" commit_behavior="clamp" /></c-fill>
        </c-CField>
      </section>
    """
    css = """
      :where(.number-input-example-grid) {
        display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem
      }
    """


preview = NumberInputConstraints()
preview  # noqa: B018

from citry import Component


class ControlledNumberInput(Component):
    template = """
      <section x-data="{value:'2',last:'No request yet'}" class="number-input-example-stack">
        <c-CNumberInput
          c-input_attrs="{'aria-label':'Controlled quantity'}"
          $c-props="{
            value,
            onValueChange:(next,detail)=>{value=next;last=`${detail.source}: ${next}`},
          }"
        />
        <output x-text="`Canonical value: ${value}; ${last}`">Canonical value: 2</output>
      </section>
    """
    css = ":where(.number-input-example-stack){display:grid;gap:.75rem;max-inline-size:28rem}"


preview = ControlledNumberInput()
preview  # noqa: B018

from citry import Component


class NumberInputWithoutControls(Component):
    template = """
      <c-CField>
        <c-fill name="label">Keyboard stepper</c-fill>
        <c-fill name="description">Use Arrow Up/Down; adjacent controls are hidden.</c-fill>
        <c-fill name="default">
          <c-CNumberInput value="5" min="0" max="10" c-show_controls="False" />
        </c-fill>
      </c-CField>
    """


preview = NumberInputWithoutControls()
preview  # noqa: B018

from citry import Component


class WheelNumberInput(Component):
    template = """
      <section class="number-input-example-grid">
        <c-CField>
          <c-fill name="label">Wheel remains page scrolling</c-fill>
          <c-fill name="default"><c-CNumberInput value="4" /></c-fill>
        </c-CField>
        <c-CField>
          <c-fill name="label">Focused wheel changes value</c-fill>
          <c-fill name="description">Explicitly enabled for this control.</c-fill>
          <c-fill name="default"><c-CNumberInput value="4" wheel /></c-fill>
        </c-CField>
      </section>
    """
    css = """
      :where(.number-input-example-grid) {
        display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem
      }
    """


preview = WheelNumberInput()
preview  # noqa: B018

from citry import Component


class LocalizedNumberInput(Component):
    template = """
      <section class="number-input-example-stack">
        <p>
          Place the same component under a client-enabled
          <code>&lt;c-i18n&gt;</code> provider to switch locale in place.
        </p>
        <c-CNumberInput
          value="1234.5"
          step="0.1"
          c-input_attrs="{'aria-label':'Localized measurement'}"
        />
        <p>
          The editor and its ARIA value text use the provider locale; the
          enhanced Form value stays <code>1234.5</code>.
        </p>
      </section>
    """
    css = ":where(.number-input-example-stack){display:grid;gap:.75rem;max-inline-size:32rem}"


preview = LocalizedNumberInput()
preview  # noqa: B018

from citry import Component


class NumberInputForms(Component):
    template = """
      <form
        x-data="{submitted:'Not submitted'}"
        @submit.prevent="submitted=new FormData($event.target).get('amount')"
        class="number-input-example-stack"
      >
        <c-CField required>
          <c-fill name="label">Amount</c-fill>
          <c-fill name="default"><c-CNumberInput name="amount" value="1.25" step="0.25" /></c-fill>
        </c-CField>
        <div><button type="submit">Submit</button> <button type="reset">Reset</button></div>
        <output x-text="submitted">Not submitted</output>
      </form>
    """
    css = ":where(.number-input-example-stack){display:grid;gap:.75rem;max-inline-size:28rem}"


preview = NumberInputForms()
preview  # noqa: B018

from citry import Component


class NumberInputStates(Component):
    template = """
      <section class="number-input-state-grid">
        <c-CNumberInput value="2" variant="outline" size="sm" c-input_attrs="{'aria-label':'Small outline'}" />
        <c-CNumberInput value="2" variant="filled" size="md" c-input_attrs="{'aria-label':'Medium filled'}" />
        <c-CNumberInput value="2" variant="plain" size="lg" c-input_attrs="{'aria-label':'Large plain'}" />
        <c-CNumberInput value="2" readonly c-input_attrs="{'aria-label':'Readonly'}" />
        <c-CNumberInput value="2" disabled c-input_attrs="{'aria-label':'Disabled'}" />
        <c-CNumberInput value="2" invalid c-input_attrs="{'aria-label':'Application invalid'}" />
      </section>
    """
    css = """
      :where(.number-input-state-grid) {
        display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;align-items:start
      }
    """


preview = NumberInputStates()
preview  # noqa: B018