@nestbotics/nct_frontend_common_components/dist/components/common/CancelButton.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 = ["onClick", "children", "disabled", "sx", "fullWidth", "size"];
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 { Button } from '@mui/material';

// Cancel icon as a component
import { jsx as _jsx } from "react/jsx-runtime";
var CancelIcon = function CancelIcon() {
  return /*#__PURE__*/_jsx("svg", {
    width: "16",
    height: "16",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    children: /*#__PURE__*/_jsx("path", {
      d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
    })
  });
};

/**
 * CancelButton - Tertiary style button with cancel icon
 * Ready-to-use cancel button with consistent styling
 * 
 * @param {Object} props - Button props
 * @param {Function} props.onClick - Click handler function
 * @param {string} props.children - Button text (default: "Cancel")
 * @param {boolean} props.disabled - Whether button is disabled
 * @param {Object} props.sx - Additional MUI sx styling
 * @param {boolean} props.fullWidth - Make button full width
 * @param {string} props.size - Button size: 'small', 'medium', 'large'
 */
var CancelButton = function CancelButton(_ref) {
  var onClick = _ref.onClick,
    _ref$children = _ref.children,
    children = _ref$children === void 0 ? "Cancel" : _ref$children,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$sx = _ref.sx,
    sx = _ref$sx === void 0 ? {} : _ref$sx,
    _ref$fullWidth = _ref.fullWidth,
    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? "medium" : _ref$size,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
    className: "btn-tertiary",
    startIcon: /*#__PURE__*/_jsx(CancelIcon, {}),
    onClick: onClick,
    disabled: disabled,
    fullWidth: fullWidth,
    sx: _objectSpread({
      minWidth: size === 'small' ? '80px' : size === 'large' ? '140px' : '100px',
      height: size === 'small' ? '32px' : size === 'large' ? '44px' : '38px'
    }, sx)
  }, props), {}, {
    children: children
  }));
};
export default CancelButton;