UNPKG

nextuiq

Version:

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

2 lines (1 loc) 1.58 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),t=require("react"),n=require("./index54.js"),s=require("./index8.js");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}const a=i(t);exports.MultiStep=({steps:t,onComplete:i,onStepChange:r,defaultData:l={},autoSave:o=!1})=>{const[c,u]=a.useState(0),[d,p]=a.useState(l),[x,j]=a.useState([]),[m,f]=a.useState(!1);return a.useEffect((()=>{o&&localStorage.setItem("multistep-data",JSON.stringify(d))}),[d,o]),e.jsxRuntimeExports.jsxs("div",{className:"space-y-8",children:[e.jsxRuntimeExports.jsx(n.StepIndicator,{currentStep:c,totalSteps:t.length,completedSteps:x,titles:t.map((e=>e.title)),onStepClick(e){(x.includes(e-1)||e<=c)&&(u(e),r?.(e,d))}}),e.jsxRuntimeExports.jsx("div",{className:"min-h-[200px]",children:a.cloneElement(t[c].content,{data:d,updateData(e){p((t=>({...t,...e})))}})}),e.jsxRuntimeExports.jsxs("div",{className:"flex justify-between",children:[e.jsxRuntimeExports.jsx(s.Button,{variant:"outline",onClick(){c>0&&(u((e=>e-1)),r?.(c-1,d))},disabled:0===c,children:"Back"}),e.jsxRuntimeExports.jsx(s.Button,{async onClick(){const e=t[c];if(e.validation){f(!0);try{if(!(await e.validation(d)))return}finally{f(!1)}}c<t.length-1?(j([...x,c]),u((e=>e+1)),r?.(c+1,d)):i?.(d)},disabled:m,children:c===t.length-1?"Complete":"Next"})]})]})};