"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const rem = require("../../core/utils/units-converters/rem.cjs");
const getSize = require("../../core/utils/get-size/get-size.cjs");
const createVarsResolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
require("clsx");
const getThemeColor = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const getContrastColor = require("../../core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.cjs");
const getAutoContrastValue = require("../../core/MantineProvider/color-functions/get-auto-contrast-value/get-auto-contrast-value.cjs");
const useProps = require("../../core/MantineProvider/use-props/use-props.cjs");
const useStyles = require("../../core/styles-api/use-styles/use-styles.cjs");
const Box = require("../../core/Box/Box.cjs");
const factory = require("../../core/factory/factory.cjs");
const Stepper_context = require("./Stepper.context.cjs");
const StepperCompleted = require("./StepperCompleted/StepperCompleted.cjs");
const StepperStep = require("./StepperStep/StepperStep.cjs");
const Stepper_module_css = require("./Stepper.module.css.cjs");
const defaultProps = {
  orientation: "horizontal",
  iconPosition: "left",
  allowNextStepsSelect: true,
  wrap: true
};
const varsResolver = createVarsResolver.createVarsResolver(
  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({
    root: {
      "--stepper-color": color ? getThemeColor.getThemeColor(color, theme) : void 0,
      "--stepper-icon-color": getAutoContrastValue.getAutoContrastValue(autoContrast, theme) ? getContrastColor.getContrastColor({ color, theme, autoContrast }) : void 0,
      "--stepper-icon-size": iconSize === void 0 ? getSize.getSize(size, "stepper-icon-size") : rem.rem(iconSize),
      "--stepper-content-padding": getSize.getSpacing(contentPadding),
      "--stepper-radius": radius === void 0 ? void 0 : getSize.getRadius(radius),
      "--stepper-fz": getSize.getFontSize(size),
      "--stepper-spacing": getSize.getSpacing(size)
    }
  })
);
const Stepper = factory.factory((_props, ref) => {
  var _a, _b, _c;
  const props = useProps.useProps("Stepper", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    children,
    onStepClick,
    active,
    icon,
    completedIcon,
    progressIcon,
    color,
    iconSize,
    contentPadding,
    orientation,
    iconPosition,
    size,
    radius,
    allowNextStepsSelect,
    wrap,
    autoContrast,
    ...others
  } = props;
  const getStyles = useStyles.useStyles({
    name: "Stepper",
    classes: Stepper_module_css.default,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const convertedChildren = React.Children.toArray(children);
  const _children = convertedChildren.filter(
    (child) => child.type !== StepperCompleted.StepperCompleted
  );
  const completedStep = convertedChildren.find(
    (item) => item.type === StepperCompleted.StepperCompleted
  );
  const items = _children.reduce(
    (acc, item, index) => {
      const state = active === index ? "stepProgress" : active > index ? "stepCompleted" : "stepInactive";
      const shouldAllowSelect = () => {
        if (typeof onStepClick !== "function") {
          return false;
        }
        if (typeof item.props.allowStepSelect === "boolean") {
          return item.props.allowStepSelect;
        }
        return state === "stepCompleted" || allowNextStepsSelect;
      };
      const isStepSelectionEnabled = shouldAllowSelect();
      acc.push(
        React.cloneElement(item, {
          icon: item.props.icon || icon || index + 1,
          key: index,
          step: index,
          state,
          onClick: () => isStepSelectionEnabled && (onStepClick == null ? void 0 : onStepClick(index)),
          allowStepClick: isStepSelectionEnabled,
          completedIcon: item.props.completedIcon || completedIcon,
          progressIcon: item.props.progressIcon || progressIcon,
          color: item.props.color || color,
          iconSize,
          iconPosition: item.props.iconPosition || iconPosition,
          orientation
        })
      );
      if (orientation === "horizontal" && index !== _children.length - 1) {
        acc.push(
          /* @__PURE__ */ React.createElement(
            "div",
            {
              ...getStyles("separator"),
              "data-active": index < active || void 0,
              "data-orientation": orientation,
              key: `separator-${index}`
            }
          )
        );
      }
      return acc;
    },
    []
  );
  const stepContent = (_b = (_a = _children[active]) == null ? void 0 : _a.props) == null ? void 0 : _b.children;
  const completedContent = (_c = completedStep == null ? void 0 : completedStep.props) == null ? void 0 : _c.children;
  const content = active > _children.length - 1 ? completedContent : stepContent;
  return /* @__PURE__ */ jsxRuntime.jsx(Stepper_context.StepperProvider, { value: { getStyles, orientation, iconPosition }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { ...getStyles("root"), ref, size, ...others, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      Box.Box,
      {
        ...getStyles("steps"),
        mod: {
          orientation,
          "icon-position": iconPosition,
          wrap: wrap && orientation !== "vertical"
        },
        children: items
      }
    ),
    content && /* @__PURE__ */ jsxRuntime.jsx("div", { ...getStyles("content"), children: content })
  ] }) });
});
Stepper.classes = Stepper_module_css.default;
Stepper.displayName = "@mantine/core/Stepper";
Stepper.Completed = StepperCompleted.StepperCompleted;
Stepper.Step = StepperStep.StepperStep;
exports.Stepper = Stepper;
