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

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

// src/components/Modal/Modal.tsx
import { useEffect } from "react";
import { X } from "phosphor-react";

// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/Modal/Modal.tsx
import { jsx, jsxs } from "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
}) => {
  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]);
  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__ */ 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__ */ jsxs("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-6", children: [
          /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
          !hideCloseButton && /* @__PURE__ */ 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__ */ jsx(X, { size: 18 })
            }
          )
        ] }),
        /* @__PURE__ */ jsx("div", { className: "px-6 pb-6", children: /* @__PURE__ */ jsx("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
        footer && /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
      ] })
    }
  );
};
var Modal_default = Modal;
export {
  Modal_default as default
};
//# sourceMappingURL=index.mjs.map