analytica-frontend-lib/dist/Modal/index.js

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/Modal/Modal.tsx
var Modal_exports = {};
__export(Modal_exports, {
  default: () => Modal_default
});
module.exports = __toCommonJS(Modal_exports);
var import_react = require("react");
var import_phosphor_react = require("phosphor-react");

// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// src/components/Modal/Modal.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var SIZE_CLASSES = {
  xs: "max-w-[360px]",
  sm: "max-w-[420px]",
  md: "max-w-[510px]",
  lg: "max-w-[640px]",
  xl: "max-w-[970px]"
};
var Modal = ({
  isOpen,
  onClose,
  title,
  children,
  size = "md",
  className = "",
  closeOnBackdropClick = true,
  closeOnEscape = true,
  footer,
  hideCloseButton = false
}) => {
  (0, import_react.useEffect)(() => {
    if (!isOpen || !closeOnEscape) return;
    const handleEscape = (event) => {
      if (event.key === "Escape") {
        onClose();
      }
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, closeOnEscape, onClose]);
  (0, import_react.useEffect)(() => {
    const originalOverflow = document.body.style.overflow;
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = originalOverflow;
    }
    return () => {
      document.body.style.overflow = originalOverflow;
    };
  }, [isOpen]);
  const handleBackdropClick = (event) => {
    if (closeOnBackdropClick && event.target === event.currentTarget) {
      onClose();
    }
  };
  const handleBackdropKeyDown = (event) => {
    if (closeOnBackdropClick && (event.key === "Enter" || event.key === " ")) {
      onClose();
    }
  };
  if (!isOpen) return null;
  const sizeClasses = SIZE_CLASSES[size];
  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
  const modalClasses = cn(
    baseClasses,
    sizeClasses,
    dialogResetClasses,
    className
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
      onClick: handleBackdropClick,
      onKeyDown: handleBackdropKeyDown,
      role: "button",
      tabIndex: closeOnBackdropClick ? 0 : -1,
      "aria-label": "Fechar modal clicando no fundo",
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            "button",
            {
              onClick: onClose,
              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
              "aria-label": "Fechar modal",
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.X, { size: 18 })
            }
          )
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-6 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
      ] })
    }
  );
};
var Modal_default = Modal;
//# sourceMappingURL=index.js.map