@yamada-ui/modal 0.1.0

package/dist/modal.js

@@ -0,0 +1,603 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modal.tsx
+var modal_exports = {};
+__export(modal_exports, {
+  Modal: () => Modal,
+  useModal: () => useModal
+});
+module.exports = __toCommonJS(modal_exports);
+var import_core8 = require("@yamada-ui/core");
+var import_focus_lock = require("@yamada-ui/focus-lock");
+var import_motion2 = require("@yamada-ui/motion");
+var import_portal = require("@yamada-ui/portal");
+var import_transitions3 = require("@yamada-ui/transitions");
+var import_use_value = require("@yamada-ui/use-value");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_remove_scroll = require("react-remove-scroll");
+
+// src/modal-overlay.tsx
+var import_core = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModalOverlay = (0, import_core.forwardRef)(
+  ({ className, __css, onClick, ...rest }, ref) => {
+    const { styles, closeOnOverlay, onOverlayClick, onClose, animation, duration } = useModal();
+    const css = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      w: "100vw",
+      h: "100vh",
+      ...__css ? __css : styles.overlay
+    };
+    const props = animation !== "none" ? import_transitions.fadeProps : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        as: import_motion.motion.div,
+        ref,
+        className: (0, import_utils.cx)("ui-modal-overlay", className),
+        custom: { duration },
+        __css: css,
+        onClick: (0, import_utils.handlerAll)(onClick, onOverlayClick, (event) => {
+          event.stopPropagation();
+          if (closeOnOverlay)
+            onClose == null ? void 0 : onClose();
+        }),
+        ...props,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/modal-close-button.tsx
+var import_close_button = require("@yamada-ui/close-button");
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ModalCloseButton = (0, import_core2.forwardRef)(
+  ({ onClick, __css, ...rest }, ref) => {
+    const { styles, onClose } = useModal();
+    const css = {
+      position: "absolute",
+      ...__css ? __css : styles.closeButton
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_close_button.CloseButton,
+      {
+        ref,
+        className: (0, import_utils2.cx)("ui-modal-close-button"),
+        __css: css,
+        onClick: (0, import_utils2.handlerAll)(onClick, (event) => {
+          event.stopPropagation();
+          onClose == null ? void 0 : onClose();
+        }),
+        ...rest
+      }
+    );
+  }
+);
+
+// src/modal-header.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalHeader = (0, import_core3.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...__css ? __css : styles.header
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.header, { ref, className: (0, import_utils3.cx)("ui-modal-header", className), __css: css, ...rest });
+  }
+);
+
+// src/modal-body.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ModalBody = (0, import_core4.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles, scrollBehavior } = useModal();
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      overflow: scrollBehavior === "inside" ? "auto" : void 0,
+      ...__css ? __css : styles.body
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.main, { ref, className: (0, import_utils4.cx)("ui-modal-body", className), __css: css, ...rest });
+  }
+);
+
+// src/modal-footer.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalFooter = (0, import_core5.forwardRef)(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      ...__css ? __css : styles.footer
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.footer, { ref, className: (0, import_utils5.cx)("ui-modal-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/dialog.tsx
+var import_button = require("@yamada-ui/button");
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var [DialogProvider, useDialog] = (0, import_utils6.createContext)({
+  name: `DialogContext`,
+  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
+});
+var Dialog = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Dialog", { size, ...props });
+  const {
+    className,
+    children,
+    withOverlay = true,
+    withCloseButton = true,
+    header,
+    footer,
+    cancel,
+    other,
+    success,
+    onClose,
+    onCancel,
+    onOther,
+    onSuccess,
+    ...rest
+  } = (0, import_core6.omitThemeProps)(mergedProps);
+  const validChildren = (0, import_utils6.getValidChildren)(children);
+  const [customDialogOverlay] = (0, import_utils6.findChildren)(validChildren, DialogOverlay);
+  const [customDialogCloseButton] = (0, import_utils6.findChildren)(validChildren, DialogCloseButton);
+  const [customDialogHeader] = (0, import_utils6.findChildren)(validChildren, DialogHeader);
+  const [customDialogBody] = (0, import_utils6.findChildren)(validChildren, DialogBody);
+  const [customDialogFooter] = (0, import_utils6.findChildren)(validChildren, DialogFooter);
+  const cloneChildren = !(0, import_utils6.isEmpty)(validChildren) ? (0, import_utils6.omitChildren)(
+    validChildren,
+    DialogOverlay,
+    DialogCloseButton,
+    DialogHeader,
+    DialogBody,
+    DialogFooter
+  ) : children;
+  const css = { ...styles.container };
+  const cancelButtonProps = (0, import_utils6.isValidElement)(cancel) ? { children: cancel } : cancel;
+  const otherButtonProps = (0, import_utils6.isValidElement)(other) ? { children: other } : other;
+  const successButtonProps = (0, import_utils6.isValidElement)(success) ? { children: success } : success;
+  if (cancelButtonProps && !cancelButtonProps.variant)
+    cancelButtonProps.variant = "ghost";
+  if (otherButtonProps && !otherButtonProps.colorScheme)
+    otherButtonProps.colorScheme = "secondary";
+  if (successButtonProps && !successButtonProps.colorScheme)
+    successButtonProps.colorScheme = "primary";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Modal,
+    {
+      ref,
+      __css: css,
+      ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
+      children: [
+        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlay, {}) : null,
+        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogCloseButton, {}) : null,
+        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogHeader, { children: header }) : null,
+        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogBody, { children: cloneChildren }) : null,
+        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
+          otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
+          successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
+        ] }) }) : null
+      ]
+    }
+  ) });
+});
+var DialogOverlay = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalOverlay,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-dialog-overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DialogCloseButton = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ModalCloseButton,
+      {
+        ref,
+        className: (0, import_utils6.cx)("ui-dialog-close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DialogHeader = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalHeader, { ref, className: (0, import_utils6.cx)("ui-dialog-header", className), __css: css, ...rest });
+  }
+);
+var DialogBody = (0, import_core6.forwardRef)(({ className, ...rest }, ref) => {
+  const styles = useDialog();
+  const css = { ...styles.body };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalBody, { ref, className: (0, import_utils6.cx)("ui-dialog-body", className), __css: css, ...rest });
+});
+var DialogFooter = (0, import_core6.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalFooter, { ref, className: (0, import_utils6.cx)("ui-dialog-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/drawer.tsx
+var import_core7 = require("@yamada-ui/core");
+var import_transitions2 = require("@yamada-ui/transitions");
+var import_utils7 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var [DrawerProvider, useDrawer] = (0, import_utils7.createContext)({
+  name: `DrawerContext`,
+  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
+});
+var Drawer = (0, import_core7.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("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
+  } = (0, import_core7.omitThemeProps)(mergedProps);
+  const validChildren = (0, import_utils7.getValidChildren)(children);
+  const [customDrawerOverlay, ...cloneChildren] = (0, import_utils7.findChildren)(validChildren, DrawerOverlay);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    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__ */ (0, import_jsx_runtime7.jsx)(DrawerOverlay, {}) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DrawerContent, { ...{ placement, withCloseButton, ...rest }, children: cloneChildren })
+      ]
+    }
+  ) });
+});
+var DrawerContent = (0, import_core7.forwardRef)(
+  ({ className, children, placement, withCloseButton, ...rest }, ref) => {
+    const { isOpen, onClose, duration } = useModal();
+    const styles = useDrawer();
+    const validChildren = (0, import_utils7.getValidChildren)(children);
+    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils7.findChildren)(
+      validChildren,
+      DrawerCloseButton
+    );
+    const css = {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      outline: 0,
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_transitions2.Slide,
+      {
+        ref,
+        className: (0, import_utils7.cx)("ui-drawer", className),
+        tabIndex: -1,
+        isOpen,
+        placement,
+        duration,
+        __css: css,
+        ...rest,
+        children: [
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DrawerCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+var DrawerOverlay = (0, import_core7.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ModalOverlay,
+      {
+        ref,
+        className: (0, import_utils7.cx)("ui-drawer-overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerCloseButton = (0, import_core7.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ModalCloseButton,
+      {
+        ref,
+        className: (0, import_utils7.cx)("ui-drawer-close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DrawerHeader = (0, import_core7.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalHeader, { ref, className: (0, import_utils7.cx)("ui-drawer-header", className), __css: css, ...rest });
+  }
+);
+var DrawerBody = (0, import_core7.forwardRef)(({ className, ...rest }, ref) => {
+  const styles = useDrawer();
+  const css = { ...styles.body };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalBody, { ref, className: (0, import_utils7.cx)("ui-drawer-body", className), __css: css, ...rest });
+});
+var DrawerFooter = (0, import_core7.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalFooter, { ref, className: (0, import_utils7.cx)("ui-drawer-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/modal.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var [ModalProvider, useModal] = (0, import_utils8.createContext)({
+  name: `ModalContext`,
+  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
+});
+var Modal = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Modal", { size, ...props });
+  const {
+    className,
+    children,
+    isOpen,
+    onClose,
+    onOverlayClick,
+    onEsc,
+    onCloseComplete,
+    placement: _placement = "center",
+    outside = "md",
+    withCloseButton = true,
+    withOverlay = true,
+    allowPinchZoom = false,
+    scrollBehavior = "inside",
+    autoFocus,
+    restoreFocus,
+    initialFocusRef,
+    finalFocusRef,
+    blockScrollOnMount = true,
+    closeOnOverlay = true,
+    closeOnEsc = true,
+    lockFocusAcrossFrames = true,
+    animation = "scale",
+    duration,
+    ...rest
+  } = (0, import_core8.omitThemeProps)(mergedProps);
+  const onKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Escape")
+        return;
+      event.stopPropagation();
+      if (closeOnEsc)
+        onClose == null ? void 0 : onClose();
+      onEsc == null ? void 0 : onEsc();
+    },
+    [closeOnEsc, onClose, onEsc]
+  );
+  const validChildren = (0, import_utils8.getValidChildren)(children);
+  const [customModalOverlay, ...cloneChildren] = (0, import_utils8.findChildren)(
+    validChildren,
+    ModalOverlay,
+    DialogOverlay,
+    DrawerOverlay
+  );
+  let [drawerContent] = (0, import_utils8.findChildren)(validChildren, DrawerContent);
+  if (drawerContent)
+    drawerContent = (0, import_react.cloneElement)(drawerContent, { onKeyDown });
+  const placement = (0, import_use_value.useValue)(_placement);
+  const css = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    w: "100vw",
+    h: "100vh",
+    p: size !== "full" ? outside : void 0,
+    display: "flex",
+    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__ */ (0, import_jsx_runtime8.jsx)(
+    ModalProvider,
+    {
+      value: {
+        isOpen,
+        onClose,
+        onOverlayClick,
+        withCloseButton,
+        scrollBehavior,
+        closeOnOverlay,
+        animation,
+        duration,
+        styles
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_motion2.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_focus_lock.FocusLock,
+        {
+          autoFocus,
+          initialFocusRef,
+          finalFocusRef,
+          restoreFocus,
+          lockFocusAcrossFrames,
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_react_remove_scroll.RemoveScroll,
+            {
+              allowPinchZoom,
+              enabled: blockScrollOnMount,
+              forwardProps: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.ui.div, { __css: css, children: [
+                customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalOverlay, {}) : null,
+                drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalContent, { ref, className, onKeyDown, ...rest, children: cloneChildren })
+              ] })
+            }
+          )
+        }
+      ) }) : null })
+    }
+  );
+});
+var getModalContentProps = (animation = "scale", duration) => {
+  switch (animation) {
+    case "scale":
+      return {
+        ...import_transitions3.scaleFadeProps,
+        custom: { scale: 0.95, reverse: true, duration }
+      };
+    case "top":
+      return {
+        ...import_transitions3.slideFadeProps,
+        custom: { offsetY: -16, reverse: true, duration }
+      };
+    case "right":
+      return {
+        ...import_transitions3.slideFadeProps,
+        custom: { offsetX: 16, reverse: true, duration }
+      };
+    case "left":
+      return {
+        ...import_transitions3.slideFadeProps,
+        custom: { offsetX: -16, reverse: true, duration }
+      };
+    case "bottom":
+      return {
+        ...import_transitions3.slideFadeProps,
+        custom: { offsetY: 16, reverse: true, duration }
+      };
+  }
+};
+var ModalContent = (0, import_core8.forwardRef)(
+  ({ className, children, __css, ...rest }, ref) => {
+    const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
+    const validChildren = (0, import_utils8.getValidChildren)(children);
+    const [customModalCloseButton, ...cloneChildren] = (0, import_utils8.findChildren)(
+      validChildren,
+      ModalCloseButton,
+      DialogCloseButton
+    );
+    const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
+    const css = {
+      position: "relative",
+      maxH: "100%",
+      display: "flex",
+      flexDirection: "column",
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
+      outline: 0,
+      ...__css ? __css : styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_core8.ui.section,
+      {
+        as: import_motion2.motion.section,
+        ref,
+        className: (0, import_utils8.cx)("ui-modal", className),
+        tabIndex: -1,
+        __css: css,
+        ...props,
+        ...rest,
+        children: [
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  useModal
+});

package/dist/modal.mjs

@@ -0,0 +1,8 @@
+import {
+  Modal,
+  useModal
+} from "./chunk-5E5WMNCI.mjs";
+export {
+  Modal,
+  useModal
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@yamada-ui/modal",
+  "version": "0.1.0",
+  "description": "Yamada UI modal component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "modal",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/modal"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "react-remove-scroll": "^2.5.4",
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/portal": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/motion": "0.1.0",
+    "@yamada-ui/button": "0.1.0",
+    "@yamada-ui/transitions": "0.1.0",
+    "@yamada-ui/focus-lock": "0.1.0",
+    "@yamada-ui/close-button": "0.1.0",
+    "@yamada-ui/use-value": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}