@mshafiqyajid/react-modal 0.0.0

package/dist/styled.cjs

@@ -0,0 +1,209 @@
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/styled/ModalStyled.tsx
+var FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+  "details > summary"
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter(
+    (el) => !el.closest("[inert]") && getComputedStyle(el).display !== "none"
+  );
+}
+function useFocusTrap() {
+  const containerRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
+  const activate = react.useCallback((container) => {
+    containerRef.current = container;
+    previousFocusRef.current = document.activeElement;
+    const focusable = getFocusableElements(container);
+    const first = focusable[0];
+    if (first) {
+      first.focus();
+    } else {
+      container.focus();
+    }
+  }, []);
+  const deactivate = react.useCallback(() => {
+    containerRef.current = null;
+    const prev = previousFocusRef.current;
+    if (prev && typeof prev.focus === "function") {
+      prev.focus();
+    }
+    previousFocusRef.current = null;
+  }, []);
+  const handleKeyDown = react.useCallback((e) => {
+    if (e.key !== "Tab" || !containerRef.current) return;
+    const focusable = getFocusableElements(containerRef.current);
+    if (focusable.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }, []);
+  return { activate, deactivate, handleKeyDown };
+}
+var ModalStyled = react.forwardRef(
+  function ModalStyled2({
+    isOpen,
+    onClose,
+    title,
+    children,
+    footer,
+    size = "md",
+    variant = "dialog",
+    closeOnOverlayClick = true,
+    closeOnEsc = true,
+    showCloseButton = true,
+    blur = "md",
+    overlayColor,
+    padding = "md",
+    scrollable = true,
+    className
+  }, ref) {
+    const titleId = react.useId();
+    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 { activate, deactivate, handleKeyDown } = useFocusTrap();
+    react.useEffect(() => {
+      setMounted(true);
+    }, []);
+    react.useEffect(() => {
+      if (exitTimerRef.current) {
+        clearTimeout(exitTimerRef.current);
+        exitTimerRef.current = null;
+      }
+      if (isOpen) {
+        setRendered(true);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setVisible(true);
+          });
+        });
+        originalOverflowRef.current = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+      } else {
+        setVisible(false);
+        exitTimerRef.current = setTimeout(() => {
+          setRendered(false);
+        }, 300);
+        document.body.style.overflow = originalOverflowRef.current;
+      }
+    }, [isOpen]);
+    react.useEffect(() => {
+      return () => {
+        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    }, []);
+    react.useEffect(() => {
+      if (isOpen && panelRef.current) {
+        activate(panelRef.current);
+      } else if (!isOpen) {
+        deactivate();
+      }
+    }, [isOpen, activate, deactivate]);
+    const onKeyDown = react.useCallback(
+      (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          onClose();
+          return;
+        }
+        handleKeyDown(e.nativeEvent);
+      },
+      [closeOnEsc, onClose, handleKeyDown]
+    );
+    const handleOverlayClick = react.useCallback(
+      (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      [closeOnOverlayClick, onClose]
+    );
+    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);
+      },
+      [ref, isOpen, activate]
+    );
+    if (!mounted || !rendered) return null;
+    const hasHeader = title !== void 0 || showCloseButton;
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: [
+            "rmod-overlay",
+            visible ? "rmod-overlay--visible" : ""
+          ].filter(Boolean).join(" "),
+          "data-variant": variant,
+          "data-blur": blur,
+          style: overlayColor ? { "--rmod-overlay-bg": overlayColor } : void 0,
+          onClick: handleOverlayClick,
+          onKeyDown,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: setPanelRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              tabIndex: -1,
+              className: [
+                "rmod-panel",
+                className,
+                visible ? "rmod-panel--visible" : ""
+              ].filter(Boolean).join(" "),
+              "data-size": size,
+              "data-variant": variant,
+              "data-padding": padding,
+              "data-scrollable": scrollable ? "true" : 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" }) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rmod-body", children }),
+                footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rmod-footer", children: footer })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    );
+  }
+);
+
+exports.ModalStyled = ModalStyled;
+//# sourceMappingURL=styled.cjs.map
+//# sourceMappingURL=styled.cjs.map

