1. root.fx-authşart
2. main.fx-auth__mainixtiyoriy
3. card.fx-auth__cardşart
4. brand.fx-auth__brandixtiyoriy
5. view.fx-auth__viewixtiyoriy
6. head.fx-auth__headixtiyoriy
7. title.fx-auth__titleşart
8. text.fx-auth__textixtiyoriy
9. form.fx-auth__formixtiyoriy
10. social.fx-auth__socialixtiyoriy
11. or.fx-auth__orixtiyoriy
12. foot.fx-auth__footixtiyoriy
13. art.fx-auth__artixtiyoriy
14. email.fx-auth__emailixtiyoriy
15. aside.fx-auth__asideixtiyoriy
16. quote.fx-auth__quoteixtiyoriy
17. row.fx-auth__rowixtiyoriy
18. link.fx-auth__linkixtiyoriy
19. back.fx-auth__backixtiyoriy
20. rules.fx-auth__rulesixtiyoriy

Sahifa <main>, sarlavha <h1>; «yuborildi» holatiga ötganda fokus sarlavhaga (tabindex=-1) tuşadi. Qayta yuboriş tugmasi sanaş vaqtida disabled va soniyani yozadi. Brend paneli <aside> — bezak.

npx foxui add auth

<main class="fx-auth" data-variant="split" data-fx-auth style="min-block-size: 28rem">
  <div class="fx-auth__main">
    <div class="fx-auth__card">
      <a class="fx-auth__brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3l6 5h6l6-5v10c0 5-4 8-9 8s-9-3-9-8z" fill="currentColor"/></svg>Misol</a>
      <div class="fx-auth__view" data-view="form">
        <div class="fx-auth__head"><h1 class="fx-auth__title">Kiriş</h1><p class="fx-auth__text">Emailingizni yozing — kiriş havolasini yuboramiz.</p></div>
        <form class="fx-auth__form" data-auth-form>
          <label class="fx-field"><span class="fx-label" data-required>Email</span><input class="fx-input" type="email" required autocomplete="email" placeholder="[email protected]"></label>
          <button class="fx-btn" type="submit" data-variant="primary" data-width="full">Havola yuboriş</button>
        </form>
        <div class="fx-auth__or">yoki</div>
        <div class="fx-auth__social"><button class="fx-btn" type="button" data-width="full">Google bilan davom etiş</button></div>
        <p class="fx-auth__foot">Hisobingiz yöqmi? <a href="#">Röyxatdan öting</a></p>
      </div>
      <div class="fx-auth__view" data-view="sent" hidden>
        <div class="fx-auth__art"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6.5h16v11H4zM4.5 7l7.5 6 7.5-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="fx-auth__head"><h1 class="fx-auth__title">Poçtangizni tekşiring</h1><p class="fx-auth__text">Kiriş havolasini <span class="fx-auth__email" data-auth-email></span> manziliga yubordik. Havola 15 daqiqa amal qiladi.</p></div>
        <button class="fx-btn" type="button" data-auth-resend data-cooldown="30">Qayta yuboriş<span data-auth-count></span></button>
        <button class="fx-btn" type="button" data-variant="link" data-auth-back>Boşqa email bilan</button>
      </div>
    </div>
  </div>
  <aside class="fx-auth__aside"><span></span><div><blockquote class="fx-auth__quote">«Arizalar endi heç qaçon yöqolmaydi — hammasi bir joyda.»</blockquote><p class="fx-auth__cite">Madina Yusupova, savdo bölimi rahbari</p></div></aside>
