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

Contributed React components for the NEXT UI Kit.

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