@mantine/core/esm/components/Stepper/StepperStep/StepperStep.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getThemeColor } from "../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
import { Transition } from "../../Transition/Transition.mjs";
import { Loader } from "../../Loader/Loader.mjs";
import { CheckIcon } from "../../Checkbox/CheckIcon.mjs";
import { useStepperContext } from "../Stepper.context.mjs";
import Stepper_module_default from "../Stepper.module.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Stepper/StepperStep/StepperStep.tsx
const getStepFragment = (Fragment, step) => {
	if (typeof Fragment === "function") return /* @__PURE__ */ jsx(Fragment, { step: step || 0 });
	return Fragment;
};
const defaultProps = {
	withIcon: true,
	allowStepClick: true,
	iconPosition: "left"
};
const StepperStep = 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 } = useProps("StepperStep", defaultProps, props);
	const ctx = useStepperContext();
	const theme = 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__ */ jsxs(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 ? getThemeColor(color, theme) : void 0 },
		tabIndex: allowStepClick ? 0 : -1,
		children: [withIcon && /* @__PURE__ */ jsxs("span", {
			...ctx.getStyles("stepWrapper", stylesApi),
			children: [/* @__PURE__ */ jsxs("span", {
				...ctx.getStyles("stepIcon", stylesApi),
				...dataAttributes,
				children: [/* @__PURE__ */ jsx(Transition, {
					mounted: state === "stepCompleted",
					transition: "pop",
					duration: 200,
					children: (transitionStyles) => /* @__PURE__ */ jsx("span", {
						...ctx.getStyles("stepCompletedIcon", {
							style: transitionStyles,
							...stylesApi
						}),
						children: loading ? /* @__PURE__ */ jsx(Loader, {
							color: "var(--mantine-color-white)",
							size: "calc(var(--stepper-icon-size) / 2)",
							...ctx.getStyles("stepLoader", stylesApi)
						}) : getStepFragment(completedIcon, step) || /* @__PURE__ */ jsx(CheckIcon, { size: "60%" })
					})
				}), state !== "stepCompleted" ? /* @__PURE__ */ jsx("span", {
					...ctx.getStyles("stepIconContent", stylesApi),
					children: loading ? /* @__PURE__ */ jsx(Loader, {
						...ctx.getStyles("stepLoader", stylesApi),
						size: "calc(var(--stepper-icon-size) / 2)",
						color
					}) : getStepFragment(_icon || icon, step)
				}) : null]
			}), orientation === "vertical" && /* @__PURE__ */ jsx("span", {
				...ctx.getStyles("verticalSeparator", stylesApi),
				"data-active": state === "stepCompleted" || void 0
			})]
		}), (label || description) && /* @__PURE__ */ jsxs("span", {
			...ctx.getStyles("stepBody", stylesApi),
			"data-orientation": ctx.orientation,
			"data-icon-position": iconPosition || ctx.iconPosition,
			children: [label && /* @__PURE__ */ jsx("span", {
				...ctx.getStyles("stepLabel", stylesApi),
				children: getStepFragment(label, step)
			}), description && /* @__PURE__ */ jsx("span", {
				...ctx.getStyles("stepDescription", stylesApi),
				children: getStepFragment(description, step)
			})]
		})]
	});
});
StepperStep.classes = Stepper_module_default;
StepperStep.displayName = "@mantine/core/StepperStep";
//#endregion
export { StepperStep };

//# sourceMappingURL=StepperStep.mjs.map