@rokku-x/react-hook-dialog 1.0.3 → 1.0.4

package/README.md

@@ -72,13 +72,6 @@ function MyComponent() {
 }
 ```
 
-## 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
@@ -276,6 +269,8 @@ function DeleteConfirm() {
 }
 ```
 
+![Example 1 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-1.png)
+
 ### Example 2: Multiple Action Rows
 
 ```tsx
@@ -294,6 +289,8 @@ await requestDialog({
 });
 ```
 
+![Example 2 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-2.png)
+
 ### Example 3: Custom Styling
 
 ```tsx
@@ -318,6 +315,8 @@ await requestDialog({
 });
 ```
 
+![Example 3 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-3.png)
+
 ### Example 4: Custom Button Variants
 
 ```tsx
@@ -338,6 +337,8 @@ await requestDialog({
 });
 ```
 
+![Example 4 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-4.png)
+
 ### Example 5: Button Click Handlers
 
 ```tsx
@@ -357,6 +358,8 @@ await requestDialog({
 });
 ```
 
+![Example 5 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-5.png)
+
 ### Example 6: Rich Content
 
 ```tsx
@@ -377,6 +380,8 @@ await requestDialog({
 });
 ```
 
+![Example 6 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-6.png)
+
 ### Example 7: Default Configuration
 
 ```tsx
@@ -395,6 +400,8 @@ await requestDialog({
 });
 ```
 
+![Example 7 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-7.png)
+
 ### Example 8: Alert Dialog
 
 ```tsx
@@ -413,6 +420,8 @@ async function showAlert(message: string) {
 showAlert('Operation completed successfully!');
 ```
 
+![Example 8 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-8.png)
+
 ### Example 9: Multiple Choice with Different Values
 
 ```tsx
@@ -439,6 +448,8 @@ const handleSaveOptions = async () => {
 };
 ```
 
+![Example 9 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-9.png)
+
 ### Example 10: Numeric Rating Dialog
 
 ```tsx
@@ -468,6 +479,8 @@ const handleRating = async () => {
 };
 ```
 
+![Example 10 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-10.png)
+
 ### Example 11: Conditional Actions Based on Result
 
 ```tsx
@@ -515,6 +528,8 @@ const handleFileOperation = async () => {
 };
 ```
 
+![Example 11 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-11.png)
+
 ### Example 12: Handle Cancel vs Reject
 
 ```tsx
@@ -544,6 +559,8 @@ const handleWithErrorHandling = async () => {
 };
 ```
 
+![Example 12 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-12.png)
+
 ### Example 13: Form Submission with Validation
 
 ```tsx
@@ -587,6 +604,33 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+![Example 13 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-13.png)
+
+### 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';
+  }
+};
+```
+
+![Example 14 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-14.png)
+
 ### Example 15: Form Dialog Returning Values (isReturnSubmit)
 
 ```tsx
@@ -623,40 +667,9 @@ async function openProfileDialog() {
 }
 ```
 
-> 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();
+![Example 15 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-15.png)
 
-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
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
 
 ## Types
 
@@ -684,6 +697,17 @@ Custom styles for each variant type.
 - ARIA labels provided for interactive elements
 - Supports custom ARIA attributes via className injection
 
+## 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
+
 ## Troubleshooting
 
 ### Dialog not appearing
@@ -699,6 +723,14 @@ Custom styles for each variant type.
 - Ensure action buttons have appropriate `value` or are configured as cancel buttons
 - Check that action click handlers don't prevent default behavior
 
+
+## 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.
+
 ## License
 
 MIT

package/dist/README.md

@@ -72,13 +72,6 @@ function MyComponent() {
 }
 ```
 
-## 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
@@ -276,6 +269,8 @@ function DeleteConfirm() {
 }
 ```
 
+![Example 1 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-1.png)
+
 ### Example 2: Multiple Action Rows
 
 ```tsx
@@ -294,6 +289,8 @@ await requestDialog({
 });
 ```
 
+![Example 2 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-2.png)
+
 ### Example 3: Custom Styling
 
 ```tsx
@@ -318,6 +315,8 @@ await requestDialog({
 });
 ```
 
+![Example 3 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-3.png)
+
 ### Example 4: Custom Button Variants
 
 ```tsx
@@ -338,6 +337,8 @@ await requestDialog({
 });
 ```
 
+![Example 4 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-4.png)
+
 ### Example 5: Button Click Handlers
 
 ```tsx
@@ -357,6 +358,8 @@ await requestDialog({
 });
 ```
 
+![Example 5 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-5.png)
+
 ### Example 6: Rich Content
 
 ```tsx
@@ -377,6 +380,8 @@ await requestDialog({
 });
 ```
 
+![Example 6 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-6.png)
+
 ### Example 7: Default Configuration
 
 ```tsx
@@ -395,6 +400,8 @@ await requestDialog({
 });
 ```
 
+![Example 7 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-7.png)
+
 ### Example 8: Alert Dialog
 
 ```tsx
@@ -413,6 +420,8 @@ async function showAlert(message: string) {
 showAlert('Operation completed successfully!');
 ```
 
