Stepper

npx shadcn@latest add https://docs.nasaqui.com/r/stepper.json

import { Stepper, StepperItem } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import { Stepper, StepperItem } from "@fadymondy/nasaq/web";

export function Setup() {
  return (
    <Stepper current={1} aria-label="Setup steps">
      <StepperItem title="Account" description="Name and email" />
      <StepperItem title="Workspace" description="Pick a plan" />
      <StepperItem title="Invite" description="Add your team" />
    </Stepper>
  );
}

Stepper                        data-slot="stepper", data-orientation      <ol>
└─ StepperItem                 data-slot="stepper-item", data-status      <li>
   ├─ step                     data-slot="stepper-step"                   <div>, or <button> when `onClick` is set; carries aria-current="step"
   │  ├─ marker                data-slot="stepper-marker"                 number, check (complete) or X (error)
   │  └─ text                  data-slot="stepper-text"                   title + description
   └─ connector                data-slot="stepper-connector"              omitted on the last item; data-complete when the step is complete

import { Button, Stepper, StepperItem } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Wizard() {
  const [current, setCurrent] = useState(0);
  return (
    <div className="flex flex-col gap-6">
      <Stepper current={current}>
        <StepperItem title="الحساب" />
        <StepperItem title="مساحة العمل" />
        <StepperItem title="تم" />
      </Stepper>
      <div className="flex justify-between">
        <Button variant="ghost" disabled={current === 0} onClick={() => setCurrent((n) => n - 1)}>السابق</Button>
        <Button variant="primary" disabled={current === 2} onClick={() => setCurrent((n) => n + 1)}>التالي</Button>
      </div>
    </div>
  );
}

import { Stepper, StepperItem } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Checkout() {
  const [current, setCurrent] = useState(2);
  return (
    <Stepper current={current} orientation="vertical">
      <StepperItem title="Cart" onClick={() => setCurrent(0)} />
      <StepperItem title="Address" onClick={() => setCurrent(1)} />
      <StepperItem title="Payment" description="Card was declined" error />
    </Stepper>
  );
}