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

Contributed React components for the NEXT UI Kit.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const utils = require("./utils.cjs");
const Step = require("./Step/Step.cjs");
const HvDefaultNavigation = ({
  numSteps,
  stepSize,
  getTitles,
  getDynamicValues,
  className,
  children,
  ...other
}) => {
  const { activeTheme } = uikitReactCore.useTheme();
  const { container: maxSize, avatar: minSize } = utils.stepSizes[stepSize];
  const StepComponent = Step.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) * 0.5,
    separatorWidth
  );
  const Steps = children;
  const titles = getTitles(({ state }) => ({
    variant: "label",
    titleWidth,
    titleDisabled: state === "Disabled"
  }));
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...other, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      Steps,
      {
        ...{
          stepsWidth,
          navWidth: width,
          separatorValues: {
            minWidth,
            maxWidth,
            getColor: utils.getColor,
            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
          },
          stepValues: {
            minSize,
            maxSize,
            StepComponent
          }
        }
      }
    ),
    titles
  ] });
};
exports.HvDefaultNavigation = HvDefaultNavigation;