Stepper

Ko'p qadamli jarayon ko'rsatkichi: checkout, ro'yxatdan o'tish va sozlash ustasi uchun.

2-qadam, 4 tadan: Yetkazib berishManzil va vaqt
3-qadam, 4 tadan: To'lov
4-qadam, 4 tadan: Tasdiqlashixtiyoriy

2-qadam, 4 tadan:Yetkazib berish

basic.tsx

'use client';

import { Button, Stepper } from '@akhatmirzo/ui';
import { useState } from 'react';

const steps = [
  { title: 'Savat' },
  { title: 'Yetkazib berish', description: 'Manzil va vaqt' },
  { title: "To'lov" },
  { title: 'Tasdiqlash', optional: true },
];

export default function StepperBasic() {
  const [step, setStep] = useState(1);

  return (
    <div className="flex w-full flex-col gap-6">
      <Stepper steps={steps} value={step} onValueChange={setStep} aria-label="Buyurtma" />
      <div className="flex gap-2">
        <Button size="sm" disabled={step === 0} onClick={() => setStep(step - 1)}>
          Orqaga
        </Button>
        <Button
          size="sm"
          variant="primary"
          disabled={step === steps.length}
          onClick={() => setStep(step + 1)}
        >
          Davom etish
        </Button>
      </div>
    </div>
  );
}

Import

import { Stepper } from '@akhatmirzo/ui';

Qachon ishlatish

Ketma-ket jarayon — checkout (Savat → Yetkazib berish → To'lov), ro'yxatdan o'tish, ariza topshirish. Foydalanuvchi qayerda turganini va qancha qolganini ko'radi.
3–6 qadam ma'qul. Ko'proq bo'lsa, qadamlarni guruhlang.
Bir-biriga bog'liq bo'lmagan bo'limlar uchun emas — ular uchun Tabs.
Sayt tuzilishi uchun emas — buning uchun Breadcrumb.

Qadamlar va holatlar

steps — { title, description?, icon?, optional?, status? } ro'yxati. value — joriy qadam indeksi (0 dan). Har bir qadam holati (data-status) o'zi hisoblanadi:

Holat	Qachon	Doira
`complete`	indeks `< value`	to'ldirilgan `primary` + ✓
`current`	indeks `= value`	`primary` chegara, atrofida halqa
`upcoming`	indeks `> value`	kulrang chegara + raqam
`error`	qadamda `status: 'error'`	`danger` fon + !

value={steps.length} — barcha qadamlar bajarilgan. Ulovchi chiziq o'tgan qismda primary rangda to'ladi (300ms).

1-qadam, 4 tadan: Ma'lumotlar, bajarildi
2-qadam, 4 tadan: Hujjatlar, xatoPasport rasmi o'qilmadi
3-qadam, 4 tadan: Tekshiruv
4-qadam, 4 tadan: Shartnoma

3-qadam, 4 tadan:Tekshiruv

states.tsx

'use client';

import { Stepper } from '@akhatmirzo/ui';

export default function StepperStates() {
  return (
    <Stepper
      aria-label="Ariza"
      value={2}
      className="w-full"
      steps={[
        { title: "Ma'lumotlar" },
        { title: 'Hujjatlar', status: 'error', description: "Pasport rasmi o'qilmadi" },
        { title: 'Tekshiruv' },
        { title: 'Shartnoma' },
      ]}
    />
  );
}

onValueChange berilsa, o'tgan qadamlar tugma bo'ladi — foydalanuvchi orqaga qaytib ma'lumotni tuzata oladi. allowFutureSteps — kelgusi qadamlarga ham o'tishga ruxsat (masalan, ixtiyoriy sozlamalar ustasida). Joriy qadam hech qachon tugma emas.

Vertikal

orientation="vertical" — qadamlar ustun bo'lib turadi; tavsiflar uzun bo'lsa yoki yon panelda qulay.

2-qadam, 4 tadan: To'lov usullariClick, Payme, naqd

vertical.tsx

'use client';

import { Stepper } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function StepperVertical() {
  const [step, setStep] = useState(1);

  return (
    <Stepper
      orientation="vertical"
      aria-label="Do'konni sozlash"
      value={step}
      onValueChange={setStep}
      allowFutureSteps
      steps={[
        { title: "Do'kon nomi", description: "Mijozlar ko'radigan nom" },
        { title: "To'lov usullari", description: 'Click, Payme, naqd' },
        { title: 'Yetkazib berish', description: 'Hududlar va narxlar' },
        { title: 'Ishga tushirish' },
      ]}
    />
  );
}

O'lchamlar

size — sm (doira 24px) yoki md (32px, standart).

1-qadam, 3 tadan: Savat, bajarildi
2-qadam, 3 tadan: Yetkazib berish
3-qadam, 3 tadan: To'lov

2-qadam, 3 tadan:Yetkazib berish

1-qadam, 3 tadan: Savat, bajarildi
2-qadam, 3 tadan: Yetkazib berish
3-qadam, 3 tadan: To'lov

2-qadam, 3 tadan:Yetkazib berish

sizes.tsx

'use client';

import { Stepper } from '@akhatmirzo/ui';

const steps = [{ title: 'Savat' }, { title: 'Yetkazib berish' }, { title: "To'lov" }];

export default function StepperSizes() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Stepper steps={steps} defaultValue={1} size="sm" aria-label="Kichik" />
      <Stepper steps={steps} defaultValue={1} aria-label="O'rtacha" />
    </div>
  );
}

