ScriptProvider

'use client';

import { ScriptProvider, ScriptToggle, Translit } from '@akhatmirzo/ui';

export default function ScriptOverview() {
  return (
    <ScriptProvider defaultScript="latin">
      <div className="flex w-full max-w-md flex-col items-start gap-4">
        <ScriptToggle size="sm" />
        <Translit as="h3" className="text-lg font-semibold text-text">
          Oʻzbekiston boʻylab yetkazib berish
        </Translit>
        <Translit as="p" className="text-sm text-text-muted">
          Buyurtmangiz 2–3 kun ichida eshigingizgacha yetkaziladi. Toʻlov — naqd yoki karta orqali.
        </Translit>
      </div>
    </ScriptProvider>
  );
}

ImportBo'lim havolasini nusxalash

import { ScriptProvider, ScriptToggle, Translit, useScript } from '@akhatmirzo/ui';

Matn bazada bitta alifboda saqlanadi (odatda lotin), foydalanuvchi esa uni o'zi tanlagan alifboda o'qiydi. O'girish @akhatmirzo/core dagi toScript orqali bajariladi — manba alifbo avtomatik aniqlanadi, shuning uchun kirillda saqlangan matn ham lotinga to'g'ri o'giriladi.

Qachon ishlatishBo'lim havolasini nusxalash

• O'zbek tilidagi ilova — foydalanuvchilarning bir qismi kirillda o'qishni afzal ko'radi. Kontentni ikki marta yozish shart emas.
• Sarlavha, tugma, qisqa matnlar uchun Translit yoki t(). Foydalanuvchi kiritgan ma'lumotni (ism, manzil) o'girmang — u qanday yozilgan bo'lsa, shunday qoladi.
• Atributlar uchun (placeholder, aria-label, title) — useScript().t, chunki Translit element chizadi.
• Boshqa tillar uchun emas — bu tarjima emas, faqat o'zbek tilining ikki yozuvi o'rtasida o'girish.

ScriptToggleBo'lim havolasini nusxalash

Provider ichida uning holatini o'zi boshqaradi. Standart matnlar — "Lotin", "Кирилл", guruh nomi (aria-label) — "Alifbo"; ularni labels bilan o'zgartirasiz. SegmentedControl prop'lari (size, fullWidth, disabled ...) ham ishlaydi.

'use client';

import { ScriptProvider, ScriptToggle, Translit } from '@akhatmirzo/ui';

export default function ScriptPersist() {
  return (
    <ScriptProvider defaultScript="latin" storageKey="docs-script-demo">
      <div className="flex flex-col items-start gap-3">
        <ScriptToggle labels={{ latin: 'Lotincha', cyrillic: 'Кириллча' }} />
        <Translit className="text-sm text-text-muted">
          Tanlovingiz eslab qolinadi — sahifani yangilab koʻring.
        </Translit>
      </div>
    </ScriptProvider>
  );
}

Provider'siz ham ishlatish mumkin — value va onValueChange bilan oddiy boshqariladigan komponent bo'ladi.

useScriptBo'lim havolasini nusxalash

t(text) — matnni joriy alifboga o'giradi. Provider tashqarisida script — 'latin', t esa matnni o'zgartirmaydi, shuning uchun komponentingiz provider'siz ham buzilmaydi.

'use client';

import { Button, ScriptProvider, ScriptToggle, useScript } from '@akhatmirzo/ui';

function Cart() {
  const { script, t } = useScript();
  return (
    <div className="flex flex-col items-start gap-3">
      <p className="text-sm text-text-muted">
        script: <code>{script}</code>
      </p>
      <Button variant="primary">{t('Savatga qoʻshish')}</Button>
      <input
        className="h-10 w-full rounded-lg border border-border bg-surface px-3 text-sm text-text"
        placeholder={t('Mahsulot qidirish')}
        aria-label={t('Mahsulot qidirish')}
      />
    </div>
  );
}

export default function UseScriptDemo() {
  return (
    <ScriptProvider defaultScript="cyrillic">
      <div className="flex w-full max-w-sm flex-col gap-4">
        <ScriptToggle />
        <Cart />
      </div>
    </ScriptProvider>
  );
}

const { script, setScript, t } = useScript();

t('Salom'); // kirill tanlangan bo'lsa — "Салом"
setScript('cyrillic');

Tanlovni eslab qolish va SSRBo'lim havolasini nusxalash

storageKey berilsa, tanlov localStorage da shu kalit bilan saqlanadi va boshqa tablar bilan sinxronlanadi. Server render va birinchi render doim defaultScript bilan bo'ladi — saqlangan qiymat gidratatsiyadan keyin o'qiladi. Shu tufayli Next.js'da gidratatsiya xatosi chiqmaydi. localStorage taqiqlangan bo'lsa (private rejim), tanlov faqat joriy sessiyada qoladi.

<ScriptProvider defaultScript="latin" storageKey="script">
  {children}
</ScriptProvider>

Boshqariladigan rejim: script + onScriptChange (masalan, tanlovni foydalanuvchi profilida saqlash uchun).

Boshqa komponentlar bilanBo'lim havolasini nusxalash

Provider ichida RegionSelect hudud nomlarini va MoneyInput showWords summani joriy alifboda ko'rsatadi.

PropsBo'lim havolasini nusxalash

ScriptProviderBo'lim havolasini nusxalash

ScriptToggleBo'lim havolasini nusxalash

SegmentedControl prop'larini (value, defaultValue, onValueChange va children dan tashqari) qabul qiladi.

TranslitBo'lim havolasini nusxalash

Qolgan HTML atributlar elementga uzatiladi.

useScriptBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash

• lang atributi. Translit elementiga lang="uz-Latn" yoki lang="uz-Cyrl" qo'yiladi — ekran o'quvchi to'g'ri talaffuzni tanlaydi, qidiruv tizimlari yozuvni aniqlaydi. Provider bo'lmasa, lang matnning o'zidan aniqlanadi. <html lang> ga tegilmaydi.
• ScriptToggle — radiogroup (aria-label — "Alifbo"), ←→ bilan yuriladi. "Кирилл" tugmasida lang="uz-Cyrl" bor, shuning uchun lotin interfeysda ham to'g'ri o'qiladi.
• Fokus saqlanadi. Alifbo almashganda faqat matn o'zgaradi, elementlar qayta yaratilmaydi.