package/dist/styled.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFocusTrap.ts","../src/styled/ModalStyled.tsx"],"names":["useRef","useCallback","forwardRef","ModalStyled","useId","useState","useEffect","createPortal","jsx","jsxs"],"mappings":";;;;;;;AAEA,IAAM,mBAAA,GAAsB;AAAA,EAC1B,SAAA;AAAA,EACA,wBAAA;AAAA,EACA,uBAAA;AAAA,EACA,wBAAA;AAAA,EACA,0BAAA;AAAA,EACA,iCAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,IAAI,CAAA;AAEX,SAAS,qBAAqB,SAAA,EAAuC;AACnE,EAAA,OAAO,MAAM,IAAA,CAAK,SAAA,CAAU,gBAAA,CAA8B,mBAAmB,CAAC,CAAA,CAAE,MAAA;AAAA,IAC9E,CAAC,EAAA,KAAO,CAAC,EAAA,CAAG,OAAA,CAAQ,SAAS,CAAA,IAAK,gBAAA,CAAiB,EAAE,CAAA,CAAE,OAAA,KAAY;AAAA,GACrE;AACF;AAQO,SAAS,YAAA,GAAmC;AACjD,EAAA,MAAM,YAAA,GAAeA,aAA2B,IAAI,CAAA;AACpD,EAAA,MAAM,gBAAA,GAAmBA,aAA2B,IAAI,CAAA;AAExD,EAAA,MAAM,QAAA,GAAWC,iBAAA,CAAY,CAAC,SAAA,KAA2B;AACvD,IAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,IAAA,gBAAA,CAAiB,UAAU,QAAA,CAAS,aAAA;AAEpC,IAAA,MAAM,SAAA,GAAY,qBAAqB,SAAS,CAAA;AAChD,IAAA,MAAM,KAAA,GAAQ,UAAU,CAAC,CAAA;AACzB,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,KAAA,CAAM,KAAA,EAAM;AAAA,IACd,CAAA,MAAO;AACL,MAAA,SAAA,CAAU,KAAA,EAAM;AAAA,IAClB;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAaA,kBAAY,MAAM;AACnC,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,IAAA,MAAM,OAAO,gBAAA,CAAiB,OAAA;AAC9B,IAAA,IAAI,IAAA,IAAQ,OAAO,IAAA,CAAK,KAAA,KAAU,UAAA,EAAY;AAC5C,MAAA,IAAA,CAAK,KAAA,EAAM;AAAA,IACb;AACA,IAAA,gBAAA,CAAiB,OAAA,GAAU,IAAA;AAAA,EAC7B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAgBA,iBAAA,CAAY,CAAC,CAAA,KAAqB;AACtD,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,KAAA,IAAS,CAAC,aAAa,OAAA,EAAS;AAE9C,IAAA,MAAM,SAAA,GAAY,oBAAA,CAAqB,YAAA,CAAa,OAAO,CAAA;AAC3D,IAAA,IAAI,SAAA,CAAU,WAAW,CAAA,EAAG;AAC1B,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,KAAA,GAAQ,UAAU,CAAC,CAAA;AACzB,IAAA,MAAM,IAAA,GAAO,SAAA,CAAU,SAAA,CAAU,MAAA,GAAS,CAAC,CAAA;AAE3C,IAAA,IAAI,EAAE,QAAA,EAAU;AACd,MAAA,IAAI,QAAA,CAAS,kBAAkB,KAAA,EAAO;AACpC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,IAAA,CAAK,KAAA,EAAM;AAAA,MACb;AAAA,IACF,CAAA,MAAO;AACL,MAAA,IAAI,QAAA,CAAS,kBAAkB,IAAA,EAAM;AACnC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,KAAA,CAAM,KAAA,EAAM;AAAA,MACd;AAAA,IACF;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,QAAA,EAAU,UAAA,EAAY,aAAA,EAAc;AAC/C;ACrCO,IAAM,WAAA,GAAcC,gBAAA;AAAA,EACzB,SAASC,YAAAA,CACP;AAAA,IACE,MAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,QAAA;AAAA,IACV,mBAAA,GAAsB,IAAA;AAAA,IACtB,UAAA,GAAa,IAAA;AAAA,IACb,eAAA,GAAkB,IAAA;AAAA,IAClB,IAAA,GAAO,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAA,GAAU,IAAA;AAAA,IACV,UAAA,GAAa,IAAA;AAAA,IACb;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC9C,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC5C,IAAA,MAAM,QAAA,GAAWL,aAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,mBAAA,GAAsBA,aAAO,EAAE,CAAA;AACrC,IAAA,MAAM,YAAA,GAAeA,aAA6C,IAAI,CAAA;AACtE,IAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,aAAA,KAAkB,YAAA,EAAa;AAE7D,IAAAM,eAAA,CAAU,MAAM;AAAE,MAAA,UAAA,CAAW,IAAI,CAAA;AAAA,IAAG,CAAA,EAAG,EAAE,CAAA;AAEzC,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA;AACjC,QAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAAA,MACzB;AAEA,MAAA,IAAI,MAAA,EAAQ;AACV,QAAA,WAAA,CAAY,IAAI,CAAA;AAEhB,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,UAAA,CAAW,IAAI,CAAA;AAAA,UACjB,CAAC,CAAA;AAAA,QACH,CAAC,CAAA;AACD,QAAA,mBAAA,CAAoB,OAAA,GAAU,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA;AAClD,QAAA,QAAA,CAAS,IAAA,CAAK,MAAM,QAAA,GAAW,QAAA;AAAA,MACjC,CAAA,MAAO;AAEL,QAAA,UAAA,CAAW,KAAK,CAAA;AAEhB,QAAA,YAAA,CAAa,OAAA,GAAU,WAAW,MAAM;AACtC,UAAA,WAAA,CAAY,KAAK,CAAA;AAAA,QACnB,GAAG,GAAG,CAAA;AACN,QAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,mBAAA,CAAoB,OAAA;AAAA,MACrD;AAAA,IACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAGX,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,YAAA,CAAa,OAAA,EAAS,YAAA,CAAa,YAAA,CAAa,OAAO,CAAA;AAC3D,QAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,QAAA,GAAW,mBAAA,CAAoB,OAAA;AAAA,MACrD,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,MAAA,IAAU,SAAS,OAAA,EAAS;AAC9B,QAAA,QAAA,CAAS,SAAS,OAAO,CAAA;AAAA,MAC3B,CAAA,MAAA,IAAW,CAAC,MAAA,EAAQ;AAClB,QAAA,UAAA,EAAW;AAAA,MACb;AAAA,IACF,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAA,EAAU,UAAU,CAAC,CAAA;AAEjC,IAAA,MAAM,SAAA,GAAYL,iBAAAA;AAAA,MAChB,CAAC,CAAA,KAA2B;AAC1B,QAAA,IAAI,UAAA,IAAc,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU;AACpC,UAAA,OAAA,EAAQ;AACR,UAAA;AAAA,QACF;AACA,QAAA,aAAA,CAAc,EAAE,WAAW,CAAA;AAAA,MAC7B,CAAA;AAAA,MACA,CAAC,UAAA,EAAY,OAAA,EAAS,aAAa;AAAA,KACrC;AAEA,IAAA,MAAM,kBAAA,GAAqBA,iBAAAA;AAAA,MACzB,CAAC,CAAA,KAAwC;AACvC,QAAA,IAAI,mBAAA,IAAuB,CAAA,CAAE,MAAA,KAAW,CAAA,CAAE,aAAA,EAAe;AACvD,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,CAAC,qBAAqB,OAAO;AAAA,KAC/B;AAEA,IAAA,MAAM,WAAA,GAAcA,iBAAAA;AAAA,MAClB,CAAC,EAAA,KAA8B;AAC7B,QAAA,QAAA,CAAS,OAAA,GAAU,EAAA;AACnB,QAAA,IAAI,OAAO,GAAA,KAAQ,UAAA,EAAY,GAAA,CAAI,EAAE,CAAA;AAAA,aAAA,IAC5B,GAAA,EAAM,GAAA,CAAsD,OAAA,GAAU,EAAA;AAC/E,QAAA,IAAI,EAAA,IAAM,MAAA,EAAQ,QAAA,CAAS,EAAE,CAAA;AAAA,MAC/B,CAAA;AAAA,MACA,CAAC,GAAA,EAAK,MAAA,EAAQ,QAAQ;AAAA,KACxB;AAEA,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,QAAA,EAAU,OAAO,IAAA;AAElC,IAAA,MAAM,SAAA,GAAY,UAAU,MAAA,IAAa,eAAA;AAEzC,IAAA,OAAOM,qBAAA;AAAA,sBACLC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW;AAAA,YACT,cAAA;AAAA,YACA,UAAU,uBAAA,GAA0B;AAAA,WACtC,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,UAC1B,cAAA,EAAc,OAAA;AAAA,UACd,WAAA,EAAW,IAAA;AAAA,UACX,KAAA,EAAO,YAAA,GAAe,EAAE,mBAAA,EAAqB,cAAa,GAA2B,MAAA;AAAA,UACrF,OAAA,EAAS,kBAAA;AAAA,UACT,SAAA;AAAA,UAEA,QAAA,kBAAAC,eAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,WAAA;AAAA,cACL,IAAA,EAAK,QAAA;AAAA,cACL,YAAA,EAAW,MAAA;AAAA,cACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,cACnC,QAAA,EAAU,EAAA;AAAA,cACV,SAAA,EAAW;AAAA,gBACT,YAAA;AAAA,gBACA,SAAA;AAAA,gBACA,UAAU,qBAAA,GAAwB;AAAA,eACpC,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,cAC1B,WAAA,EAAW,IAAA;AAAA,cACX,cAAA,EAAc,OAAA;AAAA,cACd,cAAA,EAAc,OAAA;AAAA,cACd,iBAAA,EAAiB,aAAa,MAAA,GAAS,MAAA;AAAA,cAEtC,QAAA,EAAA;AAAA,gBAAA,SAAA,oBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,kBAAA,KAAA,mBACCD,cAAA,CAAC,QAAG,EAAA,EAAI,OAAA,EAAS,WAAU,YAAA,EAAc,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE/CA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA;AAAA,kBAEP,eAAA,oBACCA,cAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,UAAS,SAAA,EAAU,YAAA,EAAa,YAAA,EAAW,OAAA,EAAQ,SAAS,OAAA,EACvE,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,QAAO,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACtE,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oBAAA,EAAqB,MAAA,EAAO,gBAAe,WAAA,EAAY,MAAA,EAAO,aAAA,EAAc,OAAA,EAAQ,GAC9F,CAAA,EACF;AAAA,iBAAA,EAEJ,CAAA;AAAA,gCAEFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EAAa,QAAA,EAAS,CAAA;AAAA,gBACpC,MAAA,oBAAUA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAe,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA;AAClD;AAAA,OACF;AAAA,MACA,QAAA,CAAS;AAAA,KACX;AAAA,EACF;AACF","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"]}

