{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "type": "registry:ui",
  "title": "Stepper",
  "description": "Capsule progress tracker and numbered step pills.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/stepper.tsx",
      "content": "import * as React from 'react'\nimport { motion } from 'motion/react'\nimport { Check } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface Step {\n  id: number | string\n  label: string\n  description?: string\n}\n\nexport interface StepperProps {\n  steps: Step[]\n  currentStep: number\n  onStepClick?: (stepId: number | string, index: number) => void\n  className?: string\n}\n\nexport function Stepper({ steps, currentStep, onStepClick, className }: StepperProps) {\n  return (\n    <div role=\"list\" aria-label=\"Progress steps\" className={cn('w-full space-y-4 font-sans', className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        {steps.map((step, index) => {\n          const stepNumber = index + 1\n          const isCompleted = stepNumber < currentStep\n          const isCurrent = stepNumber === currentStep\n          const isClickable = typeof onStepClick === 'function'\n\n          return (\n            <React.Fragment key={step.id}>\n              <div className=\"flex items-center gap-2\">\n                <motion.button\n                  type=\"button\"\n                  disabled={!isClickable}\n                  onClick={() => isClickable && onStepClick(step.id, index)}\n                  aria-current={isCurrent ? 'step' : undefined}\n                  aria-label={`Step ${stepNumber}: ${step.label}${isCompleted ? ' (completed)' : ''}`}\n                  className={cn(\n                    'group flex items-center gap-2 rounded-full p-1 pr-2 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n                    isClickable && 'cursor-pointer'\n                  )}\n                >\n                  <motion.div\n                    initial={false}\n                    animate={{\n                      scale: isCurrent ? 1.1 : 1,\n                    }}\n                    transition={{ type: 'spring', stiffness: 500, damping: 25 }}\n                    className={cn(\n                      'w-9 h-9 rounded-full rk-border-sm flex items-center justify-center font-mono font-black text-sm rk-shadow-sm transition-colors duration-200 select-none shrink-0 aspect-square p-0',\n                      isCompleted\n                        ? 'bg-rk-success text-rk-ink'\n                        : isCurrent\n                        ? 'bg-rk-primary text-rk-ink'\n                        : 'bg-rk-surface text-rk-ink/50',\n                      isClickable && !isCurrent && !isCompleted && 'group-hover:bg-rk-primary/60'\n                    )}\n                  >\n                    {isCompleted ? <Check className=\"w-5 h-5 stroke-[3.5]\" aria-hidden=\"true\" /> : stepNumber}\n                  </motion.div>\n                  <div className=\"hidden sm:block text-left\">\n                    <div\n                      className={cn(\n                        'font-extrabold text-xs leading-tight',\n                        isCurrent ? 'text-rk-ink' : 'text-rk-ink/60'\n                      )}\n                    >\n                      {step.label}\n                    </div>\n                    {step.description && (\n                      <div className=\"text-[10px] font-bold text-rk-ink/40\">{step.description}</div>\n                    )}\n                  </div>\n                </motion.button>\n              </div>\n              {index < steps.length - 1 && (\n                <div className=\"flex-1 h-2 bg-rk-surface rounded-full rk-border-sm relative overflow-hidden\" aria-hidden=\"true\">\n                  <motion.div\n                    initial={{ width: '0%' }}\n                    animate={{ width: isCompleted ? '100%' : '0%' }}\n                    transition={{ duration: 0.3, ease: 'easeOut' }}\n                    className=\"h-full bg-rk-success\"\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/stepper.tsx"
    }
  ]
}