@blockstack/ui/dist/button/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef } from 'react';
import { Box } from '../box/index.esm.js';
import { useButtonStyle } from './styles.esm.js';
import { Spinner } from '../spinner/index.esm.js';
import { useHover } from 'use-events';

var HoverChange = function HoverChange(_ref) {
  var isHovered = _ref.isHovered,
      isDisabled = _ref.isDisabled;
  return React__default.createElement(Box, {
    borderRadius: "6px",
    position: "absolute",
    width: "100%",
    height: "100%",
    left: 0,
    top: 0,
    bg: "darken.150",
    opacity: !isDisabled && isHovered ? 1 : 0,
    zIndex: 1,
    transition: "all 250ms"
  });
};

var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var isDisabled = _ref2.isDisabled,
      isActive = _ref2.isActive,
      children = _ref2.children,
      Comp = _ref2.as,
      _ref2$mode = _ref2.mode,
      mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
      _ref2$variant = _ref2.variant,
      variant = _ref2$variant === void 0 ? 'solid' : _ref2$variant,
      type = _ref2.type,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 'md' : _ref2$size,
      isLoading = _ref2.isLoading,
      loadingText = _ref2.loadingText,
      customStyles = _ref2.customStyles,
      rest = _objectWithoutPropertiesLoose(_ref2, ["isDisabled", "isActive", "children", "as", "mode", "variant", "type", "size", "isLoading", "loadingText", "customStyles"]);

  var styles = useButtonStyle({
    variant: variant,
    mode: mode,
    size: size,
    customStyles: customStyles
  });

  var _useHover = useHover(),
      hovered = _useHover[0],
      bind = _useHover[1];

  return React__default.createElement(Box, Object.assign({
    disabled: isDisabled,
    "aria-disabled": isDisabled,
    ref: ref,
    type: type,
    borderRadius: "6px",
    fontWeight: "medium",
    position: "relative",
    "data-active": isActive ? 'true' : undefined,
    as: Comp || 'button'
  }, rest, styles, bind), React__default.createElement(Box, {
    as: "span",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    zIndex: 5
  }, isLoading && React__default.createElement(Spinner, {
    position: loadingText ? 'relative' : 'absolute',
    mx: !loadingText ? 'auto' : 'unset',
    color: "currentColor",
    size: size === 'sm' ? 'xs' : 'sm'
  }), isLoading ? React__default.createElement(Box, {
    ml: "tight"
  }, loadingText) || React__default.createElement(Box, {
    ml: "tight",
    as: "span",
    opacity: 0
  }, children) : children), mode === 'primary' ? React__default.createElement(HoverChange, {
    isDisabled: isDisabled || false,
    isHovered: hovered
  }) : null);
});
Button.displayName = 'Button';

export { Button };
//# sourceMappingURL=index.esm.js.map