@indec/form-builder/lib/components/Modal/Modal.js

Form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _Icons = require("../Icons");
var _jsxRuntime = require("react/jsx-runtime");
function Modal(_ref) {
  var modal = _ref.modal,
    onClose = _ref.onClose,
    onAccept = _ref.onAccept,
    children = _ref.children,
    _ref$acceptButtonLabe = _ref.acceptButtonLabel,
    acceptButtonLabel = _ref$acceptButtonLabe === void 0 ? 'Aceptar' : _ref$acceptButtonLabe,
    _ref$cancelButtonLabe = _ref.cancelButtonLabel,
    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? 'Cancelar' : _ref$cancelButtonLabe,
    _ref$open = _ref.open,
    open = _ref$open === void 0 ? true : _ref$open;
  if (!(modal > 0 && open)) return null;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "fb:fixed fb:inset-0 fb:bg-white fb:bg-opacity-60 fb:backdrop-blur-md fb:z-40 fb:transition-opacity fb:duration-300 fb:ease-out",
      onClick: onClose,
      onKeyDown: function onKeyDown(e) {
        if (e.key === 'Escape') onClose();
      },
      role: "button",
      tabIndex: 0,
      "aria-label": "Close modal"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "fb:fixed fb:inset-0 fb:z-50 fb:overflow-y-auto",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "fb:flex fb:min-h-full fb:items-center fb:justify-center fb:p-4 fb:text-center sm:fb:p-0",
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "fb:relative fb:transform fb:overflow-hidden fb:rounded-2xl fb:bg-white fb:px-6 fb:pb-6 fb:pt-8 fb:text-left fb:shadow-2xl fb:transition-all fb:duration-300 fb:ease-out fb:scale-100 fb:opacity-100 sm:fb:my-8 sm:fb:w-full sm:fb:max-w-lg sm:fb:p-8 fb:ring-1 fb:ring-gray-200",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "fb:absolute fb:right-0 fb:top-0 fb:pr-6 fb:pt-6",
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
              type: "button",
              "data-testid": "close-button-icon",
              onClick: onClose,
              className: "fb:rounded-full fb:bg-gray-100 fb:p-2 fb:text-gray-400 hover:fb:bg-gray-200 hover:fb:text-gray-600 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-colors fb:duration-200",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                className: "fb:sr-only",
                children: "Close"
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CloseIcon, {})]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "fb:mt-2",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "fb:text-gray-900",
              children: children
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "fb:mt-8 fb:flex fb:flex-col-reverse fb:gap-3 sm:fb:flex-row sm:fb:justify-end",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              type: "button",
              "data-testid": "close-button",
              onClick: onClose,
              className: "fb:inline-flex fb:justify-center fb:rounded-xl fb:border fb:border-gray-300 fb:bg-white fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-gray-700 fb:shadow-sm hover:fb:bg-gray-50 hover:fb:border-gray-400 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-all fb:duration-200 sm:fb:w-auto",
              children: cancelButtonLabel
            }), onAccept && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
              type: "button",
              "data-testid": "accept-button",
              onClick: function onClick() {
                return onAccept(modal);
              },
              className: "fb:inline-flex fb:justify-center fb:rounded-xl fb:bg-blue-600 fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-white fb:shadow-lg hover:fb:bg-blue-700 hover:fb:shadow-xl focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-all fb:duration-200 fb:transform hover:fb:scale-105 sm:fb:w-auto",
              children: acceptButtonLabel
            })]
          })]
        })
      })
    })]
  });
}
var _default = exports["default"] = Modal;