+![Example 8 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-8.png)
+
 ### Example 9: Multiple Choice with Different Values
 
 ```tsx
@@ -439,6 +448,8 @@ const handleSaveOptions = async () => {
 };
 ```
 
+![Example 9 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-9.png)
+
 ### Example 10: Numeric Rating Dialog
 
 ```tsx
@@ -468,6 +479,8 @@ const handleRating = async () => {
 };
 ```
 
+![Example 10 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-10.png)
+
 ### Example 11: Conditional Actions Based on Result
 
 ```tsx
@@ -515,6 +528,8 @@ const handleFileOperation = async () => {
 };
 ```
 
+![Example 11 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-11.png)
+
 ### Example 12: Handle Cancel vs Reject
 
 ```tsx
@@ -544,6 +559,8 @@ const handleWithErrorHandling = async () => {
 };
 ```
 
+![Example 12 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-12.png)
+
 ### Example 13: Form Submission with Validation
 
 ```tsx
@@ -587,6 +604,33 @@ const handleFormSubmit = async (formData: any) => {
 };
 ```
 
+![Example 13 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-13.png)
+
+### 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';
+  }
+};
+```
+
+![Example 14 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-14.png)
+
 ### Example 15: Form Dialog Returning Values (isReturnSubmit)
 
 ```tsx
