@start-base/start-ui/Stepper/index.js

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

"use strict";var e=require("react"),t=require("clsx");function a(e){return e&&e.__esModule?e:{default:e}}var l=a(e),r=a(t),o={stepperWrapper:"SUI-Stepper-module-stepperWrapper-BG9mr",stepConnector:"SUI-Stepper-module-stepConnector-386bZ",container:"SUI-Stepper-module-container-yPUFl",stepper:"SUI-Stepper-module-stepper-QIcTL",vertical:"SUI-Stepper-module-vertical--6ygt",step:"SUI-Stepper-module-step-zrCI-",stepIcon:"SUI-Stepper-module-stepIcon-bdbAm",active:"SUI-Stepper-module-active-RcrwB",completed:"SUI-Stepper-module-completed-7FnBX",stepLabel:"SUI-Stepper-module-stepLabel-B9HT7",primary:"SUI-Stepper-module-primary-JC-5H",secondary:"SUI-Stepper-module-secondary-pMRrU",buttonContainer:"SUI-Stepper-module-buttonContainer-eB64h",stepContent:"SUI-Stepper-module-stepContent--Y8AG",button:"SUI-Stepper-module-button-aEcBP"},p=e.forwardRef(({steps:t,direction:a="horizontal",color:p="primary",className:s=""},i)=>{const[u,S]=e.useState(0),[v,f]=e.useState(!1);return l.default.createElement("div",{ref:i,className:r.default(o.stepperWrapper,o[p],s),"aria-orientation":a},l.default.createElement("div",{className:r.default(o.stepper,o[a])},t.map((e,r)=>{var s;return l.default.createElement(l.default.Fragment,{key:r},l.default.createElement(c,{active:r<=u,completed:r<u||v&&r===u,color:p},l.default.createElement(m,{icon:r<u||v&&r===u?l.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"white"},l.default.createElement("path",{d:"M10 15.172l-3.293-3.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 00-1.414-1.414L10 15.172z"})):e.icon?e.icon:r+1,active:r===u,completed:r<u||v&&r===u,color:p}),l.default.createElement(n,{label:e.label,optional:e.optional,active:r<=u,completed:r<u||v&&r===u,color:p})),r<t.length&&("vertical"===a&&u===r?l.default.createElement("div",{className:o.container},l.default.createElement("div",{className:o.stepContent},null==(s=t[u])?void 0:s.content)):l.default.createElement(d,{active:r<u,completed:r<u||v,color:p})))})),"vertical"!==a&&t[u]&&t[u].content&&l.default.createElement("div",{className:o.stepContent},t[u].content),l.default.createElement("div",{className:o.buttonContainer},l.default.createElement("button",{className:o.button,onClick:()=>{u>0&&S(u-1)},disabled:0===u||v},"Back"),v?l.default.createElement("button",{className:o.button,onClick:()=>{S(0),f(!1)}},"Reset"):l.default.createElement("button",{className:o.button,onClick:()=>{u<t.length-1?S(u+1):u===t.length-1&&f(!0)}},u===t.length-1?"Complete":"Next")))});p.displayName="Stepper";var c=({children:e,active:t,completed:a,color:p="primary",className:c=""})=>l.default.createElement("div",{className:r.default(o.step,{[o.active]:t,[o.completed]:a,[o[p]]:!0},c)},e);c.displayName="Step";var n=({label:e,optional:t,active:a,completed:p,color:c="primary",className:n=""})=>l.default.createElement("div",{className:r.default(o.stepLabel,{[o.active]:a,[o.completed]:p,[o[c]]:!0},n)},e," ",t&&l.default.createElement("span",null,"(Optional)"));n.displayName="StepLabel";var m=({icon:e,active:t,completed:a,color:p="primary",className:c=""})=>l.default.createElement("div",{className:r.default(o.stepIcon,{[o.active]:t,[o.completed]:a,[o[p]]:!0},c)},e);m.displayName="StepIcon";var d=({active:e,completed:t,color:a="primary",className:p=""})=>l.default.createElement("div",{className:r.default(o.stepConnector,{[o.active]:e,[o.completed]:t,[o[a]]:!0},p)});d.displayName="StepConnector",exports.Step=c,exports.StepConnector=d,exports.StepIcon=m,exports.StepLabel=n,exports.Stepper=p;