{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "react-stepper",
  "title": "React Stepper",
  "description": "Minimal React stepper with clear completed, current, and upcoming states for multi-step flows.",
  "dependencies": [],
  "files": [
    {
      "path": "components/forms/ReactStepper.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nexport type StepperStep = {\n  title: string;\n  description?: string;\n  icon?: ReactNode;\n};\n\ntype ReactStepperProps = {\n  steps: StepperStep[];\n  currentStep: number;\n  // eslint-disable-next-line no-unused-vars\n  onStepChange?: (stepIndex: number) => void;\n  ariaLabel?: string;\n  className?: string;\n};\n\nexport default function ReactStepper({\n  steps,\n  currentStep,\n  onStepChange,\n  ariaLabel = \"Progress\",\n  className = \"\",\n}: ReactStepperProps) {\n  if (!steps.length) return null;\n\n  const activeStep = Math.min(Math.max(currentStep, 0), steps.length - 1);\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={[\"w-full\", className].filter(Boolean).join(\" \")}\n    >\n      <ol className=\"flex w-full\">\n        {steps.map((step, index) => {\n          const complete = index < activeStep;\n          const current = index === activeStep;\n          const marker = complete ? (\n            <svg\n              viewBox=\"0 0 20 20\"\n              className=\"h-4 w-4\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"m5.5 10 3 3 6-6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.8\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          ) : (\n            (step.icon ?? <span>{index + 1}</span>)\n          );\n          const markerClassName = [\n            \"relative z-10 flex h-10 w-10 items-center justify-center rounded-full border text-sm font-semibold transition-colors\",\n            complete\n              ? \"border-[color:var(--color-primary,#4f46e5)] bg-[var(--color-primary,#4f46e5)] text-[color:var(--color-primary-foreground,#fff)]\"\n              : current\n                ? \"border-[color:var(--color-primary,#4f46e5)] bg-[var(--color-background,#fff)] text-[color:var(--color-primary,#4f46e5)] shadow-[0_0_0_4px_var(--color-muted,#eef2ff)]\"\n                : \"border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-background,#fff)] text-[color:var(--color-muted-foreground,#9ca3af)]\",\n          ].join(\" \");\n\n          return (\n            <li\n              key={`${step.title}-${index}`}\n              aria-current={current ? \"step\" : undefined}\n              className=\"relative min-w-0 flex-1 last:flex-none\"\n            >\n              {index < steps.length - 1 ? (\n                <span\n                  aria-hidden=\"true\"\n                  className={[\n                    \"absolute left-10 right-0 top-5 h-px\",\n                    complete ? \"bg-[var(--color-primary,#4f46e5)]\" : \"bg-[var(--color-muted,#e5e7eb)]\",\n                  ].join(\" \")}\n                />\n              ) : null}\n\n              <div className=\"relative flex flex-col items-start pr-3 sm:pr-8\">\n                {complete && onStepChange ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onStepChange(index)}\n                    aria-label={`Go back to ${step.title}`}\n                    className={`${markerClassName} focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring,#4f46e5)] focus-visible:ring-offset-2`}\n                  >\n                    {marker}\n                  </button>\n                ) : (\n                  <span className={markerClassName} aria-hidden=\"true\">\n                    {marker}\n                  </span>\n                )}\n\n                <span\n                  className={[\n                    \"mt-3 truncate text-sm font-semibold\",\n                    current || complete ? \"text-[color:var(--color-foreground,#030712)]\" : \"text-[color:var(--color-muted-foreground,#9ca3af)]\",\n                  ].join(\" \")}\n                >\n                  {step.title}\n                </span>\n                {step.description ? (\n                  <span className=\"mt-1 hidden max-w-40 text-xs leading-5 text-[color:var(--color-muted-foreground,#6b7280)] sm:block\">\n                    {step.description}\n                  </span>\n                ) : null}\n                {current ? <span className=\"sr-only\">Current step</span> : null}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/forms/ReactStepper.tsx"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:component"
}