@mshafiqyajid/react-modal 0.1.0 → 0.3.0

package/dist/styled.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
+var client = require('react-dom/client');
 
 // src/styled/ModalStyled.tsx
 var FOCUSABLE_SELECTORS = [
@@ -64,11 +65,19 @@ function useFocusTrap() {
   }, []);
   return { activate, deactivate, handleKeyDown };
 }
+var _openModals = [];
+var _modalIdCounter = 0;
+var _stackListeners = /* @__PURE__ */ new Set();
+function _notifyStack() {
+  _stackListeners.forEach((fn) => fn());
+}
 var ModalStyled = react.forwardRef(
   function ModalStyled2({
+    open,
     isOpen,
     onClose,
     title,
+    description,
     children,
     footer,
     size = "md",
@@ -80,83 +89,201 @@ var ModalStyled = react.forwardRef(
     overlayColor,
     padding = "md",
     scrollable = true,
-    className
+    className,
+    initialFocusRef,
+    finalFocusRef,
+    onAfterOpen,
+    onAfterClose,
+    preventClose,
+    lockBodyScroll = true,
+    container,
+    transition = "fade",
+    swipeToDismiss,
+    closeOnSubmit = false
   }, ref) {
+    const swipeEnabled = swipeToDismiss ?? variant === "drawer-bottom";
+    const myStackIdRef = react.useRef(-1);
+    const [stackDepth, setStackDepth] = react.useState(0);
+    const [stackPosition, setStackPosition] = react.useState(0);
+    const [swipeY, setSwipeY] = react.useState(0);
     const titleId = react.useId();
+    const descId = react.useId();
+    const isActuallyOpen = open ?? isOpen ?? false;
     const [mounted, setMounted] = react.useState(false);
     const [rendered, setRendered] = react.useState(false);
     const [visible, setVisible] = react.useState(false);
     const panelRef = react.useRef(null);
     const originalOverflowRef = react.useRef("");
     const exitTimerRef = react.useRef(null);
+    const enterTimerRef = react.useRef(null);
     const { activate, deactivate, handleKeyDown } = useFocusTrap();
+    const onAfterOpenRef = react.useRef(onAfterOpen);
+    onAfterOpenRef.current = onAfterOpen;
+    const onAfterCloseRef = react.useRef(onAfterClose);
+    onAfterCloseRef.current = onAfterClose;
     react.useEffect(() => {
       setMounted(true);
     }, []);
+    const requestClose = react.useCallback(
+      (reason) => {
+        if (preventClose && !preventClose(reason)) return;
+        onClose();
+      },
+      [preventClose, onClose]
+    );
     react.useEffect(() => {
       if (exitTimerRef.current) {
         clearTimeout(exitTimerRef.current);
         exitTimerRef.current = null;
       }
-      if (isOpen) {
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+      if (isActuallyOpen) {
         setRendered(true);
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
             setVisible(true);
           });
         });
-        originalOverflowRef.current = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
+        if (lockBodyScroll) {
+          originalOverflowRef.current = document.body.style.overflow;
+          document.body.style.overflow = "hidden";
+        }
+        enterTimerRef.current = setTimeout(() => {
+          onAfterOpenRef.current?.();
+        }, 320);
       } else {
         setVisible(false);
         exitTimerRef.current = setTimeout(() => {
           setRendered(false);
+          onAfterCloseRef.current?.();
         }, 300);
-        document.body.style.overflow = originalOverflowRef.current;
+        if (lockBodyScroll) {
+          document.body.style.overflow = originalOverflowRef.current;
+        }
       }
-    }, [isOpen]);
+    }, [isActuallyOpen, lockBodyScroll]);
     react.useEffect(() => {
       return () => {
         if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
-        document.body.style.overflow = originalOverflowRef.current;
+        if (enterTimerRef.current) clearTimeout(enterTimerRef.current);
+        if (lockBodyScroll) {
+          document.body.style.overflow = originalOverflowRef.current;
+        }
       };
-    }, []);
+    }, [lockBodyScroll]);
+    react.useEffect(() => {
+      if (!isActuallyOpen) return;
+      const id = ++_modalIdCounter;
+      myStackIdRef.current = id;
+      _openModals.push({ id });
+      _notifyStack();
+      const sync = () => {
+        const idx = _openModals.findIndex((m) => m.id === id);
+        const total = _openModals.length;
+        setStackDepth(total);
+        setStackPosition(idx === -1 ? 0 : total - 1 - idx);
+      };
+      sync();
+      _stackListeners.add(sync);
+      return () => {
+        _stackListeners.delete(sync);
+        const idx = _openModals.findIndex((m) => m.id === id);
+        if (idx !== -1) _openModals.splice(idx, 1);
+        _notifyStack();
+      };
+    }, [isActuallyOpen]);
+    react.useEffect(() => {
+      if (!closeOnSubmit || !isActuallyOpen || !panelRef.current) return;
+      const panel = panelRef.current;
+      const onSubmit = (e) => {
+        if (e.defaultPrevented) return;
+        setTimeout(() => requestClose("submit"), 0);
+      };
+      panel.addEventListener("submit", onSubmit);
+      return () => panel.removeEventListener("submit", onSubmit);
+    }, [closeOnSubmit, isActuallyOpen, requestClose]);
+    const swipeStartYRef = react.useRef(null);
+    const handleSwipePointerDown = (e) => {
+      if (!swipeEnabled || e.pointerType !== "touch") return;
+      swipeStartYRef.current = e.clientY;
+    };
+    const handleSwipePointerMove = (e) => {
+      if (swipeStartYRef.current === null) return;
+      const dy = Math.max(0, e.clientY - swipeStartYRef.current);
+      setSwipeY(dy);
+    };
+    const handleSwipePointerUp = () => {
+      if (swipeStartYRef.current === null) return;
+      if (swipeY > 120) requestClose("swipe");
+      setSwipeY(0);
+      swipeStartYRef.current = null;
+    };
+    const previouslyFocusedRef = react.useRef(null);
     react.useEffect(() => {
-      if (isOpen && panelRef.current) {
-        activate(panelRef.current);
-      } else if (!isOpen) {
+      if (isActuallyOpen) {
+        previouslyFocusedRef.current = document.activeElement;
+        if (panelRef.current) {
+          activate(panelRef.current);
+          requestAnimationFrame(() => {
+            if (initialFocusRef?.current) {
+              initialFocusRef.current.focus();
+            }
+          });
+        }
+      } else {
         deactivate();
+        const target = finalFocusRef?.current ?? previouslyFocusedRef.current;
+        if (target && typeof target.focus === "function") {
+          target.focus();
+        }
       }
-    }, [isOpen, activate, deactivate]);
+    }, [isActuallyOpen, activate, deactivate, initialFocusRef, finalFocusRef]);
     const onKeyDown = react.useCallback(
       (e) => {
         if (closeOnEsc && e.key === "Escape") {
-          onClose();
+          requestClose("esc");
           return;
         }
         handleKeyDown(e.nativeEvent);
       },
-      [closeOnEsc, onClose, handleKeyDown]
+      [closeOnEsc, requestClose, handleKeyDown]
     );
     const handleOverlayClick = react.useCallback(
       (e) => {
         if (closeOnOverlayClick && e.target === e.currentTarget) {
-          onClose();
+          requestClose("overlay");
         }
       },
-      [closeOnOverlayClick, onClose]
+      [closeOnOverlayClick, requestClose]
     );
     const setPanelRef = react.useCallback(
       (el) => {
         panelRef.current = el;
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
-        if (el && isOpen) activate(el);
+        if (el && isActuallyOpen) activate(el);
       },
-      [ref, isOpen, activate]
+      [ref, isActuallyOpen, activate]
     );
     if (!mounted || !rendered) return null;
     const hasHeader = title !== void 0 || showCloseButton;
+    const portalTarget = container ?? document.body;
+    const overlayStyle = {
+      ...overlayColor ? { "--rmod-overlay-bg": overlayColor } : {},
+      // Higher stack depth → lower modals scale down + fade slightly behind the topmost.
+      zIndex: 1e3 + stackDepth * 10
+    };
+    const panelStyle = {
+      // Stack-position effects: only applied when this isn't the topmost modal.
+      ...stackPosition > 0 ? {
+        transform: `translateY(${-stackPosition * 8}px) scale(${1 - stackPosition * 0.03})`,
+        opacity: Math.max(0.6, 1 - stackPosition * 0.18)
+      } : {},
+      ...swipeY > 0 ? { transform: `translateY(${swipeY}px)`, transition: "none" } : {}
+    };
     return reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -167,7 +294,10 @@ var ModalStyled = react.forwardRef(
           ].filter(Boolean).join(" "),
           "data-variant": variant,
           "data-blur": blur,
-          style: overlayColor ? { "--rmod-overlay-bg": overlayColor } : void 0,
+          "data-transition": transition,
+          "data-stack-position": stackPosition || void 0,
+          "data-state": visible ? "open" : "closed",
+          style: overlayStyle,
           onClick: handleOverlayClick,
           onKeyDown,
           children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -177,6 +307,7 @@ var ModalStyled = react.forwardRef(
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": title ? titleId : void 0,
+              "aria-describedby": description ? descId : void 0,
               tabIndex: -1,
               className: [
                 "rmod-panel",
@@ -187,11 +318,29 @@ var ModalStyled = react.forwardRef(
               "data-variant": variant,
               "data-padding": padding,
               "data-scrollable": scrollable ? "true" : void 0,
+              "data-transition": transition,
+              "data-state": visible ? "open" : "closed",
+              "data-swiping": swipeY > 0 ? "true" : void 0,
+              style: panelStyle,
+              onPointerDown: swipeEnabled ? handleSwipePointerDown : void 0,
+              onPointerMove: swipeEnabled ? handleSwipePointerMove : void 0,
+              onPointerUp: swipeEnabled ? handleSwipePointerUp : void 0,
+              onPointerCancel: swipeEnabled ? handleSwipePointerUp : void 0,
               children: [
                 hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rmod-header", children: [
                   title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "rmod-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-                  showCloseButton && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rmod-close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }) })
+                  showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rmod-close",
+                      "aria-label": "Close",
+                      onClick: () => requestClose("close-button"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+                    }
+                  )
                 ] }),
