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

Contributed React components for the NEXT UI Kit.

import { jsx } from "react/jsx-runtime";
import { HvButton } from "@hitachivantara/uikit-react-core";
import { getColor, dotSizes } from "../utils.js";
import { useClasses } from "./Dot.styles.js";
import { staticClasses } from "./Dot.styles.js";
const HvDot = ({
  classes: classesProp,
  className,
  state,
  title,
  size = "sm",
  onClick,
  disabled
}) => {
  const { classes, cx, css } = useClasses(classesProp);
  const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
  return /* @__PURE__ */ jsx(
    HvButton,
    {
      className: cx(
        css({
          backgroundColor: getColor(state),
          width: dotSize,
          height: dotSize,
          "&:hover, &:disabled": {
            backgroundColor: getColor(state)
          }
        }),
        classes.root,
        {
          [classes.active]: state === "Current",
          [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
        },
        className
      ),
      "aria-label": `${title}`,
      icon: true,
      disabled: disabled ?? ["Current", "Disabled"].includes(state),
      onClick,
      children: []
    }
  );
};
export {
  HvDot,
  staticClasses as dotClasses
};