@mshafiqyajid/react-modal 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shafiq Yajid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# @mshafiqyajid/react-modal
+
+Headless modal hook and styled component for React. Accessible, focus-trapped, scroll-locked, animated, SSR-safe, fully typed.
+
+**[Full docs →](https://docs.shafiqyajid.com/react/modal/)**
+
+## Install
+
+```bash
+npm install @mshafiqyajid/react-modal
+```
+
+## Headless usage
+
+```tsx
+import { useModal } from "@mshafiqyajid/react-modal";
+
+function Example() {
+  const { isOpen, open, close, modalProps, overlayProps } = useModal();
+
+  return (
+    <>
+      <button onClick={open}>Open modal</button>
+      {isOpen && (
+        <div {...overlayProps}>
+          <div {...modalProps} aria-labelledby="title">
+            <h2 id="title">Hello</h2>
+            <button onClick={close}>Close</button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+## Styled usage
+
+```tsx
+import { ModalStyled } from "@mshafiqyajid/react-modal/styled";
+import "@mshafiqyajid/react-modal/styles.css";
+
+function Example() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <ModalStyled
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        title="My Modal"
+        size="md"
+        variant="dialog"
+      >
+        <p>Modal content goes here.</p>
+      </ModalStyled>
+    </>
+  );
+}
+```
+
+## Props
+
+### `useModal(options?)`
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `defaultOpen` | `boolean` | `false` | Initial open state |
+| `onOpen` | `() => void` | — | Called when modal opens |
+| `onClose` | `() => void` | — | Called when modal closes |
+| `closeOnEsc` | `boolean` | `true` | Close on Escape key |
+
+Returns: `isOpen`, `open()`, `close()`, `toggle()`, `modalProps`, `overlayProps`
+
+### `ModalStyled`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | — | Controls visibility |
+| `onClose` | `() => void` | — | Called when closed |
+| `title` | `string` | — | Dialog title (sets aria-labelledby) |
+| `children` | `ReactNode` | — | Dialog body content |
+| `footer` | `ReactNode` | — | Optional footer content |
+| `size` | `"sm" \| "md" \| "lg" \| "full"` | `"md"` | Dialog size |
+| `variant` | `"dialog" \| "drawer-left" \| "drawer-right" \| "drawer-bottom"` | `"dialog"` | Display variant |
+| `closeOnOverlayClick` | `boolean` | `true` | Close when clicking the backdrop |
+| `closeOnEsc` | `boolean` | `true` | Close on Escape key |
+| `showCloseButton` | `boolean` | `true` | Show the X close button in the header |
+
+## Dark mode
+
+Set `data-theme="dark"` on any ancestor element — no `prefers-color-scheme` queries are used.
+
+```html
+<div data-theme="dark">
+  <!-- ModalStyled picks up dark tokens automatically -->
+</div>
+```
+
+## License
+
+MIT

package/dist/chunk-BFH4N5GR.js

@@ -0,0 +1,66 @@
+import { useRef, useCallback } from 'react';
+
+// src/useFocusTrap.ts
+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 = useRef(null);
+  const previousFocusRef = useRef(null);
+  const activate = 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 = useCallback(() => {
+    containerRef.current = null;
+    const prev = previousFocusRef.current;
+    if (prev && typeof prev.focus === "function") {
+      prev.focus();
+    }
+    previousFocusRef.current = null;
+  }, []);
+  const handleKeyDown = 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 };
+}
+
+export { useFocusTrap };
+//# sourceMappingURL=chunk-BFH4N5GR.js.map
+//# sourceMappingURL=chunk-BFH4N5GR.js.map

package/dist/chunk-BFH4N5GR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFocusTrap.ts"],"names":[],"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,GAAe,OAA2B,IAAI,CAAA;AACpD,EAAA,MAAM,gBAAA,GAAmB,OAA2B,IAAI,CAAA;AAExD,EAAA,MAAM,QAAA,GAAW,WAAA,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,GAAa,YAAY,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,GAAgB,WAAA,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","file":"chunk-BFH4N5GR.js","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"]}

package/dist/index.cjs

@@ -0,0 +1,159 @@
+'use strict';
+
+var react = require('react');
+
+// src/useModal.ts
+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 };
+}
+
+// src/useModal.ts
+function useModal(options = {}) {
+  const { defaultOpen = false, onOpen, onClose, closeOnEsc = true } = options;
+  const [isOpen, setIsOpen] = react.useState(defaultOpen);
+  const { activate, deactivate, handleKeyDown } = useFocusTrap();
+  const modalRef = react.useRef(null);
+  const originalOverflowRef = react.useRef("");
+  const hasOpenedRef = react.useRef(defaultOpen);
+  const open = react.useCallback(() => {
+    setIsOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const close = react.useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const toggle = react.useCallback(() => {
+    setIsOpen((prev) => {
+      if (prev) {
+        onClose?.();
+      } else {
+        onOpen?.();
+      }
+      return !prev;
+    });
+  }, [onOpen, onClose]);
+  react.useEffect(() => {
+    if (isOpen) {
+      hasOpenedRef.current = true;
+      originalOverflowRef.current = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    } else if (hasOpenedRef.current) {
+      document.body.style.overflow = originalOverflowRef.current;
+      return () => {
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e) => {
+      if (closeOnEsc && e.key === "Escape") {
+        close();
+        return;
+      }
+      handleKeyDown(e);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, closeOnEsc, close, handleKeyDown]);
+  react.useEffect(() => {
+    if (isOpen && modalRef.current) {
+      activate(modalRef.current);
+    } else if (!isOpen) {
+      deactivate();
+    }
+  }, [isOpen, activate, deactivate]);
+  const setModalRef = react.useCallback(
+    (el) => {
+      modalRef.current = el;
+      if (el && isOpen) {
+        activate(el);
+      }
+    },
+    [isOpen, activate]
+  );
+  const modalProps = {
+    role: "dialog",
+    "aria-modal": true,
+    tabIndex: -1,
+    ref: setModalRef
+  };
+  const overlayProps = {
+    "data-rmod-overlay": "true"
+  };
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    modalProps,
+    overlayProps
+  };
+}
+
+exports.useFocusTrap = useFocusTrap;
+exports.useModal = useModal;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFocusTrap.ts","../src/useModal.ts"],"names":["useRef","useCallback","useState","useEffect"],"mappings":"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","file":"index.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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"./useFocusTrap\";\n\nexport interface UseModalOptions {\n  defaultOpen?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  closeOnEsc?: boolean;\n}\n\nexport interface ModalProps {\n  role: \"dialog\";\n  \"aria-modal\": true;\n  tabIndex: -1;\n}\n\nexport interface OverlayProps {\n  \"data-rmod-overlay\": string;\n}\n\nexport interface UseModalResult {\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n  toggle: () => void;\n  modalProps: ModalProps;\n  overlayProps: OverlayProps;\n}\n\nexport function useModal(options: UseModalOptions = {}): UseModalResult {\n  const { defaultOpen = false, onOpen, onClose, closeOnEsc = true } = options;\n\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const { activate, deactivate, handleKeyDown } = useFocusTrap();\n  const modalRef = useRef<HTMLElement | null>(null);\n  const originalOverflowRef = useRef<string>(\"\");\n  const hasOpenedRef = useRef(defaultOpen);\n\n  const open = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const toggle = useCallback(() => {\n    setIsOpen((prev) => {\n      if (prev) {\n        onClose?.();\n      } else {\n        onOpen?.();\n      }\n      return !prev;\n    });\n  }, [onOpen, onClose]);\n\n  useEffect(() => {\n    if (isOpen) {\n      hasOpenedRef.current = true;\n      originalOverflowRef.current = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    } else if (hasOpenedRef.current) {\n      document.body.style.overflow = originalOverflowRef.current;\n      return () => {\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (closeOnEsc && e.key === \"Escape\") {\n        close();\n        return;\n      }\n      handleKeyDown(e);\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, closeOnEsc, close, handleKeyDown]);\n\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      activate(modalRef.current);\n    } else if (!isOpen) {\n      deactivate();\n    }\n  }, [isOpen, activate, deactivate]);\n\n  const setModalRef = useCallback(\n    (el: HTMLElement | null) => {\n      modalRef.current = el;\n      if (el && isOpen) {\n        activate(el);\n      }\n    },\n    [isOpen, activate],\n  );\n\n  const modalProps: ModalProps & { ref: (el: HTMLElement | null) => void } = {\n    role: \"dialog\",\n    \"aria-modal\": true,\n    tabIndex: -1,\n    ref: setModalRef,\n  };\n\n  const overlayProps: OverlayProps = {\n    \"data-rmod-overlay\": \"true\",\n  };\n\n  return {\n    isOpen,\n    open,\n    close,\n    toggle,\n    modalProps,\n    overlayProps,\n  };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+interface UseModalOptions {
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    closeOnEsc?: boolean;
+}
+interface ModalProps {
+    role: "dialog";
+    "aria-modal": true;
+    tabIndex: -1;
+}
+interface OverlayProps {
+    "data-rmod-overlay": string;
+}
+interface UseModalResult {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    modalProps: ModalProps;
+    overlayProps: OverlayProps;
+}
+declare function useModal(options?: UseModalOptions): UseModalResult;
+
+interface UseFocusTrapResult {
+    activate: (container: HTMLElement) => void;
+    deactivate: () => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+}
+declare function useFocusTrap(): UseFocusTrapResult;
+
+export { type ModalProps, type OverlayProps, type UseFocusTrapResult, type UseModalOptions, type UseModalResult, useFocusTrap, useModal };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+interface UseModalOptions {
+    defaultOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    closeOnEsc?: boolean;
+}
+interface ModalProps {
+    role: "dialog";
+    "aria-modal": true;
+    tabIndex: -1;
+}
+interface OverlayProps {
+    "data-rmod-overlay": string;
+}
+interface UseModalResult {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    modalProps: ModalProps;
+    overlayProps: OverlayProps;
+}
+declare function useModal(options?: UseModalOptions): UseModalResult;
+
+interface UseFocusTrapResult {
+    activate: (container: HTMLElement) => void;
+    deactivate: () => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+}
+declare function useFocusTrap(): UseFocusTrapResult;
+
+export { type ModalProps, type OverlayProps, type UseFocusTrapResult, type UseModalOptions, type UseModalResult, useFocusTrap, useModal };

package/dist/index.js

@@ -0,0 +1,96 @@
+import { useFocusTrap } from './chunk-BFH4N5GR.js';
+export { useFocusTrap } from './chunk-BFH4N5GR.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+function useModal(options = {}) {
+  const { defaultOpen = false, onOpen, onClose, closeOnEsc = true } = options;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const { activate, deactivate, handleKeyDown } = useFocusTrap();
+  const modalRef = useRef(null);
+  const originalOverflowRef = useRef("");
+  const hasOpenedRef = useRef(defaultOpen);
+  const open = useCallback(() => {
+    setIsOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => {
+      if (prev) {
+        onClose?.();
+      } else {
+        onOpen?.();
+      }
+      return !prev;
+    });
+  }, [onOpen, onClose]);
+  useEffect(() => {
+    if (isOpen) {
+      hasOpenedRef.current = true;
+      originalOverflowRef.current = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    } else if (hasOpenedRef.current) {
+      document.body.style.overflow = originalOverflowRef.current;
+      return () => {
+        document.body.style.overflow = originalOverflowRef.current;
+      };
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e) => {
+      if (closeOnEsc && e.key === "Escape") {
+        close();
+        return;
+      }
+      handleKeyDown(e);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, closeOnEsc, close, handleKeyDown]);
+  useEffect(() => {
+    if (isOpen && modalRef.current) {
+      activate(modalRef.current);
+    } else if (!isOpen) {
+      deactivate();
+    }
+  }, [isOpen, activate, deactivate]);
+  const setModalRef = useCallback(
+    (el) => {
+      modalRef.current = el;
+      if (el && isOpen) {
+        activate(el);
+      }
+    },
+    [isOpen, activate]
+  );
+  const modalProps = {
+    role: "dialog",
+    "aria-modal": true,
+    tabIndex: -1,
+    ref: setModalRef
+  };
+  const overlayProps = {
+    "data-rmod-overlay": "true"
+  };
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    modalProps,
+    overlayProps
+  };
+}
+
+export { useModal };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useModal.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"./useFocusTrap\";\n\nexport interface UseModalOptions {\n  defaultOpen?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  closeOnEsc?: boolean;\n}\n\nexport interface ModalProps {\n  role: \"dialog\";\n  \"aria-modal\": true;\n  tabIndex: -1;\n}\n\nexport interface OverlayProps {\n  \"data-rmod-overlay\": string;\n}\n\nexport interface UseModalResult {\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n  toggle: () => void;\n  modalProps: ModalProps;\n  overlayProps: OverlayProps;\n}\n\nexport function useModal(options: UseModalOptions = {}): UseModalResult {\n  const { defaultOpen = false, onOpen, onClose, closeOnEsc = true } = options;\n\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const { activate, deactivate, handleKeyDown } = useFocusTrap();\n  const modalRef = useRef<HTMLElement | null>(null);\n  const originalOverflowRef = useRef<string>(\"\");\n  const hasOpenedRef = useRef(defaultOpen);\n\n  const open = useCallback(() => {\n    setIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const toggle = useCallback(() => {\n    setIsOpen((prev) => {\n      if (prev) {\n        onClose?.();\n      } else {\n        onOpen?.();\n      }\n      return !prev;\n    });\n  }, [onOpen, onClose]);\n\n  useEffect(() => {\n    if (isOpen) {\n      hasOpenedRef.current = true;\n      originalOverflowRef.current = document.body.style.overflow;\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    } else if (hasOpenedRef.current) {\n      document.body.style.overflow = originalOverflowRef.current;\n      return () => {\n        document.body.style.overflow = originalOverflowRef.current;\n      };\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (closeOnEsc && e.key === \"Escape\") {\n        close();\n        return;\n      }\n      handleKeyDown(e);\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isOpen, closeOnEsc, close, handleKeyDown]);\n\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      activate(modalRef.current);\n    } else if (!isOpen) {\n      deactivate();\n    }\n  }, [isOpen, activate, deactivate]);\n\n  const setModalRef = useCallback(\n    (el: HTMLElement | null) => {\n      modalRef.current = el;\n      if (el && isOpen) {\n        activate(el);\n      }\n    },\n    [isOpen, activate],\n  );\n\n  const modalProps: ModalProps & { ref: (el: HTMLElement | null) => void } = {\n    role: \"dialog\",\n    \"aria-modal\": true,\n    tabIndex: -1,\n    ref: setModalRef,\n  };\n\n  const overlayProps: OverlayProps = {\n    \"data-rmod-overlay\": \"true\",\n  };\n\n  return {\n    isOpen,\n    open,\n    close,\n    toggle,\n    modalProps,\n    overlayProps,\n  };\n}\n"]}