+                description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: "rmod-description", children: description }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rmod-body", children }),
                 footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rmod-footer", children: footer })
               ]
@@ -199,11 +348,74 @@ var ModalStyled = react.forwardRef(
           )
         }
       ),
-      document.body
+      portalTarget
     );
   }
 );
+function confirm(opts = {}) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(false);
+      return;
+    }
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = client.createRoot(host);
+    const cleanup = () => {
+      setTimeout(() => {
+        try {
+          root.unmount();
+        } catch {
+        }
+        if (host.parentNode) host.parentNode.removeChild(host);
+      }, 320);
+    };
+    function ConfirmShell() {
+      const [open, setOpen] = react.useState(true);
+      const finish = (value) => {
+        setOpen(false);
+        cleanup();
+        resolve(value);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ModalStyled,
+        {
+          open,
+          onClose: () => finish(false),
+          title: opts.title ?? "Are you sure?",
+          size: "sm",
+          footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rmod-btn rmod-btn--cancel",
+                onClick: () => finish(false),
+                children: opts.cancelLabel ?? "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: `rmod-btn rmod-btn--confirm${opts.danger ? " rmod-btn--danger" : ""}`,
+                onClick: () => finish(true),
+                autoFocus: true,
+                children: opts.confirmLabel ?? "Confirm"
+              }
+            )
+          ] }),
+          children: opts.body ?? null
+        }
+      );
+    }
+    root.render(/* @__PURE__ */ jsxRuntime.jsx(ConfirmShell, {}));
+  });
+}
+var modal = { confirm };
 
 exports.ModalStyled = ModalStyled;
+exports.confirm = confirm;
+exports.modal = modal;
 //# sourceMappingURL=styled.cjs.map
 //# sourceMappingURL=styled.cjs.map

