@lobehub/ui/es/base-ui/Steps/Steps.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import { styles } from "./style.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { Check } from "lucide-react";
//#region src/base-ui/Steps/Steps.tsx
const getStatus = (index, current, item) => {
	if (item.status) return item.status;
	if (current === void 0) return void 0;
	if (index < current) return "finish";
	if (index === current) return "process";
	return "wait";
};
const renderIndicator = (item, index, status, isDot) => {
	if (isDot) return null;
	if (item.icon != null) return item.icon;
	if (status === "finish") return /* @__PURE__ */ jsx(Icon, {
		icon: Check,
		size: 12
	});
	return index + 1;
};
const Steps = memo(({ className, classNames, current, items, orientation = "horizontal", ref, styles: customStyles, variant = "default", ...rest }) => {
	const isDot = variant === "dot";
	return /* @__PURE__ */ jsx("ol", {
		ref,
		className: cx(styles.root, orientation === "vertical" ? styles.vertical : styles.horizontal, isDot && styles.dot, className),
		...rest,
		children: items.map((item, index) => {
			const status = getStatus(index, current, item);
			const isLast = index === items.length - 1;
			return /* @__PURE__ */ jsxs("li", {
				"aria-current": current !== void 0 && index === current ? "step" : void 0,
				className: cx(classNames?.item),
				"data-status": status ?? "guide",
				style: customStyles?.item,
				children: [
					/* @__PURE__ */ jsx("span", {
						className: cx(styles.indicator, classNames?.indicator),
						style: customStyles?.indicator,
						children: renderIndicator(item, index, status, isDot)
					}),
					(item.title != null || item.description != null) && /* @__PURE__ */ jsxs("div", {
						className: styles.body,
						children: [item.title != null && /* @__PURE__ */ jsx("div", {
							className: cx(styles.title, classNames?.title),
							style: customStyles?.title,
							children: item.title
						}), item.description != null && /* @__PURE__ */ jsx("div", {
							className: cx(styles.description, classNames?.description),
							style: customStyles?.description,
							children: item.description
						})]
					}),
					!isLast && /* @__PURE__ */ jsx("span", {
						"aria-hidden": "true",
						className: styles.connector,
						style: isDot ? {
							insetBlockStart: 20,
							insetInlineStart: 3
						} : void 0
					})
				]
			}, item.key ?? index);
		})
	});
});
Steps.displayName = "Steps";
//#endregion
export { Steps as default };

//# sourceMappingURL=Steps.mjs.map