@rokku-x/react-hook-dialog 0.0.1

package/README.md

@@ -0,0 +1,645 @@
+# react-hook-dialog
+
+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.
+
+## Features
+
+- 🎯 **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
+- 🧮 **Zustand State** - Centralized state management with Zustand
+- ⌨️ **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
+
+## Installation
+
+```bash
+npm install @rokku-x/react-hook-dialog
+```
+
+or with yarn:
+
+```bash
+yarn add @rokku-x/react-hook-dialog
+```
+
+## Quick Start
+
+### 1. Setup BaseModalRenderer
+
+First, add the `BaseModalRenderer` at the root of your application (from `@rokku-x/react-hook-modal`):
+
+```tsx
+import { BaseModalRenderer } from '@rokku-x/react-hook-modal';
+
+function App() {
+  return (
+    <>
+      <YourComponents />
+      <BaseModalRenderer />
+    </>
+  );
+}
+```
+
+### 2. Use useHookDialog Hook
+
+```tsx
+import { useHookDialog } from '@rokku-x/react-hook-dialog';
+
+function MyComponent() {
+  const [requestDialog] = useHookDialog();
+
+  const handleConfirm = async () => {
+    const result = await requestDialog({
+      title: 'Confirm Action',
+      content: 'Are you sure you want to proceed?',
+      actions: [[
+        { title: 'Cancel', isCancel: true },
+        { title: 'Confirm', variant: 'primary' }
+      ]]
+    });
+    
+    console.log('User chose:', result);
+  };
+
+  return <button onClick={handleConfirm}>Open Dialog</button>;
+}
+```
+
+## Bundle Size
+
+- ESM: ~4.06 kB gzipped (13.48 kB raw)
+- CJS: ~3.48 kB gzipped (9.21 kB raw)
+
+Measured with Vite build for v0.0.1.
+
+## API Reference
+
+### useHookDialog
+
+Main hook for displaying confirmation dialogs and alerts.
+
+#### Parameters
+
+```typescript
+useHookDialog(defaultConfig?: UseHookDialogConfig)
+```
+
+| Parameter | Type | Description |
+|---|---|---|
+| `defaultConfig` | `UseHookDialogConfig` | Optional default configuration applied to all dialogs |
+
+#### Returns
+
+```typescript
+[requestDialog]
+```
+
+| Return Value | Type | Description |
+|---|---|---|
+| `requestDialog` | `(config: ConfirmConfig) => Promise<ValidValue>` | Function to open a dialog and get user response |
+
+#### Default Config Options
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `backdropCancel` | `boolean` | `false` | Allow closing via backdrop click |
+| `rejectOnCancel` | `boolean` | `true` | Reject promise on cancel instead of resolving |
+| `defaultCancelValue` | `ValidValue` | `undefined` | Value to return/reject on cancel |
+| `showCloseButton` | `boolean` | `false` | Show X close button |
+| `classNames` | `DialogClassNames` | `undefined` | Custom CSS classes |
+| `styles` | `DialogStyles` | `undefined` | Custom inline styles |
+| `variantStyles` | `DialogVariantStyles` | `undefined` | Custom variant button styles |
+
+### ConfirmConfig
+
+Configuration for individual dialog calls.
+
+| Property | Type | Description |
+|---|---|---|
+| `title` | `React.ReactNode` | Dialog title (string or React element) |
+| `content` | `React.ReactNode` | Dialog content (string or React element) |
+| `actions` | `ModalAction[][]` | Array of action button rows |
+| `backdropCancel` | `boolean` | Allow closing via backdrop click |
+| `rejectOnCancel` | `boolean` | Reject promise on cancel |
+| `defaultCancelValue` | `ValidValue` | Value to return/reject on cancel |
+| `showCloseButton` | `boolean` | Show X close button |
+| `classNames` | `DialogClassNames` | Custom CSS classes for elements |
+| `styles` | `DialogStyles` | Custom inline styles for elements |
+| `variantStyles` | `DialogVariantStyles` | Custom variant button styles |
+
+### ModalAction
+
+Individual action button configuration.
+
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `title` | `React.ReactNode` | ✓ | Button label (string or React element) |
+| `value` | `ValidValue` | | Value to return when clicked |
+| `isCancel` | `boolean` | | Treat as cancel button (respects rejectOnCancel) |
+| `isOnLeft` | `boolean` | | Position button on left side of row |
+| `variant` | `ModalVariant` | | Visual style variant |
+| `className` | `string` | | Additional CSS class |
+| `style` | `React.CSSProperties` | | Custom inline styles |
+| `onClick` | `((event, action) => void) \| (() => void)` | | Click handler called before default handling |
+
+### ModalVariant
+
+Available button variants:
+
+```typescript
+type ModalVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'neutral';
+```
+
+| Variant | Color | Text Color |
+|---|---|---|
+| `primary` | Blue (#2563eb) | White |
+| `secondary` | Gray (#e5e7eb) | Black |
+| `danger` | Red (#dc2626) | White |
+| `success` | Green (#16a34a) | White |
+| `warning` | Amber (#f59e0b) | Black |
+| `info` | Sky (#0ea5e9) | White |
+| `neutral` | Gray (#6b7280) | White |
+
+### DialogClassNames
+
+Customize CSS classes for all elements:
+
+| Property | Type | Description |
+|---|---|---|
+| `backdrop` | `string` | Backdrop overlay |
+| `dialog` | `string` | Dialog container |
+| `closeButton` | `string` | Close button |
+| `title` | `string` | Title element |
+| `content` | `string` | Content container |
+| `actions` | `string` | Actions container |
+| `actionsRow` | `string` | Individual action row |
+| `actionButton` | `string` | Action button |
+
+### DialogStyles
+
+Customize inline styles for all elements:
+
+| Property | Type | Description |
+|---|---|---|
+| `backdrop` | `React.CSSProperties` | Backdrop overlay styles |
+| `dialog` | `React.CSSProperties` | Dialog container styles |
+| `closeButton` | `React.CSSProperties` | Close button styles |
+| `title` | `React.CSSProperties` | Title element styles |
+| `content` | `React.CSSProperties` | Content container styles |
+| `actions` | `React.CSSProperties` | Actions container styles |
+| `actionsRow` | `React.CSSProperties` | Action row styles |
+| `actionButton` | `React.CSSProperties` | Action button styles |
+
+## Components
+
+### Backdrop
+
+Overlay component that wraps dialog windows.
+
+```tsx
+<Backdrop 
+  onClick={() => handleClose()}
+  className="custom-backdrop"
+  style={{ backdropFilter: 'blur(5px)' }}
+>
+  {children}
+</Backdrop>
+```
+
+### DialogWindow
+
+Main dialog container component.
+
+```tsx
+<DialogWindow
+  className="custom-dialog"
+  style={{ backgroundColor: '#f5f5f5' }}
+>
+  {children}
+</DialogWindow>
+```
+
+## Examples
+
+### Example 1: Basic Confirmation Dialog
+
+```tsx
+import { useHookDialog } from '@rokku-x/react-hook-dialog';
+
+function DeleteConfirm() {
+  const [requestDialog] = useHookDialog();
+
+  const handleDelete = async () => {
+    const result = await requestDialog({
+      title: 'Delete Item?',
+      content: 'This action cannot be undone.',
+      actions: [[
+        { title: 'Cancel', isCancel: true, variant: 'secondary' },
+        { title: 'Delete', variant: 'danger', value: true }
+      ]]
+    });
+
+    if (result === true) {
+      console.log('Item deleted!');
+    }
+  };
+
+  return <button onClick={handleDelete}>Delete</button>;
+}
+```
+
+### Example 2: Multiple Action Rows
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+await requestDialog({
+  title: 'Choose Action',
+  content: 'What would you like to do?',
+  actions: [
+    [{ title: 'Back', isOnLeft: true, variant: 'secondary' }],
+    [
+      { title: 'Cancel', isCancel: true },
+      { title: 'Save', variant: 'primary' }
+    ]
+  ]
+});
+```
+
+### Example 3: Custom Styling
+
+```tsx
+const [requestDialog] = useHookDialog({
+  styles: {
+    dialog: { 
+      borderRadius: '20px',
+      backgroundColor: '#f9fafb'
+    },
+    actionButton: {
+      fontWeight: 'bold'
+    }
+  },
+  classNames: {
+    dialog: 'my-custom-dialog'
+  }
+});
+
+await requestDialog({
+  title: 'Styled Dialog',
+  content: 'This dialog has custom styles'
+});
+```
+
+### Example 4: Custom Button Variants
+
+```tsx
+const [requestDialog] = useHookDialog({
+  variantStyles: {
+    primary: {
+      backgroundColor: '#7c3aed',  // Purple
+      color: '#fff'
+    }
+  }
+});
+
+await requestDialog({
+  title: 'Custom Colors',
+  actions: [[
+    { title: 'Confirm', variant: 'primary' }
+  ]]
+});
+```
+
+### Example 5: Button Click Handlers
+
+```tsx
+await requestDialog({
+  title: 'Action Dialog',
+  actions: [[
+    {
+      title: 'Log to Console',
+      onClick: (e) => console.log('Button clicked!'),
+      variant: 'info'
+    },
+    {
+      title: 'Proceed',
+      variant: 'primary'
+    }
+  ]]
+});
+```
+
+### Example 6: Rich Content
+
+```tsx
+await requestDialog({
+  title: <span style={{ color: 'blue' }}>Custom <strong>Title</strong></span>,
+  content: (
+    <div>
+      <p>This dialog has rich content:</p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </ul>
+    </div>
+  ),
+  actions: [[
+    { title: 'OK', variant: 'primary' }
+  ]]
+});
+```
+
+### Example 7: Default Configuration
+
+```tsx
+const [requestDialog] = useHookDialog({
+  showCloseButton: false,
+  backdropCancel: false,
+  styles: {
+    dialog: { maxWidth: '500px' }
+  }
+});
+
+// All subsequent dialogs will use these defaults
+await requestDialog({
+  title: 'Will use defaults',
+  content: 'No close button, backdrop click disabled'
+});
+```
+
+### Example 8: Alert Dialog
+
+```tsx
+async function showAlert(message: string) {
+  const [requestDialog] = useHookDialog();
+  
+  await requestDialog({
+    title: 'Alert',
+    content: message,
+    actions: [[
+      { title: 'OK', variant: 'primary' }
+    ]]
+  });
+}
+
+showAlert('Operation completed successfully!');
+```
+
+### Example 9: Multiple Choice with Different Values
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleSaveOptions = async () => {
+  const result = await requestDialog({
+    title: 'Save Options',
+    content: 'How would you like to save?',
+    actions: [[
+      { title: 'Cancel', isCancel: true },
+      { title: 'Save Draft', variant: 'secondary', value: 'draft' },
+      { title: 'Publish', variant: 'primary', value: 'publish' }
+    ]]
+  });
+
+  if (result === 'draft') {
+    console.log('Saving as draft...');
+  } else if (result === 'publish') {
+    console.log('Publishing...');
+  } else {
+    console.log('Cancelled');
+  }
+};
+```
+
+### Example 10: Numeric Rating Dialog
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleRating = async () => {
+  const rating = await requestDialog({
+    title: 'Rate Your Experience',
+    content: 'How would you rate our service?',
+    actions: [
+      [
+        { title: '1 Star', variant: 'danger', value: 1 },
+        { title: '2 Stars', variant: 'warning', value: 2 },
+        { title: '3 Stars', variant: 'neutral', value: 3 }
+      ],
+      [
+        { title: '4 Stars', variant: 'info', value: 4 },
+        { title: '5 Stars', variant: 'success', value: 5 }
+      ]
+    ],
+    showCloseButton: false,
+    backdropCancel: false
+  });
+
+  console.log(`User rated: ${rating} stars`);
+  // Send rating to API
+};
+```
+
+### Example 11: Conditional Actions Based on Result
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleFileOperation = async () => {
+  const action = await requestDialog({
+    title: 'File Actions',
+    content: 'What would you like to do with this file?',
+    actions: [[
+      { title: 'Download', variant: 'info', value: 'download' },
+      { title: 'Share', variant: 'primary', value: 'share' },
+      { title: 'Delete', variant: 'danger', value: 'delete', isOnLeft: true }
+    ]]
+  });
+
+  switch (action) {
+    case 'download':
+      // Download file logic
+      window.location.href = '/api/download/file.pdf';
+      break;
+    case 'share':
+      // Open share dialog
+      await requestDialog({
+        title: 'Share File',
+        content: 'File link copied to clipboard!',
+        actions: [[{ title: 'OK', variant: 'primary' }]]
+      });
+      break;
+    case 'delete':
+      // Confirm deletion
+      const confirm = await requestDialog({
+        title: 'Confirm Delete',
+        content: 'Are you sure? This cannot be undone.',
+        actions: [[
+          { title: 'Cancel', isCancel: true },
+          { title: 'Delete', variant: 'danger', value: true }
+        ]]
+      });
+      if (confirm) {
+        console.log('File deleted');
+      }
+      break;
+  }
+};
+```
+
+### Example 12: Handle Cancel vs Reject
+
+```tsx
+const [requestDialog] = useHookDialog({
+  rejectOnCancel: true  // Reject promise on cancel
+});
+
+const handleWithErrorHandling = async () => {
+  try {
+    const result = await requestDialog({
+      title: 'Important Action',
+      content: 'This requires your confirmation.',
+      actions: [[
+        { title: 'Cancel', isCancel: true },
+        { title: 'Proceed', variant: 'primary', value: 'proceed' }
+      ]]
+    });
+
+    if (result === 'proceed') {
+      console.log('User proceeded');
+      // Perform action
+    }
+  } catch (error) {
+    console.log('User cancelled or closed dialog');
+    // Handle cancellation
+  }
+};
+```
+
+### Example 13: Form Submission with Validation
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleFormSubmit = async (formData: any) => {
+  const action = await requestDialog({
+    title: 'Review Changes',
+    content: (
+      <div>
+        <p>You are about to submit the following changes:</p>
+        <ul>
+          <li>Name: {formData.name}</li>
+          <li>Email: {formData.email}</li>
+        </ul>
+      </div>
+    ),
+    actions: [[
+      { title: 'Edit', variant: 'secondary', value: 'edit' },
+      { title: 'Cancel', isCancel: true },
+      { title: 'Submit', variant: 'success', value: 'submit' }
+    ]]
+  });
+
+  if (action === 'submit') {
+    // Submit form
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: JSON.stringify(formData)
+    });
+    
+    await requestDialog({
+      title: 'Success',
+      content: 'Your changes have been saved!',
+      actions: [[{ title: 'OK', variant: 'success' }]]
+    });
+  } else if (action === 'edit') {
+    // Return to form
+    console.log('User wants to edit');
+  }
+};
+```
+
+### Example 14: Boolean Result with Custom Values
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+const handleLogout = async () => {
+  const shouldLogout = await requestDialog({
+    title: 'Confirm Logout',
+    content: 'Are you sure you want to log out?',
+    actions: [[
+      { title: 'Stay Logged In', variant: 'secondary', value: false },
+      { title: 'Log Out', variant: 'danger', value: true }
+    ]]
+  });
+
+  if (shouldLogout) {
+    // Perform logout
+    sessionStorage.clear();
+    window.location.href = '/login';
+  }
+};
+```
+
+## Best Practices
+
+1. **Mount `BaseModalRenderer` at root level** - Required for modals to render
+2. **Use default configs for consistency** - Set common styles/behaviors once
+3. **Provide meaningful button labels** - Users should know what each button does
+4. **Use appropriate variants** - Use `danger` for destructive actions, `success` for confirmations
+5. **Keep content concise** - Dialogs should be focused and brief
+6. **Handle both resolve and reject** - Account for cancellation scenarios
+7. **Use `isOnLeft` for secondary actions** - Helps with visual hierarchy
+8. **Customize responsibly** - Maintain accessibility and usability standards
+
+## Types
+
+### ValidValue
+
+```typescript
+type ValidValue = string | number | boolean | undefined;
+```
+
+The type of value returned from dialog actions.
+
+### DialogVariantStyles
+
+```typescript
+type DialogVariantStyles = Partial<Record<ModalVariant, React.CSSProperties>>;
+```
+
+Custom styles for each variant type.
+
+## Accessibility
+
+- Backdrop close can be enabled with `backdropCancel: true`
+- Close button can be shown with `showCloseButton: true`
+- All buttons are keyboard accessible
+- ARIA labels provided for interactive elements
+- Supports custom ARIA attributes via className injection
+
+## Troubleshooting
+
+### Dialog not appearing
+- Ensure `BaseModalRenderer` is mounted at root level
+- Check that `useHookDialog()` is called within the component tree
+
+### Styles not applying
+- Verify className/style props are passed to `ConfirmConfig`
+- Check CSS specificity - inline styles take precedence
+- Use browser dev tools to inspect applied styles
+
+### Promise never resolves
+- Ensure action buttons have appropriate `value` or are configured as cancel buttons
+- Check that action click handlers don't prevent default behavior
+
+## License
+
+MIT

package/dist/components/ModalWindow.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Main modal window component that renders the dialog UI.
+ *
+ * Displays the title, content, action buttons, and optional close button.
+ * Action buttons are organized into rows and can be positioned left or right.
+ *
+ * @param props - Component props
+ * @param props.modalWindowId - Unique identifier for this modal instance
+ * @param props.handleAction - Callback when an action button is clicked
+ * @param props.handleClose - Callback when the dialog should close
+ * @param props.config - Dialog configuration options
+ *
+ * @internal
+ */
+export default function ModalWindow({ modalWindowId, handleAction, handleClose, config }: ModalWindowProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useHookDialog.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Hook for displaying confirmation dialogs and alerts.
+ *
+ * Returns a function to request a dialog and receive the user's response as a Promise.
+ * Dialogs can be customized with titles, content, action buttons, and styling.
+ *
+ * @param defaultConfig - Optional default configuration applied to all dialogs created by this hook
+ * @returns A tuple containing the requestDialog function
+ *
+ * @example
+ * ```tsx
+ * const [requestDialog] = useHookDialog();
+ *
+ * const result = await requestDialog({
+ *   title: 'Confirm',
+ *   content: 'Are you sure?',
+ *   actions: [[
+ *     { title: 'Cancel', isCancel: true },
+ *     { title: 'OK', variant: 'primary', value: true }
+ *   ]]
+ * });
+ *
+ * if (result === true) {
+ *   console.log('User confirmed');
+ * }
+ * ```
+ *
+ * @example With default config
+ * ```tsx
+ * const [requestDialog] = useHookDialog({
+ *   showCloseButton: false,
+ *   backdropCancel: false
+ * });
+ * ```
+ */
+export default function useHookDialog(defaultConfig?: UseHookDialogConfig): ((config: ConfirmConfig) => Promise<ValidValue>)[];

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),N=require("react-dom"),f=require("react/jsx-runtime"),R=t=>{let o;const e=new Set,n=(c,M)=>{const a=typeof c=="function"?c(o):c;if(!Object.is(a,o)){const r=o;o=M??(typeof a!="object"||a===null)?a:Object.assign({},o,a),e.forEach(u=>u(o,r))}},l=()=>o,s={setState:n,getState:l,getInitialState:()=>b,subscribe:c=>(e.add(c),()=>e.delete(c))},b=o=t(n,l,s);return s},O=(t=>t?R(t):R),B=t=>t;function T(t,o=B){const e=m.useSyncExternalStore(t.subscribe,m.useCallback(()=>o(t.getState()),[t,o]),m.useCallback(()=>o(t.getInitialState()),[t,o]));return m.useDebugValue(e),e}const I=t=>{const o=O(t),e=n=>T(o,n);return Object.assign(e,o),e},W=(t=>t?I(t):I),x={STACKED:0,CURRENT_ONLY:1,CURRENT_HIDDEN_STACK:2},j=W()((t,o)=>({modalStackMap:new Map,isMounted:!1,renderMode:x.STACKED,modalWindowRefs:void 0,currentModalId:void 0,internalActions:{setModalWindowRefRef:e=>t(n=>({modalWindowRefs:e})),setIsMounted:e=>t({isMounted:e}),setRenderMode:e=>t({renderMode:e})},actions:{pushModal:(e,n,l=!1)=>(e=e??m.useId(),o().isMounted||console.error("BaseModalRenderer must be mounted before using."),o().modalStackMap.get(e)!==void 0?(o().actions.focusModal(e),e):(t(s=>{let b=[n,l];const c=new Map(s.modalStackMap);return c.set(e,b),{modalStackMap:c,currentModalId:e}}),e)),popModal:e=>o().modalStackMap.get(e)?(t(n=>{const l=new Map(n.modalStackMap);l.delete(e);const s=Array.from(l.keys())[l.size-1];return{modalStackMap:l,currentModalId:s}}),!0):!1,getModal:e=>o().modalStackMap.get(e),updateModal:(e,n,l)=>{const s=o().modalStackMap.get(e);return s?(t(b=>{const c=new Map(b.modalStackMap);return s[1]===!0?(console.warn(`Modal with id ${e} is dynamic. Cannot update content.`),{modalStackMap:b.modalStackMap}):(s[0]=n,s[1]=l??s[1],c.set(e,s),{modalStackMap:c})}),!0):!1},focusModal:e=>{const n=o().modalStackMap.get(e);return n?(t(l=>{const s=new Map(l.modalStackMap);return s.delete(e),s.set(e,n),{modalStackMap:s,currentModalId:e}}),!0):!1},getModalOrderIndex:e=>Array.from(o().modalStackMap.keys()).indexOf(e),getModalWindowRef:e=>o().modalWindowRefs?.get(e)}}));function K(){const{actions:t,currentModalId:o,renderMode:e}=j(n=>n);return{...t,currentModalId:o,renderMode:e}}function _(){const{internalActions:t,isMounted:o,modalStackMap:e,modalWindowRefs:n,currentModalId:l,renderMode:s}=j(b=>b);return{...t,isMounted:o,modalStackMap:e,modalWindowRefs:n,currentModalId:l,renderMode:s,store:j}}function z({renderMode:t=x.STACKED,id:o,style:e,className:n,windowClassName:l,windowStyle:s,disableBackgroundScroll:b=!0}){const c=m.useRef(null),M=m.useRef(new Map),{setIsMounted:a,setModalWindowRefRef:r,modalStackMap:u,currentModalId:y,store:k}=_(),g=Array.from(u.values()),d=Array.from(u.keys()),S=o||"base-modal-wrapper";m.useEffect(()=>{if(k.getState().isMounted)throw new Error("Multiple BaseModalRenderer detected. Only one BaseModalRenderer is allowed at a time.");return r(M.current),a(!0),()=>{a(!1),r(void 0)}},[]),m.useEffect(()=>{const p=d[d.length-1];p!==void 0?(c.current?.showModal(),document.body.setAttribute("inert","")):p===void 0&&(c.current?.close(),document.body.removeAttribute("inert"))},[y]);const w=m.useCallback((p,i)=>{p?M.current.set(i,p):M.current.delete(i)},[]),C=()=>{switch(t){case x.STACKED:return g.map(([p,i],h)=>f.jsx("div",{ref:v=>w(v,d[h]),className:`modal-window ${l||""}`,id:d[h],style:{...s||{}},...y!==d[h]?{inert:""}:{},children:typeof p=="function"?p():p},d[h]));case x.CURRENT_ONLY:return f.jsx("div",{id:d[g.length-1],ref:p=>w(p,d[g.length-1]),className:`modal-window ${l||""}`,style:{...s||{}},children:g[g.length-1][1]?null:typeof g[g.length-1][0]=="function"?g[g.length-1][0]():g[g.length-1][0]},d[g.length-1]);case x.CURRENT_HIDDEN_STACK:return g.map(([p,i],h)=>f.jsx("div",{ref:v=>w(v,d[h]),id:d[h],className:`modal-window ${l||""}`,style:{...s||{},visibility:y===d[h]?"visible":"hidden"},...y!==d[h]?{inert:""}:{},children:i?null:typeof p=="function"?p():p},d[h]))}};return d.length===0?null:f.jsxs(f.Fragment,{children:[N.createPortal(f.jsx("style",{children:`${b?`body:has(dialog#${S}[open]){overflow:hidden}body{scrollbar-gutter:stable}`:""}dialog#${S}[open]{width:100vw;height:100vh;max-width:100%;max-height:100%}.modal-wrapper{border:none;padding:0;background:unset}.modal-window{display:block;position:absolute;width:100%;height:100%;backdrop-filter:blur(2px);background-color:rgba(0,0,0,.1)}`}),document.head),N.createPortal(f.jsx("dialog",{ref:c,id:S,className:`modal-wrapper ${n||""}`,style:e,children:C()}),document.body)]})}function P({onClick:t,className:o="",style:e={},children:n}){return f.jsx("div",{className:`hook-modal-backdrop ${o}`,style:{position:"fixed",inset:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,...e},onClick:t,children:n})}const V=t=>t.stopPropagation();function q({className:t="",style:o={},children:e}){return f.jsx("div",{className:`hook-modal-window ${t}`,style:{minWidth:360,maxWidth:"90vw",backgroundColor:"#fff",borderRadius:30,boxShadow:"0 10px 40px rgba(0,0,0,0.2)",padding:25,position:"relative",...o},onClick:V,children:e})}const H={primary:{backgroundColor:"#2563eb",color:"#fff"},secondary:{backgroundColor:"#e5e7eb",color:"#111"},danger:{backgroundColor:"#dc2626",color:"#fff"},success:{backgroundColor:"#16a34a",color:"#fff"},warning:{backgroundColor:"#f59e0b",color:"#111"},info:{backgroundColor:"#0ea5e9",color:"#fff"},neutral:{backgroundColor:"#6b7280",color:"#fff"}};function U({modalWindowId:t,handleAction:o,handleClose:e,config:n}){const{actions:l=[],title:s,content:b,backdropCancel:c,showCloseButton:M,classNames:a={},styles:r={},variantStyles:u={}}=n,y=(l.length?l:[[{title:"OK",variant:"primary"}]]).filter(d=>d&&d.length),k={...H,...u},g=()=>{c===!0&&e(t)};return f.jsx(P,{onClick:g,className:a.backdrop||"",style:r.backdrop,children:f.jsxs(q,{className:a.dialog||"",style:r.dialog,children:[M&&f.jsx("button",{type:"button",className:`hook-dialog-close-button ${a.closeButton||""}`,"aria-label":"Close",onClick:()=>e(t),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",...r.closeButton},children:"×"}),s&&f.jsx("h3",{className:`hook-dialog-title ${a.title||""}`,style:{margin:"0 0 15px",fontSize:20,...r.title},children:s}),b&&f.jsx("div",{className:`hook-dialog-content ${a.content||""}`,style:{marginBottom:15,color:"#555",...r.content},children:b}),f.jsx("div",{className:`hook-dialog-actions ${a.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,...r.actions},children:y.map((d,S)=>{const w=d.filter(i=>i.isOnLeft),C=d.filter(i=>!i.isOnLeft),p=(i,h)=>{const v=i.variant||"secondary",D=k[v]||k.secondary;return f.jsx("button",{type:"button",className:`hook-dialog-action-button hook-dialog-action-${i.variant||"secondary"} ${a.actionButton||""} ${i.className||""}`,onClick:E=>{i.onClick?.(E,i),o(t,i)},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...D,...r.actionButton,...i.style||{}},children:i.title},`${i.title}-${h}`)};return f.jsxs("div",{className:`hook-dialog-actions-row ${a.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",marginTop:10,...r.actionsRow},children:[f.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:w.map((i,h)=>p(i,h))}),f.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:C.map((i,h)=>p(i,h))})]},S)})})]})})}const $=t=>{let o;const e=new Set,n=(a,r)=>{const u=typeof a=="function"?a(o):a;if(!Object.is(u,o)){const y=o;o=r??(typeof u!="object"||u===null)?u:Object.assign({},o,u),e.forEach(k=>k(o,y))}},l=()=>o,c={setState:n,getState:l,getInitialState:()=>M,subscribe:a=>(e.add(a),()=>e.delete(a))},M=o=t(n,l,c);return c},L=(t=>t?$(t):$),F=t=>t;function Y(t,o=F){const e=m.useSyncExternalStore(t.subscribe,m.useCallback(()=>o(t.getState()),[t,o]),m.useCallback(()=>o(t.getInitialState()),[t,o]));return m.useDebugValue(e),e}const A=t=>{const o=L(t),e=n=>Y(o,n);return Object.assign(e,o),e},G=(t=>t?A(t):A),J=G((t,o)=>({instances:[],addInstance:e=>t(n=>({instances:[...n.instances,e]})),removeInstance:e=>t(n=>({instances:n.instances.filter(l=>l.id!==e)})),getInstance:e=>o().instances.find(n=>n.id===e)}));function Q(t){const{instances:o,addInstance:e,removeInstance:n,getInstance:l}=J(),s=K(),b=m.useCallback(a=>{const r=l(a);r&&(s.popModal(a),r.config.rejectOnCancel!==!1?r.reject(r.config.defaultCancelValue):r.resolve(r.config.defaultCancelValue),n(a))},[l,n,s]),c=m.useCallback((a,r)=>{const u=l(a);u&&(s.popModal(a),r.isCancel&&u.config.rejectOnCancel!==!1?u.reject(r.value):u.resolve(r.value),n(a))},[l,n,s]);return[a=>new Promise((r,u)=>{const y=Math.random().toString(36).substring(2,6),k={...t,...a,classNames:{...t?.classNames,...a.classNames},styles:{...t?.styles,...a.styles},variantStyles:{...t?.variantStyles,...a.variantStyles}},g={id:y,config:k,resolve:r,reject:u};e(g),g.id=s.pushModal(y,m.createElement(U,{config:k,modalWindowId:y,handleClose:b,handleAction:c}))})]}exports.BaseModalRenderer=z;exports.useHookDialog=Q;

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @packageDocumentation
+ * react-hook-dialog - A powerful and flexible React dialog hook library
+ *
+ * Provides a hook-based API for displaying confirmation dialogs, alerts, and modals
+ * with rich customization options including action buttons, variants, and styling.
+ *
+ * @example
+ * ```tsx
+ * import { BaseModalRenderer } from '@rokku-x/react-hook-dialog';
+ * import { useHookDialog } from '@rokku-x/react-hook-dialog';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourComponents />
+ *       <BaseModalRenderer />
+ *     </>
+ *   );
+ * }
+ *
+ * function MyComponent() {
+ *   const [requestDialog] = useHookDialog();
+ *
+ *   const handleConfirm = async () => {
+ *     const result = await requestDialog({
+ *       title: 'Confirm',
+ *       content: 'Are you sure?',
+ *       actions: [[
+ *         { title: 'Cancel', isCancel: true },
+ *         { title: 'OK', variant: 'primary', value: true }
+ *       ]]
+ *     });
+ *   };
+ * }
+ * ```
+ */
+/**
+ * Re-export of BaseModalRenderer from @rokku-x/react-hook-modal.
+ * Must be mounted at the root of your application for dialogs to render.
+ */
+export { BaseModalRenderer } from '@rokku-x/react-hook-modal';
+/**
+ * Main hook for displaying confirmation dialogs and alerts.
+ * @see {@link useHookDialog}
+ */
+export { default as useHookDialog } from './hooks/useHookDialog';

package/dist/index.esm.js

@@ -0,0 +1,342 @@
+"use client";
+import k, { useId as K, useRef as $, useEffect as A, useCallback as I } from "react";
+import { createPortal as E } from "react-dom";
+import { jsxs as R, Fragment as _, jsx as b } from "react/jsx-runtime";
+const j = (t) => {
+  let o;
+  const e = /* @__PURE__ */ new Set(), n = (c, y) => {
+    const a = typeof c == "function" ? c(o) : c;
+    if (!Object.is(a, o)) {
+      const r = o;
+      o = y ?? (typeof a != "object" || a === null) ? a : Object.assign({}, o, a), e.forEach((u) => u(o, r));
+    }
+  }, l = () => o, s = { setState: n, getState: l, getInitialState: () => p, subscribe: (c) => (e.add(c), () => e.delete(c)) }, p = o = t(n, l, s);
+  return s;
+}, z = ((t) => t ? j(t) : j), V = (t) => t;
+function U(t, o = V) {
+  const e = k.useSyncExternalStore(
+    t.subscribe,
+    k.useCallback(() => o(t.getState()), [t, o]),
+    k.useCallback(() => o(t.getInitialState()), [t, o])
+  );
+  return k.useDebugValue(e), e;
+}
+const D = (t) => {
+  const o = z(t), e = (n) => U(o, n);
+  return Object.assign(e, o), e;
+}, H = ((t) => t ? D(t) : D), C = {
+  STACKED: 0,
+  CURRENT_ONLY: 1,
+  CURRENT_HIDDEN_STACK: 2
+}, x = H()((t, o) => ({
+  modalStackMap: /* @__PURE__ */ new Map(),
+  isMounted: !1,
+  renderMode: C.STACKED,
+  modalWindowRefs: void 0,
+  currentModalId: void 0,
+  internalActions: {
+    setModalWindowRefRef: (e) => t((n) => ({ modalWindowRefs: e })),
+    setIsMounted: (e) => t({ isMounted: e }),
+    setRenderMode: (e) => t({ renderMode: e })
+  },
+  actions: {
+    pushModal: (e, n, l = !1) => (e = e ?? K(), o().isMounted || console.error("BaseModalRenderer must be mounted before using."), o().modalStackMap.get(e) !== void 0 ? (o().actions.focusModal(e), e) : (t((s) => {
+      let p = [n, l];
+      const c = new Map(s.modalStackMap);
+      return c.set(e, p), { modalStackMap: c, currentModalId: e };
+    }), e)),
+    popModal: (e) => o().modalStackMap.get(e) ? (t((n) => {
+      const l = new Map(n.modalStackMap);
+      l.delete(e);
+      const s = Array.from(l.keys())[l.size - 1];
+      return { modalStackMap: l, currentModalId: s };
+    }), !0) : !1,
+    getModal: (e) => o().modalStackMap.get(e),
+    updateModal: (e, n, l) => {
+      const s = o().modalStackMap.get(e);
+      return s ? (t((p) => {
+        const c = new Map(p.modalStackMap);
+        return s[1] === !0 ? (console.warn(`Modal with id ${e} is dynamic. Cannot update content.`), { modalStackMap: p.modalStackMap }) : (s[0] = n, s[1] = l ?? s[1], c.set(e, s), { modalStackMap: c });
+      }), !0) : !1;
+    },
+    focusModal: (e) => {
+      const n = o().modalStackMap.get(e);
+      return n ? (t((l) => {
+        const s = new Map(l.modalStackMap);
+        return s.delete(e), s.set(e, n), { modalStackMap: s, currentModalId: e };
+      }), !0) : !1;
+    },
+    getModalOrderIndex: (e) => Array.from(o().modalStackMap.keys()).indexOf(e),
+    getModalWindowRef: (e) => o().modalWindowRefs?.get(e)
+  }
+}));
+function L() {
+  const { actions: t, currentModalId: o, renderMode: e } = x((n) => n);
+  return { ...t, currentModalId: o, renderMode: e };
+}
+function P() {
+  const { internalActions: t, isMounted: o, modalStackMap: e, modalWindowRefs: n, currentModalId: l, renderMode: s } = x((p) => p);
+  return { ...t, isMounted: o, modalStackMap: e, modalWindowRefs: n, currentModalId: l, renderMode: s, store: x };
+}
+function se({ renderMode: t = C.STACKED, id: o, style: e, className: n, windowClassName: l, windowStyle: s, disableBackgroundScroll: p = !0 }) {
+  const c = $(null), y = $(/* @__PURE__ */ new Map()), { setIsMounted: a, setModalWindowRefRef: r, modalStackMap: u, currentModalId: h, store: M } = P(), g = Array.from(u.values()), d = Array.from(u.keys()), S = o || "base-modal-wrapper";
+  A(() => {
+    if (M.getState().isMounted) throw new Error("Multiple BaseModalRenderer detected. Only one BaseModalRenderer is allowed at a time.");
+    return r(y.current), a(!0), () => {
+      a(!1), r(void 0);
+    };
+  }, []), A(() => {
+    const f = d[d.length - 1];
+    f !== void 0 ? (c.current?.showModal(), document.body.setAttribute("inert", "")) : f === void 0 && (c.current?.close(), document.body.removeAttribute("inert"));
+  }, [h]);
+  const w = I((f, i) => {
+    f ? y.current.set(i, f) : y.current.delete(i);
+  }, []), N = () => {
+    switch (t) {
+      case C.STACKED:
+        return g.map(([f, i], m) => /* @__PURE__ */ b(
+          "div",
+          {
+            ref: (v) => w(v, d[m]),
+            className: `modal-window ${l || ""}`,
+            id: d[m],
+            style: { ...s || {} },
+            ...h !== d[m] ? { inert: "" } : {},
+            children: typeof f == "function" ? f() : f
+          },
+          d[m]
+        ));
+      case C.CURRENT_ONLY:
+        return /* @__PURE__ */ b(
+          "div",
+          {
+            id: d[g.length - 1],
+            ref: (f) => w(f, d[g.length - 1]),
+            className: `modal-window ${l || ""}`,
+            style: { ...s || {} },
+            children: g[g.length - 1][1] ? null : typeof g[g.length - 1][0] == "function" ? g[g.length - 1][0]() : g[g.length - 1][0]
+          },
+          d[g.length - 1]
+        );
+      case C.CURRENT_HIDDEN_STACK:
+        return g.map(([f, i], m) => /* @__PURE__ */ b(
+          "div",
+          {
+            ref: (v) => w(v, d[m]),
+            id: d[m],
+            className: `modal-window ${l || ""}`,
+            style: {
+              ...s || {},
+              visibility: h === d[m] ? "visible" : "hidden"
+            },
+            ...h !== d[m] ? { inert: "" } : {},
+            children: i ? null : typeof f == "function" ? f() : f
+          },
+          d[m]
+        ));
+    }
+  };
+  return d.length === 0 ? null : /* @__PURE__ */ R(_, { children: [
+    E(/* @__PURE__ */ b("style", { children: `${p ? `body:has(dialog#${S}[open]){overflow:hidden}body{scrollbar-gutter:stable}` : ""}dialog#${S}[open]{width:100vw;height:100vh;max-width:100%;max-height:100%}.modal-wrapper{border:none;padding:0;background:unset}.modal-window{display:block;position:absolute;width:100%;height:100%;backdrop-filter:blur(2px);background-color:rgba(0,0,0,.1)}` }), document.head),
+    E(/* @__PURE__ */ b("dialog", { ref: c, id: S, className: `modal-wrapper ${n || ""}`, style: e, children: N() }), document.body)
+  ] });
+}
+function q({ onClick: t, className: o = "", style: e = {}, children: n }) {
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: `hook-modal-backdrop ${o}`,
+      style: {
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3,
+        ...e
+      },
+      onClick: t,
+      children: n
+    }
+  );
+}
+const F = (t) => t.stopPropagation();
+function Y({ className: t = "", style: o = {}, children: e }) {
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: `hook-modal-window ${t}`,
+      style: {
+        minWidth: 360,
+        maxWidth: "90vw",
+        backgroundColor: "#fff",
+        borderRadius: 30,
+        boxShadow: "0 10px 40px rgba(0,0,0,0.2)",
+        padding: 25,
+        position: "relative",
+        ...o
+      },
+      onClick: F,
+      children: e
+    }
+  );
+}
+const G = {
+  primary: { backgroundColor: "#2563eb", color: "#fff" },
+  secondary: { backgroundColor: "#e5e7eb", color: "#111" },
+  danger: { backgroundColor: "#dc2626", color: "#fff" },
+  success: { backgroundColor: "#16a34a", color: "#fff" },
+  warning: { backgroundColor: "#f59e0b", color: "#111" },
+  info: { backgroundColor: "#0ea5e9", color: "#fff" },
+  neutral: { backgroundColor: "#6b7280", color: "#fff" }
+};
+function J({ modalWindowId: t, handleAction: o, handleClose: e, config: n }) {
+  const { actions: l = [], title: s, content: p, backdropCancel: c, showCloseButton: y, classNames: a = {}, styles: r = {}, variantStyles: u = {} } = n, h = (l.length ? l : [[{ title: "OK", variant: "primary" }]]).filter((d) => d && d.length), M = { ...G, ...u };
+  return /* @__PURE__ */ b(
+    q,
+    {
+      onClick: () => {
+        c === !0 && e(t);
+      },
+      className: a.backdrop || "",
+      style: r.backdrop,
+      children: /* @__PURE__ */ R(
+        Y,
+        {
+          className: a.dialog || "",
+          style: r.dialog,
+          children: [
+            y && /* @__PURE__ */ b(
+              "button",
+              {
+                type: "button",
+                className: `hook-dialog-close-button ${a.closeButton || ""}`,
+                "aria-label": "Close",
+                onClick: () => e(t),
+                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",
+                  ...r.closeButton
+                },
+                children: "×"
+              }
+            ),
+            s && /* @__PURE__ */ b("h3", { className: `hook-dialog-title ${a.title || ""}`, style: { margin: "0 0 15px", fontSize: 20, ...r.title }, children: s }),
+            p && /* @__PURE__ */ b("div", { className: `hook-dialog-content ${a.content || ""}`, style: { marginBottom: 15, color: "#555", ...r.content }, children: p }),
+            /* @__PURE__ */ b("div", { className: `hook-dialog-actions ${a.actions || ""}`, style: { display: "flex", flexDirection: "column", gap: 10, ...r.actions }, children: h.map((d, S) => {
+              const w = d.filter((i) => i.isOnLeft), N = d.filter((i) => !i.isOnLeft), f = (i, m) => {
+                const v = i.variant || "secondary", T = M[v] || M.secondary;
+                return /* @__PURE__ */ b(
+                  "button",
+                  {
+                    type: "button",
+                    className: `hook-dialog-action-button hook-dialog-action-${i.variant || "secondary"} ${a.actionButton || ""} ${i.className || ""}`,
+                    onClick: (W) => {
+                      i.onClick?.(W, i), o(t, i);
+                    },
+                    style: {
+                      border: "none",
+                      borderRadius: 15,
+                      padding: "10px 18px",
+                      fontSize: 14,
+                      fontWeight: 800,
+                      cursor: "pointer",
+                      ...T,
+                      ...r.actionButton,
+                      ...i.style || {}
+                    },
+                    children: i.title
+                  },
+                  `${i.title}-${m}`
+                );
+              };
+              return /* @__PURE__ */ R("div", { className: `hook-dialog-actions-row ${a.actionsRow || ""}`, style: { display: "flex", gap: 8, justifyContent: "space-between", marginTop: 10, ...r.actionsRow }, children: [
+                /* @__PURE__ */ b("div", { className: "hook-dialog-actions-left", style: { display: "flex", gap: 8 }, children: w.map((i, m) => f(i, m)) }),
+                /* @__PURE__ */ b("div", { className: "hook-dialog-actions-right", style: { display: "flex", gap: 8 }, children: N.map((i, m) => f(i, m)) })
+              ] }, S);
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+const O = (t) => {
+  let o;
+  const e = /* @__PURE__ */ new Set(), n = (a, r) => {
+    const u = typeof a == "function" ? a(o) : a;
+    if (!Object.is(u, o)) {
+      const h = o;
+      o = r ?? (typeof u != "object" || u === null) ? u : Object.assign({}, o, u), e.forEach((M) => M(o, h));
+    }
+  }, l = () => o, c = { setState: n, getState: l, getInitialState: () => y, subscribe: (a) => (e.add(a), () => e.delete(a)) }, y = o = t(n, l, c);
+  return c;
+}, Q = ((t) => t ? O(t) : O), X = (t) => t;
+function Z(t, o = X) {
+  const e = k.useSyncExternalStore(
+    t.subscribe,
+    k.useCallback(() => o(t.getState()), [t, o]),
+    k.useCallback(() => o(t.getInitialState()), [t, o])
+  );
+  return k.useDebugValue(e), e;
+}
+const B = (t) => {
+  const o = Q(t), e = (n) => Z(o, n);
+  return Object.assign(e, o), e;
+}, ee = ((t) => t ? B(t) : B), te = ee((t, o) => ({
+  instances: [],
+  addInstance: (e) => t((n) => ({
+    instances: [...n.instances, e]
+  })),
+  removeInstance: (e) => t((n) => ({
+    instances: n.instances.filter((l) => l.id !== e)
+  })),
+  getInstance: (e) => o().instances.find((n) => n.id === e)
+}));
+function le(t) {
+  const { instances: o, addInstance: e, removeInstance: n, getInstance: l } = te(), s = L(), p = I((a) => {
+    const r = l(a);
+    r && (s.popModal(a), r.config.rejectOnCancel !== !1 ? r.reject(r.config.defaultCancelValue) : r.resolve(r.config.defaultCancelValue), n(a));
+  }, [l, n, s]), c = I((a, r) => {
+    const u = l(a);
+    u && (s.popModal(a), r.isCancel && u.config.rejectOnCancel !== !1 ? u.reject(r.value) : u.resolve(r.value), n(a));
+  }, [l, n, s]);
+  return [(a) => new Promise((r, u) => {
+    const h = Math.random().toString(36).substring(2, 6), M = {
+      ...t,
+      ...a,
+      classNames: {
+        ...t?.classNames,
+        ...a.classNames
+      },
+      styles: {
+        ...t?.styles,
+        ...a.styles
+      },
+      variantStyles: {
+        ...t?.variantStyles,
+        ...a.variantStyles
+      }
+    }, g = {
+      id: h,
+      config: M,
+      resolve: r,
+      reject: u
+    };
+    e(g), g.id = s.pushModal(h, k.createElement(J, { config: M, modalWindowId: h, handleClose: p, handleAction: c }));
+  })];
+}
+export {
+  se as BaseModalRenderer,
+  le as useHookDialog
+};

package/dist/store/dialogStore.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Zustand store interface for managing dialog instances.
+ * Maintains a centralized list of active dialog instances.
+ * @internal
+ */
+interface DialogStore {
+    /** Array of currently active dialog instances */
+    instances: ConfirmInstance[];
+    /** Add a new dialog instance to the store */
+    addInstance: (instance: ConfirmInstance) => void;
+    /** Remove a dialog instance from the store by ID */
+    removeInstance: (id: string) => void;
+    /** Get a dialog instance by ID */
+    getInstance: (id: string) => ConfirmInstance | undefined;
+}
+/**
+ * Zustand store for managing dialog instances.
+ * Provides centralized state management for all active dialogs.
+ *
+ * @internal
+ * @example
+ * ```tsx
+ * const { addInstance, removeInstance, getInstance } = useDialogStore();
+ * ```
+ */
+export declare const useDialogStore: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore>>;
+export {};

package/dist/utils/utils.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@rokku-x/react-hook-dialog",
+  "version": "0.0.1",
+  "author": "rokku-x",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rokku-x/react-hook-dialog.git"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.0.0",
+    "vite": "^7.1.9",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@rokku-x/react-hook-modal": "^0.7.7",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "zustand": "^4.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "bugs": {
+    "url": "https://github.com/rokku-x/react-hook-dialog/issues"
+  },
+  "description": "A React library",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "homepage": "https://github.com/rokku-x/react-hook-dialog#readme",
+  "keywords": [
+    "react",
+    "hook",
+    "component",
+    "library"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepare": "npm run build",
+    "publish:first": "npm publish --access public --provenance false",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "sideEffects": false,
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/*"
+      ]
+    }
+  }
+}