@nobertdev/react-confirm-dialog 1.1.0 → 1.1.1

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,18 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function usePrefersDark() {
+  const [dark, setDark] = (0, import_react3.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  (0, import_react3.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;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -419,6 +419,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 +458,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 as useState2, 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 { 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,18 @@ var DEFAULT_STATE = {
   variant: "default",
   icon: void 0
 };
+function usePrefersDark() {
+  const [dark, setDark] = useState2(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  useEffect2(() => {
+    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;
+}
 function ConfirmDialogProvider({
   children,
   defaultOptions,
@@ -395,6 +395,7 @@ function ConfirmDialogProvider({
   const [state, setState] = useState2(DEFAULT_STATE);
   const [isClosing, setIsClosing] = useState2(false);
   const resolveRef = useRef2(null);
+  const isDark = usePrefersDark();
   const close = useCallback((result) => {
     setIsClosing(true);
     setTimeout(() => {
@@ -433,7 +434,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.1",
   "description": "A lightweight, fully customizable confirmation dialog hook (useConfirm()) that replaces window.confirm() with beautiful async modals. Zero dependencies.",
   "keywords": [
     "react",