@rokku-x/react-hook-dialog 1.1.0 → 1.2.0

package/README.md

@@ -1,38 +1,46 @@
 # react-hook-dialog
 
-[![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml)
+[![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![license](https://img.shields.io/npm/l/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![downloads](https://img.shields.io/npm/dm/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) ![TS](https://img.shields.io/badge/TS-%E2%9C%93-blue)
 
-A powerful and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
+A lightweight, powerful, and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
 
 ## Features
 
+- ♿ **Accessibility Focused** - Keyboard navigation and ARIA support
+- 🔄 **Asynchronous** - Async/await friendly dialog results
 - 🎯 **Hook-based API** - Simple and intuitive `useHookDialog()` hook
 - 🎨 **Rich Variants** - 7 button variants (primary, secondary, danger, success, warning, info, neutral)
-- 🧩 **Modular Components** - Composed from reusable Backdrop and DialogWindow components
 - 📝 **Dialog Actions** - Flexible action button system with left/right positioning
 - 💅 **Full Customization** - Injectable className and styles at every level
 - ⌨️ **Rich Configuration** - Default configs with per-call overrides
-- 🎁 **Zero Dependencies** - Only requires React, Zustand, and @rokku-x/react-hook-modal
 - 📱 **TypeScript Support** - Full type safety out of the box
-- ♿ **Backdrop Control** - Configurable backdrop click behavior
+- 🧑‍🤝‍🧑 **Multiple Dialogs** - Support for multiple simultaneous dialogs
+- 🛠️ **Programmatic Control** - Force actions and cancellations via dialog context
+- 🖼️ **Rich Content Support** - Accepts React nodes for titles and content
+- 📦 **Lightweight** - Minimal bundle size for fast load times
 
 ## Installation
 
 ```bash
 npm install @rokku-x/react-hook-dialog
-```
-
-or with yarn:
-
-```bash
+# or
+bun add @rokku-x/react-hook-dialog
+# or
 yarn add @rokku-x/react-hook-dialog
+# or
+pnpm add @rokku-x/react-hook-dialog
 ```
 
 ## Quick Start
 
-### 1. Setup BaseModalRenderer
+### 1. Setup BaseModalRenderer or BaseDialogRenderer
+
+You can either use the upstream `BaseModalRenderer` directly (from `@rokku-x/react-hook-modal`) or use the convenience wrapper `BaseDialogRenderer` provided by this package.
 
-First, add the `BaseModalRenderer` at the root of your application (from `@rokku-x/react-hook-modal`):
+- `BaseModalRenderer` (upstream): mount this at the root to render modal instances.
+- `BaseDialogRenderer` (this package): a thin wrapper around `BaseModalRenderer` that lets you pass a `defaultConfig` prop to set default dialog options for all dialogs created by `useHookDialog()`.
+
+Use `BaseModalRenderer` directly:
 
 ```tsx
 import { BaseModalRenderer } from '@rokku-x/react-hook-modal';
@@ -47,6 +55,23 @@ function App() {
 }
 ```
 
+Or use the wrapper `BaseDialogRenderer` from this package to set defaults:
+
+```tsx
+import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
+
+function App() {
+  return (
+    <>
+      <YourComponents />
+      <BaseDialogRenderer defaultConfig={{ showCloseButton: false, backdropCancel: false }} />
+    </>
+  );
+}
+```
+
+Either component is fine — `BaseDialogRenderer` simply sets the dialog defaults for you so consumers of `useHookDialog()` don't have to provide them on each call.
+
 ### 2. Use useHookDialog Hook
 
 ```tsx
@@ -91,63 +116,62 @@ useHookDialog(defaultConfig?: UseHookDialogConfig)
 #### Returns
 
 ```typescript
-[requestDialog]
+[requestDialog, getContext]
 ```
 
 | Return Value | Type | Description |
 |---|---|---|
-| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Function to open a dialog and get user response. `RequestDialogReturnType<T>` is defined as `Promise<T> & { id: string; context: DialogInstanceContext }` which means the native Promise resolves with `T` while the *returned* value exposes `id` and `context` for programmatic control. |
+| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Open a dialog and receive a result. The return value is an **augmented Promise** (see `RequestDialogReturnType<T>`). |
+| `getContext` | `(id: string) => DialogInstanceContext` | Retrieve the runtime context for an open dialog by its `id` (useful if you only have the `id`). |
 
 ```typescript
-// Convenience alias shown in the library
+// Augmented promise returned by `requestDialog`
 type RequestDialogReturnType<T> = Promise<T> & { id: string; context: DialogInstanceContext };
 ```
 
+> Important: awaiting the returned Promise resolves with the dialog result (`T`). The `id` and `context` properties are available immediately after calling `requestDialog(...)`, allowing programmatic control while the dialog is open.
+
 ### Dialog Context & Force Functions ✅
 
-The Promise returned from `requestDialog(...)` is augmented with:
+The augmented Promise exposes two helpers:
 
 - `id: string` — unique identifier for the dialog instance
-- `context: DialogInstanceContext` — helper methods to programmatically control the dialog instance
+- `context: DialogInstanceContext` — runtime control helpers
 
-You can access the context either directly from the returned Promise (`promise.context`) or via the second value returned from the hook (`getContext(id)`).
+`DialogInstanceContext` methods:
 
-Dialog context methods:
-
-- `forceCancel(forceReject?: boolean)` — close the dialog as a cancellation. If `forceReject` is `true` the promise will be rejected even if the dialog `rejectOnCancel` config is `false`. Otherwise the usual `rejectOnCancel` behavior applies.
-- `forceAction(action: ModalAction)` — programmatically trigger a specific action (resolve/reject according to the action and dialog config).
-- `forceDefault()` — triggers the dialog's default action (first action marked with `isFocused`). Throws if no default action is defined.
+| Method | Signature | Description |
+|---|---|---|
+| `forceCancel` | `forceCancel(forceReject?: boolean = true): void` | Close the dialog as a cancellation. **Default:** `forceReject = true` (the promise will be rejected by default). If set to `false`, the dialog follows the dialog's `rejectOnCancel` setting. |
+| `forceAction` | `forceAction(action: ModalAction): void` | Programmatically trigger the specified action (resolves/rejects according to the action and dialog config). |
+| `forceDefault` | `forceDefault(): void` | Trigger the dialog's default action (first action marked with `isFocused`). Throws if no default is defined. |
 
-Example usage:
+Quick example:
 
 ```tsx
 const [requestDialog, getContext] = useHookDialog();
 
-// open a dialog and get the augmented promise
+const actions: ModalAction[][] = [[ { title: 'Cancel', isCancel: true }, { title: 'OK', value: true, isFocused: true } ]];
+
 const p = requestDialog({
   title: 'Confirm',
   content: 'Proceed?',
-  actions: [[
-    { title: 'Cancel', isCancel: true },
-    { title: 'OK', value: true, isFocused: true }
-  ]]
+  actions
 });
 
+// id available immediately
 console.log('dialog id:', p.id);
 
-// force the default action (same as clicking the focused action)
-p.context.forceDefault();
-
-// or cancel programmatically (forces reject by default)
+// cancel programmatically (rejects by default)
 p.context.forceCancel();
 
-// you can also use the helper returned from the hook
-const ctx = getContext(p.id);
-ctx.forceAction({ title: 'OK', value: true });
+// trigger a specific action by referencing the action in the array
+getContext(p.id).forceAction(actions[0][1]); // triggers `okAction`
+// or
+p.context.forceAction(actions[0][0]); // triggers `cancelAction`
 ```
 
-> Note: `forceDefault()` will throw if no action is marked with `isFocused`. Use `forceAction(...)` to explicitly specify which action to run.
-
+> Tip: use `forceAction(...)` when you want to trigger a specific action object. Use `forceDefault()` to trigger the focused/default action (if defined). The returned Promise still resolves with the action's `value` (or rejects when cancelled).
 #### Default Config Options
 
 | Property | Type | Default | Description |
@@ -263,6 +287,18 @@ Customize inline styles for all elements:
 
 ## Components
 
+### BaseDialogRenderer 🔧
+
+A convenience wrapper around the upstream `BaseModalRenderer` that accepts a `defaultConfig` prop allowing you to specify default `UseHookDialogConfig` for all dialogs created by `useHookDialog()`.
+
+```tsx
+import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
+
+<BaseDialogRenderer defaultConfig={{ showCloseButton: false, backdropCancel: false }} />
+```
+
+> Note: `BaseModalRenderer` from `@rokku-x/react-hook-modal` can still be used directly if you prefer — this wrapper only adds `defaultConfig` convenience.
+
 ### Backdrop
 
 Overlay component that wraps dialog windows.
@@ -776,10 +812,10 @@ Custom styles for each variant type.
 
 ## Bundle Size
 
-- ESM: ~4.06 kB gzipped (13.48 kB raw)
-- CJS: ~3.48 kB gzipped (9.21 kB raw)
+- ESM : ~6.69 kB gzipped (13.10 kB raw)
+- CJS : ~7.35 kB gzipped (14.14 kB raw)
 
-Measured with Vite build for v0.0.1.
+Measured with Vite build for the current branch.
 
 ## License
 

package/dist/README.md

@@ -1,38 +1,46 @@
 # react-hook-dialog
 
-[![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml)
+[![CI](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml/badge.svg)](https://github.com/rokku-x/react-hook-dialog/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![license](https://img.shields.io/npm/l/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) [![downloads](https://img.shields.io/npm/dm/@rokku-x/react-hook-dialog.svg)](https://www.npmjs.com/package/@rokku-x/react-hook-dialog) ![TS](https://img.shields.io/badge/TS-%E2%9C%93-blue)
 
-A powerful and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
+A lightweight, powerful, and flexible React dialog hook library for confirmation dialogs, alerts, and modals. Built on top of `@rokku-x/react-hook-modal` with a focus on dialog-specific features like action buttons, variants, and customizable styling.
 
 ## Features
 
+- ♿ **Accessibility Focused** - Keyboard navigation and ARIA support
+- 🔄 **Asynchronous** - Async/await friendly dialog results
 - 🎯 **Hook-based API** - Simple and intuitive `useHookDialog()` hook
 - 🎨 **Rich Variants** - 7 button variants (primary, secondary, danger, success, warning, info, neutral)
-- 🧩 **Modular Components** - Composed from reusable Backdrop and DialogWindow components
 - 📝 **Dialog Actions** - Flexible action button system with left/right positioning
 - 💅 **Full Customization** - Injectable className and styles at every level
 - ⌨️ **Rich Configuration** - Default configs with per-call overrides
-- 🎁 **Zero Dependencies** - Only requires React, Zustand, and @rokku-x/react-hook-modal
 - 📱 **TypeScript Support** - Full type safety out of the box
-- ♿ **Backdrop Control** - Configurable backdrop click behavior
+- 🧑‍🤝‍🧑 **Multiple Dialogs** - Support for multiple simultaneous dialogs
+- 🛠️ **Programmatic Control** - Force actions and cancellations via dialog context
+- 🖼️ **Rich Content Support** - Accepts React nodes for titles and content
+- 📦 **Lightweight** - Minimal bundle size for fast load times
 
 ## Installation
 
 ```bash
 npm install @rokku-x/react-hook-dialog
-```
-
-or with yarn:
-
-```bash
+# or
+bun add @rokku-x/react-hook-dialog
+# or
 yarn add @rokku-x/react-hook-dialog
+# or
+pnpm add @rokku-x/react-hook-dialog
 ```
 
 ## Quick Start
 
-### 1. Setup BaseModalRenderer
+### 1. Setup BaseModalRenderer or BaseDialogRenderer
+
+You can either use the upstream `BaseModalRenderer` directly (from `@rokku-x/react-hook-modal`) or use the convenience wrapper `BaseDialogRenderer` provided by this package.
 
-First, add the `BaseModalRenderer` at the root of your application (from `@rokku-x/react-hook-modal`):
+- `BaseModalRenderer` (upstream): mount this at the root to render modal instances.
+- `BaseDialogRenderer` (this package): a thin wrapper around `BaseModalRenderer` that lets you pass a `defaultConfig` prop to set default dialog options for all dialogs created by `useHookDialog()`.
+
+Use `BaseModalRenderer` directly:
 
 ```tsx
 import { BaseModalRenderer } from '@rokku-x/react-hook-modal';
@@ -47,6 +55,23 @@ function App() {
 }
 ```
 
+Or use the wrapper `BaseDialogRenderer` from this package to set defaults:
+
+```tsx
+import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
+
+function App() {
+  return (
+    <>
+      <YourComponents />
+      <BaseDialogRenderer defaultConfig={{ showCloseButton: false, backdropCancel: false }} />
+    </>
+  );
+}
+```
+
+Either component is fine — `BaseDialogRenderer` simply sets the dialog defaults for you so consumers of `useHookDialog()` don't have to provide them on each call.
+
 ### 2. Use useHookDialog Hook
 
 ```tsx
@@ -91,63 +116,62 @@ useHookDialog(defaultConfig?: UseHookDialogConfig)
 #### Returns
 
 ```typescript
-[requestDialog]
+[requestDialog, getContext]
 ```
 
 | Return Value | Type | Description |
 |---|---|---|
-| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Function to open a dialog and get user response. `RequestDialogReturnType<T>` is defined as `Promise<T> & { id: string; context: DialogInstanceContext }` which means the native Promise resolves with `T` while the *returned* value exposes `id` and `context` for programmatic control. |
+| `requestDialog` | `(config: ConfirmConfig) => RequestDialogReturnType<ValidValue>` | Open a dialog and receive a result. The return value is an **augmented Promise** (see `RequestDialogReturnType<T>`). |
+| `getContext` | `(id: string) => DialogInstanceContext` | Retrieve the runtime context for an open dialog by its `id` (useful if you only have the `id`). |
 
 ```typescript
-// Convenience alias shown in the library
+// Augmented promise returned by `requestDialog`
 type RequestDialogReturnType<T> = Promise<T> & { id: string; context: DialogInstanceContext };
 ```
 
+> Important: awaiting the returned Promise resolves with the dialog result (`T`). The `id` and `context` properties are available immediately after calling `requestDialog(...)`, allowing programmatic control while the dialog is open.
+
 ### Dialog Context & Force Functions ✅
 
-The Promise returned from `requestDialog(...)` is augmented with:
+The augmented Promise exposes two helpers:
 
 - `id: string` — unique identifier for the dialog instance
-- `context: DialogInstanceContext` — helper methods to programmatically control the dialog instance
+- `context: DialogInstanceContext` — runtime control helpers
 
-You can access the context either directly from the returned Promise (`promise.context`) or via the second value returned from the hook (`getContext(id)`).
+`DialogInstanceContext` methods:
 
-Dialog context methods:
-
-- `forceCancel(forceReject?: boolean)` — close the dialog as a cancellation. If `forceReject` is `true` the promise will be rejected even if the dialog `rejectOnCancel` config is `false`. Otherwise the usual `rejectOnCancel` behavior applies.
-- `forceAction(action: ModalAction)` — programmatically trigger a specific action (resolve/reject according to the action and dialog config).
-- `forceDefault()` — triggers the dialog's default action (first action marked with `isFocused`). Throws if no default action is defined.
+| Method | Signature | Description |
+|---|---|---|
+| `forceCancel` | `forceCancel(forceReject?: boolean = true): void` | Close the dialog as a cancellation. **Default:** `forceReject = true` (the promise will be rejected by default). If set to `false`, the dialog follows the dialog's `rejectOnCancel` setting. |
+| `forceAction` | `forceAction(action: ModalAction): void` | Programmatically trigger the specified action (resolves/rejects according to the action and dialog config). |
+| `forceDefault` | `forceDefault(): void` | Trigger the dialog's default action (first action marked with `isFocused`). Throws if no default is defined. |
 
-Example usage:
+Quick example:
 
 ```tsx
 const [requestDialog, getContext] = useHookDialog();
 
-// open a dialog and get the augmented promise
+const actions: ModalAction[][] = [[ { title: 'Cancel', isCancel: true }, { title: 'OK', value: true, isFocused: true } ]];
+
 const p = requestDialog({
   title: 'Confirm',
   content: 'Proceed?',
-  actions: [[
-    { title: 'Cancel', isCancel: true },
-    { title: 'OK', value: true, isFocused: true }
-  ]]
+  actions
 });
 
+// id available immediately
 console.log('dialog id:', p.id);
 
-// force the default action (same as clicking the focused action)
-p.context.forceDefault();
-
-// or cancel programmatically (forces reject by default)
+// cancel programmatically (rejects by default)
 p.context.forceCancel();
 
-// you can also use the helper returned from the hook
-const ctx = getContext(p.id);
-ctx.forceAction({ title: 'OK', value: true });
+// trigger a specific action by referencing the action in the array
+getContext(p.id).forceAction(actions[0][1]); // triggers `okAction`
+// or
+p.context.forceAction(actions[0][0]); // triggers `cancelAction`
 ```
 
-> Note: `forceDefault()` will throw if no action is marked with `isFocused`. Use `forceAction(...)` to explicitly specify which action to run.
-
+> Tip: use `forceAction(...)` when you want to trigger a specific action object. Use `forceDefault()` to trigger the focused/default action (if defined). The returned Promise still resolves with the action's `value` (or rejects when cancelled).
 #### Default Config Options
 
 | Property | Type | Default | Description |
@@ -263,6 +287,18 @@ Customize inline styles for all elements:
 
 ## Components
 
+### BaseDialogRenderer 🔧
+
+A convenience wrapper around the upstream `BaseModalRenderer` that accepts a `defaultConfig` prop allowing you to specify default `UseHookDialogConfig` for all dialogs created by `useHookDialog()`.
+
+```tsx
+import { BaseDialogRenderer } from '@rokku-x/react-hook-dialog';
+
+<BaseDialogRenderer defaultConfig={{ showCloseButton: false, backdropCancel: false }} />
+```
+
+> Note: `BaseModalRenderer` from `@rokku-x/react-hook-modal` can still be used directly if you prefer — this wrapper only adds `defaultConfig` convenience.
+
 ### Backdrop
 
 Overlay component that wraps dialog windows.
@@ -776,10 +812,10 @@ Custom styles for each variant type.
 
 ## Bundle Size
 
-- ESM: ~4.06 kB gzipped (13.48 kB raw)
-- CJS: ~3.48 kB gzipped (9.21 kB raw)
+- ESM : ~6.69 kB gzipped (13.10 kB raw)
+- CJS : ~7.35 kB gzipped (14.14 kB raw)
 
-Measured with Vite build for v0.0.1.
+Measured with Vite build for the current branch.
 
 ## License
 

package/dist/components/BaseDialogRenderer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../store/dialog.cjs.js"),t=require("@rokku-x/react-hook-modal"),o=require("react");exports.default=function({defaultConfig:u,...s}){const{setDefaultConfig:a}=r.default();return o.useEffect(()=>{a(u||{})},[u]),e.jsx(t.BaseModalRenderer,{...s})};

package/dist/components/BaseDialogRenderer.d.ts

@@ -0,0 +1,13 @@
+import { UseHookDialogConfig } from '../types';
+import { ModalWindowProps } from '@rokku-x/react-hook-modal';
+/**
+ * Wrapper component around the BaseModalRenderer to set default dialog configuration.
+ * @param props - Component props
+ * @param props.defaultConfig - Default configuration applied to all dialogs rendered by this component
+ * @param rest - Other props passed to BaseModalRenderer
+ *
+ * @internal
+ */
+export default function BaseDialogRenderer({ defaultConfig, ...rest }: ModalWindowProps & {
+    defaultConfig?: UseHookDialogConfig;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/BaseDialogRenderer.esm.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import r from"../store/dialog.esm.js";import{BaseModalRenderer as t}from"@rokku-x/react-hook-modal";import{useEffect as e}from"react";function m({defaultConfig:m,...f}){const{setDefaultConfig:a}=r();return e(()=>{a(m||{})},[m]),/* @__PURE__ */o(t,{...f})}export{m as default};

package/dist/components/ModalWindow.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../constants/theme.cjs.js"),o=require("../utils/utils.cjs.js"),n=require("@rokku-x/react-hook-modal"),i=require("react"),a=n.ModalWindow;exports.default=function({modalWindowId:s,handleAction:l,handleClose:r,config:c}){const{actions:u=[],title:d,backdropCancel:f,showCloseButton:m,classNames:p={},styles:h={},variantStyles:g={}}=c;let{content:y}=c;const b=(u.length?u:[[{title:"OK",variant:"primary"}]]).filter(e=>e&&e.length),x={...t.baseVariantStyles,...g},k=i.useRef(null),v=i.useRef(null),j=i.useRef(null);return i.useEffect(()=>{const e=k.current;if(!e)return;const t=document.activeElement;if(v.current)v.current.focus();else{const t=e.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");t?t.focus():(e.setAttribute("tabindex","-1"),e.focus())}const o=t=>{if("Escape"===t.key)t.stopPropagation(),r(s);else if("Tab"===t.key){const o=Array.from(e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void t.preventDefault();const n=o[0],i=o[o.length-1];t.shiftKey?document.activeElement===n&&(t.preventDefault(),i.focus()):document.activeElement===i&&(t.preventDefault(),n.focus())}};return e.addEventListener("keydown",o),()=>{e.removeEventListener("keydown",o),t&&t.focus&&t.focus()}},[r,s]),o.IsForm(y)&&(y=i.cloneElement(y,{ref:j})),e.jsx(n.ModalBackdrop,{onClick:()=>f&&r(s),className:p.backdrop||"",style:h.backdrop,children:e.jsxs(a,{ref:k,role:"dialog","aria-modal":"true","aria-labelledby":d?`${s}-title`:void 0,className:p.dialog||"",style:h.dialog,children:[m&&e.jsx("button",{type:"button",className:`hook-dialog-close-button ${p.closeButton||""}`,"aria-label":"Close",onClick:()=>r(s),style:{position:"absolute",top:0,right:0,transform:"translate(75%, -75%)",width:32,height:32,background:"none",border:"none",fontSize:21,cursor:"pointer",lineHeight:1,color:"#555",...h.closeButton},children:"×"}),d&&e.jsx("h3",{id:`${s}-title`,className:`hook-dialog-title ${p.title||""}`,style:{margin:"0 0 15px",fontSize:20,...h.title},children:d}),y&&e.jsx("div",{className:`hook-dialog-content ${p.content||""}`,style:{marginBottom:15,color:"#555",...h.content},children:y}),e.jsx("div",{className:`hook-dialog-actions ${p.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...h.actions},children:b.map((t,n)=>{const i=t.filter(e=>e.isOnLeft),a=t.filter(e=>!e.isOnLeft),r=(t,n)=>{const i=x[t.variant||"secondary"]||x.secondary;return e.jsx("button",{ref:e=>{t.isFocused&&e&&(v.current=e)},"data-action-focused":t.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${t.variant||"secondary"} ${p.actionButton||""} ${t.className||""}`,onClick:e=>{try{t.onClick?.(e,t)}catch{}return t.isSubmit&&c.isReturnSubmit&&j.current?l(s,t,o.FormDataToObject(new FormData(j.current))):(t.isSubmit&&j.current?.requestSubmit(),t.noActionReturn?e.stopPropagation():void l(s,t))},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...i,...h.actionButton,...t.style||{}},children:t.title},`${t.title}-${n}`)};return e.jsxs("div",{className:`hook-dialog-actions-row ${p.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...h.actionsRow},children:[e.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:i.map((e,t)=>r(e,t))}),e.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:a.map((e,t)=>r(e,t))})]},n)})})]})})};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../constants/theme.cjs.js"),o=require("../utils/utils.cjs.js"),n=require("@rokku-x/react-hook-modal"),s=require("react");;/* empty css                     */const a=n.ModalWindow;exports.default=function({modalWindowId:i,handleAction:l,handleClose:r,config:c}){const{actions:u=[],title:d,backdropCancel:f,showCloseButton:m,classNames:h={},styles:b={},variantStyles:y={}}=c;let{content:k}=c;const v=(u.length?u:[[{title:"OK",variant:"primary"}]]).filter(e=>e&&e.length),g={...t.baseVariantStyles,...y},p=s.useRef(null),x=s.useRef(null),j=s.useRef(null);return s.useEffect(()=>{const e=p.current;if(!e)return;const t=document.activeElement;if(x.current)x.current.focus();else{const t=e.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");t?t.focus():(e.setAttribute("tabindex","-1"),e.focus())}const o=t=>{if("Escape"===t.key)t.stopPropagation(),r(i);else if("Tab"===t.key){const o=Array.from(e.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void t.preventDefault();const n=o[0],s=o[o.length-1];t.shiftKey?document.activeElement===n&&(t.preventDefault(),s.focus()):document.activeElement===s&&(t.preventDefault(),n.focus())}};return e.addEventListener("keydown",o),()=>{e.removeEventListener("keydown",o),t&&t.focus&&t.focus()}},[r,i]),o.IsForm(k)&&(k=s.cloneElement(k,{ref:j})),e.jsx(n.ModalBackdrop,{onClick:()=>f&&r(i),className:h.backdrop||"",style:b.backdrop,children:e.jsxs(a,{ref:p,role:"dialog","aria-modal":"true","aria-labelledby":d?`${i}-title`:void 0,className:h.dialog||"",style:b.dialog,children:[m&&e.jsx("button",{type:"button",className:`hook-dialog-close-button ${h.closeButton||""}`,"aria-label":"Close",onClick:()=>r(i),style:b.closeButton,children:"×"}),d&&e.jsx("h3",{id:`${i}-title`,className:`hook-dialog-title ${h.title||""}`,style:b.title,children:d}),k&&e.jsx("div",{className:`hook-dialog-content ${h.content||""}`,style:b.content,children:k}),e.jsx("div",{className:`hook-dialog-actions ${h.actions||""}`,style:b.actions,children:v.map((t,n)=>{const s=t.filter(e=>e.isOnLeft),a=t.filter(e=>!e.isOnLeft),r=(t,n)=>{const s=g[t.variant||"secondary"]||g.secondary;return e.jsx("button",{ref:e=>{t.isFocused&&e&&(x.current=e)},"data-action-focused":t.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${t.variant||"secondary"} ${h.actionButton||""} ${t.className||""}`,onClick:e=>{try{t.onClick?.(e,t)}catch{}return t.isSubmit&&c.isReturnSubmit&&j.current?l(i,t,o.FormDataToObject(new FormData(j.current))):(t.isSubmit&&j.current?.requestSubmit(),t.noActionReturn?e.stopPropagation():void l(i,t))},style:{...s,...b.actionButton,...t.style||{}},children:t.title},`${t.title}-${n}`)};return e.jsxs("div",{className:`hook-dialog-actions-row ${h.actionsRow||""}`,style:b.actionsRow,children:[e.jsx("div",{className:"hook-dialog-actions-left",children:s.map((e,t)=>r(e,t))}),e.jsx("div",{className:"hook-dialog-actions-right",children:a.map((e,t)=>r(e,t))})]},n)})})]})})};

