@nestbotics/nct_frontend_common_components/dist/components/common/Button.esm.js

A collection of reusable React components with theme management and styling utilities

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["theme", "buttonvariant", "mode"],
  _excluded2 = ["variant", "icon", "children", "onClick"];
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 { styled, useTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
import { tokens } from "../../theme/Theme";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var StyledButton = styled(Button)(function (_ref) {
  var theme = _ref.theme,
    buttonvariant = _ref.buttonvariant,
    mode = _ref.mode,
    props = _objectWithoutProperties(_ref, _excluded);
  var colors = tokens(mode);
  return _objectSpread({
    fontFamily: 'var(--font-sans)',
    fontSize: '0.875rem',
    fontWeight: 500,
    lineHeight: '1.25rem',
    borderRadius: '0.375rem',
    height: '2.25rem',
    padding: '0.5rem 1rem',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    whiteSpace: 'nowrap',
    transition: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
    textTransform: 'none',
    boxShadow: 'none',
    backgroundColor: props.bgcolor || (buttonvariant === 'default' ? mode === 'dark' ? colors.purple[500] : colors.purple[400] : 'transparent'),
    color: props.color || (buttonvariant === 'default' ? mode === 'dark' ? colors.purple[100] : colors.purple[900] : colors.grey[100]),
    border: props.border || (buttonvariant === 'outline' ? "1px solid ".concat(mode === 'dark' ? colors.grey[400] : colors.grey[300]) : 'none'),
    '&:hover': {
      backgroundColor: props.hoverBgColor || (buttonvariant === 'default' ? mode === 'dark' ? 'rgba(128, 90, 213, 0.8)' : 'rgba(129, 140, 248, 0.8)' : 'rgba(0, 0, 0, 0.04)'),
      color: props.hoverColor || (buttonvariant === 'default' ? mode === 'dark' ? 'rgba(245, 245, 245, 0.8)' : 'rgba(48, 48, 48, 0.8)' : colors.grey[100]),
      boxShadow: 'none'
    },
    '&:focus-visible': {
      outline: "2px solid ".concat(colors.grey[500]),
      outlineOffset: '2px'
    }
  }, buttonvariant === 'destructive' && {
    background: mode === 'dark' ? "linear-gradient(45deg, rgba(".concat(colors.redAccent[600], ", 0.9), rgba(").concat(colors.orangeAccent[600], ", 0.9))") : "linear-gradient(45deg, rgba(".concat(colors.redAccent[500], ", 0.9), rgba(").concat(colors.orangeAccent[500], ", 0.9))"),
    color: mode === 'dark' ? 'rgba(245, 245, 245, 0.8)' : 'rgba(48, 48, 48, 0.8)',
    '&:hover': {
      background: mode === 'dark' ? "linear-gradient(45deg, rgba(".concat(colors.redAccent[500], ", 0.8), rgba(").concat(colors.orangeAccent[500], ", 0.8))") : "linear-gradient(45deg, rgba(".concat(colors.redAccent[400], ", 0.8), rgba(").concat(colors.orangeAccent[400], ", 0.8))")
    }
  });
});
export default function CustomButton(_ref2) {
  var _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
    Icon = _ref2.icon,
    children = _ref2.children,
    onClick = _ref2.onClick,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var theme = useTheme();
  var mode = theme.palette.mode;
  return /*#__PURE__*/_jsxs(StyledButton, _objectSpread(_objectSpread({
    buttonvariant: variant,
    onClick: onClick,
    mode: mode
  }, props), {}, {
    children: [Icon && /*#__PURE__*/_jsx(Icon, {
      style: {
        marginRight: '0.5rem',
        width: '1rem',
        height: '1rem'
      }
    }), children]
  }));
}