@yamada-ui/modal 0.1.12 → 0.2.0

package/dist/{chunk-IFQ6QPEJ.mjs → chunk-MCXUVWUW.mjs}

@@ -1,9 +1,18 @@
+// src/drawer.tsx
+import {
+  forwardRef as forwardRef8,
+  useMultiComponentStyle as useMultiComponentStyle3,
+  omitThemeProps as omitThemeProps3
+} from "@yamada-ui/core";
+import { Slide } from "@yamada-ui/transitions";
+import { createContext as createContext3, getValidChildren as getValidChildren3, findChildren as findChildren3, cx as cx8 } from "@yamada-ui/utils";
+
 // src/modal.tsx
 import {
   ui as ui5,
-  forwardRef as forwardRef8,
-  omitThemeProps as omitThemeProps3,
-  useMultiComponentStyle as useMultiComponentStyle3
+  forwardRef as forwardRef7,
+  omitThemeProps as omitThemeProps2,
+  useMultiComponentStyle as useMultiComponentStyle2
 } from "@yamada-ui/core";
 import { FocusLock } from "@yamada-ui/focus-lock";
 import {
@@ -13,7 +22,7 @@ import {
 import { Portal } from "@yamada-ui/portal";
 import { scaleFadeProps, slideFadeProps } from "@yamada-ui/transitions";
 import { useValue } from "@yamada-ui/use-value";
-import { cx as cx8, createContext as createContext3, getValidChildren as getValidChildren3, findChildren as findChildren3 } from "@yamada-ui/utils";
+import { cx as cx7, createContext as createContext2, getValidChildren as getValidChildren2, findChildren as findChildren2 } from "@yamada-ui/utils";
 import { cloneElement, useCallback } from "react";
 import { RemoveScroll } from "react-remove-scroll";
 
@@ -268,169 +277,14 @@ var DialogFooter = forwardRef6(
   }
 );
 
-// src/drawer.tsx
-import {
-  forwardRef as forwardRef7,
-  useMultiComponentStyle as useMultiComponentStyle2,
-  omitThemeProps as omitThemeProps2
-} from "@yamada-ui/core";
-import { Slide } from "@yamada-ui/transitions";
-import { createContext as createContext2, getValidChildren as getValidChildren2, findChildren as findChildren2, cx as cx7 } from "@yamada-ui/utils";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var [DrawerProvider, useDrawer] = createContext2({
-  name: `DrawerContext`,
-  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
-});
-var Drawer = forwardRef7(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle2("Drawer", { size, ...props });
-  const {
-    className,
-    children,
-    isOpen,
-    placement = "right",
-    onClose,
-    onOverlayClick,
-    onEsc,
-    onCloseComplete,
-    withCloseButton = true,
-    withOverlay = true,
-    allowPinchZoom,
-    autoFocus,
-    restoreFocus,
-    initialFocusRef,
-    finalFocusRef,
-    blockScrollOnMount,
-    closeOnOverlay,
-    closeOnEsc,
-    lockFocusAcrossFrames,
-    duration = { enter: 0.4, exit: 0.3 },
-    ...rest
-  } = omitThemeProps2(mergedProps);
-  const validChildren = getValidChildren2(children);
-  const [customDrawerOverlay, ...cloneChildren] = findChildren2(validChildren, DrawerOverlay);
-  return /* @__PURE__ */ jsx7(DrawerProvider, { value: styles, children: /* @__PURE__ */ jsxs2(
-    Modal,
-    {
-      ref,
-      ...{
-        isOpen,
-        onClose,
-        onOverlayClick,
-        onEsc,
-        onCloseComplete,
-        withCloseButton: false,
-        withOverlay: false,
-        allowPinchZoom,
-        autoFocus,
-        restoreFocus,
-        initialFocusRef,
-        finalFocusRef,
-        blockScrollOnMount,
-        closeOnOverlay,
-        closeOnEsc,
-        lockFocusAcrossFrames,
-        duration
-      },
-      children: [
-        customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ jsx7(DrawerOverlay, {}) : null,
-        /* @__PURE__ */ jsx7(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
-      ]
-    }
-  ) });
-});
-var DrawerContent = forwardRef7(
-  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
-    const styles = useDrawer();
-    const validChildren = getValidChildren2(children);
-    const [customDrawerCloseButton, ...cloneChildren] = findChildren2(
-      validChildren,
-      DrawerCloseButton
-    );
-    const css = {
-      display: "flex",
-      flexDirection: "column",
-      width: "100%",
-      outline: 0,
-      ...styles.container
-    };
-    return /* @__PURE__ */ jsxs2(
-      Slide,
-      {
-        ref,
-        className: cx7("ui-drawer", className),
-        tabIndex: -1,
-        isOpen,
-        placement,
-        duration,
-        __css: css,
-        ...rest,
-        children: [
-          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx7(DrawerCloseButton, {}) : null,
-          cloneChildren
-        ]
-      }
-    );
-  }
-);
-var DrawerOverlay = forwardRef7(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.overlay };
-    return /* @__PURE__ */ jsx7(
-      ModalOverlay,
-      {
-        ref,
-        className: cx7("ui-drawer-overlay", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerCloseButton = forwardRef7(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ jsx7(
-      ModalCloseButton,
-      {
-        ref,
-        className: cx7("ui-drawer-close-button", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerHeader = forwardRef7(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ jsx7(ModalHeader, { ref, className: cx7("ui-drawer-header", className), __css: css, ...rest });
-  }
-);
-var DrawerBody = forwardRef7(({ className, ...rest }, ref) => {
-  const styles = useDrawer();
-  const css = { ...styles.body };
-  return /* @__PURE__ */ jsx7(ModalBody, { ref, className: cx7("ui-drawer-body", className), __css: css, ...rest });
-});
-var DrawerFooter = forwardRef7(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ jsx7(ModalFooter, { ref, className: cx7("ui-drawer-footer", className), __css: css, ...rest });
-  }
-);
-
 // src/modal.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var [ModalProvider, useModal] = createContext3({
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var [ModalProvider, useModal] = createContext2({
   name: `ModalContext`,
   errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
 });
-var Modal = forwardRef8(({ size, ...props }, ref) => {
-  const [styles, mergedProps] = useMultiComponentStyle3("Modal", { size, ...props });
+var Modal = forwardRef7(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle2("Modal", { size, ...props });
   const {
     className,
     children,
@@ -456,7 +310,7 @@ var Modal = forwardRef8(({ size, ...props }, ref) => {
     animation = "scale",
     duration,
     ...rest
-  } = omitThemeProps3(mergedProps);
+  } = omitThemeProps2(mergedProps);
   const onKeyDown = useCallback(
     (event) => {
       if (event.key !== "Escape")
@@ -468,14 +322,14 @@ var Modal = forwardRef8(({ size, ...props }, ref) => {
     },
     [closeOnEsc, onClose, onEsc]
   );
-  const validChildren = getValidChildren3(children);
-  const [customModalOverlay, ...cloneChildren] = findChildren3(
+  const validChildren = getValidChildren2(children);
+  const [customModalOverlay, ...cloneChildren] = findChildren2(
     validChildren,
     ModalOverlay,
     DialogOverlay,
     DrawerOverlay
   );
-  let [drawerContent] = findChildren3(validChildren, DrawerContent);
+  let [drawerContent] = findChildren2(validChildren, DrawerContent);
   if (drawerContent)
     drawerContent = cloneElement(drawerContent, { onKeyDown });
   const placement = useValue(_placement);
@@ -491,7 +345,7 @@ var Modal = forwardRef8(({ size, ...props }, ref) => {
     justifyContent: placement.includes("right") ? "flex-start" : placement.includes("left") ? "flex-end" : "center",
     alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     ModalProvider,
     {
       value: {
@@ -505,7 +359,7 @@ var Modal = forwardRef8(({ size, ...props }, ref) => {
         duration,
         styles
       },
-      children: /* @__PURE__ */ jsx8(AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx7(AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(
         FocusLock,
         {
           autoFocus,
@@ -513,15 +367,15 @@ var Modal = forwardRef8(({ size, ...props }, ref) => {
           finalFocusRef,
           restoreFocus,
           lockFocusAcrossFrames,
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx7(
             RemoveScroll,
             {
               allowPinchZoom,
               enabled: blockScrollOnMount,
               forwardProps: true,
-              children: /* @__PURE__ */ jsxs3(ui5.div, { __css: css, children: [
-                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx8(ModalOverlay, {}) : null,
-                drawerContent != null ? drawerContent : /* @__PURE__ */ jsx8(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
+              children: /* @__PURE__ */ jsxs2(ui5.div, { __css: css, children: [
+                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx7(ModalOverlay, {}) : null,
+                drawerContent != null ? drawerContent : /* @__PURE__ */ jsx7(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
               ] })
             }
           )
@@ -559,11 +413,11 @@ var getModalContentProps = (animation = "scale", duration) => {
       };
   }
 };
-var ModalContent = forwardRef8(
+var ModalContent = forwardRef7(
   ({ className, children, __css, ...rest }, ref) => {
     const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
-    const validChildren = getValidChildren3(children);
-    const [customModalCloseButton, ...cloneChildren] = findChildren3(
+    const validChildren = getValidChildren2(children);
+    const [customModalCloseButton, ...cloneChildren] = findChildren2(
       validChildren,
       ModalCloseButton,
       DialogCloseButton
@@ -578,18 +432,18 @@ var ModalContent = forwardRef8(
       outline: 0,
       ...__css ? __css : styles.container
     };
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs2(
       ui5.section,
       {
         as: motion2.section,
         ref,
-        className: cx8("ui-modal", className),
+        className: cx7("ui-modal", className),
         tabIndex: -1,
         __css: css,
         ...props,
         ...rest,
         children: [
-          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx8(ModalCloseButton, {}) : null,
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx7(ModalCloseButton, {}) : null,
           cloneChildren
         ]
       }
@@ -597,14 +451,155 @@ var ModalContent = forwardRef8(
   }
 );
 
+// src/drawer.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var [DrawerProvider, useDrawer] = createContext3({
+  name: `DrawerContext`,
+  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
+});
+var Drawer = forwardRef8(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle3("Drawer", { size, ...props });
+  const {
+    className,
+    children,
+    isOpen,
+    placement = "right",
+    onClose,
+    onOverlayClick,
+    onEsc,
+    onCloseComplete,
+    withCloseButton = true,
+    withOverlay = true,
+    allowPinchZoom,
+    autoFocus,
+    restoreFocus,
+    initialFocusRef,
+    finalFocusRef,
+    blockScrollOnMount,
+    closeOnOverlay,
+    closeOnEsc,
+    lockFocusAcrossFrames,
+    duration = { enter: 0.4, exit: 0.3 },
+    ...rest
+  } = omitThemeProps3(mergedProps);
+  const validChildren = getValidChildren3(children);
+  const [customDrawerOverlay, ...cloneChildren] = findChildren3(validChildren, DrawerOverlay);
+  return /* @__PURE__ */ jsx8(DrawerProvider, { value: styles, children: /* @__PURE__ */ jsxs3(
+    Modal,
+    {
+      ref,
+      ...{
+        isOpen,
+        onClose,
+        onOverlayClick,
+        onEsc,
+        onCloseComplete,
+        withCloseButton: false,
+        withOverlay: false,
+        allowPinchZoom,
+        autoFocus,
+        restoreFocus,
+        initialFocusRef,
+        finalFocusRef,
+        blockScrollOnMount,
+        closeOnOverlay,
+        closeOnEsc,
+        lockFocusAcrossFrames,
+        duration
+      },
+      children: [
+        customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ jsx8(DrawerOverlay, {}) : null,
+        /* @__PURE__ */ jsx8(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
+      ]
+    }
+  ) });
+});
+var DrawerContent = forwardRef8(
+  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
+    const { isOpen, onClose, duration } = useModal();
+    const styles = useDrawer();
+    const validChildren = getValidChildren3(children);
+    const [customDrawerCloseButton, ...cloneChildren] = findChildren3(
+      validChildren,
+      DrawerCloseButton
+    );
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      outline: 0,
+      ...styles.container
+    };
+    return /* @__PURE__ */ jsxs3(
+      Slide,
+      {
+        ref,
+        className: cx8("ui-drawer", className),
+        tabIndex: -1,
+        isOpen,
+        placement,
+        duration,
+        __css: css,
+        ...rest,
+        children: [
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx8(DrawerCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+var DrawerOverlay = forwardRef8(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ jsx8(
+      ModalOverlay,
+      {
+        ref,
+        className: cx8("ui-drawer-overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerCloseButton = forwardRef8(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ jsx8(
+      ModalCloseButton,
+      {
+        ref,
+        className: cx8("ui-drawer-close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerHeader = forwardRef8(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ jsx8(ModalHeader, { ref, className: cx8("ui-drawer-header", className), __css: css, ...rest });
+  }
+);
+var DrawerBody = forwardRef8(({ className, ...rest }, ref) => {
+  const styles = useDrawer();
+  const css = { ...styles.body };
+  return /* @__PURE__ */ jsx8(ModalBody, { ref, className: cx8("ui-drawer-body", className), __css: css, ...rest });
+});
+var DrawerFooter = forwardRef8(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ jsx8(ModalFooter, { ref, className: cx8("ui-drawer-footer", className), __css: css, ...rest });
+  }
+);
+
 export {
-  useModal,
-  Modal,
-  ModalOverlay,
-  ModalCloseButton,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
   Drawer,
   DrawerContent,
   DrawerOverlay,
@@ -612,6 +607,13 @@ export {
   DrawerHeader,
   DrawerBody,
   DrawerFooter,
+  useModal,
+  Modal,
+  ModalOverlay,
+  ModalCloseButton,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
   Dialog,
   DialogOverlay,
   DialogCloseButton,

package/dist/dialog.d.ts

@@ -12,13 +12,37 @@ import '@yamada-ui/focus-lock';
 import '@yamada-ui/motion';
 
 type DialogOptions = {
+    /**
+     * The dialog header to use.
+     */
     header?: ReactNode;
+    /**
+     * The dialog footer to use.
+     */
     footer?: ReactNode;
+    /**
+     * The dialog cancel to use.
+     */
     cancel?: ReactNode | ButtonProps;
+    /**
+     * The dialog other to use.
+     */
     other?: ReactNode | ButtonProps;
+    /**
+     * The dialog success to use.
+     */
     success?: ReactNode | ButtonProps;
+    /**
+     * The callback invoked when cancel button clicked.
+     */
     onCancel?: (onClose: (() => void) | undefined) => void;
+    /**
+     * The callback invoked when other button clicked.
+     */
     onOther?: (onClose: (() => void) | undefined) => void;
+    /**
+     * The callback invoked when success button clicked.
+     */
     onSuccess?: (onClose: (() => void) | undefined) => void;
 };
 type DialogProps = Omit<ModalProps, keyof ThemeProps> & ThemeProps<'Dialog'> & DialogOptions;