package/dist/components/ModalWindow.esm.js

@@ -1,6 +1,6 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{baseVariantStyles as o}from"../constants/theme.esm.js";import{IsForm as n,FormDataToObject as i}from"../utils/utils.esm.js";import{ModalBackdrop as a,ModalWindow as l}from"@rokku-x/react-hook-modal";import r,{useRef as s,useEffect as c}from"react";const d=l;function u({modalWindowId:l,handleAction:u,handleClose:m,config:f}){const{actions:p=[],title:h,backdropCancel:g,showCloseButton:y,classNames:b={},styles:k={},variantStyles:v={}}=f;let{content:x}=f;const N=(p.length?p:[[{title:"OK",variant:"primary"}]]).filter(t=>t&&t.length),$={...o,...v},w=s(null),S=s(null),C=s(null);return c(()=>{const t=w.current;if(!t)return;const e=document.activeElement;if(S.current)S.current.focus();else{const e=t.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");e?e.focus():(t.setAttribute("tabindex","-1"),t.focus())}const o=e=>{if("Escape"===e.key)e.stopPropagation(),m(l);else if("Tab"===e.key){const o=Array.from(t.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void e.preventDefault();const n=o[0],i=o[o.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),n.focus())}};return t.addEventListener("keydown",o),()=>{t.removeEventListener("keydown",o),e&&e.focus&&e.focus()}},[m,l]),n(x)&&(x=r.cloneElement(x,{ref:C})),/* @__PURE__ */t(a,{onClick:()=>g&&m(l),className:b.backdrop||"",style:k.backdrop,children:/* @__PURE__ */e(d,{ref:w,role:"dialog","aria-modal":"true","aria-labelledby":h?`${l}-title`:void 0,className:b.dialog||"",style:k.dialog,children:[y&&/* @__PURE__ */t("button",{type:"button",className:`hook-dialog-close-button ${b.closeButton||""}`,"aria-label":"Close",onClick:()=>m(l),style:{position:"absolute",top:0,right:0,transform:"translate(75%, -75%)",width:32,height:32,background:"none",border:"none",fontSize:21,cursor:"pointer",lineHeight:1,color:"#555",...k.closeButton},children:"×"}),h&&/* @__PURE__ */t("h3",{id:`${l}-title`,className:`hook-dialog-title ${b.title||""}`,style:{margin:"0 0 15px",fontSize:20,...k.title},children:h}),x&&/* @__PURE__ */t("div",{className:`hook-dialog-content ${b.content||""}`,style:{marginBottom:15,color:"#555",...k.content},children:x}),
-/* @__PURE__ */t("div",{className:`hook-dialog-actions ${b.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...k.actions},children:N.map((o,n)=>{const a=o.filter(t=>t.isOnLeft),r=o.filter(t=>!t.isOnLeft),s=(e,o)=>{const n=$[e.variant||"secondary"]||$.secondary;/* @__PURE__ */
-return t("button",{ref:t=>{e.isFocused&&t&&(S.current=t)},"data-action-focused":e.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${e.variant||"secondary"} ${b.actionButton||""} ${e.className||""}`,onClick:t=>{try{e.onClick?.(t,e)}catch{}return e.isSubmit&&f.isReturnSubmit&&C.current?u(l,e,i(new FormData(C.current))):(e.isSubmit&&C.current?.requestSubmit(),e.noActionReturn?t.stopPropagation():void u(l,e))},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...n,...k.actionButton,...e.style||{}},children:e.title},`${e.title}-${o}`)};/* @__PURE__ */
-return e("div",{className:`hook-dialog-actions-row ${b.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...k.actionsRow},children:[
-/* @__PURE__ */t("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:a.map((t,e)=>s(t,e))}),
-/* @__PURE__ */t("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:r.map((t,e)=>s(t,e))})]},n)})})]})})}export{u as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{baseVariantStyles as o}from"../constants/theme.esm.js";import{IsForm as n,FormDataToObject as a}from"../utils/utils.esm.js";import{ModalBackdrop as i,ModalWindow as l}from"@rokku-x/react-hook-modal";import s,{useRef as r,useEffect as c}from"react";/* empty css                   */const d=l;function u({modalWindowId:l,handleAction:u,handleClose:m,config:f}){const{actions:h=[],title:y,backdropCancel:p,showCloseButton:b,classNames:k={},styles:v={},variantStyles:g={}}=f;let{content:N}=f;const $=(h.length?h:[[{title:"OK",variant:"primary"}]]).filter(t=>t&&t.length),w={...o,...g},x=r(null),C=r(null),E=r(null);return c(()=>{const t=x.current;if(!t)return;const e=document.activeElement;if(C.current)C.current.focus();else{const e=t.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");e?e.focus():(t.setAttribute("tabindex","-1"),t.focus())}const o=e=>{if("Escape"===e.key)e.stopPropagation(),m(l);else if("Tab"===e.key){const o=Array.from(t.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(0===o.length)return void e.preventDefault();const n=o[0],a=o[o.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),a.focus()):document.activeElement===a&&(e.preventDefault(),n.focus())}};return t.addEventListener("keydown",o),()=>{t.removeEventListener("keydown",o),e&&e.focus&&e.focus()}},[m,l]),n(N)&&(N=s.cloneElement(N,{ref:E})),/* @__PURE__ */t(i,{onClick:()=>p&&m(l),className:k.backdrop||"",style:v.backdrop,children:/* @__PURE__ */e(d,{ref:x,role:"dialog","aria-modal":"true","aria-labelledby":y?`${l}-title`:void 0,className:k.dialog||"",style:v.dialog,children:[b&&/* @__PURE__ */t("button",{type:"button",className:`hook-dialog-close-button ${k.closeButton||""}`,"aria-label":"Close",onClick:()=>m(l),style:v.closeButton,children:"×"}),y&&/* @__PURE__ */t("h3",{id:`${l}-title`,className:`hook-dialog-title ${k.title||""}`,style:v.title,children:y}),N&&/* @__PURE__ */t("div",{className:`hook-dialog-content ${k.content||""}`,style:v.content,children:N}),
+/* @__PURE__ */t("div",{className:`hook-dialog-actions ${k.actions||""}`,style:v.actions,children:$.map((o,n)=>{const i=o.filter(t=>t.isOnLeft),s=o.filter(t=>!t.isOnLeft),r=(e,o)=>{const n=w[e.variant||"secondary"]||w.secondary;/* @__PURE__ */
+return t("button",{ref:t=>{e.isFocused&&t&&(C.current=t)},"data-action-focused":e.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${e.variant||"secondary"} ${k.actionButton||""} ${e.className||""}`,onClick:t=>{try{e.onClick?.(t,e)}catch{}return e.isSubmit&&f.isReturnSubmit&&E.current?u(l,e,a(new FormData(E.current))):(e.isSubmit&&E.current?.requestSubmit(),e.noActionReturn?t.stopPropagation():void u(l,e))},style:{...n,...v.actionButton,...e.style||{}},children:e.title},`${e.title}-${o}`)};/* @__PURE__ */
+return e("div",{className:`hook-dialog-actions-row ${k.actionsRow||""}`,style:v.actionsRow,children:[
+/* @__PURE__ */t("div",{className:"hook-dialog-actions-left",children:i.map((t,e)=>r(t,e))}),
+/* @__PURE__ */t("div",{className:"hook-dialog-actions-right",children:s.map((t,e)=>r(t,e))})]},n)})})]})})}export{u as default};

