{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-by-step",
  "type": "registry:component",
  "title": "Step By Step",
  "description": "Numbered step guide with optional interactive completion tracking.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/step-by-step/step-by-step.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type StepProps = {\n  children: ReactNode;\n  className?: string;\n  number?: number;\n  title: string;\n};\n\nfunction Step({\n  children,\n  className,\n  number,\n  title,\n}: StepProps): React.ReactNode {\n  return (\n    <div className={cn(\"flex gap-4\", className)}>\n      <div className=\"flex flex-col items-center\">\n        <div className=\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold\">\n          {number}\n        </div>\n        <div className=\"w-px flex-1 bg-border mt-2\" />\n      </div>\n      <div className=\"flex-1 pb-8 last:pb-0\">\n        <h4 className=\"font-semibold text-foreground mb-2\">{title}</h4>\n        <div className=\"text-sm text-muted-foreground [&>p]:mb-2 [&>pre]:my-2\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype InteractiveStepProps = {\n  children: ReactNode;\n  isCompleted: boolean;\n  isLast: boolean;\n  onToggle: () => void;\n  stepNumber: number;\n  title: string;\n};\n\nfunction InteractiveStep({\n  children,\n  isCompleted,\n  isLast,\n  onToggle,\n  stepNumber,\n  title,\n}: InteractiveStepProps): React.ReactNode {\n  return (\n    <div className=\"flex gap-4\">\n      <div className=\"flex flex-col items-center\">\n        <button\n          className={cn(\n            \"flex size-8 items-center justify-center rounded-full text-sm font-bold transition-colors\",\n            isCompleted\n              ? \"bg-green-500 text-white\"\n              : \"bg-primary text-primary-foreground\",\n          )}\n          onClick={onToggle}\n          type=\"button\"\n        >\n          {isCompleted ? (\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"M5 13l4 4L19 7\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n              />\n            </svg>\n          ) : (\n            stepNumber\n          )}\n        </button>\n        {!isLast && (\n          <div\n            className={cn(\n              \"w-px flex-1 mt-2\",\n              isCompleted ? \"bg-green-500\" : \"bg-border\",\n            )}\n          />\n        )}\n      </div>\n      <div\n        className={cn(\n          \"flex-1 pb-8 transition-opacity\",\n          isCompleted && \"opacity-60\",\n        )}\n      >\n        <h4\n          className={cn(\n            \"font-semibold text-foreground mb-2\",\n            isCompleted && \"line-through\",\n          )}\n        >\n          {title}\n        </h4>\n        <div className=\"text-sm text-muted-foreground [&>p]:mb-2 [&>pre]:my-2\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type StepByStepProps = {\n  children: ReactNode;\n  className?: string;\n  interactive?: boolean;\n  title?: string;\n};\n\n// eslint-disable-next-line max-lines-per-function -- Complex component with interactive/non-interactive modes\nfunction StepByStep({\n  children,\n  className,\n  interactive = false,\n  title,\n}: StepByStepProps): React.ReactNode {\n  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set());\n  const steps = Array.isArray(children) ? children : [children];\n\n  const toggleStep = (index: number): void => {\n    const newCompleted = new Set(completedSteps);\n    if (newCompleted.has(index)) newCompleted.delete(index);\n    else newCompleted.add(index);\n    setCompletedSteps(newCompleted);\n  };\n\n  if (!interactive) {\n    return (\n      <div className={cn(\"my-6\", className)}>\n        {title ? (\n          <div className=\"flex items-center gap-2 mb-4\">\n            <svg\n              className=\"size-5 text-primary\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                d=\"m9 18 6-6-6-6\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n              />\n            </svg>\n            <h3 className=\"font-semibold text-lg\">{title}</h3>\n          </div>\n        ) : null}\n        <div className=\"space-y-0\">\n          {steps.map((step, index) => {\n            const stepElement = step as React.ReactElement<StepProps>;\n            const stepKey = `${stepElement.props.title}-${index + 1}`;\n            return (\n              <Step\n                key={stepKey}\n                number={index + 1}\n                title={stepElement.props.title}\n              >\n                {stepElement.props.children}\n              </Step>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"my-6\", className)}>\n      {title ? (\n        <div className=\"flex items-center gap-2 mb-4\">\n          <svg\n            className=\"size-5 text-primary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              d=\"m9 18 6-6-6-6\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n            />\n          </svg>\n          <h3 className=\"font-semibold text-lg\">{title}</h3>\n          <span className=\"text-xs text-muted-foreground ml-auto\">\n            {completedSteps.size}/{steps.length} completed\n          </span>\n        </div>\n      ) : null}\n      <div className=\"space-y-0\">\n        {steps.map((step, index) => (\n          <InteractiveStep\n            isCompleted={completedSteps.has(index)}\n            isLast={index === steps.length - 1}\n            key={`${(step as React.ReactElement<StepProps>).props.title}-${index + 1}`}\n            onToggle={() => {\n              toggleStep(index);\n            }}\n            stepNumber={index + 1}\n            title={(step as React.ReactElement<StepProps>).props.title}\n          >\n            {(step as React.ReactElement<StepProps>).props.children}\n          </InteractiveStep>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nStepByStep.Step = Step;\n\nexport { Step, StepByStep };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}