@yamada-ui/modal 0.2.4 → 0.2.6

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

@@ -211,6 +211,7 @@ var Dialog = forwardRef6(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: cx6("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -460,7 +461,6 @@ var [DrawerProvider, useDrawer] = createContext3({
 var Drawer = forwardRef8(({ size, ...props }, ref) => {
   const [styles, mergedProps] = useMultiComponentStyle3("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/dialog.d.mts

@@ -0,0 +1,61 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps } from '@yamada-ui/core';
+import { ButtonProps } from '@yamada-ui/button';
+import { CloseButtonProps } from '@yamada-ui/close-button';
+import { ReactNode } from 'react';
+import { ModalProps } from './modal.mjs';
+import { ModalOverlayProps } from './modal-overlay.mjs';
+import { ModalHeaderProps } from './modal-header.mjs';
+import { ModalBodyProps } from './modal-body.mjs';
+import { ModalFooterProps } from './modal-footer.mjs';
+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;
+declare const Dialog: _yamada_ui_core.Component<"section", DialogProps>;
+type DialogOverlayProps = ModalOverlayProps;
+declare const DialogOverlay: _yamada_ui_core.Component<"div", ModalOverlayProps>;
+type DialogCloseButtonProps = CloseButtonProps;
+declare const DialogCloseButton: _yamada_ui_core.Component<"button", CloseButtonProps>;
+type DialogHeaderProps = ModalHeaderProps;
+declare const DialogHeader: _yamada_ui_core.Component<"header", ModalHeaderProps>;
+type DialogBodyProps = ModalBodyProps;
+declare const DialogBody: _yamada_ui_core.Component<"main", ModalBodyProps>;
+type DialogFooterProps = ModalFooterProps;
+declare const DialogFooter: _yamada_ui_core.Component<"footer", ModalFooterProps>;
+
+export { Dialog, DialogBody, DialogBodyProps, DialogCloseButton, DialogCloseButtonProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogProps };

package/dist/dialog.js

@@ -55,7 +55,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
 var Drawer = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",
@@ -538,6 +537,7 @@ var Dialog = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils8.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [

package/dist/dialog.mjs

@@ -5,7 +5,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogOverlay
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   Dialog,
   DialogBody,

package/dist/drawer.d.mts

@@ -0,0 +1,41 @@
+import * as _yamada_ui_close_button from '@yamada-ui/close-button';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { ThemeProps } from '@yamada-ui/core';
+import { SlideProps } from '@yamada-ui/transitions';
+import { ModalProps } from './modal.mjs';
+import { ModalOverlayProps } from './modal-overlay.mjs';
+import { ModalCloseButtonProps } from './modal-close-button.mjs';
+import { ModalHeaderProps } from './modal-header.mjs';
+import { ModalBodyProps } from './modal-body.mjs';
+import { ModalFooterProps } from './modal-footer.mjs';
+import '@yamada-ui/focus-lock';
+import '@yamada-ui/motion';
+
+type DrawerOptions = {
+    /**
+     * The placement of the drawer.
+     *
+     * @default 'right'
+     */
+    placement?: SlideProps['placement'];
+    /**
+     * If `true` and drawer's placement is `top` or `bottom`, the drawer will occupy the viewport height (100vh).
+     */
+    isFullHeight?: boolean;
+};
+type DrawerProps = Omit<ModalProps, 'scrollBehavior' | 'animation' | 'outside' | keyof ThemeProps> & ThemeProps<'Drawer'> & DrawerOptions;
+declare const Drawer: _yamada_ui_core.Component<"div", DrawerProps>;
+type DrawerContentProps = Omit<DrawerProps, 'color' | 'transition' | 'isOpen' | keyof ThemeProps>;
+declare const DrawerContent: _yamada_ui_core.Component<"div", DrawerContentProps>;
+type DrawerOverlayProps = ModalOverlayProps;
+declare const DrawerOverlay: _yamada_ui_core.Component<"div", ModalOverlayProps>;
+type DrawerCloseButtonProps = ModalCloseButtonProps;
+declare const DrawerCloseButton: _yamada_ui_core.Component<"button", _yamada_ui_close_button.CloseButtonProps>;
+type DrawerHeaderProps = ModalHeaderProps;
+declare const DrawerHeader: _yamada_ui_core.Component<"header", ModalHeaderProps>;
+type DrawerBodyProps = ModalBodyProps;
+declare const DrawerBody: _yamada_ui_core.Component<"main", ModalBodyProps>;
+type DrawerFooterProps = ModalFooterProps;
+declare const DrawerFooter: _yamada_ui_core.Component<"footer", ModalFooterProps>;
+
+export { Drawer, DrawerBody, DrawerBodyProps, DrawerCloseButton, DrawerCloseButtonProps, DrawerContent, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerProps };

package/dist/drawer.js

@@ -217,6 +217,7 @@ var Dialog = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils6.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -466,7 +467,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils8.createContext)({
 var Drawer = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core8.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/drawer.mjs

@@ -6,7 +6,7 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerOverlay
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   Drawer,
   DrawerBody,

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+export { Modal, ModalProps } from './modal.mjs';
+export { ModalOverlay, ModalOverlayProps } from './modal-overlay.mjs';
+export { ModalCloseButton, ModalCloseButtonProps } from './modal-close-button.mjs';
+export { ModalHeader, ModalHeaderProps } from './modal-header.mjs';
+export { ModalBody, ModalBodyProps } from './modal-body.mjs';
+export { ModalFooter, ModalFooterProps } from './modal-footer.mjs';
+export { Dialog, DialogBody, DialogBodyProps, DialogCloseButton, DialogCloseButtonProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogProps } from './dialog.mjs';
+export { Drawer, DrawerBody, DrawerBodyProps, DrawerCloseButton, DrawerCloseButtonProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerOverlay, DrawerOverlayProps, DrawerProps } from './drawer.mjs';
+import '@yamada-ui/core';
+import '@yamada-ui/focus-lock';
+import '@yamada-ui/motion';
+import '@yamada-ui/close-button';
+import '@yamada-ui/button';
+import 'react';
+import '@yamada-ui/transitions';

package/dist/index.js

@@ -64,7 +64,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
 var Drawer = (0, import_core.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",
@@ -550,6 +549,7 @@ var Dialog = (0, import_core8.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils8.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   Dialog,
   DialogBody,

package/dist/modal-body.d.mts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type ModalBodyProps = HTMLUIProps<'main'>;
+declare const ModalBody: _yamada_ui_core.Component<"main", ModalBodyProps>;
+
+export { ModalBody, ModalBodyProps };

package/dist/modal-body.js

@@ -197,6 +197,7 @@ var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils5.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -272,7 +273,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
 var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/modal-body.mjs

@@ -1,6 +1,6 @@
 import {
   ModalBody
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   ModalBody
 };

package/dist/modal-close-button.d.mts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { CloseButtonProps } from '@yamada-ui/close-button';
+
+type ModalCloseButtonProps = CloseButtonProps;
+declare const ModalCloseButton: _yamada_ui_core.Component<"button", CloseButtonProps>;
+
+export { ModalCloseButton, ModalCloseButtonProps };

package/dist/modal-close-button.js

@@ -188,6 +188,7 @@ var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils5.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -263,7 +264,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
 var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/modal-close-button.mjs

@@ -1,6 +1,6 @@
 import {
   ModalCloseButton
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   ModalCloseButton
 };

package/dist/modal-footer.d.mts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type ModalFooterProps = HTMLUIProps<'footer'>;
+declare const ModalFooter: _yamada_ui_core.Component<"footer", ModalFooterProps>;
+
+export { ModalFooter, ModalFooterProps };

package/dist/modal-footer.js

@@ -198,6 +198,7 @@ var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils5.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -273,7 +274,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
 var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/modal-footer.mjs

@@ -1,6 +1,6 @@
 import {
   ModalFooter
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   ModalFooter
 };

package/dist/modal-header.d.mts

@@ -0,0 +1,7 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+
+type ModalHeaderProps = HTMLUIProps<'header'>;
+declare const ModalHeader: _yamada_ui_core.Component<"header", ModalHeaderProps>;
+
+export { ModalHeader, ModalHeaderProps };

package/dist/modal-header.js

@@ -198,6 +198,7 @@ var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils5.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -273,7 +274,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
 var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/modal-header.mjs

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   ModalHeader
 };

package/dist/modal-overlay.d.mts

@@ -0,0 +1,8 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps } from '@yamada-ui/core';
+import { HTMLMotionProps } from '@yamada-ui/motion';
+
+type ModalOverlayProps = HTMLUIProps<'div'> & Omit<HTMLMotionProps<'div'>, 'color' | 'transition'>;
+declare const ModalOverlay: _yamada_ui_core.Component<"div", ModalOverlayProps>;
+
+export { ModalOverlay, ModalOverlayProps };

package/dist/modal-overlay.js

@@ -179,6 +179,7 @@ var Dialog = (0, import_core5.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils5.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -254,7 +255,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
 var Drawer = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
   const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Drawer", { size, ...props });
   const {
-    className,
     children,
     isOpen,
     placement = "right",

package/dist/modal-overlay.mjs

@@ -1,6 +1,6 @@
 import {
   ModalOverlay
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   ModalOverlay
 };

package/dist/modal.d.mts

@@ -0,0 +1,101 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIObject, Token, CSSUIProps } from '@yamada-ui/core';
+import { FocusLockProps } from '@yamada-ui/focus-lock';
+import { HTMLMotionProps, MotionTransitionProperties } from '@yamada-ui/motion';
+
+type ModalContext = ModalOptions & {
+    styles: Record<string, CSSUIObject>;
+};
+declare const useModal: () => ModalContext;
+
+type ModalOptions = Pick<FocusLockProps, 'autoFocus' | 'initialFocusRef' | 'finalFocusRef' | 'restoreFocus' | 'lockFocusAcrossFrames'> & {
+    /**
+     * If `true`, the open will be opened.
+     */
+    isOpen: boolean;
+    /**
+     * Callback invoked to close the modal.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the overlay is clicked.
+     */
+    onOverlayClick?: () => void;
+    /**
+     * Callback fired when the escape key is pressed and focus is within modal.
+     */
+    onEsc?(): void;
+    /**
+     * Callback function to run side effects after the modal has closed.
+     */
+    onCloseComplete?: () => void;
+    /**
+     * The placement of the modal.
+     *
+     * @default 'center'
+     */
+    placement?: Token<'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>;
+    /**
+     * The CSS `padding` property.
+     */
+    outside?: CSSUIProps['p'];
+    /**
+     * If `true`, display the modal close button.
+     *
+     * @default true
+     */
+    withCloseButton?: boolean;
+    /**
+     * If `true`, display the modal overlay.
+     *
+     * @default true
+     */
+    withOverlay?: boolean;
+    /**
+     * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
+     *
+     * @default false.
+     */
+    allowPinchZoom?: boolean;
+    /**
+     * Where scroll behavior should originate.
+     *
+     * - `inside`: scroll only occurs within the `ModalBody`.
+     * - `outside`: the entire `ModalContent` will scroll within the viewport.
+     *
+     * @default 'inside'
+     */
+    scrollBehavior?: 'inside' | 'outside';
+    /**
+     * If `true`, scrolling will be disabled on the `body` when the modal opens.
+     *
+     * @default true
+     */
+    blockScrollOnMount?: boolean;
+    /**
+     * If `true`, the modal will close when the overlay is clicked.
+     *
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * If `true`, the modal will close when the `Esc` key is pressed.
+     *
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * The animation of the tooltip.
+     *
+     * @default 'scale'
+     */
+    animation?: 'scale' | 'top' | 'right' | 'left' | 'bottom' | 'none';
+    /**
+     * The animation duration.
+     */
+    duration?: MotionTransitionProperties['duration'];
+};
+type ModalProps = Omit<HTMLUIProps<'section'>, 'scrollBehavior' | 'animation'> & Omit<HTMLMotionProps<'section'>, 'color' | 'transition'> & ThemeProps<'Modal'> & ModalOptions;
+declare const Modal: _yamada_ui_core.Component<"section", ModalProps>;
+
+export { Modal, ModalProps, useModal };

package/dist/modal.js

@@ -212,6 +212,7 @@ var Dialog = (0, import_core6.forwardRef)(({ size, ...props }, ref) => {
     Modal,
     {
       ref,
+      className: (0, import_utils6.cx)("ui-dialog", className),
       __css: css,
       ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
       children: [
@@ -287,7 +288,6 @@ var [DrawerProvider, useDrawer] = (0, import_utils7.createContext)({
 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",

package/dist/modal.mjs

@@ -1,7 +1,7 @@
 import {
   Modal,
   useModal
-} from "./chunk-MCXUVWUW.mjs";
+} from "./chunk-OUW3Q5QN.mjs";
 export {
   Modal,
   useModal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/modal",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Yamada UI modal component",
   "keywords": [
     "yamada",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "react-remove-scroll": "^2.5.4",
-    "@yamada-ui/core": "0.4.2",
-    "@yamada-ui/utils": "0.1.2",
-    "@yamada-ui/motion": "0.3.1",
-    "@yamada-ui/portal": "0.2.1",
-    "@yamada-ui/button": "0.2.3",
-    "@yamada-ui/focus-lock": "0.2.1",
-    "@yamada-ui/close-button": "0.2.3",
-    "@yamada-ui/transitions": "0.2.4",
-    "@yamada-ui/use-value": "0.1.15"
+    "@yamada-ui/core": "0.5.0",
+    "@yamada-ui/utils": "0.1.3",
+    "@yamada-ui/motion": "0.3.3",
+    "@yamada-ui/portal": "0.2.2",
+    "@yamada-ui/button": "0.2.5",
+    "@yamada-ui/focus-lock": "0.2.2",
+    "@yamada-ui/close-button": "0.2.5",
+    "@yamada-ui/transitions": "0.2.6",
+    "@yamada-ui/use-value": "0.1.17"
   },
   "devDependencies": {
     "react": "^18.0.0",