@nobertdev/react-confirm-dialog 1.1.0 → 1.1.2

package/dist/index.js

@@ -49,18 +49,6 @@ var import_react_dom = require("react-dom");
 // src/components/BuildinDialog.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function usePrefersDark() {
-  const [dark, setDark] = (0, import_react.useState)(
-    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
-  (0, import_react.useEffect)(() => {
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
-  return dark;
-}
 var VARIANT_STYLES = {
   default: {
     confirmBg: "#111",
@@ -195,11 +183,11 @@ function BuiltInDialog({
   providerProps,
   onConfirm,
   onCancel,
-  isClosing
+  isClosing,
+  isDark
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const confirmRef = (0, import_react.useRef)(null);
-  const isDark = usePrefersDark();
   const variant = (_a = state.variant) != null ? _a : "default";
   const v = VARIANT_STYLES[variant];
   (0, import_react.useEffect)(() => {
@@ -409,6 +397,45 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function detectDarkFromDOM() {
+  var _a;
+  if (typeof document === "undefined") return null;
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return true;
+  if (el.classList.contains("light")) return false;
+  const dataTheme = (_a = el.getAttribute("data-theme")) != null ? _a : el.getAttribute("data-mode");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  return null;
+}
+function usePrefersDark() {
+  const [dark, setDark] = (0, import_react3.useState)(() => {
+    if (typeof window === "undefined") return false;
+    const domDark = detectDarkFromDOM();
+    if (domDark !== null) return domDark;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  (0, import_react3.useEffect)(() => {
+    const observer = new MutationObserver(() => {
+      const domDark = detectDarkFromDOM();
+      if (domDark !== null) setDark(domDark);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const mqHandler = (e) => {
+      if (detectDarkFromDOM() === null) setDark(e.matches);
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
+  }, []);
+  return dark;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -419,6 +446,7 @@ function ConfirmDialogProvider({
   const [state, setState] = (0, import_react3.useState)(DEFAULT_STATE);
   const [isClosing, setIsClosing] = (0, import_react3.useState)(false);
   const resolveRef = (0, import_react3.useRef)(null);
+  const isDark = usePrefersDark();
   const close = (0, import_react3.useCallback)((result) => {
     setIsClosing(true);
     setTimeout(() => {
@@ -457,7 +485,8 @@ function ConfirmDialogProvider({
       providerProps: { classNames, styles, defaultOptions },
       onConfirm,
       onCancel,
-      isClosing
+      isClosing,
+      isDark
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ConfirmDialogContext.Provider, { value: contextValue, children: [

package/dist/index.mjs

@@ -19,24 +19,12 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/components/ConfirmDialogProvider.tsx
-import { useState as useState2, useCallback, useRef as useRef2, useMemo } from "react";
+import { useState, useCallback, useRef as useRef2, useMemo, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/BuildinDialog.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function usePrefersDark() {
-  const [dark, setDark] = useState(
-    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
-  useEffect(() => {
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = (e) => setDark(e.matches);
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, []);
-  return dark;
-}
 var VARIANT_STYLES = {
   default: {
     confirmBg: "#111",
@@ -171,11 +159,11 @@ function BuiltInDialog({
   providerProps,
   onConfirm,
   onCancel,
-  isClosing
+  isClosing,
+  isDark
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const confirmRef = useRef(null);
-  const isDark = usePrefersDark();
   const variant = (_a = state.variant) != null ? _a : "default";
   const v = VARIANT_STYLES[variant];
   useEffect(() => {
@@ -385,6 +373,45 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function detectDarkFromDOM() {
+  var _a;
+  if (typeof document === "undefined") return null;
+  const el = document.documentElement;
+  if (el.classList.contains("dark")) return true;
+  if (el.classList.contains("light")) return false;
+  const dataTheme = (_a = el.getAttribute("data-theme")) != null ? _a : el.getAttribute("data-mode");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  return null;
+}
+function usePrefersDark() {
+  const [dark, setDark] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const domDark = detectDarkFromDOM();
+    if (domDark !== null) return domDark;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  useEffect2(() => {
+    const observer = new MutationObserver(() => {
+      const domDark = detectDarkFromDOM();
+      if (domDark !== null) setDark(domDark);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const mqHandler = (e) => {
+      if (detectDarkFromDOM() === null) setDark(e.matches);
+    };
+    mq.addEventListener("change", mqHandler);
+    return () => {
+      observer.disconnect();
+      mq.removeEventListener("change", mqHandler);
+    };
+  }, []);
+  return dark;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -392,9 +419,10 @@ function ConfirmDialogProvider({
   styles,
   renderDialog
 }) {
-  const [state, setState] = useState2(DEFAULT_STATE);
-  const [isClosing, setIsClosing] = useState2(false);
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [isClosing, setIsClosing] = useState(false);
   const resolveRef = useRef2(null);
+  const isDark = usePrefersDark();
   const close = useCallback((result) => {
     setIsClosing(true);
     setTimeout(() => {
@@ -433,7 +461,8 @@ function ConfirmDialogProvider({
       providerProps: { classNames, styles, defaultOptions },
       onConfirm,
       onCancel,
-      isClosing
+      isClosing,
+      isDark
     }
   );
   return /* @__PURE__ */ jsxs2(ConfirmDialogContext.Provider, { value: contextValue, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nobertdev/react-confirm-dialog",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A lightweight, fully customizable confirmation dialog hook (useConfirm()) that replaces window.confirm() with beautiful async modals. Zero dependencies.",
   "keywords": [
     "react",