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

Contributed React components to UI Kit by the community.

import { getColor, stepSizes } from "./utils.js";
import { HvStep } from "./Step/Step.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/StepNavigation/DefaultNavigation/DefaultNavigation.tsx
var HvDefaultNavigation = ({ numSteps, stepSize, getTitles, getDynamicValues, className, children, ...other }) => {
	const { container: maxSize, avatar: minSize } = stepSizes[stepSize];
	const StepComponent = HvStep;
	const stepsWidth = maxSize + minSize * (numSteps - 1);
	const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
	const maxWidth = Math.max(titleWidth - minSize, separatorWidth);
	const minWidth = Math.max(titleWidth - (maxSize + minSize) * .5, separatorWidth);
	const Steps = children;
	const titles = getTitles(({ state }) => ({
		variant: "label",
		titleWidth,
		titleDisabled: state === "Disabled"
	}));
	return /* @__PURE__ */ jsxs("div", {
		...other,
		children: [/* @__PURE__ */ jsx(Steps, {
			stepsWidth,
			navWidth: width,
			separatorValues: {
				minWidth,
				maxWidth,
				getColor,
				height: 1
			},
			stepValues: {
				minSize,
				maxSize,
				StepComponent
			}
		}), titles]
	});
};
//#endregion
export { HvDefaultNavigation };