Pin input

from citry import Component


class BasicPinInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <c-CField required>
        <c-fill name="label">Verification code</c-fill>
        <c-fill name="description">Enter the six digits from your message.</c-fill>
        <c-fill name="default"><c-CPinInput name="code" /></c-fill>
      </c-CField>
    """


preview = BasicPinInput()
preview  # noqa: B018

from citry import Component


class AlphanumericPinInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <c-CField>
        <c-fill name="label">Recovery code</c-fill>
        <c-fill name="description">Use the eight letters and digits printed with your account.</c-fill>
        <c-fill name="default"><c-CPinInput name="recovery" type="alphanumeric" c-length="8" /></c-fill>
      </c-CField>
    """


preview = AlphanumericPinInput()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - Alpine expression stays readable in public source


class ControlledPinInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="pin-input-demo-stack" x-data="{code:'12',last:'No request yet'}">
        <c-CPinInput
          label="Controlled four-digit code"
          value="12"
          c-length="4"
          $c-props="{value:code,onValueChange:(next,detail)=>{code=next;last=`${detail.source}: ${next}`},onComplete:(next)=>last=`Complete: ${next}`}"
        />
        <output x-text="last">No request yet</output>
        <c-CButton type="button" @click="code=''">Clear</c-CButton>
      </section>
    """
    css = ":where(.pin-input-demo-stack){display:grid;justify-items:start;gap:.75rem}"


preview = ControlledPinInput()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - template expression stays readable in public source


class PinInputForms(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <form class="pin-input-demo-stack" x-data="{result:'Submit or reset the Form'}" @submit.prevent="result=JSON.stringify(Array.from(new FormData($event.target).entries()))">
        <c-CField required>
          <c-fill name="label">One-time code</c-fill>
          <c-fill name="default"><c-CPinInput name="code" value="01" /></c-fill>
        </c-CField>
        <c-CPinInput name="issued" label="Issued code" value="246810" readonly />
        <c-CGroup><c-CButton type="submit">Submit</c-CButton><c-CButton type="reset" variant="outline">Reset</c-CButton></c-CGroup>
        <output x-text="result">Submit or reset the Form</output>
      </form>
    """
    css = ":where(.pin-input-demo-stack){display:grid;justify-items:start;gap:1rem}"


preview = PinInputForms()
preview  # noqa: B018

from citry import Component


class MaskedPinInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="pin-input-demo-stack">
        <c-CPinInput label="Private access code" name="access-code" value="7412" c-length="4" mask />
        <p>Masking changes the visual cells only. Treat the submitted token as sensitive data.</p>
      </section>
    """
    css = ":where(.pin-input-demo-stack){display:grid;justify-items:start;gap:.75rem}"


preview = MaskedPinInput()
preview  # noqa: B018

from citry import Component


class SeparatedPinInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="pin-input-demo-stack">
        <c-CPinInput label="Grouped recovery code" type="alphanumeric" c-separator_after="(2,)">
          <c-fill name="separator" data="{ index }">-</c-fill>
        </c-CPinInput>
        <c-CPinInput label="Attached four-digit code" c-length="4" attached />
      </section>
    """
    css = ":where(.pin-input-demo-stack){display:grid;justify-items:start;gap:1rem}"


preview = SeparatedPinInput()
preview  # noqa: B018

from citry import Component


class PinInputLocales(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="pin-input-demo-stack" dir="rtl">
        <c-CField>
          <c-fill name="label">رمز التحقق</c-fill>
          <c-fill name="description">يبقى رمز البروتوكول من اليسار إلى اليمين.</c-fill>
          <c-fill name="default"><c-CPinInput value="104" /></c-fill>
        </c-CField>
      </section>
    """
    css = ":where(.pin-input-demo-stack){display:grid;justify-items:start;gap:.75rem}"


preview = PinInputLocales()
preview  # noqa: B018

from citry import Component


class PinInputStates(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="pin-input-state-grid">
        <c-CPinInput label="Small subtle code" value="12" size="sm" variant="subtle" />
        <c-CPinInput label="Default code" value="123" />
        <c-CPinInput label="Large complete code" value="123456" size="lg" />
        <c-CPinInput label="Readonly code" value="246810" readonly />
        <c-CPinInput label="Disabled code" value="135790" disabled />
        <c-CPinInput label="Invalid code" value="12" invalid class_="pin-input-brand" />
      </section>
    """
    css = """
      :where(.pin-input-state-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.5rem;align-items:start}
      :where(.pin-input-brand){--cui-pin-input-focus-color:#7c3aed;--cui-pin-input-radius:.75rem}
    """


preview = PinInputStates()
preview  # noqa: B018