{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-multi-step-viewer",
  "title": "Multi-step viewer hook",
  "description": "Multi-step viewer hook",
  "files": [
    {
      "path": "src/hooks/use-multi-step-viewer.tsx",
      "content": "'use client'\r\nimport type { JSX } from 'react'\r\nimport { createContext, type ReactNode, useContext, useState } from 'react'\r\n\r\nexport interface Stepfields {\r\n\tfields: string[]\r\n\tcomponent: JSX.Element\r\n}\r\n\r\nexport interface UseMultiFormStepsReturn {\r\n\tsteps: Stepfields[]\r\n\tcurrentStepIndex: number\r\n\tcurrentStepData: Stepfields\r\n\tprogress: number\r\n\tisFirstStep: boolean\r\n\tisLastStep: boolean\r\n\tgoToNext: () => Promise<boolean>\r\n\tgoToPrevious: () => void\r\n\tgoToFirstStep: () => void\r\n\tgoToStep: (stepNumber: number) => void\r\n\tsetSteps: (newSteps: Stepfields[]) => void\r\n}\r\n\r\n// Context type\r\ninterface MultiStepFormContextType extends UseMultiFormStepsReturn {}\r\n\r\n// Create context\r\nconst MultiStepFormContext = createContext<MultiStepFormContextType | null>(\r\n\tnull,\r\n)\r\n\r\n// Provider props\r\ninterface MultiStepFormProviderProps {\r\n\tchildren: ReactNode\r\n\tstepsFields: Stepfields[]\r\n\tonStepValidation?: (step: Stepfields) => Promise<boolean> | boolean\r\n}\r\n\r\n// Provider component\r\nexport function MultiStepFormProvider({\r\n\tchildren,\r\n\tstepsFields,\r\n\tonStepValidation,\r\n}: MultiStepFormProviderProps) {\r\n\tconst [steps, setStepsState] = useState<Stepfields[]>(stepsFields)\r\n\tconst [currentStepIndex, setCurrentStepIndex] = useState(1)\r\n\r\n\tconst goToNext = async () => {\r\n\t\tconst currentStepData = steps[currentStepIndex - 1]\r\n\r\n\t\tif (onStepValidation) {\r\n\t\t\tconst isValid = await onStepValidation(currentStepData)\r\n\t\t\tif (!isValid) return false\r\n\t\t}\r\n\r\n\t\tif (currentStepIndex < steps.length) {\r\n\t\t\tsetCurrentStepIndex((prev) => prev + 1)\r\n\t\t\treturn true\r\n\t\t}\r\n\t\treturn false\r\n\t}\r\n\r\n\tconst goToPrevious = () => {\r\n\t\tif (currentStepIndex > 1) {\r\n\t\t\tsetCurrentStepIndex((prev) => prev - 1)\r\n\t\t}\r\n\t}\r\n\r\n\tconst goToFirstStep = () => {\r\n\t\tsetCurrentStepIndex(1)\r\n\t}\r\n\r\n\tconst goToStep = (stepNumber: number) => {\r\n\t\tif (stepNumber >= 1 && stepNumber <= steps.length) {\r\n\t\t\tsetCurrentStepIndex(stepNumber)\r\n\t\t}\r\n\t}\r\n\r\n\tconst setSteps = (newSteps: Stepfields[]) => {\r\n\t\tsetStepsState(newSteps)\r\n\t\t// Reset to first step if current step is out of bounds\r\n\t\tif (currentStepIndex > newSteps.length) {\r\n\t\t\tsetCurrentStepIndex(1)\r\n\t\t}\r\n\t}\r\n\r\n\tconst value: MultiStepFormContextType = {\r\n\t\tsteps,\r\n\t\tcurrentStepIndex: currentStepIndex,\r\n\t\tcurrentStepData: steps[currentStepIndex - 1],\r\n\t\tprogress: (currentStepIndex / steps.length) * 100,\r\n\t\tisFirstStep: currentStepIndex === 1,\r\n\t\tisLastStep: currentStepIndex === steps.length,\r\n\t\tgoToNext,\r\n\t\tgoToPrevious,\r\n\t\tgoToFirstStep,\r\n\t\tgoToStep,\r\n\t\tsetSteps,\r\n\t}\r\n\r\n\treturn (\r\n\t\t<MultiStepFormContext.Provider value={value}>\r\n\t\t\t{children}\r\n\t\t</MultiStepFormContext.Provider>\r\n\t)\r\n}\r\n\r\n// Hook to consume context\r\nexport function useMultiStepForm(): UseMultiFormStepsReturn {\r\n\tconst context = useContext(MultiStepFormContext)\r\n\r\n\tif (!context) {\r\n\t\tthrow new Error(\r\n\t\t\t'useMultiStepForm must be used within a MultiStepFormProvider',\r\n\t\t)\r\n\t}\r\n\r\n\treturn context as UseMultiFormStepsReturn\r\n}\r\n",
      "type": "registry:hook",
      "target": "hooks/use-multi-step-viewer.tsx"
    }
  ],
  "type": "registry:hook"
}