@guruhotel/aura-ui/esm/stepper/components/step/index.js

⚛️ React UI library by GuruHotel

import{CheckSolid as e,CrossRegular as r}from"../../../icons";import*as i from"react";import{Spinner as o}from"../../../spinner";import{useStepsContext as t}from"../../context";import{Connector as l}from"../connector";import{StepLabel as s}from"../step-label";import{StepButton as a,StepButtonContainer as n,StepContainer as c}from"./step.styles";import{jsx as p}from"react/jsx-runtime";import{jsxs as d}from"react/jsx-runtime";export const Step=i.forwardRef(((m,u)=>{const{children:f,description:b,icon:h,index:S,isCompletedStep:C,isCurrentStep:L,isLastStep:x,label:k,optional:$,optionalLabel:v}=m,{isVertical:j,isError:y,isLoading:M,successIcon:V,errorIcon:g,isLabelVertical:z,onClickStep:E,clickable:I,colorScheme:w,size:N,css:R,rounded:q,variant:A}=t(),B=L||C,D=B?1:.8,F=i.useMemo((()=>h||null),[h]),G=i.useMemo((()=>V||p(e,{label:"Check",color:"currentColor"})),[V]),H=i.useMemo((()=>g||p(r,{label:"Error",color:"red"})),[g]),J=i.useMemo((()=>{if(C)return G;if(L){if(y)return H;if(M)return p(o,{size:N,colorScheme:w,css:{borderLeftColor:"solid"===A?`$${w}1`:"outline"===A?`$${w}11`:"inherit"}})}return F||(S||0)+1}),[C,G,L,F,S,y,H,M,N,w,A]);return d(c,{ref:u,lastStep:x,isVertical:j,isClickable:I&&!!E,opacity:!B,onClick:()=>(e=>{I&&E&&E(e)})(S),"aria-disabled":!B,children:[d(n,{isLabelVertical:z,children:[p(a,{"aria-current":L?"step":void 0,"data-invalid":L&&y,"data-highlighted":C,"data-clickable":I,css:{...null==R?void 0:R.button,rounded:q?"$full":"$none"},colorScheme:L&&y?"red":C?"nature":w,variant:A,size:N,disabled:!(B||I),children:J}),p(s,{label:k,description:b,optional:$,optionalLabel:v,isCurrentStep:L,opacity:D})]}),p(l,{index:S,isLastStep:x,hasLabel:!!k||!!b,isCompletedStep:C||!1,children:(L||C)&&f})]})}));Step.displayName="Step";