import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { concat } from "../../utils/classNames.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { Spinner } from "../spinner/spinner.component.js";
import "./button.theme.css.js";
const Button = React.forwardRef((props, ref) => {
  const { className, disabled, displayStyle, displaySize, displayStatus, pending, pendingPosition, disableOnPending, leftOverlay, rightOverlay, children, ...nativeProps } = props;
  const globals = useArmstrongConfig({
    buttonDisplaySize: displaySize,
    buttonDisplayStyle: displayStyle,
    buttonPendingPosition: pendingPosition,
    disableControlOnPending: disableOnPending
  });
  const spinner = jsx(Spinner, { className: concat("arm-button-spinner", `arm-button-${pendingPosition}-icon`), role: "status" });
  const wrappedLeftIcon = leftOverlay && jsx("span", { className: "arm-button-left-icon", children: leftOverlay });
  const wrappedRightIcon = rightOverlay && jsx("span", { className: "arm-button-right-icon", children: rightOverlay });
  return jsxs("button", { className: concat("arm-button", className), "data-pending": pending, "data-disabled": disabled || globals.disableControlOnPending && pending, "data-size": globals.buttonDisplaySize, "data-style": globals.buttonDisplayStyle, "data-status": displayStatus, disabled: disabled || pending, tabIndex: disabled ? -1 : nativeProps.tabIndex, ref, ...nativeProps, children: [pending && globals.buttonPendingPosition === "left" ? spinner : wrappedLeftIcon, jsx("span", { className: "arm-button-contents", children }), pending && globals.buttonPendingPosition === "right" ? spinner : wrappedRightIcon] });
});
Button.defaultProps = {
  pendingPosition: "right"
};
Button.displayName = "Button";
export {
  Button
};
//# sourceMappingURL=button.component.js.map