package/dist/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useFocusTrap.ts","../src/styled/ModalStyled.tsx"],"names":["useRef","useCallback","forwardRef","ModalStyled","useId","useState","useEffect","createPortal","jsx","jsxs"],"mappings":"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","file":"styled.cjs","sourcesContent":["import { useCallback, useRef } from \"react\";\n\nconst FOCUSABLE_SELECTORS = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"details > summary\",\n].join(\", \");\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)).filter(\n    (el) => !el.closest(\"[inert]\") && getComputedStyle(el).display !== \"none\",\n  );\n}\n\nexport interface UseFocusTrapResult {\n  activate: (container: HTMLElement) => void;\n  deactivate: () => void;\n  handleKeyDown: (e: KeyboardEvent) => void;\n}\n\nexport function useFocusTrap(): UseFocusTrapResult {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n\n  const activate = useCallback((container: HTMLElement) => {\n    containerRef.current = container;\n    previousFocusRef.current = document.activeElement as HTMLElement | null;\n\n    const focusable = getFocusableElements(container);\n    const first = focusable[0];\n    if (first) {\n      first.focus();\n    } else {\n      container.focus();\n    }\n  }, []);\n\n  const deactivate = useCallback(() => {\n    containerRef.current = null;\n    const prev = previousFocusRef.current;\n    if (prev && typeof prev.focus === \"function\") {\n      prev.focus();\n    }\n    previousFocusRef.current = null;\n  }, []);\n\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key !== \"Tab\" || !containerRef.current) return;\n\n    const focusable = getFocusableElements(containerRef.current);\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const first = focusable[0]!;\n    const last = focusable[focusable.length - 1]!;\n\n    if (e.shiftKey) {\n      if (document.activeElement === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      if (document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }, []);\n\n  return { activate, deactivate, handleKeyDown };\n}\n","import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../useFocusTrap\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type ModalVariant = \"dialog\" | \"drawer-left\" | \"drawer-right\" | \"drawer-bottom\";\n\nexport interface ModalStyledProps {\n  isOpen: boolean;\n  onClose: () => void;\n  /** Modal heading — omit to hide the header entirely */\n  title?: ReactNode;\n  children: ReactNode;\n  /** Footer content — omit to hide footer */\n  footer?: ReactNode;\n  size?: ModalSize;\n  variant?: ModalVariant;\n  closeOnOverlayClick?: boolean;\n  closeOnEsc?: boolean;\n  showCloseButton?: boolean;\n  /** Backdrop blur intensity. Default: \"md\" */\n  blur?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Custom overlay color e.g. \"rgba(0,0,0,0.6)\" */\n  overlayColor?: string;\n  /** Padding inside the body. Default: \"md\" */\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Max height of scrollable body. Default: auto */\n  scrollable?: boolean;\n  className?: string;\n}\n\nexport const ModalStyled = forwardRef<HTMLDivElement, ModalStyledProps>(\n  function ModalStyled(\n    {\n      isOpen,\n      onClose,\n      title,\n      children,\n      footer,\n      size = \"md\",\n      variant = \"dialog\",\n      closeOnOverlayClick = true,\n      closeOnEsc = true,\n      showCloseButton = true,\n      blur = \"md\",\n      overlayColor,\n      padding = \"md\",\n      scrollable = true,\n      className,\n    },\n    ref,\n  ) {\n    const titleId = useId();\n    const [mounted, setMounted] = useState(false);\n    const [rendered, setRendered] = useState(false);\n    const [visible, setVisible] = useState(false);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const originalOverflowRef = useRef(\"\");\n    const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const { activate, deactivate, handleKeyDown } = useFocusTrap();\n\n    useEffect(() => { setMounted(true); }, []);\n\n    useEffect(() => {\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n        exitTimerRef.current = null;\n      }\n\n      if (isOpen) {\n        setRendered(true);\n        // Double RAF ensures the element is in the DOM before we add the visible class\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            setVisible(true);\n          });\n        });\n        originalOverflowRef.current = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n      } else {\n        // Remove visible class first (triggers CSS exit transition)\n        setVisible(false);\n        // Then unmount after transition finishes\n        exitTimerRef.current = setTimeout(() => {\n          setRendered(false);\n        }, 300);\n        document.body.style.overflow = originalOverflowRef.current;\n      }\n    }, [isOpen]);\n\n    // Cleanup on unmount\n    useEffect(() => {\n      return () => {\n        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    }, []);\n\n    useEffect(() => {\n      if (isOpen && panelRef.current) {\n        activate(panelRef.current);\n      } else if (!isOpen) {\n        deactivate();\n      }\n    }, [isOpen, activate, deactivate]);\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (closeOnEsc && e.key === \"Escape\") {\n          onClose();\n          return;\n        }\n        handleKeyDown(e.nativeEvent);\n      },\n      [closeOnEsc, onClose, handleKeyDown],\n    );\n\n    const handleOverlayClick = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (closeOnOverlayClick && e.target === e.currentTarget) {\n          onClose();\n        }\n      },\n      [closeOnOverlayClick, onClose],\n    );\n\n    const setPanelRef = useCallback(\n      (el: HTMLDivElement | null) => {\n        panelRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n        if (el && isOpen) activate(el);\n      },\n      [ref, isOpen, activate],\n    );\n\n    if (!mounted || !rendered) return null;\n\n    const hasHeader = title !== undefined || showCloseButton;\n\n    return createPortal(\n      <div\n        className={[\n          \"rmod-overlay\",\n          visible ? \"rmod-overlay--visible\" : \"\",\n        ].filter(Boolean).join(\" \")}\n        data-variant={variant}\n        data-blur={blur}\n        style={overlayColor ? { \"--rmod-overlay-bg\": overlayColor } as React.CSSProperties : undefined}\n        onClick={handleOverlayClick}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          tabIndex={-1}\n          className={[\n            \"rmod-panel\",\n            className,\n            visible ? \"rmod-panel--visible\" : \"\",\n          ].filter(Boolean).join(\" \")}\n          data-size={size}\n          data-variant={variant}\n          data-padding={padding}\n          data-scrollable={scrollable ? \"true\" : undefined}\n        >\n          {hasHeader && (\n            <div className=\"rmod-header\">\n              {title ? (\n                <h2 id={titleId} className=\"rmod-title\">{title}</h2>\n              ) : (\n                <span />\n              )}\n              {showCloseButton && (\n                <button type=\"button\" className=\"rmod-close\" aria-label=\"Close\" onClick={onClose}>\n                  <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          )}\n          <div className=\"rmod-body\">{children}</div>\n          {footer && <div className=\"rmod-footer\">{footer}</div>}\n        </div>\n      </div>,\n      document.body,\n    );\n  },\n);\n"]}
+{"version":3,"sources":["../src/useFocusTrap.ts","../src/styled/ModalStyled.tsx","../src/styled/confirm.tsx"],"names":["useRef","useCallback","forwardRef","ModalStyled","useState","useId","useEffect","createPortal","jsx","jsxs","createRoot"],"mappings":"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","file":"styled.cjs","sourcesContent":["import { useCallback, useRef } from \"react\";\n\nconst FOCUSABLE_SELECTORS = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"details > summary\",\n].join(\", \");\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)).filter(\n    (el) => !el.closest(\"[inert]\") && getComputedStyle(el).display !== \"none\",\n  );\n}\n\nexport interface UseFocusTrapResult {\n  activate: (container: HTMLElement) => void;\n  deactivate: () => void;\n  handleKeyDown: (e: KeyboardEvent) => void;\n}\n\nexport function useFocusTrap(): UseFocusTrapResult {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n\n  const activate = useCallback((container: HTMLElement) => {\n    containerRef.current = container;\n    previousFocusRef.current = document.activeElement as HTMLElement | null;\n\n    const focusable = getFocusableElements(container);\n    const first = focusable[0];\n    if (first) {\n      first.focus();\n    } else {\n      container.focus();\n    }\n  }, []);\n\n  const deactivate = useCallback(() => {\n    containerRef.current = null;\n    const prev = previousFocusRef.current;\n    if (prev && typeof prev.focus === \"function\") {\n      prev.focus();\n    }\n    previousFocusRef.current = null;\n  }, []);\n\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key !== \"Tab\" || !containerRef.current) return;\n\n    const focusable = getFocusableElements(containerRef.current);\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const first = focusable[0]!;\n    const last = focusable[focusable.length - 1]!;\n\n    if (e.shiftKey) {\n      if (document.activeElement === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      if (document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }, []);\n\n  return { activate, deactivate, handleKeyDown };\n}\n","import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../useFocusTrap\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type ModalVariant = \"dialog\" | \"drawer-left\" | \"drawer-right\" | \"drawer-bottom\";\nexport type CloseReason = \"esc\" | \"overlay\" | \"close-button\" | \"programmatic\" | \"swipe\" | \"submit\";\nexport type ModalTransition = \"fade\" | \"zoom\" | \"slide-up\" | \"slide-down\";\n\n// ---- Stacking registry (depth-aware z-index + scale-behind effect) -------\nconst _openModals: { id: number }[] = [];\nlet _modalIdCounter = 0;\nconst _stackListeners = new Set<() => void>();\nfunction _notifyStack() { _stackListeners.forEach((fn) => fn()); }\n\nexport interface ModalStyledProps {\n  /** Open state. `open` is the canonical name; `isOpen` continues to work. */\n  open?: boolean;\n  isOpen?: boolean;\n  onClose: () => void;\n  /** Modal heading — omit to hide the header entirely */\n  title?: ReactNode;\n  /** Optional accessible description. Renders below the title and links via aria-describedby. */\n  description?: ReactNode;\n  children: ReactNode;\n  /** Footer content — omit to hide footer */\n  footer?: ReactNode;\n  size?: ModalSize;\n  variant?: ModalVariant;\n  closeOnOverlayClick?: boolean;\n  closeOnEsc?: boolean;\n  showCloseButton?: boolean;\n  /** Backdrop blur intensity. Default: \"md\" */\n  blur?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Custom overlay color e.g. \"rgba(0,0,0,0.6)\" */\n  overlayColor?: string;\n  /** Padding inside the body. Default: \"md\" */\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Max height of scrollable body. Default: auto */\n  scrollable?: boolean;\n  className?: string;\n  /** Element to focus when the modal opens. Defaults to the first focusable child inside the panel. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Element to focus when the modal closes. Defaults to whatever was focused before opening. */\n  finalFocusRef?: RefObject<HTMLElement | null>;\n  /** Fires after the open transition completes. */\n  onAfterOpen?: () => void;\n  /** Fires after the close transition completes (and unmount). */\n  onAfterClose?: () => void;\n  /** Return false to veto a close attempt. Receives the trigger reason. */\n  preventClose?: (reason: CloseReason) => boolean;\n  /** Disable body scroll lock while open. Default: true (locked). */\n  lockBodyScroll?: boolean;\n  /** Override the portal container. Default: document.body. */\n  container?: HTMLElement | null;\n  /** Transition variant for the panel (only `dialog`; drawers always slide). Default: \"fade\" */\n  transition?: ModalTransition;\n  /** Allow swipe-down-to-dismiss on touch devices. Default: false (true for `drawer-bottom`). */\n  swipeToDismiss?: boolean;\n  /** When the modal contains a single `<form>` and it submits successfully, auto-close. Default: false. */\n  closeOnSubmit?: boolean;\n}\n\nexport const ModalStyled = forwardRef<HTMLDivElement, ModalStyledProps>(\n  function ModalStyled(\n    {\n      open,\n      isOpen,\n      onClose,\n      title,\n      description,\n      children,\n      footer,\n      size = \"md\",\n      variant = \"dialog\",\n      closeOnOverlayClick = true,\n      closeOnEsc = true,\n      showCloseButton = true,\n      blur = \"md\",\n      overlayColor,\n      padding = \"md\",\n      scrollable = true,\n      className,\n      initialFocusRef,\n      finalFocusRef,\n      onAfterOpen,\n      onAfterClose,\n      preventClose,\n      lockBodyScroll = true,\n      container,\n      transition = \"fade\",\n      swipeToDismiss,\n      closeOnSubmit = false,\n    },\n    ref,\n  ) {\n    const swipeEnabled = swipeToDismiss ?? variant === \"drawer-bottom\";\n    const myStackIdRef = useRef<number>(-1);\n    const [stackDepth, setStackDepth] = useState(0);\n    const [stackPosition, setStackPosition] = useState(0); // 0 = top\n    const [swipeY, setSwipeY] = useState(0);\n    const titleId = useId();\n    const descId = useId();\n    const isActuallyOpen = open ?? isOpen ?? false;\n    const [mounted, setMounted] = useState(false);\n    const [rendered, setRendered] = useState(false);\n    const [visible, setVisible] = useState(false);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const originalOverflowRef = useRef(\"\");\n    const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const { activate, deactivate, handleKeyDown } = useFocusTrap();\n\n    const onAfterOpenRef = useRef(onAfterOpen);\n    onAfterOpenRef.current = onAfterOpen;\n    const onAfterCloseRef = useRef(onAfterClose);\n    onAfterCloseRef.current = onAfterClose;\n\n    useEffect(() => { setMounted(true); }, []);\n\n    const requestClose = useCallback(\n      (reason: CloseReason) => {\n        if (preventClose && !preventClose(reason)) return;\n        onClose();\n      },\n      [preventClose, onClose],\n    );\n\n    useEffect(() => {\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n        exitTimerRef.current = null;\n      }\n      if (enterTimerRef.current) {\n        clearTimeout(enterTimerRef.current);\n        enterTimerRef.current = null;\n      }\n\n      if (isActuallyOpen) {\n        setRendered(true);\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            setVisible(true);\n          });\n        });\n        if (lockBodyScroll) {\n          originalOverflowRef.current = document.body.style.overflow;\n          document.body.style.overflow = \"hidden\";\n        }\n        // Fire onAfterOpen once the enter transition has had time to settle.\n        enterTimerRef.current = setTimeout(() => {\n          onAfterOpenRef.current?.();\n        }, 320);\n      } else {\n        setVisible(false);\n        exitTimerRef.current = setTimeout(() => {\n          setRendered(false);\n          onAfterCloseRef.current?.();\n        }, 300);\n        if (lockBodyScroll) {\n          document.body.style.overflow = originalOverflowRef.current;\n        }\n      }\n    }, [isActuallyOpen, lockBodyScroll]);\n\n    useEffect(() => {\n      return () => {\n        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);\n        if (enterTimerRef.current) clearTimeout(enterTimerRef.current);\n        if (lockBodyScroll) {\n          document.body.style.overflow = originalOverflowRef.current;\n        }\n      };\n    }, [lockBodyScroll]);\n\n    // ---- Stacking: register / deregister this modal ---------------------\n    useEffect(() => {\n      if (!isActuallyOpen) return;\n      const id = ++_modalIdCounter;\n      myStackIdRef.current = id;\n      _openModals.push({ id });\n      _notifyStack();\n      const sync = () => {\n        const idx = _openModals.findIndex((m) => m.id === id);\n        const total = _openModals.length;\n        setStackDepth(total);\n        setStackPosition(idx === -1 ? 0 : total - 1 - idx);\n      };\n      sync();\n      _stackListeners.add(sync);\n      return () => {\n        _stackListeners.delete(sync);\n        const idx = _openModals.findIndex((m) => m.id === id);\n        if (idx !== -1) _openModals.splice(idx, 1);\n        _notifyStack();\n      };\n    }, [isActuallyOpen]);\n\n    // ---- closeOnSubmit: auto-close on a contained <form> submit ---------\n    useEffect(() => {\n      if (!closeOnSubmit || !isActuallyOpen || !panelRef.current) return;\n      const panel = panelRef.current;\n      const onSubmit = (e: Event) => {\n        // Defer the close so the consumer's onSubmit handler runs first\n        // and can call e.preventDefault() if it wants to abort the close.\n        if (e.defaultPrevented) return;\n        setTimeout(() => requestClose(\"submit\"), 0);\n      };\n      panel.addEventListener(\"submit\", onSubmit);\n      return () => panel.removeEventListener(\"submit\", onSubmit);\n    }, [closeOnSubmit, isActuallyOpen, requestClose]);\n\n    // ---- Swipe-to-dismiss (touch only) -----------------------------------\n    const swipeStartYRef = useRef<number | null>(null);\n    const handleSwipePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n      if (!swipeEnabled || e.pointerType !== \"touch\") return;\n      // Only initiate from the panel header / the panel itself, not buttons.\n      swipeStartYRef.current = e.clientY;\n    };\n    const handleSwipePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n      if (swipeStartYRef.current === null) return;\n      const dy = Math.max(0, e.clientY - swipeStartYRef.current);\n      setSwipeY(dy);\n    };\n    const handleSwipePointerUp = () => {\n      if (swipeStartYRef.current === null) return;\n      if (swipeY > 120) requestClose(\"swipe\");\n      setSwipeY(0);\n      swipeStartYRef.current = null;\n    };\n\n    // Focus management\n    const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n    useEffect(() => {\n      if (isActuallyOpen) {\n        previouslyFocusedRef.current = document.activeElement as HTMLElement | null;\n        if (panelRef.current) {\n          activate(panelRef.current);\n          // Honor initialFocusRef after the panel is mounted+visible\n          requestAnimationFrame(() => {\n            if (initialFocusRef?.current) {\n              initialFocusRef.current.focus();\n            }\n          });\n        }\n      } else {\n        deactivate();\n        // Honor finalFocusRef on close, otherwise restore previous focus\n        const target = finalFocusRef?.current ?? previouslyFocusedRef.current;\n        if (target && typeof target.focus === \"function\") {\n          target.focus();\n        }\n      }\n    }, [isActuallyOpen, activate, deactivate, initialFocusRef, finalFocusRef]);\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (closeOnEsc && e.key === \"Escape\") {\n          requestClose(\"esc\");\n          return;\n        }\n        handleKeyDown(e.nativeEvent);\n      },\n      [closeOnEsc, requestClose, handleKeyDown],\n    );\n\n    const handleOverlayClick = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (closeOnOverlayClick && e.target === e.currentTarget) {\n          requestClose(\"overlay\");\n        }\n      },\n      [closeOnOverlayClick, requestClose],\n    );\n\n    const setPanelRef = useCallback(\n      (el: HTMLDivElement | null) => {\n        panelRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n        if (el && isActuallyOpen) activate(el);\n      },\n      [ref, isActuallyOpen, activate],\n    );\n\n    if (!mounted || !rendered) return null;\n\n    const hasHeader = title !== undefined || showCloseButton;\n    const portalTarget = container ?? document.body;\n\n    const overlayStyle: React.CSSProperties = {\n      ...(overlayColor ? ({ \"--rmod-overlay-bg\": overlayColor } as React.CSSProperties) : {}),\n      // Higher stack depth → lower modals scale down + fade slightly behind the topmost.\n      zIndex: 1000 + stackDepth * 10,\n    };\n\n    const panelStyle: React.CSSProperties = {\n      // Stack-position effects: only applied when this isn't the topmost modal.\n      ...(stackPosition > 0\n        ? {\n            transform: `translateY(${-stackPosition * 8}px) scale(${1 - stackPosition * 0.03})`,\n            opacity: Math.max(0.6, 1 - stackPosition * 0.18),\n          }\n        : {}),\n      ...(swipeY > 0 ? { transform: `translateY(${swipeY}px)`, transition: \"none\" } : {}),\n    };\n\n    return createPortal(\n      <div\n        className={[\n          \"rmod-overlay\",\n          visible ? \"rmod-overlay--visible\" : \"\",\n        ].filter(Boolean).join(\" \")}\n        data-variant={variant}\n        data-blur={blur}\n        data-transition={transition}\n        data-stack-position={stackPosition || undefined}\n        data-state={visible ? \"open\" : \"closed\"}\n        style={overlayStyle}\n        onClick={handleOverlayClick}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          aria-describedby={description ? descId : undefined}\n          tabIndex={-1}\n          className={[\n            \"rmod-panel\",\n            className,\n            visible ? \"rmod-panel--visible\" : \"\",\n          ].filter(Boolean).join(\" \")}\n          data-size={size}\n          data-variant={variant}\n          data-padding={padding}\n          data-scrollable={scrollable ? \"true\" : undefined}\n          data-transition={transition}\n          data-state={visible ? \"open\" : \"closed\"}\n          data-swiping={swipeY > 0 ? \"true\" : undefined}\n          style={panelStyle}\n          onPointerDown={swipeEnabled ? handleSwipePointerDown : undefined}\n          onPointerMove={swipeEnabled ? handleSwipePointerMove : undefined}\n          onPointerUp={swipeEnabled ? handleSwipePointerUp : undefined}\n          onPointerCancel={swipeEnabled ? handleSwipePointerUp : undefined}\n        >\n          {hasHeader && (\n            <div className=\"rmod-header\">\n              {title ? (\n                <h2 id={titleId} className=\"rmod-title\">{title}</h2>\n              ) : (\n                <span />\n              )}\n              {showCloseButton && (\n                <button\n                  type=\"button\"\n                  className=\"rmod-close\"\n                  aria-label=\"Close\"\n                  onClick={() => requestClose(\"close-button\")}\n                >\n                  <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          )}\n          {description !== undefined && (\n            <p id={descId} className=\"rmod-description\">{description}</p>\n          )}\n          <div className=\"rmod-body\">{children}</div>\n          {footer && <div className=\"rmod-footer\">{footer}</div>}\n        </div>\n      </div>,\n      portalTarget,\n    );\n  },\n);\n","import { useState, type ReactNode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ModalStyled } from \"./ModalStyled\";\n\nexport interface ConfirmOptions {\n  title?: ReactNode;\n  body?: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  /** Style the confirm button as the danger CTA (red). */\n  danger?: boolean;\n}\n\n/**\n * Programmatic confirm dialog. Resolves `true` if confirmed, `false` if cancelled\n * or dismissed via overlay/Esc/close button.\n *\n * Self-mounts a `<ModalStyled>` into a temporary div appended to `document.body`\n * and unmounts on close — no provider required.\n */\nexport function confirm(opts: ConfirmOptions = {}): Promise<boolean> {\n  return new Promise((resolve) => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n      resolve(false);\n      return;\n    }\n    const host = document.createElement(\"div\");\n    document.body.appendChild(host);\n    const root = createRoot(host);\n\n    const cleanup = () => {\n      // Defer unmount so the close transition can run.\n      setTimeout(() => {\n        try { root.unmount(); } catch { /* ignore */ }\n        if (host.parentNode) host.parentNode.removeChild(host);\n      }, 320);\n    };\n\n    function ConfirmShell() {\n      const [open, setOpen] = useState(true);\n      const finish = (value: boolean) => {\n        setOpen(false);\n        cleanup();\n        resolve(value);\n      };\n      return (\n        <ModalStyled\n          open={open}\n          onClose={() => finish(false)}\n          title={opts.title ?? \"Are you sure?\"}\n          size=\"sm\"\n          footer={\n            <div style={{ display: \"flex\", gap: 8, justifyContent: \"flex-end\" }}>\n              <button\n                type=\"button\"\n                className=\"rmod-btn rmod-btn--cancel\"\n                onClick={() => finish(false)}\n              >\n                {opts.cancelLabel ?? \"Cancel\"}\n              </button>\n              <button\n                type=\"button\"\n                className={`rmod-btn rmod-btn--confirm${opts.danger ? \" rmod-btn--danger\" : \"\"}`}\n                onClick={() => finish(true)}\n                autoFocus\n              >\n                {opts.confirmLabel ?? \"Confirm\"}\n              </button>\n            </div>\n          }\n        >\n          {opts.body ?? null}\n        </ModalStyled>\n      );\n    }\n\n    root.render(<ConfirmShell />);\n  });\n}\n\n/** Module-style export so consumers can do `modal.confirm(...)`. */\nexport const modal = { confirm };\n"]}