package/dist/styled.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ModalSize = "sm" | "md" | "lg" | "full";
+type ModalVariant = "dialog" | "drawer-left" | "drawer-right" | "drawer-bottom";
+interface ModalStyledProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Modal heading — omit to hide the header entirely */
+    title?: ReactNode;
+    children: ReactNode;
+    /** Footer content — omit to hide footer */
+    footer?: ReactNode;
+    size?: ModalSize;
+    variant?: ModalVariant;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    /** Backdrop blur intensity. Default: "md" */
+    blur?: "none" | "sm" | "md" | "lg";
+    /** Custom overlay color e.g. "rgba(0,0,0,0.6)" */
+    overlayColor?: string;
+    /** Padding inside the body. Default: "md" */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Max height of scrollable body. Default: auto */
+    scrollable?: boolean;
+    className?: string;
+}
+declare const ModalStyled: react.ForwardRefExoticComponent<ModalStyledProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ModalSize, ModalStyled, type ModalStyledProps, type ModalVariant };

package/dist/styled.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ModalSize = "sm" | "md" | "lg" | "full";
+type ModalVariant = "dialog" | "drawer-left" | "drawer-right" | "drawer-bottom";
+interface ModalStyledProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Modal heading — omit to hide the header entirely */
+    title?: ReactNode;
+    children: ReactNode;
+    /** Footer content — omit to hide footer */
+    footer?: ReactNode;
+    size?: ModalSize;
+    variant?: ModalVariant;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    showCloseButton?: boolean;
+    /** Backdrop blur intensity. Default: "md" */
+    blur?: "none" | "sm" | "md" | "lg";
+    /** Custom overlay color e.g. "rgba(0,0,0,0.6)" */
+    overlayColor?: string;
+    /** Padding inside the body. Default: "md" */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Max height of scrollable body. Default: auto */
+    scrollable?: boolean;
+    className?: string;
+}
+declare const ModalStyled: react.ForwardRefExoticComponent<ModalStyledProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ModalSize, ModalStyled, type ModalStyledProps, type ModalVariant };

