API kalitlari

1. root.fx-apikeysşart
2. head.fx-apikeys__headixtiyoriy
3. title.fx-apikeys__titleixtiyoriy
4. text.fx-apikeys__textixtiyoriy
5. reveal.fx-apikeys__revealşart
6. reveal-title.fx-apikeys__reveal-titleixtiyoriy
7. warn.fx-apikeys__warnixtiyoriy
8. secret.fx-apikeys__secretixtiyoriy
9. key.fx-apikeys__keyşart
10. reveal-actions.fx-apikeys__reveal-actionsixtiyoriy
11. row.fx-apikeys__rowixtiyoriy
12. name.fx-apikeys__nameixtiyoriy
13. prefix.fx-apikeys__prefixixtiyoriy
14. muted.fx-apikeys__mutedixtiyoriy
15. expires.fx-apikeys__expiresixtiyoriy
16. form.fx-apikeys__formşart

Kalit yaratilgaç fokus bir martalik panel sarlavhasiga ötadi; nusxalaş fx-copy (role=status bilan e'lon). «Nusxaladim, yopiş» kalitni DOMdan öçiradi va fokusni yangi qatordagi amalga beradi. Muddati yaqin — «!» + sana va qolgan kun söz bilan; bekor qilingan — çizilgan prefiks va «Bekor qilingan» holati.

npx foxui add apikeys

<section class="fx-apikeys" data-fx-apikeys aria-labelledby="ak-t">
  <header class="fx-apikeys__head">
    <div><h2 class="fx-apikeys__title" id="ak-t">API kalitlari</h2><p class="fx-apikeys__text">Saytingiz, bot yoki skriptlar CRM bilan şu kalitlar orqali işlaydi.</p></div>
    <button class="fx-btn" type="button" data-variant="primary" commandfor="ak-new" command="show-modal">Yangi kalit</button>
  </header>
  <div class="fx-apikeys__reveal" hidden>
    <p class="fx-apikeys__reveal-title">Kalit yaratildi</p>
    <p class="fx-apikeys__warn">Kalitni hozir nusxalab, xavfsiz joyda saqlang — u boşqa körsatilmaydi.</p>
    <div class="fx-apikeys__secret"><code class="fx-apikeys__key" id="ak-key"></code><button class="fx-copy" type="button" data-fx-copy data-copy-target="#ak-key" aria-label="Kalitni nusxalaş"><svg data-fx-icon="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg data-fx-icon="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg><span class="fx-copy__status" role="status"></span></button></div>
    <div class="fx-apikeys__reveal-actions"><button class="fx-btn" type="button" data-apikeys-done>Nusxaladim, yopiş</button></div>
  </div>
  <div class="fx-table-scroll"><table class="fx-table fx-apikeys__table">
    <thead><tr><th scope="col">Nomi</th><th scope="col">Kalit</th><th scope="col">Ruxsat</th><th scope="col">Yaratilgan</th><th scope="col">Oxirgi işlatilgan</th><th scope="col">Muddati</th><th scope="col"><span class="fx-sr-only">Amallar</span></th></tr></thead>
    <tbody>
      <tr class="fx-apikeys__row"><td><span class="fx-apikeys__name">Sayt formasi → CRM</span></td><td><span class="fx-apikeys__prefix">fx_live_7Qm2…</span></td><td>Faqat yoziş</td><td class="fx-apikeys__muted">02.09.2026</td><td class="fx-apikeys__muted">Bugun, 10:12</td><td class="fx-apikeys__muted fx-apikeys__expires">02.09.2027</td><td><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-apikeys-revoke aria-label="«Sayt formasi → CRM» kalitini bekor qiliş">Bekor qiliş</button></td></tr>
      <tr class="fx-apikeys__row" data-state="expiring"><td><span class="fx-apikeys__name">Telegram bot</span></td><td><span class="fx-apikeys__prefix">fx_live_Hk9a…</span></td><td>Töliq</td><td class="fx-apikeys__muted">14.07.2026</td><td class="fx-apikeys__muted">Keça, 21:40</td><td class="fx-apikeys__muted fx-apikeys__expires">21.10.2026 — 3 kun</td><td><button class="fx-btn" type="button" data-variant="danger-ghost" data-size="sm" data-apikeys-revoke aria-label="«Telegram bot» kalitini bekor qiliş">Bekor qiliş</button></td></tr>
      <tr class="fx-apikeys__row" data-state="revoked"><td><span class="fx-apikeys__name">Eski eksport skripti</span></td><td><span class="fx-apikeys__prefix">fx_live_b3Td…</span></td><td>Faqat öqiş</td><td class="fx-apikeys__muted">11.01.2026</td><td class="fx-apikeys__muted">28.03.2026</td><td class="fx-apikeys__muted fx-apikeys__expires"><span class="fx-status" data-tone="neutral">Bekor qilingan</span></td><td><span class="fx-apikeys__muted">—</span></td></tr>
    </tbody>
  </table></div>
  <dialog class="fx-dialog" id="ak-new" aria-labelledby="ak-new-t">
    <form class="fx-apikeys__form">
      <h2 class="fx-dialog__title" id="ak-new-t">Yangi API kaliti</h2>
      <label class="fx-field"><span class="fx-label" data-required>Nomi</span><input class="fx-input" name="name" required maxlength="60" placeholder="Masalan, Sayt formasi" autofocus></label>
      <label class="fx-field"><span class="fx-label">Amal qiliş muddati</span><span class="fx-select-wrap"><select class="fx-select" name="expires"><option value="30">30 kun</option><option value="90" selected>90 kun</option><option value="365">1 yil</option><option value="0">Muddatsiz (tavsiya etilmaydi)</option></select></span></label>
      <fieldset class="fx-fieldset"><legend class="fx-legend">Ruxsat</legend>
        <label class="fx-check" data-type="radio"><input type="radio" name="scope" value="read" checked><span class="fx-check__box"></span>Faqat öqiş</label>
        <label class="fx-check" data-type="radio"><input type="radio" name="scope" value="write"><span class="fx-check__box"></span>Faqat yoziş</label>
        <label class="fx-check" data-type="radio"><input type="radio" name="scope" value="full"><span class="fx-check__box"></span>Töliq</label>
      </fieldset>
      <div class="fx-dialog__actions"><button class="fx-btn" type="button" commandfor="ak-new" command="close">Bekor qiliş</button><button class="fx-btn" type="submit" data-variant="primary">Yaratiş</button></div>
    </form>
  </dialog>
</section>

Tokenlar: --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-default --fx-border-width-default --fx-ease-enter --fx-fg-warning --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-motion-base --fx-radius-control --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary