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

Contributed React components for the NEXT UI Kit.

import { jsxs, jsx } from "react/jsx-runtime";
import { useTheme } from "@hitachivantara/uikit-react-core";
import { stepSizes, getColor } from "./utils.js";
import { HvStep } from "./Step/Step.js";
const HvDefaultNavigation = ({
  numSteps,
  stepSize,
  getTitles,
  getDynamicValues,
  className,
  children,
  ...other
}) => {
  const { activeTheme } = useTheme();
  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) * 0.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: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
          },
          stepValues: {
            minSize,
            maxSize,
            StepComponent
          }
        }
      }
    ),
    titles
  ] });
};
export {
  HvDefaultNavigation
};