@hitachivantara/uikit-react-lab/dist/StepNavigation/DefaultNavigation/Step/Step.js

Contributed React components to UI Kit by the community.

import { getSemantic } from "../utils.js";
import { useClasses } from "./Step.styles.js";
import { HvAvatar, HvButtonBase } from "@hitachivantara/uikit-react-core";
import { jsx } from "react/jsx-runtime";
import { HourGlass, Level0Good, Level3Bad } from "@hitachivantara/uikit-react-icons";
//#region src/StepNavigation/DefaultNavigation/Step/Step.tsx
var iconSizeObject = {
	xs: 8,
	sm: 16,
	md: 24,
	lg: 32,
	xl: 40
};
var iconStateObject = {
	Pending: HourGlass,
	Failed: Level3Bad,
	Completed: Level0Good
};
/**
* Step element of "Default" Step Navigation root component
*/
var HvStep = ({ className, classes: classesProp, state, title, onClick, disabled, size = "md", number = 1 }) => {
	const { classes, cx } = useClasses(classesProp);
	const color = state === "Pending" ? "bgPage" : getSemantic(state);
	const status = state === "Current" ? "textDisabled" : void 0;
	const IconComponent = iconStateObject[state];
	return /* @__PURE__ */ jsx(HvButtonBase, {
		className: cx(classes.root, className, { [classes.notCurrent]: state !== "Current" }),
		"aria-label": title,
		disabled: disabled ?? ["Current", "Disabled"].includes(state),
		onClick,
		children: /* @__PURE__ */ jsx(HvAvatar, {
			className: cx(classes.avatar, classes[size]),
			backgroundColor: getSemantic(state),
			status,
			size,
			children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
				color,
				size: iconSizeObject[size]
			}) : number
		})
	});
};
//#endregion
export { HvStep };