@hitachivantara/uikit-react-core/dist/Button/Button.js

UI Kit Core React components.

import { fixedForwardRef } from "../types/generic.js";
import { getIconSizeStyles, getSizeStyles, useClasses } from "./Button.styles.js";
import { getColor, theme } from "@hitachivantara/uikit-styles";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Button/Button.tsx
function parseVariant(variant) {
	({ secondary: "secondarySubtle" })[variant];
	if (variant === "semantic") return ["inherit", "ghost"];
	if (variant === "secondary") return ["text", "subtle"];
	if (variant === "ghost") return ["primary", "ghost"];
	if (variant === "contained" || variant === "subtle") return ["text", variant];
	const result = variant.split(/(?=[A-Z])/);
	if (!result[1]) return [result[0], "contained"];
	return result.map((x) => x.toLowerCase());
}
/**
* Button component is used to trigger an action or event.
*/
var HvButton = fixedForwardRef(function HvButton(props, ref) {
	const { classes: classesProp, children, icon = false, variant: variantProp = icon ? "secondaryGhost" : "primary", color: colorProp, disabled = false, className, startIcon, endIcon, size, radius, overrideIconColors, component: Component = "button", focusableWhenDisabled, onClick: onClickProp, onMouseDown: onMouseDownProp, selected, style, ...others } = useDefaultProps("HvButton", props);
	const { classes, css, cx } = useClasses(classesProp);
	const [parsedColor, variant] = parseVariant(variantProp);
	const color = colorProp ?? parsedColor;
	const handleClick = (e) => {
		if (disabled) return;
		onClickProp?.(e);
	};
	const handleMouseDown = (e) => {
		if (disabled) return;
		onMouseDownProp?.(e);
	};
	const sizeStyles = useMemo(() => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)), [size, icon]);
	return /* @__PURE__ */ jsxs(Component, {
		ref,
		style: mergeStyles(style, {
			"--color": color && getColor(color),
			"--radius": radius && theme.radii[radius],
			"--HvButton-height": sizeStyles?.height ?? "32px"
		}),
		className: cx(classes.root, classes[variant], classes[variantProp], {
			[classes.icon]: icon,
			[classes.disabled]: disabled
		}, sizeStyles && css(sizeStyles), className),
		"data-color": color,
		onClick: handleClick,
		onMouseDown: handleMouseDown,
		...Component === "button" && { type: "button" },
		...disabled && {
			disabled: !focusableWhenDisabled,
			tabIndex: focusableWhenDisabled ? 0 : -1,
			"aria-disabled": true
		},
		...selected != null && { "aria-pressed": selected },
		...others,
		children: [
			startIcon && /* @__PURE__ */ jsx("span", {
				className: classes.startIcon,
				children: startIcon
			}),
			children,
			endIcon && /* @__PURE__ */ jsx("span", {
				className: classes.endIcon,
				children: endIcon
			})
		]
	});
});
//#endregion
export { HvButton };