{"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;AAyET,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAcA,gBAAAA,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACDC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAMC,wBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,iBAAA,GAAA,kBAAA,MAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;eAClD,UACC,iBAAA,GAAA,kBAAA,KAACD,eAAAA,QAAD;MACE,GAAI,IAAI,UAAU,cAAc,UAAU;MAC1C,MAAK;MACE;MACP,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK;KAEjC,CAAA,GACL,KACC;OACN,gBAAgB,cACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,iBAAA,GAAA,kBAAA,MAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUE,uBAAAA;AACtB,YAAY,cAAc"}