{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multi-step-viewer",
  "title": "Multi-step form",
  "description": "Multi-step form",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@formcn/use-multi-step-viewer",
    "@formcn/stepper",
    "button"
  ],
  "files": [
    {
      "path": "src/components/multi-step-viewer.tsx",
      "content": "'use client'\r\nimport type { VariantProps } from 'class-variance-authority'\r\nimport { AnimatePresence, type MotionProps, motion } from 'motion/react'\r\nimport * as React from 'react'\r\nimport { Button, type buttonVariants } from '@/components/ui/button'\r\nimport {\r\n\tStepper,\r\n\tStepperIndicator,\r\n\tStepperItem,\r\n\tStepperSeparator,\r\n\tStepperTrigger,\r\n} from '@/components/ui/stepper'\r\nimport { useMultiStepForm } from '@/hooks/use-multi-step-viewer'\r\n\r\nconst NextButton = (\r\n\tprops: React.ComponentProps<'button'> &\r\n\t\tVariantProps<typeof buttonVariants> & {\r\n\t\t\tasChild?: boolean\r\n\t\t},\r\n) => {\r\n\tconst { isLastStep, goToNext } = useMultiStepForm()\r\n\tif (isLastStep) return null\r\n\treturn (\r\n\t\t<Button size=\"sm\" type=\"button\" onClick={() => goToNext()} {...props} />\r\n\t)\r\n}\r\n\r\nconst PreviousButton = (\r\n\tprops: React.ComponentProps<'button'> &\r\n\t\tVariantProps<typeof buttonVariants> & {\r\n\t\t\tasChild?: boolean\r\n\t\t},\r\n) => {\r\n\tconst { isFirstStep, goToPrevious } = useMultiStepForm()\r\n\tif (isFirstStep) return null\r\n\treturn (\r\n\t\t<Button\r\n\t\t\tsize=\"sm\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tvariant=\"outline\"\r\n\t\t\tonClick={() => goToPrevious()}\r\n\t\t\t{...props}\r\n\t\t/>\r\n\t)\r\n}\r\n\r\nconst SubmitButton = (\r\n\tprops: React.ComponentProps<'button'> &\r\n\t\tVariantProps<typeof buttonVariants> & {\r\n\t\t\tasChild?: boolean\r\n\t\t},\r\n) => {\r\n\tconst { isLastStep } = useMultiStepForm()\r\n\tif (!isLastStep) return null\r\n\treturn <Button size=\"sm\" type=\"button\" {...props} />\r\n}\r\n\r\nconst ResetButton = (\r\n\tprops: React.ComponentProps<'button'> &\r\n\t\tVariantProps<typeof buttonVariants> & {\r\n\t\t\tasChild?: boolean\r\n\t\t},\r\n) => {\r\n\treturn <Button size=\"sm\" type=\"button\" variant=\"ghost\" {...props} />\r\n}\r\n\r\nconst FormHeader = (props: React.ComponentProps<'div'>) => {\r\n\tconst { currentStepIndex, steps } = useMultiStepForm()\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName=\"flex flex-col items-start justify-center gap-1 pb-4\"\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t<Stepper value={currentStepIndex} orientation=\"horizontal\">\r\n\t\t\t\t{steps.map((_, index) => {\r\n\t\t\t\t\tconst stepNumber = index + 1\r\n\t\t\t\t\tconst isLast = stepNumber === steps.length\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<StepperItem\r\n\t\t\t\t\t\t\tkey={stepNumber}\r\n\t\t\t\t\t\t\tstep={stepNumber}\r\n\t\t\t\t\t\t\tclassName=\"not-last:flex-1\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<StepperTrigger>\r\n\t\t\t\t\t\t\t\t<StepperIndicator />\r\n\t\t\t\t\t\t\t</StepperTrigger>\r\n\t\t\t\t\t\t\t{!isLast && <StepperSeparator />}\r\n\t\t\t\t\t\t</StepperItem>\r\n\t\t\t\t\t)\r\n\t\t\t\t})}\r\n\t\t\t</Stepper>\r\n\t\t</div>\r\n\t)\r\n}\r\nconst FormFooter = (props: React.ComponentProps<'div'>) => {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName=\"w-full pt-3 flex items-center justify-end gap-3\"\r\n\t\t\t{...props}\r\n\t\t/>\r\n\t)\r\n}\r\n\r\nconst StepFields = (props: React.ComponentProps<'div'> & MotionProps) => {\r\n\tconst { currentStepIndex, steps } = useMultiStepForm()\r\n\tconst currentFormStep = steps[currentStepIndex - 1]\r\n\tif (\r\n\t\t!currentFormStep ||\r\n\t\tcurrentStepIndex < 1 ||\r\n\t\tcurrentStepIndex > steps.length\r\n\t) {\r\n\t\treturn null\r\n\t}\r\n\treturn (\r\n\t\t<AnimatePresence mode=\"popLayout\">\r\n\t\t\t<motion.div\r\n\t\t\t\tkey={currentStepIndex}\r\n\t\t\t\tinitial={{ opacity: 0, x: 15 }}\r\n\t\t\t\tanimate={{ opacity: 1, x: 0 }}\r\n\t\t\t\texit={{ opacity: 0, x: -15 }}\r\n\t\t\t\ttransition={{ duration: 0.4, type: 'spring' }}\r\n\t\t\t\t{...props}\r\n\t\t\t\tclassName=\"grid grid-cols-6 gap-4\"\r\n\t\t\t>\r\n\t\t\t\t{currentFormStep.component}\r\n\t\t\t</motion.div>\r\n\t\t</AnimatePresence>\r\n\t)\r\n}\r\n\r\nfunction MultiStepFormContent(props: React.ComponentProps<'div'>) {\r\n\treturn <div className=\"flex flex-col gap-8 pt-3\" {...props} />\r\n}\r\n\r\nexport {\r\n\tMultiStepFormContent,\r\n\tFormHeader,\r\n\tFormFooter,\r\n\tStepFields,\r\n\t// Form Actions\r\n\tNextButton,\r\n\tPreviousButton,\r\n\tSubmitButton,\r\n\tResetButton,\r\n}\r\n",
      "type": "registry:component",
      "target": "components/multi-step-viewer.tsx"
    }
  ],
  "type": "registry:component"
}