{"version":3,"file":"Stepper.mjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  RaikouColor,\n  RaikouRadius,\n  RaikouSize,\n  RaikouSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted } from './StepperCompleted/StepperCompleted';\nimport { StepperStep } from './StepperStep/StepperStep';\nimport {\n  StepperContentStyle,\n  StepperRootStyle,\n  StepperSeparatorStyle,\n  StepperStepBodyStyle,\n  StepperStepCompletedIconStyle,\n  StepperStepDescriptionStyle,\n  StepperStepIconStyle,\n  StepperStepLabelStyle,\n  StepperStepsStyle,\n  StepperStepStyle,\n  StepperStepWrapperStyle,\n  StepperVerticalSeparatorStyle,\n} from './Stepper.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps,\n    StylesApiProps<StepperFactory>,\n    ElementProps<'div'> {\n  /** <Stepper.Step /> components */\n  children: React.ReactNode;\n\n  /** Called when step is clicked */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon, default value is step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed, check icon by default */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress, default value is step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps, `theme.primaryColor` by default */\n  color?: RaikouColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content */\n  contentPadding?: RaikouSpacing;\n\n  /** Stepper orientation, `'horizontal'` by default */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body, `'left'` by default */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: RaikouSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius, `\"xl\"` by default */\n  radius?: RaikouRadius;\n\n  /** Determines whether next steps can be selected, `true` by default **/\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available, `true` by default */\n  wrap?: boolean;\n\n  /** Determines whether icon color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */\n  autoContrast?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps: Partial<StepperProps> = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n};\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props, ref) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes: {\n      root: StepperRootStyle,\n      separator: StepperSeparatorStyle,\n      steps: StepperStepsStyle,\n      content: StepperContentStyle,\n      step: StepperStepStyle,\n      verticalSeparator: StepperVerticalSeparatorStyle,\n      stepWrapper: StepperStepWrapperStyle,\n      stepIcon: StepperStepIconStyle,\n      stepCompletedIcon: StepperStepCompletedIconStyle,\n      stepBody: StepperStepBodyStyle,\n      stepLabel: StepperStepLabelStyle,\n      stepDescription: StepperStepDescriptionStyle,\n    },\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter((child) => child.type !== StepperCompleted);\n  const completedStep = convertedChildren.find((item) => item.type === StepperCompleted);\n\n  const items = _children.reduce<React.ReactElement[]>((acc, item, index) => {\n    const state =\n      active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n    const shouldAllowSelect = () => {\n      if (typeof onStepClick !== 'function') {\n        return false;\n      }\n\n      if (typeof item.props.allowStepSelect === 'boolean') {\n        return item.props.allowStepSelect;\n      }\n\n      return state === 'stepCompleted' || allowNextStepsSelect;\n    };\n\n    const isStepSelectionEnabled = shouldAllowSelect();\n\n    acc.push(\n      cloneElement(item, {\n        icon: item.props.icon || icon || index + 1,\n        key: index,\n        step: index,\n        state,\n        onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n        allowStepClick: isStepSelectionEnabled,\n        completedIcon: item.props.completedIcon || completedIcon,\n        progressIcon: item.props.progressIcon || progressIcon,\n        color: item.props.color || color,\n        iconSize,\n        radius,\n        iconPosition: item.props.iconPosition || iconPosition,\n        orientation,\n        unstyled,\n      })\n    );\n\n    if (orientation === 'horizontal' && index !== _children.length - 1) {\n      acc.push(\n        <div\n          {...getStyles('separator')}\n          data-active={index < active || undefined}\n          data-orientation={orientation}\n          key={`separator-${index}`}\n        />\n      );\n    }\n\n    return acc;\n  }, []);\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} ref={ref} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {content && <div {...getStyles('content')}>{content}</div>}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.displayName = '@raikou/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}