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

Contributed React components to UI Kit by the community.

import { dotSizes, getColor } from "../utils.js";
import { useClasses } from "./Dot.styles.js";
import { HvButton } from "@hitachivantara/uikit-react-core";
import { jsx } from "react/jsx-runtime";
import { mergeStyles } from "@hitachivantara/uikit-react-utils";
//#region src/StepNavigation/SimpleNavigation/Dot/Dot.tsx
var HvDot = ({ classes: classesProp, className, state, title, size = "sm", onClick, disabled: disabledProp }) => {
	const { classes, cx } = useClasses(classesProp);
	const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
	const disabled = disabledProp ?? ["Current", "Disabled"].includes(state);
	return /* @__PURE__ */ jsx(HvButton, {
		style: mergeStyles(void 0, {
			"--dotColor": getColor(state),
			"--dotSize": `${dotSize}px`
		}),
		className: cx(classes.root, {
			[classes.active]: state === "Current",
			[classes.ghostDisabled]: disabled
		}, className),
		"aria-label": title,
		icon: true,
		disabled,
		onClick
	});
};
//#endregion
export { HvDot };