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

<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>

import e,{forwardRef as t,useState as a}from"react";import l from"clsx";var r={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"},o=t((({steps:t,direction:o="horizontal",color:s="primary",className:i=""},d)=>{const[v,S]=a(0),[u,N]=a(!1);return e.createElement("div",{ref:d,className:l(r.stepperWrapper,r[s],i),"aria-orientation":o},e.createElement("div",{className:l(r.stepper,r[o])},t.map(((a,l)=>{var i;return e.createElement(e.Fragment,{key:l},e.createElement(c,{active:l<=v,completed:l<v||u&&l===v,color:s},e.createElement(n,{icon:l<v||u&&l===v?e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"white"},e.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"})):a.icon?a.icon:l+1,active:l===v,completed:l<v||u&&l===v,color:s}),e.createElement(p,{label:a.label,optional:a.optional,active:l<=v,completed:l<v||u&&l===v,color:s})),l<t.length&&("vertical"===o&&v===l?e.createElement("div",{className:r.container},e.createElement("div",{className:r.stepContent},null==(i=t[v])?void 0:i.content)):e.createElement(m,{active:l<v,completed:l<v||u,color:s})))}))),"vertical"!==o&&t[v]&&t[v].content&&e.createElement("div",{className:r.stepContent},t[v].content),e.createElement("div",{className:r.buttonContainer},e.createElement("button",{className:r.button,onClick:()=>{v>0&&S(v-1)},disabled:0===v||u},"Back"),u?e.createElement("button",{className:r.button,onClick:()=>{S(0),N(!1)}},"Reset"):e.createElement("button",{className:r.button,onClick:()=>{v<t.length-1?S(v+1):v===t.length-1&&N(!0)}},v===t.length-1?"Complete":"Next")))}));o.displayName="Stepper";var c=({children:t,active:a,completed:o,color:c="primary",className:p=""})=>e.createElement("div",{className:l(r.step,{[r.active]:a,[r.completed]:o,[r[c]]:!0},p)},t);c.displayName="Step";var p=({label:t,optional:a,active:o,completed:c,color:p="primary",className:n=""})=>e.createElement("div",{className:l(r.stepLabel,{[r.active]:o,[r.completed]:c,[r[p]]:!0},n)},t," ",a&&e.createElement("span",null,"(Optional)"));p.displayName="StepLabel";var n=({icon:t,active:a,completed:o,color:c="primary",className:p=""})=>e.createElement("div",{className:l(r.stepIcon,{[r.active]:a,[r.completed]:o,[r[c]]:!0},p)},t);n.displayName="StepIcon";var m=({active:t,completed:a,color:o="primary",className:c=""})=>e.createElement("div",{className:l(r.stepConnector,{[r.active]:t,[r.completed]:a,[r[o]]:!0},c)});m.displayName="StepConnector";export{c as Step,m as StepConnector,n as StepIcon,p as StepLabel,o as Stepper};