package/dist/styled.d.cts

@@ -1,13 +1,19 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 type ModalSize = "sm" | "md" | "lg" | "full";
 type ModalVariant = "dialog" | "drawer-left" | "drawer-right" | "drawer-bottom";
+type CloseReason = "esc" | "overlay" | "close-button" | "programmatic" | "swipe" | "submit";
+type ModalTransition = "fade" | "zoom" | "slide-up" | "slide-down";
 interface ModalStyledProps {
-    isOpen: boolean;
+    /** Open state. `open` is the canonical name; `isOpen` continues to work. */
+    open?: boolean;
+    isOpen?: boolean;
     onClose: () => void;
     /** Modal heading — omit to hide the header entirely */
     title?: ReactNode;
+    /** Optional accessible description. Renders below the title and links via aria-describedby. */
+    description?: ReactNode;
     children: ReactNode;
     /** Footer content — omit to hide footer */
     footer?: ReactNode;
@@ -25,7 +31,48 @@ interface ModalStyledProps {
     /** Max height of scrollable body. Default: auto */
     scrollable?: boolean;
     className?: string;
+    /** Element to focus when the modal opens. Defaults to the first focusable child inside the panel. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Element to focus when the modal closes. Defaults to whatever was focused before opening. */
+    finalFocusRef?: RefObject<HTMLElement | null>;
+    /** Fires after the open transition completes. */
+    onAfterOpen?: () => void;
+    /** Fires after the close transition completes (and unmount). */
+    onAfterClose?: () => void;
+    /** Return false to veto a close attempt. Receives the trigger reason. */
+    preventClose?: (reason: CloseReason) => boolean;
+    /** Disable body scroll lock while open. Default: true (locked). */
+    lockBodyScroll?: boolean;
+    /** Override the portal container. Default: document.body. */
+    container?: HTMLElement | null;
+    /** Transition variant for the panel (only `dialog`; drawers always slide). Default: "fade" */
+    transition?: ModalTransition;
+    /** Allow swipe-down-to-dismiss on touch devices. Default: false (true for `drawer-bottom`). */
+    swipeToDismiss?: boolean;
+    /** When the modal contains a single `<form>` and it submits successfully, auto-close. Default: false. */
+    closeOnSubmit?: boolean;
 }
 declare const ModalStyled: react.ForwardRefExoticComponent<ModalStyledProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type ModalSize, ModalStyled, type ModalStyledProps, type ModalVariant };
+interface ConfirmOptions {
+    title?: ReactNode;
+    body?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** Style the confirm button as the danger CTA (red). */
+    danger?: boolean;
+}
+/**
+ * Programmatic confirm dialog. Resolves `true` if confirmed, `false` if cancelled
+ * or dismissed via overlay/Esc/close button.
+ *
+ * Self-mounts a `<ModalStyled>` into a temporary div appended to `document.body`
+ * and unmounts on close — no provider required.
+ */
+declare function confirm(opts?: ConfirmOptions): Promise<boolean>;
+/** Module-style export so consumers can do `modal.confirm(...)`. */
+declare const modal: {
+    confirm: typeof confirm;
+};
+
+export { type ConfirmOptions, type ModalSize, ModalStyled, type ModalStyledProps, type ModalTransition, type ModalVariant, confirm, modal };

package/dist/styled.d.ts

@@ -1,13 +1,19 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 type ModalSize = "sm" | "md" | "lg" | "full";
 type ModalVariant = "dialog" | "drawer-left" | "drawer-right" | "drawer-bottom";