</main>
<main class="fx-auth" data-fx-auth data-step="form" style="min-block-size: 34rem">
  <div class="fx-auth__card">
    <div class="fx-auth__view" data-view="form">
      <div class="fx-auth__head"><h1 class="fx-auth__title">Hisobga kiriş</h1><p class="fx-auth__text">Email va parolingizni kiriting.</p></div>
      <form class="fx-auth__form" data-auth-form data-auth-next="verify">
        <label class="fx-field"><span class="fx-label" data-required>Email</span><input class="fx-input" type="email" required autocomplete="username" placeholder="[email protected]"></label>
        <div class="fx-field"><div class="fx-auth__row"><label class="fx-label" for="au-p" data-required>Parol</label><button class="fx-auth__link" type="button" data-auth-go="forgot">Parolni unutdingizmi?</button></div><input class="fx-input" id="au-p" type="password" required autocomplete="current-password"></div>
        <button class="fx-btn" type="submit" data-variant="primary" data-width="full">Kiriş</button>
      </form>
    </div>
    <div class="fx-auth__view" data-view="verify" hidden>
      <div class="fx-auth__art"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="2.5" width="12" height="19" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10.5 18.5h3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></div>
      <div class="fx-auth__head"><h1 class="fx-auth__title">Kodni kiriting</h1><p class="fx-auth__text">6 xonali kodni <b>+998 90 ••• •• 67</b> raqamiga SMS qilib yubordik.</p></div>
      <form class="fx-auth__form" data-auth-form data-auth-next="done">
        <div class="fx-otp" data-fx-otp><div class="fx-otp__cells" role="group" aria-label="Tasdiqlaş kodi"><input class="fx-otp__cell"><input class="fx-otp__cell"><input class="fx-otp__cell"><span class="fx-otp__sep" aria-hidden="true"></span><input class="fx-otp__cell"><input class="fx-otp__cell"><input class="fx-otp__cell"></div></div>
        <button class="fx-btn" type="submit" data-variant="primary" data-width="full">Tasdiqlaş</button>
      </form>
      <button class="fx-btn" type="button" data-variant="ghost" data-auth-resend data-cooldown="60">Kodni qayta yuboriş<span data-auth-count></span></button>
      <button class="fx-auth__link fx-auth__back" type="button" data-auth-go="form">Orqaga</button>
    </div>
    <div class="fx-auth__view" data-view="forgot" hidden>
      <button class="fx-auth__link fx-auth__back" type="button" data-auth-go="form">Kirişga qaytiş</button>
      <div class="fx-auth__head"><h1 class="fx-auth__title">Parolni tiklaş</h1><p class="fx-auth__text">Hisobingiz emailini yozing — tiklaş havolasini yuboramiz.</p></div>
      <form class="fx-auth__form" data-auth-form data-auth-next="sent">
        <label class="fx-field"><span class="fx-label" data-required>Email</span><input class="fx-input" type="email" required autocomplete="email" placeholder="[email protected]"></label>
        <button class="fx-btn" type="submit" data-variant="primary" data-width="full">Havola yuboriş</button>
      </form>
    </div>
    <div class="fx-auth__view" data-view="sent" hidden>
      <div class="fx-auth__art"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6.5h16v11H4zM4.5 7l7.5 6 7.5-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
      <div class="fx-auth__head"><h1 class="fx-auth__title">Xat yuborildi</h1><p class="fx-auth__text"><span class="fx-auth__email" data-auth-email></span> manziliga parolni tiklaş havolasi ketdi. Havola 30 daqiqa amal qiladi.</p></div>
      <button class="fx-btn" type="button" data-auth-resend data-cooldown="30">Qayta yuboriş<span data-auth-count></span></button>
      <button class="fx-auth__link" type="button" data-auth-go="reset">Havolani oçdim (namuna)</button>
    </div>
    <div class="fx-auth__view" data-view="reset" hidden>
      <div class="fx-auth__head"><h1 class="fx-auth__title">Yangi parol</h1><p class="fx-auth__text">Eski paroldan farq qilsin.</p></div>
      <form class="fx-auth__form" data-auth-form data-auth-next="done">
        <div class="fx-field" data-fx-field><label class="fx-label" for="au-n" data-required>Yangi parol</label><span class="fx-input-group"><input class="fx-input-group__control" id="au-n" type="password" required minlength="8" autocomplete="new-password" aria-describedby="au-r"><button class="fx-input-group__btn" type="button" data-reveal aria-pressed="false" aria-label="Parolni körsatiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.5"/></svg></button></span>
          <ul class="fx-auth__rules" id="au-r" data-for="#au-n"><li data-rule="len">Kamida 8 belgi</li><li data-rule="digit">Kamida bitta raqam</li><li data-rule="case">Katta va kiçik harf</li></ul></div>
        <label class="fx-field"><span class="fx-label" data-required>Parolni takrorlang</span><input class="fx-input" type="password" required autocomplete="new-password" data-auth-match="#au-n"></label>
        <button class="fx-btn" type="submit" data-variant="primary" data-width="full">Parolni saqlaş</button>
      </form>
    </div>
    <div class="fx-auth__view" data-view="done" hidden>
      <div class="fx-auth__art" data-tone="success"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
      <div class="fx-auth__head"><h1 class="fx-auth__title">Tayyor</h1><p class="fx-auth__text">Hammasi tasdiqlandi. Endi işni davom ettirişingiz mumkin.</p></div>
      <a class="fx-btn" data-variant="primary" data-width="full" href="#">Boş sahifaga</a>
    </div>
  </div>
</main>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-page --fx-bg-success-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-fg-success --fx-font-size-display-sm --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-badge --fx-radius-overlay --fx-radius-surface --fx-shadow-sm --fx-size-icon-lg --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary