{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-stepper-4","type":"registry:block","title":"Controlled stepper","description":"Controlled stepper","dependencies":[],"registryDependencies":["button","@reui/stepper"],"files":[{"path":"c-stepper-4.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  Stepper,\n  StepperContent,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperPanel,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/components/reui/stepper\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst steps = [1, 2, 3, 4]\n\nexport function Pattern() {\n  const [currentStep, setCurrentStep] = useState(2)\n\n  return (\n    <Stepper\n      value={currentStep}\n      onValueChange={setCurrentStep}\n      className=\"w-full max-w-md space-y-8\"\n    >\n      <StepperNav>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator className=\"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:bg-green-500 data-[state=completed]:text-white data-[state=inactive]:text-gray-500\">\n                {step}\n              </StepperIndicator>\n            </StepperTrigger>\n            {steps.length > step && (\n              <StepperSeparator className=\"group-data-[state=completed]/step:bg-green-500\" />\n            )}\n          </StepperItem>\n        ))}\n      </StepperNav>\n\n      <StepperPanel className=\"text-sm\">\n        {steps.map((step) => (\n          <StepperContent\n            className=\"flex w-full items-center justify-center\"\n            key={step}\n            value={step}\n          >\n            Step {step} content\n          </StepperContent>\n        ))}\n      </StepperPanel>\n\n      {/* Buttons */}\n      <div className=\"flex items-center justify-between gap-2.5\">\n        <Button\n          variant=\"outline\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          disabled={currentStep === steps.length}\n        >\n          Next\n        </Button>\n      </div>\n    </Stepper>\n  )\n}","target":"components/examples/c-stepper-4.tsx"}],"meta":{"order":4,"gridSize":1,"label":"Controlled"}}