"use client";
const require_get_theme_color = require("../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_UnstyledButton = require("../../UnstyledButton/UnstyledButton.cjs");
const require_Transition = require("../../Transition/Transition.cjs");
const require_Loader = require("../../Loader/Loader.cjs");
const require_CheckIcon = require("../../Checkbox/CheckIcon.cjs");
const require_Stepper_context = require("../Stepper.context.cjs");
const require_Stepper_module = require("../Stepper.module.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Stepper/StepperStep/StepperStep.tsx
const getStepFragment = (Fragment, step) => {
	if (typeof Fragment === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fragment, { step: step || 0 });
	return Fragment;
};
const defaultProps = {
	withIcon: true,
	allowStepClick: true,
	iconPosition: "left"
};
const StepperStep = require_factory.factory((props) => {
	const { classNames, className, style, styles, vars, step, state, color, icon, completedIcon, progressIcon, label, description, withIcon, iconSize, loading, allowStepClick, allowStepSelect, iconPosition, orientation, mod, ...others } = require_use_props.useProps("StepperStep", defaultProps, props);
	const ctx = require_Stepper_context.useStepperContext();
	const theme = require_MantineThemeProvider.useMantineTheme();
	const stylesApi = {
		classNames,
		styles
	};
	const _icon = state === "stepCompleted" ? null : state === "stepProgress" ? progressIcon : icon;
	const dataAttributes = {
		"data-progress": state === "stepProgress" || void 0,
		"data-completed": state === "stepCompleted" || void 0
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_UnstyledButton.UnstyledButton, {
		...ctx.getStyles("step", {
			className,
			style,
			variant: ctx.orientation,
			...stylesApi
		}),
		mod: [{
			"icon-position": iconPosition || ctx.iconPosition,
			"allow-click": allowStepClick
		}, mod],
		...dataAttributes,
		...others,
		__vars: { "--step-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0 },
		tabIndex: allowStepClick ? 0 : -1,
		children: [withIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
			...ctx.getStyles("stepWrapper", stylesApi),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
				...ctx.getStyles("stepIcon", stylesApi),
				...dataAttributes,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
					mounted: state === "stepCompleted",
					transition: "pop",
					duration: 200,
					children: (transitionStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						...ctx.getStyles("stepCompletedIcon", {
							style: transitionStyles,
							...stylesApi
						}),
						children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
							color: "var(--mantine-color-white)",
							size: "calc(var(--stepper-icon-size) / 2)",
							...ctx.getStyles("stepLoader", stylesApi)
						}) : getStepFragment(completedIcon, step) || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { size: "60%" })
					})
				}), state !== "stepCompleted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
					...ctx.getStyles("stepIconContent", stylesApi),
					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
						...ctx.getStyles("stepLoader", stylesApi),
						size: "calc(var(--stepper-icon-size) / 2)",
						color
					}) : getStepFragment(_icon || icon, step)
				}) : null]
			}), orientation === "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...ctx.getStyles("verticalSeparator", stylesApi),
				"data-active": state === "stepCompleted" || void 0
			})]
		}), (label || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
			...ctx.getStyles("stepBody", stylesApi),
			"data-orientation": ctx.orientation,
			"data-icon-position": iconPosition || ctx.iconPosition,
			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...ctx.getStyles("stepLabel", stylesApi),
				children: getStepFragment(label, step)
			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...ctx.getStyles("stepDescription", stylesApi),
				children: getStepFragment(description, step)
			})]
		})]
	});
});
StepperStep.classes = require_Stepper_module.default;
StepperStep.displayName = "@mantine/core/StepperStep";
//#endregion
exports.StepperStep = StepperStep;

//# sourceMappingURL=StepperStep.cjs.map