@s-ui/react-atom-button/lib/index.js

Atom Element: SUI button

import _extends from "@babel/runtime/helpers/esm/extends";
import { forwardRef } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import PrimitiveLoadingIcon from '@s-ui/react-primitive-loading-icon';
import Button from './Button.js';
import ButtonIcon from './ButtonIcon.js';
import { ALIGNMENT, CLASS, CLASSES, cleanProps, COLORS, DESIGNS, ELEVATIONS, getModifiers, getPropsWithDefaultValues, GROUP_POSITIONS, ICON_POSITIONS, SHAPES, SIZES } from './config.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var AtomButton = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
  var _cx, _cx2;
  var _getPropsWithDefaultV = getPropsWithDefaultValues(props),
    alignment = _getPropsWithDefaultV.alignment,
    className = _getPropsWithDefaultV.className,
    children = _getPropsWithDefaultV.children,
    color = _getPropsWithDefaultV.color,
    design = _getPropsWithDefaultV.design,
    disabled = _getPropsWithDefaultV.disabled,
    isLoading = _getPropsWithDefaultV.isLoading,
    focused = _getPropsWithDefaultV.focused,
    groupPosition = _getPropsWithDefaultV.groupPosition,
    link = _getPropsWithDefaultV.link,
    leftIcon = _getPropsWithDefaultV.leftIcon,
    loadingText = _getPropsWithDefaultV.loadingText,
    _getPropsWithDefaultV2 = _getPropsWithDefaultV.loader,
    loader = _getPropsWithDefaultV2 === void 0 ? /*#__PURE__*/_jsx(PrimitiveLoadingIcon, {}) : _getPropsWithDefaultV2,
    rightIcon = _getPropsWithDefaultV.rightIcon,
    size = _getPropsWithDefaultV.size,
    title = _getPropsWithDefaultV.title,
    shape = _getPropsWithDefaultV.shape,
    elevation = _getPropsWithDefaultV.elevation,
    selected = _getPropsWithDefaultV.selected,
    value = _getPropsWithDefaultV.value;
  var classNames = cx(CLASS, CLASSES[color], CLASSES[design], alignment && CLASSES[alignment], groupPosition && CLASS + "-group " + CLASS + "-group--" + groupPosition, groupPosition && focused && CLASS + "-group--focused", groupPosition && selected && CLASS + "-group--selected", size && CLASSES[size], getModifiers(_extends({}, props, {
    disabled: disabled || isLoading
  })).map(function (key) {
    return CLASSES[key];
  }), !children && CLASSES.empty, (_cx = {}, _cx[CLASS + "--" + shape] = Object.values(SHAPES).includes(shape), _cx), (_cx2 = {}, _cx2[CLASS + "--loading"] = isLoading, _cx2[CLASS + "--elevation-" + elevation] = !!elevation, _cx2), className);
  var newProps = cleanProps(props);
  return /*#__PURE__*/_jsx(Button, _extends({
    ref: forwardedRef
  }, newProps, {
    link: link,
    className: classNames,
    title: title,
    disabled: disabled || isLoading,
    value: value,
    children: /*#__PURE__*/_jsx("span", {
      className: CLASS + "-inner",
      children: isLoading ? /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(ButtonIcon, {
          position: loadingText ? ICON_POSITIONS.LEFT : ICON_POSITIONS.CENTER,
          size: size,
          children: loader
        }), children && loadingText ? loadingText : /*#__PURE__*/_jsx("span", {
          className: CLASS + "-content",
          children: children
        })]
      }) : /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(ButtonIcon, {
          position: ICON_POSITIONS.LEFT,
          size: size,
          children: leftIcon
        }), /*#__PURE__*/_jsx("span", {
          className: CLASS + "-content",
          children: children
        }), /*#__PURE__*/_jsx(ButtonIcon, {
          position: ICON_POSITIONS.RIGHT,
          size: size,
          children: rightIcon
        })]
      })
    })
  }));
});
AtomButton.displayName = 'AtomButton';
export default AtomButton;
export { GROUP_POSITIONS as atomButtonGroupPositions };
export { COLORS as atomButtonColors };
export { DESIGNS as atomButtonDesigns };
export { SIZES as atomButtonSizes };
export { ALIGNMENT as atomButtonAlignment };
export { SHAPES as atomButtonShapes };
export { ELEVATIONS as atomButtonElevations };