# FoxUI — design system (v0.99.3) Uslub va mavzu: `` ## Akkordeon (`accordion`, beta, 0.11.0 dan) Yiğiladigan bölimlar: native
; bir xil name bilan bittasi oçiq qoladi. Strelka (chevron) yopiqda −90°, oçiqda 0°. Kengaytma: data-variant=bordered|separated|fluş, data-chevron=start, .fx-accordion__icon/.fx-accordion__meta, içma-iç, data-focus=inset, bosmada hammasi oçiq. - Qaçon: FAQ, sozlamalar guruhlari, qöşimça tafsilot. - Qaçon emas: Bir xil darajadagi körinişlar → `tabs` - Variantlar: data-variant=bordered|separated|flush; data-chevron=start; data-focus=inset - Klaviatura: Enter, Space — Oçadi / yopadi - Tokenlar: --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-motion-base, --fx-motion-fast, --fx-radius-badge, --fx-radius-surface, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
Obuna tugasa nima böladi?
Yuklab olingan versiyalar sizda abadiy qoladi; yangilaniş va MCP töxtaydi.
Neçta qurilmada işlaydi?
Bitta litsenziya — bitta odam, 3 ta qurilma.
Tölov3 ta
Tafsilot.
``` - Qilmang: Asosiy mazmunni akkordeonga yaşirmang — faqat qöşimça (FAQ, tafsilot). ## Nişon kartasi (`achievement`, beta, 0.55.0 dan) Yutuq nişoni: belgi (emoji yoki ikon) + nom + sabab. Oçilgan — töliq rang, yaxlit çegara; yopiq (data-state="locked") — belgi kulrang, uzuq çegara, ostida progress çiziği va «3/5» hisob; yangi oçilgan (data-state="new") — brend halqasi va «Yangi» yorliği. Qoida: yopiq nişonlardan faqat eng yaqin 3 tasi körsatiladi — «uyum» emas. Röyxat — .fx-achievements töri. Manbaa'dan (③, Fox MB topşirdi, 20.10): köriniş — FoxUI, hisob va ma'lumot — loyihada. - Qaçon: Profil sahifasidagi yutuqlar, hissa nişonlari, öquv kursidagi bosqiçlar. Geymifikatsiya: keyingi nişongaça qança qolganini körsatiş. - Qaçon emas: Holat yorliği → `badge`; Vazifalar röyxati (bajarildi/yöq) → `checklist` - Variantlar: data-state=locked|new (standart unlocked) - Tokenlar: --fx-achievement-value, --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-control-h-md, --fx-font-size-2xl, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-radius-pill, --fx-radius-surface, --fx-radius-tag, --fx-size-icon-md, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html ``` - Qilmang: Hamma yopiq nişonni birdan körsatmang — eng yaqin 3 tasi yetarli, qolgani «Hammasi» sahifasida. - Qilmang: Yopiq nişonni faqat rang bilan ajratmang — uzuq çegara va «0/1» hisob ham bor. - Qilmang: Sababni yozmasdan nişon bermang: odam nima uçun olganini bilsin. ## Ogohlantiriş (`alert`, beta, 0.10.0 dan) Bölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş. Ohanglar: neytral, info, success, warning, error, brand. Kengaytma: .fx-alert__icon (ikon slot — şakl-belgi örniga ikon). - Qaçon: Sahifa yoki bölim haqidagi muhim, doimiy xabar. - Qaçon emas: Amal natijasi (vaqtinçalik) → `toast`; Maydon xatosi → `input` - Variantlar: data-tone=neutral|info|success|warning|error|brand (standart neutral); data-layout=default|compact (standart default) - Klaviatura: Tab, Enter — Havola va yopiş tugmasi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-success-subtle, --fx-bg-warning-subtle, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-fg-error, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-circle, --fx-radius-surface, --fx-size-icon-md, --fx-size-min-target, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

Obuna 3 kundan keyin tugaydi

Yangilanişlar va MCP töxtaydi; yuklab olingan versiyalar qoladi.

Uzaytiriş

Yangi versiya bor: 0.10.0

Yangilaniş tayyor

Sahifani yangilang.

``` - Qilmang: Bir bölimda ikkitadan ortiq ogohlantiriş qöymang. - Qilmang: Çap rangli çiziq qöşmang — butun yuza tusli. ## Sarlavha havolasi (`anchor-heading`, beta, 0.23.0 dan) Hujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil. Sensorli qurilmada doim körinadi. Sarlavhaga scroll-margin beriladi — qotib turgan panel ostida qolmaydi. - Qaçon: Uzun hujjat va maqola sarlavhalari (h2, h3). - Qaçon emas: Ilova sahifa sarlavhasi → `page-header` - Klaviatura: Tab, Enter — Bölim manzilini oçadi - Tokenlar: --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-weight-regular, --fx-motion-fast, --fx-radius-badge, --fx-size-topbar, --fx-space-2, --fx-space-4, --fx-text-brand, --fx-text-tertiary ```html

Örnatiş #

``` - Qilmang: id'siz sarlavhaga havola qöymang. - Qilmang: Havolaga sarlavha matnini örab qöymang — faqat «#» belgisi. ## API kalitlari (`apikeys`, beta, 0.28.0 dan) API kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi. Har kalit: ruxsat, yaratilgan sana, oxirgi işlatilgan vaqt, muddat (tugaşiga oz qolsa «!»), «Bekor qiliş» (fxConfirm bilan). - Qaçon: SaaS sozlamalarida dasturçilar uçun şaxsiy/jamoa kalitlari va tokenlar. Webhook, bot, sayt formasi kabi integratsiyalarni ulaş. - Qaçon emas: Bitta matnni nusxalaş → `copy`; Parol yoki maxfiy maydon kiritiş → `input` - Variantlar: data-state=expiring|revoked|new (standart —) - Klaviatura: Enter (dialogda) — Kalitni yaratadi; Esc — Dialogni yopadi; Tab — Panel oçilganda: nusxalaş → yopiş tugmasi - 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 ```html

API kalitlari

Saytingiz, bot yoki skriptlar CRM bilan şu kalitlar orqali işlaydi.

NomiKalitRuxsatYaratilganOxirgi işlatilganMuddatiAmallar
Sayt formasi → CRMfx_live_7Qm2…Faqat yoziş02.09.2026Bugun, 10:1202.09.2027
Telegram botfx_live_Hk9a…Töliq14.07.2026Keça, 21:4021.10.2026 — 3 kun
Eski eksport skriptifx_live_b3Td…Faqat öqiş11.01.202628.03.2026Bekor qilingan—

Yangi API kaliti

Ruxsat
``` - Qilmang: Kalitni röyxatda töliq körsatmang — faqat yaratilgan zahoti bir marta, keyin prefiks. - Qilmang: «Muddatsiz»ni standart qilmang — 90 kun yoki 1 yil xavfsizroq. - Qilmang: Bekor qilişni tasdiqsiz bajarmang: qaysi integratsiya töxtaşini ayting. ## Tasdiqlaş sörovi (ruxsat / rad) (`approval`, beta, 0.23.0 dan) Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat. Qaror tugmalarni natija satriga (ikon + söz) almaştiradi va fx-approval hodisasini çiqaradi. - Qaçon: Agent öçiriş, yuboriş, tölov kabi amaldan oldin ruxsat olişi kerak. - Qaçon emas: Foydalanuvçi boşlagan amalni tasdiqlaş (öçiriş tugmasi) → `dialog`; Oddiy xabar → `toast` - Variantlar: data-state=approved|denied (standart pending) - Klaviatura: Tab — Tugmalar orasida; Enter, Space — Qarorni qabul qiladi - Tokenlar: --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-overlay, --fx-size-icon-lg, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary ```html

Mijozlar bazasidan 12 ta yozuvni öçirişga ruxsat berasizmi?

Oxirgi faollik 2 yildan oldin. Amalni qaytarib bölmaydi.

crm.yozuvlar.oʻchirish({ holat: "faol", oxirgi_faollik: "> 2 yil" })  →  12 ta yozuv

Mijozlar bazasidan 12 ta yozuvni öçirişga ruxsat berasizmi?

Oxirgi faollik 2 yildan oldin. Amalni qaytarib bölmaydi.

crm.yozuvlar.oʻchirish({ holat: "faol", oxirgi_faollik: "> 2 yil" })  →  12 ta yozuv

Ruxsat berildi

Mijozlar bazasidan 12 ta yozuvni öçirişga ruxsat berasizmi?

Oxirgi faollik 2 yildan oldin. Amalni qaytarib bölmaydi.

crm.yozuvlar.oʻchirish({ holat: "faol", oxirgi_faollik: "> 2 yil" })  →  12 ta yozuv

Rad etildi

``` - Qilmang: “Ruxsat”ni xavfsiz tugma qilib birinçi fokusga qöymang — fokus Rad etiş tugmasida (data-autofocus). - Qilmang: Nima özgarişini yaşirmang — aniq son va nom bilan tafsilot yozing. - Qilmang: “Har doim”ni qaytarib bölmaydigan amalga taklif qilmang. ## Maqola sahifasi (`article`, beta, 0.29.0 dan) Blog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi). Oxirida teglar, muallif kartasi va «Öxşaş maqolalar» (fx-blog kartalari). Ixtiyoriy tepada öqiş çiziği — fx-scroll-progress. Tor ekranda mundarija matn tepasida yiğiladigan blok, ulaşiş — matn ostida qator; çop etişda faqat matn qoladi. - Qaçon: Blog maqolasi, yangilik, keys va qöllanma sahifasi. Hujjat saytidagi uzun maqola (mundarija bilan). - Qaçon emas: Maqolalar röyxati → `blog`; Huquqiy, raqamlangan hujjat → `legal`; Faqat matn uslubi kerak (sahifa tuzilmasisiz) → `prose` - Variantlar: data-color=purple|blue|green|yellow (standart none) - Klaviatura: Tab — Ortga havola → toifa → muallif → ulaşiş tugmalari → matn havolalari → mundarija; Enter, Space (tor ekranda) — Mundarijani oçadi / yopadi - Tokenlar: --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-dialog-width, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-lg, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-line-height-relaxed, --fx-line-height-tight, --fx-motion-fast, --fx-motion-press, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-size-icon-sm, --fx-size-topbar, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

BlogQöllanma

Tokenlar bilan mavzu yasaş: bitta HEX'dan butun palitragaça

Brend rangingizni bergan holda kontrast qöriqçisidan ötadigan yoruğ va qoronği mavzuni qanday oliş mumkin — qadamma-qadam, kod bilan.

Dilnoza Yusupova9 daqiqa öqiş

Har bir mijoz brendida bitta-ikkita rang böladi, interfeysga esa önlab rang kerak: fon, çiziq, xato, ogohlantiriş, grafik ranglari. Ularni qölda tanlaş — kontrastni buzişning eng tez yöli.

1. Brend rangidan şkala

Generator bitta HEX'dan 50–950 poğonali şkala yasaydi va har poğonani OKLCH'da tekislaydi.

node scripts/theme.mjs --name zarafshon --brand "#0f766e"

2. Kontrast qöriqçisi

Build har mavzu × yoruğ/qoronği juftini WCAG AA böyiça tekşiradi. Matn 4,5:1 dan past bölsa — build töxtaydi.

3. Sahifaga ulaş

Mavzu bitta atribut bilan tanlanadi: data-fx-theme="zarafshon". Komponentlar özgarmaydi.

Mundarija

Dilnoza Yusupova

Dizayn tizimi muhandisi, FoxUI

Tokenlar, mavzular va kontrast qöriqçisi ustida işlaydi. Toşkentda yaşaydi.

Öxşaş maqolalar

``` - Qilmang: Matnni 68–75 belgidan keng qilmang — uzun qatorni öqiş qiyin; markaziy ustun şuni uşlab turadi. - Qilmang: Ulaşiş tugmalarini ikon bilan aria-label'siz qoldirmang va ularni sahifa böylab «suzuvçi» qilib matn ustiga çiqarmang. - Qilmang: Mundarijani 2–3 bölimli qisqa maqolaga qöymang — 4+ sarlavha bölganda foydali. ## AI yordamçi (widget) (`assistant`, experimental, 0.23.0 dan) Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi. Admin, kabinet, login va checkout sahifalarida çiqmaydi (data-exclude bilan özgartiriladi); salom va tayyor savollar til böyiça (data-greeting-ru, data-suggestions-ru). Har sayt faqat sozlama beradi — nom, rang, endpoint, til (uz/ru/en), salom matni, tayyor savollar, menejer kanallari. Javob kelmasa — qayta uriniş; endpoint handoff qaytarsa (byudjet tugagan yoki odam kerak) — «menejer bilan boğlaning» kartasi. Personaj: tinç «nafas», bir martalik qöl silkitiş; jonli inline SVG personaj bölsa, unga holat sinfi qöyiladi: salom, oylayapti, gapiryapti, uzatyapti (Lottie şart emas). Telefonda suhbat pastdan çiqadigan varaq (72 % balandlik, yozişda 92 %), uzun javob ~7 qatordan keyin yiğiladi («Davomi»), salom pufakçasi 2 qatordan oşmaydi va 10 s da özi yöqoladi. Personaj berilmasa yuz — ovoz şari (fx-orb); eski çat ikonkasi — data-face="icon". Panel foni va matni saytnikidan olinadi: CSS'da --assistant-surface / --assistant-text yoki data-surface / data-text (masalan var(--c-bg)); bölmasa saytdagi --surface/--bg, söng FoxUI. Mustaqil widget'da panel uslubi (assistant-panel.css) birinçi oçilişda yuklanadi. Panel (19.10 redizayni): yoziş maydoni va yuboriş — bitta karta; javob — pufaksiz toza matn (qalin, röyxat, havola), ostida nusxa; boşida tanişuv (şar, salom, savol namunalari röyxati); kutiş — «Öylayapman» ustida yoruğlik; «Yangi suhbat». - Qaçon: Saytga taşrif buyuruvçining savollariga AI javob beradi, kerak bölsa menejerga ötkazadi. - Qaçon emas: Içki jamoa çati → `message`; Bir martalik maslahat → `toggletip` - Variantlar: data-state=idle|open|sending|error|handoff (standart idle); data-mascot=idle|wave|thinking|talking|handoff (standart idle); data-color=light (standart brand) - Klaviatura: Enter — Yuboradi (Shift+Enter — yangi qator); Esc — Yopadi, fokus tugmaga qaytadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-error-solid, --fx-bg-page, --fx-bg-static-light, --fx-bg-surface, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-color-black, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-duration-pulse, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-2xl, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-slow, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-pill, --fx-radius-surface, --fx-shadow-lg, --fx-shadow-md, --fx-shadow-sm, --fx-size-icon-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-status-dot-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-space-8, --fx-text-error, --fx-text-on-brand, --fx-text-on-category, --fx-text-on-error, --fx-text-on-static-light, --fx-text-primary ```html
``` - Qilmang: Har saytda alohida çat yozmang — şu ota komponentni sozlang. - Qilmang: Personaj animatsiyasini doimiy diqqat tortuvçi qilmang: qöl silkitiş sessiyada bir marta. - Qilmang: Ovoz qöşmang; harakat kamaytirilsa — personaj qimirlamaydi. ## Biriktirma (`attachment`, beta, 0.23.0 dan) Fayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği. Composer içida ixçam (chip), xabar içida katta (card). Holatlar: yuklanmoqda, tayyor, xato (söz bilan). - Qaçon: Composer içida biriktirilgan fayllar. Xabardagi fayl/rasm kartoçkasi. - Qaçon emas: Fayl yuklaş maydoni (tanlaş/taşlaş) → `dropzone`; Fayllar röyxati/jadvali → `file` - Variantlar: data-variant=card (standart chip); data-state=uploading|error (standart done) - Klaviatura: Tab — Olib taşlaş tugmasiga; Enter, Space — Olib taşlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-error-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-fg-error, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-radius-circle, --fx-radius-control, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-space-12, --fx-space-2, --fx-text-brand, --fx-text-error, --fx-text-primary, --fx-text-tertiary ```html
shartnoma.pdf2,4 MB
tushum-oktabr.xlsxYuklanmoqda… 62 %
katta-video.movFayl 50 MB dan katta
maket-bosh-sahifa.png860 KB
``` - Qilmang: × tugmasiga “fayl nomi + ni olib taşlaş” aria-label bering. - Qilmang: Xatoni faqat qizil bilan bermang — meta qatorida “!” va sabab matni bor. - Qilmang: Yuklaniş çiziği uçun işlating, aria-label bilan. ## Audio pleyer (`audioplayer`, beta, 0.24.0 dan) Ixçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×). Çiziqlar balandligi `data-peaks` dan yoki sarlavhadan hosil böladi. Bir vaqtda faqat bitta pleyer yangraydi. Ovozli xabar, podkast qismi, qönğiroq yozuvi uçun. - Qaçon: Qisqa audio: ovozli xabar, qönğiroq yozuvi, podkast parçasi. - Qaçon emas: Video → `videoplayer` - Variantlar: data-size=sm (standart md) - Klaviatura: Space — Tölqinda: ijro / pauza; ← → — 5 soniya orqaga / oldinga; Home, End — Boşiga / oxiriga - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-hover, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-radius-nav, --fx-radius-surface, --fx-size-control-lg, --fx-size-control-md, --fx-size-control-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
Mijoz bilan qönğiroqGuli · 12 oktyabr
``` - Qilmang: Tölqinni haqiqiy ovoz tahlili deb körsatmang — u faqat progress şakli; aniq tahlil kerak bölsa `data-peaks`ni serverda hisoblab bering. - Qilmang: Sahifa oçilganda avtomatik yangratmang. - Qilmang: Uzun podkast uçun bobli (chapters) alohida mexanizm kerak — bu pleyer qisqa yozuvlar uçun. ## Audit jurnali (`auditlog`, beta, 0.29.0 dan) Xavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan». Tepada sarlavha, saqlaş muddati va «Eksport (CSV)»; filtr qatori (qidiruv, foydalanuvçi, amal turi, davr); fx-table asosidagi jadval kunlar böyiça guruhlangan (.fx-auditlog__day). Har qator: vaqt (mono, aniq soniyagaça), aktor (fx-persona yoki «Tizim»), amal (fe'l + obyekt havolasi), IP va joy, muhimlik — data-severity: info, warning (▲ Diqqat), critical (■ Xavfli — qator foni ham). Tafsilot
içida: maydon özgarişlari farqi (− oldin, + keyin). Yozuvlar faqat öqiladi — tahrirlaş/öçiriş yöq. Tor ekranda IP ustuni yaşirinadi. - Qaçon: Admin paneldagi «Xavfsizlik jurnali» / «Faoliyat tarixi». Moliyaviy va ruxsat özgarişlarini tekşiriş (compliance). - Qaçon emas: Bitta yozuvning oddiy tarixi (izohlar bilan) → `timeline`; Mahsulot versiyalari → `changelogfeed`; Server loglari oqimi → `terminal` - Variantlar: data-severity=info|warning|critical (standart info) - Klaviatura: Tab — Filtrlar → obyekt havolalari → «Özgarişlar» → «Köproq yuklaş»; Enter, Space — Özgarişlar farqini oçadi / yopadi - Tokenlar: --fx-bg-error-subtle, --fx-bg-muted, --fx-bg-page, --fx-bg-subtle, --fx-bg-success-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-fg-error, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --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-control, --fx-radius-surface, --fx-size-avatar-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-5, --fx-space-6, --fx-text-brand, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

Audit jurnali

Hisobdagi barça muhim amallar. Yozuvlar 365 kun saqlanadi va özgartirilmaydi.

Audit jurnali yozuvlari, yangilari tepada
VaqtKimAmalIP va joyMuhimlik
Bugun, 18-oktabr
Aziz KarimovAdministrator
API kalitini yaratdi «Hisobot skripti» (töliq ruxsat)
185.139.12.44Toşkent, ChromeXavfli
Dilnoza YusupovaEgasi
rolini özgartirdi: Jasur Toshpoʻlatov
Özgarişlar
Rol
KöruvçiAdministrator
84.54.70.10Samarqand, SafariDiqqat
Dilnoza YusupovaEgasi
tarifni yangiladi: Jamoa, yillik
Özgarişlar
Tarif
Pro, oylikJamoa, yillik
Örinlar
35
84.54.70.10Samarqand, SafariOddiy
Keça, 17-oktabr
Tizim
5 marta muvaffaqiyatsiz kiriş — aziz@ipakyoli.uz 15 daqiqaga bloklandi
91.204.33.7Noma'lum joyDiqqat
Aziz KarimovAdministrator
eksport qildi: mijozlar-oktabr.csv (1 284 qator)
185.139.12.44Toşkent, ChromeOddiy
5 / 1 284 yozuv körsatildi
``` - Qilmang: Jurnal yozuvini tahrirlaş yoki öçiriş tugmasini qöymang — audit özgarmas bölişi şart. - Qilmang: Muhimlikni faqat rang bilan bildirmang — «Diqqat / Xavfli» sözi va belgi bor. - Qilmang: Nisbiy vaqtni («3 soat oldin») yolğiz bermang — audit uçun aniq vaqt (soniyagaça) va vaqt zonasi kerak. - Qilmang: Parol, token yoki karta raqamini farqda körsatmang — «özgartirildi» deb yozing. ## Kiriş sahifasi (`auth`, beta, 0.23.0 dan) Kiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split). Tayyor «havola yuborildi» (magic link) holati — email körsatiladi, «Qayta yuboriş» 30 soniya sanaladi. Ijtimoiy kiriş va «yoki» ajratgiçi bor. Bosqiçlar (4.109): data-step="verify|forgot|reset|done" — SMS/email kodini kiritiş (fx-otp, tölsa özi yuboradi), parolni tiklaş havolasi, yangi parol (talablar röyxati ✓ bilan, takror tekşiruvi) va «Tayyor» — mavjud markaziy/split qolipda. - Qaçon: Kiriş, röyxatdan ötiş, parolni tiklaş sahifalari. - Qaçon emas: Ilova içida qayta tasdiqlaş → `dialog`; Köp bosqiçli röyxatdan ötiş → `wizard` - Variantlar: data-variant=centered|split (standart centered); data-step=form|sent|verify|forgot|reset|done (standart form) - Klaviatura: Enter — Formani yuboradi (havola yuboriladi); Tab — Bosqiç almaşganda fokus yangi sarlavhada; «Orqaga» havolasi bilan qaytiş; 0–9 — Kod kataklari (fx-otp); oxirgi raqamdan keyin forma özi yuboriladi - 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 ```html
Misol

Kiriş

Emailingizni yozing — kiriş havolasini yuboramiz.

yoki

Hisobingiz yöqmi? Röyxatdan öting

Hisobga kiriş

Email va parolingizni kiriting.

``` - Qilmang: Brend panelida uzun matn yozmang — bitta fikr yoki iqtibos. - Qilmang: Parol xatosini «email yoki parol notöğri» deb umumiy yozing — qaysi biri xato ekanini oşkor qilmang. - Qilmang: Parol talablarini faqat xato çiqqandan keyin körsatmang — yoziş paytida ✓ bilan oçiq tursin. ## Avatar (`avatar`, beta, 0.2.0 dan) Kvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle). Yoy = ölçam × 0,28. Guruh: .fx-avatar-group (ustma-ust, kesim yuza rangida), oxirida data-more bilan «+N». Kengaytma: xs · xl · 2xl ölçam; guruh hoverda yoyiladi (data-spread), tör (data-layout=grid), data-max; “+N” — ``` - Qilmang: Holatni faqat nuqta rangi bilan bildirmang — aria-label yoki yonidagi matnda holat söz bilan bölsin. - Qilmang: Avatarga öz rangingizni bermang — faqat data-color (6 toifa rangi). - Qilmang: Kulrang avatar va gradient qilmang. ## Orqaga havolasi (`back-link`, beta, 0.23.0 dan) Ota sahifaga qaytiş havolasi (#89): chevron + qisqa nom. Brauzerning «orqaga»si emas — doim aniq ota sahifaga. RTL'da chevron oğadi. - Qaçon: Tafsilot sahifasidan röyxatga qaytiş. - Qaçon emas: Sahifaning töliq yöli → `breadcrumbs`; Matn içidagi havola → `link` - Klaviatura: Enter — Ota sahifaga ötadi - Tokenlar: --fx-border-color-focus, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-base, --fx-motion-fast, --fx-radius-badge, --fx-size-icon-sm, --fx-space-1, --fx-text-primary, --fx-text-secondary ```html Barça arizalar ``` - Qilmang: Matnga «Orqaga» deb yozmang — ota sahifa nomini yozing («Barça arizalar»). - Qilmang: history.back() uchun ishlatmang — haqiqiy havola. ## Yuqoriga qaytiş (`backtotop`, beta, 0.29.0 dan) Uzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151). Bosilsa boşiga qaytaradi (harakat kamaytirilsa — darhol) va fokusni sahifa boşidagi nişonga ötkazadi — klaviatura foydalanuvçisi pastda qolib ketmaydi. Yaşirin holatda inert. Variantlar: faqat ikon (standart) yoki yozuvli; joylaşuv end · start · center · inline · sticky (içki panel); data-progress — atrofida öqilgan qism halqasi. - Qaçon: Uzun röyxat, hujjat, faollik lentasi, katalog. Içki aylanuvçi panel (data-target + data-position="sticky"). - Qaçon emas: Sahifadagi bölimlarga sakraş → `toc`; Asosiy amal tugmasi → `fab` - Variantlar: data-variant=icon|label (standart icon); data-position=end|start|center|inline|sticky (standart end); data-progress=off|on (standart off) - Klaviatura: Enter — Boşiga qaytaradi, fokus sahifa boşidagi nişonga - Tokenlar: --fx-bg-brand-solid, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-ease-enter, --fx-ease-exit, --fx-ease-standard, --fx-elevation-3, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-md, --fx-radius-pill, --fx-size-icon-md, --fx-space-2, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-primary, --fx-z-raised, --fx-z-sticky ```html

Mijoz faolligi — Dilnoza Rahimova

  1. 18 oktyabr, 10:42 — Taklif yuborildi (12 500 000 söm)
  2. 17 oktyabr, 16:05 — Qönğiroq: narx böyiça savollar
  3. 17 oktyabr, 11:20 — Uçraşuv belgilandi
  4. 16 oktyabr, 09:15 — Ariza saytdan keldi
  5. 15 oktyabr, 18:30 — Yangi kontakt qöşildi
  6. 14 oktyabr, 12:00 — Telegram orqali yozdi
  7. 13 oktyabr, 14:45 — Hisob-faktura körildi
  8. 12 oktyabr, 10:10 — Demo körsatildi
  9. 11 oktyabr, 15:25 — Şartnoma loyihasi tayyorlandi
  10. 10 oktyabr, 09:00 — Birinçi aloqa
Yuqoriga qaytiş
``` - Qilmang: Qisqa sahifaga qöymang — 3 ekrandan uzun bölmasa kerak emas. - Qilmang: FAB bilan bir burçakka qöymang — data-position="start" bilan ajrating. - Qilmang: Ikon-tugmani nomsiz qoldirmang — .fx-backtotop__label (körinmasa ham) yoki aria-label. ## Belgi (badge) (`badge`, beta, 0.1.0 dan) Holat yoki toifa yorliği. Ohanglar: standart, info, brand, success, warning, error; köriniş: yengil (standart), solid, outline; ölçam sm/lg; ikonli; nuqtali (data-marker="dot") va son (data-type="count"). - Qaçon: Holat yoki toifani qisqa yorliq bilan körsatiş. - Qaçon emas: Bosiladigan filtr → `tabs` - Variantlar: data-tone=neutral|info|brand|success|warning|error (standart neutral); data-marker=none|dot (standart none); data-type=label|count (standart label); data-color=none|yellow|pink|blue|coral|green|purple (standart none); data-style=subtle|solid|outline (standart subtle); data-size=sm|md|lg (standart md); data-count= - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-category-blue-subtle, --fx-bg-category-coral-subtle, --fx-bg-category-green-subtle, --fx-bg-category-pink-subtle, --fx-bg-category-purple-subtle, --fx-bg-category-yellow-subtle, --fx-bg-error-solid, --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-success-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-width-default, --fx-ease-standard, --fx-fg-error, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-base, --fx-radius-circle, --fx-radius-tag, --fx-size-icon-md, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary, --fx-text-secondary ```html Qoralama Tölangan Muddati ötgan Faol 12 RedFox WebFox Yangi Faol Xato Kutilmoqda Qoralama ``` - Qilmang: Holatni faqat rang bilan bildirmang — matn ham bölsin. - Qilmang: Kategoriya rangiga ma'no yuklamang (xato, ogohlantiriş) — buning uçun data-tone. ## Banner (`banner`, beta, 0.22.0 dan) Butun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş. Yopilgani eslab qolinadi (data-fx-banner="kalit"). Tonlar: neytral, info, warning, error, brand. - Qaçon: Butun sayt yoki ilova uçun muhim e'lon (texnik işlar, obuna holati, yangi reliz). - Qaçon emas: Bitta bölim yoki sahifa içidagi xabar → `alert`; Amal natijasi → `toast` - Variantlar: data-tone=neutral|info|warning|error|brand (standart neutral); data-sticky=on - Klaviatura: Tab, Enter — Havola va yopiş tugmasi - Tokenlar: --fx-bg-brand-solid, --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-warning-subtle, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-standard, --fx-fg-error, --fx-fg-info, --fx-fg-warning, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-press, --fx-radius-badge, --fx-radius-circle, --fx-size-min-target, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary ```html

Obunangiz 3 kundan keyin tugaydi.

Uzaytiriş

Yangi: grafiklar oilasi çiqdi.

Nima yangi
``` - Qilmang: Bir sahifada ikkitadan ortiq banner qöymang. - Qilmang: Bannerda uzun matn yozmang — bir-ikki qator va bitta havola. - Qilmang: Şaxsiy xabar (amal natijasi) uçun banner emas — toast. ## Ustunli röyxat (`barlist`, beta, 0.23.0 dan) Har satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar. Çiziq nom ortida (standart) yoki nom ostida ingiçka (track). Qiymat har doim matn bilan; uluş CSS özgaruvçisida (--fx-barlist-value) (#60). - Qaçon: Toifalar böyiça yetakçilarni taqqoslaş (top-N). - Qaçon emas: Vaqt böyiça özgariş → `chart`; Aniq qiymatlar jadvali → `table` - Variantlar: data-variant=track (standart fill); data-role=brand|ink|accent|risk|context (standart brand) - Klaviatura: Tab, Enter — Nom havola bölsa — ötadi - Tokenlar: --fx-bg-surface, --fx-border-color-focus, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-motion-slow, --fx-radius-badge, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-primary, --fx-text-secondary, --fx-viz-accent, --fx-viz-brand, --fx-viz-context, --fx-viz-ink, --fx-viz-risk, --fx-viz-track ```html
  • Toşkent
    312
  • Samarqand
    168
``` - Qilmang: Satrlarni qiymat böyiça kamayiş tartibida bering; 8 tadan köpini «Boşqa» qatoriga yiğing. - Qilmang: Qiymatni faqat çiziq bilan bermang — raqam har satrda. - Qilmang: Bir röyxatda 2 tadan köp rol rangini işlatmang (60/30/10). ## Boğlovçi nur (`beam`, beta, 0.29.0 dan) Integratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi. Boğlanişlar bitta atributda: data-links="sayt>crm, bot>crm, crm>1c" (`<` — teskari yönaliş). Çiziqlarni foxui.js çizadi va ölçam özgarsa qayta hisoblaydi; oxirida kiçik strelka — harakatsiz rejimda ham yönaliş körinadi. Joylaşuv: 3 ustun (manbalar · markaz · natija) yoki data-layout="row". - Qaçon: Landing sahifasidagi «integratsiyalar» bölimi: qaysi manbadan qayerga ma'lumot oqadi. Onboarding jarayonida ulaniş holatini körsatiş (bot → CRM). - Qaçon emas: Bosqiçma-bosqiç jarayon (qadamlar) → `steps`; Bosqiçlar böyiça miqdor oqimi → `chart` - Variantlar: data-links=a>b, c
Sayt Telegram bot Dökon
CRMArizalar
1CBuxgalteriya PDFHisobot
``` - Qilmang: Bitta sxemada 8 dan ortiq boğlaniş bermang — çiziqlar çalkaşadi. - Qilmang: Nur rangini ma'no uçun işlatmang (masalan, xato) — u faqat yönaliş urğusi. - Qilmang: Sxemani bezak deb yaşirmang: ildizga qisqa aria-label yozing — nima qayerga oqadi. ## Bento tör (`bento`, beta, 0.28.0 dan) Landing xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense). Har katak — ixtiyoriy ikon, sarlavha, qisqa matn va çetigaça çiqadigan media (illyustratsiya yoki mini UI). Butun katak havola bölişi mumkin (.fx-bento__link) — hover'da media biroz kattalaşadi. Telefonda bitta ustun. Effektlar qatlami bilan (data-fx="spotlight") kursor ortidan nur. - Qaçon: Landingda 4–7 ta xususiyatni vizual mozaika qilib körsatiş. Mahsulotning bir neçta tomonini mini UI parçalari bilan namoyiş qiliş. - Qaçon emas: Bir xil vazndagi xususiyatlar röyxati → `features`; Rasm galereyasi → `gallery` - Variantlar: data-cols=2|4 (standart 3); data-span=2x1|1x2|2x2|3x1 (standart 1x1); data-tone=brand|subtle (standart surface); data-media=top (standart bottom) - Klaviatura: Tab — Havolali kataklar orasida - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-emphasized, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-knob-motion-lift, --fx-motion-slow, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --fx-size-control-sm, --fx-size-icon-md, --fx-space-12, --fx-space-2, --fx-space-4, --fx-space-6, --fx-text-brand, --fx-text-on-brand, --fx-text-secondary ```html

  • 8 rang mavzusi, 4 uslub

    Brendingizga eng yaqin mavzuni tanlang — pastel, neytral va yordamçi ranglar birga keladi.

  • Özbekça — boşidan

    Har şrift ʻ belgisini töğri çiqaradi, qöriqçi buni har build'da tekşiradi.

  • AI agent uçun MCP

    Agent komponent va qoidalarni özi oladi.

  • Yoruğ va qoronği

    Har mavzu ikkala rejimda kontrast tekşiruvidan ötgan.

  • Bitta buyruq bilan yangilanadi

    Yangi versiya taklif bölib keladi: nima özgarganini körasiz va özingiz qabul qilasiz.

``` - Qilmang: Hamma katakni bir xil ölçamda qilmang — unda oddiy tör (features) yetarli. - Qilmang: Katak içiga uzun matn yozmang — sarlavha va 1–2 qator. - Qilmang: Bir törda bittadan ortiq brend rangli katak qöymang. ## Fon: naqş va effektlar (`bg`, beta, 0.28.0 dan) Hero, böş holat va CTA bloklari orqasidagi bezak fon (4.61): nuqtalar, katak yoki qiya çiziqlar — faqat CSS gradient va mask, rasm faylisiz. Çetga qarab yumşoq sönadi (data-fade: markaz — standart, tepa, past, yöq), data-glow bilan tepadan mavzu rangidagi yumşoq nur qöşiladi. Rang matn rangidan aralaştiriladi — yoruğ va qoronği rejimda, har mavzuda özi moslaşadi. Ota blok position: relative boʻlishi kifoya: fon butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. 5-toʻlqin — fon effektlari: don teksturasi (data-texture="noise", 4.62), avrora — mavzu ranglaridan sekin oqadigan doğlar (data-fx="aurora", 4.63), retro perspektiv tör (data-fx="retro-grid", 4.64), meteorlar (data-fx="meteors", 4.65), tepadan tuşuvçi nur (data-fx="rays", 4.67), miltillovçi tör — canvas, data-interactive bilan kursor yonida yonadi (data-fx="flicker", 4.68) va markazdan tarqaluvçi halqalar (data-fx="ripple", 4.69). Harakatli effektlar foxui.js (data-fx-bg) bilan faqat körinişda harakatlanadi; JS yöq, harakat kamaytirilgan yoki data-fx-motion="calm|none" — statik kadr. - Qaçon: Landing hero orqasi — sahifa tekis va böş körinmasin. Böş holat, 404 yoki CTA bloki ortida yengil tekstura. Landing hero, işga tuşiriş, «yangi tarif» bannerida harakatli fon (avrora, nur, meteor) — bitta urğu sifatida. Integratsiya yoki bot ulangan holat ortida halqa tölqinlari (ripple). - Qaçon emas: Kontent kartasi foni → `card`; Rasm yoki illyustratsiya → `image`; Kursorga ta'sirlanuvçi zarraçalar → `particles`; Ikki element orasidagi oqim çiziği → `beam` - Variantlar: data-pattern=dots|grid|lines (standart none); data-size=sm|lg (standart md); data-fade=top|bottom|none (standart center); data-tone=strong|brand (standart subtle); data-on=brand (standart surface); data-glow=on (standart off); data-texture=noise (standart none); data-fx=aurora|retro-grid|meteors|rays|flicker|ripple (standart none); data-interactive=on (standart off); data-count=N (standart 8) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-pink, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-exit, --fx-ease-standard, --fx-radius-circle, --fx-radius-pill, --fx-space-1, --fx-space-12, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-primary, --fx-viz-accent ```html
Nuqtalar
Katak + nur
Çiziqlar
Don + nurTekis gradient «jonlanadi»
AvroraYangi tarif — 1-noyabrdan
Retro törHackathon 2026 · Toşkent
MeteorlarIşga tuşiriş kuni
NurFoxUI 1.0 çiqdi
Miltillovçi törKursorni olib keling
TBHalqalarBot ulandi
``` - Qilmang: Naqşni matn ustida kuçli qilmang — öqilişi buzilmasin (tone="strong" faqat böş maydonda). - Qilmang: Bitta sahifada har bölimga naqş qöymang — hero va yakuniy CTA yetarli. - Qilmang: Fonni ma'no uçun işlatmang — u faqat bezak (aria-hidden). - Qilmang: Bitta sahifada bittadan ortiq harakatli fon qöymang — hero yetarli; matn ostida harakat öqişni qiyinlaştiradi. - Qilmang: Harakatli fonni ma'lumot kartalari, jadval yoki forma orqasiga qöymang. ## Tarif va hisob-kitob (`billing`, beta, 0.28.0 dan) Tarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF). SaaS sozlamalari uçun — FoxUI obunasining özi ham şu naqşda. - Qaçon: SaaS sozlamalarida obuna, limit va tölovlar sahifasi. Mijoz kabinetida «Mening tarifim» bölimi. - Qaçon emas: Tariflarni soliştirib tanlaş (marketing sahifasi) → `card`; Xarid jarayoni — karta va manzil kiritiş → `checkout` - Variantlar: data-state=expiring (standart —) - Klaviatura: Tab — Amallar, karta tugmalari va PDF havolalari böylab - Tokenlar: --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-md, --fx-fg-warning, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

Joriy tarif

Biznes Faol

11 880 000 söm/ yil

  • Keyingi tölov: 17.10.2027 — avtomatik uzaytiriladi
  • Oyiga hisoblaganda: 990 000 söm (2 oy tejaldi)

Foydalaniş

Foydalanuvçilar5 / 10
Mijozlar yozuvlari8 420 / 25 000
SMS xabarlar (oktabr)1 860 / 2 000 — 93 %
Fayl xotirasi3,2 GB / 10 GB

Tölov usuli

Uzcard, oxirgi raqamlari •••• 4417Amal qiliş muddati 09/28Asosiy
Humo, oxirgi raqamlari •••• 0932Muddati tugayapti: 11/26

Hisob-fakturalar

SanaRaqamDavrSummaHolatYuklab oliş
17.10.2026HF-2026-041717.10.2026 – 16.10.202711 880 000 sömTölanganPDF
03.09.2026HF-2026-0311Qöşimça 2 000 SMS240 000 sömTölanganPDF
17.10.2025HF-2025-038817.10.2025 – 16.10.20269 900 000 sömTölanganPDF
17.09.2025HF-2025-0352Oylik, sentabr990 000 sömQaytarilganPDF
``` - Qilmang: Narxni oyma-oy yaşirib, faqat yillik summani körsatmang — «oyiga hisoblaganda» qatori işonç beradi. - Qilmang: Karta raqamini töliq körsatmang — faqat oxirgi 4 raqam va muddat. - Qilmang: Çegaraga yaqin limitni faqat rang bilan bildirmang — foiz va söz (93 %) yozilsin. - Qilmang: «Obunani bekor qiliş»ni yaşirmang yoki asosiy tugma qilmang — ikkinçi darajali, lekin körinadigan bölsin. ## Bleed (manfiy çet) (`bleed`, beta, 0.29.0 dan) Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi. .fx-card va .fx-container içida çet miqdori özi aniqlanadi; boşqa joyda data-space (ota içki çeti) bilan. Tomon: inline (standart) · top / bottom (rasm karta tepasida yoki pastida, yoyi kartaga mos) · all · start · end · viewport (ekran enigaça). - Qaçon: Karta içida jadval yoki röyxat çekkadan çekkaga çizilişi kerak. Karta tepasidagi rasm (media) yoki bölim orasidagi töliq en çiziq. Landing: konteyner içidagi bitta banner ekran enigaça. - Qaçon emas: Kartaning standart rasm qismi → `card`; Butun sahifa bölimi töliq en → `layout` - Variantlar: data-side=inline|top|bottom|all|start|end|viewport (standart inline); data-space=3|4|5|6|8 (standart 5) - Tokenlar: --fx-border-width-default, --fx-radius-surface, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-space-8 ```html
Ombor içki körinişi

Ombor № 2 — Sergeli

MahsulotQoldiq
Paxta tolasi1 240 kg
Ip kalava380 dona

Oxirgi inventarizatsiya: 12 oktyabr

``` - Qilmang: Ota içki çetidan (padding) katta çet bermang — element kartadan taşqariga çiqib ketadi (data-space ota bilan bir xil bölsin). - Qilmang: viewport tomonini ota overflow-x: clip bölmagan joyda işlatmang — gorizontal scroll çiqadi. - Qilmang: Bleed'ni oraliq örniga işlatmang — u faqat çetga tegiş uçun. ## Blog röyxati (`blog`, beta, 0.29.0 dan) Blog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination). Har karta: muqova (rasm yoki pastel fon), toifa havolasi, sarlavha (havola butun kartani bosiladigan qiladi — toifa havolasi ustida qoladi), 3 qatorgaça qisqartirilgan matn, muallif, sana va öqiş vaqti. data-layout: grid (standart) yoki list (rasm çapda — arxiv va qidiruv sahifasi). Maqolaning özi — fx-article. - Qaçon: Blog boş sahifasi, toifa va muallif arxivi. Landing'da «Sönggi maqolalar» bölimi (3 karta, filtrsiz). - Qaçon emas: Maqolaning özi → `article`; Versiyalar va özgarişlar lentasi → `changelogfeed` - Variantlar: data-layout=grid|list (standart grid); data-featured=on (standart off); data-color=yellow|pink|blue|coral|green|purple (standart none) - Klaviatura: Tab — Filtr, keyin har karta (toifa va sarlavha), oxirida sahifalaş; Enter — Maqolani oçadi - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-dialog-width, --fx-ease-standard, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-line-height-snug, --fx-line-height-tight, --fx-motion-slow, --fx-radius-surface, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

Blog

Dizayn tizimlari haqida özbekça

Har payşanba: amaliy maqolalar, reliz tafsilotlari va mijozlar tajribasi.

``` - Qilmang: Kartaga içma-iç köp havola qöymang — sarlavha havolasi butun kartani qoplaydi; faqat toifa havolasi ustida qoladi. - Qilmang: Muqovasiz kartani böş joy bilan qoldirmang — pastel fon (data-color) yoki toifa rasmi qöying, tör tekis tursin. - Qilmang: Sana va öqiş vaqtini yaşirmang — öquvçi maqola eskirganmi, qança vaqt olişini birinçi qaraydi. ## Doska (kanban) (`board`, beta, 0.22.0 dan) Holat ustunlari va kartalar. Karta siçqonça bilan yoki klaviaturada sudraladi (Space — kötariş, strelkalar — suriş, Space — qöyiş, Esc — bekor). WIP çegarasi oşsa — ogohlantiriş; ustun yiğiladi (tor vertikal). Har köçişda fx-board-move hodisasi. - Qaçon: Oqim bosqiçlari böyiça işlar (vazifa, savdo voronkasi, qabul). - Qaçon emas: Köp maydonli taqqoslaş → `table`; Uzun röyxat va ommaviy amallar → `row` - Variantlar: data-collapsed= - Klaviatura: Enter (kartada) — Kartani oçadi — sarlavhadagi havola (butun karta bosiladi); Space — Kartani kötaradi / qöyadi; ← → — Boşqa ustunga; ↑ ↓ — Ustun içida tartib; Esc — Bekor qiladi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-sm, --fx-ease-standard, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-motion-press, --fx-motion-fast, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-shadow-lg, --fx-shadow-md, --fx-shadow-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-tertiary ```html
Qilinadi
Jarayonda
Bajarildi12
    ``` - Qilmang: Kartaga 2 qatordan uzun sarlavha va köp yorliq qöymang — tafsilot panelda. - Qilmang: Ustunlar 7 tadan oşmasin — guruhlang yoki röyxat körinişi. ## Yöl satri (`breadcrumbs`, beta, 0.13.0 dan) Breadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/». Uzun oxirgi nom «…» bilan. Ortiqça bölimlar «…» tugmasi ostidagi menyuda (2.100); ota bölimni almaştirgiç — tugma + menyu (2.101). - Qaçon: Içma-iç sahifalarda qayerdaligini körsatiş. - Qaçon emas: Bir darajali sahifalar → `nav` - Klaviatura: Tab, Enter — Ota bölimga ötadi; Enter, Space, ↑ ↓ — «…» yoki almaştirgiç menyusini oçadi va band tanlaydi (fx-menu) - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-fast, --fx-radius-badge, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-text-primary, --fx-text-tertiary ```html ``` - Qilmang: Joriy sahifani havola qilmang. - Qilmang: «…» ostiga joriy sahifani yaşirmang — u doim körinadi. ## Ommaviy panel (`bulkbar`, beta, 0.22.0 dan) Tanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×. Esc tanlovni bekor qiladi. - Qaçon: Röyxat yoki jadvalda bir neçta qator tanlanganda amallar. - Qaçon emas: Jadval içidagi tepadagi panel → `table` - Klaviatura: Esc — Tanlovni bekor qiladi - Tokenlar: --fx-bg-page, --fx-border-width-default, --fx-ease-exit, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-exit-fast, --fx-motion-shift-md, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-sm, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary ```html
    Jarayonda 2
    ``` - Qilmang: Panelda 4 tadan köp amal qöymang — qolgani menyuda. ## Portlaş va konfetti (`burst`, beta, 0.29.0 dan) Yoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»). data-fx-burst — tugma yoqilganda (aria-pressed="true") ikon atrofida halqa va 8 ta rangli nuqta tarqaladi, ikon prujina bilan sakraydi; öçirilganda — jim. data-toggle — tugma holatni özi almaştiradi va içidagi [data-count] ni ±1 qiladi; reactbar kabi guruhga qöyilsa — guruh xulqi holatni almaştiradi, portlaş natijaga qaraydi. data-fx-burst="confetti" — bosilganda tugmadan konfetti otiladi. Global: fxConfetti({ origin, count }) — masalan tölov muvaffaqiyatli bölganda. Ranglar — toifa ranglaridan. Harakat kamaytirilsa, calm yoki none rejimda heç narsa uçmaydi — holat baribir aria-pressed'da. - Qaçon: «Yoqdi», «Saqlab qöyiş» kabi yoqiladigan tugmalar (ijtimoiy, kontent). Onboarding yakuni, birinçi sotuv, tölov muvaffaqiyati — konfetti. - Qaçon emas: Oddiy amal natijasi haqida xabar → `toast`; Reaksiyalar paneli (portlaşsiz) → `reactbar` - Variantlar: data-fx-burst=like|confetti (standart like) - Klaviatura: Enter / Space — Yoqadi/öçiradi (yoki konfetti) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-border-width-focus, --fx-ease-bounce, --fx-ease-enter, --fx-ease-exit, --fx-ease-standard, --fx-motion-fast, --fx-motion-slow, --fx-motion-slower, --fx-radius-badge, --fx-radius-circle, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-text-primary, --fx-text-secondary, --fx-z-toast ```html

    Birinçi loyihangiz tayyor!

    «Samarqand Grand» sayti e'lon qilindi. Jamoangizga xabar bering.

    ``` - Qilmang: Konfettini tez-tez takrorlanadigan amalga qöymang (saqlaş, yuboriş) — faqat haqiqiy yutuq: birinçi loyiha, tölov, maqsadga yetiş. - Qilmang: Portlaşni yagona javob qilmang — holat (aria-pressed, son) ham özgarsin. - Qilmang: Bir ekranda bir neçta konfetti tugmasi qöymang. ## Tugma (`button`, beta, 0.1.0 dan) Amal tugmasi. Variantlar: primary (bölimda bitta), secondary, ghost, danger, link. Faqat ikonka (data-shape="icon" + aria-label), töliq en, bosilgan holat (aria-pressed), yuklaniş (aria-busy — matn joyida qoladi, ustida aylana). Qöşimça: xs/xl ölçam, tonal, outline, danger-ghost/outline variantlari; guruh (fx-btn-group) va split; menyu chevron (fx-btn__chev); ikon almaşinuvi (fx-btn__on/off); matn bilan yuklaniş (data-loading="text"); içki halqa (data-focus="inset"). Holatli tugma (data-state="success|error"): yuklanişdan keyin qisqa ✓ yoki ✕ belgisi (data-state-label bilan söz ham), ~1,6 s dan keyin özi asl körinişga qaytadi; xatoda yengil silkiniş. - Qaçon: Amalni bajariş: saqlaş, yuboriş, öçiriş, oynani oçiş. - Qaçon emas: Boşqa sahifaga ötiş → `link`; Bir neçta holatdan birini tanlaş → `tabs` - Variantlar: data-variant=secondary|primary|ghost|danger|link|tonal|outline|danger-ghost|danger-outline (standart secondary); data-size=xs|sm|md|lg|xl (standart md); data-shape=text|icon (standart text); data-width=auto|full (standart auto); data-loading=spinner|text (standart spinner); data-focus=outside|inset (standart outside); data-orientation=horizontal|vertical (standart horizontal); data-state=idle|success|error (standart idle) - Klaviatura: Enter, Space — Bosiladi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-active, --fx-bg-brand-solid-hover, --fx-bg-brand-subtle, --fx-bg-brand-subtle-active, --fx-bg-brand-subtle-hover, --fx-bg-error-solid, --fx-bg-error-solid-active, --fx-bg-error-solid-hover, --fx-bg-error-subtle, --fx-bg-error-subtle-active, --fx-bg-muted, --fx-bg-muted-hover, --fx-bg-pressed, --fx-bg-success-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-duration-pulse, --fx-duration-spin, --fx-ease-spring, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-field-fill, --fx-knob-motion-lift, --fx-knob-outline, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-scale-enter, --fx-motion-shift-sm, --fx-motion-slow, --fx-radius-circle, --fx-radius-control, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-brand, --fx-text-disabled, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary ```html
    Havola-tugma ``` - Qilmang: Bir bölimda ikkita primary tugma qöymang. - Qilmang: Faqat ikonkali tugmani aria-label'siz qoldirmang. - Qilmang: Yuklanayotganda tugma matnini «...» ga almaştirmang — aria-busy qöying. - Qilmang: Guruhdagi tugmalar orasiga qölda oraliq qöymang — fx-btn-group çegarani birlaştiradi. - Qilmang: Natija holatini faqat rang bilan bildirmang va doimiy qoldirmang — data-state qisqa tasdiq; xato sababi forma yonida yozilsin. ## Kalendar (`calendar`, beta, 0.23.0 dan) Oy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi. Hafta Duşanbadan, oy va kun nomlari özbekça. Bugun — halqa, tanlangan — töldirilgan, öçirilgan kun — çizilgan, oraliq — tasma. APG sana töri klaviaturasi; xulq foxui.js'da çizadi. Içida fx-datepicker va fx-daterange işlatiladi. Bir neçta sana (4.99): data-mode="multiple" — dam oliş kunlari, smenalar: har kun bosilganda qöşiladi yoki olinadi, pastda «N kun tanlandi». Hafta raqamlari (4.98): data-weeknums — çapda ISO hafta raqami (sprint, iş rejasi). Yil va ön yillik (4.100): data-mode="year" — faqat yil tanlanadi (qiymat «2026»); data-level="decade|year|month" — boşlanğiç köriniş: tuğilgan sanani ön yilliklardan (1990–1999) → yil → oy → kun tez tanlaş. Yillar sarlavhasi bosilsa — ön yilliklar (120 yil). - Qaçon: Sanani köz bilan tanlaş, oy va hafta kunlari kontekstida. Hisobot davri (oraliq rejimi). - Qaçon emas: Maydon içida sana tanlaş → `datepicker`; Tayyor oraliqlar (Bugun, 7 kun) bilan davr tanlaş → `daterange`; Faqat soat va daqiqa → `timefield` - Variantlar: data-mode=single|range|month|multiple|year (standart single); data-size=md|sm (standart md); data-weeknums=; data-level=decade|year|month (standart day) - Klaviatura: ← → — Oldingi/keyingi kun; ↑ ↓ — Oldingi/keyingi hafta; Home / End — Haftaning boşi / oxiri (Du / Ya); PageUp / PageDown — Oldingi/keyingi oy; Shift + PageUp / PageDown — Oldingi/keyingi yil; Enter / Boʻshliq — Kunni tanlaydi; Esc — Oy/yil körinişidan kunlarga qaytadi; ← → ↑ ↓ (oʻn yilliklarda) — 10 / 30 yil; PageUp/PageDown — 120 yil - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-control, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-disabled, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    ``` - Qilmang: Tuğilgan sana kabi 20+ yil orqaga ketadigan sana uçun faqat kalendar qöymang — fx-dateinput (yozib kiritiş) bering. - Qilmang: Öçirilgan kunni yaşirmang — sababini hint bilan yozing. ## Callout (`callout`, beta, 0.22.0 dan) Hujjat içidagi eslatma: alert'dan yengilroq — yengil tus, çap çiziq, sarlavha sözi + şakl. Turlar: note, tip, important, warning, caution. - Qaçon: Hujjat/maqola içida eslatma, maslahat, ogohlantiriş. - Qaçon emas: Sahifa holati haqida muhim xabar → `alert`; Sayt böylab e'lon → `banner` - Variantlar: data-tone=tip|important|warning|caution (standart note) - Tokenlar: --fx-border-width-focus, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-size-sm, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-size-status-dot-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary ```html ``` - Qilmang: Bir ekranda uçtadan ortiq callout qöymang — e'tibor yöqoladi. - Qilmang: Sarlavhasiz tonni faqat rangga tayantirmang — sarlavha sözi yoki matn holatni aytsin. - Qilmang: Vaqtinçalik yoki yopiladigan xabar uçun callout emas. ## AI artefakt paneli (`canvas`, beta, 0.29.0 dan) Suhbat yonidagi AI yaratgan hujjat, kod yoki sahifa paneli (4.203, Vercel AI Elements «Artifact», Claude Artifacts, ChatGPT Canvas). Sarlavha qatori: tur belgisi, nom va meta («2 daqiqa oldin»), versiyalar («‹ v2 / 2 ›» — har tahrir yangi versiya), Köriniş ↔ Kod yorliqlari (role="tab"), nusxalaş, töliq ekran va yopiş. Tana: har versiya .fx-canvas__version — içida natija (.fx-canvas__preview) va manba (.fx-canvas__code). data-state="streaming" — AI hali yozmoqda: tepada yuguruvçi çiziq va «Yozilmoqda…». Xulq (data-fx-canvas): yorliqlar ← → bilan, versiyalar va natija jonli hududda aytiladi, töliq ekrandan Esc bilan çiqiladi, yopilsa fokus oçuvçi tugmaga ([data-canvas-open="id"], aria-expanded) qaytadi. Hodisalar: fx-canvas-view, fx-canvas-version, fx-canvas-close; API: el.fxCanvas.add(versiya), .open(), .close(). Suhbat bilan yonma-yon — fx-split yoki ikki ustunli grid. - Qaçon: AI çat yonida yaratilgan hujjat, kod, jadval yoki sahifani körsatiş va tahrirlaş. Bir natijaning bir neçta versiyasini soliştiriş. - Qaçon emas: Suhbat içidagi qisqa kod parçasi → `code`; Vosita çaqiruvi natijasi → `toolcall`; Oddiy yon panel → `sheet` - Variantlar: data-view=preview|code (standart preview); data-state=streaming (standart idle); data-expanded=on (standart off) - Klaviatura: ← → Home End (yorliqlarda) — Köriniş ↔ Kod; Enter, Space — Versiya, nusxa, töliq ekran, yopiş tugmalari; Esc (toʻliq ekranda) — Oddiy holatga qaytadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-purple, --fx-bg-muted, --fx-bg-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-control-h-sm, --fx-duration-indeterminate, --fx-ease-emphasized, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-motion-loop, --fx-line-height-relaxed, --fx-motion-fast, --fx-motion-press, --fx-motion-shift-lg, --fx-motion-slow, --fx-radius-control, --fx-radius-overlay, --fx-shadow-lg, --fx-shadow-md, --fx-shadow-sm, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-disabled, --fx-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-z-modal ```html ``` - Qilmang: Har kiçik javobni artefaktga çiqarmang — faqat foydalanuvçi qayta işlatadigan, tahrirlanadigan natija (hujjat, kod, jadval, sahifa). - Qilmang: Eski versiyani ustidan yozmang — har tahrir yangi versiya, orqaga qaytiş mumkin bölsin. - Qilmang: Yaratilgan HTML'ni sahifaga töğridan-töğri joylamang — natija iframe sandbox içida yoki tozalangan holda körsatilsin. ## Captcha ramkasi (`captcha`, beta, 0.29.0 dan) «Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / ! xato / ⟳ «Muddati tugadi». Belgi bosilganda «fx-captcha-verify» hodisasi çiqadi — integratsiya vidjetni .fx-captcha__slot'ga çaqiradi va natijani done(token) yoki fail(matn) bilan qaytaradi. Token yaşirin inputda; tasdiqsiz forma yuborilmaydi. data-expires — tokenning amal muddati (soniya). data-mode="invisible" — körinmas tekşiruv uçun faqat xabar qatori. - Qaçon: SMS kod yuboriş, röyxatdan ötiş, parolni tiklaş, oçiq aloqa formasi. Bir xil körinişda turli captcha provayderlarini almaştiriş. - Qaçon emas: Oddiy rozilik belgisi → `check`; SMS orqali tasdiqlaş kodi → `otp` - Variantlar: data-state=idle|loading|verified|error|expired (standart idle); data-mode=checkbox|invisible (standart checkbox); data-size=normal|compact (standart normal) - Klaviatura: Boʻshliq / Enter — Tekşiruvni boşlaydi; Tab — Belgi → brend havolalari - Tokenlar: --fx-bg-brand-solid, --fx-bg-field, --fx-bg-subtle, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-duration-spin, --fx-ease-standard, --fx-fg-success, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-bold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-popover-width, --fx-radius-badge, --fx-radius-checkbox-ratio, --fx-radius-circle, --fx-radius-control, --fx-size-control-sm, --fx-size-min-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-error, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Bot himoyasiMaxfiylik · Şartlar

    Bot himoyasiMaxfiylik · Şartlar

    Bot himoyasiMaxfiylik · Şartlar

    Bot himoyasiMaxfiylik · Şartlar

    Sahifa bot himoyasi bilan tekşirilmoqda

    ``` - Qilmang: Har formaga captcha qöymang — faqat SMS yuboriş, röyxatdan ötiş, parolni tiklaş kabi suiiste'mol qilinadigan joyga. - Qilmang: Rasmli «svetoforni toping» captcha'sini asosiy yöl qilmang — köriş qiyin odam uçun tösiq; körinmas tekşiruv yoki audio muqobil bölsin. - Qilmang: Muddati tugagan tokenni jimgina yubormang — holat «Muddati tugadi» deb aytilsin. ## Karta (`card`, beta, 0.1.0 dan) Yuza: içki çet 20, içidagi oraliq 16. Bir qatordagi kartalar böyi teng (WDS r181). Anatomiya: sarlavha qatori (+amal), media, tana, pastki qator, amallar. Variantlar: gorizontal, ixçam, tanlanadigan (içida belgilaş katagi). Kengaytma: data-stretched + .fx-card__link (butun karta havola), aria-pressed (tanlanadigan), data-variant=outline|filled|ghost,
    + .fx-card__summary, aria-busy, data-flush (jadval kartasi), .fx-card__well. - Qaçon: Bir mavzudagi ma'lumotni alohida yuzaga yiğiş. - Qaçon emas: Butun sahifa bölagi → `section` - Variantlar: data-variant=default|raised|outline|filled|ghost (standart default); data-layout=vertical|horizontal (standart vertical); data-density=default|compact (standart default); data-stretched=true; data-flush=true - Klaviatura: Space — Tanlanadigan kartada katakni almaştiradi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-enter, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-knob-motion-lift, --fx-motion-base, --fx-motion-instant, --fx-motion-lift, --fx-motion-press, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-shadow-md, --fx-shadow-sm, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-primary, --fx-text-secondary ```html

    Yillik obuna

    Hisob-kitob: har yili 17-oktabrda

    Faol

    Barça komponentlar, MCP va yangilanişlar. 3 qurilma.

    1 200 000 söm
    Qöşimça sozlamalar

    Bu yerda yaşirin tafsilot.

    Buyurtmalar

    Yuklanmoqda…
    1–10 / 240
    ``` - Qilmang: Karta içida aylantiriş (scroll) qilmang. - Qilmang: Tanlanadigan kartada içida alohida havola yoki tugma qöymang — butun karta bitta belgilaş maydoni. - Qilmang: Media rasmiga muhim matnni yozib qöymang — alt va matn alohida. ## Kartalar dastasi (`cardstack`, beta, 0.29.0 dan) Ustma-ust turgan kartalar (4.80): oldingisi töliq, orqadagilari biroz yuqorida va kiçikroq — «yana bor» hissi. Avtomatik (data-autoplay, ms) yoki tugmalar va ← → bilan almaşadi; oldingi karta pastga sirpanib ketadi. Mijozlar fikri, yangilik va e'lonlar uçun. Avtomatik almaşiş faqat körinişda, siçqonça yoki fokus ustida töxtaydi, harakat kamaytirilganda öçadi. - Qaçon: Landing sahifasidagi mijozlar fikri — bir vaqtda bittasi, «yana bor» körinib tursin. Dashboard'dagi e'lonlar yoki maslahatlar dastasi. - Qaçon emas: Köp rasm yoki mahsulotlarni varaqlaş → `carousel`; Hamma fikrlar bir vaqtda körinsin → `testimonials` - Variantlar: data-autoplay=ms (standart 0); data-depth=1|2|3 (standart 0) - Klaviatura: ← → — Oldingi / keyingi karta; Tab — Oldingi kartadagi havolalar va tugmalar - Tokenlar: --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-ease-emphasized, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-line-height-relaxed, --fx-motion-base, --fx-motion-exit-base, --fx-motion-slow, --fx-radius-overlay, --fx-shadow-md, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-tertiary ```html
    • «Arizalar endi bitta oynada: sayt, bot va qönğiroqlar. Menejerlar javob beriş vaqti 2 soatdan 15 daqiqaga tuşdi.»
      DR
      Dilnoza RahimovaSavdo bölimi rahbari, «Mebel Uy»
    • «Ombor qoldiği har kuni ertalab özi hisoblanadi — Excel'dan butunlay voz keçdik.»
      JT
      Javlon ToshmatovBoş hisobçi, «Agro Savdo»
    • «Bemorlar navbatni Telegram orqali oladi, qabulxonada tirbandlik yöq.»
      MY
      Malika YusupovaKlinika administratori
    • «Öqituvçilar davomatni telefondan belgilaydi, ota-onalar şu zahoti xabar oladi.»
      BA
      Bobur AliyevDirektor, «Tong maktabi»
    1 / 4
    ``` - Qilmang: Muhim ma'lumotni faqat orqadagi kartalarga qoldirmang — foydalanuvçi ularni körmasligi mumkin. - Qilmang: Avtomatik almaşişni 5 soniyadan tez qilmang va töxtatiş imkonini olib taşlamang. - Qilmang: 6 tadan köp karta qöymang — röyxat yoki karusel işlating. ## Karyera sahifasi (`careers`, beta, 0.29.0 dan) Marketing saytining «Karyera / Vakansiyalar» sahifasi (4.177): sarlavha, afzalliklar töri (nega biz bilan işlaş), bölim filtri (fx-chip, aria-pressed — saralaşni ilova qiladi) va bölimlar böyiça guruhlangan vakansiyalar röyxati. Har qator — lavozim (havola butun qatorni bosiladigan qiladi), şahar, iş turi, tajriba va maoş oraliği; yangi vakansiya data-new bilan «Yangi» belgisini oladi. Oçiq vakansiya yöq bölsa — .fx-careers__empty (rezyume yuboriş taklifi). data-variant: list (standart) yoki cards. - Qaçon: Kompaniya saytining «Karyera» sahifasi. Landing'da «Biz bilan işlang» bölimi (1–3 vakansiya). - Qaçon emas: Ilova içidagi nomzodlar va bosqiçlar (ATS) → `board`; Bitta vakansiyaning töliq matni → `prose` - Variantlar: data-variant=list|cards (standart list); data-new=on (standart off) - Klaviatura: Tab — Filtr chip'lari, keyin har vakansiya — bitta töxtaş; Enter — Vakansiya sahifasini oçadi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-dialog-width, --fx-ease-standard, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-line-height-tight, --fx-motion-fast, --fx-motion-shift-sm, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --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-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Karyera

    Özbekistonning dizayn tizimini birga quraylik

    Kiçik jamoa, katta ta'sir: siz yozgan komponentni minglab dasturçi işlatadi.

    • Masofaviy yoki ofisdaToşkent ofisi yoki uydan — özingiz tanlaysiz.
    • Öqiş byudjetiYiliga 6 000 000 sömgaça kurs va konferensiyalar.
    • Tibbiy suğurtaSiz va oilangiz uçun, birinçi oydan.

    Muhandislik 2 ta

    Dizayn 1 ta

    Qöllab-quvvatlaş 1 ta

    ``` - Qilmang: Maoşni yaşirmang, agar imkon bölsa — oraliq (25–35 mln söm) körsatilgan vakansiyaga köproq ariza keladi. - Qilmang: Vakansiya qatorida içma-iç tugmalar qöymang — butun qator bitta havola (::after qoplama), ikkinçi bosiladigan narsa bölmasin. - Qilmang: Yopilgan vakansiyani röyxatda qoldirmang — olib taşlang yoki böş holatni körsating. ## Karusel (`carousel`, beta, 0.24.0 dan) Slaydlar karuseli (APG carousel): scroll-snap — barmoq bilan suriş brauzerning özida; oldingi/keyingi tugmalar, nuqtalar (tab), ixtiyoriy avto-öynatiş (data-autoplay, siçqonça/fokus ustida pauza, «Pauza» tugmasi). Kamaytirilgan harakatda avto-öynatiş yöq. Kiçik rasmlar navigatsiyasi (4.159): .fx-carousel__thumbs — nuqtalar örnida pastdagi rasmlar qatori (mahsulot sahifasi), joriysi çegara bilan. M3 turlari (4.160, data-layout): multi — bir vaqtda bir neçta slayd (katta + kiçik), hero — bitta katta slayd va yonida tor köriniş, full — çetdan çetga (ekran eni); çekkaga yaqinlaşgan slayd torayadi (scroll-driven, harakat kamaytirilsa — öçadi). - Qaçon: Bir joyda bir neçta teng huquqli slayd (suratlar, tavsiyalar) ketma-ket körsatilganda. - Qaçon emas: Rasmlarni birdan körsatiş va kattalaştiriş → `gallery`; Bölimlar orasida almaşiş → `tabs` - Variantlar: data-peek=on (standart off); data-autoplay=ms (standart off); data-layout=single|multi|hero|full (standart single) - Klaviatura: ← → — Oldingi/keyingi slayd (viewport yoki nuqtalarda); Home End — Birinçi/oxirgi slayd (nuqtalarda); Tab — Tugmalar va nuqtalar orasida - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-sm, --fx-ease-emphasized, --fx-ease-standard, --fx-font-size-md, --fx-font-size-xs, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-disabled, --fx-text-primary ```html
    Bozor
    Ombor
    Ofis
    Studiya
    Çarm sumka — old tomoni
    Çarm sumka — yon tomoni
    Çarm sumka — içki qismi
    Çarm sumka — ölçami
    Samarqand — sayohat paketi
    Buxoro — sayohat paketi
    Xiva — sayohat paketi
    Farğona — sayohat paketi
    Termiz — sayohat paketi
    ``` - Qilmang: Muhim mazmunni faqat karuselga yaşirmang — hamma ham keyingi slaydgaça yetmaydi. - Qilmang: Avto-öynatişni foydalanuvçi töxtata olmaydigan qilmang. ## Kaskad tanlov (`cascader`, beta, 0.24.0 dan) Içma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi. Menyu naqşi: ↓ ↑ band, → içkariga, ← orqaga, Esc yopadi. Hodisa `fx-cascader-change`. - Qaçon: Ierarxik tanlov: manzil, toifa → quyi toifa, mahsulot daraxti (2–3 daraja). - Qaçon emas: Bir darajali röyxat → `select`; Çuqur yoki qidiriladigan daraxt → `treeselect` - Klaviatura: Enter, Space, ↓ — Tugmada: oçadi; ↓ ↑ — Daraja içida band; → — Içki daraja oçiladi; ← — Bir daraja orqaga; Enter, Space — Barg bandni tanlaydi; Esc — Yopadi, fokus tugmaga; Home, End — Birinçi / oxirgi band - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-medium, --fx-knob-field-fill, --fx-popover-width, --fx-radius-control, --fx-radius-nav, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-tertiary ```html
    ``` - Qilmang: 3–4 darajadan çuqur qilmang; çuqur daraxt uçun `treeselect` (qidiruv bilan). - Qilmang: Tanlangan yölni faqat oxirgi nom bilan körsatmang — qaysi tumanligi noaniq qoladi. - Qilmang: Hover'ga tayanmang: sensorli qurilmada bosiş oçadi (komponent şunday). ## Changelog lentasi (`changelogfeed`, beta, 0.29.0 dan) «Nima yangi» sahifasi (4.179) — har mijoz saytiga: versiyalar lentasi. Har yozuv — çapda versiya va sana (keng ekranda scroll'da yopişib turadi), öngda sarlavha (doimiy havola — #id), qisqa xulosa, ixtiyoriy rasm va özgarişlar röyxati. Har özgariş turi söz va belgi bilan, faqat rang emas: data-type="new" (Yangi, +), "improved" (Yaxşilandi, ↑), "fixed" (Tuzatildi, ✓), "breaking" (Muhim — yangilaşda e'tibor, !). Yozuvlar vaqt öqi bilan boğlanadi, eng sönggisi data-latest bilan brend nuqtasini oladi. Tepada obuna havolalari (RSS, Telegram). data-density="compact" — rasmlarsiz, ziçroq (ilova içidagi panel uçun). Bitta changelog manbasidan (JSON) çiziladi. - Qaçon: Mahsulot va mijoz saytlarining «Nima yangi» sahifasi. Ilova içidagi «Yangiliklar» paneli (compact). - Qaçon emas: Hodisalar tarixi (kim nima qildi) → `auditlog`; Bitta yozuvning bosqiçlari → `timeline`; Maqolalar röyxati → `blog` - Variantlar: data-type=new|improved|fixed|breaking (standart new); data-density=comfortable|compact (standart comfortable); data-latest=on (standart off) - Klaviatura: Tab — Obuna havolalari, keyin har versiya sarlavhasi (doimiy havola) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-success-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-display, --fx-font-adjust-mono, --fx-font-adjust-numeric, --fx-font-family-display, --fx-font-family-mono, --fx-font-family-numeric, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-line-height-normal, --fx-line-height-snug, --fx-line-height-tight, --fx-radius-badge, --fx-radius-circle, --fx-radius-surface, --fx-size-topbar, --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-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Nima yangi

    FoxUI'dagi har bir özgariş — sana va versiya bilan.

    1. 0.28.0

      100 ta yangi naqş va «Işxona»

      Jahon dizayn tizimlari tadqiqotidan 4-tölqin: poydevor qatlamlari, forma, navigatsiya va marketing naqşlari.

      • YangiNarx jadvali, FAQ, CTA va xato sahifalari naqşlari
      • YangiTipografiya rollari: --fx-type-* tokenlari
      • YaxşilandiJadval: ustunlarni qadab qöyiş va ziçlik tanlovi
      • Muhimdata-fx-tone öqi olib taşlandi — örniga data-fx-theme

    2. 0.27.5

    Eski versiyalar
    ``` - Qilmang: Texnik commit xabarlarini töğridan-töğri köçirmang — foydalanuvçi tilida: nima özgardi va unga nima foyda. - Qilmang: Turini faqat rang bilan bildirmang — «Yangi / Yaxşilandi / Tuzatildi / Muhim» sözi va belgi doim tursin. - Qilmang: «Muhim» (breaking) özgarişni röyxat oxiriga yaşirmang — yangilaşda nima qiliş kerakligini yozing. ## Grafik (`chart`, beta, 0.20.0 dan) Grafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi. Faqat ma'lumot API'si: mahsulot içiga jadval qöyadi, çiziş, öqlar, tooltip, klaviatura va «Jadval» körinişi — komponentda. Ranglar rol bilan: siyoh, brend, aksent, xavf, kontekst (60/30/10). Donut markazida — jami yoki data-center matni. 4-tölqin: köp seriyali va ustma-ust maydon (data-type="area", data-stacked, data-stacked="percent"), voronka (data-type="funnel" — ötiş foizi va eng katta yöqotiş), maqsad/çegara çiziği (data-ref="100:Reja") va bitta izoh (), interaktiv legenda (data-legend="interactive") hamda taşqaridan seriyani yaşiriş (data-hidden — fx-legend, fx-stat tanlovi). 5-tölqin: radar — köp mezonli profil (data-type="radar"), nuqtali va pufakli (data-type="scatter": X, Y va ixtiyoriy hajm ustunlari), kombinatsiya — ikki panel, umumiy X (data-type="combo", yuqorida çiziq data-unit2, pastda ustun; ikki Y öqi bitta panelda yöq), treemap (≤ 8 katak + «Boşqa»), şarşara (data-type="waterfall", — jami), sankey (manba → maqsad → qiymat), bullet (fakt, reja tayoqçasi va kulrang zonalar) hamda zoom/brush — line, area va bar ostida mini-grafik va ikki tutqiçli oraliq (data-brush, data-brush="12" — oxirgi 12 nuqta). - Qaçon: Vaqt böyiça özgariş, toifalar taqqoslaş, uluş yoki maqsadga yaqinlikni körsatiş. Ikki ölçov boğliqligi (scatter), özgarişlar yiğindisi (waterfall), oqim taqsimoti (sankey), plan va fakt (bullet), uzun qatorda oraliq tanlaş (data-brush). - Qaçon emas: Aniq qiymatlarni soliştiriş va qidiriş → `table`; Bitta raqam va özgariş → `stat` - Variantlar: data-type=bar|hbar|line|spark|donut|share|gauge|heatmap|area|funnel|radar|scatter|combo|treemap|waterfall|sankey|bullet (standart bar); data-stacked=true|percent; data-legend=interactive; data-ref=qiymat:yorliq; …; data-hidden=seriya nomlari, vergul bilan; data-brush=N; data-unit2=% - Klaviatura: ← →, Home, End — Nuqtalar böylab yuradi, tooltip çiqadi; Esc — Tooltip yopiladi; Tab, Enter/Boʻsh joy (legenda) — Interaktiv legendada seriya yaşiriladi yoki qaytadi (aria-pressed); ← → (tutqichda), PageUp/PageDown, Home/End — Brush: oraliq boşi yoki oxirini suradi (role=slider) - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-emphasized, --fx-ease-standard, --fx-font-adjust-display, --fx-font-family-display, --fx-font-family-sans, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-motion, --fx-motion-fast, --fx-motion-slow, --fx-radius-badge, --fx-radius-control, --fx-shadow-md, --fx-size-min-target, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-error, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-accent, --fx-viz-brand, --fx-viz-context, --fx-viz-grid, --fx-viz-ink, --fx-viz-risk, --fx-viz-track ```html
    Tuşum oktyabrda 18 % ösdimln söm · 2026 · CRM
    OyTuşum
    May62
    Iyun71
    Iyul58
    Avg80
    Sen94
    Okt111
    Arizalar: bu yil va ötgan yildona · haftalik
    Hafta20262025
    1129
    21811
    31513
    42412
    52916
    62718
    Tölov keçikişibuyurtmalar soni
    KunSoni
    0–3014
    31–606
    61–903
    90+2
    Davomat
    GuruhDavomat
    Frontend 1286
    Dizayn 793
    Savdo voronkasi: eng köp yöqotiş — taklifdan keyinbitimlar · oktyabr · CRM
    BosqiçBitimlar
    Yangi lid480
    Aloqa312
    Taklif190
    Muzokara74
    Yutildi51
    Tuşum kanallar böyiçamln söm · 2026
    OyDökonSaytTelegram
    May602812
    Iyun643414
    Iyul584115
    Avg665518
    Sen705221
    Okt726024
    Menejer baholari: Aziz jamoa örtaçasidan kuçliroqball, 0–5 · oktyabr
    MezonAziz KarimovJamoa örtaçasi
    Javob tezligi4.63.8
    Konversiya4.13.5
    Örtaça çek3.23.6
    Takroriy savdo4.43.1
    Mijoz bahosi4.84.2
    Hisobot intizomi3.63.9
    Reklama xarajati va tuşum: Telegram eng samaralikanallar · pufak — lidlar soni
    KanalXarajat, mln sömTuşum, mln sömLidlar
    Instagram1248310
    Telegram652280
    Google1861190
    Yandex922120
    Billboard253060
    Radio71140
    Körgazma154495
    Tuşum ösdi, marja barqaror2026 · CRM
    OyTuşumMarja
    May6221
    Iyun7122
    Iyul5819
    Avg8023
    Sen9424
    Okt11123
    Tuşum tarkibi: mebel — yarmidan köpitoifalar · oktyabr
    ToifaTuşum
    Mebel184
    Maişiy texnika96
    Yoritgiçlar41
    Gilam38
    Oşxona27
    Tekstil19
    Bolalar12
    Boğ8
    Sovğalar6
    Boşqa mayda4
    Sof foyda: tuşumdan qolganioktyabr · mln söm
    ModdaSumma
    Tuşum420
    Tannarx-238
    Iş haqi-64
    Ijara-22
    Reklama-18
    Boşqa daromad9
    Sof foyda
    Arizalar qayerdan kelib, qanday tugadioktyabr · 600 ariza
    ManbaNatijaSoni
    SaytAloqa180
    TelegramAloqa150
    QönğiroqAloqa90
    SaytRad etildi60
    TelegramRad etildi40
    QönğiroqRad etildi20
    InstagramAloqa40
    InstagramRad etildi20
    AloqaYutildi150
    AloqaYutqazildi310
    Filiallar: oylik rejafakt / reja · zonalar: yomon · örta · yaxşi
    FilialFaktRejaYomonÖrtaYaxşi
    Toşkent312300200280360
    Samarqand148180120160220
    Farğona9614090120170
    Buxoro71805070100
    Kunlik arizalar: duşanba çöqqisioxirgi 30 kun · pastdagi oraliqni suring
    KunArizalar
    19.0940
    20.0931
    21.0978
    22.0961
    23.0966
    24.0967
    25.0955
    26.0952
    27.0927
    28.0950
    29.0938
    30.0933
    1.1042
    2.1053
    3.1055
    4.1046
    5.1092
    6.1075
    7.1079
    8.1080
    9.1067
    10.1064
    11.1028
    12.1063
    13.1052
    14.1047
    15.1056
    16.1068
    17.1070
    18.1060
    ``` - Qilmang: SVG qölda çizilmaydi va HEX bermang — jadval va rol kaliti (data-roles, data-role) bering. - Qilmang: Ikki y öqi, halqa (foiz uçun), spidometr işlatmang — çiziqli ölçagiç yoki ikki panel. - Qilmang: Donutda 4 dan köp bölak, bitta dashboard'da 3 dan köp grafik turi bölmasin. - Qilmang: Aksentni ingiçka belgida (çiziq, nuqta, matn) işlatmang — faqat yaxlit ustun, bölak, maydon. - Qilmang: Ustma-ust maydonda 3 dan köp seriya bermang; voronkada bitta seriya, eng katta yöqotişdan boşqa urğu qöymang. - Qilmang: Punktirni faqat maqsad, çegara va prognoz uçun işlating; izoh (data-note) grafikda bitta. - Qilmang: Ikki öqli grafik örniga combo: bitta panelda ikki Y öqi yöq — çiziq va ustun alohida panelda, umumiy X. - Qilmang: Radarni dashboard'da asosiy grafik qilmang — u profil taqqoslaş uçun (≤ 3 seriya, ≥ 3 mezon). - Qilmang: Treemap'da 8 tadan köp katak bermang — qolgani «Boşqa»ga yiğiladi; sankey faqat hisobot sahifasida. - Qilmang: Şarşarada kamayişni faqat rang bilan bildirmang — yorliqdagi − belgisi qoladi; qizil (risk) faqat bitta muhim moddaga. ## Grafik kartasi (`chartcard`, beta, 0.23.0 dan) Grafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba. Grafik öz tuzilmasini saqlaydi (fx-chart), karta faqat qobiq va joylaşuv. Holatlar: yuklanmoqda, böş (#66). - Qaçon: Dashboard'da grafikni sarlavha, davr va legenda bilan joylaş. - Qaçon emas: Yagona raqam → `stat`; Hujjat içidagi sodda grafik → `chart` - Variantlar: data-variant=flat (standart card); data-state=loading|empty (standart ready) - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-primary, --fx-text-tertiary ```html

    Tuşum

    mln söm · sönggi 6 oy
    Oylik tuşum
    OyTuşum
    May62
    Iyun71
    Iyul58
    Avg80
    Sen94
    Okt111
    • Oldingi oylar
    • Joriy oy
    Manba: CRM
    ``` - Qilmang: Kartaga 2 tadan köp grafik joylamang — har grafikka öz kartasi. - Qilmang: Karta sarlavhasi va grafik sarlavhasini takrorlamang — grafikning figcaption'i fx-sr-only. - Qilmang: Karta içida aylantiriş (scroll) bölmasin. ## Checkbox, radio, switch (`check`, beta, 0.1.0 dan) Checkbox, radio, switch — native input + körinadigan quti. Qisman tanlangan (indeterminate), öçiq holat. Tanlov kartasi (.fx-choice) — katta bosiş maydoni, sarlavha va izoh bilan. Kengaytma: ölçam (sm/lg), yorliq tomoni, sarlavha+tavsif, switch içida ikon yoki söz, switch yuklanmoqda, tanlov kartasi (rasm/ikon, narx, belgi öng çetda, nofaol), «hammasini belgilaş» guruhi (xulq data-fx-checkall), şartli oçiliş va raqamli şkala (0–10). Kengaytma: data-appearance=button (radio/checkbox tugma körinişida), forced-colors. - Qaçon: Ha/yöq tanlov (checkbox), bir neçtadan bitta (radio), darhol ta'sir qiladigan yoqiş (switch). - Qaçon emas: Köp variantdan bitta, joy kam → `select` - Variantlar: data-type=checkbox|radio|switch|task (standart checkbox); data-size=sm|lg (standart md); data-label=start (standart end); data-indicator=end (standart start); data-layout=row|grid (standart ustma-ust); data-appearance=button; data-priority=1|2|3|4 - Klaviatura: Space — Belgilaydi / olib taşlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-duration-spin, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-slow, --fx-priority-1, --fx-priority-2, --fx-priority-3, --fx-priority-4, --fx-radius-checkbox-ratio, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --fx-size-checkbox, --fx-size-control-md, --fx-size-icon-md, --fx-size-min-target, --fx-size-switch-track, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-brand, --fx-text-disabled, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Tarif
    Ruxsatlar
    Tölov usuli
    Xizmatni döstingizga tavsiya qilasizmi?
    Umuman yöqAlbatta
    ``` - Qilmang: Checkbox'ni doira qilmang — radio bilan adaştiriladi. - Qilmang: Switch'ni forma yuboriş tugmasi bilan birga işlatmang — switch darhol ta'sir qiladi. - Qilmang: Tavsifni faqat tooltip'ga yaşirmang — .fx-check__desc körinib tursin. - Qilmang: «Hammasi» guruhida boşliqni qölda belgilamang — xulq bandlardan yiğadi. ## Boşlaş röyxati (`checklist`, beta, 0.23.0 dan) Yangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati. Joriy qadam kengayib, izoh va amal tugmasini körsatadi; belgi bosilsa qadam bajariladi. Hammasi tugasa tabrik matni çiqadi; röyxatni yopiş eslab qolinadi. - Qaçon: Yangi hisobda birinçi qadamlar: profil, taklif, birinçi yozuv, integratsiya. - Qaçon emas: Majburiy ketma-ket forma → `wizard`; Faqat jarayon holatini körsatiş → `steps` - Variantlar: data-state=todo|current|done (standart todo) - Klaviatura: Tab — Qadam belgilari va amal tugmalari; Space, Enter — Qadamni bajarildi/bajarilmadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-spring, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-slow, --fx-radius-circle, --fx-radius-surface, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Boşlaş

    Beşta qadamda iş muhitini sozlang.

    1. Profilni töldiring

      Ism va rasm qöying.

    2. Jamoadoşlarni taklif qiling

      Kamida bitta hamkasbingizni email orqali taklif qiling.

    3. Birinçi vazifani yarating

      Vazifa yaratib, mas'ul belgilang.

    4. Bildirişnomalarni sozlang

      Qaysi xabarlar kerakligini tanlang.

    5. Telegram'ni ulang

      Ariza kelganda guruhga xabar boradi.

    Barakalla! Hammasi tayyor — endi işni boşlasangiz böladi.

    ``` - Qilmang: 5–7 tadan köp qadam qöymang — foydalanuvçi çarçaydi. - Qilmang: Majburiy emas qadamni majburiydek körsatmang; röyxatni yopiş imkoni doim bölsin. ## Checkout (`checkout`, beta, 0.28.0 dan) Tölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş». Yuborilayotganda forma öçadi, tugmada yuklaniş. - Qaçon: Onlayn dökon, kurs yoki xizmat uçun buyurtma va tölov sahifasi. Tarif sotib oliş (karta + promo-kod + xulosa). - Qaçon emas: Köp qadamli, har qadam alohida ekran → `wizard`; Mavjud obuna va hisob-fakturalar → `billing` - Variantlar: data-state=submitting (standart —) - Klaviatura: ← → ↑ ↓ — Yetkaziş va tölov usullari içida (native radio); Enter — Formani yuboradi (promo-kod maydonida — kodni qöllaydi) - Tokenlar: --fx-bg-muted, --fx-bg-page, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-sm, --fx-ease-standard, --fx-fg-success, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Aloqa
    Yetkazib beriş
    Tölov
    ``` - Qilmang: Hamma maydonni bitta uzun ustunga tizmang — bölimlarni raqamlang (Aloqa · Yetkaziş · Tölov), xulosa yonda körinib tursin. - Qilmang: Tölaş tugmasida faqat «Tölaş» demang — summani yozing («1 309 000 söm tölaş»). - Qilmang: Karta maydonlarini naqd tanlanganda ham körsatmang — faqat «Bank kartasi»da oçiladi. - Qilmang: Yuborişda tugmani ikki marta bosiş mumkin qilib qoldirmang — aria-busy va forma öçiriladi. ## AI checkpoint (`checkpoint`, beta, 0.29.0 dan) AI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind). Ajratuvçi çiziq ustida tabletka: bayroq, nom va vaqt, qisqa meta («3 fayl, 12 qator») va «Şu nuqtaga qaytiş» tugmasi. Bosilganda bekor qilinadigan «fx-checkpoint-restore» hodisasi {id, after} çiqadi — ilova fayl va ma'lumotlarni şu holatga qaytaradi; töxtatilmasa belgidan keyingi yozuvlar [data-reverted] (xira, kulrang, inert — bosilmaydi) böladi, belgi data-state="restored" va tugma «Qaytarişni bekor qiliş»ga aylanadi (fx-checkpoint-undo). Lentada bir vaqtda bitta belgi qaytarilgan böladi. Natija jonli hududda aytiladi. data-variant: line (standart) yoki compact (çiziqsiz tabletka). - Qaçon: AI agent fayl yoki ma'lumotni özgartiradigan suhbatlarda (kod yordamçisi, hujjat tahriri). Uzun AI sessiyasida tajriba qilib, keyin oldingi holatga qaytiş kerak bölganda. - Qaçon emas: Sana yoki bölim ajratuvçisi → `divider`; Bitta amalni bekor qiliş → `toast`; Versiyalar tarixi → `timeline` - Variantlar: data-variant=line|compact (standart line) - Klaviatura: Enter, Space — Şu nuqtaga qaytadi / qaytarişni bekor qiladi; Tab — Bekor qilingan yozuvlar ötkazib yuboriladi (inert) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-radius-pill, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Narx bölimiga yillik tarif qöş.
    MF
    Mister FoxAI

    Qöşdim: pricing.html va pricing.css yangilandi, oylik/yillik almaştirgiç işlaydi.

    Checkpoint · 2 fayl, 48 qator
    Endi hamma narxlarni dollarga ötkaz.
    MF
    Mister FoxAI

    Bajarildi: 6 ta narx dollarga ötkazildi, söm olib taşlandi.

    Checkpoint · 1 fayl, 6 qator
    Yöq, sömda qolsin edi…
    ``` - Qilmang: Har xabarga checkpoint qöymang — faqat fayl, ma'lumot yoki holat özgargan nuqtalarda. - Qilmang: Qaytarişni jimgina qilmang — keyingi yozuvlar körinib tursin (xira) va «bekor qiliş» imkoni bölsin. - Qilmang: Qaytarib bölmaydigan taşqi amallarni (yuborilgan email, tölov) checkpoint bilan «qaytdi» deb körsatmang — buni oçiq yozing. ## Chip (`chip`, beta, 0.14.0 dan) Filtr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi). Kengaytma: avatarli chip, aria-haspopup chevron (filtr-dropdown), data-type=assist|suggestion, .fx-chip-group (öraş / scroll / data-max + data-more), sm ölçamda ≥24px bosiş maydoni. - Qaçon: Röyxatni tez filtrlaş; tanlangan qiymatlarni teg sifatida körsatiş. - Qaçon emas: Bir xil ma'lumotning körinişlari → `segment`; Faqat holat yorliği → `badge` - Variantlar: data-type=filter|tag|assist|suggestion (standart filter); data-size=md|sm (standart md); data-overflow=scroll|wrap - Klaviatura: Enter, Space — Filtrni yoqadi / öçiradi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-brand-subtle-hover, --fx-bg-field, --fx-bg-muted, --fx-bg-page, --fx-bg-subtle, --fx-border-color-field, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-badge, --fx-radius-circle, --fx-radius-pill, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Toşkent
    Sardor
    ``` - Qilmang: Sonni matnga qöşib yozmang («15-asr · 36») — alohida belgi (WDS). - Qilmang: Chipni asosiy amal uçun işlatmang — tugma. ## Yopiş tugmasi (`close`, beta, 0.22.0 dan) Dialog, sheet, alert va chip uçun bir xil ✕ tugmasi. Bosiş maydoni körinişidan kattaroq; nomi aria-label'da. - Qaçon: Dialog, sheet, alert, toast yoki chip'ni yopiş/olib taşlaş. - Qaçon emas: Oddiy amal tugmasi → `button` - Variantlar: data-size=sm|md|lg (standart md); data-shape=round (standart default) - Klaviatura: Enter, Space — Yopadi - Tokenlar: --fx-bg-muted, --fx-border-color-focus, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-text-disabled, --fx-text-primary, --fx-text-tertiary ```html ``` - Qilmang: aria-label'siz qoldirmang — ✕ belgisi ekran öquvçida ma'no bermaydi. - Qilmang: Özgarişlarni saqlaş/bekor qiliş örniga ✕ işlatmang. ## Kod bloki (`code`, beta, 0.22.0 dan) Monospace blok: fayl nomi va til sarlavhasi, nusxa tugmasi (fx-copy), qator raqamlari, ajratilgan va farq (+/−) qatorlari. Bir qatorli snippet (`$ npx …`) va matn içidagi kod ham şu yerda. - Qaçon: Buyruq, sozlama, kod namunasi. - Qaçon emas: Bir söz yoki identifikator matn içida → `kbd` - Variantlar: data-variant=snippet (standart block) - Klaviatura: Tab, Arrow — Aylantiriladigan kodni klaviatura bilan siljitadi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-error-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-success-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-fg-error, --fx-fg-success, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-radius-badge, --fx-radius-control, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    tailwind.config.js
    export default {  theme: "eski",  theme: "yangi",  prefix: "fx-",}
    npx foxui update

    Buyruq: npm test

    ``` - Qilmang: Rangli sintaksis (highlight) uçun HEX yozmang — rol tokenlari. - Qilmang: Qator raqami va farq belgisini nusxaga qöşmang (CSS counter/::after — nusxada yöq). ## Ikki ustunli kod farqi (`codediff`, beta, 0.29.0 dan) Eski va yangi kod yonma-yon (4.82): qatorlar tekislangan, har yon öz raqami bilan, öçirilgan qator − va qizil fon, qöşilgani + va yaşil fon (belgi matnda — rang yolğiz emas), qatordagi aniq özgariş bilan. Qöşilgan yoki öçirilgan qator qarşisida çiziqli böş katak. Tor joyda (konteyner < 40rem) yoki data-view="unified" bilan bir ustunga ötadi. Faqat CSS — farqni server yoki build hisoblaydi. - Qaçon: Changelog, migratsiya qöllanmasi, kod şarhi: «oldin → keyin». Hujjatda API özgarişini körsatiş. - Qaçon emas: Bitta kod parçasi yoki bir ustunli +/− qatorlar → `code`; Matn yoki maydon qiymatlari tarixi → `timeline` - Variantlar: data-diff=del|add|empty (standart none); data-view=unified (standart split) - Tokenlar: --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-success-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-width-default, --fx-fg-error, --fx-fg-success, --fx-font-adjust-mono, --fx-font-adjust-sans, --fx-font-family-mono, --fx-font-family-sans, --fx-font-size-xs, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-4, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    narx.js · oldinnarx.js · keyin (0.28.0)
    @@ 12–16 qatorlar · narx hisoblaş @@
    export function narx(mahsulot) {
    export function narx(mahsulot, kurs = 1) {
    const asosiy = mahsulot.narx;
    const asosiy = mahsulot.narx * kurs;
    const qqs = asosiy * 0.15;
    const qqs = asosiy * 0.12;
    return asosiy + qqs;
    return asosiy + qqs;
    // chegirma kartasi boʻlsa
    if (mahsulot.karta) return (asosiy + qqs) * 0.95;
    }
    }
    ``` - Qilmang: Katta fayllarni töliq körsatmang — özgarmagan qismlarni fold qatori bilan yiğing. - Qilmang: Faqat rangga tayanmang — −/+ belgilari va qator raqamlari qolsin. - Qilmang: Bir ustunli kiçik özgariş uçun işlatmang — fx-code'dagi diff qatorlari yetarli. ## Rang tanlagiç (`colorpicker`, beta, 0.24.0 dan) Erkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa). Qiymat — #rrggbb; hodisa `fx-colorpicker-change`. Faqat 6–12 ta tayyor rang kerak bölsa — `swatch`. Alfa va ğildirak (4.106): data-alpha — şaffoflik çiziği (şaxmat fon ustida), HEX 8 xonali (#1C7ED6CC), hodisada detail.alpha (0–1); data-shape="wheel" — aylana: burçak — ton, markazdan masofa — töyinganlik, ostidagi çiziq — yorqinlik. - Qaçon: Foydalanuvçi istalgan rangni tanlaşi kerak (mavzu, yorliq, diagramma rangi). - Qaçon emas: Oldindan belgilangan bir neçta rang → `swatch` - Variantlar: data-size=sm (standart md); data-alpha=; data-shape=square|wheel (standart square) - Klaviatura: ← → — Töyinganlik ±1 (Shift — ±10); ↑ ↓ — Yorqinlik ±1 (Shift — ±10); Home, End — Töyinganlik 0 / 100; ← → (ton chizigʻida) — Ton ±1; Gʻildirakda ← → — Ton 1° (Shift — 10°); Gʻildirakda ↑ ↓ — Töyinganlik 1 % (Shift — 10 %) - Tokenlar: --fx-bg-muted, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-color-black, --fx-color-white, --fx-cp-color, --fx-cp-dim, --fx-cp-hue, --fx-cp-rail, --fx-cp-solid, --fx-cp-wheel, --fx-cp-x, --fx-cp-y, --fx-ease-standard, --fx-font-size-xs, --fx-motion-instant, --fx-motion-press, --fx-popover-width, --fx-radius-circle, --fx-radius-control, --fx-shadow-md, --fx-size-checkbox, --fx-size-control-md, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-sw, --fx-text-primary, --fx-text-tertiary ```html
    ``` - Qilmang: Brend ranglari uçun erkin tanlovni oçmang — tayyor mavzu (`data-fx-theme`) yoki `swatch` yetarli. - Qilmang: Rangni faqat rang bilan bildirmang: HEX matni körinib tursin. - Qilmang: Kontrastni tekşirmay matn rangi sifatida saqlamang. ## Combobox (`combobox`, beta, 0.15.0 dan) Yozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot). Yozilsa röyxat filtrlanadi; ↑ ↓ Enter bilan tanlanadi. Qöşimça: köp tanlov (chiplar maydon içida, avatarli odam tanlagiç), «Yaratiş» varianti, yuklanmoqda holati va taşqi (async) qidiruv. Xulq foxui.js'da. - Qaçon: Köp variantdan bittasini qidirib tanlaş. Odam tanlagiç: köp tanlov + avatar + email. Yangi qiymatni şu yerning özida yaratiş (data-create). - Qaçon emas: 5–15 variant → `select` - Klaviatura: ↓ — Röyxatni oçadi; ↑ ↓ — Variant; Enter — Tanlaydi; Esc — Yopadi; Backspace (koʻp tanlov, boʻsh maydon) — Oxirgi tanlovni olib taşlaydi - Tokenlar: --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-sm, --fx-font-size-sm, --fx-radius-overlay, --fx-shadow-lg, --fx-size-avatar-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-tertiary ```html
    ``` - Qilmang: 5 tadan kam variant uçun combobox qilmang — select yoki radio. - Qilmang: Köp tanlovda tanlanganlarni maydondan taşqarida ayrim röyxatda takrorlamang — chiplar içida. ## Buyruqlar oynasi (`command`, beta, 0.15.0 dan) Ctrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş. Native tepada, qidiruv maydoni, guruhlangan variantlar, böş holat, pastda maslahat. Xulq foxui.js'da. Içma-iç sahifalar (variant bosilsa içiga kiradi, Backspace/Esc — orqaga) va «Oxirgi» tanlanganlar ham bor. - Qaçon: Köp bölimli ilovada tez ötiş va amallar. - Qaçon emas: Röyxat içida qidiriş → `search` - Klaviatura: Ctrl/⌘ + K — Oçadi / yopadi; ↑ ↓ — Variant; Enter — Oçadi; Esc — Yopadi; Backspace (boʻsh maydonda), Esc (sahifa ichida) — Bir sahifa orqaga - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-lg, --fx-dialog-width, --fx-ease-enter, --fx-ease-exit, --fx-font-size-md, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-scale-enter, --fx-radius-badge, --fx-radius-overlay, --fx-shadow-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    • Arizalar
    • Mijozlar
    • Yangi ariza N
    • Qoronği rejim
    • Mavzuni özgartiriş…
    • Moviy mavzu
    • Yaşil mavzu
    ↑ ↓ tanlaşEnter oçişEsc yopiş
     ``` - Qilmang: Har bir tugmani buyruqlar oynasiga qöymang — sahifalar va tez-tez amallar. - Qilmang: Sahifa içida sahifa içida sahifa qilmang — ikki bosqiçdan çuqur bölsa, tuzilmani qayta öylang. ## Izohlar ipi (`comments`, beta, 0.24.0 dan) Izohlar ipi: avatar, muallif, vaqt, matn; amallar — javob, tahrirlaş (özining), hal qiliş. Javoblar bir qavat içida. Hal qilingan izoh xiralaşadi va «Hal qilingan» belgisi çiqadi. Javob/tahrir formasini xulq quradi. - Qaçon: Hujjat, vazifa yoki dizayn ostida muhokama ipi: javob beriş, tahrirlaş va hal qiliş kerak bölganda. - Qaçon emas: Real vaqtli suhbat → `message`; Faoliyat tarixi → `timeline` - Klaviatura: Tab — Amallar orasida; Enter/Space — Amalni bajaradi; Esc — Forma yopiladi (fokus amalga qaytadi) - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-bg-success-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-fg-success, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-badge, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    1. DK
      Dilnoza Karimova

      Narxlar jadvalidagi çegirma ustuni 3-qatorda körinmayapti, tekşirib körsangiz.

      1. SI
        Siz

        Ha, ustun yaşirin edi. Hozir tuzataman.

    2. JA
      Jasur Aliyev

      Logotip yuqori çapda biroz kiçik.

    ``` - Qilmang: Ikki qavatdan çuqur içma-iç javob qilmang — uzoq ip öqilmaydi (javobga javob 1-qavatda @ismi bilan). - Qilmang: Hal qilingan izohni öçirmang — tarix qolsin, faqat xiralaştiring. ## Oldin/keyin taqqoslaş (`compare`, beta, 0.28.0 dan) Ikki holatni ustma-ust qöyib, ajratgiçni sudrab soliştiriş (4.77): eski va yangi dizayn, «kulrang qolip» va tayyor libos, rasm tahriri. Boşqaruv — butun maydon ustidagi körinmas haqiqiy range: siçqonça bilan sudraş, bosiş, barmoq va klaviatura (← → Home End) özidan işlaydi. Tutqiç fokusda halqa oladi, «Oldin» / «Keyin» yorliqlari burçaklarda. Içida rasm, video yoki istalgan HTML (masalan jonli komponentlar) bölişi mumkin. - Qaçon: Redizayn, «oldin va keyin» natija, rasm tahriri yoki filtrni körsatiş. Landingda «kulrang qolip → tayyor libos» kabi özgarişni his ettiriş. - Qaçon emas: Bir neçta rasmni körsatiş → `carousel`; Kod özgarişlari → `code` - Variantlar: data-ratio=video|square (standart auto); data-side=before|after (standart before) - Klaviatura: ← → — Ajratgiçni 1% ga siljitadi; PageUp, PageDown — Katta qadam; Home, End — Butunlay «oldin» yoki «keyin» - Tokenlar: --fx-bg-muted, --fx-bg-static-light, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-compare-pos, --fx-ease-standard, --fx-font-size-xs, --fx-font-weight-medium, --fx-knob-blur, --fx-knob-motion, --fx-motion-fast, --fx-radius-badge, --fx-radius-circle, --fx-radius-surface, --fx-shadow-md, --fx-size-control-md, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-primary, --fx-text-secondary ```html

    Bugungi arizalar

    Keça bilan soliştirganda 12 ta köproq

    Yangi48
    Jarayonda17
    Yopildi9
    ``` - Qilmang: Bir-biriga öxşamagan ikki rasmni soliştirmang — kompozitsiya bir xil bölsin. - Qilmang: Içidagi tugma va havolalarni bosiladigan qilib qoldirmang — range ustida turadi; namoyiş elementlariga tabindex="-1". - Qilmang: Yorliqsiz qoldirmang — qaysi tomon «oldin» ekani yozilsin. ## Yoziş paneli (composer) (`composer`, beta, 0.23.0 dan) AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş». Tepada javob/tahrir qatori, @eslatma takliflari menyusi, ovoz yoziş holati (brend nuqta, mono taymer) va bloklangan holat (qulf + sabab). Enter yuboradi, Shift+Enter — yangi qator, Esc — javobni bekor qiladi; yuborilganda fx-send hodisasi çiqadi. - Qaçon: AI agent bilan suhbatda prompt kiritiş. Messenjer va izohlar oqimida xabar yoziş. - Qaçon emas: Bir qatorli qidiruv yoki filtr → `search`; Oddiy forma maydoni (sarlavha, tavsif) → `input` - Variantlar: data-variant=messenger (standart ai); data-voice=off (standart on) - Klaviatura: Enter — Yuboradi (fx-send); Shift+Enter — Yangi qator; Esc — Javob/tahrirni, @menyuni yoki ovoz yozişni bekor qiladi; ↑ (maydon boʻsh) — fx-edit-last — oxirgi xabarni tahrirlaş; @ + ↑ ↓, Enter/Tab — Eslatma tanlaş - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-hover, --fx-bg-brand-subtle, --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-duration-pulse, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-sm, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-lg, --fx-shadow-sm, --fx-size-icon-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-min-target, --fx-size-status-dot, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-disabled, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    oktabr-hisobot.pdf1,2 MB
    0:00Ovoz yozilmoqda…
    Enter — yuboriş · Shift+Enter — yangi qator48 %
    Yoziş bloklangan.
    DilnozaMaketni ertaga ertalab yuboraman, kelişdikmi?
    0:00Ovoz yozilmoqda…
    Bu kanalda faqat administratorlar yozadi.
    ``` - Qilmang: AI çat va messenjer uçun ikkita alohida panel yasamang — data-variant="messenger" yetadi. - Qilmang: Yuboriş tugmasini matn bölmaganda ham “yuboriş” deb qoldirmang — mikrofon bölmasa ham aria-label holatga qarab özgarsin (JS buni qiladi). - Qilmang: Ovoz yozişni qizil bilan körsatmang — brend nuqta pulsatsiyasi va vaqt matni yetadi. - Qilmang: Bloklangan holatda sababni yaşirmang — qulf yonida söz bilan yozing. ## Cookie roziligi (`consent`, beta, 0.28.0 dan) Cookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş». Sozlaşda toifalar: zarur (doim yoqiq), statistika, marketing — har biri izoh bilan. Tanlovdan keyin karta tasdiq xabariga aylanadi («Siz … qabul qildingiz», «Yaşiriş»), fokus xabarga ötadi. foxui.js tanlovni saqlaydi va "fx-consent" hodisasini yuboradi — skriptlar (analitika) faqat şundan keyin ulanadi. Footer'dagi [data-consent-open] tugmasi sozlamalarni qayta oçadi. - Qaçon: Sayt analitika, reklama yoki uçinçi tomon cookie fayllarini işlatsa. Footer'da «Cookie sozlamalari» — tanlovni keyin özgartiriş uçun (data-consent-open). - Qaçon emas: Sayt faqat zarur cookie işlatsa — oddiy eslatma → `banner`; Şartlarga rozilik (forma içida) → `check` - Variantlar: data-position=corner|inline (standart bottom) - Klaviatura: Tab — Tugmalar va kalitlar orasida; Enter, Space — Tanlov; «Sozlaş» toifalarni oçadi / yopadi; Space — Toifa kalitini yoqadi / öçiradi - Tokenlar: --fx-bg-category-yellow-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-ease-enter, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-shift-lg, --fx-motion-slow, --fx-radius-badge, --fx-radius-control, --fx-radius-overlay, --fx-shadow-lg, --fx-size-control-sm, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-primary, --fx-text-secondary ```html

    Cookie fayllar haqida

    Sayt işlaşi uçun zarur cookie fayllardan foydalanamiz. Qöşimçalari — qaysi sahifalar foydali ekanini biliş uçun; ularni özingiz tanlaysiz. Batafsil

    Cookie toifalari
    ZarurKiriş, xavfsizlik va sizning tanlovingiz. Öçirib bölmaydi.
    StatistikaQaysi sahifa köp öqilişini nomsiz hisoblaydi.
    MarketingReklama samarasini ölçaydi.
    ``` - Qilmang: «Rad etiş»ni kiçik havola qilib yaşirmang — «Qabul qiliş» bilan bir xil vaznda bölsin. - Qilmang: Statistika va marketing toifalarini oldindan yoqib qöymang — rozilik faol bölsin. - Qilmang: Bannerni sahifani tösuvçi modal qilmang — sayt işlab turaversin. - Qilmang: Tanlovdan oldin analitika skriptini ulamang — "fx-consent" hodisasini kuting. ## Aloqa bölimi (`contact`, beta, 0.29.0 dan) Marketing saytining «Aloqa» sahifasi (4.177): çapda sarlavha, aloqa kanallari (telefon, email, Telegram, manzil — ikon, nom, izoh va bosiladigan qiymat: tel:, mailto:, https://t.me) va iş vaqti jadvali; öngda ariza formasi. Forma yuborilgaç ilova data-state="sent" qöyadi — maydonlar yaşirinadi, .fx-contact__done (rahmat xabari) körinadi va fokus unga ötadi. Ostida ixtiyoriy filiallar qatori. data-layout: split (standart) yoki stack (forma markazda, kanallar ostida bir qatorda). - Qaçon: Marketing saytining «Aloqa» sahifasi. Landing oxirida «Boğlaniş» bölimi (stack). - Qaçon emas: Faqat email obuna formasi → `cta`; Köp qadamli sörovnoma yoki ariza → `wizard` - Variantlar: data-layout=split|stack (standart split) - Klaviatura: Tab — Kanal havolalari, keyin forma maydonlari; Enter (maydonda) — Formani yuboradi - Tokenlar: --fx-bg-subtle, --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-control-h-lg, --fx-dialog-width, --fx-ease-enter, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-line-height-tight, --fx-motion-base, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --fx-size-icon-md, --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-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Aloqa

    Savol, taklif yoki hamkorlik?

    Bir iş kunida javob beramiz. Şoşilinç bölsa — qönğiroq qiling.

    Duşanba–Juma
    9:00–18:00
    Şanba
    10:00–14:00
    Yakşanba
    Dam oliş

    Ariza qoldiring

    Yuboriş orqali maxfiylik siyosatiga rozilik bildirasiz.

    • ToşkentBuyuk Ipak Yöli 45, 3-qavat+998 71 200 50 40
    • SamarqandRegiston köçasi 12+998 66 233 10 20
    • FarğonaMustaqillik köçasi 8+998 73 244 30 50
    ``` - Qilmang: Formada 5–6 tadan ortiq maydon söramang — qolganini qönğiroqda bilib olasiz. - Qilmang: Telefon va emailni oddiy matn qilib qöymang — tel: va mailto: havolalari telefonda bir bosişda işlaydi. - Qilmang: Yuborilgandan keyin formani şunçaki tozalab qöymang — rahmat xabari va keyingi qadam (qaçon javob) körinsin. ## Kontekst ölçagiçi (`context-meter`, beta, 0.23.0 dan) AI kontekst oynasi qança işlatilganini körsatuvçi kiçik halqa va «48 %» matni. 80 % dan ogohlantiriş, 95 % dan «töla» holati — rang bilan birga söz va “!” belgisi. - Qaçon: AI suhbatida kontekst/token sarfini körsatiş. - Qaçon emas: Umumiy jarayon progressi → `progress`; Yuklaniş → `spinner` - Variantlar: data-level=warn|full (standart ok) - Tokenlar: --fx-bg-muted, --fx-border-width-focus, --fx-ease-standard, --fx-fg-error, --fx-fg-warning, --fx-font-size-xs, --fx-font-weight-medium, --fx-meter-value, --fx-motion-slow, --fx-radius-circle, --fx-size-icon-md, --fx-space-2, --fx-text-brand, --fx-text-primary, --fx-text-secondary ```html
    48 %86 %Kontekst tölmoqda97 %Kontekst töldi
    ``` - Qilmang: aria-valuenow va --fx-meter-value ni bir vaqtda yangilang. - Qilmang: Ogohlantirişni faqat rang bilan bermang — .fx-context-meter__note matni çiqadi. - Qilmang: Aniq token sonini halqa içiga siqmang — popover/tooltipda körsating. ## Kontekst menyu (`context`, beta, 0.23.0 dan) Maydon yoki qator ustida öng tugma, sensorda uzoq bosiş yoki klaviaturada Shift+F10 / ☰ bilan menyu kursor örnida oçiladi. Menyuning özi — oddiy fx-menu; ekran çetiga siğmasa suriladi. Kontekst menyuda faqat qöşimça tezkor amallar bölsin — asosiylari sahifada ham körinsin. - Qaçon: Fayl, qator, kartaga tezkor qöşimça amallar (nom özgartiriş, nusxa, öçiriş). - Qaçon emas: Yagona yöl bölgan muhim amal → `menu`; Tugma ostida oçiladigan amallar → `menu` - Klaviatura: Shift + F10, ☰ — Fokusdagi element uçun menyu oçadi; ↑ ↓, Home, End — Bandlar böylab; Esc — Yopadi, fokus maydonga - Tokenlar: --fx-bg-subtle, --fx-border-color-focus, --fx-border-width-focus ```html
    shartnoma.pdf — öng tugma yoki Shift+F10
    ``` - Qilmang: Amalni faqat kontekst menyuda qoldirmang — sensor va klaviaturasiz foydalanuvçi uni topolmaydi, tugma yoki «Yana» menyusi ham bölsin. - Qilmang: Brauzerning öz menyusini butun sahifada öçirmang — faqat amal beradigan maydonda. ## Kontekst menyu (`contextmenu`, beta, 0.28.0 dan) Öng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147). Menyu — oddiy fx-menu (bandlar, ajratgiç, xavfli amal, klaviatura); bu komponent hudud, nişon qatorni belgilaş, joylaşuv va fokusni qaytarişni beradi. CRM röyxati, fayllar, kanban kartalari uçun. - Qaçon: Röyxat qatori, karta yoki fayl ustida tezkor amallar (oçiş, nusxa, arxivlaş) — tajribali foydalanuvçi uçun qisqa yöl. - Qaçon emas: Tugma bosilganda oçiladigan menyu → `menu`; Tanlangan bir neçta qatorga amallar → `bulkbar` - Klaviatura: Shift+F10, ContextMenu — Fokusdagi nişon uçun menyuni oçadi; ↑ ↓, Home, End — Menyu bandlari (fx-menu); Enter / Boʻsh joy — Amalni bajaradi va yopadi; Esc — Yopadi, fokus nişonga qaytadi - Tokenlar: --fx-bg-muted, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-xs, --fx-motion-fast, --fx-radius-control, --fx-radius-surface, --fx-space-1, --fx-text-tertiary ```html

    Qatorda öng tugma, uzoq bosiş yoki Shift+F10 — amallar menyusi.

    • Aziz KarimovYangi ariza
    • Shahnoza OlimovaTölov kutilmoqda
    • Bobur RahimovŞartnoma yuborildi
    ``` - Qilmang: Kontekst menyuni yagona yöl qilmang — öşa amallar körinadigan tugma yoki «…» menyusida ham bölsin. - Qilmang: Brauzer menyusi kerak böladigan joyda (matn maydoni, havola) işlatmang. - Qilmang: 10 dan köp band bermang — guruhlab ajratgiç qöying yoki içki menyu. ## Suhbat oqimi (`conversation`, beta, 0.23.0 dan) Xabarlar lentasi (role="log"): pastda bölsangiz yangi xabar va oqim matni avtomatik pastga tuşadi; yuqoriga çiqsangiz joyingiz saqlanadi va «↓ Yangi xabar» tugmasi (yangi xabarlar soni bilan) çiqadi. Pastda composer uçun joy. AI (72ch ustun) va messenjer variantlari. - Qaçon: AI çat yoki messenjer sahifasining xabarlar örni. - Qaçon emas: Statik izohlar röyxati → `list` - Variantlar: data-variant=messenger (standart ai) - Klaviatura: Tab — Lentaga, söng “Yangi xabar” tugmasiga; ↑ ↓, PageUp/PageDown — Aylantiriş; Enter — “Yangi xabar” — pastga - Tokenlar: --fx-bg-brand-solid, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-enter, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-sm, --fx-radius-circle, --fx-shadow-md, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary ```html
    Bugun
    Nofaol mijozlarni arxivga köçir va oktabr hisobotini qayta hisobla.
    MF
    Mister FoxAI
    8 soniya öyladi

    12 ta yozuv 2 yildan beri özgarmagan. Avval arxivlayman, keyin hisoblayman.

    Tayyor: 12 ta nofaol mijoz arxivga köçirildi, oktabr tuşumi 1 284 500 000 söm1moliya.example.uzOktabr oyi savdo hisoboti.

    MF
    Mister Fox
    Öylayapti…
    ``` - Qilmang: Oqimli (hali yozilayotgan) xabarga aria-busy="true" bering — ekran öqigiç butun matnni takrorlamasin. - Qilmang: Foydalanuvçi yuqoriga çiqqanda oqimni majburan pastga tortmang — JS buni qilmaydi. - Qilmang: Log elementini tabindex'siz qoldirmang — klaviatura bilan aylantiriş uçun fokus kerak. ## Suhbatlar röyxati (`convo`, beta, 0.22.0 dan) Messenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar. Holatlar — öqilmagan, eslatma (@), qadalgan, ovozsiz, qoralama, yozmoqda, öqildi, tanlangan — har biri söz yoki ikon bilan ham. - Qaçon: Messenjer, yordam markazi, izohlar oqimlari röyxati. - Qaçon emas: Oddiy ma'lumot röyxati → `list` - Klaviatura: Tab, Enter — Suhbatni oçadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-standard, --fx-fg-error, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-circle, --fx-radius-control, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html ``` - Qilmang: Holatni faqat rang bilan bildirmang — son, @, «Qoralama:», «yozmoqda…» sözi bilan. - Qilmang: Oxirgi xabarni ikki qatorga ötkazmang. ## Nusxa tugmasi (`copy`, beta, 0.22.0 dan) Bir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi. data-copy-target — element, data-copy — matn. - Qaçon: Kod, kalit, havola, buyruqni nusxalaş. - Qaçon emas: Oddiy amal tugmasi → `button` - Variantlar: data-variant=text (standart icon) - Klaviatura: Enter, Space — Matnni nusxalaydi - Tokenlar: --fx-bg-muted, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-spring, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-font-size-xs, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-control, --fx-size-icon-md, --fx-space-2, --fx-space-3, --fx-text-primary, --fx-text-secondary ```html fx_live_9a2b ``` - Qilmang: Maxfiy kalitni sahifada oldindan oçib qöymang — faqat egasiga körsating. - Qilmang: Tugmaga aria-label bering (ikon-tugma). ## Son belgisi (`count`, beta, 0.8.0 dan) Ikon yoki tugma ustidagi kiçik son (öqilmagan xabarlar) yoki nuqta. Ota elementga position: relative kerak. Kengaytma: data-inline (ota elementsiz, oqim ichida), data-tone=neutral|brand|success. - Qaçon: Ikon ustida yangi narsalar soni yoki borligi. - Qaçon emas: Matn yonidagi son (filtr, tab) → `badge` - Variantlar: data-shape=number|dot (standart number); data-inline=true; data-tone=neutral|brand|success - Tokenlar: --fx-bg-brand-solid, --fx-bg-error-solid, --fx-bg-muted, --fx-bg-surface, --fx-border-width-focus, --fx-ease-spring, --fx-fg-success, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-slow, --fx-radius-circle, --fx-size-icon-md, --fx-size-status-dot, --fx-space-1, --fx-text-on-brand, --fx-text-on-error, --fx-text-secondary ```html 12 ``` - Qilmang: 99 dan katta sonni töliq yozmang — «99+». ## Teskari sanoq (`countdown`, beta, 0.28.0 dan) Qolgan vaqtni körsatadi: aksiya tugaşi (kun · soat · daqiqa · soniya), imtihon yoki test vaqti, SMS kodni qayta yuborişgaça («00:59»). Raqamlar tabular — sakramaydi; oz qolganda qizil + «!» va «oz qoldi» sözi, tugaganda matn. Ekran öquvçiga siyrak aytiladi: 5 daqiqa, 1 daqiqa, 10 soniya qolganda va tugaganda. Uzoq muddat uçun yil birligi: data-units="yd" → «1 yil · 354 kun» (soniyasiz birliklarda daqiqada bir yangilanadi) — domen, obuna, litsenziya muddati. - Qaçon: Aksiya, röyxatdan ötiş yoki tarif narxi tugaşigaça qolgan vaqt. Imtihon, test, tölov sessiyasi kabi çeklangan vaqtli jarayon. SMS kodni qayta yuboriş tugmasi yonida (ixçam variant). - Qaçon emas: Ötgan vaqtni nisbiy körsatiş («3 daqiqa oldin») → `reltime`; Jarayon foizini körsatiş → `progress` - Variantlar: data-variant=blocks|solid|inline (standart blocks); data-size=sm|md (standart md); data-state=running|urgent|ended (standart running) - Tokenlar: --fx-bg-error-solid, --fx-bg-page, --fx-bg-surface, --fx-border-color-default, --fx-border-width-default, --fx-control-h-lg, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-radius-control, --fx-space-1, --fx-space-2, --fx-space-4, --fx-text-disabled, --fx-text-error, --fx-text-on-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Kuzgi çegirma −30 % tugaşiga
    Test: 20 savoldan 14 tasi belgilangan

    Kodni qayta yuboriş Qayta yuborişgaça dan keyin mumkin

    ``` - Qilmang: Har soniyani ekran öquvçiga aytdirmang — aria-live ildizda emas, faqat çegaralarda. - Qilmang: Soxta şoşilinç qilib, sahifa yangilanganda sanoqni qaytadan boşlamang — tugaş vaqti serverdan (data-to) kelsin. - Qilmang: Raqamlarni proporsional şriftda qoldirmang — har soniyada kenglik sakraydi (tabular-nums). ## Promo-kod (`coupon`, beta, 0.28.0 dan) Promo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni. Forma içida turadi (içki
    yöq). Yiğilgan variant — «Promo-kodingiz bormi?» havolasi ostida. - Qaçon: Checkout, tarif tanlaş, buyurtma xulosasida çegirma kodini qöllaş. Sovğa sertifikati yoki taklif kodini kiritiş. - Qaçon emas: Bir martalik SMS/email tasdiq kodi → `otp`; Oddiy matn maydoni (tekşiruvsiz) → `input` - Variantlar: data-state=loading|applied|error (standart —) - Klaviatura: Enter (maydonda) — Kodni qöllaydi (taşqi formani yubormaydi); Enter / Space (×) — Qöllangan kodni olib taşlaydi, fokus maydonga - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-bg-success-subtle, --fx-border-color-error, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-mono, --fx-font-adjust-sans, --fx-font-family-mono, --fx-font-family-sans, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-slow, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Bitta buyurtmaga bitta promo-kod.

    Promo-kodingiz bormi?
    ``` - Qilmang: Xato kodni faqat qizil çegara bilan bildirmang — sababini yozing («muddati tugagan», «faqat 500 000 sömdan»). - Qilmang: Promo-kod maydonini tölov sahifasining eng közga köringan joyiga qöymang — yiğilgan variant xaridni çalğitmaydi. - Qilmang: Qöllangan çegirmani faqat chipda qoldirmang — buyurtma xulosasida ham alohida qator bölsin. ## CTA va obuna bölimi (`cta`, beta, 0.28.0 dan) Sahifa oxiridagi çaqiriq bölimi (4.174): katta sarlavha, bir gaplik izoh va 1–2 tugma — standart holatda brend rangli panel (içida naqş va yoruğ doğ, tugmalar teskari rangda); data-tone="subtle" — yengil fon. Obuna varianti: email maydoni + tugma, izoh qatori va holat xabari (data-state: loading, success — forma örniga rahmat xabari, error). data-layout="split" — matn çapda, amal öngda (maqola içidagi CTA). - Qaçon: Landing va narx sahifasi oxirida asosiy çaqiriq. Blog/changelog ostida xatga obuna. - Qaçon emas: Birinçi ekran → `hero`; Vaqtinçalik e'lon → `banner` - Variantlar: data-tone=subtle (standart brand); data-layout=split (standart center); data-state=loading|success|error (standart idle) - Klaviatura: Enter — Formani yuboradi - Tokenlar: --fx-bg-brand-solid, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-dialog-width, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-popover-width, --fx-radius-overlay, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-5, --fx-space-6, --fx-space-8, --fx-text-error, --fx-text-on-brand, --fx-text-primary ```html

    Keyingi saytingizni FoxUI bilan quring

    Oçiq yadroni bugun örnating — obuna kerak bölganda yangilaniş va MCP ulanadi.

    Bepul boşlaşNarxlarni köriş

    «Nima yangi» xatini oling

    Har relizda bitta qisqa xat: yangi komponentlar va özgarişlar. Spam yöq.

    Istalgan payt bitta havola bilan bekor qilasiz.

    ``` - Qilmang: Bir sahifaga uçtadan ortiq CTA bölimi qöymang. - Qilmang: Obuna formasida email'dan boşqa maydon söramang. - Qilmang: Muvaffaqiyatni faqat rang bilan bildirmang — xabar söz bilan, role="status"da. ## Pul maydoni (`currency`, beta, 0.23.0 dan) Söm miqdori: minglar böş joy bilan ajraladi (1 250 000), faqat raqam, tabular raqamlar; birlik («söm») input-group addon'ida. Formatsiz qiymat — dataset.raw. Kasr kerak bölsa data-decimals. Joylaştirişda «1,000,000», «1.000.000», «1 000 000,50» ni tuşunadi; forma yuborilganda server toza son oladi (1000000.50) — type="number" kerak emas. - Qaçon: Narx, summa, byudjet. - Qaçon emas: Qat'iy tuzilma (telefon, karta) → `mask`; Taxminiy diapazon → `slider` - Variantlar: data-align=start|end (standart start) - Klaviatura: 0–9 — Raqam, minglar avtomatik ajraladi; , . — Kasr ajratgiçi (data-decimals bölsa) ```html ``` - Qilmang: Birlikni qiymatning içiga yozmang — addon qismida. - Qilmang: Katta aniq summalar uçun slider emas — şu maydon. ## Maxsus kursor (`cursor`, beta, 0.29.0 dan) Hudud içida kursorga belgi yoki yorliq ergaşadi (Magic UI Pointer va Smooth Cursor, Aceternity Following Pointer): portfolio kartalari ustida «Loyihani köriş →» pufagi yoki jamoaviy doskadagi kabi ismli strelka. .fx-cursor__pointer içiga istalgan belgi qöyiladi (.fx-cursor__arrow, .fx-cursor__label); data-variant="bubble" — pufak kursor markazida; data-color — toifa rangi. data-native="hide" — tizim kursori yaşiriladi (faqat belgi aniq körinadigan joyda), data-follow="exact" — keçikişsiz ergaşiş. Belgi berilmasa — data-label matni bilan pufak özi yaratiladi. Faqat siçqonçada; barmoq, klaviatura va harakat kamaytirilganda belgi yöq. - Qaçon: Portfolio yoki galereya: karta ustida «Köriş →» pufagi. Jamoaviy iş namoyişi (hamkasb kursori), landing hero. - Qaçon emas: Element haqida qisqa izoh → `tip`; Kursor nuri (yoruğlik) → `effects` - Variantlar: data-native=show|hide (standart show); data-follow=smooth|exact (standart smooth); data-variant=arrow|bubble (standart arrow); data-color=pink|blue|green|purple (standart brand) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-surface, --fx-cursor-x, --fx-cursor-y, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-radius-pill, --fx-shadow-md, --fx-size-icon-lg, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-brand, --fx-text-on-category, --fx-text-primary, --fx-z-raised ```html

    Samarqand Grand

    Mehmonxona sayti · 2026

    Tong maktabi

    LMS · 2026

     Loyihani köriş →

    Jamoaviy doska: kursorni şu yerga olib keling

    Dilnoza
    ``` - Qilmang: Belgi içiga muhim ma'lumot qöymang — u faqat bezak (aria-hidden); havola nomi özi aniq bölsin. - Qilmang: Forma, matn tahrirlaş yoki jadval ustida tizim kursorini yaşirmang — kiritiş nuqtasi yöqoladi. - Qilmang: Butun sahifaga qöymang — faqat kiçik hudud (galereya, hero, doska). ## Jonli hamkorlik kursorlari (`cursors`, beta, 0.29.0 dan) Umumiy iş maydonida boşqa foydalanuvçilar kursorlari (4.205, Figma, Liveblocks, Magic UI «Pointer»): rangli strelka va ism yorliği, matndagi tanlov (.fx-cursors__selection — yarim şaffof fon, karetka va ism), kursor-çat pufakçasi (.fx-cursors__chat) va tepada kimlar borligi röyxati (.fx-cursors__people). Joylaşuvni ilova realtime orqali yangilaydi: --fx-cursors-x / --fx-cursors-y (% yoki px) — kursor silliq suriladi; uzoq qimirlamasa data-state="idle" — yorliq yaşirinadi, kursor xiralaşadi. Rang data-color (6 pastel) — doim ism bilan birga. Kursorlar faqat bezak (aria-hidden); kim borligi va nima qilayotgani — röyxat va jonli hudud orqali. - Qaçon: Hujjat, doska, jadval yoki dizayn maydonida bir vaqtda bir neça kişi işlaganda. AI agent ham hujjatda işlayotganini körsatiş (Mister Fox · AI kursori). - Qaçon emas: Faqat kim onlayn ekanini körsatiş → `presence`; Avatarlar guruhi → `avatar`; Izoh qoldiriş → `comments` - Variantlar: data-color=yellow|pink|blue|coral|green|purple (standart blue); data-state=idle (standart active) - Klaviatura: — — Kursorlar fokuslanmaydi; avatarlar röyxati ekran öquvçiga oçiq - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-cursors-x, --fx-cursors-y, --fx-ease-spring, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-line-height-normal, --fx-motion-base, --fx-motion-slow, --fx-radius-badge, --fx-radius-surface, --fx-shadow-color, --fx-size-icon-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-category, --fx-text-secondary, --fx-z-raised ```html
    «Oktabr hisoboti» — 3 kişi tahrirlamoqda
    • DY
    • AK
    • MF

    Oktabr hisoboti

    Oktabr oyida tuşum 1 284 500 000 söm böldi — sentabrga nisbatan 12 % köp. Eng katta ösiş Samarqand filialida, yangi mijozlar soni 214 ta.

    Aziz Karimov izoh yozmoqda

    ``` - Qilmang: Kursorni faqat rang bilan farqlamang — ism yorliği doim yonida (idle'da ham hover/fokusda qaytadi). - Qilmang: 10 tadan ortiq kursorni bir vaqtda çizmang — eng yaqinlarini körsating, qolganini «+7» röyxatda. - Qilmang: Har siçqonça harakatini ekran öquvçiga aytmang — faqat muhim hodisa (qöşildi, çiqdi, izoh yozmoqda). - Qilmang: Pozitsiyani har kadrda yubormang — 30–60 ms oraliqda, oraliq harakatni CSS silliqlaydi. ## Dashboard qolipi (`dashboard`, beta, 0.28.0 dan) Körsatkiçlar sahifasi qolipi (4.185): tepada sarlavha, yangilangan vaqt va davr tanlaş; KPI qatori (≤ 4, bitta hero raqam); 12 ustunli grafik kartalar töri (data-span: 4, 6, 8 yoki 12 — konteyner kengligiga qarab 2 yoki 1 ustunga tuşadi); pastda sönggi faollik. Içi mavjud komponentlardan: fx-stat, fx-chartcard, fx-chart, fx-table, fx-timeline. - Qaçon: Bölim yoki biznesning asosiy körsatkiçlari bir sahifada: savdo, arizalar, moliya. - Qaçon emas: Yozuvlar röyxati va filtr → `listpage`; Bitta yozuv tafsiloti → `recordpage` - Variantlar: data-span=4|6|8|12 (standart 12) - Klaviatura: Tab — Davr tanlaş, KPI, grafiklar (← → nuqtalar), faollik — tartib bilan - Tokenlar: --fx-ease-standard, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-popover-width, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-secondary, --fx-text-tertiary ```html

    Savdo

    Yangilandi: bugun, 10:42
    Tuşum132 mln+8,2% 30 kunda
    Yopilgan bitimlar48−4 30 kunda
    Konversiya10,6 %+1,1 30 kunda

    Tuşum oylar böyiça

    mln söm
    Tuşum oylar böyiça
    OyTuşum
    May86
    Iyun94
    Iyul90
    Avg108
    Sen121
    Okt132

    Voronka

    bitimlar · oktyabr
    Savdo voronkasi
    BosqiçBitimlar
    Lid452
    Taklif190
    Muzokara74
    Yutildi48

    Sönggi faollik

    1. Dilnoza Yusupova bitim №209 ni yopdi — 12 mln söm

      09:58

    2. Yangi lid: «Bek Quriliş» MChJ

      09:31
    ``` - Qilmang: Birinçi ekranga 7 dan köp karta va bittadan köp hero raqam qöymang. - Qilmang: Bitta dashboard'da 3 dan köp grafik turi işlatmang; har karta — bitta savol. - Qilmang: Sarlavhada ma'lumot yangilangan vaqtini tuşirib qoldirmang. - Qilmang: Karta içida içki aylantiriş qilmang — kartani kattalaştiring yoki «Hammasi» sahifasiga havola bering. ## Ma'lumot töri (`datagrid`, beta, 0.24.0 dan) Jadvaldan köra ilovaga yaqin tör (APG grid): katakma-katak klaviatura (←↑→↓, Home/End, Ctrl+Home/End, PageUp/PageDown), katakni joyida tahrirlaş (Enter/F2/harf bosiş; Enter saqlaydi, Esc bekor qiladi), ustun kengligi (tutqiçni sudraş yoki sarlavhada Alt+←/→), qotgan sarlavha va birinçi ustun(lar), qator tanlaş (belgi ustuni, Shift+Böş joy, Ctrl+A) va saralaş. Tuzilma div + role, qatorlar aria-rowindex bilan — virtualizatsiyaga tayyor: DOMda faqat körinadigan qatorlar bölsa ham aria-rowcount töliq sonni aytadi. Xulq foxui.js'da (data-fx-datagrid). Guruhlaş va jami (4.130): data-group-by — ustun böyiça yiğiladigan guruh sarlavhalari, data-agg="sum|avg|count" ustunlarida guruh va pastki «Jami» qatori. Ustunlar (4.131): data-reorder — sarlavhani sudrab ustun tartibi (klaviatura: sarlavhada Alt+Shift+←/→); ustunlar paneli [data-fx-datagrid-columns=""] — köriniş belgisi, ↑ ↓ tartib va «Qotiriş» (ustun belgi ustunidan keyin qotadi). Katak oraliği va joylaş (4.132): data-range — Shift+strelka, Shift+bosiş yoki sudraş bilan törtburçak oraliq; Ctrl+C — TSV (Excel/Sheets'ga), Ctrl+V — nusxalangan jadval faol katakdan boşlab tahrirlanadigan kataklarga, bitta qiymat — butun oraliqqa; son kataklari tekşiriladi. Master–detail (4.133): qatordan keyin .fx-datagrid__detail va .fx-datagrid__expand katagi — bosiş yoki Enter/Böşliq oçadi; saralaş va guruhlaşda tafsilot öz qatori bilan yuradi. - Qaçon: Köp qatorli ma'lumotni joyida tahrirlaş, saralaş va tanlaş kerak (CRM, inventar, narxlar röyxati). Klaviatura bilan tez işlaydigan iş jadvali. - Qaçon emas: Faqat öqiladigan, oddiy ma'lumot jadvali → `table`; Içma-iç (iyerarxik) qatorlar → `treegrid`; Vazifalar röyxati — holat/ustuvorlik bilan → `row` - Variantlar: data-pin-first=off|1|2 (standart off); data-gridlines=rows|both (standart rows); data-group-by=ustun raqami (0 dan); data-agg=sum|avg|count; data-reorder=; data-range= - Klaviatura: ← ↑ → ↓ — Qöşni katakka ötadi; Home / End — Qatorning birinçi / oxirgi katagi; Ctrl+Home / Ctrl+End — Törning birinçi / oxirgi katagi; PageUp / PageDown — 10 qator tepaga / pastga; Enter, F2, harf — Tahrirlanadigan katakni tahrirga oçadi; sarlavhada saralaydi; Enter (tahrirda) — Saqlaydi; Esc (tahrirda) — Bekor qiladi; Boʻsh joy, Shift+Boʻsh joy — Qatorni tanlaydi / bekor qiladi; Ctrl+A — Hamma qatorni tanlaydi; Alt+← / Alt+→ — Sarlavhada ustun kengligini özgartiradi (Shift — katta qadam); Enter / Boʻsh joy, ←, → (guruh sarlavhasida) — Guruhni yiğadi yoki oçadi (aria-expanded); Alt+Shift+← / → — Sarlavhada: ustunni çapga / öngga suradi (data-reorder); Shift + strelka — Katak oraliğini kengaytiradi (data-range); Esc — bekor; Ctrl+C / Ctrl+V — Oraliqni TSV qilib nusxalaydi / Excel'dan joylaydi; Enter / Boʻshliq (▸ katagida) — Tafsilot qatorini oçadi / yopadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-datagrid-height, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-popover-width, --fx-radius-nav, --fx-radius-surface, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Mijoz
    Şahar
    Holat
    Summa, söm
    Aziz Karimov
    Toşkent
    Tölangan
    1 200 000
    Bobur Rahimov
    Samarqand
    Kutilmoqda
    450 000
    Dilnoza Yusupova
    Buxoro
    Tölangan
    2 380 000
    Eldor Nazarov
    Namangan
    Rad etilgan
    90 000
    Feruza Ismoilova
    Andijon
    Kutilmoqda
    760 000
    Gulnora Sattorova
    Toşkent
    Tölangan
    3 150 000

    Katakni tahrirlaş — Enter yoki harf bosing, Esc bekor qiladi. Ustun kengligi — sarlavhada Alt+←/→.

    Mijoz
    Şahar
    Holat
    Summa, söm
    Aziz Karimov
    Toşkent
    Tölangan
    1 200 000
    Bobur Rahimov
    Samarqand
    Kutilmoqda
    450 000
    Dilnoza Yusupova
    Toşkent
    Tölangan
    2 300 000
    Jasur Aliyev
    Samarqand
    Tölangan
    780 000
    Malika Saidova
    Toşkent
    Muddati ötgan
    310 000
    Ustunlar
    Tafsilot
    Mijoz
    Şahar
    Telefon
    Summa, söm
    Aziz Karimov
    Toşkent
    +998 90 123 45 67
    12 500 000
    Paxta mato — 300 m, ipak — 40 m; yetkaziş 21-oktyabr, Sergeli ombori.
    Bobur Rahimov
    Samarqand
    +998 93 210 11 05
    4 800 000
    Trikotaj — 120 kg; tölov 50 % oldindan, qolgani yetkazilganda.
    Dilnoza Yusupova
    Buxoro
    +998 91 555 02 30
    7 350 000
    Atlas — 85 m; mijoz namunani tasdiqladi, şartnoma №HF-0451.
    Jasur Aliyev
    Namangan
    +998 99 870 44 12
    2 100 000
    Kiçik ulgurji: 6 xil mato, har biridan 20 m.

    Sarlavhani sudrang yoki Alt+Shift+←/→ — ustun tartibi. Shift+strelka — kataklar oraliği, Ctrl+C / Ctrl+V — Excel bilan almaşiş. ▸ — buyurtma tafsiloti.

    ``` - Qilmang: Oddiy öqiladigan ma'lumot uçun tör işlatmang — jadval (table) yengilroq va tabiiy. - Qilmang: Tahrirlanadigan katakni faqat rang bilan belgilamang — hover'da fon, tahrirda maydon va fokus halqasi bor. - Qilmang: Bir törda 2 tadan köp qotgan ustun qilmang — kiçik ekranda özi siğmay qoladi. - Qilmang: Katak içiga bir neçta tabga arziydigan tugma qöymang — tör bitta Tab bekati; içki amallarga Enter bilan kiriladi. - Qilmang: Tahrirdan çiqib ketganda özgarişni jimgina yöqotmang — blur saqlaydi, Esc aniq bekor qiladi. - Qilmang: Joylaşda tahrirlanmaydigan katakni jimgina özgartirmang — faqat data-editable kataklarga yoziladi. - Qilmang: Tafsilot qatoriga ikkinçi tör qöyib klaviatura tuzoğini yasamang — içki jadval faqat öqiş uçun bölsin. ## Sana maydoni (`dateinput`, beta, 0.23.0 dan) Sanani yozib kiritish: KK.OO.YYYY niqobi nuqtalarni oʻzi qoʻyadi, toʻliq sana tekshiriladi (mavjudligi, eng erta/eng kech sana, oʻchirilgan kunlar). Formaga ISO (YYYY-MM-DD) yashirin input orqali ketadi. Kalendarsiz — tugʻilgan sana kabi uzoq sanalar uchun qulay; kalendar bilan — fx-datepicker. - Qaçon: Uzoq sana (tuğilgan kun, şartnoma sanasi) — klaviatura tezroq. Kalendar kerak bölmagan joy. - Qaçon emas: Sanani köz bilan, hafta kunlari kontekstida tanlaş → `datepicker`; Davr (boşlaniş–tugaş) → `daterange` - Variantlar: data-width=full|sm|md (standart full) - Klaviatura: 0–9 — Raqam yozadi, nuqtalar özi qöyiladi; Backspace — Oxirgi raqamni öçiradi - Tokenlar: --fx-border-color-error ```html ``` - Qilmang: Sanani 3 ta alohida select bilan bermang — bitta niqobli maydon tezroq. - Qilmang: Faqat yaqin sana (bu hafta) tanlansa — fx-datepicker yaxşiroq. ## Sana tanlagiç (`datepicker`, beta, 0.23.0 dan) Sana maydoni + kalendar tugmasi: yozib ham, kalendardan ham tanlanadi. Kalendar popover'da oçiladi (↓ yoki tugma), kun tanlansa maydon töladi va yopiladi, Esc yopadi. Footerda Tozalaş va Bugun. Tayyor sanalar va tabiiy til (4.101): popover çap tomonida «Bugun · Ertaga · Keyingi duşanba» (yonida sana), data-natural bilan maydonga «ertaga 15:00», «3 kundan keyin», «keyingi juma», «25-oktabr» yoziş mumkin — ostida taxmin çiqadi, Enter qabul qiladi. - Qaçon: Bitta sana tanlaş (uçraşuv, muddat, bron). Yozib ham, bosib ham kiritiş kerak. - Qaçon emas: Boşlaniş–tugaş davri → `daterange`; Faqat oy yoki yil → `calendar` - Klaviatura: ↓ — Kalendarni oçadi; Esc — Yopadi, fokus maydonga qaytadi; Enter — Kunni tanlaydi (kalendarda); ↑ ↓, Home, End — Tayyor sanalar röyxatida yuriş; Enter (maydonda, soʻz yozilgan boʻlsa) — Tabiiy tildagi sanani qabul qiladi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-control, --fx-space-1, --fx-space-12, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-brand, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    ``` - Qilmang: Içki kalendarga data-fx-calendar bermang — min/max/öçirilgan kunlarni maydondan oladi, xulq özi ulaydi. - Qilmang: Davr uçun ikkita datepicker qöymang — fx-daterange. - Qilmang: Tabiiy tilni yagona yöl qilmang — KK.OO.YYYY va kalendar ham işlaydi; taxmin har doim matn bilan körsatilsin. ## Sana oraliği (`daterange`, beta, 0.23.0 dan) Boşlaniş–tugaş davri: bitta tugma-maydon, popover'da çapda tayyor oraliqlar (Bugun, Keça, Oxirgi 7 kun, Şu oy, Ötgan oy), öngda 2 oylik kalendar (birinçi bosiş — boşi, ikkinçisi — oxiri, orasi hoverda körinadi). Qöllaş bosilganda qiymat yoziladi, Bekor — özgarişsiz. Nisbiy oraliq va avto yangilaş (4.102): data-relative="15m 1h 24h 7d" — röyxat boşida «Oxirgi 15 daqiqa / 1 soat / 24 soat / 7 kun»; qöllanganda qiymat «now-15m» / «now» (har safar qayta hisoblanadi, hodisada hisoblangan from/to ISO). data-refresh="off|10s|30s|1m|5m" — maydon yonida «Yangilaş» tanlovi; yoqilsa har N soniyada «fx-range-refresh» (sahifa yaşirin bölsa töxtaydi) va «Jonli · har 30 s» yozuvi. Monitoring, loglar, sotuv paneli uçun. - Qaçon: Hisobot, tahlil, filtr davri. Tayyor oraliqlar tez-tez kerak bölganda. - Qaçon emas: Bitta sana → `datepicker`; Faqat kalendarni sahifada körsatiş → `calendar` - Variantlar: data-relative=15m 1h 24h 7d; data-refresh=off|10s|30s|1m|5m (standart off) - Klaviatura: ↑ ↓ — Tayyor oraliqlar orasida; Home / End — Birinçi / oxirgi oraliq; Enter — Oraliqni tanlaydi (kalendarda — kunni); Esc — Yopadi, özgariş saqlanmaydi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-field, --fx-bg-muted, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-duration-pulse, --fx-ease-standard, --fx-fg-success, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-size-icon-md, --fx-size-status-dot-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    ``` - Qilmang: Presetlar içida 6–7 tadan köp variant bermang — data-presets bilan kerakligini tanlang. - Qilmang: Kalendar içiga data-fx-calendar bermang — xulq özi ulaydi. - Qilmang: Avto yangilaşni standart yoqib qöymang — foydalanuvçi özi tanlasin (server yuki, trafik). - Qilmang: Nisbiy oraliqni «01.10 – 17.10» deb saqlamang — «now-24h» saqlanadi, aks holda ertaga eskirgan davr oçiladi. ## Kunlar tasmasi (`daystrip`, beta, 0.29.0 dan) Gorizontal 7 kunlik mini kalendar (4.104): bron, qabul, yetkazib beriş va jadval sahifalari tepasida — töliq oy törisiz tez kun tanlaş. ‹ › — hafta, hafta Duşanbadan (data-align="today" — bugundan boşlab 7 kun). Bugun «Bugun» yozuvi va qalin halqa, band kun — burçakda nuqta (+ ekran öquvçiga «bron bor»), yopiq kun — çizilgan raqam va «yopiq». Kalendar bilan bir xil yordamçilar (oy nomlari, Du–Ya). - Qaçon: Bron / qabul / yetkazib beriş sahifasida yaqin kunlardan birini tanlaş. Jadval yoki vaqt slotlari ustida kun almaştirgiç. - Qaçon emas: Istalgan sana, oy töri kerak → `calendar`; Sana oraliği → `daterange`; Kun içidagi vaqt → `timeslots` - Variantlar: data-size=md|sm (standart md); data-align=week|today (standart week) - Klaviatura: ← → — Oldingi / keyingi kun (tanlanadi); hafta çetidan ötsa — hafta almaşadi; Home / End — Haftaning birinçi / oxirgi kuni (fokus); PageUp / PageDown — Oldingi / keyingi hafta; Boʻshliq / Enter — Fokusdagi kunni tanlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-fg-warning, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-line-height-tight, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-popover-width, --fx-radius-circle, --fx-radius-control, --fx-size-icon-md, --fx-size-status-dot-sm, --fx-space-1, --fx-space-2, --fx-text-brand, --fx-text-disabled, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Stomatologiya qabuli — «Mehr Klinikasi», Yunusobod

    Nuqta — böş vaqt kam qolgan kun. Yakşanba — dam oliş.

    ``` - Qilmang: Uzoq sanani (tuğilgan kun) tasma bilan tanlatmang — kalendar yoki sana maydoni. - Qilmang: Band kunni faqat rang bilan bildirmang — nuqta va matn bor. - Qilmang: Bir sahifada ikkita tasmani bir xil sana uçun qöymang. ## Özgariş körsatkiçi (`delta`, beta, 0.22.0 dan) Strelka + son + davr: «▲ +12,4% ötgan oyga nisbatan». Yönaliş (yuqori/past/özgarişsiz) va yaxşi/yomon ohang alohida beriladi; haqiqiy minus belgisi U+2212. Chip varianti (20.10): data-variant="chip" — ohang fonli pill (yaxşi — yaşil, yomon — qizil, betaraf — kulrang), KPI kartaning yuqori öng çetida. - Qaçon: KPI plitkasida, jadval katagida, sarlavha yonida özgariş. - Qaçon emas: Holat yorliği (faol/nofaol) → `status` - Variantlar: data-dir=down|flat (standart up); data-tone=good|bad (standart neutral); data-variant=chip (standart text); data-size=md (standart sm) - Tokenlar: --fx-bg-error-subtle, --fx-bg-muted, --fx-bg-success-subtle, --fx-border-width-default, --fx-fg-error, --fx-fg-success, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-radius-tag, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-text-secondary, --fx-text-tertiary ```html +12,4% ötgan oyga nisbatan −3,1% xarajat −8% arizalar 0% +3,3%−2,1%0,0%+12,5% oyma-oy ``` - Qilmang: Matnda tire (-) örniga haqiqiy minus (−) yozing. - Qilmang: Pastga strelkani avtomatik «yomon» deb bermang — xarajat kamayişi yaxşi (data-tone alohida). ## Dialog (`dialog`, beta, 0.1.0 dan) Tasdiq va qisqa formalar uçun modal oyna. Native + showModal(). Tasdiqlaş varianti (alertdialog, closedby=none), «yozib tasdiqlang» (matn mos kelsagina tugma yoqiladi), ölçamlar sm/lg/töliq ekran, uzun mazmunda yopişqoq sarlavha/amallar. Ustma-ust (4.154): data-stack'li dialog ustida ikkinçisi oçilsa, pastdagisi kiçrayib orqaga ketadi, parda ikki qavat qoraymaydi. Sudraladigan (data-draggable): sarlavha qatoridan siçqonça/barmoq bilan yoki .fx-dialog__grip tutqiçi + strelkalar; yopilganda markazga qaytadi. - Qaçon: Tasdiq va qisqa forma — foydalanuvçi javobisiz davom etib bölmaydi. - Qaçon emas: Qisqa ma'lumot tugma yonida → `popover`; Amal natijasi haqida xabar → `toast`; Tugma yonida tezkor tasdiq (modalsiz) → `popover` - Variantlar: data-variant=alert (standart default); data-size=sm|lg|full (standart md); data-scroll=on; data-stack=off|on (standart off); data-draggable=off|on (standart off) - Klaviatura: Esc — Yopadi; Tab — Fokus oyna içida aylanadi; Strelkalar (tutqichda) — Sudraladigan oynani suradi; Shift bilan — 4 barobar; Home (tutqichda) — Oynani markazga qaytaradi - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-dialog-width, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-exit, --fx-fg-error, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-exit-base, --fx-motion-scale-enter, --fx-motion-shift-md, --fx-radius-nav, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-sm, --fx-size-status-dot, --fx-space-10, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Öçirilsinmi?

    Bu amalni qaytarib bölmaydi.

    Loyiha butunlay öçiriladi

    Hamma ariza va hujjatlar yöqoladi, qaytarib bölmaydi.

    Mijoz: «Ğallaorol Agro»

    Mas'ul şaxs körsatilmagan. Kontakt qöşing yoki röyxatdan tanlang.

    Yangi kontakt

    Kurs kalkulyatori

    1 USD = 12 650 söm. Oynani sarlavhasidan surib, ostidagi jadvalni köring.
     ``` - Qilmang: Dialog içida yana dialog oçmang — zarur bölsa faqat data-stack bilan va 2 qavatdan oşirmang. - Qilmang: Tasdiqlaş dialogida fokus «Öçiriş»da boşlanmasin — xavfsiz tugmada (autofocus). - Qilmang: «Yozib tasdiqlang»ni har kiçik amalga qöymang — faqat qaytmas, katta yöqotişda. ## Ajratgiç (`divider`, beta, 0.22.0 dan) Kontentni ikkiga ajratuvçi nozik çiziq. Böş yoki içida yorliq bilan («yoki»); gorizontal va vertikal;
    yoki role="separator". - Qaçon: Bir sahifadagi mantiqiy bölimlarni yoki qatordagi guruhlarni vizual ajratiş. Kiriş formasida «yoki» ajratgiçi. - Qaçon emas: Röyxat qatorlari orasidagi çiziq → `list`; Menyu bandlari guruhi → `menu` - Variantlar: data-orientation=horizontal|vertical (standart horizontal); data-align=center|start|end (standart center); data-strength=default|strong (standart default) - Tokenlar: --fx-border-color-default, --fx-border-color-strong, --fx-border-width-default, --fx-font-size-xs, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-tertiary ```html

    Hisobingiz bormi?

    ``` - Qilmang: Har elementni çiziq bilan ajratmang — oraliq (fx-stack gap) köpinça yetarli. - Qilmang: Dekorativ çiziqni ekran öquvçiga öqitmang: ma'no bermasa aria-hidden="true". ## Ta'rif röyxati (`dl`, beta, 0.14.0 dan) Nom — qiymat juftliklari: tafsilot varaği, profil, buyurtma ma'lumoti. Ikki ustun (standart) yoki ustma-ust (tor joyda). Variantlar: çiziqli qatorlar, ixçam, ustunli guruhlar (
    içida dt+dd). Kengaytma: qiymat yonida .fx-dl__action yoki .fx-copy, data-columns=2|3. - Qaçon: Bitta yozuvning maydonlari. - Qaçon emas: Köp yozuv → `table` - Variantlar: data-layout=row|stacked|groups (standart row); data-variant=divided (standart default); data-density=compact (standart default); data-columns=2|3 - Tokenlar: --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-popover-width, --fx-radius-badge, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-tertiary ```html
    Telefon
    +998 90 123 45 67
    Qiziqiş
    Obuna
    Birinçi ariza
    17.10.2026, 09:14
    Holat
    Faol
    Reja
    Yillik
    Mijoz
    Aziz Karimov
    Şahar
    Toşkent
    Summa
    1 200 000 söm
    Telefon
    +998 90 123 45 67
    Şahar
    Toşkent
    ``` - Qilmang: Jadval ma'lumotini dl bilan qilmang — köp yozuv bölsa jadval. ## Dock (`dock`, beta, 0.29.0 dan) Ilovalar yoki bölimlar uçun ikonlar qatori (4.76): kursor ostidagi ikon kattalaşadi, qöşnilari ozroq (macOS Dock kabi), klaviatura fokusida ham. Faqat CSS (:has bilan qöşnilar). Har bandda tepada çiqadigan yorliq, joriy sahifa — pastda nuqta (aria-current). Barmoqli qurilmada, harakat kamaytirilganda va data-magnify="off" da — oddiy tugmalar qatori. - Qaçon: Landing sahifasida mahsulot modullari yoki ilovalar namoyişi. Işxona/launcher sahifasida tez-tez oçiladigan bölimlar. - Qaçon emas: Vositalar qatori (tahrirlaş amallari) → `toolbar`; Ilova asosiy menyusi → `shell` - Variantlar: data-size=sm (standart md); data-magnify=off (standart on); data-color=blue|green|yellow|pink|purple|brand (standart muted) - Klaviatura: Tab / Shift+Tab — Bandlar böylab; fokusdagi band kattalaşadi va yorliği çiqadi; Enter — Bölimni oçadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-ease-spring, --fx-ease-standard, --fx-font-size-xs, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-motion-shift-sm, --fx-radius-badge, --fx-radius-circle, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-lg, --fx-size-icon-lg, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-on-brand, --fx-text-on-category, --fx-text-primary ```html ``` - Qilmang: Asosiy navigatsiyani faqat Dock'ga qoldirmang — yorliqsiz ikonlarni hamma tuşunmaydi; sayt yoki ilova menyusi alohida bölsin. - Qilmang: 8–10 tadan köp band qöymang. - Qilmang: Kattalaşişni har kiçik ikon qatoriga (toolbar) qöllamang — bu landing va launcher uçun. ## Prujinali sudraş (`drag`, beta, 0.29.0 dan) Elementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul). data-release="dismiss" — eni 40 %idan uzoq yoki tez surilsa, element şu tomonga uçib ketadi va yopiladi (swipe bilan yopiş: bildirişnoma, karta, varaq); çegaradan ötganda element xiralaşib ogohlantiradi. data-axis — x (standart), y yoki both. Hodisalar: fx-drag-dismiss (bekor qilsa böladi), fx-drag-dismissed, fx-drag-return. Qaytariladigan elementda rezina qarşilik bor. Harakat kamaytirilsa — inersiya va prujina yöq. - Qaçon: Swipe bilan yopiladigan bildirişnoma, taklif yoki karta (mobil). Landing sahifada «tirik» fizik karta — prujina his qilinsin. - Qaçon emas: Röyxat tartibini özgartiriş → `sortable`; Pastdan çiquvçi varaq (sheet) yopilişi → `sheet` - Variantlar: data-axis=x|y|both (standart x); data-release=return|dismiss (standart return); data-spring=bounce|soft (standart bounce) - Klaviatura: ← → ↑ ↓ — Elementni turtadi, prujina bilan qaytadi; Delete / Backspace — dismiss rejimida — yopadi - Tokenlar: --fx-border-color-focus, --fx-border-width-focus, --fx-drag-x, --fx-drag-y, --fx-ease-bounce, --fx-ease-enter, --fx-ease-exit, --fx-ease-spring, --fx-ease-standard, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-motion-slow, --fx-shadow-lg, --fx-space-3 ```html

    Çapga yoki öngga suring yoki Delete tugmasini bosing — bildirişnoma yopiladi.

    • Yangi buyurtma #1042

      Dilnoza Karimova · 1 250 000 söm · 2 daqiqa oldin

    • Tölov qabul qilindi

      Payme · 480 000 söm · 15 daqiqa oldin

    • Mijoz izoh qoldirdi

      «Yetkazib beriş vaqtini özgartirsa böladimi?» · 1 soat oldin

    Meni suring

    Qöyib yuborsangiz — inersiya bilan davom etib, prujina bilan joyiga qaytadi.

    ``` - Qilmang: Yopişni faqat swipe bilan qoldirmang — har kartada «Yopiş» tugmasi bölsin (klaviatura, ekran öquvçi, siçqonça). - Qilmang: Saralaş uçun işlatmang — tartib özgarsa sortable. - Qilmang: Sahifa vertikal aylanadigan joyda data-axis="y" qöymang — scroll bilan töqnaşadi. ## Fayl yuklaş (`dropzone`, beta, 0.14.0 dan) Fayl tanlaş yoki sudrab taşlaş maydoni: bosilsa oyna oçiladi, ustiga olib kelinganda brend tusi, tanlangan fayllar nomi körinadi. Native input type="file" içida. Kengaytma: data-variant=compact, .fx-dropzone__limit, fayl qatorlari .fx-dropzone__list/__file (progress, data-state=error|done, qayta uriniş, thumbnail). Buferdan joylaş va papka (4.105): data-paste bilan Ctrl+V skrinşotni qöşadi (nomi «skrinshot-sana-vaqt.png»), papka taşlansa içidagi hamma fayl olinadi, «Papka tanlaş» tugmasi ham bor. - Qaçon: Skrinşot, hujjat, rasm yuklaş. - Qaçon emas: Bitta kiçik fayl, joy tor → `button` - Variantlar: data-variant=compact; data-paste=on|page - Klaviatura: Tab, Enter/Space — Fayl tanlaş oynasi; Ctrl+V — Buferdagi skrinşot yoki faylni qöşadi (data-paste) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    • hisobot.pdfHajmi 10 MB dan oşdi
    ``` - Qilmang: Ruxsat etilgan tur va hajmni yaşirmang — izohda yozing. ## Effektlar (spotlight, çegara nuri, yaltiraş, yönalişli hover) (`effects`, beta, 0.28.0 dan) Landing va «wow» sahifalar uçun ixtiyoriy effektlar qatlami: istalgan yuzaga (karta, bento katagi, narx kartasi) data-fx atributi bilan qöşiladi. «spotlight» — kursorni kuzatuvçi yumşoq nur: kartaning çegarasi va foni kursor ostida yonadi; data-fx-effects konteyner içida kursor yaqinidagi qöşni kartalar çegarasi ham yonadi (Linear, Magic UI uslubi). «beam» — çegara böylab aylanib yuruvçi nur, «tavsiya» yoki «yangi» urğusi uçun; data-fx-glow bilan taşqi yumşoq nur. Ranglar mavzudan (brend yoki toifa rangi) — HEX yöq. Çeksiz aylaniş faqat ekranda körinib turganda; harakat kamaytirilsa, calm yoki none rejimda — nur statik turadi. «glare» (4.54) — hover yoki klaviatura fokusida karta ustidan bitta diagonal yaltiraş ötadi (::before işlatadi — beam data-fx-glow bilan birga qöyilmaydi). «direction» (4.55) — içidagi qoplama (.fx-effects__overlay) kursor kirgan tomondan sirpanib çiqadi va çiqqan tomonga ketadi; klaviatura fokusida pastdan çiqadi, hover yöq qurilmada qoplama doim pastda körinadi. - Qaçon: Landing sahifadagi xususiyatlar töri, bento va narx kartalari — «tirik» sezilsin. Bitta urğu: eng ommabop tarif, yangi funksiya kartasi, AI kiriş nuqtasi. Portfolio/loyiha töri: rasm ustida nom va izoh kursor tomonidan çiqadi (direction); tarif kartasiga yaltiraş (glare). - Qaçon emas: Oddiy ma'lumot kartasi, ilova içidagi panel → `card`; Yangilik yoki holatni bildiriş → `badge` - Variantlar: data-fx=spotlight|beam|glare|direction (standart none); data-fx-color=blue|purple|pink|green (standart brand); data-fx-speed=slow|fast (standart normal) - Tokenlar: --fx-beam-angle, --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-muted, --fx-bg-overlay, --fx-bg-static-light, --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-duration-pulse, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-instant, --fx-motion-slow, --fx-motion-slower, --fx-mx, --fx-my, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-4, --fx-space-5, --fx-spot, --fx-spot-fill, --fx-viz-accent ```html

    Tokenlar

    Rang, oraliq va şrift — bitta manbadan. Mavzu almaşsa, butun sayt bir zumda yangilanadi.

    Tavsiya

    MCP orqali AI agent

    Agent komponentlarni özi topadi, qoidalarni tekşiradi va xatosiz kod yozadi.

    npx foxui update

    Yangi versiya taklif bölib keladi — özgarişlarni körib, bitta buyruq bilan olasiz.

    ``` - Qilmang: Effektni ilova (CRM, jadval, forma) içida işlatmang — bu landing va marketing qatlami. - Qilmang: Bitta ekranda bir neçta çegara nurini qöymang — urğu bitta bölsin (eng ommabop tarif yoki asosiy CTA). - Qilmang: Ma'noni faqat nur bilan bermang — «Tavsiya» belgisi söz bilan ham yozilsin. - Qilmang: Yönalişli qoplamaga muhim amalni yaşirmang — karta butuniça havola bölsin, qoplamada faqat nom va izoh. ## Elevation va yuza qatlamlari (`elevation`, beta, 0.28.0 dan) Yuza qatlamlari poydevori. Elevation 0–5 (4.7): har daraja soya (--fx-elevation-N) + yuza tusi (--fx-elevation-tint-N) juftligi — yoruğda soya, qoronğida yuza yoruğroq bölib ajraladi; soya uslub tugmalariga (blur, depth) va «Çegara» öqiga böysunadi. data-hover="raise" — hover'da bir daraja kötariladi. Şişa material (4.16): fx-material thin/regular/thick — şaffof yuza, orqa fon xiralaşuvi, nozik çegara; qöllanmasa yoki şaffoflik/kontrast sozlamasida tekis yuza. Viz palitralar (4.20): ketma-ket --fx-viz-seq-1…7 (kamdan köpga, brend) va ikki qutbli --fx-viz-div-1…7 (xavf ← kontekst → ösiş), mavzu bilan almaşadi; fx-viz-scale — legenda çiziği, data-viz-step — katakni böyaş. - Qaçon: Yuza darajasini belgilaş: karta (1), sudralayotgan element (2), menyu (3), dialog (4), toast (5). Yopişqoq header yoki varaq ostidan kontent ötayotgani sezilişi kerak bölganda — fx-material. Heatmap, choropleth, foiz özgarişi jadvali — viz-seq / viz-div. - Qaçon emas: Kontent guruhi uçun yuza (çegarali) → `card`; Kategoriya (toifa) ranglari → `badge` - Variantlar: data-level=0|1|2|3|4|5 (standart 1); data-hover=none|raise (standart none); data-material=thin|regular|thick (standart regular); data-scale=seq|div (standart seq) - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-strong, --fx-border-width-default, --fx-ease-spring, --fx-ease-standard, --fx-elevation-0, --fx-elevation-1, --fx-elevation-2, --fx-elevation-3, --fx-elevation-4, --fx-elevation-5, --fx-elevation-tint-0, --fx-elevation-tint-1, --fx-elevation-tint-2, --fx-elevation-tint-3, --fx-elevation-tint-4, --fx-elevation-tint-5, --fx-font-size-xs, --fx-knob-motion-lift, --fx-motion-base, --fx-motion-lift, --fx-radius-badge, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-viz-brand, --fx-viz-context, --fx-viz-div-1, --fx-viz-div-2, --fx-viz-div-3, --fx-viz-div-4, --fx-viz-div-5, --fx-viz-div-6, --fx-viz-div-7, --fx-viz-risk, --fx-viz-seq-1, --fx-viz-seq-2, --fx-viz-seq-3, --fx-viz-seq-4, --fx-viz-seq-5, --fx-viz-seq-6, --fx-viz-seq-7 ```html
    0 · Tekis panel
    1 · Mijoz kartasi
    2 · Sudralayotgan bitim
    3 · Menyu
    4 · Dialog
    5 · Bildirişnoma
    Hover'da kötariladi
    Şişa panel: «Yangi buyurtma — Aziza Karimova, 340 000 söm»
    FilialDuSeCh
    Çilonzor145231
    Yunusobod33648
    ``` - Qilmang: Soyani qölda yozmang (box-shadow: 0 4px …) — darajani tanlang: soya uslub va chegara oʻqiga boʻysunadi. - Qilmang: Bir ekranda 3 tadan ortiq darajani yonma-yon işlatmang — ierarxiya yöqoladi. - Qilmang: Şişa materialni matn köp bölgan katta yuzada işlatmang — orqa fon öqişni buzadi; header, varaq, toast uçun. - Qilmang: Viz poğonani yagona ma'no belgisi qilmang: katak içida qiymat yoki legenda bölsin. ## Email şablonlari (`email`, beta, 0.29.0 dan) Tranzaksion xatlar uçun naqş (4.181): tasdiq kodi, parol tiklaş, hisob-faktura va xabarnoma. Poçta mijozlari (Gmail, Outlook, Apple Mail, Mail.ru) flex/grid'ni bilmaydi — şuning uçun tuzilma JADVALLI: içma-iç, bitta ustun, eni ~600 px, tugma — jadval katagidagi havola. Uslub bu yerda FoxUI tokenlarida (hujjat saytida köriş, mavzu va qoronği rejim bilan almaşiş); yuborişdan oldin build bosqiçida tokenlar qiymatga aylantirilib, uslublar inline qilinadi (masalan juice) — şu sababli faqat inline'ga çidaydigan xossalar işlatilgan. .fx-email__preheader — xatlar röyxatida mavzu yonida çiqadigan yaşirin qisqa matn. data-tone — kartaning tepa çiziği: brand (standart), success (tölov), warning (xavfsizlik), error (muvaffaqiyatsiz tölov). - Qaçon: Röyxatdan ötiş, kiriş kodi, parol tiklaş xatlari. Tölov çeki, hisob-faktura, obuna yangilanişi. Taklif, izoh, topşiriq haqida xabarnomalar. - Qaçon emas: Sayt içidagi bildirişnoma → `toast`; Ilova içidagi xabarlar qutisi → `inbox` - Variantlar: data-tone=brand|success|warning|error (standart brand) - Klaviatura: Tab — Logo → asosiy tugma → zaxira havola → footer havolalari - Tokenlar: --fx-bg-brand-solid, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-dialog-width, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-family-sans, --fx-font-size-2xl, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-line-height-normal, --fx-line-height-relaxed, --fx-line-height-snug, --fx-radius-control, --fx-radius-surface, --fx-space-1, --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 ```html
    ``` - Qilmang: Flex, grid, position, CSS özgaruvçisini inline qilinmagan holda yubormang — Outlook va Gmail ularni taşlab yuboradi. - Qilmang: Muhim ma'lumotni (kod, summa) faqat rasmda bermang — rasmlar köpinça öçirilgan böladi. - Qilmang: Bitta xatda bir neçta asosiy tugma qöymang — bitta harakat, qolgani matnli havola. - Qilmang: Obunadan çiqiş va kompaniya manzilini olib taşlamang — marketing xatlarida bu qonun talabi. ## Emoji tanlagiç (`emojipicker`, beta, 0.24.0 dan) Emoji tanlaş paneli: qidiruv (özbekça va inglizça sözlar), 7 toifa tabi, “Oxirgilar” (brauzerda saqlanadi). Brauzerning öz emojilari — rasm yuklanmaydi. Tanlanganda `fx-emoji-select` hodisasi; `data-target` bilan maydonning kursor örniga yoziladi. Odatda popover içida işlatiladi. - Qaçon: Çat, izoh yoki reaktsiyaga emoji qöşiş. - Qaçon emas: Tez reaktsiya (3–5 ta) → `msgactions` - Klaviatura: ← → — Tablar yoki emojilar orasida; ↑ ↓ — Emoji qatorlari orasida; Home, End — Birinçi / oxirgi; Enter, Space — Emoji tanlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-popover-width, --fx-radius-circle, --fx-radius-nav, --fx-radius-overlay, --fx-shadow-md, --fx-size-control-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-tertiary ```html
    ``` - Qilmang: Emoji bilan iş natijasini yolğiz bildirmang (✅ ning yonida söz ham bölsin). - Qilmang: Brend ikonlari örnida emoji işlatmang — ular platformaga qarab har xil çiqadi. - Qilmang: Panelni sahifaga doimiy qöymang — `popover` içida, tugma bosilganda oçing. ## Böş holat (`empty`, beta, 0.10.0 dan) Röyxat yoki jadvalda hali heç narsa yöq, qidiruv topmadi yoki yuklaşda xato: belgi, sarlavha, bitta qator izoh va keyingi qadam. Kengaytma: data-state=first|search|forbidden (xato bilan 4 tayyor holat), .fx-empty__art[data-size=sm|lg|illustration], .fx-empty__link. - Qaçon: Böş röyxat, topilmagan qidiruv, yuklaş xatosi. - Qaçon emas: Ma'lumot yuklanmoqda → `skeleton` - Variantlar: data-state=empty|error|first|search|forbidden (standart empty); data-size=default|compact (standart default) - Tokenlar: --fx-bg-brand-subtle, --fx-bg-error-subtle, --fx-bg-muted, --fx-bg-warning-subtle, --fx-border-color-focus, --fx-border-width-focus, --fx-fg-error, --fx-fg-warning, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-surface, --fx-size-icon-lg, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Hali ariza yöq

    Saytdagi forma orqali kelgan arizalar şu yerda körinadi.

    Formani oçiş

    Yuklab bölmadi

    Internetni tekşirib, qayta urinib köring.

    Heç narsa topilmadi

    Boşqa söz bilan qidiring.

    Filtrlarni tozalaş
    ``` - Qilmang: «Ma'lumot yöq» deb töxtamang — keyingi qadamni ayting. ## Xatolar xulosasi (`error-summary`, beta, 0.22.0 dan) Forma tepasida: «Quyidagilarni tuzating» sarlavhasi va har xatoga havola. Yuborişda fokus şu blokka ketadi, havola bosilsa tegişli maydonga fokus beriladi. Maydon ostidagi xato matni bilan birga işlaydi, uni almaştirmaydi. - Qaçon: Forma yuborilganda bir neçta maydonda xato çiqqan. - Qaçon emas: Bitta umumiy xabar (server xatosi, tarmoq) → `alert`; Qisqa vaqtli xabar → `toast` - Klaviatura: Tab — Xato havolalari orasida; Enter — Havola — tegişli maydonga fokus - Tokenlar: --fx-bg-error-subtle, --fx-border-color-focus, --fx-border-width-focus, --fx-fg-error, --fx-font-size-sm, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-radius-control, --fx-radius-surface, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-4, --fx-space-5, --fx-text-primary ```html
    Ismni yozing.
    ``` - Qilmang: Faqat bitta xato bölsa ham maydon ostidagi matnni olib taşlamang — xulosa qöşimça, almaştiriş emas. - Qilmang: Havola matnini maydon ostidagi matn bilan bir xil yozing — foydalanuvçi ikki xil gap öqimasin. ## Xato sahifalari töplami (`errorpage`, beta, 0.28.0 dan) Töliq xato sahifasi şabloni (4.183): tepada sayt belgisi va kiriş, markazda naqşli fon ustida ulkan kod (404, 500, 503 — tepadan pastga sönuvçi, holat rangida), ostida fx-result (sarlavha, izoh, tugmalar — 500/503/offline holatlari result'da), qidiruv maydoni va foydali havolalar kartalari, pastda ingiçka footer (xato kodi, «xato haqida xabar beriş»). data-status kodning rangini beradi; data-size="block" — hujjat içida namuna sifatida. - Qaçon: Saytning 404, 500, 503 va oflayn sahifalari — bitta şablondan. Ruxsat yöq (403) sahifasi — kiriş tugmasi bilan. - Qaçon emas: Sahifa içidagi kiçik natija bloki → `result`; Röyxat böş → `empty` - Variantlar: data-status=500|503 (standart 404); data-size=block (standart page) - Klaviatura: Tab — Qidiruv, havolalar va tugmalar orasida - Tokenlar: --fx-bg-page, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-dialog-width, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-standard, --fx-fg-error, --fx-fg-warning, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-knob-motion, --fx-knob-motion-lift, --fx-motion-base, --fx-motion-fast, --fx-motion-lift, --fx-motion-shift-lg, --fx-motion-slower, --fx-popover-width, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-sm, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    ÇorsuKiriş

    Bu sahifa topilmadi

    Manzil özgargan yoki sahifa öçirilgan bölişi mumkin. Qidirib köring yoki quyidagi bölimlardan birini tanlang.

    ``` - Qilmang: Xato sahifasida navigatsiyani yöq qilmang — foydalanuvçi qayerga borişni bilsin. - Qilmang: Hazil bilan muammoni yaşirmang — nima bölgani va nima qiliş kerakligi aniq yozilsin. - Qilmang: 500 sahifada texnik tafsilot (stack trace) körsatmang — sörov raqami yetarli. ## FAB va speed dial (`fab`, beta, 0.28.0 dan) Ekran burçagidagi bitta asosiy amal (4.150, M3 FAB): telefonda «Yangi bitim», «Ariza qöşiş». Speed dial — bosilsa 3–5 amal ikon va yozuv bilan yoyiladi, asosiy tugma ✕ ga aylanadi. Kengaytirilgan (data-extended) — ikon + yozuv. Klaviatura: APG «Menu Button». - Qaçon: Telefon ilovasida ekranning bitta asosiy yaratiş amali (yangi bitim, ariza, xabar). - Qaçon emas: Oddiy sahifa amali → `button`; Köp amallar röyxati → `menu` - Variantlar: data-position=end|start|inline (standart end); data-extended=true; data-size=sm (standart md) - Klaviatura: Enter / Boʻsh joy / ↑ — Amallarni oçadi, birinçisiga fokus; ↑ ↓, Home, End — Amallar orasida yuradi; Esc — Yopadi, fokus asosiy tugmaga - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-hover, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-duration-stagger, --fx-ease-emphasized, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-motion-stagger, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-md, --fx-radius-circle, --fx-shadow-lg, --fx-shadow-md, --fx-size-icon-md, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary ```html
    ``` - Qilmang: Sahifada bittadan köp FAB qöymang — u eng asosiy amal. - Qilmang: Speed dialda 5 dan köp amal bermang va yozuvsiz ikon qoldirmang. - Qilmang: Kompyuterda katta jadval ustida yopib qöymasin — kompyuterda sahifa sarlavhasidagi asosiy tugma afzal. - Qilmang: Xavfli amal (öçiriş) uçun FAB işlatmang. ## Faset filtr paneli (`facets`, beta, 0.28.0 dan) Röyxat yonidagi guruhlangan filtrlar (4.167, Algolia/Polaris uslubida): har guruh yiğiladi, har variantda natijalar soni, uzun röyxatda «Yana N ta» va guruh içida qidiruv, guruh sarlavhasida tanlanganlar soni, yuqorida «Tozalaş». Natijasi 0 variant xira. CRM röyxati, katalog, hisobotlar uçun. - Qaçon: Köp maydonli röyxat yoki katalogni bir neçta mezon böyiça toraytiriş (bosqiç, şahar, mas'ul). - Qaçon emas: 2–3 tezkor filtr → `filterbar`; Murakkab şartlar (VA/YOKI) → `filterbar` - Variantlar: data-limit=son - Klaviatura: Tab — Guruh sarlavhasi, variantlar, «Yana», «Tozalaş» böylab; Enter / Boʻsh joy — Guruhni yiğadi/oçadi, variantni belgilaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-nav-width, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html ``` - Qilmang: Har variant yonidagi sonni olib taşlamang — foydalanuvçi böş natijaga tuşmasin. - Qilmang: Guruhda 5–7 dan köp variantni birdaniga körsatmang — data-limit va qidiruv bering. - Qilmang: Tor ekranda çap ustun sifatida qoldirmang — filterbar «Filtrlar» varaği (sheet) içiga oling. ## FAQ bölimi (`faq`, beta, 0.28.0 dan) Köp beriladigan savollar bölimi (4.173): sarlavha bloki, accordion asosidagi savol-javoblar (bir vaqtda bittasi oçiq — details name) va oxirida «Javob topmadingizmi?» bloki. data-layout: stack (standart — sarlavha tepada, markazda) yoki split (sarlavha çapda, scroll'da yopişib turadi; savollar öngda). Qidiruv natijalarida savollar çiqişi uçun bölim yoniga FAQPage strukturaviy ma'lumoti (application/ld+json) qöyiladi — sahifadagi matn bilan bir xil bölsin. - Qaçon: Narx sahifasi va landing oxirida — e'tirozlarga javob. Yordam markazining qisqa boş sahifasi. - Qaçon emas: Bitta yiğiladigan blok → `accordion`; Töliq hujjat sahifasi → `prose` - Variantlar: data-layout=split (standart stack) - Klaviatura: Enter, Space — Savolni oçadi / yopadi; Tab — Savollar orasida - Tokenlar: --fx-bg-subtle, --fx-dialog-width, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-radius-surface, --fx-size-topbar, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-secondary ```html

    Köp beriladigan savollar

    Obuna, litsenziya va yangilanişlar haqida qisqaça.

    Obuna tugasa nima böladi?
    Yuklab olingan versiyalar sizda abadiy qoladi va işlayveradi. Töxtaydi: yangilanişlar, MCP orqali AI agent va yangi bloklar.
    Bitta litsenziya neçta qurilmada işlaydi?
    1 litsenziya — 1 kişi, 3 ta qurilma (masalan iş kompyuteri, uy kompyuteri va noutbuk).
    Umrbod (lifetime) litsenziya bormi?
    Yöq. FoxUI har oy yangilanadi va yangi komponentlar qöşiladi — şuning uçun faqat oylik va yillik obuna.
    Figma fayli ham beriladimi?
    Yöq — FoxUI faqat kod: npm paket, CLI va AI agent uçun MCP. Dizayn hujjat saytida jonli körinadi.
    Kerakli komponent bölmasa-çi?
    Kabinetdan skrinşot yuborasiz — bir hafta içida komponent umumiy tizimga qöşiladi va npx foxui update bilan keladi.

    Javob topmadingizmi?Savolingizni yozing — bir iş kunida javob beramiz.

    Boğlaniş
    ``` - Qilmang: Javobda «ha» yoki «yöq» bilan töxtamang — qisqa sababini ayting. - Qilmang: 10 tadan ortiq savol qöymang — toifalarga böling yoki alohida yordam sahifasi. - Qilmang: Strukturaviy ma'lumotdagi matnni sahifadagidan farqli yozmang. ## Rangli ikon plitkasi (`featured`, beta, 0.22.0 dan) Ikon rangli yumşoq plitkada: böş holat, xususiyat röyxati, dialog tepasi. Ohang (brend, neytral, holat), uslub (yoruğ, töq, çiziqli), ölçam sm–xl, şakl kvadrat yoki doira. - Qaçon: Böş holat, xususiyat kartasi, dialog tepasidagi belgi. - Qaçon emas: Foydalanuvçi tasviri → `avatar`; Matnli holat → `badge` - Variantlar: data-tone=neutral|success|warning|error|info (standart brand); data-style=solid|outline (standart light); data-size=sm|lg|xl (standart md); data-shape=circle (standart square) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-error-solid, --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-page, --fx-bg-success-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-width-default, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-fg-error, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-radius-circle, --fx-radius-control, --fx-text-brand, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary, --fx-text-secondary ```html ``` - Qilmang: Plitka ma'noni yolğiz rang bilan bermasin — yoniga sarlavha matni. - Qilmang: Bir ekranda 3 tadan köp turli ohang qöymang. ## Xususiyatlar bölimi (`features`, beta, 0.28.0 dan) Landingdagi xususiyatlar bölimi (4.171): markazlaşgan sarlavha bloki (eyebrow, sarlavha, izoh) va ikonli tör — har bandda rangli ikon (toifa ranglari), nom va qisqa izoh; data-layout="cards" — har band karta içida. Ikkinçi şakl — almaşinuvçi qatorlar (.fx-features__rows): matn va media yonma-yon, har keyingi qatorda örin almaşadi; matn ostida ✓ röyxat. Telefonda bitta ustun. - Qaçon: Landingda mahsulot imkoniyatlarini 3–6 band bilan körsatiş. Muhim 2–3 imkoniyatni media bilan batafsil oçiş (rows). - Qaçon emas: Turli ölçamdagi vizual mozaika → `bento`; Tariflarni taqqoslaş → `pricing` - Variantlar: data-layout=cards (standart grid); data-align=start (standart center); data-color=blue|green|pink|yellow|coral|purple (standart brand) - Tokenlar: --fx-bg-brand-subtle, --fx-bg-category-blue-subtle, --fx-bg-category-coral-subtle, --fx-bg-category-green-subtle, --fx-bg-category-pink-subtle, --fx-bg-category-purple-subtle, --fx-bg-category-yellow-subtle, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-dialog-width, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-weight-semibold, --fx-popover-width, --fx-radius-control, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-sm, --fx-size-control-md, --fx-size-icon-lg, --fx-size-icon-md, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-primary, --fx-text-secondary ```html

    Nega FoxUI

    Bir marta quriladi — hamma joyda işlaydi

    Şakl va tizim FoxUI'dan, rang va şrift — tanlanadigan kutubxonadan.

    • 8 rang mavzusi

      Brendingizga eng yaqinini tanlang — pastel, neytral va holat ranglari mavzu bilan birga keladi.

    • Kontrast qöriqçisi

      Har mavzu yoruğ va qoronği rejimda WCAG AA tekşiruvidan ötadi — build'da, avtomatik.

    • Özbekça şriftlar

      Kutubxonadagi har şrift ʻ belgisini töğri çiqaradi; almaşsa ham ölçam buzilmaydi.

    • AI agent uçun MCP

      Agent komponent, token va qoidalarni özi oladi — öylab topmaydi.

    • Yangilaniş — taklif

      npx foxui update nima özgarganini körsatadi; qabul qiliş sizning qölingizda.

    • Yengil va tez

      Boğliqliksiz CSS va kiçik JS xulqlar; ikonlar sahifada bir marta.

    Mexanizm va libos

    Avval işlaydi, keyin çiroyli böladi

    Sahifa, forma va ma'lumot «kulrang qolip»da quriladi; libos tokenlar orqali keyin kiyiladi — mexanizm özgarmaydi.

    • Mavzu bitta atribut bilan almaşadi
    • Uslub: Qattiq, Örta, Momiq, Aylana
    • Yoruğ va qoronği — avtomatik

    Qöriqçi

    Xato kodga yetib bormaydi

    HEX rang, qölda yozilgan oraliq yoki notöğri ʻ — npx foxui check hammasini topadi va qanday tuzatişni aytadi.

    ``` - Qilmang: Törga 9 tadan ortiq band qöymang — eng muhim 3–6 tasi. - Qilmang: Har bandga uzun abzats yozmang — nom + 1–2 qator. - Qilmang: Ikonlarni bezak uçun turli uslubda aralaştirmang — bitta çiziq qalinligi. ## Fayl tugmasi (`file`, beta, 0.22.0 dan) Oddiy «Fayl tanlaş» maydoni: native input type="file", maydon şaklida — tugma va tanlangan fayl nomi brauzerdan. Bitta yoki köp fayl, accept bilan tur çeklanadi. Sudrab taşlaş kerak bölsa — dropzone. Fayl turi belgisi (4.142): .fx-file__icon[data-type=pdf|doc|xls|ppt|zip|img|txt] — bukilgan burçakli varaq va kengaytma yorliği; .fx-file__item — belgi, nom va hajm qatori. - Qaçon: Bitta yoki bir neçta fayl tanlaş, sudrab taşlaş şart emas (forma, profil). - Qaçon emas: Sudrab taşlaş va katta yuklaş maydoni → `dropzone` - Variantlar: data-size=sm|lg (standart md); data-type=pdf|doc|xls|ppt|zip|img|txt; data-size=sm|lg (standart md) - Klaviatura: Space / Enter — Fayl tanlaş oynasini oçadi - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-field, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-pill, --fx-motion-fast, --fx-radius-badge, --fx-radius-control, --fx-space-3, --fx-space-4, --fx-text-disabled, --fx-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    PDF yoki rasm, 10 MB gaça.
    Eng köpi 5 ta rasm tanlang.
    Şartnoma №214 — Aziz Karimov.pdfPDF · 1,2 MB
    Oktyabr savdo hisoboti.xlsxExcel · 384 KB
    Tijoriy taklif.docxWord · 96 KB
    ``` - Qilmang: Native input'ni yaşirib, örniga div-tugma yasamang — klaviatura va ekran öquvçi buziladi. - Qilmang: Hajm va turni faqat xatoda aytmang — hint'da oldindan yozing. - Qilmang: Fayl turini faqat rang bilan bildirmang — yorliq (PDF, XLS) va nom/hajm qatorida tur sözi bölsin. ## Filtr qatori (`filterbar`, beta, 0.23.0 dan) Röyxat sahifasining filtr qatori: qidiruv, 2–3 faset chip, «Filtrlar» varaq tugmasi (faol filtrlar soni bilan), öng çetda köriniş menyusi; ostida faol filtrlar teglari va «Hammasini tozalaş». Xulq foxui.js'da: tegni olib taşlaş, tozalaş, son, fokusni saqlaş (#140, PDP listpage__bar). Sörov quruvçi (4.168, data-builder): şart qatorlari (maydon · operator · qiymat) va VA/YOKI guruhlari, pastda sörovning öqiladigan matni. - Qaçon: Jadval yoki röyxat ustida qidiriş va 2–3 tez filtr kerak; qolgan filtrlar varaqda. - Qaçon emas: Faqat qidiruv → `search`; Murakkab, köp şartli filtr (guruhlangan qoidalar) → `sheet` - Variantlar: data-builder=true - Klaviatura: Tab, Enter — Chip/tugma işlaydi; × — tegni olib taşlaydi; Space — Faset chipni yoqadi/öçiradi; ← → (VA/YOKI) — Boğlovçini almaştiradi (radio guruhi) - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-popover-width, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-error, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Faol: Holat: Yangi Şahar: Samarqand

    Filtrlar

    Holat, şahar, summa oraliği.
    ``` - Qilmang: 2–3 tadan köp faset chip qöymang — qolganini «Filtrlar» varağiga olib öting. - Qilmang: Faol filtrni faqat rang bilan körsatmang — teg (matn) va «Filtrlar» tugmasida son. - Qilmang: «Hammasini tozalaş»ni birinçi darajali tugma qilmang — havola körinişida. ## Mamlakat bayroği (`flag`, beta, 0.29.0 dan) Sodda geometrik bayroqlar (4.145) — telefon kodi (+998), til va valyuta tanlagiçlari, mijoz mamlakati ustuni uçun. Faqat CSS gradientlar: rasm yuklanmaydi, inline SVG va emoji yöq (emoji bayroq Windows'da «UZ» harflari bölib çiqadi). Çizma 4:3; data-shape="circle" — avatar va til tugmasi uçun doira. 12 mamlakat: Özbekiston, Qozoğiston, Rossiya, Turkiya, AQSh, BAA, Xitoy, Koreya, Tojikiston, Qirğiziston, Germaniya, Yaponiya. Mayda detallar (yulduz, gerb) nuqta yoki halqaga soddalaştirilgan — 16–24 px'da baribir körinmaydi. - Qaçon: Telefon raqami maydonida mamlakat kodi (+998) yonida. Mijozlar jadvalida mamlakat ustuni, valyuta va til tanlagiç. - Qaçon emas: Brend yoki kompaniya logotipi → `avatar`; Telefon raqami kiritiş (kod tanlaş bilan) → `phone` - Variantlar: data-country=uz|kz|ru|tr|us|ae|cn|kr|tj|kg|de|jp; data-size=sm|md|lg|xl (standart md); data-shape=rect|circle (standart rect) - Tokenlar: --fx-bg-muted, --fx-border-color-default, --fx-border-width-default, --fx-color-amber-300, --fx-color-black, --fx-color-blue-300, --fx-color-blue-600, --fx-color-blue-700, --fx-color-blue-900, --fx-color-green-600, --fx-color-red-600, --fx-color-white, --fx-font-size-sm, --fx-radius-badge, --fx-radius-circle, --fx-size-icon-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-12, --fx-space-2, --fx-text-primary, --fx-text-tertiary ```html
    • Özbekiston +998
    • Qozoğiston +7
    • Rossiya +7
    • Turkiya +90
    • AQSh +1
    • BAA +971
    • Xitoy +86
    • Koreya Respublikasi +82
    • Tojikiston +992
    • Qirğiziston +996
    • Germaniya +49
    • Yaponiya +81

    ``` - Qilmang: Bayroqni yolğiz qoldirmang — yonida mamlakat nomi yoki kodi bölsin (bayroqlar öxşaş: Rossiya va Sloveniya, Indoneziya va Polşa). - Qilmang: Til tanlagiçda bayroqni til belgisi qilmang (ingliz tili ≠ AQSh) — til nomini yozing, bayroq faqat qöşimça. - Qilmang: Röyxatda yöq mamlakat uçun boşqa bayroqni qöymang — data-country notöğri bölsa neytral kulrang törtburçak çiqadi. ## Suzuvçi oyna (`floatwin`, beta, 0.29.0 dan) Sahifa ustida qoladigan, modal bölmagan panel (4.152): video qönğiroq, AI yordamçi, kalkulyator, tezkor eslatma — foydalanuvçi orqadagi sahifa bilan işlaşda davom etadi. Sarlavha qatoridan sudraladi (siçqonça, barmoq yoki tutqiç + strelkalar), pastki burçakdan ölçami özgaradi (Alt+strelka ham), yiğiladi (sarlavhaga ikki marta bosiş yoki tugma), yopiladi (Esc). Oyna ekrandan çiqib ketmaydi. Joylaşuv: end (standart, öng past) · start · top-end · inline (oqimda). - Qaçon: Iş davomida yonida turişi kerak bölgan vosita: qönğiroq, çat, AI yordamçi, kalkulyator. Foydalanuvçi panelni özi joylaştirmoqçi (sahifaning kerakli qismini yopmasin). - Qaçon emas: Javob talab qiladigan tasdiq → `dialog`; Yon tomondan çiqadigan tafsilot paneli → `sheet`; Bir amal tugmasi yonidagi qisqa ma'lumot → `popover` - Variantlar: data-placement=end|start|top-end|inline (standart end); data-resize=both|none (standart both) - Klaviatura: Strelkalar (tutqichda) — Oynani suradi; Shift bilan — 4 barobar; Alt + strelkalar (tutqichda) — Ölçamni özgartiradi; Home (tutqichda) — Boşlanğiç joyiga qaytaradi; Esc — Yopadi, fokus oçgan tugmaga - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-bg-surface-container-low, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-standard, --fx-elevation-4, --fx-elevation-5, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-scale-enter, --fx-popover-width, --fx-radius-nav, --fx-radius-overlay, --fx-size-icon-sm, --fx-size-topbar, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-z-overlay ```html

    Qönğiroq — Sardor Toʻxtayev · 04:12

    Mijoz: «Ğallaorol Agro» · Bitim: 12 500 000 söm

    Eslatma: narx böyiça çegirma söraydi, keyingi hafta şartnoma.

    Tutqiç fokusda: strelkalar — suriş, Alt+strelka — ölçam, Home — joyiga.

    ``` - Qilmang: Foydalanuvçi javobisiz davom eta olmaydigan narsani suzuvçi oynaga qöymang — dialog. - Qilmang: Bir paytda ikkitadan köp suzuvçi oyna oçmang — bir-birini yopadi. - Qilmang: Tutqiçsiz qoldirmang — klaviatura bilan surib bölmaydi. ## Iş holati (`flow`, beta, 0.22.0 dan) Vazifa holati doirasi: backlog (punktir), qilinadi (çegara), jarayonda (yarmi), tekşiruvda (¾), bajarildi (töla + ✓), bekor (xira + ×). Şakl va rang birga. Ustuvorlik rangi (Ustoz 21.10): data-priority="urgent|high|normal|low" — şakl holatni, rang ustuvorlikni bildiradi (bajarilgan va bekor — öz rangida). Haqiqiy foiz: --fx-flow-value. Yorliq .fx-flow-tag — doira + söz kapsulada, data-variant="soft" — rangli oç fon. - Qaçon: Vazifa, sprint, reliz holati röyxat va doskada. - Qaçon emas: Tölov yoki umumiy holat söz bilan → `status` - Variantlar: data-state=backlog|todo|progress|review|done|cancelled|paused|blocked|failed|live|update (standart todo); data-size=md|lg (standart md); data-priority=urgent|high|normal|low (standart —); data-tone=status (standart —); data-size=lg (standart sm); data-shape=icon (standart —) - Tokenlar: --fx-bg-brand-solid, --fx-bg-static-light, --fx-bg-surface, --fx-border-color-default, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-fg-error, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-flow-value, --fx-font-size-md, --fx-font-size-xs, --fx-font-weight-medium, --fx-knob-pill, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-pill, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Şoşilinç
    Yuqori
    Oddiy
    Past
    RejadaNavbatdaJarayondaPauzaKörib çiqilmoqdaBajarildiBekor
    Şoşilinç · 80 %Yuqori · 46 %Oddiy · 25 %Past · 10 %
    TösiqXatoJonliYangilaniş bor
    QoralamaJarayondaKörib çiqilmoqdaBajarildi
    PauzaTösiqQisman
    ``` - Qilmang: Holatni faqat rang bilan bildirmang — içki şakl ham özgaradi. ## Fokus, holat qatlami va kontrast (`focus`, beta, 0.28.0 dan) Özaro ta'sir poydevori. Fokus halqasi oilasi (4.10): taşqi (standart), içki (data-ring="inset" — qirqiladigan konteyner, jadval katagi), ikki qavatli halo (rangli/qoronği fonda ham körinadi) va contrast (halqa matn rangida — brend banner, rels ustida); bitta elementga fx-focus-ring yoki butun blokka fx-focus-scope. Holat qatlami (4.17): fx-state — yuzada bitta qoplama, hover 8 % · fokus 10 % · bosiş 10 % · sudraş 16 %, rangi matn rangidan (har mavzu va fonda özi töğri). Yuqori kontrast (4.15): prefers-contrast: more yoki data-fx-contrast="more" — çegaralar va xira matn töqlaşadi, fokus halqasi qalinlaşadi, havolalar tagiga çiziladi. - Qaçon: Yangi interaktiv yuza (röyxat bandi, karta, chip) — hover/bosiş rangini tanlaş örniga fx-state. Rangli yoki rasmli fon ustidagi tugma va havolalar — data-ring="halo" yoki "contrast". Mijoz loyihasida «yuqori kontrast» sozlamasi — data-fx-contrast. - Qaçon emas: Tugmaning öz hover rangi yetarli → `button`; Tanlov guruhi (bir neçtadan biri) → `togglegroup` - Variantlar: data-ring=outside|inset|halo|contrast (standart outside); data-state-layer=current|brand|selected (standart current); data-fx-contrast=system|more|normal (standart system) - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-color-neutral-200, --fx-color-neutral-300, --fx-color-neutral-500, --fx-color-neutral-700, --fx-color-neutral-800, --fx-ease-standard, --fx-focus-halo, --fx-focus-inset, --fx-focus-offset, --fx-knob-outline, --fx-motion-fast, --fx-state-drag, --fx-state-focus, --fx-state-hover, --fx-state-press, --fx-text-brand ```html
    Tarifingiz 3 kundan keyin tugaydi. Uzaytiriş

    Yuqori kontrast: xira matn töqlaşgan, havola tagiga çizilgan.

    ``` - Qilmang: outline: none qoʻyib fokusni yashirmang — halqa turini (data-ring) almashtiring. - Qilmang: Holat qatlami rangini qölda tanlamang — u matn rangidan oladi; brend tusi kerak bölsa data-state-layer="brand". - Qilmang: Holatni faqat qoplama bilan bildirmang: tanlangan bandda aria-selected / aria-current ham bölsin. - Qilmang: Kontrast rejimini «qoronği rejim» bilan almaştirmang — ular alohida öqlar. ## Fokusli kartalar (`focuscards`, beta, 0.29.0 dan) Portfolio, loyiha yoki jamoa töri: bitta karta ustiga borilganda (yoki klaviatura bilan fokuslanganda) qolgan kartalar xiralaşadi va biroz kiçrayadi — köz bitta kartaga tuşadi (Aceternity Focus Cards). Sarlavha va izoh kartaning pastidan qoronği gradient ustida çiqadi; hover yöq qurilmada (telefon) sarlavha doim körinadi. Faqat CSS (:has). data-caption="always" — sarlavha doim körinadi; data-ratio="wide" — 4:3 kartalar; data-size — ustun kengligi. - Qaçon: Landing sahifadagi portfolio yoki «Bizning loyihalar» töri. Jamoa a'zolari, kurslar yoki mahsulot kategoriyalari — rasm asosiy bölganda. - Qaçon emas: Rasmlar galereyasi (kattalaştirib köriş bilan) → `gallery`; Matnli xususiyatlar töri → `features` - Variantlar: data-caption=hover|always (standart hover); data-ratio=portrait|wide (standart portrait); data-size=sm|md|lg (standart md) - Klaviatura: Tab — Keyingi karta; qolganlari xiralaşadi, sarlavha çiqadi; Enter — Kartani oçadi - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-bg-static-light, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-emphasized, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-semibold, --fx-line-height-tight, --fx-motion-base, --fx-motion-press, --fx-motion-shift-md, --fx-motion-slow, --fx-radius-surface, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-4 ```html ``` - Qilmang: Kartalarda muhim amal tugmalarini yaşirmang — sarlavha butun karta havolasi bölsin. - Qilmang: Ilova içidagi röyxat yoki jadval örniga işlatmang — bu körgazma (portfolio, landing) uçun. - Qilmang: Rasm ustidagi matnni gradientsiz qoldirmang — kontrast yöqoladi. ## Formatlaş (fxFormat) (`format`, beta, 0.29.0 dan) Qiymatni özbekça körinişga keltiradigan yagona funksiya (4.23): son (1 250 000,5), pul («1 250 000 söm», USD/EUR/RUB), foiz («12 %»), bayt («1,2 MB»), birlik («3 dona»), ixçam son («1,3 mln», «12 ming»), sana («17 oktyabr 2026», «17.10.2026»), vaqt va nisbiy vaqt («5 daqiqa oldin», «keça»). Minglar — bölinmas böş joy, kasr — vergul, manfiy — «−». Brauzer ICU'siga tayanmaydi — hamma joyda bir xil. HTML'da data-fx-format (matnni yozadi, value/datetime özgarsa yangilaydi) yoki JS'da window.fxFormat(qiymat, tur, parametrlar). - Qaçon: Jadval, karta, KPI'da pul, foiz, fayl hajmi, miqdor körsatiş. Server xom son yuboradi — körinişni frontend bir xil qoidada beradi. - Qaçon emas: Pul kiritiş maydoni (yozayotganda formatlaş) → `number`; Har daqiqa yangilanadigan «5 daqiqa oldin» → `reltime`; Özgariş foizi strelka bilan → `delta` - Variantlar: data-type=number|currency|percent|bytes|unit|compact|date|time|datetime|relative (standart number); data-weight=inherit|bold (standart inherit) - Tokenlar: --fx-border-color-strong, --fx-fg-error, --fx-fg-success, --fx-font-weight-bold, --fx-text-tertiary ```html
    Şartnoma summasi
    12500000
    Tölangan
    0.64
    Oylik ösiş
    0.034
    Biriktirilgan fayl
    1258291
    Ombordagi qoldiq
    1240
    Yillik aylanma
    4380000000
    Şartnoma sanasi
    Oxirgi faollik
    ``` - Qilmang: Raqamni qölda toLocaleString() bilan formatlamang — brauzerlarda turliça çiqadi; fxFormat işlating. - Qilmang: Nisbiy vaqtni doimiy yangilanadigan joyda işlatmang — u bir marta yoziladi; jonli soat uçun reltime. - Qilmang: Foizni rang bilan yolğiz bildirmang — data-sign «+» / «−» belgisini ham yozadi. ## Rasmlar töri (`gallery`, beta, 0.24.0 dan) Rasmlar töri: avto ustunlar yoki qotirilgan (data-cols 2–4), «mosaic» — birinçi rasm katta, oxirgisida «+N». Elementlar havola yoki tugma; lightbox bilan data-fx-lightbox-target orqali ulanadi (bosilsa katta körinadi). - Qaçon: Köp rasmni bir qaraşda körsatiş va bosilganda kattalaştiriş kerak bölganda. - Qaçon emas: Rasmlar ketma-ket bittadan → `carousel`; Yagona rasm → `image` - Variantlar: data-cols=auto|2|3|4|6|8 (standart auto); data-variant=grid|mosaic (standart grid); data-ratio=1/1|4/3|16/9 (standart 1/1); data-size=md|sm (standart md) - Klaviatura: Tab — Rasmlar orasida; Enter — Lightbox'da oçadi - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-xl, --fx-font-weight-semibold, --fx-motion-slow, --fx-radius-badge, --fx-radius-control, --fx-space-1, --fx-space-12, --fx-space-2, --fx-text-on-brand ```html
    • Bozor
    • Ombor
    • Ofis
    • Studiya
    • Sex
    • Dökon
    • Bozor
    • Ombor
    • Ofis
    • Studiya
    • Sex
    • Dökon
    • Bozor
    • Ombor
    • Ofis
    • Studiya
    ``` - Qilmang: Har xil nisbatdagi rasmlarni bitta qatorga majburan qirqmang — nisbatni data-ratio bilan birlaştiring. - Qilmang: Havolasiz rasmni zoom-in kursor bilan qoldirmang. ## Gantt (`gantt`, beta, 0.24.0 dan) Loyiha va yöl xaritasini vaqt öqida körsatadi: çapda nomlar ustuni, öngda oy va kun (yoki hafta) sarlavhasi — ikkalasi aylantirilganda qotadi; dam oliş kunlari soyasi, «bugun» çiziği, plaşkalar içida bajarilgan uluş, bosqiç (romb), guruh xulosasi, boğliqlik öqlari (data-after) va keçikkan plaşka («Keçikdi» yozuvi bilan). Plaşkalar tugma: Tab/←→↑↓ bilan yuriladi, fokus va hover'da sana oraliği va uluş maslahati çiqadi. Joylaşuvni xulq sanalardan hisoblaydi (data-start, data-end). Xulq foxui.js'da (data-fx-gantt). - Qaçon: Loyiha bosqiçlari, muddatlar va boğliqliklarni vaqt böyiça köriş (reja, yöl xaritasi, işlab çiqariş grafigi). - Qaçon emas: Uçraşuv va hodisalarni haftalik/oylik köriş → `schedule`; Faoliyat tarixi (nima böldi) → `timeline`; Oddiy vazifalar röyxati → `row` - Variantlar: data-scale=day|week (standart day); data-tone=brand|blue|green|coral|purple|yellow (standart brand) - Klaviatura: Tab — Plaşkaga / bosqiçga fokus; maslahat çiqadi; ← → — Qatordagi qöşni plaşka; ↑ ↓ — Qöşni qatordagi eng yaqin plaşka; Esc — Maslahatni yopadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-error-solid, --fx-bg-error-subtle, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-gantt-height, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-badge, --fx-radius-control, --fx-radius-surface, --fx-shadow-md, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-6, --fx-space-8, --fx-text-disabled, --fx-text-error, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-brand, --fx-viz-ink ```html
    Vazifa
    Loyihalaş
    Texnik topşiriq
    Smeta
    Çizmalar
    Quriliş
    Poydevor
    Devor va pardozlaş
    Birinçi bosqiç qabuli
    Işga tuşiriş
    Sinov va tuzatiş
    Reliz
    Yönaliş
    Mahsulot
    Dizayn tizimi
    Mobil ilova
    Ommaviy sinov
    ``` - Qilmang: Keçikişni faqat qizil rang bilan bermang — «Keçikdi» yozuvi va qalin çegara bor. - Qilmang: Bosqiçni (romb) uzoq iş uçun işlatmang — u bir kunlik voqea; iş plaşka böladi. - Qilmang: Boğliqlik öqlarini hamma plaşkaga çizmang — faqat haqiqiy tösiqlarga, aks holda çalkaşadi. - Qilmang: Gantt'ni telefon ekranida asosiy köriniş qilmang — ixçam röyxat yoki jadval muqobilini bering. - Qilmang: Hafta masştabida bir kunlik tafsilotni kutmang — kun masştabiga öting. ## Globus va nuqtali xarita (`globe`, beta, 0.29.0 dan) Nuqtalardan iborat globus yoki tekis xarita (4.79): şaharlar — marker, boğlanişlar — yoy (globusda katta aylana böylab), ustidan yönaliş bölagi yuguradi. Ma'lumot sahifada matn: içidagi röyxat (data-lat, data-lon, data-to="Şahar, …") — canvas faqat köriniş. Globus sekin aylanadi, hover/fokusda töxtaydi, sudrab yoki ← → ↑ ↓ bilan aylantiriladi; data-view="map" — tekis 2:1 xarita. Quruqlik konturi qöpol (bezak darajasida) — aniq geografiya uçun emas. data-label="hover" (20.10): köp markerda nom faqat kursor yaqinlaşganda çiqadi, röyxat körinişdan yaşirinadi (ekran öquvçida qoladi). Sahna JS bilan qöşilgunça joyi oldindan band — sahifa siljimaydi (CLS). - Qaçon: Landing sahifasida «qayerlarda işlaymiz», filiallar va eksport yönalişlari. Yetkazib beriş yoki hamkorlar tarmoğini umumiy körsatiş. - Qaçon emas: Aniq manzil, yöl yoki hudud (interaktiv xarita) → `card`; Mamlakatlar böyiça raqamlar → `chart` - Variantlar: data-view=map (standart globe); data-tone=accent (standart brand); data-list=hidden (standart visible); data-label=hover (standart list) - Klaviatura: ← → ↑ ↓ — Globusni aylantiradi (10°); Tab — Globusga fokus — avtomatik aylaniş töxtaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-page, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-focus, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-circle, --fx-radius-control, --fx-shadow-md, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-accent ```html
    • Toşkent — boş ofis
    • Moskva — 2 ombor
    • Dubay — hamkor
    • Istanbul — import
    • Seul — yetkazib beruvçi
    Yetkazib beriş tarmoği · 2026
    • Toşkent — boş ofis
    • Moskva — 2 ombor
    • Dubay — hamkor
    • Istanbul — import
    • Seul — yetkazib beruvçi
    Eksport: 5 mamlakat
    ``` - Qilmang: Aniq çegaralar, hudud yoki masofani körsatiş uçun işlatmang — kontur qöpol, bu bezak va umumiy manzara. - Qilmang: 10 tadan köp yoy çizmang — globus çalkaşadi. - Qilmang: Şaharlar röyxatini olib taşlamang — u ma'lumotning matn şakli (data-list="hidden" bilan faqat közdan yaşiring). ## Haqiqiy globus (`globus`, beta, 0.98.0 dan) Haqiqiy Yer xaritasi globus körinişida: nuqtalar (şahar, bekat, filial) va ular orasidagi katta aylana yoylari — yöl, karvon, yetkaziş marşruti. Sekin aylanadi, tegilganda töxtaydi; ⤢ bilan butun ekran, Esc bilan qaytadi; telefonda kvadrat. Okean, yöl va nuqta ranglari tokenlardan — rang mavzusi va qoronği rejim almaşsa xarita ham almaşadi. Xarita kutubxonasi (MapLibre GL, BSD) loyihaning özida: foxui/globus faqat uzatilgan maplibregl bilan işlaydi. Lazy rejim: avval yengil joy egasi, bosilganda yuklanadi — sahifa tezligi saqlanadi. ⤢ tugmasi — fx-btn: npx foxui sync uni özi qöşadi; CSS'ni qölda alohida ulasangiz, button.css ham kerak. Tiplar — globus.d.mts. Jonli namuna (Buyuk ipak yöli): /namuna/globus/. - Qaçon: Bir neça mamlakat yoki qit'aga yoyilgan nuqtalar va ular orasidagi yöl: tarixiy marşrut, yetkaziş, filiallar. Ta'lim va hikoya sahifasi — foydalanuvçi globusni özi aylantirib, nuqtaga uçib körsin. - Qaçon emas: Raqamlarni mintaqa böyiça taqqoslaş → `chart`; Tugun va boğlanişlar (xaritasiz) → `graph` - Klaviatura: Esc — Butun ekran oynasini yopadi, fokus oçgan tugmaga qaytadi; Strelkalar, + − — Xaritani suriş va yaqinlaştiriş (MapLibre) - Tokenlar: --fx-bg-surface, --fx-duration-pulse, --fx-ease-standard, --fx-radius-circle, --fx-radius-surface, --fx-shadow-lg, --fx-space-12, --fx-space-3, --fx-space-4, --fx-viz-map-space, --fx-viz-map-water, --fx-z-modal ```html
    ``` - Qilmang: Xarita kutubxonasini sahifa oçilişida yuklamang, agar globus birinçi ekranda bölmasa — globusLazy() ni işlating. - Qilmang: Okean yoki nuqta rangini qölda yozmang — viz.map-* tokenlari rang mavzusi va rejim bilan özi almaşadi. - Qilmang: Mualliflik belgisini (OpenStreetMap, OpenFreeMap) yaşirmang — litsenziya talabi; u yiğiq ⓘ bölib turadi. - Qilmang: Faqat bitta manzil körsatiş uçun globus işlatmang — oddiy xarita yoki manzil matni yetarli. ## Gradient tanlagiç (`gradientpicker`, beta, 0.29.0 dan) Gradient yasaş (4.107): banner, kartoçka foni, prezentatsiya sarlavhasi uçun. Töxtaş nuqtalari yölakda — bosib qöşiladi (şu joydagi rang bilan), sudraladi yoki klaviaturada suriladi (← →, Shift — 10 %), Delete öçiradi (kamida 2 ta). Tanlangan nuqta rangi — tizimning rang tanlagiçi, örni — son maydoni. Çiziqli / radial, burçak — knob (data-type="angle"). Natija — tayyor CSS matni (nusxa oliş uçun) va yaşirin input. - Qaçon: Konstruktor / CMS'da banner yoki kartoçka foni. Mavzu muharririda brend gradienti. - Qaçon emas: Bitta rang tanlaş → `colorpicker`; Tayyor ranglardan tanlaş → `swatch` - Variantlar: data-type=linear|radial (standart linear) - Klaviatura: Tab — Tanlangan nuqta → rang → örin → tur → burçak; ← → / ↑ ↓ — Nuqtani 1 % suradi (Shift — 10 %); Home / End — Nuqtani 0 / 100 % ga; Delete / Backspace — Nuqtani öçiradi (kamida 2 ta qoladi) - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-field, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-xs, --fx-motion-instant, --fx-motion-press, --fx-popover-width, --fx-radius-badge, --fx-radius-control, --fx-shadow-md, --fx-size-checkbox, --fx-space-1, --fx-space-12, --fx-space-3, --fx-space-6, --fx-text-primary, --fx-text-tertiary ```html

    Nuqta: sudrang yoki ← →, Delete — öçiriş (kamida 2 ta).

    ``` - Qilmang: Matn ostidagi gradientni kontrastsiz qoldirmang — eng oç nuqtada ham matn öqilsin. - Qilmang: Interfeys holatlarini (xato, muvaffaqiyat) gradient bilan bildirmang — tokenlar bor. - Qilmang: 5 tadan köp nuqta qöyişni tavsiya qilmang — «kamalak» köriniş çiqadi. ## Graf kanvasi (oqim) (`graph`, beta, 0.1.0 dan) Tugun va çiziqlardan oqim diagrammasi (Make.com uslubi): har tugun — yumaloq karta, çapda xizmat belgisi pastel doirada, tur, nima va kim; çiziq — egri, strelkali, örtasida holat nuqtasi. Soğ zanjir sokin kulrang, uzilgani qizil; dalilsiz tugun va uzuq çiziq — qizil punktir; zanjir davomi yöq — qizil uzuq oxir va «?». Joylaştiriş ma'lumotdan özi (templates/graf.mjs — qatlamli, taşqi kutubxonasiz), zoom va suriş bor; tor joyda (telefon) tik röyxatga ötadi. Mister Fox va Fox OS sörovi (FoxOS «Oqimlar», 21.10); keyin WBS daraxti va brend arxitekturasi şu yadrodan. - Qaçon: Funksiya oqimi: trigger → amallar → natija, har tugun dalil bilan (uzilgan joyni topiş). Avtomatlaştiriş, integratsiya va iş jarayoni sxemasi. - Qaçon emas: Vaqt böyiça qadamlar (bir yöl, tarmoqsiz) → `timeline`; Bosqiçlar böyiça kartalar → `board` - Variantlar: data-tone=blue|yellow|pink|coral|green|purple (standart blue); data-state=ok|warn|error (standart ok) - Klaviatura: Tab — Tugundan tugunga (körinmasa — körinişga suriladi); Enter / Space — Tugunni tanlaydi (fx-graph:select); Ctrl/⌘ + gʻildirak — Zoom - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-circle, --fx-radius-control, --fx-radius-pill, --fx-radius-surface, --fx-size-icon-md, --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-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    1. 1-qadam
    2. 2-qadam
    3. 3-qadam
      • Zanjir davomi yöq
    ``` - Qilmang: Tugun joyini qölda yozmang — graf.mjs ma'lumotdan joylaştiradi; özgarsa, çiziqlar ham özi yangilanadi. - Qilmang: Soğ çiziqlarni rang-barang qilmang — rang faqat muammoga (diqqat va uziliş yaqqol körinsin). - Qilmang: Holatni faqat rang bilan bermang — nuqta şakli (● ▲ ◆) va ekran öquvçi matni bor. ## Kartalar töri (`gridlist`, beta, 0.29.0 dan) Kartalar töri (4.138, GridList): fayl menejeri, galereya, şablon tanlaş. Klaviaturada ← ↑ → ↓ joylaşuv böyiça yuradi (ustunlar soni ekran eniga qarab özgarsa ham), Home/End; Böşliq — tanlaş, Shift+strelka — oraliq, Ctrl+A — hammasi, Esc — tozalaş. Enter — karta amallariga kiradi (Oçiş, Yuklab oliş; Tab ular orasida, Esc qaytaradi), amali yöq kartada — «oçiş» hodisasi. data-select="multiple|single|none". Tanlangan karta — brend çegara va ✓ doira; holat yonidagi «N ta tanlandi» qatorida. - Qaçon: Fayl menejeri, media galereya, hujjatlar papkasi. Rasmli şablon yoki mahsulot tanlaş. - Qaçon emas: Köp ustunli ma'lumot → `datagrid`; Faqat körsatiladigan kartalar (tanlovsiz) → `card`; Rasm köriş (kattalaştiriş) → `lightbox` - Variantlar: data-select=multiple|single|none (standart multiple); data-size=sm|md|lg (standart md) - Klaviatura: ← → ↑ ↓ — Qöşni karta (joylaşuv böyiça); Home / End — Birinçi / oxirgi karta; Boʻshliq — Tanlaş / bekor qiliş; Shift + strelka — Tanlovni kengaytiriş (köp tanlov); Ctrl+A — Hammasini tanlaş; Esc — Tanlovni tozalaş; amallardan kartaga qaytiş; Enter — Karta amallariga kiriş (yöq bölsa — oçiş) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-bold, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-surface, --fx-shadow-sm, --fx-size-checkbox, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    • Şartnoma №045 — Samarqand Savdo.pdf1,2 MB · 17-okt
    • 3-çorak hisoboti.xlsx840 KB · 15-okt
    • Logo — yangi variant.png312 KB · 14-okt
    • Tijoriy taklif — Tong Maktabi.docx96 KB · 12-okt
    • Prays-list, oktyabr.pdf2,4 MB · 10-okt
    • Mahsulot taqdimoti.mp448 MB · 2-okt
    • Oddiy1 sahifa
    • Narxlar jadvali2 sahifa
    • Taqdimot8 slayd
    • ŞartnomaPro tarifda
    ``` - Qilmang: Har kartaga 3 tadan köp amal qöymang — qolganini «…» menyusiga. - Qilmang: Kartani faqat rang bilan tanlangan qilmang — ✓ belgisi va «N ta tanlandi» matni bor. - Qilmang: Jadvalga xos ma'lumotni (köp ustun, saralaş) kartaga solmang — datagrid yoki table. ## Sarlavha (`heading`, beta, 0.22.0 dan) Sarlavha uslubi: display, h1–h4 vizual darajalari. Vizual daraja semantik tegga boğliq emas —

    mumkin. Ohang, vazn, qisqartiriş. - Qaçon: Sahifa, bölim va karta sarlavhalari. - Qaçon emas: Oddiy matn yoki izoh → `text`; Sahifa boşi (sarlavha + amallar) → `page-header` - Variantlar: data-size=display|h1|h2|h3|h4 (standart h2); data-tone=secondary|brand (standart primary); data-weight=regular|medium (standart semibold); data-clamp=2|3 (standart none) - Tokenlar: --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-md, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-xl, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-text-brand, --fx-text-primary, --fx-text-secondary ```html

    Mijozlar bazasi

    Bugungi arizalar

    Keça (semantik h2, vizual h4)

    Juda uzun sarlavha bir qatorga qisqartiriladi

    ``` - Qilmang: Tegni vizual ölçam uçun tanlamang: h1’dan h4’ga sakramang, darajani saqlang va data-size bilan kiçraytiring. - Qilmang: Sarlavha örniga qalin

    yozmang. ## Faollik xaritasi (`heatmap`, beta, 0.24.0 dan) GitHub uslubidagi faollik xaritasi: har kun — bitta katak, ustunlar haftalar (Duşanbadan), 5 daraja (0–4) viz-brand soyalarida, tepada oy, çapda hafta kunlari, pastda Kam…Köp şkalasi. Boşlaniş sanasi va kunlik qiymatlar (data-start, data-values) berilsa xulq kataklarni quradi; har katak nomi va qiymati matnda (aria-label, title) — daraja rangdan taşqari ham aytiladi. Xulq foxui.js'da (data-fx-heatmap). - Qaçon: Uzoq davr böyiça kunlik faollikni bir qaraşda körsatiş (vazifalar, maşqlar, hissalar, taşriflar). - Qaçon emas: Aniq qiymatlar trendi → `chart`; Hodisalarni sana böyiça körsatiş → `schedule` - Variantlar: data-size=md|sm|lg (standart md); data-level=0|1|2|3|4 (standart 0) - Tokenlar: --fx-bg-surface, --fx-border-color-strong, --fx-border-width-default, --fx-font-size-xs, --fx-radius-badge, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-secondary, --fx-text-tertiary, --fx-viz-brand, --fx-viz-track ```html

    ``` - Qilmang: Darajani faqat rang bilan qoldirmang — har katakda sana va qiymat matni bor, ma'lumot jadvali yoki röyxat muqobil bölsin. - Qilmang: 5 dan köp daraja qilmang — soyalar ajralmay qoladi. - Qilmang: Bir neça yildan köp davrni bitta xaritaga joylamang — yil böyiça böling. - Qilmang: Nol va ma'lumot yöq kunni aralaştirmang — ma'lumot yöq kun uçun katakni qoldirmang, 0 qiymat bering. ## «Foydali böldimi?» vidjeti (`helpful`, beta, 0.29.0 dan) Sahifa yoki javob sifatini biliş uçun kiçik fikr vidjeti (4.199): savol va «Ha / Yöq» tugmalari (aria-pressed, ikon + söz). Tanlovdan keyin forma oçiladi — «Yöq» uçun sabab chip'lari (Tuşunarsiz, Eskirgan, Kerakli narsa yöq, Xato bor) va izoh, «Ha» uçun ixtiyoriy izoh («Nima yoqdi?»); «Yuboriş» yoki «Ötkazib yuboriş»dan keyin rahmat holati va «Fikrni özgartiriş». Xulq (data-fx-helpful): hodisa «fx-helpful» {id, value, reasons, comment}; javob localStorage'da «fx-helpful:» — qayta kirganda yana söralmaydi (data-demo — saqlamaydi); Esc formani yopib, fokusni tugmaga qaytaradi. data-variant: bar (standart), card, inline (AI javobi ostida ixçam). - Qaçon: Hujjat, yordam markazi va bilim bazasi sahifalari oxirida. AI javobi ostida (inline) — sifatni baholaş. - Qaçon emas: Batafsil sörovnoma → `questionnaire`; Yulduzli baho (mahsulot, xizmat) → `rating`; AI xabari amallari (nusxa, qayta yaratiş) → `msgactions` - Variantlar: data-variant=bar|card|inline (standart bar) - Klaviatura: Enter, Space — «Ha» yoki «Yöq» — formani oçadi; Space (chip'da) — Sababni belgilaydi; Esc (formada) — Formani yopadi, fokus tugmaga qaytadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-subtle, --fx-bg-success-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-fg-success, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-pill, --fx-radius-surface, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Bu sahifa foydali böldimi?

    Javob foydali böldimi?

    ``` - Qilmang: Har abzats ostiga qöymang — sahifa yoki javob oxirida bitta. - Qilmang: «Yöq»dan keyin majburiy izoh söramang — sabab chip'lari yetadi, izoh ixtiyoriy. - Qilmang: Rahmat holatisiz qoldirmang — bosilgani qabul qilinganini körsin. - Qilmang: Izohdan şaxsiy ma'lumot yiğmang — buni oçiq ayting. ## Hero bölimi (`hero`, beta, 0.28.0 dan) Landingning birinçi ekrani (4.170): yangilik tabletkasi (eyebrow), katta sarlavha (urğu söz mavzu gradientida yoki aylanuvçi söz — textfx), bir-ikki gaplik izoh, ikki tugma, işonç qatori (✓ belgili qisqa da'volar) va katta media (skrinşot, terminal, jonli UI). data-layout: center (standart) yoki split (matn çapda, media öngda). Orqa fon — içidagi .fx-bg (katak/nuqta + mavzu nuri). Kirişda bloklar poğonali kötariladi; data-tilt bilan media scroll paytida egiklikdan tikka turadi (qöllamaydigan brauzerda — tekis). Sarlavha ölçami ekran eniga qarab silliq ösadi. - Qaçon: Landing yoki mahsulot sahifasining birinçi ekrani. Yangi relizni e'lon qiliş sahifasi (eyebrow + media). - Qaçon emas: Ilova içidagi sahifa sarlavhasi → `page-header`; Sahifa oxiridagi çaqiriq → `cta` - Variantlar: data-layout=split (standart center); data-size=compact (standart default); data-tilt=on (standart off) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-coral, --fx-bg-category-pink, --fx-bg-page, --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-dialog-width, --fx-duration-stagger, --fx-ease-emphasized, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-md, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xl, --fx-font-weight-semibold, --fx-knob-motion, --fx-motion-shift-lg, --fx-motion-slower, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    YangiEffektlar va marketing naqşlari — nima yangi

    Dizayn tizimi — özbekça, töğridan-töğri kodda

    Komponentlar, tokenlar va qoidalar bitta paketda. Mavzu va uslubni bitta atribut bilan tanlaysiz, yangilaniş taklif bölib keladi, AI agent esa qoidalarni MCP orqali özi oladi.

    Bepul boşlaşHujjatlarni köriş
    • Oçiq yadro npm'da
    • Figma şart emas
    • 1 litsenziya — 3 qurilma

    ~/dökon-sayti

    npx foxui initMavzu: amethyst · Uslub: AylanaTayyor — komponentlar va qoidalar ulandi
    ``` - Qilmang: Hero blokiga uçtadan ortiq tugma qöymang — bitta asosiy, bitta ikkinçi darajali. - Qilmang: Sarlavhani uzun qilmang — 6–10 söz; tafsilot izohda. - Qilmang: Bir hero blokida aylanuvçi söz, yozuv maşinkasi va çegara nurini birga işlatmang — bitta urğu. - Qilmang: Media örniga bezak rasmini qöymang — mahsulotning özini körsating. ## Gologramma karta (`holo`, experimental, 0.54.0 dan) A'zolik, sodiqlik va sovğa kartasi, çipta yoki kolleksiya uçun «jonli» karta: kursor ortidan 3D egiladi (mavjud xulq data-fx-tilt), yuzasida kamalak folga (pastel tokenlardan) va kursor ortidagi nur, ingiçka içki çegara va naqş (panjara, çiziq, nuqta). Fon — mavzuning brend rangi (standart), töq yoki yoruğ; şakl — bank kartasi (1,586) yoki çipta (data-shape="tall"); rasm bilan — .fx-holo__media. Telefonda va harakat kamaytirilganda egilmaydi, folga sekin suzadi (heroui.pro Holo Card'dan ilhom, kalibr — FoxUI). - Qaçon: A'zolik/sodiqlik kartasi, sovğa sertifikati, tadbir çiptasi, yutuq yoki kolleksiya kartasi. Landing sahifasidagi «premium» taklif (Founders, VIP). - Qaçon emas: Oddiy mazmunli karta → `card`; Egiluvçi har qanday karta (gologrammasiz) → `tilt` - Variantlar: data-variant=dark|light (standart brand); data-pattern=lines|dots (standart lattice); data-shape=tall (standart card) - Tokenlar: --fx-border-width-default, --fx-color-brand-600, --fx-color-brand-900, --fx-color-neutral-200, --fx-color-neutral-25, --fx-color-neutral-700, --fx-color-neutral-800, --fx-color-neutral-950, --fx-color-pastel-blue, --fx-color-pastel-green, --fx-color-pastel-pink, --fx-color-pastel-purple, --fx-color-pastel-yellow, --fx-color-white, --fx-duration-pulse, --fx-ease-standard, --fx-font-adjust-display, --fx-font-adjust-mono, --fx-font-family-display, --fx-font-family-mono, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-bold, --fx-font-weight-semibold, --fx-motion-base, --fx-radius-control, --fx-radius-overlay, --fx-radius-tag, --fx-shadow-lg, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-tilt-gx, --fx-tilt-gy ```html
    Çorsu ClubOltin
    A'zoAziz Karimov0427 1985
    Sovğa kartasi500 000
    Amal qiladi31.12.2026GC-8841
    IT Park FestVIP
    24-noyabr · 18:00ToşkentA-12
    ``` - Qilmang: Har sahifaga qöymang — bu «wow» element: profil, a'zolik yoki sovğa ekranida bitta. - Qilmang: Karta raqami va muddatini faqat rang bilan ajratmang — yorliq yozing. - Qilmang: Ustiga uzun matn yozmang: nom, daraja, egasi va raqam yetarli. ## Hover karta (`hovercard`, beta, 0.28.0 dan) Ism, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi. Siçqonça va klaviatura fokusida oçiladi, karta ustida turganda yopilmaydi, Esc yopadi; ekran çetiga qarab nişon ostida yoki tepasida joylaşadi. - Qaçon: Röyxat yoki matndagi odam, kompaniya, bitim nomi ustida qisqa tafsilot — sahifadan çiqmasdan. - Qaçon emas: Bir qator izoh → `tip`; Bosilganda oçiladigan, amal bor qatlam → `popover` - Variantlar: data-side=bottom|top (standart bottom) - Klaviatura: Tab (fokus) — Qisqa keçikişdan keyin karta oçiladi; Esc — Kartani yopadi - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-ease-enter, --fx-ease-exit, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-shift-sm, --fx-popover-width, --fx-radius-overlay, --fx-shadow-lg, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Mas'ul: Aziz Karimov · bitim №214

    AK

    Aziz Karimov

    Savdo menejeri · Toşkent filiali

    Faol bitimlar: 12 ta, bu oy yopilgan — 5 ta. Oxirgi qönğiroq bugun 11:20 da.

    +998 90 123 45 67aziz@savdo.uz
    ``` - Qilmang: Muhim amal yoki ma'lumotni faqat hover kartaga qöymang — telefonda hover yöq; nişon bosilganda töliq sahifa oçilsin. - Qilmang: Kartaga forma va köp tugma joylamang — bu oldindan köriş; amal kerak bölsa popover yoki dialog. - Qilmang: Keçikişni olib taşlamang — siçqonça ötib ketganda karta miltillamasin. ## Ikon (`icon`, beta, 0.22.0 dan) Sprite ikoni uçun öram: ölçam (sm/md/lg/xl/em), ohang va töldirilgan holat. ; rang matndan olinadi. Optik sozlamalar (4.21): qalinlik data-weight light/regular/bold (yoki --fx-icon-stroke; ota blokda data-icon-weight) — çiziqli ikonlar uçun, viewBox'dan qat'i nazar bir xil; data-grade high/low — töldirilgan ikonni qalinlaştiradi/ingiçkalaştiradi; kontur/töldirilgan juftligi data-fill="auto" — tanlangan holatda (aria-pressed, aria-selected, aria-current, aria-checked) töldirilgani körinadi. - Qaçon: Sprite (/) ikonini bir xil ölçam va rangda çiqariş. - Qaçon emas: Faqat ikonkali tugma → `button` - Variantlar: data-size=sm|md|lg|xl|em (standart md); data-tone=muted|secondary|brand|info|success|warning|error (standart inherit); data-weight=none|light|regular|bold|custom (standart none); data-grade=normal|high|low (standart normal); data-fill=off|auto|on (standart off) - Tokenlar: --fx-bg-surface, --fx-fg-error, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-size-icon-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-text-brand, --fx-text-secondary, --fx-text-tertiary ```html
    ``` - Qilmang: Ma'noli ikonni nomsiz qoldirmang: yolğiz bölsa role="img" + aria-label. - Qilmang: Ikonni rang bilan yolğiz ma'no qilmang — yoniga matn qöying. - Qilmang: data-weight'ni töldirilgan (Phosphor) ikonga bermang — u çiziqli ikonlar uçun; töldirilganga data-grade. ## Rasm (`image`, beta, 0.24.0 dan) Nisbati belgilangan rasm: yuklangunça xira joy (blur yoki kulrang), yuklanmasa zaxira holat («Rasm yuklanmadi»), ixtiyoriy imzo. Nisbat (CLS yöq) — data-ratio. Xulq ildizga data-state="loading|loaded|error" qöyadi. Xira joy rasmi — ildizda --fx-image-blur: url(...). - Qaçon: Rasm sahifada joy egallaşi, yuklanişi sekin bölişi yoki yuklanmay qolişi mumkin bölganda. - Qaçon emas: Odam yoki guruh surati → `avatar`; Bir neçta rasm töri → `gallery` - Variantlar: data-ratio=auto|1/1|4/3|3/2|16/9|3/4|9/16 (standart auto); data-placeholder=none|blur (standart none); data-fit=cover|contain (standart cover); data-size=auto|xs|sm|md (standart auto) - Tokenlar: --fx-bg-muted, --fx-ease-standard, --fx-font-size-sm, --fx-motion-base, --fx-motion-slow, --fx-radius-control, --fx-radius-surface, --fx-size-icon-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-4, --fx-text-secondary ```html
    Çorsu bozoridagi yangi mevalar rastasi
    Çorsu bozori, ertalabki savdo
    Ombor içki körinişi
    Rasm yuklanmadi
    Muqova
    Çorsu bozori — kiçik muqova (data-size="sm", 4/3)
    ``` - Qilmang: Alt matnni böş qoldirmang (bezak rasmida alt="" böladi, mazmunli rasmda ta'rif). - Qilmang: Nisbatsiz rasm qöymang — yuklanganda sahifa sakramasin. ## Rasm kesiş (`imagecrop`, beta, 0.28.0 dan) Avatar yoki muqova uçun rasmni kesiş: rasm ramka içida suriladi (siçqonça, barmoq, strelkalar) va kattalaştiriladi (slider, ğildirak, ikki barmoq, + −). Rasm ramkani doim töliq qoplaydi. Doira (avatar) yoki nisbat (1, 4/3, 3/4, 16/9); natija — canvas'dan JPEG Blob va kesiş törtburçagi. - Qaçon: Profil rasmi (doira), kurs/mahsulot muqovasi (16/9, 4/3) yuklaşda. Rasm aniq nisbatda bölişi şart bölgan joy (kartoçka, banner). - Qaçon emas: Rasmni faqat yuklaş, kesmasdan → `dropzone`; Rasmni kattalaştirib köriş → `lightbox` - Variantlar: data-shape=rect|circle (standart rect); data-aspect=1|4/3|3/4|16/9 (standart 1) - Klaviatura: ← → ↑ ↓ — Rasmni suradi (Shift — katta qadam); + / − — Kattalaştiradi / kiçraytiradi; 0 — Boşlanğiç holat; Tab — Slider va tugmalarga - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-bg-static-light, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-size-avatar-lg, --fx-size-icon-sm, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-disabled, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Suring yoki strelkalar bilan joylang; + va − — kattalaştiriş, 0 — boşlanğiç holat.

    ``` - Qilmang: Rasmni ramkadan çiqib böş joy qoldiradigan qilib surişga ruxsat bermang — xulq çegaralaydi. - Qilmang: Kesişni faqat siçqonça bilan qilmang — strelkalar va + − ham işlaydi, yordam matni bilan. - Qilmang: Boşqa domendagi (CORS'siz) rasmni kesmang — canvas ifloslanadi; avval yuklab, blob'dan oçing. ## CSV import (`import`, beta, 0.28.0 dan) CSV import ustasi (naqş, fx-wizard ustiga): 1) fayl — taşlaş yoki tanlaş (vergul yoki nuqtali vergul özi aniqlanadi), 2) ustunlarni maydonlarga moslaş — nomi böyiça avtomatik taxmin, majburiy maydonlar ✓ bilan, 3) tekşiruv — tayyor / xatoli / takror soni va xatolar jadvali (qator, maydon, qiymat, muammo), keyin import va natija (xatolar hisobotini CSV qilib yuklab oliş). - Qaçon: CRM'ga mijozlar, mahsulotlar yoki buyurtmalarni Excel/CSV'dan köçiriş. Boşqa tizimdan ötişda (migratsiya) bir martalik katta import. - Qaçon emas: Bitta fayl biriktiriş (rasm, hujjat) → `dropzone`; Bir neçta yozuvni qölda kiritiş → `datagrid` - Variantlar: data-state=done (standart —) - Klaviatura: Tab — Fayl tanlaş, moslaş select'lari va tugmalar böylab; Enter — Keyingi qadam (oxirgi qadamda — import) - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-dialog-width, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-lg, --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-control, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    1. Fayl
    2. Ustunlar
    3. Tekşiruv

    Mijozlar faylini yuklang

    Fayl yöqmi? yoki şablonni yuklab oling.

    ``` - Qilmang: Faylni moslaştirmasdan töğridan import qilmang — ustun nomlari har xil böladi, foydalanuvçi körib tasdiqlasin. - Qilmang: Xatoli qatorlar sababi bilan körsatilsin (qator raqami, maydon, qiymat, muammo) — «12 ta xato» degan umumiy son yetmaydi. - Qilmang: Butun importni bitta xato uçun töxtatmang — «xatolilarni ötkazib yuboriş» va xatolar hisobotini bering. ## Kiruvçilar (`inbox`, beta, 0.23.0 dan) Kiruvçi xabarlar röyxati (inbox): kun böyiça guruhlangan qatorlar — öqilmagan nuqta, ijroçi avatari, matn, vaqt. Siçqonça ustida vaqt örnini tezkor amallar (öqildi, keyinga qoldiriş, arxiv) egallaydi; sensorli qurilmada amallar doim körinadi. Klaviatura: E arxiv, H keyinga, U öqildi. PDP Task Inbox kalibrida. - Qaçon: Bildirişnomalar, vazifa kiruvçilari, ariza navbati — vaqt böyiça tartiblangan, har biri bilan amal qilinadigan röyxat. - Qaçon emas: Oddiy qiymatli röyxat (nom — qiymat) → `list`; Faoliyat tarixi (amal yöq) → `timeline` - Klaviatura: Tab — Qator havolasi va amallari; E — Fokusdagi qatorni arxivlaş; H — Keyinga qoldiriş; U — Öqilgan/öqilmagan - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-exit, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-exit-fast, --fx-motion-fast, --fx-motion-shift-md, --fx-radius-badge, --fx-radius-circle, --fx-radius-nav, --fx-size-status-dot, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Bugun

    Keça

    ``` - Qilmang: Amallarni faqat hover'ga qoldirmang — fokus va sensorli qurilmada ham çiqadi (komponent buni özi qiladi). - Qilmang: Öqilmaganni faqat rang bilan bildirmang — nuqta şakli va «Yangi» matni bor. ## Indikator (`indicator`, beta, 0.22.0 dan) Istalgan element (ikon-tugma, avatar) burçagiga nuqta yoki son boğlaydi. Içida mavjud .fx-count yoki .fx-indicator__dot. Jarayon — nuqta atrofida halqa. - Qaçon: Öqilmagan xabar, onlayn holat, yangi element belgisi. - Qaçon emas: Matnli holat → `badge`; Faqat son → `count` - Variantlar: data-placement=top-start|bottom-end|bottom-start (standart top-end); data-tone=success|brand (standart error) - Tokenlar: --fx-bg-brand-solid, --fx-bg-error-solid, --fx-bg-surface, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-standard, --fx-fg-success, --fx-radius-circle, --fx-size-status-dot ```html AZ ``` - Qilmang: Sonni faqat indikatorda qoldirmang — ota elementning aria-label'iga ham yozing. - Qilmang: Bir elementga bir neçta indikator qöymang. ## Joyida tahrir (`inline-edit`, beta, 0.23.0 dan) Matn oddiy körinadi; bosilsa yoki Enter bosilsa maydonga aylanadi. Enter yoki fokus ketişi — saqlaydi (qisqa yoritiş), Esc — bekor qiladi. Sarlavha, nom, yorliq uçun. - Qaçon: Sarlavha, nom yoki izohni sahifadan çiqmasdan tez özgartiriş. - Qaçon emas: Köp maydonli tahrir → `input` - Klaviatura: Enter, Space — Tahrirni oçadi; Enter (maydonda) — Saqlaydi; Esc — Bekor qiladi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-motion-fast, --fx-motion-slower, --fx-radius-control, --fx-size-icon-sm, --fx-space-12, --fx-space-2, --fx-text-tertiary ```html

    ``` - Qilmang: Majburiy maydonni böş qoldirib saqlamang — required bölsa eski qiymat qaytadi. - Qilmang: Köp maydonli forma uçun emas — oddiy forma. ## Maydon (input, textarea) (`input`, beta, 0.1.0 dan) Matn maydoni (input, textarea), yorliq, izoh. Majburiy belgisi (data-required), faqat öqiş, xato (data-invalid) va muvaffaqiyat (data-valid) holati. Input guruhi — oldi/orqa qism (birlik, ikon). Fieldset — guruh sarlavhasi bilan. Kengaytma: lg ölçam, maydon eni (data-width), gorizontal forma (data-layout="inline"), parolni körsatiş va Caps Lock ogohlantirişi, parol kuçliligi, tozalaş tugmasi, belgilar hisoblagiçi, textarea avto-ösişi, kod maydoni (xulq: data-fx-field). Kengaytma: data-variant=filled|borderless|underlined, .fx-field[data-float] (floating label), .fx-input-group__status (loading|valid|invalid), guruh içida .fx-btn. - Qaçon: Qisqa matn (input) yoki köp qatorli matn (textarea) kiritiş. - Qaçon emas: Röyxatdan tanlaş → `select` - Variantlar: data-size=sm|md|lg (standart md); data-width=xs|sm|md (standart toʻliq); data-layout=inline (standart ustma-ust); data-level=1|2|3|4 (standart —); data-rows=3|8 (standart 5); data-variant=filled|borderless|underlined; data-float=true - Klaviatura: Enter / Space (tugma) — Parolni körsatiş/yaşiriş; tozalaş; Esc — Maydondagi qiymatni tozalaydi (tozalaş tugmasi bor bölsa) - Tokenlar: --fx-bg-error-solid, --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-duration-pulse, --fx-duration-spin, --fx-ease-standard, --fx-fg-info, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-field-fill, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-sm, --fx-motion-slow, --fx-radius-circle, --fx-radius-control, --fx-radius-field-multiline, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-min-target, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Kamida 8 belgi: harf, raqam va belgi aralaş.
    Faqat jamoa köradi.
    ``` - Qilmang: Label örniga faqat placeholder işlatmang. - Qilmang: Parolni körsatiş tugmasiga faqat ikon bermang — aria-label va aria-pressed şart. - Qilmang: Belgilar hisoblagiçini limitsiz maydonda bezak uçun qöymang; limit bor bölsa maxlength bering. ## Integratsiyalar katalogi (`integrations`, beta, 0.29.0 dan) Ilovaning «Integratsiyalar» sahifasi (4.189): sarlavha va «N ta ulangan» hisobi, qidiruv, toifa chip'lari (Hammasi, Ulanganlar, Tölov, Yetkaziş, Xabar, Buxgalteriya) va kartalar töri. Har karta: logo (harf + pastel fon yoki rasm), nom, toifa, qisqa izoh, holat (fx-status — nuqta + söz) va amallar. Holatlar data-state: connected (Ulangan → «Uziş», «Sozlaş»), disconnected (Ulanmagan → «Ulaş»), pending (Ulanmoqda…, tugma band), error (Xato + sababi → «Qayta ulaş»). Xulq (data-fx-integrations): filtr va qidiruv (ʻ va katta-kiçik harfsiz), ulaşda bekor qilinadigan «fx-integrations-connect» hodisasi {id, done(ok, xato)} — ilova OAuth oynasini oçib natijani done() bilan qaytaradi; uziş fxConfirm bilan tasdiqlanadi («fx-integrations-disconnect»). Natijalar jonli hududda aytiladi. data-layout: grid (standart) yoki list. - Qaçon: Ilova sozlamalaridagi «Integratsiyalar» / «Ilovalar» sahifasi. Onboarding'da kerakli xizmatlarni ulaş qadami. - Qaçon emas: API kalitlarini boşqariş → `apikeys`; Oddiy yoqiş/öçiriş sozlamalari röyxati → `settings` - Variantlar: data-state=connected|disconnected|pending|error (standart disconnected); data-layout=grid|list (standart grid); data-color=yellow|pink|blue|coral|green|purple (standart none) - Klaviatura: Tab — Qidiruv → toifa chip'lari → har kartaning amallari; Enter, Space — Chip — toifani tanlaydi; tugma — ulaydi / uzadi; Esc (tasdiq oynasida) — Uzişni bekor qiladi - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-ease-standard, --fx-fg-success, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-radius-control, --fx-radius-surface, --fx-shadow-sm, --fx-size-avatar-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-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Integratsiyalar

    «Ipak Yöli Savdo» dökonini tölov, yetkaziş va xabar xizmatlariga ulang.

    2 ta ulangan

    • Click

      Tölov

      Karta va Click hamyon orqali onlayn tölov. Pul ertasi kuni hisobingizga tuşadi.

      Ulangan
      Sozlaş

    • Payme

      Tölov

      Payme orqali tölov va avtomatik çek. Obuna tölovlari uçun ham.

      Ulanmagan

    • Telegram bot

      Xabar

      Yangi buyurtma va arizalar haqida guruhga darhol xabar.

      Ulangan
      Sozlaş

    • Eskiz SMS

      Xabar

      Buyurtma holati va tasdiq kodlarini SMS orqali yuboriş.

      Xato: token eskirgan

    • Yandex Yetkaziş

      Yetkaziş

      Toşkent böylab kuryer çaqiriş va yetkaziş narxini hisoblaş.

      Ulanmagan
    ``` - Qilmang: Holatni faqat rang bilan körsatmang — «Ulangan / Ulanmagan / Xato» sözi doim tursin. - Qilmang: Uzişni tasdiqsiz bajarmang — ma'lumot almaşinuvi töxtaydi. - Qilmang: Xato holatida sababini yaşirmang («token eskirgan», «ruxsat bekor qilingan») va «Qayta ulaş»ni bering. ## Interruption sahifasi (`interruption`, beta, 0.29.0 dan) Davom etişdan oldin biliş ŞART bölgan bitta muhim xabar sahifasi (4.198, GOV.UK «Interruption pages»): butun ekran (yoki katta blok) rangli panel — sarlavha, qisqa matn yoki 2–4 bandli röyxat, ixtiyoriy «Tuşundim» belgisi (required — forma özi tekşiradi, JS kerak emas) va bitta asosiy harakat: «Davom etiş» + ikkinçi darajali havola («Ortga», «Keyinroq»). Masalan: tölov qaytarilmasligi, tarif özgarişi oqibati, qonuniy talab, ma'lumot öçirilişidan oldin. data-tone: brand (standart — töq rangli panel), warning (ehtiyot — sariq fon, qalin çap çiziq), neutral. data-size: page (ekran balandligida, markazda) yoki block (sahifa içida). - Qaçon: Qaytarib bölmaydigan tölov, öçiriş, import yoki tarif özgarişidan oldin. Qonun yoki xavfsizlik talabi böyiça foydalanuvçi bilişi şart bölgan xabar. - Qaçon emas: Kiçik tasdiq («Öçirilsinmi?») → `dialog`; Sahifa içidagi eslatma → `callout`; Butun sayt böylab e'lon → `banner`; Sessiya tugaşi → `sessionwarn` - Variantlar: data-tone=brand|warning|neutral (standart brand); data-size=page|block (standart page) - Klaviatura: Tab — «Tuşundim» → «Davom etiş» → ikkinçi havola; Space — «Tuşundim» belgisi; Enter — Davom etadi (belgi qöyilmagan bölsa — brauzer xabari) - Tokenlar: --fx-bg-brand-solid, --fx-bg-page, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-dialog-width, --fx-ease-enter, --fx-ease-standard, --fx-fg-warning, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-line-height-relaxed, --fx-line-height-tight, --fx-motion-fast, --fx-motion-press, --fx-motion-shift-sm, --fx-motion-slow, --fx-radius-badge, --fx-radius-control, --fx-radius-overlay, --fx-shadow-md, --fx-size-checkbox, --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-on-brand, --fx-text-primary ```html

    Tölovdan oldin

    Yillik obuna puli qaytarilmaydi

    «Jamoa, yillik» tarifiga ötsangiz, 1 200 000 söm bir martada yeçiladi.

    • Muddatidan oldin bekor qilsangiz, qolgan oylar puli qaytarilmaydi.
    • Yuklab olingan versiyalar sizda abadiy qoladi.
    • Örinlar sonini istalgan vaqtda oşiriş mumkin.
    Oylik tarifda qoliş

    Import 1 284 ta mijozni yangilaydi

    Bir xil telefon raqamli yozuvlar faylidagi ma'lumot bilan almaştiriladi. Eski qiymatlar audit jurnalida 365 kun saqlanadi.

    Davom etişFaylni qayta tanlaş
    ``` - Qilmang: Har qadamda interruption qöymang — faqat oqibati jiddiy va qaytarib bölmaydigan joyda, aks holda odamlar öqimay ötib ketadi. - Qilmang: Bir sahifaga bir neçta xabar siğdirmang — bitta asosiy fikr, 2–4 band. - Qilmang: «Davom etiş»dan boşqa asosiy tugma qöymang — ikkinçi yöl oddiy havola. - Qilmang: Reklama yoki upsell uçun işlatmang — bu foydalanuvçi işonçini yöqotadi. ## Element kartasi (`item`, beta, 0.54.0 dan) Bitta qator-karta: çapda ikon plitkasi (yoki avatar), örtada sarlavha va izoh, öng çetda amal — tugma, almaştirgiç, tanlov, nişon, summa, menyu yoki strelka. Qurilmalar, ulangan hisoblar, sozlamalar, tölov usullari uçun. Bosiladigan bölsa — /
    • MacBook Pro · ChromeToşkent · hozir faolŞu qurilma
    • iPhone 15Samarqand · 3 kun oldin

    Sozlamalar

    Ulangan hisoblar

    Kiriş uçun işlatiladi

    • Telegram@aziz_karimovUlangan
    • GoogleUlanmagan
    Uzcard ···· 4417AsosiyMuddati 09/281 250 000 söm
    Ikkinçi darajalidata-variant="secondary"
    Uçinçi darajalidata-variant="tertiary"
    Çiziqlidata-variant="outline"
    Şaffof, kiçik
    ``` - Qilmang: Bitta qatorga ikkitadan ortiq amal qöymang — qolganini menyuga oling. - Qilmang: Butun karta havola bölsa, içiga yana tugma yoki havola qöymang (içma-iç bosiladigan element). - Qilmang: Izohni ikki qatorga çözmang — u bitta qatorda «…» bilan qisqaradi; batafsil — oçiladigan sahifada. ## JSON maydoni (`jsonfield`, beta, 0.29.0 dan) JSON matni uçun maydon (4.90): webhook tanasi, integratsiya sozlamasi, API sörovi. Çapda qator raqamlari, monoşrift; fokusdan çiqqanda (yoki Ctrl+Shift+F, «Formatlaş» tugmasi) tekşiradi va 2 böşliq bilan formatlaydi. Xato bölsa — xato qatori raqami «!» bilan belgilanadi, qator orqasi ajratiladi, pastda «4-qator, 1-ustun: xususiyat nomi qöştirnoqda bölişi kerak» kabi özbekça matn; textarea aria-invalid va setCustomValidity oladi (forma yuborilmaydi). - Qaçon: Admin panelda webhook, integratsiya yoki ruxsatlar sozlamasi (JSON). API sinov sahifasida sörov tanasi. - Qaçon emas: Köp qatorli oddiy matn → `input`; Faqat körsatiladigan kod → `code`; Formatlangan matn (qalin, röyxat) → `markdown` - Variantlar: data-required=; data-indent=4 (standart 2) - Klaviatura: Ctrl+Shift+F — Tekşiradi va formatlaydi; Tab — Keyingi maydonga (tuzoq yöq) - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-default, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-fg-error, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-field-multiline, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-tertiary ```html

    Fokusdan çiqqanda formatlanadi · Ctrl+Shift+F

    ``` - Qilmang: Oddiy foydalanuvçiga JSON maydonini bermang — sozlamani forma maydonlariga ajrating; JSON — dasturçi va admin uçun. - Qilmang: Tab tugmasini tutib qolmang (fokus tuzoği) — çekiniş formatlaş bilan qöyiladi. - Qilmang: Xatoni faqat qizil çegara bilan körsatmang — qator raqami va matn şart. ## Tugma belgisi (kbd) (`kbd`, beta, 0.14.0 dan) Klaviatura tugmasi yoki birikmasi: çiziqsiz kulrang plitka, matn şriftida (mono emas; Ustoz 21.10, PDP namunasi). Kengaytma: .fx-kbd-combo (kombinatsiya, ixtiyoriy .fx-kbd-combo__sep “+”), data-size=sm. - Qaçon: Tugmalar birikmasini matnda körsatiş. - Qaçon emas: Kod parçasi → `code` - Variantlar: data-size=sm - Tokenlar: --fx-bg-muted, --fx-border-width-default, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-badge, --fx-size-icon-sm, --fx-space-1, --fx-space-5, --fx-text-secondary, --fx-text-tertiary ```html

    Qidiriş: Ctrl + K, menyuni yiğiş: ⌘ B

    CtrlK ``` - Qilmang: Kbd'ni bosiladigan tugma qilmang. ## Burçak / knob (`knob`, beta, 0.29.0 dan) Dumaloq tutqiç (4.89): qiymat yoki burçakni aylantirib tanlaş. Standart — min…max 270° yoy böylab (ovoz, harorat, intensivlik), data-type="angle" — 0…359° töliq aylana (gradient yönalişi, soya burçagi). Sudraş markaz atrofida, klaviatura APG slider böyiça. Örtada raqam va birlik (holat söz bilan), yaşirin input formaga. - Qaçon: Burçak: gradient yönalişi, soya, aylantiriş. Ixçam panelda sozlama: ovoz, harorat, intensivlik (audio/IoT boşqaruv). - Qaçon emas: Çiziqli diapazon, narx filtri → `slider`; Aniq son kiritiş → `number` - Variantlar: data-type=value|angle (standart value); data-size=sm|md|lg (standart md) - Klaviatura: → ↑ — Bir qadam oşiradi; ← ↓ — Bir qadam kamaytiradi; PageUp / PageDown — 10 qadam (burçakda 15°); Home / End — Eng kam / eng köp qiymat - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-surface, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-instant, --fx-radius-circle, --fx-radius-pill, --fx-shadow-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-text-primary, --fx-text-secondary ```html
    ``` - Qilmang: Aniq son kiritiş kerak bölsa knobni yolğiz bermang — yoniga son maydoni qöying. - Qilmang: Çiziqli oraliq (narx, sana) uçun knob işlatmang — slider tuşunarliroq. - Qilmang: Juda katta oraliq (0–10 000) bermang — aylanişda qadam sezilmaydi. ## Hududlar navigatsiyasi (F6) (`landmarks`, beta, 0.29.0 dan) Sahifa hududlari orasida klaviatura bilan sakraş (4.24): F6 — keyingi hudud (sarlavha → navigatsiya → asosiy mazmun → yon panel → pastki qism), Shift+F6 — oldingisi, oxiridan boşiga aylanadi. Hududga qaytilganda fokus u yerda oxirgi turgan elementga tuşadi (CRM'da: jadvaldan filtrga va qaytib aynan öşa qatorga). Pastda qisqa yorliq hudud nomini körsatadi. Hududlar — semantik teglar (header, nav, main, aside, footer, search) va nomli section/form/region. - Qaçon: Köp panelli ilova: CRM, admin, poçta — siçqonçasiz işlovçi tez ötsin. Ilova karkasi (shell) bor har sahifa — body'ga bir marta qöyiladi. - Qaçon emas: Sahifa boşidan mazmunga bitta sakraş → `anchor`; Tugmalar guruhi içida strelka bilan yuriş → `toolbar` - Klaviatura: F6 — Keyingi hudud (oxiridan boşiga); Shift + F6 — Oldingi hudud - Tokenlar: --fx-bg-page, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-enter, --fx-ease-exit, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-exit-fast, --fx-motion-fast, --fx-motion-shift-sm, --fx-radius-pill, --fx-space-2, --fx-space-4, --fx-space-6, --fx-text-primary, --fx-z-tip ```html
    Mijozlar bazasi

    Faol mijozlar

    F6 — keyingi hudud, Shift+F6 — oldingisi

    ``` - Qilmang: Hududlarni div bilan yasamang — header, nav, main, aside, footer yoki role bering, aks holda F6 ularni topmaydi. - Qilmang: Bir sahifada bir xil nomli ikki nav qoldirmang — aria-label bilan farqlang («Asosiy», «Sahifa içida»). - Qilmang: F6 ni boşqa amalga boğlamang — brauzer va ekran öquvçilarda u hududlar tugmasi. ## Til almaştirgiç (`langswitch`, beta, 0.30.0 dan) Sayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi. Balandligi va yoyi mavzu almaştirgiç bilan bir xil — footer'da ikkalasi bir qator bölib turadi (Cursor footer namunasi, Ustoz 19.10). Bandlar havola (til boşqa manzilda, hreflang) yoki tugma (til şu sahifada, «fx-lang» hodisasi). Til nomi öz tilida yoziladi (endonim), tanlangani belgi bilan. data-apply="html" — tanlanganda ham özgaradi (faqat xulq). - Qaçon: Sayt footer'i (mavzu almaştirgiç yonida), sarlavha öng çeti, sozlamalar. - Qaçon emas: Forma içida til maydoni (masalan, kontent tili) → `select`; 2 ta til va joy kam → `segment` - Variantlar: data-variant=default|compact (standart default) - Klaviatura: Enter, Space, ↓ — Röyxatni oçadi; ↑ ↓ Home End — Tillar böylab yuradi; Enter — Tilni tanlaydi; Esc — Yopadi, fokus tugmaga qaytadi - Tokenlar: --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-knob-pill, --fx-motion-fast, --fx-radius-control, --fx-size-icon-sm, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    ``` - Qilmang: Til nomini bayroq bilan almaştirmang — bayroq davlat, til emas (özbek tili bitta, bayroqlar köp). - Qilmang: Til nomlarini joriy tilga tarjima qilmang — har til öz nomida: «Özbekça», «Русский», «English». - Qilmang: Faqat ikonli tugma qilmang — joriy til körinib tursin; ixçam variantda ham kod (UZ) körinadi. ## Joylaşuv primitivlari (`layout`, beta, 0.22.0 dan) Oraliq tokeni bilan joylaş: fx-stack (vertikal), fx-cluster (qatorga öraladigan guruh), fx-grid (auto-fit yoki aniq ustun), fx-container (markazlangan eni), fx-ratio (tomonlar nisbati). Oraliq — data-gap="0…12" (space-token). - Qaçon: Elementlarni token oraliq bilan ustun, qator yoki törga joylaş. Sahifa kontentini markazlab, enini çeklaş. - Qaçon emas: Butun ilova karkasi (yon menyu + tepa panel) → `shell`; Elementlar orasiga çiziq → `divider` - Variantlar: data-gap=0|1|2|3|4|5|6|8|10|12 (standart 4); data-align=start|center|end|baseline (standart stretch); data-justify=center|end|between (standart start); data-min=sm|md|lg (standart md); data-cols=2|3|4 (standart auto); data-size=sm|md|lg|xl|full (standart lg); data-pad=none (standart default); data-ratio=1-1|4-3|3-2|16-9|21-9 (standart 16-9) - Tokenlar: --fx-bg-muted, --fx-radius-control, --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 ```html

    Loyihalar

    RedFox

    12 faol vazifa

    NomLab

    5 faol vazifa

    Manbaa

    8 faol vazifa

    ``` - Qilmang: Oraliqni margin bilan emas, ota konteynerning data-gap'i bilan bering. - Qilmang: fx-grid'da DOM tartibi öqiş tartibi bölsin — vizual tartibni order bilan buzmang. ## Huquqiy sahifa (`legal`, beta, 0.29.0 dan) Maxfiylik siyosati, foydalaniş şartlari, ommaviy oferta va cookie siyosati uçun sahifa şabloni (4.177): sarlavha va meta (kuçga kirgan sana, oxirgi yangilaniş, versiya), çapda yopişqoq mundarija (fx-toc — öqilayotgan bölimni belgilaydi), öngda avtomatik raqamlangan bölimlar (1., 1.1. — CSS hisoblagiç) va har bölim boşida «Qisqaça» — oddiy tilda xulosa. FoxUI bergan matn — faqat NAMUNA: .fx-legal__sample ogohlantirişi şablon yuristsiz işlatilmasligini aniq körsatadi (haqiqiy matn qöyilgaç olib taşlanadi). Çop etişda mundarija yaşirinadi. - Qaçon: Maxfiylik siyosati, foydalaniş şartlari, ommaviy oferta, cookie siyosati sahifalari. Uzun, raqamlangan bandli har qanday rasmiy hujjat (nizom, qoidalar). - Qaçon emas: Oddiy maqola yoki blog matni → `article`; Cookie roziligi banneri → `consent` - Klaviatura: Tab — Mundarija havolalari, keyin matndagi havolalar; Enter (mundarijada) — Bölimga ötadi - Tokenlar: --fx-bg-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-fg-warning, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-line-height-normal, --fx-line-height-relaxed, --fx-line-height-snug, --fx-line-height-tight, --fx-radius-badge, --fx-radius-control, --fx-size-topbar, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Namuna matnBu — FoxUI şablonidagi namuna. Huquqiy kuçga ega emas: öz kompaniyangiz ma'lumotlari bilan töldiring va yurist bilan tekşiring.

    Maxfiylik siyosati

    Kuçga kirgan
    Oxirgi yangilaniş
    Versiya
    1.2

    Qanday ma'lumot yiğamiz

    Faqat ariza va obuna uçun zarur bölgan ism, telefon va email.

    «Namuna Kompaniya» MChJ (keyingi örinlarda — Kompaniya) saytdagi forma orqali yuborilgan ism, telefon raqami va elektron poçta manzilini qabul qiladi.

    Saytdan foydalaniş statistikasi faqat siz cookie'larga rozilik bergan holda, anonim körinişda yiğiladi.

    Ma'lumotdan foydalaniş

    Sizga javob beriş va obunani yuritiş uçun. Sotmaymiz.

    Ma'lumotlar arizangizga javob beriş, hisob-faktura yuboriş va xizmat haqida muhim xabarlar uçun işlatiladi.

    Kompaniya şaxsiy ma'lumotlarni uçinçi şaxslarga sotmaydi va qonunda belgilangan hollardan taşqari bermaydi.

    Saqlaş muddati

    Obuna davomida va undan keyin 3 yil.

    Ma'lumotlar Özbekiston Respublikasi hududidagi serverlarda saqlanadi.

    Sizning huquqlaringiz

    Istalgan vaqtda köriş, tuzatiş yoki öçirişni söraşingiz mumkin.

    Sörovni maxfiylik@namuna.uz manziliga yuboring — 10 iş kuni içida javob beriladi.

    ``` - Qilmang: Namuna matnni haqiqiy siyosat sifatida joylamang — yurist tekşirmagan şablon huquqiy kuçga ega emas, .fx-legal__sample olib taşlanmagunça sahifa «namuna». - Qilmang: Raqamlarni qölda yozmang — bölim qöşilsa hammasi siljiydi; CSS hisoblagiç özi raqamlaydi. - Qilmang: «Qisqaça»da asosiy matnga zid yoki undan kengroq va'da bermang — u faqat xulosa. - Qilmang: Yangilaniş sanasini yaşirmang: özgariş bölsa sana va versiya yangilanadi, eski versiya havolasi qoladi. ## Legenda (`legend`, beta, 0.23.0 dan) Mustaqil legenda: rang belgisi + nom (+ qiymat). Grafik, uluş çiziği va köp bölakli progress yonida. Rollar 60/30/10 (ink, brend, aksent, xavf, kontekst); belgi şakli — kvadrat, nuqta yoki çiziq. Tugma bölsa (aria-pressed) seriyani yoqib-öçiradi (#62). Interaktiv (4.126): data-interactive + data-fx-legend + aria-controls — bandni bosiş boğlangan grafik seriyasini yaşiradi yoki qaytaradi (aria-pressed, oxirgi seriya öçmaydi). - Qaçon: Grafik yoki köp bölakli çiziq ranglarini izohlaş. - Qaçon emas: Yagona seriya → `chart` - Variantlar: data-direction=column (standart row); data-role=brand|ink|accent|risk|context (standart brand); data-shape=dot|line (standart square); data-interactive=true - Klaviatura: Tab, Enter, Space — Interaktiv legendada seriyani yoqadi/öçiradi - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-border-color-focus, --fx-border-width-focus, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-badge, --fx-radius-circle, --fx-size-min-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-accent, --fx-viz-brand, --fx-viz-context, --fx-viz-ink, --fx-viz-risk, --fx-viz-track ```html
    • Bu yil1 240
    • Ötgan yil980
    • Bekor qilingan34
    Filiallar böyiça buyurtmalardona · haftalik
    HaftaToşkentSamarqandBuxoro
    142189
    2482211
    3452710
    4533114
    ``` - Qilmang: Rangni yolğiz belgi qilmang — nom doim yoziladi. - Qilmang: 5 tadan köp seriya uçun legenda emas, bevosita yorliq yoki jadval. - Qilmang: HEX bermang — rol (data-role). ## Linza (`lens`, beta, 0.29.0 dan) Rasm ustida kursor atrofidagi doira kattalaştirib körsatiladi (Magic UI va Aceternity Lens) — mahsulot tafsiloti, xarita, çizma yoki skrinşotdagi mayda yozuv uçun. data-zoom — kattalaştiriş (1,5–5, standart 2), data-size — oyna ölçami, data-shape="square" — törtburçak oyna. Barmoqda bosib uşlab surilsa işlaydi; klaviaturada konteyner fokuslanadi — oyna markazda çiqadi, strelkalar suradi, + / − kattalaştiradi, Esc yopadi. .fx-lens__hint — ixtiyoriy yöl-yöriq yorliği. - Qaçon: Mahsulot sahifasida mato, tikuv, detal yaqindan. Xarita, sxema, çizma yoki skrinşotdagi mayda yozuv. - Qaçon emas: Rasmni töliq ekranda köriş → `lightbox`; Oddiy rasm → `image` - Variantlar: data-size=sm|md|lg (standart md); data-shape=circle|square (standart circle) - Klaviatura: Tab — Rasmga fokus — oyna markazda çiqadi; ← → ↑ ↓ — Oynani suradi (Shift — tezroq); + / − — Kattalaştiriş 1,5–5; Esc — Oynani yopadi - Tokenlar: --fx-bg-overlay, --fx-bg-static-light, --fx-bg-surface, --fx-border-color-focus, --fx-border-width-focus, --fx-ease-spring, --fx-ease-standard, --fx-font-size-xs, --fx-lens-x, --fx-lens-y, --fx-lens-zoom, --fx-motion-base, --fx-motion-fast, --fx-motion-scale-enter, --fx-radius-badge, --fx-radius-circle, --fx-radius-surface, --fx-shadow-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3 ```html
    Toşkent metro xaritasi: Çorsu, Paxtakor, Amir Temur xiyoboni, Oybek va boşqa bekatlar
    ``` - Qilmang: Rasmning yagona ma'lumot manbai bölmasin — muhim yozuvlar alt matnda yoki yonida ham bölsin. - Qilmang: Kiçik (ikon, avatar) rasmga qöymang — kamida 320 px enli rasm. - Qilmang: Galereyada har rasmga qöymang — töliq köriş uçun lightbox. ## Xat (asosçiga taklif) (`letter`, beta, 0.1.0 dan) Bitta odamga — asosçi, muallif, rahbarga — töğridan-töğri xat bloki: çapda kimga (sarlavha, bir gap, avatar va ism), öngda bitta yaxlit xat yuzasi — maydon, içidagi pastki qatorda yuboruvçi, belgilar sanoği va «Yuboriş». Uç holat: kirgan (forma), mehmon (butun yuza — kirişga havola, edge keşga mos), yuborildi (rahmat). Soyasiz, brend tusidagi fon. Fox MB sörovi (Manbaa «Asosçiga taklif», 21.10). - Qaçon: Boş sahifada asosçi yoki muallifga taklif, fikr-mulohaza. «Rahbarga yozing», «Muharrirga xat» kabi bitta odamga murojaat. - Qaçon emas: Köp maydonli ariza (ism, telefon, xizmat) → `form`; Çat yoki suhbat oqimi → `composer` - Klaviatura: Tab — Maydon → Yuboriş; Enter (tugmada) — Yuboradi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-2xl, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-circle, --fx-radius-overlay, --fx-radius-surface, --fx-size-icon-sm, --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-text-brand, --fx-text-error, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Töğridan-töğri

    Taklifingizni asosçiga yozing

    Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

    Rahim SadiyManbaa asosçisi
    Yuboruvçi: Dilnoza Karimova · @dilnoza_k0 / 3000

    Javob Telegram orqali keladi.

    Töğridan-töğri

    Taklifingizni asosçiga yozing

    Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

    Rahim SadiyManbaa asosçisi
    Taklif yoziş uçun kiring — bir daqiqa, Telegram yoki Google bilanAsosçi sizga javob qaytara olişi uçunKiriş

    Töğridan-töğri

    Taklifingizni asosçiga yozing

    Fikr, ğoya yoki tanqid — xatingiz töğridan-töğri asosçiga boradi.

    Rahim SadiyManbaa asosçisi
    Rahmat! Taklifingiz asosçiga yetkazildi.

    Javob Telegram orqali keladi. Yana yozmoqçimisiz? Sahifani yangilang.

    ``` - Qilmang: Mehmonga öçirilgan (disabled) kulrang maydon körsatmang — u «buzuq» körinadi; butun yuza kirişga havola bölsin. - Qilmang: Maydon va tugmani ikki alohida obyekt qilib yonma-yon qöymang — tugma xat yuzasining içidagi pastki qatorda. - Qilmang: Soya qöşmang — blok fon tusi bilan ajraladi. ## Lightbox (`lightbox`, beta, 0.24.0 dan) Rasm körgiç: töliq ekran native — katta rasm, yaqinlaştiriş (bosiş yoki ⊕; siçqonça siljitilsa rasm suriladi), oldingi/keyingi, sanagiç, imzo. Esc yopadi, ← → almaştiradi, gorizontal suriş ham almaştiradi. Içki tuzilmani xulq özi quradi; oçuvçilar data-fx-lightbox-target="". - Qaçon: Tördagi rasmni töliq ekranda köriş, yaqinlaştiriş va qöşnilariga ötiş kerak bölganda. - Qaçon emas: Forma yoki tasdiq oynasi → `dialog`; Yon panelda tafsilot → `sheet` - Klaviatura: ← → — Oldingi/keyingi rasm; + / − / Z — Yaqinlaştiriş/kiçraytiriş; Esc — Yopadi; Tab — Dialog içida aylanadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-overlay, --fx-border-width-focus, --fx-control-h-md, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-exit, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-motion-base, --fx-motion-exit-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-brand ```html
    Çorsu bozori Markaziy ombor Yangi ofis
    ``` - Qilmang: Lightbox içiga şakl yoki uzun matn qöymang — bu faqat rasm uçun. - Qilmang: Rasmning alt matnini imzosiz qoldirmang: imzo yoki alt körsatiladi. ## Havola (`link`, beta, 0.8.0 dan) Boşqa sahifa yoki manzilga ötadigan matn. Brend rangida, tagi çizilgan; ustiga borilganda çiziq yöqoladi. Kengaytma: target=_blank / data-external ↗ ikoni (matnda “yangi oynada” bölsin), data-variant=more (“Hammasi →”), data-visited (ixtiyoriy), bosmada manzil çiqadi. Harakat (4.37): data-underline="grow" — tinç holatda xira çiziq, ustiga borilganda yoki fokusda töliq çiziq boşidan oxiriga çiziladi va çiqişda oxiriga qarab yiğiladi (RTL'da öngdan); data-weight="bold" — qalinroq çiziq. Menyu, footer va maqola içida işlaydi; harakat kamaytirilsa çiziq darhol paydo böladi. - Qaçon: Boşqa sahifaga yoki manzilga ötiş matn içida. - Qaçon emas: Amal bajariş → `button` - Variantlar: data-tone=brand|muted (standart brand); data-variant=more; data-underline=grow; data-weight=bold - Klaviatura: Enter — Ötadi - Tokenlar: --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-standard, --fx-font-weight-medium, --fx-motion-base, --fx-motion-fast, --fx-motion-slow, --fx-radius-badge, --fx-space-1, --fx-text-brand, --fx-text-secondary ```html

    Batafsil: foydalaniş şartlari.

    Yordam markazi

    Hujjatlar (yangi oynada) Hammasi ``` - Qilmang: Amal uçun havola işlatmang (saqlaş, öçiriş) — tugma. - Qilmang: data-underline="grow"ni uzun abzatsdagi har havolaga qöymang — menyu, footer va kartalar uçun. ## Havola oldindan köriş (`linkpreview`, beta, 0.29.0 dan) Havola ustiga kursor olib borilganda (yoki fokusda) sahifaning kiçik rasmi, sarlavhasi, qisqa tavsifi va domeni çiqadi (4.81) — foydalanuvçi bosmasdan qayerga ketişini köradi. Xulq hover kartaniki (data-fx-hovercard: keçikiş, Esc, karta ustida yopilmaydi); bu komponent faqat körinişni beradi: class="fx-hovercard fx-linkpreview". Rasm — oldindan tayyorlangan OG rasm (1,91:1). - Qaçon: Maqola, yordam markazi va çatdagi taşqi havolalar. Changelog yoki e'lonlarda boşqa sahifaga işora. - Qaçon emas: Odam yoki yozuv haqida qisqa ma'lumot → `hovercard`; Bir sözli izoh → `tip` - Variantlar: data-size=sm (standart md) - Klaviatura: Tab (fokus) — ~300 ms dan keyin oldindan köriş oçiladi; Esc — Yopadi - Tokenlar: --fx-bg-muted, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-line-height-snug, --fx-radius-control, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-8, --fx-text-secondary, --fx-text-tertiary ```html

    Yangi tariflar haqida narxlar sahifasida yozilgan, ulaniş böyiça — hujjatlarda.

    Tariflar — oylik va yillik obuna

    Start, Biznes va Korporativ tariflar: 3 foydalanuvçidan boşlab, yillik tölovda 2 oy bepul.

    savdo.uz/tariflar

    Telegram botni CRM'ga ulaş

    5 daqiqalik qöllanma: bot tokeni, webhook va arizalarni avtomatik taqsimlaş.

    docs.savdo.uz
    ``` - Qilmang: Içki sahifadagi har havolaga qöymang — faqat taşqi yoki muhim havolalarga. - Qilmang: Kartaga yagona muhim amal yoki ma'lumot qöymang — u faqat qöşimça. - Qilmang: Rasm yöq bölsa, böş ramka körsatmang — data-size="sm" yoki rasmsiz variant. ## Röyxat (`list`, beta, 0.12.0 dan) Qatorlar röyxati: çapda avatar yoki belgi, örtada sarlavha va meta (bitta qator, «…» bilan), öngda qiymat yoki amal. Butun qator havola bölişi mumkin. Variantlar: belgilanadigan qator (.fx-check), amalli qator, ixçam, kartali. Kengaytma: .fx-list__lead (çap slot), data-divider=none, data-focus=inset. - Qaçon: Bir xil turdagi yozuvlar: mijozlar, xabarlar, fayllar — köp ustun kerak bölmasa. - Qaçon emas: Ustunlar böyiça soliştiriş → `table` - Variantlar: data-density=compact (standart default); data-variant=card (standart default); data-divider=none; data-focus=inset - Klaviatura: Tab, Enter — Qator havolasiga ötadi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-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-control-h-md, --fx-control-h-sm, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-nav, --fx-radius-surface, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    • Aziz KarimovObuna
    • Sevimli
    ``` - Qilmang: Qator içida bir neçta havola qilmang, agar butun qator havola bölsa. ## Variantlar röyxati (`listbox`, beta, 0.15.0 dan) Combobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat. Özi alohida işlatilmaydi. - Qaçon: Combobox va buyruqlar oynasi içida. - Qaçon emas: Amallar röyxati → `menu` - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-control-h-md, --fx-control-h-sm, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-nav, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-tertiary ```html
    • Toşkent
    • Samarqand
    • Farğona vodiy
    • Aziz Karimovaziz@namuna.uz
    • Bobur Toshmatovbobur@namuna.uz
    ``` - Qilmang: Röyxatni combobox yoki buyruqlar oynasisiz alohida qöymang. ## Röyxat sahifasi (`listpage`, beta, 0.23.0 dan) Röyxat sahifasi qolipi (PDP «Masdar»): sarlavha + son + asosiy amal → xulosa tasmasi → saqlangan körinişlar → filtr qatori → jadval → sahifalaş; ommaviy panel jadval ostida suzadi. Qolip faqat tartib beradi, komponentlar — alohida. - Qaçon: CRM/ERP'da jadvalli röyxat ekrani. - Qaçon emas: Boş panel (körsatkiçlar, grafiklar) → `layout`; Karta körinişidagi röyxat → `list` - Tokenlar: --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-lg, --fx-font-size-md, --fx-font-size-xl, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-tertiary ```html

    Arizalar 248

    Arizalar
    MijozSumma
    Aziz1 200 000
    Bobur450 000
    ``` - Qilmang: Qolipga dashboard grafiklarini qöymang — u boş panel. - Qilmang: Jadvalni sahifa bilan birga aylantirmang — jadval öz hududida (fx-table-scroll). - Qilmang: Ommaviy panelni jadval içiga qöymang — pastda suzadi (fx-bulkbar). ## Yuklaniş qoplamasi (`loading`, beta, 0.22.0 dan) Blok ustida xira qatlam + aylana: kontent joyida qoladi, ota aria-busy="true" bölsa körinadi. Variantlar: xira (andoza), blur, butun sahifa. - Qaçon: Mavjud kontent qayta yuklanayotganda (filtr, yangilaş). - Qaçon emas: Birinçi yuklaniş → `skeleton`; Tugma içidagi jarayon → `button`; Sahifalararo ötiş → `toploader` - Variantlar: data-variant=blur (standart dim); data-scope=page (standart block) - Tokenlar: --fx-bg-page, --fx-ease-enter, --fx-ease-exit, --fx-font-size-sm, --fx-motion-base, --fx-motion-exit-fast, --fx-space-1, --fx-space-2, --fx-text-secondary ```html

    Haftalik hisobot

    24 ta yangi ariza, 6 ta yopilgan bitim.

    Yangilanmoqda…

    ``` - Qilmang: Ostidagi kontentni inert qilmay qoldirmang — fokus va bosiş yaşirin elementga ketadi. - Qilmang: Birinçi yuklanişda qoplama emas — skelet (kontent şaklini körsatadi). - Qilmang: Butun sahifa qoplamasini 1 soniyadan qisqa jarayonga qöymang — miltillaydi. ## Logolar bulutiga işonç (`logos`, beta, 0.28.0 dan) Ijtimoiy isbot qatori (4.175): qisqa sarlavha («… jamoalar işonadi») va mijoz yoki hamkor logolari. Logolar kulrang va biroz xira — sahifani bezamaydi, hover yoki fokusda asl rangiga qaytadi. data-layout: row (standart — markazda oqim), grid (çegarali kataklar). Harakatli variant — röyxatni .fx-marquee içiga qöying (.fx-marquee__track fx-logos__list). Logo — currentColor'li SVG yoki rasm. - Qaçon: Hero ostida yoki narx sahifasida işonç belgisi. Integratsiyalar va hamkorlar röyxati (grid). - Qaçon emas: Mijoz fikrlari → `testimonials`; Bosiladigan integratsiya kartalari → `card` - Variantlar: data-layout=grid (standart row); data-tone=color (standart mono) - Tokenlar: --fx-bg-page, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-popover-width, --fx-radius-badge, --fx-radius-surface, --fx-size-icon-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-4, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Bizning yeçimlar bilan işlayotgan jamoalar

    • Çorsu Market
    • Navbahor Soft
    • Ipak Yöli Lab
    • Registon Media
    • Tashkent Digital
    • Samarqand Travel
    • Çorsu Market
    • Navbahor Soft
    • Ipak Yöli Lab
    • Registon Media
    • Tashkent Digital
    • Samarqand Travel
    • Çorsu Market
    • Navbahor Soft
    • Ipak Yöli Lab
    • Registon Media
    • Tashkent Digital
    • Samarqand Travel
    ``` - Qilmang: Ruxsatsiz mijoz logosini qöymang. - Qilmang: Logolarni turli balandlikda qoldirmang — optik bir xil ölçamga keltiring. - Qilmang: 12 tadan ortiq logoni harakatsiz qatorga tiqmang — grid yoki marquee. ## Magnit tugma (`magnet`, beta, 0.29.0 dan) Kursor yaqinlaşganda tugma unga biroz tortiladi (Aceternity Magnetic Button): tugmaning özi kuç uluşida, içidagi yozuv (.fx-magnet__label) yana biroz köproq siljiydi — qatlamli «tirik» his. Maydon tugma atrofida (data-range, px), kuç data-strength (0–1, standart 0,35), eng köp siljiş çegaralangan — tugma qoçib ketmaydi. Kursor ketsa, prujina bilan joyiga qaytadi. data-shape="orb" — landing uçun katta yumaloq CTA. Faqat siçqonçada; klaviatura, barmoq, harakat kamaytirilgan, calm va none rejimda tugma joyida. - Qaçon: Landing hero yoki footer'dagi asosiy CTA. Portfolio sahifasidagi «Boğlaniş» doira tugmasi. - Qaçon emas: Oddiy amal tugmasi → `button`; Bosiliş tölqini kerak bölsa → `ripple` - Variantlar: data-shape=auto|orb (standart auto) - Tokenlar: --fx-control-h-lg, --fx-ease-bounce, --fx-ease-standard, --fx-font-size-md, --fx-magnet-x, --fx-magnet-y, --fx-motion-fast, --fx-motion-slower, --fx-radius-circle ```html
    Demo köriş
    ``` - Qilmang: Bir ekranda bittadan ortiq magnit tugma qöymang — asosiy CTA uçun. - Qilmang: Forma, jadval yoki menyu tugmalariga qöymang — aniq bosiş muhim joyda çalğitadi. - Qilmang: Kuçni 0,6 dan oşirmang — tugma kursordan «qoçadi». ## Xarita markeri (`mapmarker`, beta, 0.29.0 dan) Xarita ustidagi marker (4.206, Base Web «Map Marker», Aceternity «3D Pin»): MapLibre, Leaflet yoki Yandex xaritasiga HTML marker sifatida qöyiladigan tugma. data-type: pin (standart — tomçi şaklli, içida ikon yoki harf, uçi aniq nuqtaga tegadi), price (narx tabletkasi dumli — kvartira, e'lon, yetkaziş narxi; körilgani data-seen bilan xira), dot (nuqta — «Siz şu yerdasiz», data-pulse bilan tölqin), cluster (yaqin markerlar soni, data-size sm/md/lg — bosilsa xarita yaqinlaşadi). Tanlangan — aria-pressed="true": kattaroq, brend rangida, biroz kötariladi va nom yorliği oçiq qoladi. Hover/fokusda nom yorliği (.fx-mapmarker__tip) çiqadi. Rang data-color (6 pastel). Namuna uçun .fx-mapmarker__map — haqiqiy xaritasiz katak fon; joy --fx-mapmarker-x / --fx-mapmarker-y. - Qaçon: Filiallar, dökonlar, kvartiralar, kuryer yoki buyurtma joylaşuvini xaritada körsatiş. Manzil tanlaş va «Men şu yerdaman» nuqtasi. - Qaçon emas: Raqamlar böyiça hudud xaritasi (issiqlik) → `heatmap`; Oddiy holat nuqtasi → `indicator`; Manzillar röyxati → `list` - Variantlar: data-type=pin|price|dot|cluster (standart pin); data-color=yellow|pink|blue|coral|green|purple (standart none); data-size=sm|md|lg (standart md); data-pulse=on (standart off) - Klaviatura: Tab — Markerlar orasida (DOM tartibida); Enter, Space — Markerni tanlaydi / cluster'ni yaqinlaştiradi - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-duration-pulse, --fx-ease-spring, --fx-ease-standard, --fx-fg-info, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-motion-loop, --fx-mapmarker-x, --fx-mapmarker-y, --fx-motion-base, --fx-motion-fast, --fx-motion-press, --fx-motion-shift-sm, --fx-radius-circle, --fx-radius-control, --fx-radius-pill, --fx-radius-surface, --fx-shadow-md, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-brand, --fx-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-viz-grid, --fx-z-raised ```html
    ``` - Qilmang: Yuzlab markerni birdaniga çizmang — yaqinlarini cluster'ga yiğing (supercluster va h.k.). - Qilmang: Tanlanganni faqat rang bilan bildirmang — ölçam, kötariliş va oçiq yorliq ham bor. - Qilmang: Markerni
    qilib qöymang — bosiladigan bölsa
    Markdown qöllanadi · rasmni taşlang yoki joylang · Ctrl+Enter — yuboriş
    ``` - Qilmang: Preview'da foydalanuvçi matnini ekranlamasdan innerHTML qilmang — xulq avval hammasini ekranlaydi, keyin faqat ruxsat etilgan teglarni yaratadi. - Qilmang: Formatlaş tugmalarini ikonkasiz va nomsiz qoldirmang — har birida aria-label va title (tugmalar birikmasi bilan). - Qilmang: Oddiy foydalanuvçilar uçun (mijoz formasi) markdown bermang — oddiy textarea yetarli. ## Yugurik qator (marquee) (`marquee`, beta, 0.28.0 dan) Logolar, fikrlar yoki teglar çeksiz suriladigan qator (4.71). Tasma bir marta nusxalanadi (nusxa ekran öquvçidan yaşirin), tezlik uzunlikdan hisoblanadi — har ekranda bir xil (data-speed, px/soniya, standart 40). Hover yoki klaviatura fokusi kelganda töxtaydi, ekrandan çiqsa pauza. Ikki çetda yumşoq söniş. Vertikal variant — fikrlar ustuni uçun; data-direction="reverse" — teskari yönaliş (ikki qatorli «qarama-qarşi» bezak). JS bölmasa yoki harakat kamaytirilsa — oddiy gorizontal scroll. - Qaçon: Mijoz logolari, integratsiyalar yoki komponentlar röyxati — «köp» ekanini his ettiriş. Fikrlar ustuni (vertikal) — landing pastida ijtimoiy isbot. - Qaçon emas: Foydalanuvçi boşqaradigan slaydlar → `carousel`; Logolarni harakatsiz körsatiş → `logos` - Variantlar: data-orientation=vertical (standart horizontal); data-direction=reverse (standart normal); data-gap=sm|lg (standart md); data-pause=none (standart hover) - Klaviatura: Tab — Qator içidagi havolaga fokus — harakat töxtaydi; Enter, Space — Pauza tugmasi harakatni töxtatadi / davom ettiradi - Tokenlar: --fx-duration-pulse, --fx-marquee-height, --fx-space-12, --fx-space-4, --fx-space-8, --fx-text-primary ```html
    • Tugma
    • Jadval
    • Kalendar
    • Grafik
    • Forma
    • Dialog
    ``` - Qilmang: Muhim ma'lumotni (narx, şart) yugurik qatorga qöymang — öquvçi uşlab ololmaydi. - Qilmang: Bitta sahifada ikkitadan ortiq yugurik qator qöymang. - Qilmang: Bosiladigan havolalarni juda tez qatorga qöymang — hover'da töxtaydi, lekin data-speed past bölsin. ## Maskali kiritiş (`mask`, beta, 0.23.0 dan) Şablon böyiça avtomatik formatlanadigan maydon: telefon +998 (__) ___-__-__, karta ____ ____ ____ ____. «#» — raqam, qolgani doimiy belgi; +998 bilan joylansa ham töğri kesiladi. Formatsiz qiymat — dataset.raw. - Qaçon: Telefon, karta, STIR — qat'iy tuzilmali raqamlar. - Qaçon emas: Pul miqdori → `currency`; Bir martalik kod katakçalari → `otp` - Klaviatura: 0–9 — Raqam kiritadi, ajratgiçlar özi qöşiladi; Backspace — Oxirgi raqamni öçiradi ```html ``` - Qilmang: Maskani tekşiruv örnida işlatmang — töliqlik data-complete, haqiqiylik alohida tekşiriladi. - Qilmang: Şablon içida harf kerak bölsa — oddiy input va pattern. ## Masonry (`masonry`, beta, 0.29.0 dan) Balandligi har xil kartalar (skrinşot, fikr, maqola) ustunlarga ziç joylanadi (4.73). Brauzer CSS masonry'ni qöllasa (display: grid-lanes yoki grid-template-rows: masonry) — kartalar qator tartibida; aks holda zaxira — CSS ustunlar (tartib ustun böylab yuqoridan pastga). Ustun soni kenglikka qarab özi özgaradi (eng tor ~15rem), data-cols — yuqori çegara. JS kerak emas. - Qaçon: Portfolio, skrinşotlar, mijozlar fikri, Pinterest kabi galereya — balandliklar har xil. - Qaçon emas: Bir xil kataklar yoki turli ölçamli xususiyatlar mozaikasi → `bento`; Rasm galereyasi bir xil nisbatda → `gallery` - Variantlar: data-cols=2|3|5 (standart 4); data-gap=sm|lg (standart md) - Tokenlar: --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-font-size-sm, --fx-font-size-xs, --fx-radius-surface, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-tertiary ```html
    • Ombor hisobi — ekran körinişi
      Ombor hisobiInventar · 3 kun oldin
    • Kassir ekrani — ekran körinişi
      Kassir ekraniPOS · 1 hafta oldin
    • Klinika navbati — ekran körinişi
      Klinika navbatiHelpdesk · bugun
    • Maktab jurnali — ekran körinişi
      Maktab jurnaliLMS · keça
    • Yetkazib beriş — ekran körinişi
      Yetkazib berişLogistika · 2 kun oldin
    • Hisob-faktura — ekran körinişi
      Hisob-fakturaERP · bugun
    • Mijoz kartasi — ekran körinişi
      Mijoz kartasiCRM · 5 kun oldin
    ``` - Qilmang: Tartib muhim bölgan röyxat (yangiliklar lentasi, jadval) uçun işlatmang — zaxira rejimida köz ustun böylab yuradi. - Qilmang: Bir xil balandlikdagi kartalar uçun kerak emas — oddiy tör (fx-grid) yetarli. - Qilmang: Çeksiz yuklaşda yangi kartalar yuqoridagilarni siljitmasin — rasmga width/height bering. ## Material (şişa) (`material`, experimental, 0.58.0 dan) Material öqi (tajriba, 20.10 — DS tadqiqoti: iOS 26, HyperOS 3, One UI 8.5, ColorOS 16, HarmonyOS 6, Telegram «şişa»ga ötdi): data-fx-material="glass-weak | glass | glass-strong" — uç daraja (HarmonyOS kabi). Faqat ustki qatlamlar şişaga aylanadi: popover, menyu, dialog, varaq, buyruqlar oynasi, hover karta, yopişqoq tepa panel va sayt sarlavhasi; kartalar va jadvallar tekis qoladi (öqiliş birinçi). Tizimda «kamroq şaffoflik» yoki Harakat «yöq» bölsa — töliq tekis. Berilmasa — heç narsa özgarmaydi. yoki istalgan blokka qöyiladi. - Qaçon: Rasm, xarita, video yoki rangli fon ustida oçiladigan menyu, popover, dialog. Kontent ostidan ötadigan yopişqoq tepa panel (aylantirişda kontent sezilib turadi). Zamonaviy, «2026» kayfiyatli libos (Apple, HyperOS, One UI uslubi). - Qaçon emas: Ma'lumot ziç ilova (CRM jadvali, hisobot) → `elevation`; Bitta yuzani kötariş (soya bilan) → `elevation` - Variantlar: data-fx-material=glass-weak|glass|glass-strong (standart solid) - Tokenlar: --fx-bg-page, --fx-bg-surface, --fx-border-color-surface, --fx-color-pastel-blue, --fx-color-pastel-pink, --fx-color-pastel-yellow, --fx-color-white, --fx-glass-alpha, --fx-glass-blur, --fx-glass-sat, --fx-radius-overlay, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-8 ```html
    Iş maydoniŞişa
    Buyurtma №4817Ertaga 10:00–14:00 orasida yetkaziladi.
    Kuçsiz — glass-weak
    Muvozanatli — glass
    Kuçli — glass-strong
    ``` - Qilmang: Kartalar, jadval va uzun matnli yuzalarga şişa bermang — öqilişi tuşadi; şişa — faqat ustki qatlam. - Qilmang: Rangli, notekis fon ustida kuçli şişani kiçik matn bilan işlatmang — muvozanatli yoki kuçsiz darajani tanlang. - Qilmang: Şaffoflikni qölda yozmang — daraja atributi yetarli; foydalanuvçining «kamroq şaffoflik» sozlamasi hurmat qilinadi. ## Jamoa a'zolari (`members`, beta, 0.28.0 dan) Jamoa a'zolari va takliflar sahifasi (naqş): örinlar hisobi (5 / 10), email bilan taklif (rol tanlaş bilan), a'zolar jadvali — rol, holat (Faol / Kutilmoqda), oxirgi faollik, amallar. Taklif darhol «Kutilmoqda» qatori bölib qöşiladi; olib taşlaş va bekor qiliş fxConfirm bilan tasdiqlanadi. - Qaçon: SaaS sozlamalarida jamoa, rollar va takliflarni boşqariş. CRM yoki loyiha iş maydoniga hamkasblarni çaqiriş. - Qaçon emas: Kim hozir onlayn ekanini körsatiş → `presence`; Köp ustunli, saralanadigan katta foydalanuvçilar bazasi → `datagrid` - Variantlar: data-state=active|pending (standart active) - Klaviatura: Enter (email maydonida) — Taklif yuboradi; Tab — Qatorlardagi rol tanlagiçi va amal tugmalari böylab; Esc (tasdiq oynasida) — Bekor qiladi, fokus tugmaga qaytadi - Tokenlar: --fx-bg-subtle, --fx-border-color-default, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-ease-enter, --fx-ease-exit, --fx-fg-success, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-exit-base, --fx-radius-surface, --fx-space-1, --fx-space-12, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Jamoa a'zolari

    Kim nimani köradi va özgartiradi — rol belgilaydi.

    Band örinlar: 5 / 10

    A'zoRolHolatOxirgi faollikAmallar
    AKAziz Karimovaziz@chorsu-savdo.uz
    		EgasiFaolHozir onlayn
    DRDilnoza Rahimovadilnoza@chorsu-savdo.uz
    		FaolBugun, 09:41
    BTBobur Toshmatovbobur@chorsu-savdo.uz
    		FaolKeça, 18:05
    MYMadina Yusupovamadina@chorsu-savdo.uz
    		Faol12-oktabr
    SRsardor@chorsu-savdo.uzTaklif 2 kun oldin yuborilgan
    		Kutilmoqda—
    ``` - Qilmang: Egasini olib taşlaş yoki rolini özgartiriş tugmasini körsatmang — «Egasi» matn bölib tursin; egalikni alohida «Egalikni topşiriş» oqimi ötkazadi. - Qilmang: Kutilayotgan taklifni faol a'zo bilan aralaştirib yubormang — «Kutilmoqda» holati, kursiv nom va çap çiziq bilan ajralib tursin. - Qilmang: Olib taşlaşni tasdiqsiz bajarmang — fxConfirm nima yöqolişini aytadi. ## Mention (`mention`, beta, 0.23.0 dan) Matn maydonida «@» yozilsa odamlar röyxati oçiladi: yozgan sari filtrlanadi; ↑ ↓ va Enter/Tab «@nom» ni joylaydi, Esc yopadi. Izoh, topşiriq, xabar maydonlari uçun. - Qaçon: Izoh yoki topşiriq matnida odamni eslaş (@). - Qaçon emas: Odamni alohida maydonda tanlaş → `combobox` - Klaviatura: @ + harf — Röyxatni oçadi va filtrlaydi; ↑ ↓ — Variant; Enter, Tab — Tanlaydi; Esc — Yopadi - Tokenlar: --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-sm, --fx-radius-overlay, --fx-shadow-lg, --fx-space-1 ```html
    ``` - Qilmang: Mention röyxatini @ işlatilmaydigan maydonda oçmang. - Qilmang: Röyxatsiz erkin @ matn bölsa — oddiy textarea. ## Menyu (`menu`, beta, 0.11.0 dan) Tugma ostida oçiladigan amallar röyxati: bandlar, guruh sarlavhasi, ajratgiç, tugmalar maslahati, xavfli band, belgilanadigan bandlar. Native popover + foxui.js (klaviatura). Içki menyu (→ bilan oçiladi) va menyu içida qidiruv ham bor. Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi. - Qaçon: Qator amallari, «Yana» tugmasi, foydalanuvçi menyusi. - Qaçon emas: Sahifa navigatsiyasi → `nav`; Forma maydonida qiymat tanlaş → `select` - Variantlar: data-fx-adaptive=true - Klaviatura: Enter, Space, ↓ — Trigger: oçadi, birinçi bandga fokus; ↑ ↓ — Bandlar böylab; Home, End — Birinçi / oxirgi band; Harf — Şu harfdan boşlanadigan bandga; Esc — Yopadi, fokus triggerga; →, Enter, Space — Içki menyuni oçadi, birinçi bandga fokus; ←, Esc — Içki menyuni yopadi, fokus ota bandga; ↓ (qidiruvdan) — Birinçi bandga - Tokenlar: --fx-bg-muted, --fx-bg-overlay, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-sm, --fx-ease-enter, --fx-ease-exit, --fx-ease-sheet, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-scale-enter, --fx-motion-shift-sm, --fx-motion-slow, --fx-popover-width, --fx-radius-circle, --fx-radius-nav, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-sm, --fx-size-touch-target, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-brand, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-tertiary ```html ``` - Qilmang: Menyuga forma yoki uzun matn qöymang — popover yoki dialog. - Qilmang: Bitta bandli menyu qilmang — oddiy tugma. - Qilmang: Içki menyuni ikki bosqiçdan çuqur qilmang — murakkab tanlov uçun dialog yoki buyruqlar oynasi. - Qilmang: Qidiruvni 7 tagaça bandli menyuga qöymang — keraksiz. ## Menubar (`menubar`, beta, 0.29.0 dan) Ilova menyu qatori (4.148, APG menubar): «Fayl · Tahrir · Köriniş · Yordam» — hisobot konstruktori, hujjat tahrirlovçi, jadval muharriri kabi köp buyruqli ilovalar uçun. Har trigger ostida menyu; içki menyu (Eksport → Excel/PDF), belgilanadigan (menuitemcheckbox) va bittasi tanlanadigan (menuitemradio) bandlar, tugma yorliği (kbd), ajratuvçi, öçiq band. Bitta menyu oçiq bölsa, qöşni triggerga siçqonça yoki ← → bilan ötilganda u ham oçiladi. Tanlov — fx-menubar-select hodisasi. - Qaçon: Köp buyruqli iş muhiti: hisobot konstruktori, hujjat yoki jadval muharriri. Buyruqlar guruhlari doimiy körinib tursin («Fayl», «Tahrir»). - Qaçon emas: Bitta tugma ostidagi amallar röyxati → `menu`; Sayt bölimlari navigatsiyasi → `nav`; Ikon-tugmalar qatori → `toolbar` - Variantlar: data-variant=bar|flat (standart bar); data-tone=neutral|danger (standart neutral) - Klaviatura: ← / → — Qatorda oldingi / keyingi menyu (menyu oçiq bölsa — u ham oçiladi; içki menyuda → oçadi, ← yopadi); ↓ / Enter / Space — Menyuni oçadi, birinçi bandga; ↑ — Menyuni oçadi, oxirgi bandga; menyu içida — oldingi band; Home / End — Birinçi / oxirgi band; Enter — Bandni tanlaydi va menyuni yopadi; Space — Belgilanadigan bandni almaştiradi (menyu oçiq qoladi); Esc — Bir daraja yopadi, fokus triggerga; Tab — Hamma menyularni yopib, keyingi elementga; Harf — Şu harf bilan boşlanuvçi bandga - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-enter, --fx-ease-exit, --fx-ease-standard, --fx-elevation-3, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-exit-fast, --fx-motion-fast, --fx-motion-shift-sm, --fx-popover-width, --fx-radius-control, --fx-radius-nav, --fx-radius-overlay, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-tertiary, --fx-z-dropdown ```html ``` - Qilmang: Sayt navigatsiyasi (havolalar) uçun menubar işlatmang — u ilova buyruqlari uçun; sayt menyusi — nav yoki site-header. - Qilmang: Har bandni içki menyuga joylamang — 2 darajadan çuqur bölmasin. - Qilmang: Faqat rang bilan tanlangan holatni körsatmang — ✓ / ● belgisi bor. ## Xabar (AI) (`message`, experimental, 0.16.0 dan) Suhbat xabari: AI agent yoki odam — avatar, ism, vaqt, matn; foydalanuvçi xabari öngda brend tusida. Qöşimça: «yozmoqda» belgisi (.fx-typing) va AI yorliği (.fx-ai-label). Kengaytma: data-group=cont (ketma-ket, avatarsiz), .fx-message__variants (2/3), data-state=editing|error, .fx-message__retry, matn içida kod va jadval. - Qaçon: AI agent yoki odam bilan suhbat, izohlar lentasi. - Qaçon emas: Tizim xabari → `toast` - Variantlar: data-role=assistant|user (standart assistant) - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-category-purple-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-duration-pulse, --fx-ease-standard, --fx-fg-error, --fx-font-adjust-mono, --fx-font-family-mono, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-surface, --fx-radius-tag, --fx-size-avatar-md, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-status-dot-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-brand, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    MF
    Mister FoxAI

    FoxUI 0.15.0 çiqdi: buyruqlar oynasi va combobox. Sinovlar ötdi.

    Qolganlarni ham bajar.
    MF
    Mister Fox
    Ikkinçi xabar.
    npm i foxui
    ``` - Qilmang: AI yaratgan matnni yorliqsiz körsatmang — .fx-ai-label. ## Ölçagiç (`meter`, beta, 0.23.0 dan) Ma'lum diapazondagi qiymat: siğim, ball, mezon. Progress'dan farqi — jarayon emas, holat: maqsad belgisi (--fx-meter-target), zonalar (past/örta/yuqori, data-zones), şkala yorliqlari. Asosiy şakl — çiziqli (#54, WDS «Grafiklar»); bitta yirik körsatkiç kartasi uçun yarim doira (data-shape="gauge", 4.115): raqam markazda, maqsad çiziği, zonalar. Baholi şkala (data-variant="graded", Manbaa'dan otaga 19.10): 0–100 işonç yoki sifat bali — qizildan yaşilgaça gradient, har 10 ballda kesik, ▼ belgi, katta son va daraja sözi;
    bölsa oçilganda qismlar röyxati, data-shape="tile" — kvadrat nişon. - Qaçon: Qiymatning diapazondagi örni, maqsad yoki xavfli zona bilan. - Qaçon emas: Jarayon foizi → `progress`; Taqqoslaş (bir neçta toifa) → `barlist` - Variantlar: data-tone=success|warning|error (standart ink); data-size=sm|lg (standart md); data-zones=reverse; data-shape=line|gauge|tile (standart line); data-variant=graded (standart solid) - Tokenlar: --fx-bg-error-subtle, --fx-bg-success-subtle, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-color-amber-300, --fx-color-amber-600, --fx-color-black, --fx-color-green-600, --fx-color-red-300, --fx-color-red-600, --fx-control-h-lg, --fx-control-h-md, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-adjust-display, --fx-font-adjust-numeric, --fx-font-family-display, --fx-font-family-numeric, --fx-font-size-display-sm, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-bold, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-slow, --fx-radius-badge, --fx-radius-surface, --fx-shadow-sm, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-text-error, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-ink, --fx-viz-track ```html
    Davomat82 % · maqsad 90 %
    Server diski91 GB / 100 GB
    Mijoz qoniqişi · maqsad 8074
    IşonçlilikÖrta 43/100
    • Kiriş · Örta40/100
    • Hayoti · Past25/100
    • Manbalar · Juda yuqori88/100
    Işonç43 Örta ``` - Qilmang: Jarayon (yuklaniş) uçun işlatmang — progress. - Qilmang: Dashboard grafiklarida yarim doira işlatmang — çiziqli; gauge faqat bitta yirik körsatkiç kartasida (siğim, NPS) va raqami bilan. - Qilmang: Zonalar rangiga yolğiz tayanmang — qiymat matni (82 %) yonida yoziladi. - Qilmang: Diapazoni yöq qiymat uçun işlatmang. - Qilmang: Baholi şkalani jarayon foizi uçun işlatmang — progress. Daraja rangiga yolğiz tayanmang: söz (Past · Örta · Yuqori) yonida turadi. - Qilmang: Ballni «sovğa» qilmang: qiymat faqat hisobdan; qism max = 0 bölsa (jarima) — çiziqsiz, faqat matn. ## Pastga qadalgan yoziş oynalari (`minichat`, beta, 0.29.0 dan) Ekranning pastki öng burçagiga qadalgan kiçik oynalar (4.201, Gmail va Salesforce «Docked composer»): iş sahifasidan çiqmasdan bir neçta çat suhbati yoki yangi xat yonma-yon oçiq turadi. Har oyna: sarlavha tugmasi (avatar, nom, holat, yiğilganda öqilmaganlar soni) — bosilsa yiğiladi/oçiladi; «Kattalaştiriş» (aria-pressed) va «Yopiş»; tana — xabarlar (.fx-minichat__log) yoki xat maydonlari (.fx-minichat__fields) va pastda yoziş qatori. data-state: open, minimized (faqat sarlavha), expanded. Oçiq oynalar data-max dan oşsa eng eskisi özi yiğiladi. Xulq (data-fx-minichat): Esc oynani yiğadi va fokusni sarlavhaga qaytaradi; yopilganda fokus qöşni oynaga ötadi; hodisalar fx-minichat-toggle, fx-minichat-close (bekor qilinadigan — «Qoralama saqlansinmi?» uçun); root.fxMinichat.add(oyna). data-tone="brand" — sarlavha brend rangida. data-size="block" — hujjat namunasi (fixed emas). Telefonda oçiq oyna töliq kenglikda, yiğilganlar ostida qator böladi. - Qaçon: CRM, helpdesk va poçta ilovasida iş sahifasidan çiqmasdan suhbat yoki xat yoziş. Bir vaqtda 2–3 mijoz bilan yozişma. - Qaçon emas: Töliq suhbat sahifasi → `conversation`; Yordamçi AI paneli → `assistant`; Bitta yon panel (yozuv tafsiloti) → `sheet` - Variantlar: data-state=open|minimized|expanded (standart open); data-tone=brand (standart default); data-size=block (standart fixed); data-from=me (standart them) - Klaviatura: Enter, Space (sarlavhada) — Oynani yiğadi / oçadi; Esc (oyna ichida) — Oynani yiğadi, fokus sarlavhaga; Tab — Sarlavha → kattalaştiriş → yopiş → tana maydonlari - Tokenlar: --fx-bg-brand-solid, --fx-bg-error-solid, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-enter, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-shift-md, --fx-radius-badge, --fx-radius-control, --fx-radius-overlay, --fx-radius-pill, --fx-radius-surface, --fx-shadow-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary, --fx-text-tertiary, --fx-z-overlay ```html
    Bugun, 10:42

    Assalomu alaykum! Hisob-faktura FX-2026-0412 ni olsak böladimi?

    Vaalaykum assalom, hozir yuboraman.

    Rahmat, 5 ta örin uçun edi.

    ``` - Qilmang: 3 tadan ortiq oynani oçiq qoldirmang — data-max bilan çeklang, qolganlari yiğiladi. - Qilmang: Yozilgan matnni yopişda jimgina yöqotmang — fx-minichat-close'ni töxtatib qoralamani saqlang yoki sörang. - Qilmang: Muhim forma (tölov, röyxatdan ötiş) uçun işlatmang — u alohida sahifa yoki dialog. ## Qurilma ramkasi (`mockup`, beta, 0.29.0 dan) Skrinşot yoki jonli HTML'ni brauzer (manzil qatori va uçta nuqta) yoki telefon (yumaloq ramka, kesik) ramkasida körsatiş (4.75) — landing, hujjat va taqdimot uçun. Ramka faqat CSS: rasm faylisiz, ranglar mavzudan, yoruğ va qoronğida moslaşadi. Ekran içiga img, video yoki FoxUI bloklari qöyiladi; brauzer nisbati 16:10 (data-ratio="auto" — kontent balandligi), telefon 9:19,5. - Qaçon: Landing hero blokida mahsulot skrinşoti. Hujjatda «telefonda qanday körinadi» namunasi. - Qaçon emas: Oddiy rasm → `image`; Oldin/keyin soliştiriş → `compare` - Variantlar: data-device=browser|phone (standart browser); data-ratio=auto (standart 16/10); data-notch=none (standart island); data-shadow=none (standart lg) - Tokenlar: --fx-bg-muted, --fx-bg-page, --fx-bg-surface, --fx-border-color-default, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-font-size-xs, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-pill, --fx-radius-surface, --fx-shadow-lg, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Savdo CRMBoş sahifaBitimlarMijozlarHisobotlar
    Bitimlar · oktyabr
    Yangi
    48
    Muzokara
    17
    Yutildi
    9
    Oylik reja: 64 % · 312 mln söm
    CRM: bitimlar paneli
    Salom, Dilnoza
    Bugungi tuşum
    4,2 mln söm
    Yangi buyurtmalar: 12
    Kuryerda: 5
    Dökon ilovasi
    ``` - Qilmang: Muhim matnni faqat skrinşot içida bermang — alt yoki figcaption yozing. - Qilmang: Ramkani içki ilova oynasi (haqiqiy UI) sifatida işlatmang — bu namoyiş uçun. - Qilmang: Bitta ekranda 3 tadan köp ramka qöymang. ## Şakl morfi (`morph`, beta, 0.29.0 dan) Tugma bosilganda va tanlanganda yoyi prujina bilan özgaradi (M3 Expressive shape morph): standart — yumaloq tugma bosilganda yoki tanlanganda kvadratroq böladi; data-fx-morph="round" — aksinça. Faqat burçak özgaradi, ölçam va joy sakramaydi. .fx-morph — tugma guruhi (oraliq bilan) yoki data-variant="connected" — yopişgan guruh: içki burçaklar kiçik, tanlangan tugma töliq yumaloqlanadi. Tanlangan holat aria-pressed / aria-checked / aria-selected yoki içidagi radio/checkbox orqali — JS şart emas (aria-pressed uçun togglegroup xulqi). Harakat kamaytirilsa şakl darhol almaşadi. - Qaçon: Davr tanlaş (Kun · Hafta · Oy), köriniş almaştiriş — landing yoki dashboard sarlavhasida. Asosiy CTA tugmasiga «tirik» bosiliş hissi beriş (expressive ekran). - Qaçon emas: Ilova içidagi oddiy segment tanlov → `togglegroup`; Vositalar paneli tugmalari → `toolbar` - Variantlar: data-fx-morph=square|round (standart square); data-variant=gap|connected (standart gap) - Klaviatura: Tab — Guruhga kiradi (togglegroup bilan — tanlangan tugmaga); ← → — Guruh içida keyingi tugma (togglegroup yoki radio); Space / Enter — Tanlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-hover, --fx-bg-muted, --fx-border-color-focus, --fx-border-width-focus, --fx-control-h-md, --fx-ease-spring, --fx-ease-standard, --fx-motion-fast, --fx-motion-instant, --fx-motion-slow, --fx-radius-control, --fx-space-1, --fx-text-on-brand, --fx-text-primary ```html
    Köriniş

    ``` - Qilmang: Şakl özgarişini yagona belgi qilmang — tanlangan tugma rangi ham boşqaça (guruhda avtomatik). - Qilmang: Jadval va ziç forma içidagi tugmalarga qöymang — bu ifodali (expressive) ekranlar uçun. - Qilmang: Bir guruhda morfli va morfsiz tugmalarni aralaştirmang. ## Harakat qatlami (`motion`, beta, 0.28.0 dan) Zamonaviy CSS harakat qatlami. Prujina sxemasi (4.25, M3 Expressive): --fx-spring-spatial-fast|default|slow — joy/ölçam uçun (biroz oşib ketadi), --fx-spring-effects-* — rang/şaffoflik uçun (oşib ketmaydi); qiymat transition'ga tayyor juftlik, calm'da sakramaydi, expressive'da sekin prujina sakraydi; fx-spring data-spring="spatial|effects|both" — tayyor ötiş. Scroll'ga boğliq kiriş (4.31): data-fx-reveal="up|fade|blur|scale" — blok köriniş maydoniga kirganda paydo böladi (animation-timeline: view()), qöllanmasa darhol körinadi. Öqiş progress çiziği (4.32): fx-scroll-progress — sahifa aylantirilgani sari töladi (scroll() timeline). Aylanuvçi raqam (4.35): fx-ticker + data-fx-ticker — qiymat özgarganda raqamlar barabandek aylanadi (özbekça format: 126 400 000), birinçi aylaniş körinişda. - Qaçon: Joy/ölçam özgarişi (panel oçilişi, karta kengayişi) — spatial prujina; rang/şaffoflik — effects. Landing va hujjat sahifasida bloklarning paydo bölişi; uzun maqolada öqiş progressi. Dashboard KPI qiymati yangilanganda (jonli tuşum, sotuvlar soni). - Qaçon emas: Röyxat elementlarining ketma-ket kirişi → `list`; Vazifa bajariliş foizi → `progress`; Özgariş foizi belgisi → `delta` - Variantlar: data-spring=effects|spatial|both (standart effects); data-speed=fast|default|slow (standart default); data-fx-reveal=up|fade|blur|scale (standart up); data-position=fixed|sticky (standart fixed); data-size=md|sm (standart md); data-tone=brand|accent|up|down (standart brand); data-decimals=0|1|2 (standart 0) - Tokenlar: --fx-bg-brand-solid, --fx-duration-stagger, --fx-ease-bounce, --fx-ease-emphasized, --fx-ease-enter, --fx-ease-spring, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-knob-motion, --fx-line-height-tight, --fx-motion-base, --fx-motion-fast, --fx-motion-scale-enter, --fx-motion-shift-lg, --fx-motion-shift-md, --fx-motion-slow, --fx-motion-slower, --fx-space-1, --fx-space-2, --fx-spring-effects-default, --fx-spring-effects-fast, --fx-spring-effects-slow, --fx-spring-spatial-default, --fx-spring-spatial-fast, --fx-spring-spatial-slow, --fx-viz-accent, --fx-z-sticky ```html
    Bugungi tuşum
    48 750 000 söm
    Har 5 daqiqada yangilanadi

    Yangi mijozlar

    Oktabr oyida 42 ta yangi mijoz qöşildi — eng köpi Samarqand filialida.

    Karta xiralikdan çiqadi
    ``` - Qilmang: transition'da xom ms yoki cubic-bezier yozmang — --fx-spring-* juftligini işlating. - Qilmang: Rang va şaffoflikka sakrovçi (spatial) prujina bermang — u faqat joy, ölçam va buriliş uçun. - Qilmang: Muhim kontentni data-fx-reveal ortiga yaşirmang deb qörqmang — qöllanmasa darhol körinadi; lekin birinçi ekrandagi (LCP) blokka reveal qöymang. - Qilmang: Raqamni har soniyada aylantirmang — ticker qiymat haqiqatan özgarganda işlaydi. ## Xabar amallari paneli (`msgactions`, beta, 0.23.0 dan) Javob ostidagi ikonli amallar: nusxa (✓ bilan tasdiqlanadi), qayta yaratiş, yoqdi/yoqmadi, tahrir, variantlar tarmoği ‹ 2/3 ›. Toolbar naqşi: Tab bilan bitta kiriş, içida ← →. data-reveal="hover" — desktop'da faqat xabar ustida körinadi. - Qaçon: AI javobi yoki xabar ostida tezkor amallar. - Qaçon emas: Ikkilamçi amallar köp bölsa (menyuga yiğing) → `menu` - Variantlar: data-reveal=hover (standart always) - Klaviatura: Tab — Panelga kiriş/çiqiş; ← → — Tugmalar orasida; Home, End — Birinçi/oxirgi; Enter, Space — Amalni bajaradi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-spring, --fx-ease-standard, --fx-fg-success, --fx-font-size-xs, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-control, --fx-size-icon-md, --fx-space-1, --fx-text-brand, --fx-text-disabled, --fx-text-primary, --fx-text-tertiary ```html
    MF
    Mister FoxAI

    Tayyor: 12 ta nofaol mijoz arxivga köçirildi, hisobot qayta hisoblandi.

    ``` - Qilmang: Ikon-tugmaga aria-label bermay qoldirmang. - Qilmang: Yoqdi/yoqmadi holatini faqat rangga tayantirmang — aria-pressed va töldirilgan ikon bor. - Qilmang: Sensorli ekranda panelni yaşirmang — u yerda doim körinadi (şunday qilingan). ## Köp tanlov (`multiselect`, beta, 0.23.0 dan) Bir neçta variant tanlanadigan maydon: tanlanganlar maydonda chip, ostida belgili (checkbox şaklli) röyxat. Yozib qidiradi, Enter/Space belgilaydi, Backspace oxirgi chipni olib taşlaydi; «+n» (data-visible), «3 ta tanlandi» (data-mode="count"), eng köpi (data-max), «Hammasini tanlaş», forma uçun yaşirin maydonlar (data-name) (#28). - Qaçon: 5+ variantdan bir neçtasini tanlaş (filtr, teg, huquqlar). - Qaçon emas: Bitta variant tanlanadi → `combobox`; 2–4 ta variant → `check` - Variantlar: data-mode=chips|count (standart chips) - Klaviatura: ↓ ↑ — Röyxatni oçadi, faol variantni siljitadi; Enter — Faol variantni belgilaydi/olib taşlaydi; Space — Maydon böş bölsa — faol variantni belgilaydi; Backspace — Maydon böş bölsa — oxirgi chipni olib taşlaydi; Esc — Röyxatni yopadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-field, --fx-bg-surface, --fx-border-color-default, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-fast, --fx-popover-width, --fx-radius-badge, --fx-radius-control, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-disabled, --fx-text-primary, --fx-text-tertiary ```html
    Bir neçtasini tanlaş mumkin
    ``` - Qilmang: 2–3 tagaça variant bölsa köp tanlov örniga checkbox guruhini qöying. - Qilmang: Tanlovni faqat rang bilan körsatmang — röyxatda belgi (✓ katak), maydonda chip. - Qilmang: Eng köp sonni (data-max) yaşirmang — ostida yozib qöying. ## Yon menyu (`nav`, beta, 0.1.0 dan) Yon menyu (S1): band 40, ikonka + nom (bitta qator «…»), son — xira pill, tanlangan — brend tusi; guruh sarlavhasi, içki bandlar uzuq yöl çiziğida, pastki bandlar tagda. Yiğilgan holat (data-collapsed) — ikonkalar ustuni, karkas xulqi bilan. Kengaytma: data-pinned (sevimlilar guruhi), .fx-nav__new (“Yangi” belgisi) / [data-new] nuqta, .fx-nav__search. - Qaçon: Ilova yon menyusi: bölimlar orasida ötiş. - Qaçon emas: Bir sahifa içidagi körinişlar → `tabs` - Variantlar: data-collapsed=off|on (standart off); data-pinned=true - Klaviatura: Tab, Enter — Bandga ötadi; Enter, Space — Guruh tugmasida — içki bandlarni oçadi/yopadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-pill, --fx-motion-base, --fx-motion-fast, --fx-nav-item-height, --fx-nav-subitem-height, --fx-nav-width, --fx-nav-width-collapsed, --fx-radius-badge, --fx-radius-circle, --fx-radius-nav, --fx-radius-pill, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-status-dot-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html ``` - Qilmang: Tanlangan bandga çap rangli çiziq yoki qora pill qöymang — brend tusi. - Qilmang: Uzun nomni ikki qatorga tuşirmang va şriftni kiçraytirmang — «…» va title. ## Bildirişnoma sozlamalari (`notifprefs`, beta, 0.28.0 dan) Bildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova). Ustun sarlavhasida va qator oxirida «hammasi» (qisman — «–»). Ulanmagan kanal öçiq va «Ulaş» havolasi bilan; xavfsizlik xati — «majburiy». - Qaçon: Profil yoki jamoa sozlamalarida: qaysi hodisa haqida qaysi kanal orqali xabar oliş. Bir neçta kanal (email, Telegram, ilova, SMS) va 5+ hodisa bölganda. - Qaçon emas: Bitta yoqiş/öçiriş sozlamasi → `check`; Ruxsatlar guruhi (köp tanlov röyxati) → `checklist` - Klaviatura: Tab / Shift+Tab — Checkbox'lar böylab; Space — Belgilaş; «hammasi» — butun ustun/qatorni almaştiradi - Tokenlar: --fx-bg-muted, --fx-bg-page, --fx-bg-subtle, --fx-border-color-default, --fx-border-width-default, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-5, --fx-text-brand, --fx-text-disabled, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Qaysi xabarlarni qayerga olasiz

    HodisaEmailTelegramIlovaUlanmagan · UlaşHammasi
    Savdo
    Yangi arizaSaytdagi forma yoki Telegram botdan
    Tölov tuşdiSummasi va mijoz bilan
    Bitim bosqiçi özgardiSiz mas'ul bölgan bitimlar
    Vazifalar
    Vazifa muddati yaqinMuddatdan 1 soat oldin
    Haftalik hisobotHar duşanba, 09:00
    Xavfsizlik
    Yangi qurilmadan kirişŞahar va qurilma nomi bilanmajburiy
    ``` - Qilmang: Har katakka alohida switch qöymang — matritsada checkbox ixçamroq va «hammasi» bilan yaxşi işlaydi. - Qilmang: Ulanmagan kanalni yaşirmang — öçiq holda «Ulaş» havolasi bilan körsating, foydalanuvçi imkoniyatni bilsin. - Qilmang: Majburiy xabarni belgisiz öçiq qilib qöymang — «majburiy» sözi sababini aytadi. ## Bildirişnomalar markazi (`notify`, beta, 0.23.0 dan) Qönğiroq tugmasi (öqilmaganlar soni bilan) bosilsa panel oçiladi: «Hammasi / Eslatmalar» tablari, «hammasini öqilgan deb belgilaş», kun böyiça guruhlangan kiruvçilar (fx-inbox). Son va tugma yorliği özi yangilanadi. - Qaçon: Ilova tepa panelida umumiy bildirişnomalar markazi (eslatmalar, topşiriq yangiliklari). - Qaçon emas: Töliq sahifali kiruvçilar röyxati → `inbox`; Vaqtinçalik xabar (saqlandi, xato) → `toast` - Klaviatura: Enter, Space — Tugma: panelni oçadi; ← → — Tablar orasida; Tab — Qator havolalari va amallariga; Esc — Panelni yopadi - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-dialog-width, --fx-ease-enter, --fx-ease-exit, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-scale-enter, --fx-motion-shift-sm, --fx-popover-width, --fx-radius-overlay, --fx-shadow-lg, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary ```html

    Bildirişnomalar

    Bugun

    Keça

    ``` - Qilmang: Bildirişnomalarni toast bilan takrorlamang — toast faqat şu zahoti kerakli narsa uçun. - Qilmang: Sonni tugma yorliğisiz qoldirmang — ekran öqigiç «N ta yangi»ni eşitişi kerak (xulq özi yozadi). ## «Hozir» paneli (`now`, beta, 0.55.0 dan) Jonli holat plitkalari (2–4 ta): ikon + katta qiymat (soat, quyoş, harorat, kurs, bayram) + izoh + manba. Soat — data-fx-clock: har soniya yangilanadi, vaqt mintaqasi data-tz (IANA), JS'siz — server vaqti; qolgani serverdan. Manba eskirgan bölsa (data-stale) — manba qatori ogohlantiriş rangida, sana bilan. Tor joyda 2×2, toq oxirgisi butun qator. Manbaa'dan (⑤, Fox MB topşirdi, 20.10). - Qaçon: Şahar, mamlakat yoki ofis sahifasi sarlavhasi ostida: mahalliy vaqt, quyoş, ob-havo, kurs, yaqin bayram. Dashboard'da tizim holati (jonli soat, oxirgi sinxron). - Qaçon emas: Biznes körsatkiçi va uning özgarişi → `stat`; Bitta raqam katta → `count` - Variantlar: data-stale=true - Tokenlar: --fx-bg-subtle, --fx-bg-surface, --fx-border-color-surface, --fx-border-width-default, --fx-fg-warning, --fx-font-adjust-numeric, --fx-font-family-numeric, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-radius-surface, --fx-size-icon-md, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Toşkentdan 3 soat orqada · UTC+2
    08:17 — 18:55Quyoş (Parij) · kun 10 soat 38 daqiqa
    +16 °CParijda · şamol 3,5 m/s · namlik 56 %MET Norway · 8 kun oldin
    1-noyabrBarça avliyolar kuniKeyin: 11-noyabr — Yaraş kuni
    ``` - Qilmang: Ma'lumot yöq plitkani «—» bilan körsatmang — umuman çiqarmang. - Qilmang: Eskirgan ma'lumotni sanasiz bermang — manba va «8 kun oldin» yozing. - Qilmang: Törttadan köp plitka qöymang — panel tezkor nazar uçun. ## Son maydoni (`number`, beta, 0.14.0 dan) Butun yoki önli son: − / + tugmalari (çegarada öçadi) va qölda yoziş. Native input type="number", min/max/step brauzerda; tugmalar foxui.js'da. Kengaytma: data-size=sm|lg, .fx-number__affix (valyuta/foiz/birlik), data-align=end. Formatlaş (4.96): data-format="number|percent|compact" — yozilayotganda minglik ajratgiç (1 200 000), kasr vergul bilan, foiz va qisqa köriniş («1,2 mln»); formaga xom son yaşirin inputda ketadi. Sudrab qiymat va ğildirak (4.97): data-scrub — .fx-number__scrub yorliğini çapga-öngga sudraş qiymatni özgartiradi (data-scrub="4" — bir qadam neça pikselda; Shift ×10, Alt ×0,1), data-wheel — maydon fokusda bölganda siçqonça ğildiragi (fokussiz sahifa odatdagidek aylanadi). Maket, rasm va grafik muharrirlari uçun. - Qaçon: Kiçik butun son: miqdor, soni, kun. - Qaçon emas: Taxminiy diapazon → `slider`; Raqamli identifikator → `input` - Variantlar: data-size=sm|lg; data-format=number|percent|compact; data-width=full; data-scrub=; data-wheel= - Klaviatura: ↑ ↓ — Bir qadam oşiradi/kamaytiradi; PgUp / PgDn — 10 qadam (formatli maydonda); Home / End — Eng kam / eng köp qiymat (formatli maydonda, çegara berilsa); Gʻildirak (fokusda) — data-wheel: bir qadam (Shift — 10) - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-bg-pressed, --fx-border-color-field, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-medium, --fx-knob-pill, --fx-motion-fast, --fx-radius-control, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-disabled, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html söm
    E B ↻
    ``` - Qilmang: Telefon, karta, PINFL uçun type="number" qilmang — matn maydoni + inputmode="numeric". - Qilmang: Katta summani formatsiz («12500000») körsatmang — data-format="number" guruhlab yozadi. - Qilmang: Sudrab qiymatni yagona yöl qilmang — maydonga yoziş va ↑ ↓ doim işlaydi (sudraş — tezlatgiç). - Qilmang: Ğildirakni fokussiz maydonga ulamang — sahifani aylantirayotgan odam qiymatni bilmasdan özgartiradi. ## Ulaniş / oflayn banneri (`offline`, beta, 0.28.0 dan) Internet uzilganini va qaytganini xotirjam bildiruvçi pastki tabletka (4.163, #74): «Internet yöq — özgarişlar qurilmada saqlanib turibdi» (+ «Qayta uriniş») va qaytganda qisqa «Internet qayta ulandi» (3 soniyadan keyin yaşirinadi). foxui.js navigator.onLine va online/offline hodisalarini kuzatadi — sahifaga bir marta qöyiladi. Teskari rangli (snackbar), belgi + söz bilan; data-position: pastda (standart), tepada yoki hujjat ichida (inline). - Qaçon: Forma, CRM yoki PWA — foydalanuvçi internetsiz ham işlayotgan bölişi mumkin bölgan har qanday ilova. Oflayn navbat (saqlanmagan özgarişlar) borligini bildiriş. - Qaçon emas: Butun sahifa oçilmasa (oflayn sahifa) → `result`; Bir martalik amal natijasi → `toast` - Variantlar: data-state=offline|online (standart offline); data-position=top|inline (standart bottom) - Klaviatura: Enter, Space — «Qayta uriniş» — ulanişni qayta tekşiradi - Tokenlar: --fx-bg-surface, --fx-border-width-default, --fx-color-pastel-green, --fx-color-pastel-yellow, --fx-ease-enter, --fx-font-size-sm, --fx-motion-base, --fx-motion-shift-md, --fx-radius-overlay, --fx-shadow-lg, --fx-size-icon-md, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-8, --fx-text-primary ```html

    Internet yöq — özgarişlar qurilmada saqlanib turibdi

    Internet qayta ulandi

    ``` - Qilmang: Internet yöqligini modal oyna bilan bildirmang — işni töxtatmasin. - Qilmang: «Xato» deb qörqitmang — nima saqlanib turganini ayting. - Qilmang: Bir sahifaga ikkita oflayn banner qöymang. ## Onboarding oqimi (`onboarding`, beta, 0.28.0 dan) Yangi foydalanuvçini kutib oliş oqimi (4.182): Xuş kelibsiz (vazifa tanlaş kartalari) → Profil → Jamoa taklifi → Tayyor. fx-wizard ustiga qurilgan naqş: çap ustunda brend, vertikal qadamlar (holati bilan) va yordam havolasi; öngda joriy qadam paneli va Orqaga / Davom etiş tugmalari. Qadam almaşganda panel yondan suriladi, yakunda ✓ belgisi prujina bilan çiqadi. Tekşiruv, fokus va qadam holatlari — wizard xulqi; telefonda bitta ustun. data-layout="page" — butun ekran (çegarasiz). - Qaçon: Röyxatdan ötgandan keyin birinçi sozlaş (rol, profil, jamoa). Mahsulotni foydalanuvçiga moslaş uçun 3–5 savol. - Qaçon emas: Uzoq muddatli «boşlaş» vazifalari → `checklist`; Interfeys böylab körsatmalar → `tour`; Oddiy köp qadamli forma → `wizard` - Variantlar: data-layout=page (standart card) - Klaviatura: ← → — Vazifa kartalari orasida; Enter — Keyingi qadam (oxirida — yuboriş); Tab — Maydonlar va tugmalar orasida - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-success-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-dialog-width, --fx-ease-bounce, --fx-ease-enter, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-semibold, --fx-knob-motion, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-motion-shift-lg, --fx-motion-slow, --fx-motion-slower, --fx-popover-width, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-lg, --fx-size-avatar-lg, --fx-size-control-sm, --fx-size-icon-lg, --fx-size-icon-md, --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-primary, --fx-text-secondary ```html

    Xuş kelibsiz

    Siz qaysi vazifada işlaysiz?

    Javobingizga qarab boş sahifani moslaymiz. Keyin sozlamalardan özgartiriş mumkin.

    Vazifangiz
    ``` - Qilmang: Onboardingni 5 qadamdan uzun qilmang — qolganini checklist'ga qoldiring. - Qilmang: Ixtiyoriy qadamni majburiy qilmang — «ötkazib yuboriş» mumkinligini ayting. - Qilmang: Birinçi qadamda karta yoki tölov söramang. ## Şar (orb) (`orb`, beta, 0.26.0 dan) AI yordamçining abstrakt «yuzi» — Siri şaridan ilhom: yuz, qöl, köz yöq, şuning uçun çizgi xatosi bölmaydi. Bitta rangdan (standart — brend, data-color — 6 toifa rangi, AI yordamçida — saytning brend rangi) töq yadro, uçta suzuvçi rang tölqini va şişasimon yaltiroq yasaladi. Holatlar: tinç (sekin nafas), öylayapti (tölqinlar tezlaşadi va içkariga buraladi), gapiryapti (urib turadi), menejerga ulaş (bir marta çaqnaydi). Içida Siri kabi ovoz tölqinlari — data-fx-orb bilan canvas lentalar (JS ~2 KB; JS bölmasa yoki harakat kamaytirilsa — gradient şar); AI yordamçida data-face="orb" bilan. - Qaçon: AI yordamçi, ovozli yordamçi yoki «tirik» agentning belgisi — personaj çizilmagan joyda. Agent öylayotgani yoki javob berayotganini körsatiş. - Qaçon emas: Odam yoki agentning harfli belgisi → `avatar`; Oddiy yuklaniş → `loading` - Variantlar: data-color=coral|pink|blue|green|yellow|purple (standart brand); data-size=sm|lg|xl (standart md); data-state=thinking|talking|handoff (standart idle) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-static-light, --fx-duration-pulse, --fx-duration-slower, --fx-ease-standard, --fx-motion-slow, --fx-radius-circle, --fx-size-avatar-lg, --fx-size-avatar-md, --fx-size-avatar-sm ```html ``` - Qilmang: Şarni bezak uçun hamma joyga qöymang — u AI yordamçi yoki ovozli kiritiş belgisi. - Qilmang: Holatni faqat harakat bilan bildirmang — aria-label yoki yonidagi matnda holat söz bilan bölsin. ## Orbita (`orbit`, beta, 0.29.0 dan) Markaz (mahsulot logosi) atrofida bir yoki ikki halqada aylanuvçi ikonlar (4.78) — «qaysi xizmatlar bilan işlaydi» yoki modullar töplamini körsatiş uçun. Töliq CSS: halqa aylanadi, ikon teskari aylanib tik turadi, joyi avtomatik (halqada 8 tagaça). Çeksiz aylaniş faqat körinişda, hover yoki fokusda töxtaydi; harakat kamaytirilganda harakatsiz. - Qaçon: Landing sahifasida integratsiyalar yoki modullar töplami. Mahsulot «ekotizimi» bölimi. - Qaçon emas: Logolar qatori (mijozlar) → `logos`; Integratsiya oqimi (qayerdan qayerga) → `beam` - Variantlar: data-ring=inner|outer (standart outer); data-speed=slow (standart normal); data-size=sm (standart md); data-color=blue|green|pink|yellow|purple (standart surface) - Tokenlar: --fx-bg-category-blue, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-lg, --fx-control-h-md, --fx-duration-pulse, --fx-font-size-sm, --fx-font-weight-semibold, --fx-radius-circle, --fx-shadow-md, --fx-shadow-sm, --fx-size-icon-md, --fx-space-12, --fx-text-on-category, --fx-text-primary ```html
    Savdo
    CRM
    • Telegram
    • Email
    • IP-telefoniya
    • Tölov tizimi
    • Dökon
    • Hisobotlar
    • Mijozlar
    • Kalendar
    • Bitimlar
    ``` - Qilmang: Halqada 8 tadan köp ikon qöymang — ikki halqaga böling yoki röyxat işlating. - Qilmang: Orbitadagi ikonlarni bosiladigan asosiy amal qilmang — ular aylanadi; havola kerak bölsa, ostida röyxat bering. - Qilmang: Bitta sahifada bittadan ortiq orbita işlatmang. ## Taşkiliy tuzilma (`orgchart`, beta, 0.29.0 dan) Taşkiliy tuzilma (4.139): rahbar → bölimlar → xodimlar daraxti, tepadan pastga, boğlovçi çiziqlar bilan. Tugunlar yiğiladi (kartoçka ostidagi «−» / «+N» — yaşirin odamlar soni), kenglik siğmasa gorizontal aylanadi; data-layout="list" — tor ekran uçun çekinişli röyxat. Kartoçka: avatar, ism, lavozim; bölim uçun data-kind="unit" (avatarsiz). APG treeview klaviaturasi. - Qaçon: HR / kadrlar bölimi: kim kimga böysunadi. Kompaniya profili, bölimlar tuzilmasi, ruxsatlar ierarxiyasi. - Qaçon emas: Fayl va papkalar, menyu → `tree`; Jarayon bosqiçlari (ketma-ket) → `flow`; Ierarxik jadval (ustunlar bilan) → `treegrid` - Variantlar: data-layout=tree|list (standart tree); data-kind=person|unit (standart person) - Klaviatura: ↓ ↑ — Keyingi / oldingi körinadigan tugun; → — Yopiq tugunni oçadi; oçiq bölsa — birinçi böysunuvçiga; ← — Oçiq tugunni yopadi; aks holda rahbarga; Home / End — Birinçi / oxirgi tugun; * — Şu darajadagi hammasini oçadi; Enter / Boʻshliq — Tugunni tanlaydi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-radius-badge, --fx-radius-control, --fx-radius-pill, --fx-shadow-md, --fx-shadow-sm, --fx-size-checkbox, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    • Rustam SaidovBoş direktor
      • Dilnoza YusupovaSavdo bölimi rahbari
        • Aziz KarimovMenejer, Toşkent
        • Bobur RahimovMenejer, Samarqand
      • Malika SaidovaBoş hisobçi
        • Feruza IsmoilovaHisobçi
    ``` - Qilmang: 300 tadan köp tugunni bir ekranga oçmang — 2-darajadan pastini yiğilgan holda bering. - Qilmang: Lavozimni faqat rang bilan bildirmang (rahbar — kök) — yozuv bilan. - Qilmang: Fayl yoki menyu daraxti uçun işlatmang — tree. ## OTP / PIN kod (`otp`, beta, 0.22.0 dan) Bir martalik kod yoki PIN: har belgi alohida katakda. Yozilganda keyingi katakka ötadi, Backspace böş katakda orqaga qaytaradi, qöyiş (paste) va SMS-avto-töldiriş hamma kataklarga taqsimlanadi. Raqam yoki harf-raqam, yaşirin (●), 4/6 katak, ajratgiç, xato (silkiniş) va «Qayta yuboriş» taymeri. - Qaçon: SMS, email yoki ilova orqali kelgan qisqa kodni kiritiş; PIN. - Qaçon emas: Uzun parol yoki token → `input`; Sana yoki raqam diapazoni → `number` - Variantlar: data-size=lg (standart md); data-state=complete|error (standart —) - Klaviatura: 0–9 / harf — Belgini yozadi va keyingi katakka ötadi; Backspace — Katakni tozalaydi; böş bölsa oldingisiga qaytib tozalaydi; ← →, Home, End — Kataklar orasida yuriş; Ctrl+V — Kodni kataklarga taqsimlaydi - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-bg-surface, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-ease-standard, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-knob-pill, --fx-motion-fast, --fx-motion-instant, --fx-motion-slow, --fx-radius-circle, --fx-radius-control, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-disabled, --fx-text-error, --fx-text-primary, --fx-text-tertiary ```html Tasdiqlaş kodi

    6 xonali kod SMS orqali yuborildi.

    ``` - Qilmang: Kod uçun bitta uzun input + letter-spacing qilmang — katakka mos tuşmaydi. - Qilmang: Xatoni faqat rang bilan bildirmang — .fx-otp__msg matni ham özgarsin. - Qilmang: PIN/parolni oçiq körsatmang — data-mask bilan yaşiring. ## Overflow «+n» (`overflow`, beta, 0.22.0 dan) Bitta qatorga siğmagan teglar, avatarlar yoki amallar yaşiriladi, oxirida «+n» tugmasi çiqadi (aria-label «yana 3 ta»). Bosilsa hammasi qatorlarga öraladi. - Qaçon: Kartada teglar, avatarlar guruhi, ixçam panel amallari. - Qaçon emas: Avatarlar guruhi oddiy +N bilan → `avatar`; Tegni tanlaş → `chip` - Klaviatura: Enter, Space — «+n» — hammasini oçadi / yiğadi - Tokenlar: --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-font-size-xs, --fx-radius-badge, --fx-space-2, --fx-text-primary, --fx-text-secondary ```html
    ToşkentObunaKorxonaVIPQaytgan
    ``` - Qilmang: Yaşirilgan elementlar orasida yagona muhim amalni qoldirmang. - Qilmang: «+n» ni töğridan-töğri matn bilan almaştirmang — tugma bölib qolsin. ## Sahifa sarlavhasi (`page-header`, beta, 0.13.0 dan) Sahifa boşi: nom + soni, bitta qator izoh, öngda neytral amallar va bitta asosiy tugma. Sarlavha şrifti va moslaşuvi tokenlardan. Örinlar (2.140): tepada orqaga havola, meta qatori (holat, sana, muallif), ostida tablar, amallarning ortiqçasi «…» menyuda. Scrollda yiğiliş (4.155): data-collapse — yopişqoq, aylantirilganda katta sarlavha kiçik qatorga aylanadi, izoh va meta yaşirinadi (faqat CSS, scroll-driven). - Qaçon: Har ilova sahifasining boşi. - Qaçon emas: Karta içidagi sarlavha → `card` - Variantlar: data-collapse=true|surface - Tokenlar: --fx-bg-page, --fx-bg-surface, --fx-border-color-default, --fx-border-color-strong, --fx-border-width-default, --fx-font-adjust-display, --fx-font-adjust-sans, --fx-font-family-display, --fx-font-family-sans, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-sm, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-radius-circle, --fx-space-1, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-secondary, --fx-text-tertiary ```html
    Arizalar

    Ariza #248 Yangi

    • Aziz Karimov
    • 12-oktabr, 14:30
    • Saytdagi forma
    Ism, telefon, holat.

    Bitimlar 128

    Faol bitimlar · yangilangan 10:42

    Röyxat… pastga aylantiring — sarlavha kiçrayadi.

    …

    ``` - Qilmang: Ikkita asosiy tugma qöymang. - Qilmang: Sahifa amallarini tepa panelga köçirmang. ## Oldingi / keyingi (`pager`, beta, 0.23.0 dan) Hujjat va maqola oxiridagi ikki katta havola (#88): oldingi (çapda) va keyingi (öngda) sahifa nomi bilan. Bittasi bölmasa ikkinçisi öz joyida qoladi. Raqamli sahifalaş uçun — pagination. - Qaçon: Ketma-ket hujjat sahifalari, qöllanma qadamlari, maqolalar. - Qaçon emas: Röyxat sahifalari (1, 2, 3…) → `pagination`; Faqat ota sahifaga qaytiş → `back-link` - Klaviatura: Tab, Enter — Sahifaga ötadi - Tokenlar: --fx-bg-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-ease-standard, --fx-font-size-md, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-surface, --fx-space-1, --fx-space-10, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-tertiary ```html ``` - Qilmang: Yorliqqa «1, 2, 3» yozmang — sahifa nomi; raqamlar uçun pagination. - Qilmang: Ikkita havolani bir-biriga öxşatmang — keyingisi öngda (rel="next"). ## Sahifalaş (`pagination`, beta, 0.13.0 dan) Jadval ostida: «1–20 / 248» va oldingi/keyingi; kerak bölsa sahifa raqamlari (joriysi brend tusi), oraliq «…». Variantlar: minimal (faqat ‹ ›), sahifa hajmi tanlovi (native select), «Yana yuklaş» (cursor/çeksiz röyxat, körsatilgani çiziği bilan). - Qaçon: Köp sahifali jadval yoki röyxat. - Qaçon emas: Çeksiz lenta → `list` - Variantlar: data-variant=numbered|minimal|more (standart numbered) - Klaviatura: Tab, Enter — Sahifaga ötadi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-pressed, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-font-size-sm, --fx-font-weight-semibold, --fx-knob-pill, --fx-popover-width, --fx-radius-control, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-disabled, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html ``` - Qilmang: 10 tadan köp sahifa raqamini qatorga yozmang — «…». - Qilmang: «Yana yuklaş» bilan sahifa raqamini aralaştirmang — yoki cursor, yoki raqam. - Qilmang: Sahifa hajmi tanlovini 3–4 qiymatdan oşirmang (20 · 50 · 100). ## Parallaks qatlamlar (`parallax`, beta, 0.29.0 dan) Sahifa aylantirilganda qatlamlar turli tezlikda siljiydi (Aceternity Parallax Scroll va Hero Parallax): har [data-fx-parallax] element öz tezligida — slow, standart, fast yoki reverse (teskari). data-axis="x" — gorizontal qatorlar (qöşni qatorlar teskari yönalişda sirpanadi). JS'siz: scroll-driven animatsiya (animation-timeline: view()), şuning uçun asosiy oqimni band qilmaydi. Siljiş masofasi --fx-motion-shift-lg tokenidan; harakat kamaytirilsa, data-fx-motion="none" yoki brauzer qöllamasa — qatlamlar joyida turadi. .fx-parallax — çetidan çiqqanini kesuvçi konteyner. - Qaçon: Landing hero ostidagi loyihalar lentasi (Hero Parallax). Rasm galereyasi ustunlari turli tezlikda — çuqurlik hissi. - Qaçon emas: Blok körinişga kirganda bir marta paydo bölişi → `motion`; Logotiplar uzluksiz aylanişi → `marquee` - Variantlar: data-fx-parallax=slow|fast|reverse (standart normal); data-axis=y|x (standart y) - Tokenlar: --fx-motion-shift-lg, --fx-space-4 ```html
    Samarqand Grand
    Tong maktabi
    Zarafşon Tekstil
    Mehr klinikasi
    Boğ kafe
    Navoiy kitob
    Mehr klinikasi
    Boğ kafe
    Navoiy kitob
    Samarqand Grand
    Tong maktabi
    Zarafşon Tekstil
    Samarqand Grand
    Tong maktabi
    Zarafşon Tekstil
    Tong maktabi
    Zarafşon Tekstil
    Mehr klinikasi
    Zarafşon Tekstil
    Mehr klinikasi
    Boğ kafe
    ``` - Qilmang: Matn abzatslarini parallaks qilmang — öqiş qiyinlaşadi; faqat rasm, karta va bezak qatlamlari. - Qilmang: Bitta ekranda uçtadan ortiq tezlik işlatmang — tartibsiz körinadi. - Qilmang: Muhim tugma yoki formani siljiydigan qatlamga qöymang. ## Zarraçalar (`particles`, beta, 0.29.0 dan) Hero yoki CTA bloki ortidagi canvas qatlam (4.66): sekin suzuvçi nuqtalar, kursor yaqinida itariladi; data-links bilan yaqin nuqtalar ingiçka çiziq bilan boğlanadi («tarmoq», integratsiya mavzusi). Ota blok position: relative boʻlsa, butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. Rang mavzudan (matn yoki brend rangi) — yorugʻ va qorongʻida oʻzi moslashadi. Koʻrinmasa chizmaydi; harakat kamaytirilganda statik kadr. - Qaçon: Landing hero, «integratsiyalar» yoki CTA bloki ortida jonli, lekin tinç fon. Brend rangli banner içida (data-on="brand"). - Qaçon emas: Harakatsiz naqş yoki don → `bg`; Ikki tizim orasidagi aniq boğlaniş → `beam` - Variantlar: data-tone=brand|strong (standart subtle); data-on=brand (standart surface); data-links=on (standart off); data-fade=on (standart off); data-count=N (standart auto) - Tokenlar: --fx-bg-brand-solid, --fx-text-on-brand, --fx-text-primary ```html
    Integratsiyalar

    CRM, Telegram va 1C — bitta oqimda

    Arizalar sayt, bot va dökondan avtomatik tuşadi.

    Ulaşni boşlaş
    Obuna — 1-noyabrdan
    ``` - Qilmang: Zarraçani ma'lumot, jadval yoki forma ortiga qöymang — faqat bezak blokida. - Qilmang: Bitta sahifada bittadan ortiq harakatli fon işlatmang. - Qilmang: Nuqtalar sonini oşirib yubormang (≤ 120) — telefonda batareya sarflaydi. ## Bosqiç yöli (`path`, beta, 0.28.0 dan) CRM bitimi yoki ariza bosqiçlari chevronlar qatorida (4.140, SLDS «Path»): ötilgan — ✓ belgisi, joriy — töldirilgan va qalin, keyingilari — xira, yöqotilgan — ✕. Bosqiçni bosib köriş (tafsilot, körsatma) va öngdagi tugma bilan «Bosqiçni yakunlaş» yoki boşqa bosqiçni joriy qiliş. Telefonda faqat joriy bosqiç nomi yoziladi. - Qaçon: CRM bitimi, ariza, buyurtma — bitta yozuvning çiziqli bosqiçlari va keyingi qadamga ötkaziş. - Qaçon emas: Köp sahifali forma qadamlari → `wizard`; Faqat körsatiş uçun qadamlar → `steps`; Hodisalar tarixi → `timeline` - Variantlar: data-state=done|lost - Klaviatura: ← →, Home, End — Bosqiçlar orasida fokus; Enter / Boʻsh joy — Bosqiçni köriş (tanlaş); Tab — Amal tugmasiga ötadi - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-solid-hover, --fx-bg-brand-subtle, --fx-bg-error-solid, --fx-bg-muted, --fx-bg-subtle, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-press, --fx-radius-control, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-brand, --fx-text-on-brand, --fx-text-on-error, --fx-text-primary, --fx-text-secondary ```html
    ``` - Qilmang: 7 dan köp bosqiç bermang — chevronlar öqilmaydi; uzun jarayon uçun steps yoki timeline. - Qilmang: Bosqiç holatini faqat rang bilan bermang — ✓ / ✕ belgisi va aria-description bor. - Qilmang: Ommaviy navigatsiya (sahifalar) uçun işlatmang — bu bitta yozuvning holati. ## Içkaridan köriş paneli (`peek`, beta, 0.23.0 dan) Röyxat qatori bosilsa tafsilot paneli röyxat ustidan öng çetdan çiqadi — röyxat joyida qoladi, kontekst yöqolmaydi. Tepada oldingi/keyingi (J/K), hisoblagiç va yopiş (Esc). Modal emas. - Qaçon: Jadval yoki röyxatdagi yozuvni tez köriş va navbatdagisiga ötiş (CRM, kiruvçilar, vazifalar). - Qaçon emas: Modal tafsilot yoki forma → `sheet`; Röyxat va tafsilot doimiy yonma-yon → `split` - Klaviatura: Enter, Space — Qator: panelni oçadi; J / K — Keyingi / oldingi yozuv; Esc — Yopadi, fokus qatorga - Tokenlar: --fx-bg-brand-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-ease-exit, --fx-ease-sheet, --fx-font-size-lg, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-exit-slow, --fx-motion-instant, --fx-motion-slower, --fx-shadow-lg, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-5, --fx-text-tertiary ```html
    ``` - Qilmang: Panelni modal qilmang — maqsad röyxat bilan birga işlaş (modal kerak bölsa sheet). - Qilmang: Uzoq forma yoki köp bosqiçli jarayonni panelga solmang — alohida sahifa. ## Odam qatori (`persona`, beta, 0.22.0 dan) Avatar + ism + ikkinçi qator (rol, poçta, holat) + ixtiyoriy öng tomonda amal. Jadval, röyxat, izoh, faoliyat lentasida takrorlanadi. Ism — haqiqiy matn. - Qaçon: Odamni avatar bilan nomlaş: egasi, ijroçi, muallif, mijoz. - Qaçon emas: Faqat avatar, matnsiz → `avatar`; Köp odam, ustunlar bilan → `table` - Variantlar: data-size=sm|lg (standart md) - Klaviatura: Tab, Enter — Havola bölsa (a.fx-persona) profilga ötadi - Tokenlar: --fx-border-color-focus, --fx-border-width-focus, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-radius-nav, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-tertiary ```html
    AK Aziz KarimovSavdo menejeri · onlayn
    Bobur Toshmatovbobur@namuna.uz
    ``` - Qilmang: Ismni faqat avatar alt matniga qöymang — körinadigan matn bölsin. - Qilmang: Ikkinçi qatorga uzun matn yozmang — bitta qator, «…» bilan qisqaradi. ## Bosqiç banneri (Alfa / Beta) (`phase`, beta, 0.28.0 dan) Sayt yoki xizmat tepasidagi ingiçka qator (4.164, GOV.UK Phase banner): «BETA — Bu sayt oçiq quriladi, fikringizni yozing». Mahsulot hali rivojlanayotganini halol aytadi va fikr bildiriş havolasini doim köz oldida tutadi («build in public»). data-phase: alpha, beta (standart), preview; ixtiyoriy öng tomonda versiya yoki sana. data-variant="pill" — hero ustida markazdagi ixçam tabletka. - Qaçon: Yangi xizmat, oçiq qurilayotgan mahsulot yoki beta funksiya — foydalanuvçi bosqiçni bilsin. Hero ustida «Yangi: …» tabletkasi (pill). - Qaçon emas: Vaqtinçalik e'lon (aksiya, texnik işlar) → `banner`; Holat yoki yangilik belgisi → `badge` - Variantlar: data-phase=alpha|preview (standart beta); data-variant=pill (standart bar) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-overlay, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-text-on-brand, --fx-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Beta

    FoxUI oçiq quriladi — har versiya qanday qurilayotgani körinib turadi. Fikr bildiring

    v0.27 · 18.10.2026
    Alfa

    Mijozlar kabineti ilk sinovda — xatolar bölişi mumkin. Xato haqida yozing

    Yangi

    Effektlar qatlami çiqdi — nima yangi

    ``` - Qilmang: Bannerni yopiladigan qilmang — bosqiç tugagunça turadi (yopiladigan e'lon — banner). - Qilmang: Uzun matn yozmang — bir qator: bosqiç + fikr havolasi. - Qilmang: Mahsulot barqaror bölgaç «Beta»ni qoldirmang — işonçni yöqotadi. ## Telefon raqam (`phone`, beta, 0.28.0 dan) Telefon maydoni mamlakat tanlagiçi bilan: çapda bayroq va kod (standart — Özbekiston +998), öngda raqam mamlakat niqobi bilan («90 123-45-67»). Formaga E.164 qiymat (+998901234567) yaşirin inputda ketadi. Töliq raqam yozilsa yoki joylansa («+7 701 …») mamlakat özi aniqlanadi. - Qaçon: Röyxatdan ötiş, buyurtma, ariza formasida telefon raqam (SMS tasdiq bilan). Mijozlar bir neçta mamlakatdan bölişi mumkin bölgan joyda. - Qaçon emas: Karta raqami, sana kabi boşqa qat'iy formatlar → `mask`; Bir martalik SMS kodni kiritiş → `otp` - Variantlar: data-size=sm|md|lg (standart md); data-country=UZ (standart UZ); data-countries=UZ KZ KG TJ RU (standart hammasi) - Klaviatura: Enter / Space (tugmada) — Mamlakatlar röyxatini oçadi, fokus qidiruvga; ↑ ↓, Home, End — Faol mamlakat; Harflar / raqam — Nomi yoki kodi böyiça qidiradi; Enter — Tanlaydi, fokus raqam maydoniga qaytadi; Esc — Röyxatni yopadi - Tokenlar: --fx-bg-field, --fx-bg-muted, --fx-border-color-default, --fx-border-color-error, --fx-border-color-field, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-md, --fx-control-h-sm, --fx-ease-standard, --fx-fg-success, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-weight-semibold, --fx-knob-field-fill, --fx-knob-pill, --fx-motion-fast, --fx-motion-press, --fx-popover-width, --fx-radius-control, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-disabled, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Tasdiqlaş kodi SMS orqali şu raqamga yuboriladi.

    ``` - Qilmang: Mamlakat kodini maydon içiga matn sifatida yozdirmang — kod tugmada turadi, foydalanuvçi faqat milliy raqamni teradi. - Qilmang: Raqamni «998901234567» körinişida körsatmang — niqob guruhlab körsatadi, serverga E.164 ketadi. - Qilmang: Faqat bayroq bilan mamlakatni bildirmang — kod (+998) ham yoniga yoziladi, ekran öquvçi nomini oladi. ## Pin tugmasi (☆) (`pin`, beta, 0.1.0 dan) Sahifa yoki körinişni çap relsga pin qiliş tugmasi (Ustoz 21.10, PDP rels naqşi): ☆ — pin qilinmagan, ★ — pin qilingan (ogohlantiriş rangida). Bosilganda holat almaşadi va «fx-pin» hodisasi çiqadi (detail: href, nom, on) — ilova saqlaydi (har a'zoning özi, serverda). Pinlar relsda ajratuvçi ostida — fx-rail .fx-rail__pins. - Qaçon: CRM, röyxat va hisobot sahifalarida — tez-tez oçiladigan körinişni relsga mahkamlaş. - Qaçon emas: Elementni sevimlilarga qöşiş (karta, mahsulot) → `rating` - Klaviatura: Enter / Space — Pin qiliş yoki oliş - Tokenlar: --fx-bg-muted, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-fg-warning, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-size-icon-md, --fx-text-primary, --fx-text-tertiary ```html

    Buyurtmalar

    ``` - Qilmang: Pinni brauzerda (localStorage) saqlamang — har a'zoniki, serverda (qurilmalar örtasida bir xil). - Qilmang: Tugmani yozuvsiz qoldirmang — aria-label holatga qarab özgaradi. ## Reja / vazifalar navbati (`plan`, beta, 0.23.0 dan) Agent rejasi: sarlavha, progress «3/7» va qadamlar. Holatlar: bajarildi (✓), joriy (halqa pulsatsiyasi, aria-current="step"), kutmoqda (böş halqa), ötkazib yuborildi (çiziq).
    bölsa yiğiladi. - Qaçon: Agent rejasi, bajarilayotgan vazifalar va navbat. - Qaçon emas: Foydalanuvçi boradigan köp bosqiçli jarayon → `steps`; Vaqt öqidagi hodisalar → `timeline`; Agent bajargan qadamlar izi → `trace` - Variantlar: data-state=active|done|skipped (standart pending) - Klaviatura: Enter, Space — Rejani yiğadi/oçadi (
    bölsa) - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-standard, --fx-fg-success, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-slow, --fx-radius-circle, --fx-radius-overlay, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-3, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Oktabr hisoboti rejasi3/6
    1. Bajarildi: Mijozlar jadvalini öqiş
    2. Bajarildi: Nofaol yozuvlarni topiş
    3. Bajarildi: Ruxsat söraş
    4. Hozir bajarilmoqda: Arxivga köçiriş
    5. Kutmoqda: Hisobotni qayta hisoblaş
    6. Ötkazib yuborildi: Telegramga xabar yuboriş
    ``` - Qilmang: Holatni faqat rang/ikon bilan bermang — yaşirin söz (fx-sr-only) qöying. - Qilmang: Bir vaqtda bittadan köp “joriy” qadam belgilamang. - Qilmang: 7–8 dan köp qadamni yiğilmagan holda körsatmang. ## Popover (`popover`, beta, 0.3.0 dan) Tugma yonida oçiladigan qatlam: qisqa ma'lumot, kiçik forma, amallar röyxati. Native popover atributi + anchor positioning (qöllanmasa — ekran markazida). Eni köpi bilan 320; ixtiyoriy strelka (data-arrow), ölçam sm/lg, amallar qatori (popconfirm). Kod bilan oçilsa langarni bering: el.showPopover({ source: tugma }). Kengaytma: .fx-popover__head / .fx-popover__foot (çiziqli sarlavha va pastki qism). Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi. - Qaçon: Tugma yonida qisqa ma'lumot yoki kiçik amal. - Qaçon emas: Muhim tasdiq → `dialog` - Variantlar: data-arrow=on; data-size=sm|lg (standart md); data-fx-adaptive=true - Klaviatura: Esc — Yopadi, fokus tugmaga qaytadi - Tokenlar: --fx-bg-overlay, --fx-bg-surface, --fx-border-color-default, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-ease-enter, --fx-ease-exit, --fx-ease-sheet, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-exit-fast, --fx-motion-scale-enter, --fx-motion-shift-sm, --fx-motion-slow, --fx-popover-width, --fx-radius-circle, --fx-radius-overlay, --fx-shadow-lg, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-primary, --fx-text-secondary ```html

    Mister Fox

    Hozir: FoxUI 0.3.0 relizi ustida işlayapti.

    Strelkali qatlam

    Strelka tugmaga qaraydi — qaysi tugmaniki ekani aniq.

    Mijoz öçirilsinmi?

    Bildirişnomalar

    Yangi xabar yöq.

    Oxirgi tekşiruv: hozir

    Holat böyiça

    Telefonda bu oyna pastdan çiqadi, kompyuterda — tugma ostida.

    ``` - Qilmang: Popconfirm: tugma yonida qisqa tasdiq (.fx-popover__actions içida «Bekor» + «Ha»); xavfli, qaytmas amal uçun dialog. - Qilmang: Popover içiga uzun forma yoki jadval qöymang — buning uçun dialog yoki varaq. - Qilmang: Faqat hover bilan oçilmasin — tugma bosilganda (va klaviaturada) oçilişi şart. ## Hozir kim bor (`presence`, beta, 0.24.0 dan) Hamkorlik belgilari: sahifada hozir kimlar borligini körsatuvçi ustma-ust avatarlar (hover/fokusda ism va holat), “yozmoqda” indikatori va jonli kursor yorliği. Faqat köriniş — ma'lumotni (kim, qayerda, nima qilyapti) ilova real vaqtda yangilaydi. - Qaçon: Birgalikda tahrirlaş, jonli hujjat, çat: kim bor va kim yozmoqda. - Qaçon emas: Oddiy avatarlar guruhi → `avatar` - Variantlar: data-color=yellow|pink|coral|green|purple (standart blue) - Klaviatura: Tab — Iştirokçiga fokus — şarh çiqadi - Tokenlar: --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-surface, --fx-border-color-focus, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-enter, --fx-ease-exit, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-shift-sm, --fx-popover-width, --fx-radius-circle, --fx-radius-control, --fx-radius-nav, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-category, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    3 kişi bor

    Guli yozmoqda…

    Mister Fox
    ``` - Qilmang: Odamlarning joylaşuvini rang bilan yolğiz bildirmang — ism va holat matni (aria-label, şarh) şart. - Qilmang: 10 dan köp avatarni qatorga qöymang — oxirgisini `data-more` “+N” avatariga aylantiring. - Qilmang: Kursorni 60 marta/soniya DOM'da yangilamang — ilova tomonda throttle (~30 ms) qiling. ## Narx jadvali (`pricing`, beta, 0.28.0 dan) Obuna narxlari bölimi (4.169, #56) — FoxUI obunasining özi uçun ham: sarlavha, oylik/yillik almaştirgiç (radio guruh, JS'siz — narxlar [data-period] böyiça almaşadi, plita prujina bilan sirpanadi), tarif kartalari (nom, izoh, narx, CTA, ✓/— imkoniyatlar), tavsiya tarif (data-featured: brend çegarasi, «Eng ommabop» belgisi, data-fx="beam" bilan çegara nuri), şartlar qatori (1 litsenziya = 1 kişi, 3 qurilma; lifetime yöq) va taqqoslaş jadvali (fx-table). Narx hali belgilanmagan bölsa — .fx-pricing__amount[data-soon] («Narx — tez kunda»). - Qaçon: Obuna yoki tarifli mahsulotning narx sahifasi va landing bölimi. Tariflar orasidagi farqni jadval bilan körsatiş. - Qaçon emas: Kabinetdagi joriy tarif va hisob-fakturalar → `plan`; Bitta mahsulot narxi → `stat` - Variantlar: data-period=month|year (standart month); data-featured=on (standart off) - Klaviatura: ← → — Oylik va yillik orasida; Tab — Davr tanlagiçidan tarif tugmalariga - Tokenlar: --fx-bg-brand-solid, --fx-bg-muted, --fx-bg-success-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-dialog-width, --fx-ease-spring, --fx-ease-standard, --fx-fg-success, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-slow, --fx-popover-width, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-shadow-lg, --fx-shadow-sm, --fx-size-icon-md, --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-text-brand, --fx-text-disabled, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Narxlar

    Bitta obuna — hamma loyihangizga

    Oylik yoki yillik tölaysiz. Obuna tugasa ham yuklab olingan versiyalar sizda qoladi.

    Tölov davri

    • Oçiq yadro

      Boşlaş va sinab köriş uçun — npm'dagi bepul paket.

      0 sömdoim bepul0 sömdoim bepul

      npm'dan örnatiş
      • Tokenlar va asosiy komponentlar
      • CLI: init, add, check
      • Kontrast va ʻ qöriqçisi
      • MCP orqali AI agent
      • Yangilaniş taklifi va yangi bloklar

    • ProEng ommabop

      Bitta mutaxassis uçun — hamma komponent, naqş va AI agent.

      Narx — tez kunda/ oyNarx — tez kunda/ yilYillik tölovda oylikdan arzonroq

      Röyxatga yoziliş
      • Oçiq yadrodagi hammasi
      • Hamma komponent va marketing naqşlari
      • MCP orqali AI agent
      • npx foxui update — yangilaniş taklifi
      • Komponent sörovi — 1 haftada

    • Jamoa

      Studiya va jamoalar uçun — bir neçta litsenziya, bitta hisob.

      Narx — tez kunda/ oy, har kişiNarx — tez kunda/ yil, har kişi

      Biz bilan boğlaning
      • Pro tarifidagi hammasi
      • Litsenziyalarni boşqariş
      • Umumiy hisob-kitob
      • Ustuvor yordam
    • 1 litsenziya = 1 kişi, 3 qurilma
    • Umrbod (lifetime) litsenziya yöq
    • Obuna tugasa ham yuklab olinganlar sizda qoladi
    Tariflarni taqqoslaş
    ImkoniyatOçiq yadroProJamoa
    Komponentlarasosiyhammasihammasi
    MCP orqali AI agentyöqborbor
    Yangilaniş taklifiyöqborbor
    Komponent söroviyöq1 hafta1 hafta, ustuvor
    Qurilmalarçeksiz3har kişiga 3
    ``` - Qilmang: Uçtadan ortiq tarif körsatmang — tanlaş qiyinlaşadi. - Qilmang: Yillik narxni oylikka bölib, «/ oy» deb aldamang — davr aniq yozilsin. - Qilmang: Tavsiya tarifni faqat rang bilan ajratmang — «Eng ommabop» sözi ham bölsin. - Qilmang: Narx belgilanmagan bölsa, öylab topilgan raqam qöymang — «Narx — tez kunda». ## Bosma qatlami (`print`, beta, 0.29.0 dan) Çop etiş (Ctrl+P) uçun global qatlam (4.14): navigatsiya, tugmalar, toast va suzuvçi oynalar yaşirinadi, ilova karkasi bitta ustunga yoyiladi, soyalar öçadi, jadval sarlavhasi har betda takrorlanadi, qator va kartalar betda bölinmaydi. data-print bilan boşqariladi: hide · only (faqat bosmada) · break-before / break-after (yangi bet) · avoid · urls (taşqi havola manzili qavsda). .fx-print — bosmaga tayyor hujjat örami (hisob-faktura, dalolatnoma, hisobot): sarlavha, rekvizitlar, amallar (bosmada yaşirin) va yakun. - Qaçon: Hisob-faktura, dalolatnoma, hisobot, buyurtma varaqasi — foydalanuvçi çop etadi yoki PDF saqlaydi. Har qanday ilova sahifasi: global qatlam navigatsiyani özi yaşiradi, qöşimça iş şart emas. - Qaçon emas: Ekranda çiroyli hujjat matni (maqola) → `prose`; Faylni serverda PDF qilib yuboriş → `share` - Variantlar: data-print=none|hide|only|show|break-before|break-after|avoid|urls (standart none) - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-bold, --fx-popover-width, --fx-radius-surface, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-8, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Hisob-faktura № 2026-0412

    18 oktyabr 2026 · Tölov muddati: 25 oktyabr 2026

    Sotuvçi
    «Çorsu Savdo» MChJ, STIR 305 112 448
    Xaridor
    «Ğallaorol Agro» fermer xöjaligi
    XizmatSoniNarxiJami
    CRM obunasi (oylik)5 kişi120 000 söm600 000 söm
    Ma'lumot köçiriş1 marta450 000 söm450 000 söm
    Jami1 050 000 söm

    Tölov tartibi: tölov sahifasi.

    Rahbar: ____________ Dilnoza Rahimova · M.Ö.

    Savollar: +998 90 123 45 671 / 1
    ``` - Qilmang: Bosmada muhim ma'lumotni tugma içida qoldirmang — tugmalar yaşirinadi (zarur bölsa data-print="show"). - Qilmang: Har bloka break-before qöymang — faqat mantiqiy yangi bölim (yangi hujjat, ilova) uçun. - Qilmang: Rangga tayanadigan holatni bosmaga çiqarmang — oq-qora printerda yöqoladi; yonida matn bölsin. ## Ustuvorlik (`prio`, beta, 0.22.0 dan) Işning ustuvorligi: 3 ta ösib boruvçi ustunça — past, örta, yuqori; şoşilinç — xavf rangida; yöq — xira. Doim söz bilan (aria-label yoki yonida matn). Belgi varianti data-variant="mark" (Ustoz Figma maketi, 21.10): Jira kabi 10 daraja — trivial, lowest/lower/low (moviy chevronlar pastga), minor, high/higher/highest (qizil yuqoriga), critical, blocker. Yorliq .fx-prio-tag: pastel kapsula, oq doirada belgi — urgent ★, high ✦, normal ▲, low ○. - Qaçon: Vazifa, murojaat, xato röyxatlarida ustuvorlik. - Qaçon emas: Umumiy holat (tölangan, kutilmoqda) → `status` - Variantlar: data-level=0|1|2|3|urgent|trivial|lowest|lower|low|minor|high|higher|highest|critical|blocker (standart 0); data-size=md|lg (standart md); data-variant=bars|mark (standart bars) - Tokenlar: --fx-bg-error-subtle, --fx-bg-info-subtle, --fx-bg-muted, --fx-bg-surface, --fx-bg-warning-subtle, --fx-border-width-default, --fx-control-h-sm, --fx-fg-error, --fx-fg-info, --fx-fg-warning, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-radius-badge, --fx-radius-circle, --fx-radius-pill, --fx-size-icon-md, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    AhamiyatsizEng pastPastroqPastKiçikYuqoriYuqoriroqEng yuqoriJiddiyTösiq
    1 · Şoşilinç2 · Yuqori3 · Oddiy4 · Past
    ``` - Qilmang: Ustuvorlikni faqat rang bilan bildirmang — ustunça soni ham özgaradi. ## Progress (`progress`, beta, 0.2.0 dan) Çiziqli ölçagiç, balandligi 8. Qiymat CSS özgaruvçisida: style="--fx-progress-value: 40%". Rang: standart (brend), data-tone success/warning/error yoki data-color (toifa rangi). Qiymat noma'lum bölsa (aria-valuenow yöq) — bölak trekda sirpanadi. Ölçamlar xs/sm/lg; yorliq + qiymat qatori (.fx-progress-row); köp bölakli (data-variant="stacked", .fx-progress__seg — rol bilan). Aylana (data-shape="circle"): halqa, markazda foiz yoki ikon; aniq va noaniq holat; uç ölçam. Tölqinli variant (4.42, M3 Expressive): data-variant="wavy" — tölgan qism tölqinsimon çiziq, qolgan yöl tekis trek (oraliğida böşliq); 100 %da tölqin tinçlanadi. Aylana bilan (data-shape="circle") — halqaning özi tölqinsimon. Aniq qiymatda tölqin statik, noaniq holatda bölak sirpanadi. Aniq qiymatda trek tölgan qismdan kiçik böşliq bilan boşlanadi va öng uçida tugaş nuqtasi turadi (M3 stop indicator) — iş qayerda tugaşi körinadi; 100 % da yöqoladi. - Qaçon: Jarayon yoki uluş foizini körsatiş. - Qaçon emas: Foiz halqasi (donut) → `progress` - Variantlar: data-tone=brand|success|warning|error (standart brand); data-color=yellow|pink|blue|coral|green|purple; data-size=xs|sm|md|lg (standart md); data-variant=single|stacked|wavy (standart single); data-role=brand|ink|accent|risk|context (standart brand); data-shape=line|circle (standart line) - Tokenlar: --fx-bg-brand-solid, --fx-bg-category-blue, --fx-bg-category-coral, --fx-bg-category-green, --fx-bg-category-pink, --fx-bg-category-purple, --fx-bg-category-yellow, --fx-bg-muted, --fx-bg-surface, --fx-border-width-focus, --fx-control-h-lg, --fx-control-h-sm, --fx-duration-indeterminate, --fx-duration-pulse, --fx-duration-spin, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-size-lg, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-knob-motion-loop, --fx-motion-base, --fx-radius-circle, --fx-radius-pill, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary, --fx-viz-accent, --fx-viz-brand, --fx-viz-context, --fx-viz-ink, --fx-viz-risk ```html
    Oylik reja64 %
    128 mln / 200 mln söm
    72%
    100%
    Mijozlar bazasi import qilinmoqda64 %
    72 %
    ``` - Qilmang: Dashboard grafigida foizni halqa bilan körsatmang — çiziqli ölçagiç (WDS «Grafiklar»); aylana (data-shape="circle") faqat ixçam joyda jarayon yoki bitta kvota uçun. - Qilmang: Qiymatni faqat çiziq bilan bermang — yonida raqam bölsin. - Qilmang: Köp bölakli çiziqda bölaklar yiğindisi 100 % dan oşmasin; har bölakni legendada (fx-legend) nomlang. - Qilmang: Ikki bölakdan köp rolga tayanib, rang yolğiz belgi bölmasin — yonida son yoki legenda. ## Uzun matn (prose) (`prose`, beta, 0.22.0 dan) CMS yoki Markdown'dan kelgan HTML'ga oraliq va uslub beradi: sarlavhalar, abzaslar, röyxatlar, iqtibos, kod, jadval, rasm, çiziq. Öqiş eni ~65 belgi; sm/md/lg. - Qaçon: Maqola, hujjat, yangiliklar, CMS'dan kelgan matn. Matn içida FoxUI komponenti (karta, changelog, jadval) — matn uslubi unga yetmaydi, öz oraliği va ölçamini saqlaydi. Oddiy teglardan iborat blokni ham matn uslubidan çiqariş — .fx-not-prose. - Qaçon emas: Interfeys matni, yorliq, izoh → `text`; Sahifa bölimi sarlavhasi → `heading` - Variantlar: data-size=sm|md|lg (standart md); data-width=measure|full (standart measure) - Tokenlar: --fx-bg-muted, --fx-bg-subtle, --fx-bg-warning-subtle, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-font-adjust-display, --fx-font-adjust-mono, --fx-font-family-display, --fx-font-family-mono, --fx-font-size-display-sm, --fx-font-size-lg, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-weight-semibold, --fx-radius-badge, --fx-radius-control, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-space-6, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html

    Obuna qanday işlaydi

    FoxUI'ni bir marta örnatasiz, yangilanişlar esa npx foxui update bilan keladi. Batafsil.

    • Yuklab olingan versiya abadiy qoladi
    • Yangilaniş va MCP — obuna davomida
    Tizim bir joyda özgarsa, hamma joyda yangilanadi.

    Narxlar

    RejaNarx
    Oylik19 $
    Yillik190 $

    Savol bölsa yozing.

    ``` - Qilmang: Interfeys elementlarini (forma, tugma panellari) fx-prose içiga qöymang — faqat oqib boruvçi matn uçun. - Qilmang: Enni 65 belgidan kengaytirmang, agar matn uzun bölsa (data-width="full" faqat jadval/rasm uçun). ## QR kod (`qr`, beta, 0.28.0 dan) Boğliqliksiz QR kod (4.143): matn yoki havola SVG içida çiziladi — öz kodlovçisi (bayt rejimi, UTF-8, xato tuzatiş M, 213 baytgaça), eng yaxşi niqob avtomatik. Doim yoruğ fonda qoronği modullar; markazda ixtiyoriy logo; holatlar: eskirgan (xira + «Yangilaş»), yuklanmoqda, xato. Tölov havolasi, Telegram bot, ilovaga kiriş uçun. - Qaçon: Telefon bilan skanerlanadigan havola: tölov, Telegram bot, ilovaga kiriş, Wi-Fi. - Qaçon emas: Kompyuterda bosiladigan havola → `link`; Nusxa olinadigan kod yoki kalit → `copy` - Variantlar: data-size=sm|md|lg (standart md); data-state=expired|loading|error - Klaviatura: Tab, Enter — Eskirgan holatda «Yangilaş» tugmasi - Tokenlar: --fx-bg-muted, --fx-bg-static-light, --fx-border-color-surface, --fx-border-width-default, --fx-control-h-lg, --fx-duration-pulse, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-motion-base, --fx-radius-badge, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-text-on-static-light, --fx-text-secondary ```html
    Buyurtma №214 · 1 200 000 söm
    QR eskirdi
    Telegram orqali kiriş
    ``` - Qilmang: Kodni qoronği fonda yoruğ modullar bilan bermang — skanerlar yomon öqiydi; komponent fonni özi yoruğ qiladi. - Qilmang: Logoni 20 % endan katta qilmang — xato tuzatiş (M) kötara olmaydi. - Qilmang: 213 baytdan uzun matn bermang — qisqa havola işlating. - Qilmang: QRni yagona yöl qilmang — yonida havola yoki kodni matn bilan bering. ## AI savolnoma (`questionnaire`, beta, 0.28.0 dan) AI agent vazifani aniqlaştiriş uçun variantli savollarni bittadan söraydi: raqamli variantlar (klaviaturada 1–9), köp tanlovli savol, «Boşqa» bilan erkin javob, «Ötkazib yuboriş», jarayon çiziği va «2 / 3». Oxirida javoblar xulosasi çiqadi va agentga hodisa ketadi. - Qaçon: AI yordamçi vazifani bajarişdan oldin 2–5 ta aniqlaştiruvçi savol bersa. Çat içidagi qisqa sörovnoma yoki onboarding savollari. - Qaçon emas: Köp maydonli, ma'lumot kiritiladigan forma → `wizard`; Agentning bitta amalini tasdiqlaş → `approval` - Variantlar: data-state=done (standart —) - Klaviatura: 1–9 — Şu raqamli variantni tanlaydi (köp tanlovda — almaştiradi); ← → ↑ ↓ — Variantlar orasida (native radio); Space — Fokusdagi variantni belgilaydi; Enter — Keyingi savol / yuboriş - Tokenlar: --fx-bg-brand-solid, --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-subtle, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-color-strong, --fx-border-color-surface, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-dialog-width, --fx-ease-enter, --fx-ease-standard, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-regular, --fx-font-weight-semibold, --fx-motion-base, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-on-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Yordamçi hisobot tayyorlaşdan oldin söraydi
    Hisobot qaysi davr uçun kerak?

    Bittasini tanlang

    1–4 tugmalari bilan tanlang
    ``` - Qilmang: Hamma savolni birdaniga uzun forma qilib bermang — agent bittadan söraydi, foydalanuvçi suhbatdan çiqmaydi. - Qilmang: «Boşqa» variantisiz yopiq röyxat bermang — AI taxmini notöğri bölişi mumkin. - Qilmang: Majburiy bölmagan savolda «Keyingi»ni öçirib qöymang — data-optional qöying. ## Tez çiqiş (`quickexit`, beta, 0.29.0 dan) Xavfli vaziyatdagi foydalanuvçi uçun «Saytdan tez çiqiş» tugmasi (4.165, GOV.UK «Exit this page»): bir bosiş yoki Shift'ni 3 marta bosiş bilan sahifa darhol neytral saytga almaşadi (location.replace — «Orqaga» bu sahifaga qaytarmaydi), ötiş paytida mazmun parda bilan yopiladi. Shift hisobi nuqtalarda va ekran öquvçiga aytiladi; orada boşqa tugma bosilsa hisob yangidan boşlanadi (katta harf yoziş çiqarib yubormaydi). Joylaşuv: sticky (standart sahifa tepasida yopişqoq) · fixed · inline. - Qaçon: Zöravonlik, işonç telefoni, tibbiy yoki psixologik yordam sahifalari — foydalanuvçini kimdir kuzatayotgan bölişi mumkin. - Qaçon emas: Oddiy «çiqiş» (hisobdan) → `button`; Sahifani tark etişdan oldin ogohlantiriş → `dialog` - Variantlar: data-placement=sticky|fixed|inline (standart sticky) - Klaviatura: Enter — Darhol neytral saytga ötadi; Shift × 3 (5 soniya ichida) — Sahifaning istalgan joyidan çiqiş - Tokenlar: --fx-bg-error-solid, --fx-bg-page, --fx-border-color-focus, --fx-border-color-strong, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-md, --fx-ease-standard, --fx-elevation-2, --fx-elevation-3, --fx-fg-error, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-radius-control, --fx-size-icon-sm, --fx-size-status-dot-sm, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-on-error, --fx-text-secondary, --fx-z-sticky, --fx-z-tip, --fx-z-toast ```html
    Saytdan tez çiqiş

    yoki Shift tugmasini 3 marta bosing

    Işonç telefoni — keça-kunduz

    Oiladagi zöravonlik böyiça maslahat — bepul va maxfiy. Kimdir yoningizga kelsa — «Saytdan tez çiqiş» tugmasini bosing.

    ``` - Qilmang: Oddiy saytga qöymang — faqat zöravonlik, işonç telefoni, tibbiy/psixologik yordam, huquqiy maslahat sahifalari. - Qilmang: Neytral manzil sifatida «yordam» mavzusidagi saytni bermang — ob-havo, yangiliklar, qidiruv. - Qilmang: Tugmani menyu içiga yaşirmang — har sahifada bir joyda, körinib tursin. - Qilmang: Bu tugma tarixni öçiradi deb va'da bermang — sahifada «brauzer tarixini qanday tozalaş» yöriqnomasi ham bölsin. ## Iqtibos (`quote`, beta, 0.22.0 dan) Iqtibos va muallifi: çap çiziqli (standart) yoki katta fikr-mulohaza körinişi.
    içida
    va
    ( bilan). - Qaçon: Boşqa manbadan olingan gap yoki mijoz fikri. - Qaçon emas: Eslatma yoki ogohlantiriş → `alert` - Variantlar: data-size=md|lg (standart md) - Tokenlar: --fx-border-color-strong, --fx-border-width-focus, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-weight-medium, --fx-space-2, --fx-space-3, --fx-space-4, --fx-text-primary, --fx-text-secondary ```html

    Dizayn tizimi bir joyda özgardi — hamma sahifada yangilandi.

    Dilnoza Karimova · NomLab dizayneri

    Yangilanişni bir buyruq bilan oldik, sayt buzilmadi.

    Jasur Aliyev · dasturçi
    ``` - Qilmang: Iqtibosni muallifsiz qoldirmang — kim aytganini körsating. - Qilmang: Eslatma yoki ogohlantiriş uçun işlatmang. ## Rels (`rail`, beta, 0.17.0 dan) Ilovaning eng yuqori bölimlari: çap çetdagi qoronği ustun (80), yuqorida belgi, papkalar — ikonka pill'da va yorliq (≤ 2 qator), tanlangani mavzu rangidagi pill va töldirilgan ikonka; pastda dumaloq tugmalar ustma-ust. Telefonda pastki panel. Karkas bilan: data-variant="rail" (S3). Kengaytma: data-tip (hover/fokusda izoh), [data-dot] (bildirişnoma nuqtasi). Telefonda bandlar köp bölsa (Fox OS 21.10): data-fx-rail data-max="5" — tor ekranda köpi bilan 5 band körinadi, data-pin bandlar (masalan oxirgi CRM) doim öz joyida, qolgani «Yana» varağida; joriy sahifa varaqda bölsa «Yana» tanlangan. Material va iOS qoidasi: pastki panelda 5 tadan köp band qöymang. - Qaçon: 3–6 ta katta bölimli ilova (Home, Atom, CRM…), har bölimning öz yon menyusi. - Qaçon emas: Bitta bölimli ilova → `nav` - Klaviatura: Tab, Enter — Papkaga ötadi - Tokenlar: --fx-bg-error-solid, --fx-bg-muted, --fx-bg-rail, --fx-bg-rail-selected, --fx-bg-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-control-h-sm, --fx-duration-delay-tip, --fx-ease-emphasized, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-slow, --fx-radius-badge, --fx-radius-circle, --fx-radius-control, --fx-radius-overlay, --fx-radius-surface, --fx-shadow-lg, --fx-shadow-sm, --fx-size-avatar-lg, --fx-size-icon-lg, --fx-size-icon-md, --fx-size-icon-sm, --fx-size-rail, --fx-size-status-dot-sm, --fx-space-1, --fx-space-10, --fx-space-12, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-6, --fx-space-8, --fx-text-brand, --fx-text-on-rail, --fx-text-on-rail-current, --fx-text-on-rail-selected, --fx-text-on-rail-strong, --fx-text-primary, --fx-text-tertiary ```html ``` - Qilmang: Relsga 6 tadan köp papka qöymang — panelda guruhlang. - Qilmang: Bir xil boşqaruvni relsda va tepa panelda takrorlamang (WDS r190). ## Reyting (`rating`, beta, 0.23.0 dan) Yulduzli baho: bosiş yoki klaviatura (← → Home End), ixtiyoriy yarim qadam (data-step="0.5"). Faqat öqiş variantida (data-readonly) rasm va matnli baho. Yulduz — maska, rang tokendan. Yurak va emoji (4.108): data-shape="heart" — yulduz örniga yurak; data-shape="emoji" — kayfiyat bahosi 5 ta yuz bilan (jahldor → xursand): töldirilmaydi, bittasi tanlanadi (kattaroq va rangli, qolganlari xira); aria-valuetext «4 / 5 — Yaxşi», yonidagi [data-fx-rating-word] da söz. - Qaçon: Mahsulot yoki xizmatga qisqa baho. Şarhlar röyxatida örtaça baho (faqat öqiş). - Qaçon emas: Aniq diapazon qiymati → `slider`; Ha/yöq qoniqiş → `segment` - Variantlar: data-size=sm|md|lg (standart md); data-shape=star|heart|emoji (standart star) - Klaviatura: ← → ↑ ↓ — Qadam (1 yoki 0,5); Home, End — 0 / maksimum - Tokenlar: --fx-bg-muted, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-ease-spring, --fx-ease-standard, --fx-fg-error, --fx-fg-success, --fx-fg-warning, --fx-font-size-sm, --fx-motion-fast, --fx-radius-badge, --fx-size-icon-lg, --fx-size-icon-md, --fx-space-1, --fx-space-2, --fx-text-secondary, --fx-text-tertiary ```html
    Xizmatni baholang
    4,5 · 128 ta şarh
    Qabul sizga qanday yoqdi?
    ``` - Qilmang: Bahoni yolğiz yulduzga taşlab qöymang — yonida «4,5 / 5» matni yoki aria-label. - Qilmang: 10 dan köp bahoda reyting emas — slider yoki son. - Qilmang: Emoji bahoni rang bilan yolğiz bildirmang — yuz şakli (oğiz) va «Yaxşi» sözi bor. ## Reaksiyalar paneli (`reactbar`, beta, 0.24.0 dan) Emoji + son tugmalari: bosilsa aria-pressed almaşadi va son ±1; bosilgani brend tusi, qalin yozuv va çegara bilan. Post, izoh, hujjat uçun. Xabarlardagi .fx-reaction körinişi, lekin mustaqil. - Qaçon: Kontentga tez, matnsiz munosabat bildiriş va umumiy sonni körsatiş kerak bölganda. - Qaçon emas: Baho beriş (1–5) → `rating`; Xabar ostidagi reaksiya → `message` - Variantlar: data-size=md|lg (standart md) - Klaviatura: Tab — Reaksiyalar orasida; Enter/Space — Qöyadi/olib taşlaydi - Tokenlar: --fx-bg-brand-subtle, --fx-bg-muted, --fx-bg-surface, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-control-h-sm, --fx-ease-standard, --fx-font-size-sm, --fx-font-size-xs, --fx-font-weight-semibold, --fx-motion-fast, --fx-motion-instant, --fx-motion-press, --fx-radius-circle, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-6, --fx-text-brand, --fx-text-secondary ```html
    ``` - Qilmang: Emoji yolğiz ma'no taşimasin: data-label (aria-label) beriladi. - Qilmang: Reaksiyani javob örniga işlatmang — qaror kerak bölsa izoh yozing. ## Fikrlaş (chain of thought) (`reasoning`, beta, 0.23.0 dan) Yiğiladigan fikrlaş bloki: «12 soniya öyladi ▸» — oçilsa mulohaza matni. Öylaş paytida (data-state="thinking") oçiq va sarlavha yaltiraydi; tugagaç özi yopiladi (foydalanuvçi oçgan bölsa — tegilmaydi). - Qaçon: AI mulohazasini ixtiyoriy körsatiş. - Qaçon emas: Bajarilgan qadamlar va vosita çaqiruvlari → `trace`; Oddiy yiğiladigan bölim → `accordion` - Variantlar: data-state=thinking (standart done) - Klaviatura: Enter, Space — Oçadi / yopadi - Tokenlar: --fx-bg-muted, --fx-bg-pressed, --fx-border-color-default, --fx-border-color-focus, --fx-border-width-default, --fx-border-width-focus, --fx-duration-pulse, --fx-ease-enter, --fx-ease-standard, --fx-font-size-sm, --fx-font-weight-medium, --fx-motion-base, --fx-motion-fast, --fx-radius-control, --fx-size-icon-sm, --fx-space-1, --fx-space-2, --fx-space-4, --fx-text-brand, --fx-text-primary, --fx-text-secondary, --fx-text-tertiary ```html
    Öylayapti…

    Mijozlar jadvalida 12 ta yozuv 2 yildan beri özgarmagan. Avval ularni arxivga köçiriş, keyin hisobotni qayta hisoblaş kerak. Öçirişdan oldin ruxsat sörayman.

    12 soniya öyladi

    Mijozlar jadvalida 12 ta yozuv 2 yildan beri özgarmagan. Avval ularni arxivga köçiriş, keyin hisobotni qayta hisoblaş kerak. Öçirişdan oldin ruxsat sörayman.

    ``` - Qilmang: Fikrlaş matnini asosiy javob bilan aralaştirmang — alohida blok. - Qilmang: Yopilgan holatda davomiylikni yaşirmang («12 soniya öyladi»). - Qilmang: data-state ni qölda özgartirgan bölsangiz, oçiq/yopiq holatni ham qölda boşqarmang — JS özi hal qiladi. ## Yozuv sahifasi (`recordpage`, beta, 0.28.0 dan) Bitta yozuv sahifasi qolipi (4.184, SLDS «Record home»): tepada belgi, tur va nom, amallar; asosiy maydonlar tasmasi (4–6 ta); bosqiç yöli; pastda ikki ustun — çapda tablar (tafsilot, boğliq röyxatlar, fayllar), öngda faoliyat va izohlar (yopişqoq). Konteyner kengligiga qarab bitta ustunga tuşadi. CRM bitimi, mijoz kartasi, ariza. - Qaçon: CRM'da bitta yozuvni köriş va boşqariş: bitim, mijoz, ariza, buyurtma. - Qaçon emas: Köp yozuvlar röyxati → `listpage`; Körsatkiçlar sahifasi → `dashboard` - Variantlar: data-layout=split|wide (standart split) - Klaviatura: Tab — Amallar, bosqiç yöli, tablar, faoliyat — tartib bilan - Tokenlar: --fx-bg-surface, --fx-border-color-default, --fx-border-color-surface, --fx-border-width-default, --fx-font-adjust-display, --fx-font-family-display, --fx-font-size-md, --fx-font-size-sm, --fx-font-size-xl, --fx-font-size-xs, --fx-font-weight-medium, --fx-font-weight-semibold, --fx-popover-width, --fx-radius-surface, --fx-space-1, --fx-space-2, --fx-space-3, --fx-space-4, --fx-space-5, --fx-text-primary, --fx-text-tertiary ```html
    BT
    Bitim · №214

    Örikzor savdo — 40 ta kassa apparati

    Summa
    84 000 000 söm
    Mijoz
    «Örikzor savdo» MChJ
    Mas'ul
    Aziz Karimov
    Yopiliş sanasi
    30-oktabr
    Ehtimollik
    60 %
    Manba
    Sayt formasi
    Telefon
    +998 90 123 45 67
    Yaratilgan
    02.10.2026
    Izoh
    Tölov 2 bosqiçda
    ``` - Qilmang: Tasmaga 6 dan köp maydon qöymang — eng muhimlari; qolgani «Tafsilot» tabida. - Qilmang: Sahifada bittadan köp asosiy (primary) tugma bermang — bosqiç yöli tugmasi yoki sarlavha amali. - Qilmang: Faoliyat ustunini içki aylantirişga majburlamang — sahifa bilan birga aylansin. ## Nisbiy vaqt (`reltime`, beta, 0.23.0 dan)