+type CloseReason = "esc" | "overlay" | "close-button" | "programmatic" | "swipe" | "submit";
+type ModalTransition = "fade" | "zoom" | "slide-up" | "slide-down";
 interface ModalStyledProps {
-    isOpen: boolean;
+    /** Open state. `open` is the canonical name; `isOpen` continues to work. */
+    open?: boolean;
+    isOpen?: boolean;
     onClose: () => void;
     /** Modal heading — omit to hide the header entirely */
     title?: ReactNode;
+    /** Optional accessible description. Renders below the title and links via aria-describedby. */
+    description?: ReactNode;
     children: ReactNode;
     /** Footer content — omit to hide footer */
     footer?: ReactNode;
@@ -25,7 +31,48 @@ interface ModalStyledProps {
     /** Max height of scrollable body. Default: auto */
     scrollable?: boolean;
     className?: string;
+    /** Element to focus when the modal opens. Defaults to the first focusable child inside the panel. */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Element to focus when the modal closes. Defaults to whatever was focused before opening. */
+    finalFocusRef?: RefObject<HTMLElement | null>;
+    /** Fires after the open transition completes. */
+    onAfterOpen?: () => void;
+    /** Fires after the close transition completes (and unmount). */
+    onAfterClose?: () => void;
+    /** Return false to veto a close attempt. Receives the trigger reason. */
+    preventClose?: (reason: CloseReason) => boolean;
+    /** Disable body scroll lock while open. Default: true (locked). */
+    lockBodyScroll?: boolean;
+    /** Override the portal container. Default: document.body. */
+    container?: HTMLElement | null;
+    /** Transition variant for the panel (only `dialog`; drawers always slide). Default: "fade" */
+    transition?: ModalTransition;
+    /** Allow swipe-down-to-dismiss on touch devices. Default: false (true for `drawer-bottom`). */
+    swipeToDismiss?: boolean;
+    /** When the modal contains a single `<form>` and it submits successfully, auto-close. Default: false. */
+    closeOnSubmit?: boolean;
 }
 declare const ModalStyled: react.ForwardRefExoticComponent<ModalStyledProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type ModalSize, ModalStyled, type ModalStyledProps, type ModalVariant };
+interface ConfirmOptions {
+    title?: ReactNode;
+    body?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** Style the confirm button as the danger CTA (red). */
+    danger?: boolean;
+}
+/**
+ * Programmatic confirm dialog. Resolves `true` if confirmed, `false` if cancelled
+ * or dismissed via overlay/Esc/close button.
+ *
+ * Self-mounts a `<ModalStyled>` into a temporary div appended to `document.body`
+ * and unmounts on close — no provider required.
+ */
+declare function confirm(opts?: ConfirmOptions): Promise<boolean>;
+/** Module-style export so consumers can do `modal.confirm(...)`. */
+declare const modal: {
+    confirm: typeof confirm;
+};
+
+export { type ConfirmOptions, type ModalSize, ModalStyled, type ModalStyledProps, type ModalTransition, type ModalVariant, confirm, modal };

package/dist/styled.js

@@ -1,13 +1,22 @@
 import { useFocusTrap } from './chunk-BFH4N5GR.js';
-import { forwardRef, useId, useState, useRef, useEffect, useCallback } from 'react';
+import { forwardRef, useRef, useState, useId, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
 
+var _openModals = [];
+var _modalIdCounter = 0;
+var _stackListeners = /* @__PURE__ */ new Set();
+function _notifyStack() {
+  _stackListeners.forEach((fn) => fn());
+}
 var ModalStyled = forwardRef(
   function ModalStyled2({
+    open,
     isOpen,
     onClose,
     title,
+    description,
     children,
     footer,
     size = "md",
@@ -19,83 +28,201 @@ var ModalStyled = forwardRef(
     overlayColor,
     padding = "md",
     scrollable = true,
-    className
+    className,
+    initialFocusRef,
+    finalFocusRef,
+    onAfterOpen,
+    onAfterClose,
+    preventClose,
+    lockBodyScroll = true,
+    container,
+    transition = "fade",
+    swipeToDismiss,
+    closeOnSubmit = false
   }, ref) {
+    const swipeEnabled = swipeToDismiss ?? variant === "drawer-bottom";
+    const myStackIdRef = useRef(-1);
+    const [stackDepth, setStackDepth] = useState(0);
+    const [stackPosition, setStackPosition] = useState(0);
+    const [swipeY, setSwipeY] = useState(0);
     const titleId = useId();
+    const descId = useId();
+    const isActuallyOpen = open ?? isOpen ?? false;
     const [mounted, setMounted] = useState(false);
     const [rendered, setRendered] = useState(false);
     const [visible, setVisible] = useState(false);
     const panelRef = useRef(null);
     const originalOverflowRef = useRef("");
     const exitTimerRef = useRef(null);
+    const enterTimerRef = useRef(null);
     const { activate, deactivate, handleKeyDown } = useFocusTrap();
+    const onAfterOpenRef = useRef(onAfterOpen);
+    onAfterOpenRef.current = onAfterOpen;
+    const onAfterCloseRef = useRef(onAfterClose);
+    onAfterCloseRef.current = onAfterClose;
     useEffect(() => {
       setMounted(true);
     }, []);
+    const requestClose = useCallback(
+      (reason) => {
+        if (preventClose && !preventClose(reason)) return;
+        onClose();
+      },
+      [preventClose, onClose]
+    );
     useEffect(() => {
       if (exitTimerRef.current) {
         clearTimeout(exitTimerRef.current);
         exitTimerRef.current = null;
       }
-      if (isOpen) {
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+      if (isActuallyOpen) {
         setRendered(true);
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
             setVisible(true);
           });
         });
-        originalOverflowRef.current = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
+        if (lockBodyScroll) {
+          originalOverflowRef.current = document.body.style.overflow;
+          document.body.style.overflow = "hidden";
+        }
+        enterTimerRef.current = setTimeout(() => {
+          onAfterOpenRef.current?.();
+        }, 320);
       } else {
         setVisible(false);
         exitTimerRef.current = setTimeout(() => {
           setRendered(false);
+          onAfterCloseRef.current?.();
         }, 300);
-        document.body.style.overflow = originalOverflowRef.current;
+        if (lockBodyScroll) {
+          document.body.style.overflow = originalOverflowRef.current;
+        }
       }
-    }, [isOpen]);
+    }, [isActuallyOpen, lockBodyScroll]);
     useEffect(() => {
       return () => {
         if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
-        document.body.style.overflow = originalOverflowRef.current;
+        if (enterTimerRef.current) clearTimeout(enterTimerRef.current);
+        if (lockBodyScroll) {
+          document.body.style.overflow = originalOverflowRef.current;
+        }
       };
-    }, []);
+    }, [lockBodyScroll]);
+    useEffect(() => {
+      if (!isActuallyOpen) return;
+      const id = ++_modalIdCounter;
+      myStackIdRef.current = id;
+      _openModals.push({ id });
+      _notifyStack();
+      const sync = () => {
+        const idx = _openModals.findIndex((m) => m.id === id);
+        const total = _openModals.length;
+        setStackDepth(total);
+        setStackPosition(idx === -1 ? 0 : total - 1 - idx);
+      };
+      sync();
+      _stackListeners.add(sync);
+      return () => {
+        _stackListeners.delete(sync);
+        const idx = _openModals.findIndex((m) => m.id === id);
+        if (idx !== -1) _openModals.splice(idx, 1);
+        _notifyStack();
+      };
+    }, [isActuallyOpen]);
     useEffect(() => {
-      if (isOpen && panelRef.current) {
-        activate(panelRef.current);
-      } else if (!isOpen) {
+      if (!closeOnSubmit || !isActuallyOpen || !panelRef.current) return;
+      const panel = panelRef.current;
+      const onSubmit = (e) => {
+        if (e.defaultPrevented) return;
+        setTimeout(() => requestClose("submit"), 0);
+      };
+      panel.addEventListener("submit", onSubmit);
+      return () => panel.removeEventListener("submit", onSubmit);
+    }, [closeOnSubmit, isActuallyOpen, requestClose]);
+    const swipeStartYRef = useRef(null);
+    const handleSwipePointerDown = (e) => {
+      if (!swipeEnabled || e.pointerType !== "touch") return;
+      swipeStartYRef.current = e.clientY;
+    };
+    const handleSwipePointerMove = (e) => {
+      if (swipeStartYRef.current === null) return;
+      const dy = Math.max(0, e.clientY - swipeStartYRef.current);
+      setSwipeY(dy);
+    };
+    const handleSwipePointerUp = () => {
+      if (swipeStartYRef.current === null) return;
+      if (swipeY > 120) requestClose("swipe");
+      setSwipeY(0);
+      swipeStartYRef.current = null;
+    };
+    const previouslyFocusedRef = useRef(null);
+    useEffect(() => {
+      if (isActuallyOpen) {
+        previouslyFocusedRef.current = document.activeElement;
+        if (panelRef.current) {
+          activate(panelRef.current);
+          requestAnimationFrame(() => {
+            if (initialFocusRef?.current) {
+              initialFocusRef.current.focus();
+            }
+          });
+        }
+      } else {
         deactivate();
+        const target = finalFocusRef?.current ?? previouslyFocusedRef.current;
+        if (target && typeof target.focus === "function") {
+          target.focus();
+        }
       }
-    }, [isOpen, activate, deactivate]);
+    }, [isActuallyOpen, activate, deactivate, initialFocusRef, finalFocusRef]);
     const onKeyDown = useCallback(
       (e) => {
         if (closeOnEsc && e.key === "Escape") {
-          onClose();
+          requestClose("esc");
           return;
         }
         handleKeyDown(e.nativeEvent);
       },
-      [closeOnEsc, onClose, handleKeyDown]
+      [closeOnEsc, requestClose, handleKeyDown]
     );
     const handleOverlayClick = useCallback(
       (e) => {
         if (closeOnOverlayClick && e.target === e.currentTarget) {
-          onClose();
+          requestClose("overlay");
         }
       },
-      [closeOnOverlayClick, onClose]
+      [closeOnOverlayClick, requestClose]
     );
     const setPanelRef = useCallback(
       (el) => {
         panelRef.current = el;
         if (typeof ref === "function") ref(el);
         else if (ref) ref.current = el;
-        if (el && isOpen) activate(el);
+        if (el && isActuallyOpen) activate(el);
       },
-      [ref, isOpen, activate]
+      [ref, isActuallyOpen, activate]
     );
     if (!mounted || !rendered) return null;
     const hasHeader = title !== void 0 || showCloseButton;