package/dist/hooks/useHookDialog.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@rokku-x/react-hook-modal"),s=require("../store/dialogStore.cjs.js");exports.default=function(o){const{addInstance:t,handleAction:a,handleClose:n,getContext:l}=s.useDialogStore();return e.useBaseModal(),[function(e){const s=Math.random().toString(36).substring(2,6);(e.actions?.flat().filter(e=>e.isFocused)||[]).length>1&&console.warn(`useHookDialog: Multiple actions are marked as isFocused in dialog "${s}". Only one action should be focused.`);const a=e.actions?.some(e=>e.some(e=>e.isCancel)),n=e.backdropCancel??o?.backdropCancel??!a,r={...o,...e,classNames:{...o?.classNames,...e.classNames},styles:{...o?.styles,...e.styles},variantStyles:{...o?.variantStyles,...e.variantStyles},backdropCancel:n},c=new Promise((e,o)=>{t({id:s,config:r,resolve:e,reject:o})});return Object.defineProperties(c,{context:{get:()=>l(s),enumerable:!0,configurable:!1},id:{get:()=>s,enumerable:!0,configurable:!1}}),c},l]};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),s=require("@rokku-x/react-hook-modal"),t=require("../components/ModalWindow.cjs.js"),a=require("../store/dialog.cjs.js");exports.default=function(o){const n=s.useBaseModal(),{addInstance:r,handleAction:l,handleClose:i,rendererDefaultConfig:d}=a.default();return[function(s){return new Promise((a,c)=>{const u=Math.random().toString(36).substring(2,6),m={...d,...o,...s,classNames:{...d?.classNames,...o?.classNames,...s.classNames},styles:{...d?.styles,...o?.styles,...s.styles},variantStyles:{...d?.variantStyles,...o?.variantStyles,...s.variantStyles}},f={id:u,config:m,resolve:a,reject:c};r(f),f.id=n.pushModal(u,e.createElement(t.default,{config:m,modalWindowId:u,handleClose:i,handleAction:l}))})}]};

