مؤشر الخطوات

import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'account', title: 'Account' },
  { id: 'profile', title: 'Profile' },
  { id: 'team', title: 'Team' },
  { id: 'done', title: 'Done' },
]

/** Four steps, the second one current, as drawn: a tick, a number with a fill, two with a line. */
export default function Demo() {
  return <Stepper items={STEPS} value="profile" aria-label="Sign-up" />
}

import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'upload', title: 'Upload' },
  { id: 'check', title: 'Check', status: 'error' },
  { id: 'publish', title: 'Publish' },
  { id: 'share', title: 'Share' },
] as const

/** All four statuses: a step's own status wins over the one worked out from value. */
export default function Demo() {
  return <Stepper items={STEPS} value="publish" aria-label="Publishing" />
}

import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'cart', title: 'Cart' },
  { id: 'address', title: 'Address' },
  { id: 'payment', title: 'Payment' },
]

/** Circles of 24, 28, 32, 40 and 48 px; the connector stays level with the centres at each. */
export default function Demo() {
  return (
    <div className="grid gap-8">
      <Stepper size="xs" items={STEPS} value="address" aria-label="Extra small" />
      <Stepper size="sm" items={STEPS} value="address" aria-label="Small" />
      <Stepper size="md" items={STEPS} value="address" aria-label="Medium" />
      <Stepper size="lg" items={STEPS} value="address" aria-label="Large" />
      <Stepper size="xl" items={STEPS} value="address" aria-label="Extra large" />
    </div>
  )
}

import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'upload', title: 'Upload' },
  { id: 'check', title: 'Check', status: 'error' },
  { id: 'publish', title: 'Publish' },
  { id: 'share', title: 'Share' },
] as const

/** custom sets no circle size: the circle reads --tc-stepper-mark, 32 px unless the caller sets it. */
export default function Demo() {
  return (
    <div className="grid gap-8">
      <Stepper size="custom" items={STEPS} value="publish" aria-label="The default circle" />
      <Stepper size="custom" items={STEPS} value="publish" className="text-lg" style={{ '--tc-stepper-mark': '3.5rem' }} aria-label="Your own circle" />
    </div>
  )
}

import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'one', title: 'Confirm the billing address on the order' },
  { id: 'two', title: 'Choose a delivery slot for the big items' },
  { id: 'three', title: 'Add the gift note and the wrapping paper' },
  { id: 'four', title: 'Review every line of the order, then pay' },
  { id: 'five', title: 'Pay with a saved card or a bank transfer' },
  { id: 'six', title: 'Download the receipt and tracking number' },
]

/** Six steps of forty characters: each title wraps inside its own column and the page never scrolls sideways. */
export default function Demo() {
  return <Stepper items={STEPS} value="three" aria-label="Checkout" />
}

import { getLabels } from 'topclassui/labels/get-labels'
import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'cart', title: 'السلة' },
  { id: 'address', title: 'العنوان' },
  { id: 'payment', title: 'الدفع' },
  { id: 'confirm', title: 'التأكيد' },
]

/** The locale decides the digits: ar-u-nu-arab writes Arabic-Indic numbers, plain ar Latin ones. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="grid gap-8">
      <Stepper items={STEPS} value="payment" aria-label="أرقام عربية هندية" {...getLabels('ar-u-nu-arab')} />
      <Stepper items={STEPS} value="payment" aria-label="أرقام لاتينية" {...getLabels('ar')} />
    </div>
  )
}

import { getLabels } from 'topclassui/labels/get-labels'
import { TopClassProvider } from 'topclassui/provider'
import { Stepper } from 'topclassui/stepper'

const STEPS = [
  { id: 'account', title: 'الحساب' },
  { id: 'profile', title: 'الملف الشخصي' },
  { id: 'team', title: 'الفريق' },
  { id: 'done', title: 'تم' },
]

/** Arabic, inside TopClassProvider as the root layout would mount it. The first step is at
 * the right and each connector runs leftward, with no class of its own for it. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar">
        <Stepper items={STEPS} value="profile" aria-label="التسجيل" {...getLabels('ar')} />
      </div>
    </TopClassProvider>
  )
}