@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
103 lines (102 loc) • 4.97 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
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