package/dist/hooks/useHookDialog.d.ts

@@ -1,4 +1,4 @@
-import { UseHookDialogConfig, ValidValue, UseHookDialogReturnType } from '../types';
+import { FormDataObject, ConfirmConfig, UseHookDialogConfig, ValidValue } from '../types';
 /**
  * Hook for displaying confirmation dialogs and alerts.
  *
@@ -34,4 +34,9 @@ import { UseHookDialogConfig, ValidValue, UseHookDialogReturnType } from '../typ
  * });
  * ```
  */
-export default function useHookDialog<T = ValidValue>(defaultConfig?: UseHookDialogConfig): UseHookDialogReturnType<T>;
+export default function useHookDialog<T = ValidValue>(defaultConfig?: UseHookDialogConfig): {
+    <U = FormDataObject>(config: ConfirmConfig & {
+        isReturnSubmit: true;
+    }): Promise<U>;
+    <U = T>(config: ConfirmConfig): Promise<U>;
+}[];

package/dist/hooks/useHookDialog.esm.js

@@ -1 +1 @@
-import{useBaseModal as e}from"@rokku-x/react-hook-modal";import{useDialogStore as o}from"../store/dialogStore.esm.js";function s(s){const{addInstance:t,handleAction:a,handleClose:n,getContext:r}=o();return e(),[function(e){const o=Math.random().toString(36).substring(2,6);(e.actions?.flat().filter(e=>e.isFocused)||[]).length>1&&console.warn(`useHookDialog: Multiple actions are marked as isFocused in dialog "${o}". Only one action should be focused.`);const a=e.actions?.some(e=>e.some(e=>e.isCancel)),n=e.backdropCancel??s?.backdropCancel??!a,l={...s,...e,classNames:{...s?.classNames,...e.classNames},styles:{...s?.styles,...e.styles},variantStyles:{...s?.variantStyles,...e.variantStyles},backdropCancel:n},c=new Promise((e,s)=>{t({id:o,config:l,resolve:e,reject:s})});return Object.defineProperties(c,{context:{get:()=>r(o),enumerable:!0,configurable:!1},id:{get:()=>o,enumerable:!0,configurable:!1}}),c},r]}export{s as default};
+import e from"react";import{useBaseModal as s}from"@rokku-x/react-hook-modal";import t from"../components/ModalWindow.esm.js";import o from"../store/dialog.esm.js";function a(a){const n=s(),{addInstance:r,handleAction:l,handleClose:i,rendererDefaultConfig:m}=o();return[function(s){return new Promise((o,d)=>{const c=Math.random().toString(36).substring(2,6),f={...m,...a,...s,classNames:{...m?.classNames,...a?.classNames,...s.classNames},styles:{...m?.styles,...a?.styles,...s.styles},variantStyles:{...m?.variantStyles,...a?.variantStyles,...s.variantStyles}},u={id:c,config:f,resolve:o,reject:d};r(u),u.id=n.pushModal(c,e.createElement(t,{config:f,modalWindowId:c,handleClose:i,handleAction:l}))})}]}export{a as default};