+    const portalTarget = container ?? document.body;
+    const overlayStyle = {
+      ...overlayColor ? { "--rmod-overlay-bg": overlayColor } : {},
+      // Higher stack depth → lower modals scale down + fade slightly behind the topmost.
+      zIndex: 1e3 + stackDepth * 10
+    };
+    const panelStyle = {
+      // Stack-position effects: only applied when this isn't the topmost modal.
+      ...stackPosition > 0 ? {
+        transform: `translateY(${-stackPosition * 8}px) scale(${1 - stackPosition * 0.03})`,
+        opacity: Math.max(0.6, 1 - stackPosition * 0.18)
+      } : {},
+      ...swipeY > 0 ? { transform: `translateY(${swipeY}px)`, transition: "none" } : {}
+    };
     return createPortal(
       /* @__PURE__ */ jsx(
         "div",
@@ -106,7 +233,10 @@ var ModalStyled = forwardRef(
           ].filter(Boolean).join(" "),
           "data-variant": variant,
           "data-blur": blur,
-          style: overlayColor ? { "--rmod-overlay-bg": overlayColor } : void 0,
+          "data-transition": transition,
+          "data-stack-position": stackPosition || void 0,
+          "data-state": visible ? "open" : "closed",
+          style: overlayStyle,
           onClick: handleOverlayClick,
           onKeyDown,
           children: /* @__PURE__ */ jsxs(
@@ -116,6 +246,7 @@ var ModalStyled = forwardRef(
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": title ? titleId : void 0,
+              "aria-describedby": description ? descId : void 0,
               tabIndex: -1,
               className: [
                 "rmod-panel",
@@ -126,11 +257,29 @@ var ModalStyled = forwardRef(
               "data-variant": variant,
               "data-padding": padding,
               "data-scrollable": scrollable ? "true" : void 0,
+              "data-transition": transition,
+              "data-state": visible ? "open" : "closed",
+              "data-swiping": swipeY > 0 ? "true" : void 0,
+              style: panelStyle,
+              onPointerDown: swipeEnabled ? handleSwipePointerDown : void 0,
+              onPointerMove: swipeEnabled ? handleSwipePointerMove : void 0,
+              onPointerUp: swipeEnabled ? handleSwipePointerUp : void 0,
+              onPointerCancel: swipeEnabled ? handleSwipePointerUp : void 0,
               children: [
                 hasHeader && /* @__PURE__ */ jsxs("div", { className: "rmod-header", children: [
                   title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "rmod-title", children: title }) : /* @__PURE__ */ jsx("span", {}),
-                  showCloseButton && /* @__PURE__ */ jsx("button", { type: "button", className: "rmod-close", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) }) })
+                  showCloseButton && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rmod-close",
+                      "aria-label": "Close",
+                      onClick: () => requestClose("close-button"),
+                      children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) })
+                    }
+                  )
                 ] }),
+                description !== void 0 && /* @__PURE__ */ jsx("p", { id: descId, className: "rmod-description", children: description }),
                 /* @__PURE__ */ jsx("div", { className: "rmod-body", children }),
                 footer && /* @__PURE__ */ jsx("div", { className: "rmod-footer", children: footer })
               ]
@@ -138,11 +287,72 @@ var ModalStyled = forwardRef(
           )
         }
       ),
-      document.body
+      portalTarget
     );
   }
 );
+function confirm(opts = {}) {
+  return new Promise((resolve) => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(false);
+      return;
+    }
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    const cleanup = () => {
+      setTimeout(() => {
+        try {
+          root.unmount();
+        } catch {
+        }
+        if (host.parentNode) host.parentNode.removeChild(host);
+      }, 320);
+    };
+    function ConfirmShell() {
+      const [open, setOpen] = useState(true);
+      const finish = (value) => {
+        setOpen(false);
+        cleanup();
+        resolve(value);
+      };
+      return /* @__PURE__ */ jsx(
+        ModalStyled,
+        {
+          open,
+          onClose: () => finish(false),
+          title: opts.title ?? "Are you sure?",
+          size: "sm",
+          footer: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "rmod-btn rmod-btn--cancel",
+                onClick: () => finish(false),
+                children: opts.cancelLabel ?? "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `rmod-btn rmod-btn--confirm${opts.danger ? " rmod-btn--danger" : ""}`,
+                onClick: () => finish(true),
+                autoFocus: true,
+                children: opts.confirmLabel ?? "Confirm"
+              }
+            )
+          ] }),
+          children: opts.body ?? null
+        }
+      );
+    }
+    root.render(/* @__PURE__ */ jsx(ConfirmShell, {}));
+  });
+}
+var modal = { confirm };
 
-export { ModalStyled };
+export { ModalStyled, confirm, modal };
 //# sourceMappingURL=styled.js.map
 //# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled/ModalStyled.tsx"],"names":["ModalStyled"],"mappings":"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","file":"styled.js","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../useFocusTrap\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type ModalVariant = \"dialog\" | \"drawer-left\" | \"drawer-right\" | \"drawer-bottom\";\n\nexport interface ModalStyledProps {\n  isOpen: boolean;\n  onClose: () => void;\n  /** Modal heading — omit to hide the header entirely */\n  title?: ReactNode;\n  children: ReactNode;\n  /** Footer content — omit to hide footer */\n  footer?: ReactNode;\n  size?: ModalSize;\n  variant?: ModalVariant;\n  closeOnOverlayClick?: boolean;\n  closeOnEsc?: boolean;\n  showCloseButton?: boolean;\n  /** Backdrop blur intensity. Default: \"md\" */\n  blur?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Custom overlay color e.g. \"rgba(0,0,0,0.6)\" */\n  overlayColor?: string;\n  /** Padding inside the body. Default: \"md\" */\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Max height of scrollable body. Default: auto */\n  scrollable?: boolean;\n  className?: string;\n}\n\nexport const ModalStyled = forwardRef<HTMLDivElement, ModalStyledProps>(\n  function ModalStyled(\n    {\n      isOpen,\n      onClose,\n      title,\n      children,\n      footer,\n      size = \"md\",\n      variant = \"dialog\",\n      closeOnOverlayClick = true,\n      closeOnEsc = true,\n      showCloseButton = true,\n      blur = \"md\",\n      overlayColor,\n      padding = \"md\",\n      scrollable = true,\n      className,\n    },\n    ref,\n  ) {\n    const titleId = useId();\n    const [mounted, setMounted] = useState(false);\n    const [rendered, setRendered] = useState(false);\n    const [visible, setVisible] = useState(false);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const originalOverflowRef = useRef(\"\");\n    const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const { activate, deactivate, handleKeyDown } = useFocusTrap();\n\n    useEffect(() => { setMounted(true); }, []);\n\n    useEffect(() => {\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n        exitTimerRef.current = null;\n      }\n\n      if (isOpen) {\n        setRendered(true);\n        // Double RAF ensures the element is in the DOM before we add the visible class\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            setVisible(true);\n          });\n        });\n        originalOverflowRef.current = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n      } else {\n        // Remove visible class first (triggers CSS exit transition)\n        setVisible(false);\n        // Then unmount after transition finishes\n        exitTimerRef.current = setTimeout(() => {\n          setRendered(false);\n        }, 300);\n        document.body.style.overflow = originalOverflowRef.current;\n      }\n    }, [isOpen]);\n\n    // Cleanup on unmount\n    useEffect(() => {\n      return () => {\n        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    }, []);\n\n    useEffect(() => {\n      if (isOpen && panelRef.current) {\n        activate(panelRef.current);\n      } else if (!isOpen) {\n        deactivate();\n      }\n    }, [isOpen, activate, deactivate]);\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (closeOnEsc && e.key === \"Escape\") {\n          onClose();\n          return;\n        }\n        handleKeyDown(e.nativeEvent);\n      },\n      [closeOnEsc, onClose, handleKeyDown],\n    );\n\n    const handleOverlayClick = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (closeOnOverlayClick && e.target === e.currentTarget) {\n          onClose();\n        }\n      },\n      [closeOnOverlayClick, onClose],\n    );\n\n    const setPanelRef = useCallback(\n      (el: HTMLDivElement | null) => {\n        panelRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n        if (el && isOpen) activate(el);\n      },\n      [ref, isOpen, activate],\n    );\n\n    if (!mounted || !rendered) return null;\n\n    const hasHeader = title !== undefined || showCloseButton;\n\n    return createPortal(\n      <div\n        className={[\n          \"rmod-overlay\",\n          visible ? \"rmod-overlay--visible\" : \"\",\n        ].filter(Boolean).join(\" \")}\n        data-variant={variant}\n        data-blur={blur}\n        style={overlayColor ? { \"--rmod-overlay-bg\": overlayColor } as React.CSSProperties : undefined}\n        onClick={handleOverlayClick}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          tabIndex={-1}\n          className={[\n            \"rmod-panel\",\n            className,\n            visible ? \"rmod-panel--visible\" : \"\",\n          ].filter(Boolean).join(\" \")}\n          data-size={size}\n          data-variant={variant}\n          data-padding={padding}\n          data-scrollable={scrollable ? \"true\" : undefined}\n        >\n          {hasHeader && (\n            <div className=\"rmod-header\">\n              {title ? (\n                <h2 id={titleId} className=\"rmod-title\">{title}</h2>\n              ) : (\n                <span />\n              )}\n              {showCloseButton && (\n                <button type=\"button\" className=\"rmod-close\" aria-label=\"Close\" onClick={onClose}>\n                  <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          )}\n          <div className=\"rmod-body\">{children}</div>\n          {footer && <div className=\"rmod-footer\">{footer}</div>}\n        </div>\n      </div>,\n      document.body,\n    );\n  },\n);\n"]}
