{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "Progress indicator for multi-step forms and checkouts.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/stepper.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface StepperProps {\n  steps: string[];\n  /** Zero-based index of the step in progress */\n  current: number;\n  /** Make completed steps clickable; other markers render as plain text */\n  onStepClick?: (index: number) => void;\n  className?: string;\n}\n\n/**\n * Horizontal progress indicator for multi-step forms and checkouts.\n * The connecting bar fills as steps complete.\n */\nexport function Stepper({\n  steps,\n  current,\n  onStepClick,\n  className,\n}: StepperProps) {\n  const reducedMotion = useReducedMotion();\n  const progress = steps.length > 1 ? current / (steps.length - 1) : 0;\n\n  return (\n    <ol\n      data-slot=\"stepper\"\n      className={cn(\"relative flex w-full justify-between\", className)}\n    >\n      {/* Track sits behind the markers, inset by half a marker at each end. */}\n      <div\n        aria-hidden\n        className=\"absolute top-4 right-4 left-4 -z-10 h-0.5 bg-border\"\n      >\n        <motion.div\n          initial={false}\n          animate={{ scaleX: progress }}\n          transition={{ duration: reducedMotion ? 0 : 0.4, ease: \"easeOut\" }}\n          className=\"h-full origin-left bg-gradient-to-r from-brand-from to-brand-to\"\n        />\n      </div>\n\n      {steps.map((step, i) => {\n        const done = i < current;\n        const active = i === current;\n        const interactive = Boolean(onStepClick) && done;\n        const name = `Step ${i + 1}: ${step}${done ? \", complete\" : \"\"}`;\n        const markerClass = cn(\n          \"relative grid size-8 place-items-center rounded-full border-2 bg-background text-xs font-medium transition-colors\",\n          done && \"border-brand bg-brand text-brand-foreground\",\n          active && \"border-brand text-brand\",\n          !done && !active && \"border-border text-muted-foreground\"\n        );\n        const glyph = done ? (\n          <svg\n            width=\"13\"\n            height=\"13\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2.25\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden\n          >\n            <path d=\"M2.5 7.5l3 3 6-6\" />\n          </svg>\n        ) : (\n          <span aria-hidden>{i + 1}</span>\n        );\n\n        return (\n          <li\n            key={step}\n            aria-current={active ? \"step\" : undefined}\n            className=\"flex flex-col items-center gap-2\"\n          >\n            {interactive ? (\n              <button\n                type=\"button\"\n                onClick={() => onStepClick?.(i)}\n                aria-label={name}\n                className={cn(\n                  markerClass,\n                  \"cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n                )}\n              >\n                {glyph}\n              </button>\n            ) : (\n              <span className={markerClass}>\n                <span className=\"sr-only\">{name}</span>\n                {glyph}\n              </span>\n            )}\n            {/* The marker carries the full name; this is the visual copy. */}\n            <span\n              aria-hidden\n              className={cn(\n                \"text-xs whitespace-nowrap\",\n                active ? \"font-medium text-foreground\" : \"text-muted-foreground\"\n              )}\n            >\n              {step}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/stepper.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}