package/dist/index.cjs.js

@@ -1 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rokku-x/react-hook-modal"),o=require("./hooks/useHookDialog.cjs.js");Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>e.BaseModalRenderer}),exports.useHookDialog=o.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rokku-x/react-hook-modal"),o=require("./components/BaseDialogRenderer.cjs.js"),r=require("./hooks/useHookDialog.cjs.js");Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>e.BaseModalRenderer}),exports.BaseDialogRenderer=o.default,exports.useHookDialog=r.default;
+
+if (typeof document !== 'undefined') { const style = document.createElement('style'); style.textContent = ".hook-dialog-close-button{position:absolute;top:0;right:0;transform:translate(75%,-75%);width:32px;height:32px;background:none;border:none;font-size:21px;cursor:pointer;line-height:1;color:#555}.hook-dialog-title{margin:0 0 15px;font-size:20px}.hook-dialog-content{margin-bottom:15px;color:#555}.hook-dialog-actions{display:flex;flex-direction:column;gap:10px;padding-top:15px}.hook-dialog-actions-row{display:flex;gap:8px;justify-content:space-between}.hook-dialog-actions-left,.hook-dialog-actions-right{display:flex;gap:8px}.hook-dialog-action-button{border:none;border-radius:15px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer}\n"; document.head.appendChild(style); }