+{"version":3,"sources":["../src/styled/ModalStyled.tsx","../src/styled/confirm.tsx"],"names":["ModalStyled","useState","jsx","jsxs"],"mappings":"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","file":"styled.js","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useFocusTrap } from \"../useFocusTrap\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type ModalVariant = \"dialog\" | \"drawer-left\" | \"drawer-right\" | \"drawer-bottom\";\nexport type CloseReason = \"esc\" | \"overlay\" | \"close-button\" | \"programmatic\" | \"swipe\" | \"submit\";\nexport type ModalTransition = \"fade\" | \"zoom\" | \"slide-up\" | \"slide-down\";\n\n// ---- Stacking registry (depth-aware z-index + scale-behind effect) -------\nconst _openModals: { id: number }[] = [];\nlet _modalIdCounter = 0;\nconst _stackListeners = new Set<() => void>();\nfunction _notifyStack() { _stackListeners.forEach((fn) => fn()); }\n\nexport interface ModalStyledProps {\n  /** Open state. `open` is the canonical name; `isOpen` continues to work. */\n  open?: boolean;\n  isOpen?: boolean;\n  onClose: () => void;\n  /** Modal heading — omit to hide the header entirely */\n  title?: ReactNode;\n  /** Optional accessible description. Renders below the title and links via aria-describedby. */\n  description?: ReactNode;\n  children: ReactNode;\n  /** Footer content — omit to hide footer */\n  footer?: ReactNode;\n  size?: ModalSize;\n  variant?: ModalVariant;\n  closeOnOverlayClick?: boolean;\n  closeOnEsc?: boolean;\n  showCloseButton?: boolean;\n  /** Backdrop blur intensity. Default: \"md\" */\n  blur?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Custom overlay color e.g. \"rgba(0,0,0,0.6)\" */\n  overlayColor?: string;\n  /** Padding inside the body. Default: \"md\" */\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n  /** Max height of scrollable body. Default: auto */\n  scrollable?: boolean;\n  className?: string;\n  /** Element to focus when the modal opens. Defaults to the first focusable child inside the panel. */\n  initialFocusRef?: RefObject<HTMLElement | null>;\n  /** Element to focus when the modal closes. Defaults to whatever was focused before opening. */\n  finalFocusRef?: RefObject<HTMLElement | null>;\n  /** Fires after the open transition completes. */\n  onAfterOpen?: () => void;\n  /** Fires after the close transition completes (and unmount). */\n  onAfterClose?: () => void;\n  /** Return false to veto a close attempt. Receives the trigger reason. */\n  preventClose?: (reason: CloseReason) => boolean;\n  /** Disable body scroll lock while open. Default: true (locked). */\n  lockBodyScroll?: boolean;\n  /** Override the portal container. Default: document.body. */\n  container?: HTMLElement | null;\n  /** Transition variant for the panel (only `dialog`; drawers always slide). Default: \"fade\" */\n  transition?: ModalTransition;\n  /** Allow swipe-down-to-dismiss on touch devices. Default: false (true for `drawer-bottom`). */\n  swipeToDismiss?: boolean;\n  /** When the modal contains a single `<form>` and it submits successfully, auto-close. Default: false. */\n  closeOnSubmit?: boolean;\n}\n\nexport const ModalStyled = forwardRef<HTMLDivElement, ModalStyledProps>(\n  function ModalStyled(\n    {\n      open,\n      isOpen,\n      onClose,\n      title,\n      description,\n      children,\n      footer,\n      size = \"md\",\n      variant = \"dialog\",\n      closeOnOverlayClick = true,\n      closeOnEsc = true,\n      showCloseButton = true,\n      blur = \"md\",\n      overlayColor,\n      padding = \"md\",\n      scrollable = true,\n      className,\n      initialFocusRef,\n      finalFocusRef,\n      onAfterOpen,\n      onAfterClose,\n      preventClose,\n      lockBodyScroll = true,\n      container,\n      transition = \"fade\",\n      swipeToDismiss,\n      closeOnSubmit = false,\n    },\n    ref,\n  ) {\n    const swipeEnabled = swipeToDismiss ?? variant === \"drawer-bottom\";\n    const myStackIdRef = useRef<number>(-1);\n    const [stackDepth, setStackDepth] = useState(0);\n    const [stackPosition, setStackPosition] = useState(0); // 0 = top\n    const [swipeY, setSwipeY] = useState(0);\n    const titleId = useId();\n    const descId = useId();\n    const isActuallyOpen = open ?? isOpen ?? false;\n    const [mounted, setMounted] = useState(false);\n    const [rendered, setRendered] = useState(false);\n    const [visible, setVisible] = useState(false);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const originalOverflowRef = useRef(\"\");\n    const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const { activate, deactivate, handleKeyDown } = useFocusTrap();\n\n    const onAfterOpenRef = useRef(onAfterOpen);\n    onAfterOpenRef.current = onAfterOpen;\n    const onAfterCloseRef = useRef(onAfterClose);\n    onAfterCloseRef.current = onAfterClose;\n\n    useEffect(() => { setMounted(true); }, []);\n\n    const requestClose = useCallback(\n      (reason: CloseReason) => {\n        if (preventClose && !preventClose(reason)) return;\n        onClose();\n      },\n      [preventClose, onClose],\n    );\n\n    useEffect(() => {\n      if (exitTimerRef.current) {\n        clearTimeout(exitTimerRef.current);\n        exitTimerRef.current = null;\n      }\n      if (enterTimerRef.current) {\n        clearTimeout(enterTimerRef.current);\n        enterTimerRef.current = null;\n      }\n\n      if (isActuallyOpen) {\n        setRendered(true);\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            setVisible(true);\n          });\n        });\n        if (lockBodyScroll) {\n          originalOverflowRef.current = document.body.style.overflow;\n          document.body.style.overflow = \"hidden\";\n        }\n        // Fire onAfterOpen once the enter transition has had time to settle.\n        enterTimerRef.current = setTimeout(() => {\n          onAfterOpenRef.current?.();\n        }, 320);\n      } else {\n        setVisible(false);\n        exitTimerRef.current = setTimeout(() => {\n          setRendered(false);\n          onAfterCloseRef.current?.();\n        }, 300);\n        if (lockBodyScroll) {\n          document.body.style.overflow = originalOverflowRef.current;\n        }\n      }\n    }, [isActuallyOpen, lockBodyScroll]);\n\n    useEffect(() => {\n      return () => {\n        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);\n        if (enterTimerRef.current) clearTimeout(enterTimerRef.current);\n        if (lockBodyScroll) {\n          document.body.style.overflow = originalOverflowRef.current;\n        }\n      };\n    }, [lockBodyScroll]);\n\n    // ---- Stacking: register / deregister this modal ---------------------\n    useEffect(() => {\n      if (!isActuallyOpen) return;\n      const id = ++_modalIdCounter;\n      myStackIdRef.current = id;\n      _openModals.push({ id });\n      _notifyStack();\n      const sync = () => {\n        const idx = _openModals.findIndex((m) => m.id === id);\n        const total = _openModals.length;\n        setStackDepth(total);\n        setStackPosition(idx === -1 ? 0 : total - 1 - idx);\n      };\n      sync();\n      _stackListeners.add(sync);\n      return () => {\n        _stackListeners.delete(sync);\n        const idx = _openModals.findIndex((m) => m.id === id);\n        if (idx !== -1) _openModals.splice(idx, 1);\n        _notifyStack();\n      };\n    }, [isActuallyOpen]);\n\n    // ---- closeOnSubmit: auto-close on a contained <form> submit ---------\n    useEffect(() => {\n      if (!closeOnSubmit || !isActuallyOpen || !panelRef.current) return;\n      const panel = panelRef.current;\n      const onSubmit = (e: Event) => {\n        // Defer the close so the consumer's onSubmit handler runs first\n        // and can call e.preventDefault() if it wants to abort the close.\n        if (e.defaultPrevented) return;\n        setTimeout(() => requestClose(\"submit\"), 0);\n      };\n      panel.addEventListener(\"submit\", onSubmit);\n      return () => panel.removeEventListener(\"submit\", onSubmit);\n    }, [closeOnSubmit, isActuallyOpen, requestClose]);\n\n    // ---- Swipe-to-dismiss (touch only) -----------------------------------\n    const swipeStartYRef = useRef<number | null>(null);\n    const handleSwipePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n      if (!swipeEnabled || e.pointerType !== \"touch\") return;\n      // Only initiate from the panel header / the panel itself, not buttons.\n      swipeStartYRef.current = e.clientY;\n    };\n    const handleSwipePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n      if (swipeStartYRef.current === null) return;\n      const dy = Math.max(0, e.clientY - swipeStartYRef.current);\n      setSwipeY(dy);\n    };\n    const handleSwipePointerUp = () => {\n      if (swipeStartYRef.current === null) return;\n      if (swipeY > 120) requestClose(\"swipe\");\n      setSwipeY(0);\n      swipeStartYRef.current = null;\n    };\n\n    // Focus management\n    const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n    useEffect(() => {\n      if (isActuallyOpen) {\n        previouslyFocusedRef.current = document.activeElement as HTMLElement | null;\n        if (panelRef.current) {\n          activate(panelRef.current);\n          // Honor initialFocusRef after the panel is mounted+visible\n          requestAnimationFrame(() => {\n            if (initialFocusRef?.current) {\n              initialFocusRef.current.focus();\n            }\n          });\n        }\n      } else {\n        deactivate();\n        // Honor finalFocusRef on close, otherwise restore previous focus\n        const target = finalFocusRef?.current ?? previouslyFocusedRef.current;\n        if (target && typeof target.focus === \"function\") {\n          target.focus();\n        }\n      }\n    }, [isActuallyOpen, activate, deactivate, initialFocusRef, finalFocusRef]);\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (closeOnEsc && e.key === \"Escape\") {\n          requestClose(\"esc\");\n          return;\n        }\n        handleKeyDown(e.nativeEvent);\n      },\n      [closeOnEsc, requestClose, handleKeyDown],\n    );\n\n    const handleOverlayClick = useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (closeOnOverlayClick && e.target === e.currentTarget) {\n          requestClose(\"overlay\");\n        }\n      },\n      [closeOnOverlayClick, requestClose],\n    );\n\n    const setPanelRef = useCallback(\n      (el: HTMLDivElement | null) => {\n        panelRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n        if (el && isActuallyOpen) activate(el);\n      },\n      [ref, isActuallyOpen, activate],\n    );\n\n    if (!mounted || !rendered) return null;\n\n    const hasHeader = title !== undefined || showCloseButton;\n    const portalTarget = container ?? document.body;\n\n    const overlayStyle: React.CSSProperties = {\n      ...(overlayColor ? ({ \"--rmod-overlay-bg\": overlayColor } as React.CSSProperties) : {}),\n      // Higher stack depth → lower modals scale down + fade slightly behind the topmost.\n      zIndex: 1000 + stackDepth * 10,\n    };\n\n    const panelStyle: React.CSSProperties = {\n      // Stack-position effects: only applied when this isn't the topmost modal.\n      ...(stackPosition > 0\n        ? {\n            transform: `translateY(${-stackPosition * 8}px) scale(${1 - stackPosition * 0.03})`,\n            opacity: Math.max(0.6, 1 - stackPosition * 0.18),\n          }\n        : {}),\n      ...(swipeY > 0 ? { transform: `translateY(${swipeY}px)`, transition: \"none\" } : {}),\n    };\n\n    return createPortal(\n      <div\n        className={[\n          \"rmod-overlay\",\n          visible ? \"rmod-overlay--visible\" : \"\",\n        ].filter(Boolean).join(\" \")}\n        data-variant={variant}\n        data-blur={blur}\n        data-transition={transition}\n        data-stack-position={stackPosition || undefined}\n        data-state={visible ? \"open\" : \"closed\"}\n        style={overlayStyle}\n        onClick={handleOverlayClick}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          ref={setPanelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={title ? titleId : undefined}\n          aria-describedby={description ? descId : undefined}\n          tabIndex={-1}\n          className={[\n            \"rmod-panel\",\n            className,\n            visible ? \"rmod-panel--visible\" : \"\",\n          ].filter(Boolean).join(\" \")}\n          data-size={size}\n          data-variant={variant}\n          data-padding={padding}\n          data-scrollable={scrollable ? \"true\" : undefined}\n          data-transition={transition}\n          data-state={visible ? \"open\" : \"closed\"}\n          data-swiping={swipeY > 0 ? \"true\" : undefined}\n          style={panelStyle}\n          onPointerDown={swipeEnabled ? handleSwipePointerDown : undefined}\n          onPointerMove={swipeEnabled ? handleSwipePointerMove : undefined}\n          onPointerUp={swipeEnabled ? handleSwipePointerUp : undefined}\n          onPointerCancel={swipeEnabled ? handleSwipePointerUp : undefined}\n        >\n          {hasHeader && (\n            <div className=\"rmod-header\">\n              {title ? (\n                <h2 id={titleId} className=\"rmod-title\">{title}</h2>\n              ) : (\n                <span />\n              )}\n              {showCloseButton && (\n                <button\n                  type=\"button\"\n                  className=\"rmod-close\"\n                  aria-label=\"Close\"\n                  onClick={() => requestClose(\"close-button\")}\n                >\n                  <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          )}\n          {description !== undefined && (\n            <p id={descId} className=\"rmod-description\">{description}</p>\n          )}\n          <div className=\"rmod-body\">{children}</div>\n          {footer && <div className=\"rmod-footer\">{footer}</div>}\n        </div>\n      </div>,\n      portalTarget,\n    );\n  },\n);\n","import { useState, type ReactNode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ModalStyled } from \"./ModalStyled\";\n\nexport interface ConfirmOptions {\n  title?: ReactNode;\n  body?: ReactNode;\n  confirmLabel?: ReactNode;\n  cancelLabel?: ReactNode;\n  /** Style the confirm button as the danger CTA (red). */\n  danger?: boolean;\n}\n\n/**\n * Programmatic confirm dialog. Resolves `true` if confirmed, `false` if cancelled\n * or dismissed via overlay/Esc/close button.\n *\n * Self-mounts a `<ModalStyled>` into a temporary div appended to `document.body`\n * and unmounts on close — no provider required.\n */\nexport function confirm(opts: ConfirmOptions = {}): Promise<boolean> {\n  return new Promise((resolve) => {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n      resolve(false);\n      return;\n    }\n    const host = document.createElement(\"div\");\n    document.body.appendChild(host);\n    const root = createRoot(host);\n\n    const cleanup = () => {\n      // Defer unmount so the close transition can run.\n      setTimeout(() => {\n        try { root.unmount(); } catch { /* ignore */ }\n        if (host.parentNode) host.parentNode.removeChild(host);\n      }, 320);\n    };\n\n    function ConfirmShell() {\n      const [open, setOpen] = useState(true);\n      const finish = (value: boolean) => {\n        setOpen(false);\n        cleanup();\n        resolve(value);\n      };\n      return (\n        <ModalStyled\n          open={open}\n          onClose={() => finish(false)}\n          title={opts.title ?? \"Are you sure?\"}\n          size=\"sm\"\n          footer={\n            <div style={{ display: \"flex\", gap: 8, justifyContent: \"flex-end\" }}>\n              <button\n                type=\"button\"\n                className=\"rmod-btn rmod-btn--cancel\"\n                onClick={() => finish(false)}\n              >\n                {opts.cancelLabel ?? \"Cancel\"}\n              </button>\n              <button\n                type=\"button\"\n                className={`rmod-btn rmod-btn--confirm${opts.danger ? \" rmod-btn--danger\" : \"\"}`}\n                onClick={() => finish(true)}\n                autoFocus\n              >\n                {opts.confirmLabel ?? \"Confirm\"}\n              </button>\n            </div>\n          }\n        >\n          {opts.body ?? null}\n        </ModalStyled>\n      );\n    }\n\n    root.render(<ConfirmShell />);\n  });\n}\n\n/** Module-style export so consumers can do `modal.confirm(...)`. */\nexport const modal = { confirm };\n"]}

