{"version":3,"file":"StepperStep.cjs","sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  RaikouColor,\n  useProps,\n  useRaikouTheme,\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';\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  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps,\n    CompoundStylesApiProps<StepperStepFactory>,\n    ElementProps<'button'> {\n  /** Step index, controlled by Stepper component **/\n  step?: number;\n\n  /** Step state, controlled by Stepper component */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: RaikouColor;\n\n  /** Determines whether the icon should be displayed */\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?: 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: Partial<StepperStepProps> = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n};\n\nexport const StepperStep = factory<StepperStepFactory>((props, ref) => {\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 = useRaikouTheme();\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      ref={ref}\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(--raikou-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              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            ) : 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.displayName = '@raikou/core/StepperStep';\n"],"names":["jsx","factory","useProps","useStepperContext","useRaikouTheme","jsxs","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon"],"mappings":"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"}