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

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

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