@rokku-x/react-hook-dialog 0.0.2 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rokku-x
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,7 @@
 # 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)
+
 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
@@ -131,6 +133,7 @@ Configuration for individual dialog calls.
 | `classNames` | `DialogClassNames` | Custom CSS classes for elements |
 | `styles` | `DialogStyles` | Custom inline styles for elements |
 | `variantStyles` | `DialogVariantStyles` | Custom variant button styles |
+| `isReturnSubmit` | `boolean` | When `true` and `content` is a `<form>`, clicking a submit action returns the serialized form values as the dialog result |
 
 ### ModalAction
 
@@ -140,11 +143,14 @@ Individual action button configuration.
 |---|---|---|---|
 | `title` | `React.ReactNode` | ✓ | Button label (string or React element) |
 | `value` | `ValidValue` | | Value to return when clicked |
-| `isCancel` | `boolean` | | Treat as cancel button (respects rejectOnCancel) |
+| `isCancel` | `boolean` | | Treat as cancel button (respects `rejectOnCancel`) |
 | `isOnLeft` | `boolean` | | Position button on left side of row |
+| `isFocused` | `boolean` | | Request initial focus when the dialog opens (highest focus priority) |
+| `isSubmit` | `boolean` | | Render as `type="submit"` and trigger form submit if `content` is a `<form>` |
+| `noActionReturn` | `boolean` | | Run `onClick` but do _not_ perform default dialog action (`handleAction`) — useful for custom flows |
 | `variant` | `ModalVariant` | | Visual style variant |
-| `className` | `string` | | Additional CSS class |
-| `style` | `React.CSSProperties` | | Custom inline styles |
+| `className` | `string` | | Additional CSS class applied to the button |
+| `style` | `React.CSSProperties` | | Custom inline styles applied to the button (highest style priority) |
 | `onClick` | `((event, action) => void) \| (() => void)` | | Click handler called before default handling |
 
 ### ModalVariant
