react-stepper-component-simple/dist/esm/index.js

React stepper component with mobile and desktop config.

import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{useState as r,useMemo as i,useEffect as o}from"react";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".step-title-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 12px;\r\n}\r\n\r\n.step-item-title {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    gap: 12px;\r\n    cursor: pointer;\r\n}\r\n\r\n.step-item-title .number {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: 100%;\r\n}\r\n\r\n.step-item-content {\r\n    display: none;\r\n}\r\n\r\n.step-item-content.active {\r\n    display: block;\r\n}\r\n\r\n.stepper-container .actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.stepper-container .actions button {\r\n    cursor: pointer;\r\n}\r\n\r\n.prev {\r\n    filter: grayscale(1);\r\n}");const s=s=>{const[c,l]=r(0),[p,a]=r(!1),d=i((()=>`\n            .step-item-title:not(:first-child)::before {\n                content: "";\n                min-width: 100px;\n                height: 2px;\n                background-color: #e5e7eb;\n            }\n\n            .step-item-title.active:not(:first-child)::before {\n                background-color: ${[s.stepNumberBackgroundColour]};\n            }\n\n            .step-item-title .number {\n                width: ${s.stepNumberWidth};\n                height: ${s.stepNumberHeigth};\n            }\n\n            .step-item-title:not(.active) .number {\n                background-color: unset;\n                border: solid 1px ${s.stepNumberBackgroundColour};\n                color: ${s.stepNumberBackgroundColour};\n            }\n\n            .step-item-title.active .number {\n                background-color: ${s.stepNumberBackgroundColour};\n                color: ${s.stepNumberTextColour};\n            }\n\n            @media screen and (min-width: ${s.mobileBreakpoint}px) {\n                .step-title-wrapper {\n                    flex-direction: ${s.stepTitleDirectionDesktop};\n                }\n                ${"column"===s.stepTitleDirectionDesktop&&"\n                    .step-item-title:not(:first-child)::before {\n                        content: unset;\n                    }\n                "}   \n            }\n\n            @media screen and (max-width: ${s.mobileBreakpoint}px) {\n                .step-title-wrapper {\n                    flex-direction: ${s.stepTitleDirectionMobile};\n                }\n                ${"column"===s.stepTitleDirectionMobile&&"\n                    .step-item-title:not(:first-child)::before {\n                        content: unset;\n                    }\n                "}    \n            }\n                \n            `),[]);o((()=>{a(!0)}),[d]);const m=s.children.map(((n,r)=>e("div",{className:c==r?"step-item-title active":"step-item-title",onClick:()=>l(r),children:[t("span",{className:"number",children:r+1}),t("span",{className:"title",children:n.props.header})]},n.props.header+"-"+r))),u=s.children.map(((e,n)=>t("div",{className:c==n?"step-item-content active":"step-item-content",children:e.props.children},e.props.header+""+n)));return e(n,{children:[p&&t("style",{children:d}),e("div",{className:"stepper-container",children:[t("div",{className:"step-title-wrapper",children:m}),e("div",{className:"step-content-wrapper",style:s.contentWrapperStyles,children:[u,e("div",{className:"actions",children:[0!==c?t("button",{className:"prev",onClick:()=>l(c-1),style:s.buttonStyles,children:"Prev"}):t("div",{}),c!==s.children.length-1&&t("button",{className:"next",onClick:()=>l(c+1),style:s.buttonStyles,children:"Next"})]})]})]})]})},c=e=>t(n,{children:e.children});export{s as StepperComponent,c as StepperItemComponent};
//# sourceMappingURL=index.js.map