@kreativa/ui 0.1.4 → 0.1.5

package/dist/index.d.mts

@@ -84,8 +84,9 @@ interface ModalProps {
 /**
  * Modal component for displaying content in an overlay dialog.
  * Handles backdrop click and Escape key to close.
+ * Uses a portal to render at document body level for proper overlay positioning.
  */
-declare function Modal({ isOpen, onClose, title, children, maxWidth }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, maxWidth }: ModalProps): react.ReactPortal | null;
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed above the input */

package/dist/index.d.ts

@@ -84,8 +84,9 @@ interface ModalProps {
 /**
  * Modal component for displaying content in an overlay dialog.
  * Handles backdrop click and Escape key to close.
+ * Uses a portal to render at document body level for proper overlay positioning.
  */
-declare function Modal({ isOpen, onClose, title, children, maxWidth }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, children, maxWidth }: ModalProps): react.ReactPortal | null;
 
 interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed above the input */

package/dist/index.js

@@ -203,6 +203,7 @@ function EmptyState({ icon, title, description, action }) {
 
 // src/components/Modal.tsx
 var import_react2 = require("react");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var maxWidthClasses = {
   sm: "max-w-sm",
@@ -212,6 +213,10 @@ var maxWidthClasses = {
   "2xl": "max-w-2xl"
 };
 function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+  }, []);
   (0, import_react2.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -227,8 +232,8 @@ function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
       document.body.style.overflow = "";
     };
   }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  if (!isOpen || !mounted) return null;
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4",
@@ -249,6 +254,7 @@ function Modal({ isOpen, onClose, title, children, maxWidth = "xl" }) {
       )
     }
   );
+  return (0, import_react_dom.createPortal)(modalContent, document.body);
 }
 
 // src/components/FormInput.tsx