@@ -623,40 +667,9 @@ async function openProfileDialog() {
 }
 ```
 
-> 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();
+![Example 15 Screenshot](https://jgd.qzz.io/screenshots/react-hook-dialog-example-15.png)
 
-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
+> Note: `isReturnSubmit` overrides `noActionReturn` and returns the serialized form values as the action `value`. `isSubmit` still triggers `requestSubmit()` to allow native validation flows.
 
 ## Types
 
@@ -684,6 +697,17 @@ Custom styles for each variant type.
 - ARIA labels provided for interactive elements
 - Supports custom ARIA attributes via className injection
 
+## 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
+
 ## Troubleshooting
 
 ### Dialog not appearing
@@ -699,6 +723,14 @@ Custom styles for each variant type.
 - Ensure action buttons have appropriate `value` or are configured as cancel buttons
 - Check that action click handlers don't prevent default behavior
 
+
+## 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.
+
 ## License
 
 MIT

package/dist/components/ModalWindow.cjs.js

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

package/dist/components/ModalWindow.esm.js

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

package/dist/constants/theme.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.baseVariantStyles={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"}};

package/dist/constants/theme.esm.js

@@ -0,0 +1 @@
+const o={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"}};export{o as baseVariantStyles};

package/dist/hooks/useHookDialog.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),a=require("@rokku-x/react-hook-modal"),s=require("../components/ModalWindow.cjs.js"),t=require("../store/dialogStore.cjs.js");exports.default=function(o){const{instances:n,addInstance:l,removeInstance:c,getInstance:r}=t.useDialogStore(),i=a.useBaseModal(),u=e.useCallback(e=>{const a=r(e);a&&(i.popModal(e),!1!==a.config.rejectOnCancel?a.reject(a.config.defaultCancelValue):a.resolve(a.config.defaultCancelValue),c(e))},[r,c,i]),d=e.useCallback((e,a)=>{const s=r(e);s&&(i.popModal(e),a.isCancel&&!1!==s.config.rejectOnCancel?s.reject(a.value):s.resolve(a.value),c(e))},[r,c,i]);return[function(a){return new Promise((t,n)=>{const c=Math.random().toString(36).substring(2,6),r={...o,...a,classNames:{...o?.classNames,...a.classNames},styles:{...o?.styles,...a.styles},variantStyles:{...o?.variantStyles,...a.variantStyles}},f={id:c,config:r,resolve:t,reject:n};l(f),f.id=i.pushModal(c,e.createElement(s.default,{config:r,modalWindowId:c,handleClose:u,handleAction:d}))})}]};

package/dist/hooks/useHookDialog.esm.js

@@ -0,0 +1 @@
+import e,{useCallback as o}from"react";import{useBaseModal as t}from"@rokku-x/react-hook-modal";import n from"../components/ModalWindow.esm.js";import{useDialogStore as a}from"../store/dialogStore.esm.js";function s(s){const{instances:l,addInstance:r,removeInstance:c,getInstance:i}=a(),d=t(),m=o(e=>{const o=i(e);o&&(d.popModal(e),!1!==o.config.rejectOnCancel?o.reject(o.config.defaultCancelValue):o.resolve(o.config.defaultCancelValue),c(e))},[i,c,d]),f=o((e,o)=>{const t=i(e);t&&(d.popModal(e),o.isCancel&&!1!==t.config.rejectOnCancel?t.reject(o.value):t.resolve(o.value),c(e))},[i,c,d]);return[function(o){return new Promise((t,a)=>{const l=Math.random().toString(36).substring(2,6),c={...s,...o,classNames:{...s?.classNames,...o.classNames},styles:{...s?.styles,...o.styles},variantStyles:{...s?.variantStyles,...o.variantStyles}},i={id:l,config:c,resolve:t,reject:a};r(i),i.id=d.pushModal(l,e.createElement(n,{config:c,modalWindowId:l,handleClose:m,handleAction:f}))})}]}export{s as default};

package/dist/index.cjs.js

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@rokku-x/react-hook-modal"),o=require("./hooks/useHookDialog.cjs.js");Object.defineProperty(exports,"BaseModalRenderer",{enumerable:!0,get:()=>e.BaseModalRenderer}),exports.useHookDialog=o.default;

package/dist/index.esm.js

@@ -1,192 +1 @@
-"use client";
-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" },
-  success: { backgroundColor: "#16a34a", color: "#fff" },
-  warning: { backgroundColor: "#f59e0b", color: "#111" },
-  info: { backgroundColor: "#0ea5e9", color: "#fff" },
-  neutral: { backgroundColor: "#6b7280", color: "#fff" }
-};
-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: k,
-      className: f.backdrop || "",
-      style: o.backdrop,
-      children: /* @__PURE__ */ w(
-        I,
-        {
-          ref: $,
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": d ? `${t}-title` : void 0,
-          className: f.dialog || "",
-          style: o.dialog,
-          children: [
-            N && /* @__PURE__ */ p(
-              "button",
-              {
-                type: "button",
-                className: `hook-dialog-close-button ${f.closeButton || ""}`,
-                "aria-label": "Close",
-                onClick: () => s(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: "×"
-              }
-            ),
-            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",
-                  {
-                    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",
-                      borderRadius: 15,
-                      padding: "10px 18px",
-                      fontSize: 14,
-                      fontWeight: 800,
-                      cursor: "pointer",
-                      ...D,
-                      ...o.actionButton,
-                      ...e.style || {}
-                    },
-                    children: e.title
-                  },
-                  `${e.title}-${m}`
-                );
-              };
-              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);
-            }) })
-          ]
-        }
-      )
-    }
-  );
-}
-const P = L((t, u) => ({
-  instances: [],
-  addInstance: (s) => t((n) => ({
-    instances: [...n.instances, s]
-  })),
-  removeInstance: (s) => t((n) => ({
-    instances: n.instances.filter((a) => a.id !== s)
-  })),
-  getInstance: (s) => u().instances.find((n) => n.id === s)
-}));
-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 {
-  X as BaseModalRenderer,
-  Q as useHookDialog
-};
+import{BaseModalRenderer as o}from"@rokku-x/react-hook-modal";import{default as a}from"./hooks/useHookDialog.esm.js";export{o as BaseModalRenderer,a as useHookDialog};

package/dist/store/dialogStore.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("zustand").create((e,n)=>({instances:[],addInstance:n=>e(e=>({instances:[...e.instances,n]})),removeInstance:n=>e(e=>({instances:e.instances.filter(e=>e.id!==n)})),getInstance:e=>n().instances.find(n=>n.id===e)}));exports.useDialogStore=e;

package/dist/store/dialogStore.esm.js

@@ -0,0 +1 @@
+import{create as n}from"zustand";const s=n((n,s)=>({instances:[],addInstance:s=>n(n=>({instances:[...n.instances,s]})),removeInstance:s=>n(n=>({instances:n.instances.filter(n=>n.id!==s)})),getInstance:n=>s().instances.find(s=>s.id===n)}));export{s as useDialogStore};

package/dist/utils/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.FormDataToObject=function(e){const t={};return e.forEach((e,r)=>{if(r in t){const o=t[r];Array.isArray(o)?o.push(e):t[r]=[o,e]}else t[r]=e}),t},exports.IsForm=t=>e.isValidElement(t)&&("form"===t.type||"string"==typeof t.type&&"form"===t.type.toLowerCase());

package/dist/utils/utils.esm.js

@@ -0,0 +1 @@
+import r from"react";function t(r){const t={};return r.forEach((r,e)=>{if(e in t){const o=t[e];Array.isArray(o)?o.push(r):t[e]=[o,r]}else t[e]=r}),t}const e=t=>r.isValidElement(t)&&("form"===t.type||"string"==typeof t.type&&"form"===t.type.toLowerCase());export{t as FormDataToObject,e as IsForm};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokku-x/react-hook-dialog",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "rokku-x",
   "repository": {
     "type": "git",
@@ -8,24 +8,8 @@
   },
   "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",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
-    "jsdom": "^24.1.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^1.6.1",
-    "copyfiles": "^2.4.1"
-  },
   "peerDependencies": {
-    "@rokku-x/react-hook-modal": "^0.7.8",
+    "@rokku-x/react-hook-modal": "^0.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "zustand": "^5.0.10"
@@ -66,20 +50,6 @@
     "react-modal"
   ],
   "license": "MIT",
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  },
-  "scripts": {
-    "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",
-    "changeset": "changeset",
-    "version:changeset": "changeset version",
-    "publish:changeset": "changeset publish --access public"
-  },
   "sideEffects": false,
   "types": "dist/index.d.ts",
   "typesVersions": {
@@ -89,4 +59,4 @@
       ]
     }
   }
-}
+}