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

Contributed React components to UI Kit by the community.

import { dotSizes, getColor } from "./utils.js";
import { HvDot } from "./Dot/Dot.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/StepNavigation/SimpleNavigation/SimpleNavigation.tsx
var HvSimpleNavigation = ({ numSteps, stepSize = "sm", getTitles, getDynamicValues, children, ...others }) => {
	const dotSize = dotSizes[stepSize];
	const StepComponent = HvDot;
	const stepsWidth = (numSteps + .5) * dotSize;
	const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
	const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
	const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);
	const Steps = children;
	const titles = getTitles(({ rawTitle, number }) => ({
		variant: "label",
		title: `${number}. ${rawTitle}`,
		titleWidth
	}));
	return /* @__PURE__ */ jsxs("div", {
		...others,
		children: [titles, /* @__PURE__ */ jsx(Steps, {
			stepsWidth,
			navWidth: width,
			separatorValues: {
				minWidth,
				maxWidth,
				getColor,
				height: 1
			},
			stepValues: {
				minSize: dotSize,
				maxSize: 1.5 * dotSize,
				StepComponent
			}
		})]
	});
};
//#endregion
export { HvSimpleNavigation };