@@ -165,6 +171,23 @@ type ModalVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' |
 | `info` | Sky (#0ea5e9) | White |
 | `neutral` | Gray (#6b7280) | White |
 
+### Action Flags — Priority & Behavior 🔀
+
+- **Focus priority**: `isFocused` (per-action) > close button (if shown) > first action button > dialog container
+- **Click ordering**: `action.onClick` is executed first. Then:
+  1. If `isSubmit` is true and `isReturnSubmit` is also enabled (and `content` is a `<form>`), the form is serialized and its values are returned as the dialog result immediately (no native submit is triggered).
+  2. Else if `isSubmit` is true, the form's `requestSubmit()` is invoked (useful for native validation flows).
+  3. Else if `noActionReturn` is true, the default dialog action is skipped (use to perform custom flows and close the dialog manually).
+  4. Otherwise `handleAction` is called and the dialog resolves/rejects using the action's `value`.
+- **isCancel**: marks a cancel action — dialog resolves or rejects according to `rejectOnCancel` and `defaultCancelValue` settings.
+- **Placement**: `isOnLeft` positions the action on the left side; other actions render on the right.
+- **Style & class precedence** (lowest → highest):
+  1. built-in `baseVariantStyles` (library defaults)
+  2. `ConfirmConfig.variantStyles` (per-call variant overrides)
+  3. `ConfirmConfig.styles.actionButton` (per-call default action button styles)
+  4. `ModalAction.style` (per-action inline style — highest precedence)
+  5. `className` values are appended so per-action `className` and `ConfirmConfig.classNames.actionButton` both apply (per-action classes appear last).
+
 ### DialogClassNames
 
 Customize CSS classes for all elements:
@@ -564,6 +587,43 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+### Example 15: Form Dialog Returning Values (isReturnSubmit)
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+async function openProfileDialog() {
+  const result = await requestDialog({
+    title: 'Edit Profile',
+    content: (
+      <form>
+        <label>
+          Name
+          <input name="name" defaultValue="Alice" />
+        </label>
+        <label>
+          Email
+          <input name="email" defaultValue="alice@example.com" />
+        </label>
+      </form>
+    ),
+    actions: [[
+      { title: 'Cancel', isCancel: true },
+      // `isSubmit` triggers native submit; when `isReturnSubmit` is enabled on the dialog config, the dialog returns the form values object
+      { title: 'Save', isSubmit: true }
+    ]],
+    isReturnSubmit: true
+  });
+
+  if (result && typeof result === 'object') {
+    // `result` is the object built from the submitted form
+    console.log('Form values:', result);
+    // e.g. result.name, result.email
+  }
+}
+```
+
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
 ### Example 14: Boolean Result with Custom Values
 
 ```tsx

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rokku-x
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,704 @@
+# 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)
+
+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
+- ⌨️ **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 |
+| `isReturnSubmit` | `boolean` | When `true` and `content` is a `<form>`, clicking a submit action returns the serialized form values as the dialog result |
+
+### 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 |
+| `isFocused` | `boolean` | | Request initial focus when the dialog opens (highest focus priority) |
+| `isSubmit` | `boolean` | | Render as `type="submit"` and trigger form submit if `content` is a `<form>` |
+| `noActionReturn` | `boolean` | | Run `onClick` but do _not_ perform default dialog action (`handleAction`) — useful for custom flows |
+| `variant` | `ModalVariant` | | Visual style variant |
+| `className` | `string` | | Additional CSS class applied to the button |
+| `style` | `React.CSSProperties` | | Custom inline styles applied to the button (highest style priority) |
+| `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 |
+
+### Action Flags — Priority & Behavior 🔀
+
+- **Focus priority**: `isFocused` (per-action) > close button (if shown) > first action button > dialog container
+- **Click ordering**: `action.onClick` is executed first. Then:
+  1. If `isSubmit` is true and `isReturnSubmit` is also enabled (and `content` is a `<form>`), the form is serialized and its values are returned as the dialog result immediately (no native submit is triggered).
+  2. Else if `isSubmit` is true, the form's `requestSubmit()` is invoked (useful for native validation flows).
+  3. Else if `noActionReturn` is true, the default dialog action is skipped (use to perform custom flows and close the dialog manually).
+  4. Otherwise `handleAction` is called and the dialog resolves/rejects using the action's `value`.
+- **isCancel**: marks a cancel action — dialog resolves or rejects according to `rejectOnCancel` and `defaultCancelValue` settings.
+- **Placement**: `isOnLeft` positions the action on the left side; other actions render on the right.
+- **Style & class precedence** (lowest → highest):
+  1. built-in `baseVariantStyles` (library defaults)
+  2. `ConfirmConfig.variantStyles` (per-call variant overrides)
+  3. `ConfirmConfig.styles.actionButton` (per-call default action button styles)
+  4. `ModalAction.style` (per-action inline style — highest precedence)
+  5. `className` values are appended so per-action `className` and `ConfirmConfig.classNames.actionButton` both apply (per-action classes appear last).
+
+### 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 15: Form Dialog Returning Values (isReturnSubmit)
+
+```tsx
+const [requestDialog] = useHookDialog();
+
+async function openProfileDialog() {
+  const result = await requestDialog({
+    title: 'Edit Profile',
+    content: (
+      <form>
+        <label>
+          Name
+          <input name="name" defaultValue="Alice" />
+        </label>
+        <label>
+          Email
+          <input name="email" defaultValue="alice@example.com" />
+        </label>
+      </form>
+    ),
+    actions: [[
+      { title: 'Cancel', isCancel: true },
+      // `isSubmit` triggers native submit; when `isReturnSubmit` is enabled on the dialog config, the dialog returns the form values object
+      { title: 'Save', isSubmit: true }
+    ]],
+    isReturnSubmit: true
+  });
+
+  if (result && typeof result === 'object') {
+    // `result` is the object built from the submitted form
+    console.log('Form values:', result);
+    // e.g. result.name, result.email
+  }
+}
+```
+
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
+### 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

@@ -1,3 +1,4 @@
+import { ModalWindowProps } from '../types';
 /**
  * Main modal window component that renders the dialog UI.
  *

package/dist/constants/theme.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Default styles for button variants.
+ * Can be overridden via the variantStyles config option.
+ */
+export declare const baseVariantStyles: Record<string, React.CSSProperties>;

package/dist/hooks/useHookDialog.d.ts

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

package/dist/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("@rokku-x/react-hook-modal"),k=require("react"),l=require("react/jsx-runtime"),$=require("zustand"),w={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 R({modalWindowId:s,handleAction:y,handleClose:a,config:n}){const{actions:r=[],title:i,content:m,backdropCancel:h,showCloseButton:v,classNames:o={},styles:e={},variantStyles:c={}}=n,d=(r.length?r:[[{title:"OK",variant:"primary"}]]).filter(g=>g&&g.length),u={...w,...c},p=()=>{h===!0&&a(s)};return l.jsx(b.ModalBackdrop,{onClick:p,className:o.backdrop||"",style:e.backdrop,children:l.jsxs(b.ModalWindow,{className:o.dialog||"",style:e.dialog,children:[v&&l.jsx("button",{type:"button",className:`hook-dialog-close-button ${o.closeButton||""}`,"aria-label":"Close",onClick:()=>a(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",...e.closeButton},children:"×"}),i&&l.jsx("h3",{className:`hook-dialog-title ${o.title||""}`,style:{margin:"0 0 15px",fontSize:20,...e.title},children:i}),m&&l.jsx("div",{className:`hook-dialog-content ${o.content||""}`,style:{marginBottom:15,color:"#555",...e.content},children:m}),l.jsx("div",{className:`hook-dialog-actions ${o.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,...e.actions},children:d.map((g,x)=>{const j=g.filter(t=>t.isOnLeft),N=g.filter(t=>!t.isOnLeft),C=(t,f)=>{const S=t.variant||"secondary",M=u[S]||u.secondary;return l.jsx("button",{type:"button",className:`hook-dialog-action-button hook-dialog-action-${t.variant||"secondary"} ${o.actionButton||""} ${t.className||""}`,onClick:B=>{t.onClick?.(B,t),y(s,t)},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...M,...e.actionButton,...t.style||{}},children:t.title},`${t.title}-${f}`)};return l.jsxs("div",{className:`hook-dialog-actions-row ${o.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",marginTop:10,...e.actionsRow},children:[l.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:j.map((t,f)=>C(t,f))}),l.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:N.map((t,f)=>C(t,f))})]},x)})})]})})}const I=$.create((s,y)=>({instances:[],addInstance:a=>s(n=>({instances:[...n.instances,a]})),removeInstance:a=>s(n=>({instances:n.instances.filter(r=>r.id!==a)})),getInstance:a=>y().instances.find(n=>n.id===a)}));function O(s){const{instances:y,addInstance:a,removeInstance:n,getInstance:r}=I(),i=b.useBaseModal(),m=k.useCallback(o=>{const e=r(o);e&&(i.popModal(o),e.config.rejectOnCancel!==!1?e.reject(e.config.defaultCancelValue):e.resolve(e.config.defaultCancelValue),n(o))},[r,n,i]),h=k.useCallback((o,e)=>{const c=r(o);c&&(i.popModal(o),e.isCancel&&c.config.rejectOnCancel!==!1?c.reject(e.value):c.resolve(e.value),n(o))},[r,n,i]);return[o=>new Promise((e,c)=>{const d=Math.random().toString(36).substring(2,6),u={...s,...o,classNames:{...s?.classNames,...o.classNames},styles:{...s?.styles,...o.styles},variantStyles:{...s?.variantStyles,...o.variantStyles}},p={id:d,config:u,resolve:e,reject:c};a(p),p.id=i.pushModal(d,k.createElement(R,{config:u,modalWindowId:d,handleClose:m,handleAction:h}))})]}Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>b.BaseModalRenderer});exports.useHookDialog=O;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("@rokku-x/react-hook-modal"),p=require("react"),d=require("react/jsx-runtime"),$=require("zustand"),D={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 w(t){const u={};return t.forEach((n,s)=>{if(s in u){const a=u[s];Array.isArray(a)?a.push(n):u[s]=[a,n]}else u[s]=n}),u}const A=t=>p.isValidElement(t)&&(t.type==="form"||typeof t.type=="string"&&t.type.toLowerCase()==="form"),q=j.ModalWindow;function O({modalWindowId:t,handleAction:u,handleClose:n,config:s}){const{actions:a=[],title:g,backdropCancel:R,showCloseButton:N,classNames:f={},styles:o={},variantStyles:r={}}=s;let{content:l}=s;const y=(a.length?a:[[{title:"OK",variant:"primary"}]]).filter(c=>c&&c.length),h={...D,...r},x=()=>R&&n(t),M=p.useRef(null),B=p.useRef(null),C=p.useRef(null);return p.useEffect(()=>{const c=M.current;if(!c)return;const k=document.activeElement;if(B.current)B.current.focus();else{const i=c.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");i?i.focus():(c.setAttribute("tabindex","-1"),c.focus())}const S=i=>{if(i.key==="Escape")i.stopPropagation(),n(t);else if(i.key==="Tab"){const b=Array.from(c.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);if(b.length===0){i.preventDefault();return}const e=b[0],m=b[b.length-1];i.shiftKey?document.activeElement===e&&(i.preventDefault(),m.focus()):document.activeElement===m&&(i.preventDefault(),e.focus())}};return c.addEventListener("keydown",S),()=>{c.removeEventListener("keydown",S),k&&k.focus&&k.focus()}},[n,t]),A(l)&&(l=p.cloneElement(l,{ref:C})),d.jsx(j.ModalBackdrop,{onClick:x,className:f.backdrop||"",style:o.backdrop,children:d.jsxs(q,{ref:M,role:"dialog","aria-modal":"true","aria-labelledby":g?`${t}-title`:void 0,className:f.dialog||"",style:o.dialog,children:[N&&d.jsx("button",{type:"button",className:`hook-dialog-close-button ${f.closeButton||""}`,"aria-label":"Close",onClick:()=>n(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",...o.closeButton},children:"×"}),g&&d.jsx("h3",{id:`${t}-title`,className:`hook-dialog-title ${f.title||""}`,style:{margin:"0 0 15px",fontSize:20,...o.title},children:g}),l&&d.jsx("div",{className:`hook-dialog-content ${f.content||""}`,style:{marginBottom:15,color:"#555",...o.content},children:l}),d.jsx("div",{className:`hook-dialog-actions ${f.actions||""}`,style:{display:"flex",flexDirection:"column",gap:10,paddingTop:15,...o.actions},children:y.map((c,k)=>{const S=c.filter(e=>e.isOnLeft),i=c.filter(e=>!e.isOnLeft),b=(e,m)=>{const E=h[e.variant||"secondary"]||h.secondary;return d.jsx("button",{ref:v=>{e.isFocused&&v&&(B.current=v)},"data-action-focused":e.isFocused?"true":void 0,className:`hook-dialog-action-button hook-dialog-action-${e.variant||"secondary"} ${f.actionButton||""} ${e.className||""}`,onClick:v=>{if(e.onClick?.(v,e),e.isSubmit&&s.isReturnSubmit&&C.current)return u(t,e,w(new FormData(C.current)));if(e.isSubmit&&C.current?.requestSubmit(),e.noActionReturn)return v.stopPropagation();u(t,e)},style:{border:"none",borderRadius:15,padding:"10px 18px",fontSize:14,fontWeight:800,cursor:"pointer",...E,...o.actionButton,...e.style||{}},children:e.title},`${e.title}-${m}`)};return d.jsxs("div",{className:`hook-dialog-actions-row ${f.actionsRow||""}`,style:{display:"flex",gap:8,justifyContent:"space-between",...o.actionsRow},children:[d.jsx("div",{className:"hook-dialog-actions-left",style:{display:"flex",gap:8},children:S.map((e,m)=>b(e,m))}),d.jsx("div",{className:"hook-dialog-actions-right",style:{display:"flex",gap:8},children:i.map((e,m)=>b(e,m))})]},k)})})]})})}const F=$.create((t,u)=>({instances:[],addInstance:n=>t(s=>({instances:[...s.instances,n]})),removeInstance:n=>t(s=>({instances:s.instances.filter(a=>a.id!==n)})),getInstance:n=>u().instances.find(s=>s.id===n)}));function L(t){const{instances:u,addInstance:n,removeInstance:s,getInstance:a}=F(),g=j.useBaseModal(),R=p.useCallback(o=>{const r=a(o);r&&(g.popModal(o),r.config.rejectOnCancel!==!1?r.reject(r.config.defaultCancelValue):r.resolve(r.config.defaultCancelValue),s(o))},[a,s,g]),N=p.useCallback((o,r)=>{const l=a(o);l&&(g.popModal(o),r.isCancel&&l.config.rejectOnCancel!==!1?l.reject(r.value):l.resolve(r.value),s(o))},[a,s,g]);function f(o){return new Promise((r,l)=>{const y=Math.random().toString(36).substring(2,6),h={...t,...o,classNames:{...t?.classNames,...o.classNames},styles:{...t?.styles,...o.styles},variantStyles:{...t?.variantStyles,...o.variantStyles}},x={id:y,config:h,resolve:r,reject:l};n(x),x.id=g.pushModal(y,p.createElement(O,{config:h,modalWindowId:y,handleClose:R,handleAction:N}))})}return[f]}Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>j.BaseModalRenderer});exports.useHookDialog=L;

package/dist/index.esm.js

@@ -1,10 +1,10 @@
 "use client";
-import { ModalBackdrop as w, ModalWindow as j, useBaseModal as I } from "@rokku-x/react-hook-modal";
-import { BaseModalRenderer as P } from "@rokku-x/react-hook-modal";
-import R, { useCallback as v } from "react";
-import { jsx as i, jsxs as C } from "react/jsx-runtime";
-import { create as D } from "zustand";
-const O = {
+import { ModalBackdrop as A, ModalWindow as j, useBaseModal as F } from "@rokku-x/react-hook-modal";
+import { BaseModalRenderer as X } from "@rokku-x/react-hook-modal";
+import R, { useRef as E, useEffect as O, useCallback as M } from "react";
+import { jsx as p, jsxs as w } from "react/jsx-runtime";
+import { create as L } from "zustand";
+const V = {
   primary: { backgroundColor: "#2563eb", color: "#fff" },
   secondary: { backgroundColor: "#e5e7eb", color: "#111" },
   danger: { backgroundColor: "#dc2626", color: "#fff" },
@@ -13,29 +13,70 @@ const O = {
   info: { backgroundColor: "#0ea5e9", color: "#fff" },
   neutral: { backgroundColor: "#6b7280", color: "#fff" }
 };
-function V({ modalWindowId: a, handleAction: m, handleClose: s, config: n }) {
-  const { actions: l = [], title: c, content: p, backdropCancel: y, showCloseButton: b, classNames: o = {}, styles: e = {}, variantStyles: r = {} } = n, d = (l.length ? l : [[{ title: "OK", variant: "primary" }]]).filter((u) => u && u.length), f = { ...O, ...r };
-  return /* @__PURE__ */ i(
-    w,
+function q(t) {
+  const u = {};
+  return t.forEach((s, n) => {
+    if (n in u) {
+      const a = u[n];
+      Array.isArray(a) ? a.push(s) : u[n] = [a, s];
+    } else
+      u[n] = s;
+  }), u;
+}
+const z = (t) => R.isValidElement(t) && (t.type === "form" || typeof t.type == "string" && t.type.toLowerCase() === "form"), I = j;
+function K({ modalWindowId: t, handleAction: u, handleClose: s, config: n }) {
+  const { actions: a = [], title: d, backdropCancel: S, showCloseButton: N, classNames: f = {}, styles: o = {}, variantStyles: r = {} } = n;
+  let { content: l } = n;
+  const y = (a.length ? a : [[{ title: "OK", variant: "primary" }]]).filter((i) => i && i.length), b = { ...V, ...r }, k = () => S && s(t), $ = E(null), B = E(null), x = E(null);
+  return O(() => {
+    const i = $.current;
+    if (!i) return;
+    const h = document.activeElement;
+    if (B.current)
+      B.current.focus();
+    else {
+      const c = i.querySelector("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
+      c ? c.focus() : (i.setAttribute("tabindex", "-1"), i.focus());
+    }
+    const C = (c) => {
+      if (c.key === "Escape")
+        c.stopPropagation(), s(t);
+      else if (c.key === "Tab") {
+        const g = Array.from(i.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter(Boolean);
+        if (g.length === 0) {
+          c.preventDefault();
+          return;
+        }
+        const e = g[0], m = g[g.length - 1];
+        c.shiftKey ? document.activeElement === e && (c.preventDefault(), m.focus()) : document.activeElement === m && (c.preventDefault(), e.focus());
+      }
+    };
+    return i.addEventListener("keydown", C), () => {
+      i.removeEventListener("keydown", C), h && h.focus && h.focus();
+    };
+  }, [s, t]), z(l) && (l = R.cloneElement(l, { ref: x })), /* @__PURE__ */ p(
+    A,
     {
-      onClick: () => {
-        y === !0 && s(a);
-      },
-      className: o.backdrop || "",
-      style: e.backdrop,
-      children: /* @__PURE__ */ C(
-        j,
+      onClick: k,
+      className: f.backdrop || "",
+      style: o.backdrop,
+      children: /* @__PURE__ */ w(
+        I,
         {
-          className: o.dialog || "",
-          style: e.dialog,
+          ref: $,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": d ? `${t}-title` : void 0,
+          className: f.dialog || "",
+          style: o.dialog,
           children: [
-            b && /* @__PURE__ */ i(
+            N && /* @__PURE__ */ p(
               "button",
               {
                 type: "button",
-                className: `hook-dialog-close-button ${o.closeButton || ""}`,
+                className: `hook-dialog-close-button ${f.closeButton || ""}`,
                 "aria-label": "Close",
-                onClick: () => s(a),
+                onClick: () => s(t),
                 style: {
                   position: "absolute",
                   top: 0,
@@ -49,23 +90,28 @@ function V({ modalWindowId: a, handleAction: m, handleClose: s, config: n }) {
                   cursor: "pointer",
                   lineHeight: 1,
                   color: "#555",
-                  ...e.closeButton
+                  ...o.closeButton
                 },
                 children: "×"
               }
             ),
-            c && /* @__PURE__ */ i("h3", { className: `hook-dialog-title ${o.title || ""}`, style: { margin: "0 0 15px", fontSize: 20, ...e.title }, children: c }),
-            p && /* @__PURE__ */ i("div", { className: `hook-dialog-content ${o.content || ""}`, style: { marginBottom: 15, color: "#555", ...e.content }, children: p }),
-            /* @__PURE__ */ i("div", { className: `hook-dialog-actions ${o.actions || ""}`, style: { display: "flex", flexDirection: "column", gap: 10, ...e.actions }, children: d.map((u, N) => {
-              const x = u.filter((t) => t.isOnLeft), B = u.filter((t) => !t.isOnLeft), k = (t, g) => {
-                const S = t.variant || "secondary", M = f[S] || f.secondary;
-                return /* @__PURE__ */ i(
+            d && /* @__PURE__ */ p("h3", { id: `${t}-title`, className: `hook-dialog-title ${f.title || ""}`, style: { margin: "0 0 15px", fontSize: 20, ...o.title }, children: d }),
+            l && /* @__PURE__ */ p("div", { className: `hook-dialog-content ${f.content || ""}`, style: { marginBottom: 15, color: "#555", ...o.content }, children: l }),
+            /* @__PURE__ */ p("div", { className: `hook-dialog-actions ${f.actions || ""}`, style: { display: "flex", flexDirection: "column", gap: 10, paddingTop: 15, ...o.actions }, children: y.map((i, h) => {
+              const C = i.filter((e) => e.isOnLeft), c = i.filter((e) => !e.isOnLeft), g = (e, m) => {
+                const D = b[e.variant || "secondary"] || b.secondary;
+                return /* @__PURE__ */ p(
                   "button",
                   {
-                    type: "button",
-                    className: `hook-dialog-action-button hook-dialog-action-${t.variant || "secondary"} ${o.actionButton || ""} ${t.className || ""}`,
-                    onClick: ($) => {
-                      t.onClick?.($, t), m(a, t);
+                    ref: (v) => {
+                      e.isFocused && v && (B.current = v);
+                    },
+                    "data-action-focused": e.isFocused ? "true" : void 0,
+                    className: `hook-dialog-action-button hook-dialog-action-${e.variant || "secondary"} ${f.actionButton || ""} ${e.className || ""}`,
+                    onClick: (v) => {
+                      if (e.onClick?.(v, e), e.isSubmit && n.isReturnSubmit && x.current) return u(t, e, q(new FormData(x.current)));
+                      if (e.isSubmit && x.current?.requestSubmit(), e.noActionReturn) return v.stopPropagation();
+                      u(t, e);
                     },
                     style: {
                       border: "none",
@@ -74,19 +120,19 @@ function V({ modalWindowId: a, handleAction: m, handleClose: s, config: n }) {
                       fontSize: 14,
                       fontWeight: 800,
                       cursor: "pointer",
-                      ...M,
-                      ...e.actionButton,
-                      ...t.style || {}
+                      ...D,
+                      ...o.actionButton,
+                      ...e.style || {}
                     },
-                    children: t.title
+                    children: e.title
                   },
-                  `${t.title}-${g}`
+                  `${e.title}-${m}`
                 );
               };
-              return /* @__PURE__ */ C("div", { className: `hook-dialog-actions-row ${o.actionsRow || ""}`, style: { display: "flex", gap: 8, justifyContent: "space-between", marginTop: 10, ...e.actionsRow }, children: [
-                /* @__PURE__ */ i("div", { className: "hook-dialog-actions-left", style: { display: "flex", gap: 8 }, children: x.map((t, g) => k(t, g)) }),
-                /* @__PURE__ */ i("div", { className: "hook-dialog-actions-right", style: { display: "flex", gap: 8 }, children: B.map((t, g) => k(t, g)) })
-              ] }, N);
+              return /* @__PURE__ */ w("div", { className: `hook-dialog-actions-row ${f.actionsRow || ""}`, style: { display: "flex", gap: 8, justifyContent: "space-between", ...o.actionsRow }, children: [
+                /* @__PURE__ */ p("div", { className: "hook-dialog-actions-left", style: { display: "flex", gap: 8 }, children: C.map((e, m) => g(e, m)) }),
+                /* @__PURE__ */ p("div", { className: "hook-dialog-actions-right", style: { display: "flex", gap: 8 }, children: c.map((e, m) => g(e, m)) })
+              ] }, h);
             }) })
           ]
         }
@@ -94,50 +140,53 @@ function V({ modalWindowId: a, handleAction: m, handleClose: s, config: n }) {
     }
   );
 }
-const z = D((a, m) => ({
+const P = L((t, u) => ({
   instances: [],
-  addInstance: (s) => a((n) => ({
+  addInstance: (s) => t((n) => ({
     instances: [...n.instances, s]
   })),
-  removeInstance: (s) => a((n) => ({
-    instances: n.instances.filter((l) => l.id !== s)
+  removeInstance: (s) => t((n) => ({
+    instances: n.instances.filter((a) => a.id !== s)
   })),
-  getInstance: (s) => m().instances.find((n) => n.id === s)
+  getInstance: (s) => u().instances.find((n) => n.id === s)
 }));
-function K(a) {
-  const { instances: m, addInstance: s, removeInstance: n, getInstance: l } = z(), c = I(), p = v((o) => {
-    const e = l(o);
-    e && (c.popModal(o), e.config.rejectOnCancel !== !1 ? e.reject(e.config.defaultCancelValue) : e.resolve(e.config.defaultCancelValue), n(o));
-  }, [l, n, c]), y = v((o, e) => {
-    const r = l(o);
-    r && (c.popModal(o), e.isCancel && r.config.rejectOnCancel !== !1 ? r.reject(e.value) : r.resolve(e.value), n(o));
-  }, [l, n, c]);
-  return [(o) => new Promise((e, r) => {
-    const d = Math.random().toString(36).substring(2, 6), f = {
-      ...a,
-      ...o,
-      classNames: {
-        ...a?.classNames,
-        ...o.classNames
-      },
-      styles: {
-        ...a?.styles,
-        ...o.styles
-      },
-      variantStyles: {
-        ...a?.variantStyles,
-        ...o.variantStyles
-      }
-    }, h = {
-      id: d,
-      config: f,
-      resolve: e,
-      reject: r
-    };
-    s(h), h.id = c.pushModal(d, R.createElement(V, { config: f, modalWindowId: d, handleClose: p, handleAction: y }));
-  })];
+function Q(t) {
+  const { instances: u, addInstance: s, removeInstance: n, getInstance: a } = P(), d = F(), S = M((o) => {
+    const r = a(o);
+    r && (d.popModal(o), r.config.rejectOnCancel !== !1 ? r.reject(r.config.defaultCancelValue) : r.resolve(r.config.defaultCancelValue), n(o));
+  }, [a, n, d]), N = M((o, r) => {
+    const l = a(o);
+    l && (d.popModal(o), r.isCancel && l.config.rejectOnCancel !== !1 ? l.reject(r.value) : l.resolve(r.value), n(o));
+  }, [a, n, d]);
+  function f(o) {
+    return new Promise((r, l) => {
+      const y = Math.random().toString(36).substring(2, 6), b = {
+        ...t,
+        ...o,
+        classNames: {
+          ...t?.classNames,
+          ...o.classNames
+        },
+        styles: {
+          ...t?.styles,
+          ...o.styles
+        },
+        variantStyles: {
+          ...t?.variantStyles,
+          ...o.variantStyles
+        }
+      }, k = {
+        id: y,
+        config: b,
+        resolve: r,
+        reject: l
+      };
+      s(k), k.id = d.pushModal(y, R.createElement(K, { config: b, modalWindowId: y, handleClose: S, handleAction: N }));
+    });
+  }
+  return [f];
 }
 export {
-  P as BaseModalRenderer,
-  K as useHookDialog
+  X as BaseModalRenderer,
+  Q as useHookDialog
 };

package/dist/store/dialogStore.d.ts

@@ -1,17 +1,18 @@
+import { ConfirmInstance, ValidValue } from '../types';
 /**
  * Zustand store interface for managing dialog instances.
  * Maintains a centralized list of active dialog instances.
  * @internal
  */
-interface DialogStore {
+interface DialogStore<T = ValidValue> {
     /** Array of currently active dialog instances */
-    instances: ConfirmInstance[];
+    instances: ConfirmInstance<T>[];
     /** Add a new dialog instance to the store */
-    addInstance: (instance: ConfirmInstance) => void;
+    addInstance: (instance: ConfirmInstance<T>) => 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;
+    getInstance: (id: string) => ConfirmInstance<T> | undefined;
 }
 /**
  * Zustand store for managing dialog instances.
@@ -23,5 +24,5 @@ interface DialogStore {
  * const { addInstance, removeInstance, getInstance } = useDialogStore();
  * ```
  */
-export declare const useDialogStore: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore>>;
+export declare const useDialogStore: import('zustand').UseBoundStore<import('zustand').StoreApi<DialogStore<any>>>;
 export {};

package/dist/types/index.d.ts

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

package/dist/utils/utils.d.ts

@@ -1 +1,24 @@
-export {};
+import { default as React } from 'react';
+/**
+ * Value stored in FormData entries (string or File)
+ */
+export type FormDataValue = FormDataEntryValue;
+/**
+ * Resulting object from converting FormData to a plain object.
+ * Repeated keys become arrays of values.
+ */
+export type FormDataObject = Record<string, FormDataValue | FormDataValue[]>;
+/**
+ * Convert a FormData instance into a plain object.
+ * Repeated keys become arrays of values.
+ *
+ * @example
+ * const data = new FormData();
+ * data.append('name', 'Alice');
+ * data.append('tags', 'a');
+ * data.append('tags', 'b');
+ * const obj = FormDataToObject(data);
+ * // { name: 'Alice', tags: ['a','b'] }
+ */
+export declare function FormDataToObject<T extends FormDataObject = FormDataObject>(formData: FormData): T;
+export declare const IsForm: (content: React.ReactNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-dialog",
-  "version": "0.0.2",
+  "version": "1.0.2",
   "author": "rokku-x",
   "repository": {
     "type": "git",
@@ -9,6 +9,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "devDependencies": {
+    "@changesets/cli": "^2.29.8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.6.1",
@@ -20,7 +21,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^1.6.1"
+    "vitest": "^1.6.1",
+    "copyfiles": "^2.4.1"
   },
   "peerDependencies": {
     "@rokku-x/react-hook-modal": "^0.7.8",
@@ -69,12 +71,14 @@
     "provenance": true
   },
   "scripts": {
-    "build": "vite build",
-    "prepare": "npm run build",
+    "build": "vite build && copyfiles -u 1 \"src/types/**/*.d.ts\" dist/ && copyfiles README.md LICENSE dist/",
     "publish:first": "npm publish --access public --provenance false",
     "dev": "vite",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "changeset": "changeset",
+    "version:changeset": "changeset version",
+    "publish:changeset": "changeset publish --access public"
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",