{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper",
  "title": "Stepper",
  "description": "`numbered` / `compact` flow progress",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/stepper.tsx",
      "content": "import { cn } from 'cn';\nimport * as React from 'react';\n\ntype Props = {\n  /** 1-indexed current step. */\n  current: number;\n  total: number;\n  /** Optional labels; must have `total` entries to render. */\n  labels?: string[];\n  variant?: 'numbered' | 'compact';\n  className?: string;\n};\n\n/** Progress for multi-step flows (onboarding, checkout). Distinct from PagerDots. */\nexport function Stepper({ current, total, labels, variant = 'numbered', className }: Props) {\n  const step = Math.max(1, Math.min(current, total));\n\n  if (variant === 'compact') {\n    return (\n      <div className={cn('flex flex-col gap-2', className)}>\n        <div role=\"progressbar\" aria-label=\"Progress\" aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={`Step ${step} of ${total}`} className=\"bg-muted h-1 overflow-hidden rounded-full\">\n          <div className=\"bg-primary h-full rounded-full\" style={{ width: `${(step / total) * 100}%` }} />\n        </div>\n        <p className=\"text-muted-foreground text-sm\">\n          Step {step} of {total}\n        </p>\n      </div>\n    );\n  }\n\n  const hasLabels = !!labels && labels.length === total;\n  return (\n    <ol className={cn('flex items-start', className)} aria-label={`Step ${step} of ${total}`}>\n      {Array.from({ length: total }).map((_, i) => {\n        const n = i + 1;\n        const done = n < step;\n        const active = n === step;\n        return (\n          <React.Fragment key={n}>\n            {i > 0 ? <li aria-hidden className={cn('mx-1.5 mt-3 h-0.5 flex-1 rounded-full', n <= step ? 'bg-primary' : 'bg-border')} /> : null}\n            {/* One column per step so the label sits under its own circle. */}\n            <li aria-current={active ? 'step' : undefined} className={cn('flex shrink-0 flex-col items-center', hasLabels ? 'w-16' : 'w-6')}>\n              <span\n                className={cn(\n                  'flex size-6 items-center justify-center rounded-full text-xs font-semibold',\n                  done ? 'bg-primary text-primary-foreground' : active ? 'bg-background border-primary text-foreground border-2' : 'bg-muted text-muted-foreground'\n                )}>\n                {n}\n              </span>\n              {hasLabels ? <span className={cn('mt-2 w-full truncate text-center text-xs', active ? 'text-foreground font-medium' : 'text-muted-foreground')}>{labels[i]}</span> : null}\n            </li>\n          </React.Fragment>\n        );\n      })}\n    </ol>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/stepper.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Stepper"
    ],
    "api": "<Stepper current total labels? variant=\"numbered|compact\" />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}