{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper-14",
  "title": "Vertical stepper",
  "description": "Numbered steps stacked down a vertical line.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/stepper.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/stepper/stepper-14.tsx",
      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from '@/registry/ndeko/ui/stepper';\n\nconst STEPS = [1, 2, 3, 4];\n\nconst CONNECTOR = [\n  'relative group-data-[state=completed]/step:bg-foreground/10',\n  'after:bg-primary after:absolute after:inset-0 after:origin-top after:scale-y-0 after:rounded-full after:transition-[scale] after:duration-200 after:ease-out-strong',\n  'group-data-[state=completed]/step:after:scale-y-100 group-data-[state=completed]/step:after:duration-300',\n].join(' ');\n\nexport default function Stepper14() {\n  return (\n    <Stepper defaultValue={2} orientation='vertical'>\n      {STEPS.map((step) => (\n        <StepperItem key={step} step={step} className='not-last:flex-1'>\n          <StepperTrigger>\n            <StepperIndicator />\n          </StepperTrigger>\n          {step < STEPS.length && <StepperSeparator className={CONNECTOR} />}\n        </StepperItem>\n      ))}\n    </Stepper>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "stepper"
  ],
  "type": "registry:component"
}