package/dist/index.d.ts

@@ -36,12 +36,16 @@
  * ```
  */
 /**
- * Re-export of BaseModalRenderer from @rokku-x/react-hook-modal.
- * Must be mounted at the root of your application for dialogs to render.
+ * Re-exports of renderer components.
+ * - `BaseModalRenderer` is the upstream renderer from `@rokku-x/react-hook-modal`.
+ * - `BaseDialogRenderer` is a small wrapper provided by this package that allows setting a `defaultConfig` prop.
+ * Both should be mounted at the root of your application for dialogs to render.
  */
 export { BaseModalRenderer } from '@rokku-x/react-hook-modal';
+export { default as BaseDialogRenderer } from './components/BaseDialogRenderer';
 /**
  * Main hook for displaying confirmation dialogs and alerts.
  * @see {@link useHookDialog}
  */
 export { default as useHookDialog } from './hooks/useHookDialog';
+export type { UseHookDialogConfig, ConfirmConfig, ModalAction, RequestDialogReturnType, DialogInstanceContext, RequestDialog, UseHookDialogReturnType } from './types';

package/dist/index.esm.js

@@ -1 +1,3 @@
-import{BaseModalRenderer as o}from"@rokku-x/react-hook-modal";import{default as a}from"./hooks/useHookDialog.esm.js";export{o as BaseModalRenderer,a as useHookDialog};
+import{BaseModalRenderer as o}from"@rokku-x/react-hook-modal";import{default as e}from"./components/BaseDialogRenderer.esm.js";import{default as a}from"./hooks/useHookDialog.esm.js";export{e as BaseDialogRenderer,o as BaseModalRenderer,a as useHookDialog};
+
+if (typeof document !== 'undefined') { const style = document.createElement('style'); style.textContent = ".hook-dialog-close-button{position:absolute;top:0;right:0;transform:translate(75%,-75%);width:32px;height:32px;background:none;border:none;font-size:21px;cursor:pointer;line-height:1;color:#555}.hook-dialog-title{margin:0 0 15px;font-size:20px}.hook-dialog-content{margin-bottom:15px;color:#555}.hook-dialog-actions{display:flex;flex-direction:column;gap:10px;padding-top:15px}.hook-dialog-actions-row{display:flex;gap:8px;justify-content:space-between}.hook-dialog-actions-left,.hook-dialog-actions-right{display:flex;gap:8px}.hook-dialog-action-button{border:none;border-radius:15px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer}\n"; document.head.appendChild(style); }

package/dist/react-hook-dialog.css

@@ -0,0 +1 @@
+.hook-dialog-close-button{position:absolute;top:0;right:0;transform:translate(75%,-75%);width:32px;height:32px;background:none;border:none;font-size:21px;cursor:pointer;line-height:1;color:#555}.hook-dialog-title{margin:0 0 15px;font-size:20px}.hook-dialog-content{margin-bottom:15px;color:#555}.hook-dialog-actions{display:flex;flex-direction:column;gap:10px;padding-top:15px}.hook-dialog-actions-row{display:flex;gap:8px;justify-content:space-between}.hook-dialog-actions-left,.hook-dialog-actions-right{display:flex;gap:8px}.hook-dialog-action-button{border:none;border-radius:15px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer}

package/dist/store/dialog.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../components/ModalWindow.cjs.js"),n=require("@rokku-x/react-hook-modal"),t=require("react"),o=require("zustand").create((o,a)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{o(()=>({rendererDefaultConfig:e}))},addInstance:c=>{o(e=>({instances:[...e.instances,c]})),c.id=n.storeBaseModal.getState().actions.pushModal(c.id,t.createElement(e.default,{config:c.config,modalWindowId:c.id,handleClose:a().handleClose,handleAction:a().handleAction}))},removeInstance:e=>o(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,t=!1)=>{const o=a().getInstance(e);o&&(n.storeBaseModal.getState().actions.popModal(e),!1!==o.config.rejectOnCancel||t?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),a().removeInstance(e))},handleAction:(e,t)=>{const o=a().getInstance(e);o&&(n.storeBaseModal.getState().actions.popModal(e),t.isCancel&&!1!==o.config.rejectOnCancel?o.reject(t.value):o.resolve(t.value),a().removeInstance(e))},getContext:e=>{const n=a().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>a().handleClose(e,n),forceAction:n=>{a().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);a().handleAction(e,t)}}},getInstance:e=>a().instances.find(n=>n.id===e)}));exports.default=o;

package/dist/store/{dialogStore.d.ts → dialog.d.ts}

@@ -1,4 +1,4 @@
-import { ConfirmInstance, ModalAction, ValidValue } from '../types';
+import { ConfirmInstance, ModalAction, UseHookDialogConfig, ValidValue } from '../types';
 /**
  * Zustand store interface for managing dialog instances.
  * Maintains a centralized list of active dialog instances.
@@ -7,6 +7,10 @@ import { ConfirmInstance, ModalAction, ValidValue } from '../types';
 interface DialogStore<T = ValidValue> {
     /** Array of currently active dialog instances */
     instances: ConfirmInstance<T>[];
+    /** Default configuration applied to all dialogs */
+    rendererDefaultConfig: UseHookDialogConfig;
+    /** Set the default configuration for dialogs */
+    setDefaultConfig: (config: UseHookDialogConfig) => void;
     /** Add a new dialog instance to the store */
     addInstance: (instance: ConfirmInstance<T>) => void;
     /** Remove a dialog instance from the store by ID */
@@ -34,5 +38,5 @@ interface DialogStore<T = ValidValue> {
  * const { addInstance, removeInstance, getInstance } = useDialogStore();
  * ```
  */