package/dist/styles.css

@@ -245,3 +245,118 @@
 @media (prefers-reduced-motion: reduce) {
   .rmod-overlay, .rmod-panel { transition-duration: 0ms !important; }
 }
+
+/* ============================================================================
+ * 0.2.0 additions: description below title
+ * ========================================================================== */
+.rmod-description {
+  margin: 0 0 0.6rem;
+  padding: 0 1rem;
+  color: var(--rmod-fg-muted);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.rmod-panel[data-padding="none"] .rmod-description { padding: 0; }
+.rmod-panel[data-padding="sm"] .rmod-description { padding: 0 0.75rem; }
+.rmod-panel[data-padding="lg"] .rmod-description { padding: 0 1.5rem; }
+
+/* ============================================================================
+ * 1.x additions — transition variants · stacked behind · swipe · confirm()
+ * ============================================================================ */
+
+/* Transition variants on the dialog panel.
+ * Drawers (drawer-left/right/bottom) keep their existing slide-from-edge
+ * transition; these only apply to data-variant="dialog". */
+.rmod-panel[data-variant="dialog"][data-transition="zoom"] {
+  transform: scale(0.94);
+  opacity: 0;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
+}
+.rmod-panel[data-variant="dialog"][data-transition="zoom"].rmod-panel--visible {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.rmod-panel[data-variant="dialog"][data-transition="slide-up"] {
+  transform: translateY(20px);
+  opacity: 0;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
+}
+.rmod-panel[data-variant="dialog"][data-transition="slide-up"].rmod-panel--visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.rmod-panel[data-variant="dialog"][data-transition="slide-down"] {
+  transform: translateY(-20px);
+  opacity: 0;
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
+}
+.rmod-panel[data-variant="dialog"][data-transition="slide-down"].rmod-panel--visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Stacked-behind effect — applied via inline style from JS but we add a
+ * smooth transition here so depth changes animate. */
+.rmod-overlay[data-stack-position] .rmod-panel:not([data-swiping="true"]) {
+  transition:
+    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity   220ms ease;
+}
+
+/* Swipe-to-dismiss visual */
+.rmod-panel[data-swiping="true"] {
+  transition: none;
+  cursor: grabbing;
+}
+
+/* Confirm() utility's footer buttons — minimal, inherit consumer themes
+ * via CSS variables. */
+.rmod-btn {
+  appearance: none;
+  font: inherit;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.rmod-btn--cancel {
+  background: transparent;
+  border: 1px solid var(--rmod-border, rgba(0, 0, 0, 0.12));
+  color: var(--rmod-fg, #18181b);
+}
+.rmod-btn--cancel:hover {
+  background: var(--rmod-surface-hover, rgba(0, 0, 0, 0.04));
+}
+.rmod-btn--confirm {
+  background: var(--rmod-confirm-bg, #6366f1);
+  border: 1px solid var(--rmod-confirm-bg, #6366f1);
+  color: white;
+}
+.rmod-btn--confirm:hover {
+  background: var(--rmod-confirm-bg-hover, #5558e6);
+}
+.rmod-btn--danger {
+  background: var(--rmod-danger-bg, #dc2626);
+  border-color: var(--rmod-danger-bg, #dc2626);
+}
+.rmod-btn--danger:hover {
+  background: var(--rmod-danger-bg-hover, #c01f1f);
+}
+[data-theme="dark"] .rmod-btn--cancel {
+  border-color: var(--rmod-border, rgba(255, 255, 255, 0.16));
+  color: var(--rmod-fg, #f4f4f5);
+}
+[data-theme="dark"] .rmod-btn--cancel:hover {
+  background: var(--rmod-surface-hover, rgba(255, 255, 255, 0.06));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rmod-panel[data-variant="dialog"][data-transition] {
+    transition: opacity 100ms linear;
+    transform: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshafiqyajid/react-modal",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Headless modal hook and styled component for React. Accessible, focus-trapped, scroll-locked, animated, SSR-safe, fully typed.",
   "keywords": [
     "react",