react-multistep-forms/dist/index.esm.js

Flexible and customizable multi-step form context for React with native React Hook Form integration.

import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{createContext as r,useState as l,useContext as i}from"react";import{useFormContext as o}from"react-hook-form";const a=r(void 0);function s({stepFieldsMap:n,onSubmit:t,children:r}){const[i,o]=l(n),s=Object.keys(i),[c,d]=l(0),u=s[c]||"";return e(a.Provider,{value:{currentStepIndex:c,currentStepKey:u,stepFields:i,setStepFields:o,nextStep:()=>{d((e=>Math.min(e+1,s.length-1)))},prevStep:()=>{d((e=>Math.max(e-1,0)))},submit:()=>{null==t||t()},steps:s},children:r})}function c(){const e=i(a);if(!e)throw new Error("useMultistepForm must be used within a MultistepFormProvider");return e}function d({children:n,className:t}){return e("div",{className:t,children:n})}function u({title:t,hideTitle:r,isValid:l=!0,children:i,className:o}){return n("div",{className:o,children:[t&&n("div",{className:"mb-2 flex items-center",children:[r?null:e("h2",{className:"text-lg font-semibold",children:t}),e("span",{className:"ml-2 text-sm "+(l?"text-green-600":"text-red-600")})]}),e("div",{children:i})]})}function m({type:r,className:l="",fillColor:i="bg-blue-500",trackColor:o="bg-gray-300",height:a="h-2",dotColor:s="bg-blue-500 border-blue-500",inactiveDotColor:d="bg-white border-gray-300",connectorColor:u="bg-gray-300",dotSize:m="w-3 h-3",dashedGap:h="gap-1",dashedSegmentRadius:p="rounded"}){const{currentStepIndex:f,steps:g}=c(),v=g.length>1?Math.round(f/(g.length-1)*100):0;return"bar"===r?e("div",{className:`w-full ${a} ${o} rounded ${l}`,children:e("div",{className:`${i} ${a} rounded transition-all duration-300`,style:{width:`${v}%`}})}):"dot"===r?e("div",{className:`flex items-center ${l}`,children:Array.from({length:g.length}).map(((r,l)=>n(t.Fragment,{children:[e("div",{className:`rounded-full border-2 transition-all duration-300 ${m} ${l<=f?s:d}`}),l<g.length-1&&e("div",{className:`flex-1 h-0.5 mx-1 transition-all duration-300 ${u}`})]},l)))}):"dashed"===r?e("div",{className:`flex w-full ${h} ${l}`,children:Array.from({length:g.length}).map(((n,t)=>e("div",{className:`flex-1 ${a} ${t<=f?i:o} ${p} transition-all duration-300`},t)))}):null}function h({children:n,className:r}){const{currentStepIndex:l}=c(),i=t.Children.toArray(n)[l];return e("div",{className:r,children:i})}const p=({children:n,className:r="",onClick:l})=>{const{currentStepIndex:i,currentStepKey:a,nextStep:s,stepFields:d,steps:u}=c(),{trigger:m}=o(),h=async e=>{e.preventDefault();const n=d[a];if(n&&0!==n.length)try{await m(n)&&(null==l||l(e),s())}catch(e){console.error("Error during trigger validation:",e)}else console.warn(`No fields found for step: ${a}`)};if(i===u.length-1)return null;if("string"==typeof n){return e("button",{onClick:h,className:`${"px-4 py-2 bg-black text-white rounded hover:bg-gray-800 transition"} ${r||""}`,children:n})}if(t.isValidElement(n)){const e=n;return t.cloneElement(e,{onClick:async n=>{var t,r;n.preventDefault();const l=d[a];if(!l||0===l.length)return void console.warn(`No fields found for step: ${a}`);await m(l)&&(null===(r=(t=e.props).onClick)||void 0===r||r.call(t,n),s())},className:[e.props.className,r].filter(Boolean).join(" ")})}return null},f=({children:n,className:r,onClick:l})=>{const{currentStepIndex:i,prevStep:o}=c();if(0===i)return null;if("string"==typeof n){return e("button",{onClick:e=>{e.preventDefault(),null==l||l(e),o()},className:`${"px-4 py-2 bg-black text-white rounded hover:bg-gray-800 transition"} ${r||""}`,children:n})}if(t.isValidElement(n)){const e=n;return t.cloneElement(e,{onClick:n=>{var t,r;n.preventDefault(),null===(r=null===(t=e.props)||void 0===t?void 0:t.onClick)||void 0===r||r.call(t,n),o()},className:[e.props.className,r].filter(Boolean).join(" ")})}return null},g=({children:n,className:r,onClick:l})=>{const{steps:i,currentStepIndex:a,submit:s}=c(),{handleSubmit:d}=o(),u=e=>{if(e.preventDefault(),null==l||l(e),s)try{d(s)()}catch(e){console.error("Error during handleSubmit:",e)}else console.warn("Submit function is not defined")};if(a!==i.length-1)return null;if("string"==typeof n){return e("button",{onClick:u,className:`${"px-4 py-2 bg-black text-white rounded hover:bg-gray-800 transition"} ${r||""}`,children:n})}if(t.isValidElement(n)){const e=n;return t.cloneElement(e,{onClick:n=>{var t,r;n.preventDefault(),null===(r=null===(t=e.props)||void 0===t?void 0:t.onClick)||void 0===r||r.call(t,n),s()},className:[e.props.className,r].filter(Boolean).join(" ")})}return null};function v({className:n,children:t}){return e("div",{className:n,children:t})}export{d as MultistepForm,a as MultistepFormContext,s as MultistepFormProvider,p as NextButton,f as PrevButton,m as ProgressBar,u as Step,h as StepContainer,v as StepControls,g as SubmitButton,c as useMultistepForm};
//# sourceMappingURL=index.esm.js.map