retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.06 kB
JavaScript
"use strict";var e=require("../../_virtual/_tslib.js"),s=require("react"),t=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),r=require("../../utils/classNames.js"),a=require("../../constants/commonClassNames.js"),i=require("./Stepper.styled.js");const c=s.forwardRef(((c,l)=>{var{id:p,className:n,activeStep:o,steps:d,variant:m="default",showLabels:u=!0,sx:v={}}=c,j=e.__rest(c,["id","className","activeStep","steps","variant","showLabels","sx"]);return t.jsx(i.StepperWrapper,Object.assign({id:p,ref:l,sx:v,className:r.classNames("stepper-root",n,a.default)},j,{children:d.map(((e,r)=>t.jsxs(s.Fragment,{children:[t.jsxs(i.StepWrapper,{children:[t.jsx(i.Step,Object.assign({$active:r===o,$completed:r<o,$variant:m},{children:r<o?"":r+1}),void 0),u&&t.jsx(i.StepLabel,Object.assign({$active:r===o,$completed:r<o,$variant:m,title:e},{children:e}),void 0)]},void 0),r<d.length-1&&t.jsx(i.StepConnector,{$showLabels:u,$variant:m,$completed:r<o},void 0)]},r)))}),void 0)}));c.displayName="Stepper",exports.Stepper=c;