@hitachivantara/uikit-react-lab/dist/cjs/StepNavigation/SimpleNavigation/SimpleNavigation.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 Dot = require("./Dot/Dot.cjs");
const HvSimpleNavigation = ({
  numSteps,
  stepSize = "sm",
  getTitles,
  getDynamicValues,
  children,
  ...others
}) => {
  const { activeTheme } = uikitReactCore.useTheme();
  const dotSize = utils.dotSizes[stepSize];
  const StepComponent = Dot.HvDot;
  const stepsWidth = (numSteps + 0.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__ */ jsxRuntime.jsxs("div", { ...others, children: [
    titles,
    /* @__PURE__ */ jsxRuntime.jsx(
      Steps,
      {
        ...{
          stepsWidth,
          navWidth: width,
          separatorValues: {
            minWidth,
            maxWidth,
            getColor: utils.getColor,
            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
          },
          stepValues: {
            minSize: dotSize,
            maxSize: 1.5 * dotSize,
            StepComponent
          }
        }
      }
    )
  ] });
};
exports.HvSimpleNavigation = HvSimpleNavigation;