Ixcham ko'rinish

compact="auto" (standart) — gorizontal stepper 640px dan tor ekranda 2 / 4 · Yetkazib berish va progress chizig'iga o'tadi. Ikkala ko'rinish render qilinib, CSS bilan bittasi yashiriladi — SSR'da hydration farqi bo'lmaydi. compact — har doim ixcham, compact={false} — hech qachon.

2-qadam, 4 tadan:Yetkazib berish

compact.tsx

'use client';

import { Stepper } from '@akhatmirzo/ui';

const steps = [
  { title: 'Savat' },
  { title: 'Yetkazib berish' },
  { title: "To'lov" },
  { title: 'Tasdiqlash' },
];

export default function StepperCompact() {
  return (
    <div className="w-full max-w-xs">
      <Stepper steps={steps} value={1} compact />
    </div>
  );
}

Props

Qolgan <div> atributlari ildizga beriladi; aria-label / aria-labelledby esa <ol> ro'yxatga.

Prop	Tip	Standart	Tavsif
`steps`majburiy	`{ title: ReactNode; description?: ReactNode; icon?: ReactNode; optional?: boolean; status?: 'error' }[]`	—	Qadamlar
`value`	`number`	—	Joriy qadam indeksi, 0 dan (boshqariladigan)
`defaultValue`	`number`	`0`	Boshlang'ich qadam
`onValueChange`	`(index: number) => void`	—	Berilsa — o'tgan qadamlar bosiladigan bo'ladi
`allowFutureSteps`	`boolean`	`false`	Kelgusi qadamlarga ham o'tish
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Yo'nalish
`size`	`'sm' \| 'md'`	`'md'`	Doira: 24 / 32px
`compact`	`boolean \| 'auto'`	`'auto'`	Ixcham ko'rinish; `auto` — gorizontalda 640px dan tor ekranda
`labels`	`{ step?: (i, n) => string; optional?; completed?; error? }`	—	Standart: `(i, n) => "${i}-qadam, ${n} tadan"`, "ixtiyoriy", "bajarildi", "xato"

Data atributlari

Atribut	Qayerda	Qiymat
`data-status`	qadam, indikator	`complete` · `current` · `upcoming` · `error`
`data-clickable`	qadam tugmasi	bosiladigan qadamda mavjud
`data-orientation`	ildiz, ro'yxat	`horizontal` · `vertical`
`data-size`	ildiz	`sm` · `md`

Accessibility

Tuzilish. Qadamlar <ol> ro'yxatda; aria-label bering ("Buyurtma bosqichlari").
Joriy qadam — aria-current="step".
Ko'rinmas matnlar. Har bir qadam "2-qadam, 4 tadan" deb boshlanadi, bajarilganlarga "bajarildi", xatolarga "xato" qo'shiladi — rang yagona signal emas (✓ va ! ikonkalari ham bor).
Klaviatura. Bosiladigan qadamlar oddiy <button>: Tab bilan yuriladi, Enter / Space bilan tanlanadi. Qolganlari fokus olmaydi.
Harakat. Chiziq va rang o'tishlari prefers-reduced-motion da o'chadi.

Import

Qachon ishlatish

Qadamlar va holatlar

Qadamlarga o'tish

Vertikal

O'lchamlar

Ixcham ko'rinish

Props

Data atributlari

Accessibility

Sahifada

Stepper

ImportBo'lim havolasini nusxalash

Qachon ishlatishBo'lim havolasini nusxalash

Qadamlar va holatlarBo'lim havolasini nusxalash

Qadamlarga o'tishBo'lim havolasini nusxalash

VertikalBo'lim havolasini nusxalash

O'lchamlarBo'lim havolasini nusxalash

Ixcham ko'rinishBo'lim havolasini nusxalash

PropsBo'lim havolasini nusxalash

Data atributlariBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash

Sahifada

Import

Qachon ishlatish

Qadamlar va holatlar

Qadamlarga o'tish

Vertikal

O'lchamlar

Ixcham ko'rinish

Props

Data atributlari

Accessibility