@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDButton.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["loadingConfigurationSettings", "style", "buttonConfigurations", "onClick", "onHover", "loadingContent", "transition", "animationVariants", "initial", "whileHover", "whileTap", "preset", "loading", "disabled", "layout", "as", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import { motion } from "framer-motion";
var baseVariants = {
  initial: {
    boxShadow: "0 0 0px rgba(0, 0, 0, 0)",
    opacity: 1,
    scale: 1
  },
  hover: {
    boxShadow: "0px 6px 14px rgba(0, 0, 0, 0.15)",
    opacity: 1,
    scale: 1.1069
  },
  tap: {
    boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.12)",
    opacity: 1,
    scale: 0.869
  }
};
var presetConfigurationSettings = {
  primary: {
    background: "#1A73E8",
    color: "#fff"
  },
  danger: {
    background: "#D32F2F",
    color: "#fff"
  },
  glass: {
    backdropFilter: "blur(8px)",
    border: "1px solid rgba(255, 255, 255, 0.369)",
    background: "rgba(255, 255, 255, 0.1)",
    color: "#fff"
  },
  flat: {
    background: "transparent",
    color: "#1A73E8"
  }
};
function HUDButton(_ref) {
  var _ref$loadingConfigura = _ref.loadingConfigurationSettings,
    loadingConfigurationSettings = _ref$loadingConfigura === void 0 ? {} : _ref$loadingConfigura,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? {} : _ref$style,
    _ref$buttonConfigurat = _ref.buttonConfigurations,
    buttonConfigurations = _ref$buttonConfigurat === void 0 ? {} : _ref$buttonConfigurat,
    onClick = _ref.onClick,
    onHover = _ref.onHover,
    _ref$loadingContent = _ref.loadingContent,
    loadingContent = _ref$loadingContent === void 0 ? /*#__PURE__*/React.createElement("span", {
      style: {
        fontSize: "14px"
      }
    }, "Loading...") : _ref$loadingContent,
    _ref$transition = _ref.transition,
    transition = _ref$transition === void 0 ? {
      type: "spring",
      stiffness: 769,
      damping: 37,
      mass: 0.4,
      velocity: 5
    } : _ref$transition,
    _ref$animationVariant = _ref.animationVariants,
    animationVariants = _ref$animationVariant === void 0 ? {} : _ref$animationVariant,
    _ref$initial = _ref.initial,
    initial = _ref$initial === void 0 ? "initial" : _ref$initial,
    _ref$whileHover = _ref.whileHover,
    whileHover = _ref$whileHover === void 0 ? "hover" : _ref$whileHover,
    _ref$whileTap = _ref.whileTap,
    whileTap = _ref$whileTap === void 0 ? "tap" : _ref$whileTap,
    _ref$preset = _ref.preset,
    preset = _ref$preset === void 0 ? "primary" : _ref$preset,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? false : _ref$layout,
    _ref$as = _ref.as,
    as = _ref$as === void 0 ? "button" : _ref$as,
    children = _ref.children,
    rest = _objectWithoutProperties(_ref, _excluded);
  var MotionTag = motion[as] && typeof motion[as] === "function" ? motion[as] : motion.button;
  var baseConfigurationSettings = _objectSpread(_objectSpread(_objectSpread({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    pointerEvents: disabled || loading ? "none" : "auto",
    userSelect: "none",
    cursor: disabled || loading ? "not-allowed" : "pointer",
    outline: "none",
    transition: "all 0.269s ease",
    fontWeight: 600,
    fontSize: "1.069rem",
    border: "none",
    borderRadius: "0.369rem",
    gap: "0.269rem",
    padding: "0.69rem 0.869rem"
  }, presetConfigurationSettings[preset]), style), loading ? loadingConfigurationSettings !== null && loadingConfigurationSettings !== void 0 ? loadingConfigurationSettings : {} : {});
  var handleMouseLeave = function handleMouseLeave(e) {
    if (!disabled && typeof onHover === "function") {
      onHover(e, false);
    }
  };
  var handleMouseEnter = function handleMouseEnter(e) {
    if (!disabled && typeof onHover === "function") {
      onHover(e, true);
    }
  };
  return /*#__PURE__*/React.createElement(MotionTag, _extends({
    initial: initial,
    variants: _objectSpread(_objectSpread({}, baseVariants), animationVariants !== null && animationVariants !== void 0 ? animationVariants : {}),
    whileHover: !disabled && !loading && whileHover,
    whileTap: !disabled && !loading && whileTap,
    transition: transition,
    style: baseConfigurationSettings,
    onMouseLeave: handleMouseLeave,
    onMouseEnter: handleMouseEnter,
    onClick: disabled || loading ? undefined : onClick,
    layout: layout
  }, buttonConfigurations !== null && buttonConfigurations !== void 0 ? buttonConfigurations : {}, rest), loading ? loadingContent : children);
}
;
export default HUDButton;