Kirish

@akhatmirzo — o'zbek tilida ishlaydigan React ilovalar uchun toolkit: komponentlar, dizayn tokenlari, hooklar va yordamchi funksiyalar. Telefon raqami +998 90 123 45 67 ko'rinishida yoziladi, summa 1 250 000 so'm bo'lib chiqadi, qidiruv "Gʻuzor", "G'uzor" va "Ғузор" ni bir xil topadi, kalendar esa dushanbadan boshlanadi. Bularning hammasi standart holatda ishlaydi — har loyihada qaytadan yozish shart emas.

'use client';

import { searchMatch, splitByRanges } from '@akhatmirzo/core';
import { Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const CITIES = [
  'Toshkent',
  'Samarqand',
  'Buxoro',
  "Farg'ona",
  'Qo‘qon',
  'Shahrisabz',
  'Chirchiq',
  'Ғузор',
  'Ўрта Чирчиқ',
  'Шаҳрихон',
];

export default function CoreSearch() {
  const [query, setQuery] = useState('шаҳ');
  const results = CITIES.map((city) => ({ city, ...searchMatch(city, query) })).filter(
    (r) => r.match,
  );

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Field label="Shahar qidirish" description="Sinab ko'ring: chir, ғуз, fargona, qo'qon">
        <Input value={query} onChange={(e) => setQuery(e.target.value)} clearable />
      </Field>
      <ul className="flex flex-wrap gap-2">
        {results.map(({ city, ranges }) => (
          <li key={city} className="rounded-lg border border-border bg-surface px-3 py-1.5 text-sm">
            {splitByRanges(city, ranges).map((part, i) =>
              part.match ? (
                <mark key={i} className="rounded-sm bg-primary-soft text-primary-soft-foreground">
                  {part.text}
                </mark>
              ) : (
                <span key={i}>{part.text}</span>
              ),
            )}
          </li>
        ))}
        {results.length === 0 && <li className="text-sm text-text-muted">Hech narsa topilmadi</li>}
      </ul>
    </div>
  );
}

Yuqoridagi qidiruv @akhatmirzo/core dagi bitta funksiya bilan ishlaydi: kirillcha so'rov lotincha nomni, lotincha so'rov kirillcha nomni topadi, mos kelgan qism esa asl matnda ajratib ko'rsatiladi.

TamoyillarBo'lim havolasini nusxalash

• O'zbek tiliga moslik. Komponentlardagi matnlar, oy va hafta kunlari o'zbekcha. Telefon (+998), Uzcard va Humo kartalari, so'mdagi summalar uchun tayyor maydonlar bor. Qidiruv lotin va kirill yozuvni, apostrofning barcha shakllarini (' ʻ ‘ ’) bir xil tushunadi.
• Accessibility. Overlay, menyu va tablar Radix UI ustiga qurilgan: fokus boshqaruvi, klaviatura va ARIA atributlari o'z joyida. Field label, tavsif va xato matnini boshqaruv elementiga o'zi bog'laydi.
• Bitta qoida — bitta joyda. Ranglar faqat semantik tokenlar orqali (bg-surface, text-text-muted). Dark mode va brend rangi bitta CSS faylda almashadi, komponentlarga tegilmaydi.
• Bir xil API. Hamma boshqaruv elementlarida size="sm" | "md" | "lg" (32 / 40 / 48px), boshqariladigan qiymat — value + onValueChange, ochiq/yopiq — open + onOpenChange. Bitta komponentni o'rgansangiz, qolganini taxmin qila olasiz.
• Ortiqcha yuk yo'q. Paketlar ESM va sideEffects: false — bundle'ga faqat import qilganingiz tushadi. Stillarni sizning Tailwind build'ingiz yaratadi, runtime CSS-in-JS yo'q.

PaketlarBo'lim havolasini nusxalash

Kutubxona to'rtta mustaqil paketdan iborat. Hammasi bitta repoda yashaydi, lekin alohida o'rnatiladi va alohida versiyalanadi.

@akhatmirzo/ui qolgan uchtasiga tayanadi, lekin teskarisi emas: core ni backend'da yoki boshqa freymvorkda, hooks ni esa komponentlarsiz ishlatish mumkin.

Qachon ishlatishBo'lim havolasini nusxalash

• O'zbekistonga mo'ljallangan mahsulot — admin panel, CRM, ichki tizim, onlayn do'kon. Telefon, karta, so'm, sana va o'zbekcha qidiruv kabi mayda, lekin vaqt oladigan ishlar tayyor.
• React + Tailwind CSS v4 loyihasi. Komponentlar Tailwind klasslari bilan yozilgan va sizning Tailwind'ingiz orqali yig'iladi.
• Faqat funksiyalar kerak bo'lsa — @akhatmirzo/core ni alohida o'rnating. U React'siz va bog'liqliksiz, Node.js'da ham ishlaydi.
• Qachon mos emas: Tailwind ishlatilmaydigan loyiha (komponentlar stilsiz qoladi) yoki React Native — hozircha faqat web qo'llab-quvvatlanadi.

HolatBo'lim havolasini nusxalash

Joriy versiya — 0.1.0, npm'da ochiq (MIT litsenziya). 0.x bosqichida API hali o'zgarishi mumkin: minor versiyalar (0.1 → 0.2) buzuvchi o'zgarishlar olib kelishi mumkin. Batafsil — Versiyalar sahifasida.

Keyingi qadamlarBo'lim havolasini nusxalash