package/dist/styled.js

@@ -0,0 +1,148 @@
+import { useFocusTrap } from './chunk-BFH4N5GR.js';
+import { forwardRef, useId, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ModalStyled = forwardRef(
+  function ModalStyled2({
+    isOpen,
+    onClose,
+    title,
+    children,
+    footer,
+    size = "md",
+    variant = "dialog",
+    closeOnOverlayClick = true,
+    closeOnEsc = true,
+    showCloseButton = true,
+    blur = "md",
+    overlayColor,
+    padding = "md",
+    scrollable = true,
+    className
+  }, ref) {
+    const titleId = useId();
+    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 { activate, deactivate, handleKeyDown } = useFocusTrap();
+    useEffect(() => {
+      setMounted(true);
+    }, []);
+    useEffect(() => {
+      if (exitTimerRef.current) {
+        clearTimeout(exitTimerRef.current);
+        exitTimerRef.current = null;
+      }
+      if (isOpen) {
+        setRendered(true);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setVisible(true);
+          });
+        });
+        originalOverflowRef.current = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+      } else {
+        setVisible(false);
+        exitTimerRef.current = setTimeout(() => {
+          setRendered(false);
+        }, 300);
+        document.body.style.overflow = originalOverflowRef.current;
+      }
+    }, [isOpen]);
+    useEffect(() => {
+      return () => {
+        if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    }, []);
+    useEffect(() => {
+      if (isOpen && panelRef.current) {
+        activate(panelRef.current);
+      } else if (!isOpen) {
+        deactivate();
+      }
+    }, [isOpen, activate, deactivate]);
+    const onKeyDown = useCallback(
+      (e) => {
+        if (closeOnEsc && e.key === "Escape") {
+          onClose();
+          return;
+        }
+        handleKeyDown(e.nativeEvent);
+      },
+      [closeOnEsc, onClose, handleKeyDown]
+    );
+    const handleOverlayClick = useCallback(
+      (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      [closeOnOverlayClick, onClose]
+    );
+    const setPanelRef = useCallback(
+      (el) => {
+        panelRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+        if (el && isOpen) activate(el);
+      },
+      [ref, isOpen, activate]
+    );
+    if (!mounted || !rendered) return null;
+    const hasHeader = title !== void 0 || showCloseButton;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [
+            "rmod-overlay",
+            visible ? "rmod-overlay--visible" : ""
+          ].filter(Boolean).join(" "),
+          "data-variant": variant,
+          "data-blur": blur,
+          style: overlayColor ? { "--rmod-overlay-bg": overlayColor } : void 0,
+          onClick: handleOverlayClick,
+          onKeyDown,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: setPanelRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? titleId : void 0,
+              tabIndex: -1,
+              className: [
+                "rmod-panel",
+                className,
+                visible ? "rmod-panel--visible" : ""
+              ].filter(Boolean).join(" "),
+              "data-size": size,
+              "data-variant": variant,
+              "data-padding": padding,
+              "data-scrollable": scrollable ? "true" : 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" }) }) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "rmod-body", children }),
+                footer && /* @__PURE__ */ jsx("div", { className: "rmod-footer", children: footer })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    );
+  }
+);
+
+export { ModalStyled };
+//# sourceMappingURL=styled.js.map
+//# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -0,0 +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"]}