chakra-ui-steps
Version:
Steps component designed to work seamlessly with Chakra UI
2 lines (1 loc) • 14.3 kB
JavaScript
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("@chakra-ui/react"),require("react"),require("@chakra-ui/utils"),require("@chakra-ui/theme-tools"),require("framer-motion"),require("@chakra-ui/icon"),require("@chakra-ui/react-context"),require("@chakra-ui/shared-utils"),require("@chakra-ui/styled-system")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","@chakra-ui/react","react","@chakra-ui/utils","@chakra-ui/theme-tools","framer-motion","@chakra-ui/icon","@chakra-ui/react-context","@chakra-ui/shared-utils","@chakra-ui/styled-system"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s["chakra-ui-steps"]={},s["react/jsx-runtime"],s["@chakra-ui/react"],s.react,s["@chakra-ui/utils"],s["@chakra-ui/theme-tools"],s["framer-motion"],s["@chakra-ui/icon"],s["@chakra-ui/react-context"],s["@chakra-ui/shared-utils"],s["@chakra-ui/styled-system"]))})(this,function(s,o,c,W,y,E,q,ee,te,re,oe){"use strict";function ne(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const g=ne(W),F=g.createContext({activeStep:0}),$=()=>g.useContext(F),ie=({value:e,children:r})=>{const t=e.state==="error",n=e.state==="loading";return o.jsx(F.Provider,{value:{...e,isError:t,isLoading:n},children:r})},ce=c.createIcon({viewBox:"0 0 14 14",path:o.jsx("g",{fill:"currentColor",children:o.jsx("polygon",{points:"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"})})});c.createIcon({displayName:"CloseIcon",d:"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"});const ae=ee.createIcon({d:"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z",displayName:"WarningIcon"}),[se,le]=te.createContext({name:"StepsStyleContext",errorMessage:`useStepsStyles returned 'undefined'. Seems you forgot to wrap the components in "<Steps />" `}),V=le,Z=c.forwardRef((e,r)=>{const{className:t,activeStep:n,children:i,orientation:l,state:d,responsive:a,checkIcon:x,errorIcon:v,onClickStep:p,mobileBreakpoint:m,trackColor:h,expandVerticalSteps:u=!1,...k}=c.omitThemingProps(e),C=h||c.useColorModeValue("gray.200","gray.700"),S=g.Children.toArray(i),b=S.length,z=()=>n<=S.length?g.Children.map(S[n],f=>{if(g.isValidElement(f))return g.Children.map(f.props.children,_=>_)}):null,[w]=c.useMediaQuery(`(max-width: ${m||"768px"})`),D=!!p,A=w&&a?"vertical":l,I=A==="vertical",L=c.useMultiStyleConfig("Steps",{...e,orientation:A,stepCount:b,isVertical:I,trackColor:C}),M={...L.root};return o.jsx(se,{value:L,children:o.jsxs(ie,{value:{activeStep:n,orientation:A,state:d,responsive:a,checkIcon:x,errorIcon:v,onClickStep:p,clickable:D,colorScheme:e.colorScheme,stepCount:b,trackColor:C,isVertical:I,variant:e.variant||"circles",expandVerticalSteps:u},children:[o.jsx(c.chakra.div,{ref:r,__css:{justifyContent:b===1?"flex-end":"space-between",flexDir:A==="vertical"?"column":"row",...M},className:re.cx("cui-steps",t),...k,children:g.Children.map(i,(f,_)=>{const N=(g.isValidElement(f)&&f.props.isCompletedStep)??_<n,O=_===b-1,Le={index:_,isCompletedStep:N,isCurrentStep:_===n,isLastStep:O};return g.isValidElement(f)?g.cloneElement(f,Le):null})}),A==="horizontal"&&z()]})})});Z.defaultProps={activeStep:0,colorScheme:"green",orientation:"horizontal",responsive:!0};const B=q.motion(c.Flex),K=q.motion(ae),de=q.motion(c.chakra.span),j={transition:{duration:.25},exit:{scale:.5,opacity:0},initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1}},T=c.forwardRef((e,r)=>{const{icon:t,iconLabel:n,label:i}=V(),{isCompletedStep:l,isCurrentStep:d,isError:a,isLoading:x,isKeepError:v,icon:p,index:m,checkIcon:h,errorIcon:u}=e,k={fontWeight:"medium",color:E.mode("gray.900","gray.100")(e),textAlign:"center",fontSize:"md",...i},C=W.useMemo(()=>p||null,[p]),S=W.useMemo(()=>u||null,[u]),b=W.useMemo(()=>h||ce,[h]);return W.useMemo(()=>{if(l)return a&&v?o.jsx(K,{...j,style:t},"icon"):o.jsx(B,{...j,children:o.jsx(b,{color:"white",style:t})},"check-icon");if(d){if(a&&S)return o.jsx(B,{...j,children:o.jsx(S,{color:"white",style:t})},"error-icon");if(a)return o.jsx(K,{...j,style:t},"icon");if(x)return o.jsx(c.Spinner,{width:t.width,height:t.height})}return C?o.jsx(B,{...j,children:o.jsx(C,{style:t})},"step-icon"):o.jsx(de,{ref:r,style:n,__css:k,...j,children:(m||0)+1},"label")},[l,d,a,x,C,t])}),Q=({isCurrentStep:e,isCompletedStep:r,children:t,isError:n,isLoading:i})=>{const{stepIconContainer:l}=V(),{clickable:d,isLoading:a}=$(),x=i||a;return o.jsx(c.chakra.div,{__css:l,className:"cui-steps__step-icon-container","aria-current":e?"step":void 0,"data-invalid":y.dataAttr(n&&(e||r)),"data-active":y.dataAttr(r),"data-clickable":y.dataAttr(d),"data-loading":y.dataAttr(x&&(e||r)),children:o.jsx(q.AnimatePresence,{mode:"wait",children:t})})},G=({isCurrentStep:e,opacity:r,label:t,description:n})=>{const{labelContainer:i,label:l,description:d}=V();return!!t||!!n?o.jsxs(c.chakra.div,{"aria-current":e?"step":void 0,__css:i,children:[!!t&&o.jsx(c.chakra.span,{__css:{opacity:r,...l},children:t}),!!n&&o.jsx(c.chakra.span,{__css:{opacity:r,...d},children:n})]}):null},pe=g.forwardRef((e,r)=>{const{step:t,stepContainer:n}=V(),{isError:i,isLoading:l,onClickStep:d,variant:a,clickable:x,checkIcon:v,errorIcon:p}=$(),{index:m,isCompletedStep:h,isCurrentStep:u,hasVisited:k,icon:C,label:S,description:b,isKeepError:z,state:w,checkIcon:D,errorIcon:A}=e,I=l||w==="loading",L=i||w==="error",M=k?1:.8,f=a==="simple"?h||u:h,_=D||v,N=A||p;return o.jsx(c.chakra.div,{"aria-disabled":!k,className:"cui-steps__horizontal-step","data-active":y.dataAttr(f),"data-invalid":y.dataAttr(L),"data-clickable":y.dataAttr(x),onClick:()=>d==null?void 0:d(m||0),ref:r,__css:t,children:o.jsxs(c.chakra.div,{className:"cui-steps__horizontal-step-container",__css:n,children:[o.jsx(Q,{...e,isError:L,isLoading:I,children:o.jsx(T,{index:m,isCompletedStep:h,isCurrentStep:u,isError:L,isKeepError:z,isLoading:I,icon:C,checkIcon:_,errorIcon:N})}),o.jsx(G,{label:S,description:b,isCurrentStep:u,opacity:M})]})})}),he=W.forwardRef((e,r)=>{const{children:t,index:n,isCompletedStep:i,isCurrentStep:l,label:d,description:a,icon:x,hasVisited:v,state:p,checkIcon:m,errorIcon:h}=e,{checkIcon:u,errorIcon:k,isError:C,isLoading:S,variant:b,onClickStep:z,clickable:w,expandVerticalSteps:D}=$(),{step:A,stepIconContainer:I}=V(),L=v?1:.8,M=S||p==="loading",f=C||p==="error",_=b==="simple"?i||l:i,N=m||u,O=h||k,R=()=>D?t:o.jsx(c.Collapse,{style:{width:"100%"},in:l,children:(l||i)&&t});return o.jsxs(c.chakra.div,{ref:r,className:"cui-steps__vertical-step","data-active":y.dataAttr(_),"data-clickable":y.dataAttr(w),"data-invalid":y.dataAttr(f),onClick:()=>z==null?void 0:z(n||0),__css:A,children:[o.jsxs(c.Flex,{"data-vertical":y.dataAttr(!0),className:"cui-steps__vertical-step-container",children:[o.jsx(Q,{isLoading:M,isError:f,...e,children:o.jsx(T,{index:n,isError:f,isLoading:M,isCurrentStep:l,isCompletedStep:i,icon:x,checkIcon:N,errorIcon:O})}),o.jsx(G,{label:d,description:a,isCurrentStep:l,opacity:L})]}),o.jsx(c.chakra.div,{className:"cui-steps__vertical-step-content",__css:{minH:"8px",paddingStart:I!=null&&I.width?`calc(${I.width})`:0},children:R()})]})}),ue=c.forwardRef((e,r)=>{const{children:t,description:n,icon:i,state:l,checkIcon:d,errorIcon:a,index:x,isCompletedStep:v,isCurrentStep:p,isLastStep:m,isKeepError:h,label:u}=e,{isVertical:k,isError:C,isLoading:S,clickable:b}=$(),w={isLastStep:m,isCompletedStep:v,isCurrentStep:p,index:x,isError:C,isLoading:S,clickable:b,label:u,description:n,hasVisited:p||v,icon:i,isKeepError:h,checkIcon:d,state:l,errorIcon:a};return(()=>{switch(k){case!0:return o.jsx(he,{ref:r,...w,children:t});default:return o.jsx(pe,{ref:r,...w})}})()});function fe({initialStep:e}){const[r,t]=g.useState(e);return{nextStep:()=>{t(a=>a+1)},prevStep:()=>{t(a=>a-1)},reset:()=>{t(e)},setStep:a=>{t(a)},activeStep:r}}const J=({colorScheme:e,trackColor:r,clickable:t})=>({display:"flex",alignItems:"center","&:not(:last-child)":{flex:1},"&:not(:last-child):after":{content:'""',flex:1,height:"2px",backgroundColor:`${r}`,mx:3,transition:"background-color .2s ease"},_active:{"&:not(:last-child):after":{backgroundColor:`${e}.500`,backgroundPosition:"left",transition:"background-position .2s ease-in-out"}},_hover:{cursor:t?"pointer":"default"}}),ge=({colorScheme:e,trackColor:r,clickable:t,inactiveColor:n,stepHeight:i})=>({...J({colorScheme:e,trackColor:r,clickable:t}),justifyContent:"flex-start",flexDirection:"column",flex:1,"&:not(:last-child):after":{content:'""',backgroundColor:r||n,height:"2px",order:-1,insetInline:"50%",position:"relative",top:`calc(${i} / 2)`,transition:"background-color .2s ease",width:`calc(100% - ${i} - calc(8px * 2))`}}),U=({stepHeight:e,colorScheme:r,trackColor:t,clickable:n})=>({position:"relative",gap:4,pb:4,display:"flex",flexDir:"column","--size":e,"--gap":"8px",_active:{pb:4,"&:not(:last-child):after":{backgroundColor:`${r}.500`,backgroundPosition:"left",transition:"background-position .2s ease-in-out"}},"&:not(:last-child):after":{content:'""',backgroundColor:t,bottom:"var(--gap)",insetInline:"calc(var(--size) / 2)",position:"absolute",top:"calc(var(--size) + var(--gap))",width:"2px"},_hover:{cursor:n?"pointer":"default"}}),X=({inactiveColor:e,activeColor:r})=>({display:"flex",borderRadius:"50%",alignItems:"center",justifyContent:"center",bg:e,borderColor:e,_activeStep:{borderColor:r,_invalid:{bg:"red.400",borderColor:"red.400"}},_active:{bg:r,borderColor:r,_invalid:{bg:"red.400",borderColor:"red.400"}},"&[data-clickable]:hover":{borderColor:r,cursor:"pointer"}}),xe=E.anatomy("steps").parts("description","icon","iconLabel","label","labelContainer","step","stepContainer","stepIconContainer","root"),{defineMultiStyleConfig:Ce,definePartsStyle:P}=oe.createMultiStyleConfigHelpers(xe.keys),Se={strokeWidth:"2px"},Y=e=>({color:E.mode("gray.900","gray.100")(e),textAlign:"center",fontSize:"md",fontWeight:"bold"}),be=e=>({color:E.mode("gray.800","gray.200")(e),mt:"-2px",textAlign:"center",fontSize:"sm"}),ye=({stepCount:e,orientation:r})=>({justifyContent:e===1?"flex-end":"space-between",flexDir:r==="vertical"?"column":"row",fontFamily:"heading",textAlign:"center",width:"100%",display:"flex",flex:1,flexWrap:"wrap"}),ve=()=>({display:"flex",alignItems:"center"}),me={display:"flex",position:"relative"},ke=()=>({display:"flex",flexDir:"column",justifyContent:"center"}),Ie=P(e=>({description:be(e),icon:Se,iconLabel:Y(e),label:Y(e),labelContainer:ke(),step:me,stepContainer:ve(),root:ye(e)})),H={sm:P({stepIconContainer:{width:"32px",height:"32px",borderWidth:"2px"},icon:{width:"14px",height:"14px"},label:{fontWeight:"medium",textAlign:"center",fontSize:"sm"},description:{fontWeight:"300",textAlign:"center",fontSize:"xs"}}),md:P({stepIconContainer:{width:"40px",height:"40px",borderWidth:"2px"},icon:{width:"18px",height:"18px"},label:{fontWeight:"medium",textAlign:"center",fontSize:"md"},description:{fontWeight:"300",textAlign:"center",fontSize:"sm"}}),lg:P({stepIconContainer:{width:"48px",height:"48px",borderWidth:"2px"},icon:{width:"22px",height:"22px"},label:{fontWeight:"bold",textAlign:"center",fontSize:"lg"},description:{fontWeight:"300",textAlign:"center",fontSize:"md"}})},_e=P(e=>{const{colorScheme:r}=e,t=E.mode("gray.200","gray.700")(e),n=`${r}.500`,i=H[e.size].stepIconContainer.height;return{stepIconContainer:X({inactiveColor:t,activeColor:n}),labelContainer:{flexDir:"column",alignItems:"flex-start",ms:3},step:e.orientation==="horizontal"?J({...e,stepHeight:i}):U({...e,stepHeight:i})}}),we=P(e=>{const{colorScheme:r}=e,t=E.mode("gray.200","gray.700")(e),n=`${r}.500`,i=H[e.size].stepIconContainer.height;return{stepIconContainer:{...X({inactiveColor:t,activeColor:n}),flexDir:"column"},stepContainer:{flexDir:"column"},labelContainer:{flexDir:"column",alignItems:e.orientation==="horizontal"?"center":"flex-start",ms:e.orientation==="horizontal"?0:3},step:e.orientation==="horizontal"?ge({...e,stepHeight:i}):U({...e,stepHeight:i})}}),Ae=P(e=>{const{colorScheme:r}=e,t=E.mode("gray.200","gray.700")(e),n=`${r}.500`,i=e.orientation==="vertical";return{stepIconContainer:{opacity:0,pointerEvents:"none",borderWidth:0,display:"flex",alignItems:"center",justifyContent:"flex-end",_loading:{opacity:1,pointerEvents:"auto"},_invalid:{opacity:1,pointerEvents:"auto"}},stepContainer:{flex:1,py:2,flexDir:"row-reverse",alignItems:"center",justifyContent:"space-between"},label:{mx:0,fontWeight:"bold"},labelContainer:{flexDir:"column",alignItems:"flex-start"},description:{mx:0},root:{gap:4},step:{flexDir:"column",position:"relative",flex:1,borderTopWidth:i?0:3,borderColor:(e==null?void 0:e.trackColor)||t,"&:not(:last-child):after":{display:"none"},transition:"border-color .2s ease",_activeStep:{_invalid:{borderColor:"red.400","& .cui-steps__vertical-step-container":{borderColor:"red.400"}}},_active:{transition:"border-color .2s ease",borderColor:n,"& .cui-steps__vertical-step-container":{borderColor:n},_invalid:{borderColor:"red.400","& .cui-steps__vertical-step-container":{borderColor:"red.400"}}},"& .cui-steps__vertical-step-container":{borderInlineStartWidth:3,py:2,ps:3,display:"flex",justifyContent:"space-between",flexDirection:"row-reverse",_invalid:{borderColor:"red.400","& .cui-steps__vertical-step-container":{borderColor:"red.400"}}},"& .cui-steps__vertical-step-content":{ps:0,py:0},"&[data-clickable]:hover":{borderColor:n,cursor:"pointer","& .cui-steps__vertical-step-container":{borderColor:n}}}}}),ze=Ce({baseStyle:Ie,sizes:H,variants:{circles:_e,"circles-alt":we,simple:Ae},defaultProps:{size:"md",colorScheme:"blue",variant:"circles"}});s.Step=ue,s.Steps=Z,s.StepsTheme=ze,s.useSteps=fe,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});