-export declare const useDialogStore: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore<any>>>;
-export {};
+declare const storeDialog: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore<any>>>;
+export default storeDialog;

package/dist/store/dialog.esm.js

@@ -0,0 +1 @@
+import e from"../components/ModalWindow.esm.js";import{storeBaseModal as n}from"@rokku-x/react-hook-modal";import t from"react";import{create as o}from"zustand";const a=o((o,a)=>({instances:[],rendererDefaultConfig:{},setDefaultConfig:e=>{o(()=>({rendererDefaultConfig:e}))},addInstance:c=>{o(e=>({instances:[...e.instances,c]})),c.id=n.getState().actions.pushModal(c.id,t.createElement(e,{config:c.config,modalWindowId:c.id,handleClose:a().handleClose,handleAction:a().handleAction}))},removeInstance:e=>o(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,t=!1)=>{const o=a().getInstance(e);o&&(n.getState().actions.popModal(e),!1!==o.config.rejectOnCancel||t?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),a().removeInstance(e))},handleAction:(e,t)=>{const o=a().getInstance(e);o&&(n.getState().actions.popModal(e),t.isCancel&&!1!==o.config.rejectOnCancel?o.reject(t.value):o.resolve(t.value),a().removeInstance(e))},getContext:e=>{const n=a().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>a().handleClose(e,n),forceAction:n=>{a().handleAction(e,n)},forceDefault:()=>{const t=n.config.actions?.flat().find(e=>e.isFocused);if(!t)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);a().handleAction(e,t)}}},getInstance:e=>a().instances.find(n=>n.id===e)}));export{a as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-dialog",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "rokku-x",
   "repository": {
     "type": "git",
@@ -9,10 +9,10 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "peerDependencies": {
-    "@rokku-x/react-hook-modal": "^0.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "zustand": "^5.0.10"
+    "zustand": "^5.0.10",
+    "@rokku-x/react-hook-modal": "^0.9.4"
   },
   "exports": {
     ".": {
@@ -20,6 +20,8 @@
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
+    "./react-hook-dialog.css": "./dist/react-hook-dialog.css",
+    "./dist/react-hook-dialog.css": "./dist/react-hook-dialog.css",
     "./package.json": "./package.json"
   },
   "bugs": {
@@ -39,6 +41,7 @@
     "confirmation",
     "alert",
     "prompt",
+    "confirm",
     "hook",
     "typescript",
     "zustand",
@@ -50,7 +53,10 @@
     "react-modal"
   ],
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {

package/dist/store/dialogStore.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../components/ModalWindow.cjs.js"),n=require("@rokku-x/react-hook-modal"),o=require("react"),t=require("zustand"),a=n.useBaseModal(),c=t.create((n,t)=>({instances:[],addInstance:c=>{n(e=>({instances:[...e.instances,c]})),c.id=a.pushModal(c.id,o.createElement(e.default,{config:c.config,modalWindowId:c.id,handleClose:t().handleClose,handleAction:t().handleAction}))},removeInstance:e=>n(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,n=!1)=>{const o=t().getInstance(e);o&&(a.popModal(e),!1!==o.config.rejectOnCancel||n?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),t().removeInstance(e))},handleAction:(e,n)=>{const o=t().getInstance(e);o&&(a.popModal(e),n.isCancel&&!1!==o.config.rejectOnCancel?o.reject(n.value):o.resolve(n.value),t().removeInstance(e))},getContext:e=>{const n=t().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>t().handleClose(e,n),forceAction:n=>{t().handleAction(e,n)},forceDefault:()=>{const o=n.config.actions?.flat().find(e=>e.isFocused);if(!o)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);t().handleAction(e,o)}}},getInstance:e=>t().instances.find(n=>n.id===e)}));exports.useDialogStore=c;

package/dist/store/dialogStore.esm.js

@@ -1 +0,0 @@
-import e from"../components/ModalWindow.esm.js";import{useBaseModal as n}from"@rokku-x/react-hook-modal";import o from"react";import{create as t}from"zustand";const c=n(),a=t((n,t)=>({instances:[],addInstance:a=>{n(e=>({instances:[...e.instances,a]})),a.id=c.pushModal(a.id,o.createElement(e,{config:a.config,modalWindowId:a.id,handleClose:t().handleClose,handleAction:t().handleAction}))},removeInstance:e=>n(n=>({instances:n.instances.filter(n=>n.id!==e)})),handleClose:(e,n=!1)=>{const o=t().getInstance(e);o&&(c.popModal(e),!1!==o.config.rejectOnCancel||n?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),t().removeInstance(e))},handleAction:(e,n)=>{const o=t().getInstance(e);o&&(c.popModal(e),n.isCancel&&!1!==o.config.rejectOnCancel?o.reject(n.value):o.resolve(n.value),t().removeInstance(e))},getContext:e=>{const n=t().getInstance(e);if(!n)throw new Error(`Dialog instance with id "${e}" not found.`);return{id:n.id,config:n.config,forceCancel:(n=!0)=>t().handleClose(e,n),forceAction:n=>{t().handleAction(e,n)},forceDefault:()=>{const o=n.config.actions?.flat().find(e=>e.isFocused);if(!o)throw new Error(`No default action (isFocused) defined for dialog instance with id "${e}".`);t().handleAction(e,o)}}},getInstance:e=>t().instances.find(n=>n.id===e)}));export{a as useDialogStore};