@nobertdev/react-confirm-dialog 1.0.0

package/README.md

@@ -0,0 +1,226 @@
+# @nobertdev/react-confirm-dialog
+
+A lightweight, fully customizable confirmation dialog hook — `useConfirm()` — that replaces `window.confirm()` with beautiful async modals.
+
+**Zero runtime dependencies. ~2KB gzipped. Full TypeScript support.**
+
+---
+
+## Features
+
+- ✅ Drop-in async replacement for `window.confirm()`
+- 🎨 Four built-in variants: `default`, `danger`, `warning`, `success`
+- 🧩 Fully customizable via props, classNames, styles, or `renderDialog`
+- ⌨️ Keyboard accessible (Escape to cancel, auto-focus confirm)
+- 🖱️ Click outside to dismiss
+- 💨 Smooth enter/exit animations
+- 🔒 Zero runtime dependencies
+- 📦 ~2KB gzipped
+- 🏗️ Tree-shakeable ESM + CJS builds
+- 🔷 Full TypeScript types
+
+---
+
+## Installation
+
+```bash
+npm install @nobertdev/react-confirm-dialog
+# or
+yarn add @nobertdev/react-confirm-dialog
+# or
+pnpm add @nobertdev/react-confirm-dialog
+```
+
+---
+
+## Quick Start
+
+**1. Wrap your app with the provider:**
+
+```tsx
+// main.tsx / _app.tsx
+import { ConfirmDialogProvider } from "@nobertdev/react-confirm-dialog";
+
+function App() {
+  return (
+    <ConfirmDialogProvider>
+      <YourApp />
+    </ConfirmDialogProvider>
+  );
+}
+```
+
+**2. Use `useConfirm()` anywhere in your tree:**
+
+```tsx
+import { useConfirm } from "@nobertdev/react-confirm-dialog";
+
+function DeleteButton() {
+  const confirm = useConfirm();
+
+  const handleDelete = async () => {
+    const ok = await confirm({
+      title: "Delete this item?",
+      message: "This action cannot be undone.",
+      variant: "danger",
+      confirmText: "Delete",
+    });
+
+    if (ok) {
+      // user clicked Confirm
+      await deleteItem();
+    }
+  };
+
+  return <button onClick={handleDelete}>Delete</button>;
+}
+```
+
+---
+
+## API
+
+### `<ConfirmDialogProvider>`
+
+| Prop             | Type                                      | Description                             |
+| ---------------- | ----------------------------------------- | --------------------------------------- |
+| `defaultOptions` | `ConfirmOptions`                          | Default options merged into every call  |
+| `classNames`     | `object`                                  | Custom CSS class names for each element |
+| `styles`         | `object`                                  | Inline style overrides for each element |
+| `renderDialog`   | `(props: RenderDialogProps) => ReactNode` | Fully replace the built-in dialog       |
+
+### `useConfirm()`
+
+Returns a `confirm` function:
+
+```ts
+const confirm = useConfirm();
+
+// Simple string message
+const ok = await confirm("Are you sure?");
+
+// Full options object
+const ok = await confirm({
+  title: "Permanently delete?",
+  message: "This cannot be undone.",
+  confirmText: "Yes, delete it",
+  cancelText: "Never mind",
+  variant: "danger",            // "default" | "danger" | "warning" | "success"
+  icon: <MyIcon />,             // custom React node
+});
+```
+
+Returns `Promise<boolean>` — `true` if confirmed, `false` if cancelled.
+
+### `ConfirmOptions`
+
+| Prop          | Type                                              | Default           | Description          |
+| ------------- | ------------------------------------------------- | ----------------- | -------------------- |
+| `title`       | `string`                                          | `"Are you sure?"` | Dialog heading       |
+| `message`     | `string`                                          | —                 | Body text            |
+| `confirmText` | `string`                                          | `"Confirm"`       | Confirm button label |
+| `cancelText`  | `string`                                          | `"Cancel"`        | Cancel button label  |
+| `variant`     | `"default" \| "danger" \| "warning" \| "success"` | `"default"`       | Visual variant       |
+| `icon`        | `ReactNode`                                       | built-in SVG      | Custom icon          |
+
+---
+
+## Variants
+
+```tsx
+// Default (dark)
+await confirm({ title: "Proceed?" });
+
+// Danger (red) — for destructive actions
+await confirm({ title: "Delete account?", variant: "danger" });
+
+// Warning (amber) — for cautionary actions
+await confirm({ title: "Archive project?", variant: "warning" });
+
+// Success (green) — for confirmatory actions
+await confirm({ title: "Publish post?", variant: "success" });
+```
+
+---
+
+## Styling
+
+### Via `classNames`
+
+```tsx
+<ConfirmDialogProvider
+  classNames={{
+    overlay: "my-overlay",
+    dialog: "my-dialog",
+    title: "my-title",
+    confirmButton: "my-confirm-btn",
+    cancelButton: "my-cancel-btn",
+  }}
+>
+```
+
+### Via `styles`
+
+```tsx
+<ConfirmDialogProvider
+  styles={{
+    dialog: { borderRadius: "4px", fontFamily: "monospace" },
+    confirmButton: { background: "hotpink", borderRadius: "2px" },
+  }}
+>
+```
+
+### Via `renderDialog` (fully custom)
+
+```tsx
+<ConfirmDialogProvider
+  renderDialog={({ isOpen, options, onConfirm, onCancel }) => (
+    <MyCustomModal
+      open={isOpen}
+      title={options.title}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
+  )}
+>
+```
+
+---
+
+## Global Defaults
+
+```tsx
+<ConfirmDialogProvider
+  defaultOptions={{
+    confirmText: "Yes",
+    cancelText: "No",
+    variant: "danger",
+  }}
+>
+```
+
+---
+
+## SSR / Next.js
+
+Works with SSR out of the box. The portal is only created on the client.
+
+---
+
+## TypeScript
+
+All types are exported:
+
+```ts
+import type {
+  ConfirmOptions,
+  ConfirmDialogProviderProps,
+  RenderDialogProps,
+} from "@nobertdev/react-confirm-dialog";
+```
+
+---
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ConfirmOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "default" | "danger" | "warning" | "success";
+    icon?: React.ReactNode;
+    description?: string;
+}
+interface ConfirmDialogProviderProps {
+    children: React.ReactNode;
+    defaultOptions?: ConfirmOptions;
+    classNames?: {
+        overlay?: string;
+        dialog?: string;
+        title?: string;
+        message?: string;
+        actions?: string;
+        confirmButton?: string;
+        cancelButton?: string;
+    };
+    styles?: {
+        overlay?: React.CSSProperties;
+        dialog?: React.CSSProperties;
+        title?: React.CSSProperties;
+        message?: React.CSSProperties;
+        actions?: React.CSSProperties;
+        confirmButton?: React.CSSProperties;
+        cancelButton?: React.CSSProperties;
+    };
+    renderDialog?: (props: RenderDialogProps) => React.ReactNode;
+}
+interface RenderDialogProps {
+    isOpen: boolean;
+    options: ConfirmOptions;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+/**
+ * ConfirmDialogProvider
+ *
+ * Wrap your app (or a subtree) with this provider to enable useConfirm().
+ *
+ * @example
+ * <ConfirmDialogProvider>
+ *   <App />
+ * </ConfirmDialogProvider>
+ */
+declare function ConfirmDialogProvider({ children, defaultOptions, classNames, styles, renderDialog, }: ConfirmDialogProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useConfirm — drop-in async replacement for window.confirm()
+ *
+ * @example
+ * const confirm = useConfirm();
+ * const ok = await confirm("Are you sure?");
+ * const ok = await confirm({ title: "Delete?", variant: "danger" });
+ */
+declare function useConfirm(): (options?: ConfirmOptions | string) => Promise<boolean>;
+
+export { ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, type RenderDialogProps, useConfirm };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ConfirmOptions {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: "default" | "danger" | "warning" | "success";
+    icon?: React.ReactNode;
+    description?: string;
+}
+interface ConfirmDialogProviderProps {
+    children: React.ReactNode;
+    defaultOptions?: ConfirmOptions;
+    classNames?: {
+        overlay?: string;
+        dialog?: string;
+        title?: string;
+        message?: string;
+        actions?: string;
+        confirmButton?: string;
+        cancelButton?: string;
+    };
+    styles?: {
+        overlay?: React.CSSProperties;
+        dialog?: React.CSSProperties;
+        title?: React.CSSProperties;
+        message?: React.CSSProperties;
+        actions?: React.CSSProperties;
+        confirmButton?: React.CSSProperties;
+        cancelButton?: React.CSSProperties;
+    };
+    renderDialog?: (props: RenderDialogProps) => React.ReactNode;
+}
+interface RenderDialogProps {
+    isOpen: boolean;
+    options: ConfirmOptions;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+/**
+ * ConfirmDialogProvider
+ *
+ * Wrap your app (or a subtree) with this provider to enable useConfirm().
+ *
+ * @example
+ * <ConfirmDialogProvider>
+ *   <App />
+ * </ConfirmDialogProvider>
+ */
+declare function ConfirmDialogProvider({ children, defaultOptions, classNames, styles, renderDialog, }: ConfirmDialogProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useConfirm — drop-in async replacement for window.confirm()
+ *
+ * @example
+ * const confirm = useConfirm();
+ * const ok = await confirm("Are you sure?");
+ * const ok = await confirm({ title: "Delete?", variant: "danger" });
+ */
+declare function useConfirm(): (options?: ConfirmOptions | string) => Promise<boolean>;
+
+export { ConfirmDialogProvider, type ConfirmDialogProviderProps, type ConfirmOptions, type RenderDialogProps, useConfirm };

package/dist/index.js

@@ -0,0 +1,449 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ConfirmDialogProvider: () => ConfirmDialogProvider,
+  useConfirm: () => useConfirm
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ConfirmDialogProvider.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/components/BuildinDialog.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_STYLES = {
+  default: {
+    confirmBg: "#111",
+    confirmColor: "#fff",
+    confirmHover: "#333",
+    accentColor: "#111",
+    iconBg: "#f4f4f4"
+  },
+  danger: {
+    confirmBg: "#dc2626",
+    confirmColor: "#fff",
+    confirmHover: "#b91c1c",
+    accentColor: "#dc2626",
+    iconBg: "#fef2f2"
+  },
+  warning: {
+    confirmBg: "#d97706",
+    confirmColor: "#fff",
+    confirmHover: "#b45309",
+    accentColor: "#d97706",
+    iconBg: "#fffbeb"
+  },
+  success: {
+    confirmBg: "#16a34a",
+    confirmColor: "#fff",
+    confirmHover: "#15803d",
+    accentColor: "#16a34a",
+    iconBg: "#f0fdf4"
+  }
+};
+var DEFAULT_ICONS = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  ),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  ),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  )
+};
+var KEYFRAMES = `
+@keyframes rcd-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes rcd-dialog-in {
+  from { opacity: 0; transform: scale(0.94) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes rcd-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes rcd-dialog-out {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to   { opacity: 0; transform: scale(0.94) translateY(8px); }
+}
+`;
+function BuiltInDialog({
+  state,
+  providerProps,
+  onConfirm,
+  onCancel,
+  isClosing
+}) {
+  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 variant = (_a = state.variant) != null ? _a : "default";
+  const v = VARIANT_STYLES[variant];
+  (0, import_react.useEffect)(() => {
+    if (state.isOpen) {
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = confirmRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    }
+  }, [state.isOpen]);
+  (0, import_react.useEffect)(() => {
+    const handleKey = (e) => {
+      if (!state.isOpen) return;
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [state.isOpen, onCancel]);
+  if (!state.isOpen && !isClosing) return null;
+  const animationState = isClosing ? "out" : "in";
+  const overlayStyle = __spreadValues({
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.45)",
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "16px",
+    animation: `rcd-overlay-${animationState} 200ms ease forwards`
+  }, (_b = providerProps.styles) == null ? void 0 : _b.overlay);
+  const dialogStyle = __spreadValues({
+    background: "#fff",
+    borderRadius: "16px",
+    padding: "28px",
+    maxWidth: "420px",
+    width: "100%",
+    boxShadow: "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    position: "relative",
+    animation: `rcd-dialog-${animationState} 220ms cubic-bezier(0.34,1.56,0.64,1) forwards`
+  }, (_c = providerProps.styles) == null ? void 0 : _c.dialog);
+  const iconContainerStyle = {
+    width: 48,
+    height: 48,
+    borderRadius: "12px",
+    background: v.iconBg,
+    color: v.accentColor,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "16px",
+    flexShrink: 0
+  };
+  const titleStyle = __spreadValues({
+    margin: "0 0 6px 0",
+    fontSize: "17px",
+    fontWeight: 700,
+    color: "#0f0f0f",
+    lineHeight: 1.3,
+    letterSpacing: "-0.02em",
+    fontFamily: "inherit"
+  }, (_d = providerProps.styles) == null ? void 0 : _d.title);
+  const messageStyle = __spreadValues({
+    margin: "0 0 24px 0",
+    fontSize: "14px",
+    color: "#6b7280",
+    lineHeight: 1.6,
+    fontFamily: "inherit"
+  }, (_e = providerProps.styles) == null ? void 0 : _e.message);
+  const actionsStyle = __spreadValues({
+    display: "flex",
+    gap: "10px",
+    justifyContent: "flex-end"
+  }, (_f = providerProps.styles) == null ? void 0 : _f.actions);
+  const cancelStyle = __spreadValues({
+    padding: "9px 18px",
+    borderRadius: "9px",
+    border: "1.5px solid #e5e7eb",
+    background: "#fff",
+    color: "#374151",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    transition: "all 120ms ease"
+  }, (_g = providerProps.styles) == null ? void 0 : _g.cancelButton);
+  const confirmStyle = __spreadValues({
+    padding: "9px 18px",
+    borderRadius: "9px",
+    border: "none",
+    background: v.confirmBg,
+    color: v.confirmColor,
+    fontSize: "14px",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    transition: "all 120ms ease"
+  }, (_h = providerProps.styles) == null ? void 0 : _h.confirmButton);
+  const icon = (_i = state.icon) != null ? _i : DEFAULT_ICONS[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: KEYFRAMES }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: overlayStyle,
+        className: (_j = providerProps.classNames) == null ? void 0 : _j.overlay,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "rcd-title",
+        "aria-describedby": state.message ? "rcd-message" : void 0,
+        onClick: (e) => e.target === e.currentTarget && onCancel(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: dialogStyle, className: (_k = providerProps.classNames) == null ? void 0 : _k.dialog, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: iconContainerStyle, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "h2",
+            {
+              id: "rcd-title",
+              style: titleStyle,
+              className: (_l = providerProps.classNames) == null ? void 0 : _l.title,
+              children: (_m = state.title) != null ? _m : "Are you sure?"
+            }
+          ),
+          state.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              id: "rcd-message",
+              style: messageStyle,
+              className: (_n = providerProps.classNames) == null ? void 0 : _n.message,
+              children: state.message
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: actionsStyle,
+              className: (_o = providerProps.classNames) == null ? void 0 : _o.actions,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    style: cancelStyle,
+                    className: (_p = providerProps.classNames) == null ? void 0 : _p.cancelButton,
+                    onClick: onCancel,
+                    onMouseEnter: (e) => {
+                      e.target.style.background = "#f9fafb";
+                    },
+                    onMouseLeave: (e) => {
+                      var _a2, _b2, _c2, _d2;
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : "#fff";
+                    },
+                    children: (_q = state.cancelText) != null ? _q : "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    ref: confirmRef,
+                    style: confirmStyle,
+                    className: (_r = providerProps.classNames) == null ? void 0 : _r.confirmButton,
+                    onClick: onConfirm,
+                    onMouseEnter: (e) => {
+                      e.target.style.background = v.confirmHover;
+                    },
+                    onMouseLeave: (e) => {
+                      var _a2, _b2, _c2, _d2;
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.confirmButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : v.confirmBg;
+                    },
+                    children: (_s = state.confirmText) != null ? _s : "Confirm"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/hooks/useConfirm.ts
+var import_react2 = require("react");
+var ConfirmDialogContext = (0, import_react2.createContext)(null);
+function useConfirm() {
+  const ctx = (0, import_react2.useContext)(ConfirmDialogContext);
+  if (!ctx) {
+    throw new Error(
+      "[@nobertdev/react-confirm-dialog] useConfirm() must be used inside <ConfirmDialogProvider>."
+    );
+  }
+  return ctx.confirm;
+}
+
+// src/components/ConfirmDialogProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CLOSE_ANIMATION_MS = 180;
+var DEFAULT_STATE = {
+  isOpen: false,
+  resolve: null,
+  title: void 0,
+  message: void 0,
+  confirmText: void 0,
+  cancelText: void 0,
+  variant: "default",
+  icon: void 0
+};
+function ConfirmDialogProvider({
+  children,
+  defaultOptions,
+  classNames,
+  styles,
+  renderDialog
+}) {
+  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 close = (0, import_react3.useCallback)((result) => {
+    setIsClosing(true);
+    setTimeout(() => {
+      var _a;
+      setIsClosing(false);
+      setState(DEFAULT_STATE);
+      (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, result);
+      resolveRef.current = null;
+    }, CLOSE_ANIMATION_MS);
+  }, []);
+  const onConfirm = (0, import_react3.useCallback)(() => close(true), [close]);
+  const onCancel = (0, import_react3.useCallback)(() => close(false), [close]);
+  const confirm = (0, import_react3.useCallback)(
+    (options) => {
+      return new Promise((resolve) => {
+        resolveRef.current = resolve;
+        const normalized = typeof options === "string" ? { message: options } : options != null ? options : {};
+        setState(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, DEFAULT_STATE), defaultOptions), normalized), {
+          isOpen: true,
+          resolve
+        }));
+      });
+    },
+    [defaultOptions]
+  );
+  const contextValue = (0, import_react3.useMemo)(() => ({ confirm }), [confirm]);
+  const dialogNode = renderDialog ? renderDialog({
+    isOpen: state.isOpen || isClosing,
+    options: state,
+    onConfirm,
+    onCancel
+  }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    BuiltInDialog,
+    {
+      state,
+      providerProps: { classNames, styles, defaultOptions },
+      onConfirm,
+      onCancel,
+      isClosing
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ConfirmDialogContext.Provider, { value: contextValue, children: [
+    children,
+    typeof document !== "undefined" ? (0, import_react_dom.createPortal)(dialogNode, document.body) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfirmDialogProvider,
+  useConfirm
+});

package/dist/index.mjs

@@ -0,0 +1,424 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/ConfirmDialogProvider.tsx
+import { useState, useCallback, useRef as useRef2, useMemo } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/BuildinDialog.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  default: {
+    confirmBg: "#111",
+    confirmColor: "#fff",
+    confirmHover: "#333",
+    accentColor: "#111",
+    iconBg: "#f4f4f4"
+  },
+  danger: {
+    confirmBg: "#dc2626",
+    confirmColor: "#fff",
+    confirmHover: "#b91c1c",
+    accentColor: "#dc2626",
+    iconBg: "#fef2f2"
+  },
+  warning: {
+    confirmBg: "#d97706",
+    confirmColor: "#fff",
+    confirmHover: "#b45309",
+    accentColor: "#d97706",
+    iconBg: "#fffbeb"
+  },
+  success: {
+    confirmBg: "#16a34a",
+    confirmColor: "#fff",
+    confirmHover: "#15803d",
+    accentColor: "#16a34a",
+    iconBg: "#f0fdf4"
+  }
+};
+var DEFAULT_ICONS = {
+  default: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  ),
+  danger: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("polygon", { points: "7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  ),
+  warning: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  )
+};
+var KEYFRAMES = `
+@keyframes rcd-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes rcd-dialog-in {
+  from { opacity: 0; transform: scale(0.94) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes rcd-overlay-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+@keyframes rcd-dialog-out {
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to   { opacity: 0; transform: scale(0.94) translateY(8px); }
+}
+`;
+function BuiltInDialog({
+  state,
+  providerProps,
+  onConfirm,
+  onCancel,
+  isClosing
+}) {
+  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 variant = (_a = state.variant) != null ? _a : "default";
+  const v = VARIANT_STYLES[variant];
+  useEffect(() => {
+    if (state.isOpen) {
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = confirmRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    }
+  }, [state.isOpen]);
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (!state.isOpen) return;
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [state.isOpen, onCancel]);
+  if (!state.isOpen && !isClosing) return null;
+  const animationState = isClosing ? "out" : "in";
+  const overlayStyle = __spreadValues({
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.45)",
+    backdropFilter: "blur(4px)",
+    WebkitBackdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "16px",
+    animation: `rcd-overlay-${animationState} 200ms ease forwards`
+  }, (_b = providerProps.styles) == null ? void 0 : _b.overlay);
+  const dialogStyle = __spreadValues({
+    background: "#fff",
+    borderRadius: "16px",
+    padding: "28px",
+    maxWidth: "420px",
+    width: "100%",
+    boxShadow: "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)",
+    position: "relative",
+    animation: `rcd-dialog-${animationState} 220ms cubic-bezier(0.34,1.56,0.64,1) forwards`
+  }, (_c = providerProps.styles) == null ? void 0 : _c.dialog);
+  const iconContainerStyle = {
+    width: 48,
+    height: 48,
+    borderRadius: "12px",
+    background: v.iconBg,
+    color: v.accentColor,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "16px",
+    flexShrink: 0
+  };
+  const titleStyle = __spreadValues({
+    margin: "0 0 6px 0",
+    fontSize: "17px",
+    fontWeight: 700,
+    color: "#0f0f0f",
+    lineHeight: 1.3,
+    letterSpacing: "-0.02em",
+    fontFamily: "inherit"
+  }, (_d = providerProps.styles) == null ? void 0 : _d.title);
+  const messageStyle = __spreadValues({
+    margin: "0 0 24px 0",
+    fontSize: "14px",
+    color: "#6b7280",
+    lineHeight: 1.6,
+    fontFamily: "inherit"
+  }, (_e = providerProps.styles) == null ? void 0 : _e.message);
+  const actionsStyle = __spreadValues({
+    display: "flex",
+    gap: "10px",
+    justifyContent: "flex-end"
+  }, (_f = providerProps.styles) == null ? void 0 : _f.actions);
+  const cancelStyle = __spreadValues({
+    padding: "9px 18px",
+    borderRadius: "9px",
+    border: "1.5px solid #e5e7eb",
+    background: "#fff",
+    color: "#374151",
+    fontSize: "14px",
+    fontWeight: 500,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    transition: "all 120ms ease"
+  }, (_g = providerProps.styles) == null ? void 0 : _g.cancelButton);
+  const confirmStyle = __spreadValues({
+    padding: "9px 18px",
+    borderRadius: "9px",
+    border: "none",
+    background: v.confirmBg,
+    color: v.confirmColor,
+    fontSize: "14px",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    transition: "all 120ms ease"
+  }, (_h = providerProps.styles) == null ? void 0 : _h.confirmButton);
+  const icon = (_i = state.icon) != null ? _i : DEFAULT_ICONS[variant];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: overlayStyle,
+        className: (_j = providerProps.classNames) == null ? void 0 : _j.overlay,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "rcd-title",
+        "aria-describedby": state.message ? "rcd-message" : void 0,
+        onClick: (e) => e.target === e.currentTarget && onCancel(),
+        children: /* @__PURE__ */ jsxs("div", { style: dialogStyle, className: (_k = providerProps.classNames) == null ? void 0 : _k.dialog, children: [
+          icon && /* @__PURE__ */ jsx("div", { style: iconContainerStyle, children: icon }),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              id: "rcd-title",
+              style: titleStyle,
+              className: (_l = providerProps.classNames) == null ? void 0 : _l.title,
+              children: (_m = state.title) != null ? _m : "Are you sure?"
+            }
+          ),
+          state.message && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: "rcd-message",
+              style: messageStyle,
+              className: (_n = providerProps.classNames) == null ? void 0 : _n.message,
+              children: state.message
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: actionsStyle,
+              className: (_o = providerProps.classNames) == null ? void 0 : _o.actions,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: cancelStyle,
+                    className: (_p = providerProps.classNames) == null ? void 0 : _p.cancelButton,
+                    onClick: onCancel,
+                    onMouseEnter: (e) => {
+                      e.target.style.background = "#f9fafb";
+                    },
+                    onMouseLeave: (e) => {
+                      var _a2, _b2, _c2, _d2;
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.cancelButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : "#fff";
+                    },
+                    children: (_q = state.cancelText) != null ? _q : "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: confirmRef,
+                    style: confirmStyle,
+                    className: (_r = providerProps.classNames) == null ? void 0 : _r.confirmButton,
+                    onClick: onConfirm,
+                    onMouseEnter: (e) => {
+                      e.target.style.background = v.confirmHover;
+                    },
+                    onMouseLeave: (e) => {
+                      var _a2, _b2, _c2, _d2;
+                      e.target.style.background = (_d2 = (_c2 = (_b2 = (_a2 = providerProps.styles) == null ? void 0 : _a2.confirmButton) == null ? void 0 : _b2.background) == null ? void 0 : _c2.toString()) != null ? _d2 : v.confirmBg;
+                    },
+                    children: (_s = state.confirmText) != null ? _s : "Confirm"
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/hooks/useConfirm.ts
+import { createContext, useContext } from "react";
+var ConfirmDialogContext = createContext(null);
+function useConfirm() {
+  const ctx = useContext(ConfirmDialogContext);
+  if (!ctx) {
+    throw new Error(
+      "[@nobertdev/react-confirm-dialog] useConfirm() must be used inside <ConfirmDialogProvider>."
+    );
+  }
+  return ctx.confirm;
+}
+
+// src/components/ConfirmDialogProvider.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CLOSE_ANIMATION_MS = 180;
+var DEFAULT_STATE = {
+  isOpen: false,
+  resolve: null,
+  title: void 0,
+  message: void 0,
+  confirmText: void 0,
+  cancelText: void 0,
+  variant: "default",
+  icon: void 0
+};
+function ConfirmDialogProvider({
+  children,
+  defaultOptions,
+  classNames,
+  styles,
+  renderDialog
+}) {
+  const [state, setState] = useState(DEFAULT_STATE);
+  const [isClosing, setIsClosing] = useState(false);
+  const resolveRef = useRef2(null);
+  const close = useCallback((result) => {
+    setIsClosing(true);
+    setTimeout(() => {
+      var _a;
+      setIsClosing(false);
+      setState(DEFAULT_STATE);
+      (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, result);
+      resolveRef.current = null;
+    }, CLOSE_ANIMATION_MS);
+  }, []);
+  const onConfirm = useCallback(() => close(true), [close]);
+  const onCancel = useCallback(() => close(false), [close]);
+  const confirm = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        resolveRef.current = resolve;
+        const normalized = typeof options === "string" ? { message: options } : options != null ? options : {};
+        setState(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, DEFAULT_STATE), defaultOptions), normalized), {
+          isOpen: true,
+          resolve
+        }));
+      });
+    },
+    [defaultOptions]
+  );
+  const contextValue = useMemo(() => ({ confirm }), [confirm]);
+  const dialogNode = renderDialog ? renderDialog({
+    isOpen: state.isOpen || isClosing,
+    options: state,
+    onConfirm,
+    onCancel
+  }) : /* @__PURE__ */ jsx2(
+    BuiltInDialog,
+    {
+      state,
+      providerProps: { classNames, styles, defaultOptions },
+      onConfirm,
+      onCancel,
+      isClosing
+    }
+  );
+  return /* @__PURE__ */ jsxs2(ConfirmDialogContext.Provider, { value: contextValue, children: [
+    children,
+    typeof document !== "undefined" ? createPortal(dialogNode, document.body) : null
+  ] });
+}
+export {
+  ConfirmDialogProvider,
+  useConfirm
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@nobertdev/react-confirm-dialog",
+  "version": "1.0.0",
+  "description": "A lightweight, fully customizable confirmation dialog hook (useConfirm()) that replaces window.confirm() with beautiful async modals. Zero dependencies.",
+  "keywords": [
+    "react",
+    "confirm",
+    "dialog",
+    "modal",
+    "hook",
+    "async",
+    "confirm-dialog",
+    "useConfirm"
+  ],
+  "author": "Nobert Langat",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog/issues"
+  },
+  "homepage": "https://github.com/NOBERT167/@nobertdev/react-confirm-dialog#readme"
+}