@yamada-ui/modal 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/modal
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/modal
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/modal
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/modal
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-5E5WMNCI.mjs

@@ -0,0 +1,620 @@
+// src/modal.tsx
+import {
+  ui as ui5,
+  forwardRef as forwardRef8,
+  omitThemeProps as omitThemeProps3,
+  useMultiComponentStyle as useMultiComponentStyle3
+} from "@yamada-ui/core";
+import { FocusLock } from "@yamada-ui/focus-lock";
+import {
+  motion as motion2,
+  AnimatePresence
+} from "@yamada-ui/motion";
+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 { cloneElement, useCallback } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+
+// src/modal-overlay.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { motion } from "@yamada-ui/motion";
+import { fadeProps } from "@yamada-ui/transitions";
+import { cx, handlerAll } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var ModalOverlay = 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" ? fadeProps : {};
+    return /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        as: motion.div,
+        ref,
+        className: cx("ui-modal-overlay", className),
+        custom: { duration },
+        __css: css,
+        onClick: handlerAll(onClick, onOverlayClick, (event) => {
+          event.stopPropagation();
+          if (closeOnOverlay)
+            onClose == null ? void 0 : onClose();
+        }),
+        ...props,
+        ...rest
+      }
+    );
+  }
+);
+
+// src/modal-close-button.tsx
+import { CloseButton } from "@yamada-ui/close-button";
+import { forwardRef as forwardRef2 } from "@yamada-ui/core";
+import { cx as cx2, handlerAll as handlerAll2 } from "@yamada-ui/utils";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ModalCloseButton = forwardRef2(
+  ({ onClick, __css, ...rest }, ref) => {
+    const { styles, onClose } = useModal();
+    const css = {
+      position: "absolute",
+      ...__css ? __css : styles.closeButton
+    };
+    return /* @__PURE__ */ jsx2(
+      CloseButton,
+      {
+        ref,
+        className: cx2("ui-modal-close-button"),
+        __css: css,
+        onClick: handlerAll2(onClick, (event) => {
+          event.stopPropagation();
+          onClose == null ? void 0 : onClose();
+        }),
+        ...rest
+      }
+    );
+  }
+);
+
+// src/modal-header.tsx
+import { ui as ui2, forwardRef as forwardRef3 } from "@yamada-ui/core";
+import { cx as cx3 } from "@yamada-ui/utils";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ModalHeader = forwardRef3(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      ...__css ? __css : styles.header
+    };
+    return /* @__PURE__ */ jsx3(ui2.header, { ref, className: cx3("ui-modal-header", className), __css: css, ...rest });
+  }
+);
+
+// src/modal-body.tsx
+import { ui as ui3, forwardRef as forwardRef4 } from "@yamada-ui/core";
+import { cx as cx4 } from "@yamada-ui/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ModalBody = forwardRef4(
+  ({ 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__ */ jsx4(ui3.main, { ref, className: cx4("ui-modal-body", className), __css: css, ...rest });
+  }
+);
+
+// src/modal-footer.tsx
+import { ui as ui4, forwardRef as forwardRef5 } from "@yamada-ui/core";
+import { cx as cx5 } from "@yamada-ui/utils";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ModalFooter = forwardRef5(
+  ({ className, __css, ...rest }, ref) => {
+    const { styles } = useModal();
+    const css = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      ...__css ? __css : styles.footer
+    };
+    return /* @__PURE__ */ jsx5(ui4.footer, { ref, className: cx5("ui-modal-footer", className), __css: css, ...rest });
+  }
+);
+
+// src/dialog.tsx
+import { Button } from "@yamada-ui/button";
+import {
+  forwardRef as forwardRef6,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import {
+  createContext,
+  getValidChildren,
+  findChildren,
+  omitChildren,
+  isValidElement,
+  isEmpty,
+  cx as cx6
+} from "@yamada-ui/utils";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+var [DialogProvider, useDialog] = createContext({
+  name: `DialogContext`,
+  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
+});
+var Dialog = forwardRef6(({ size, ...props }, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("Dialog", { size, ...props });
+  const {
+    className,
+    children,
+    withOverlay = true,
+    withCloseButton = true,
+    header,
+    footer,
+    cancel,
+    other,
+    success,
+    onClose,
+    onCancel,
+    onOther,
+    onSuccess,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const validChildren = getValidChildren(children);
+  const [customDialogOverlay] = findChildren(validChildren, DialogOverlay);
+  const [customDialogCloseButton] = findChildren(validChildren, DialogCloseButton);
+  const [customDialogHeader] = findChildren(validChildren, DialogHeader);
+  const [customDialogBody] = findChildren(validChildren, DialogBody);
+  const [customDialogFooter] = findChildren(validChildren, DialogFooter);
+  const cloneChildren = !isEmpty(validChildren) ? omitChildren(
+    validChildren,
+    DialogOverlay,
+    DialogCloseButton,
+    DialogHeader,
+    DialogBody,
+    DialogFooter
+  ) : children;
+  const css = { ...styles.container };
+  const cancelButtonProps = isValidElement(cancel) ? { children: cancel } : cancel;
+  const otherButtonProps = isValidElement(other) ? { children: other } : other;
+  const successButtonProps = 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__ */ jsx6(DialogProvider, { value: styles, children: /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      ref,
+      __css: css,
+      ...{ size, onClose, withOverlay: false, withCloseButton: false, ...rest },
+      children: [
+        customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ jsx6(DialogOverlay, {}) : null,
+        customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx6(DialogCloseButton, {}) : null,
+        customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ jsx6(DialogHeader, { children: header }) : null,
+        customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ jsx6(DialogBody, { children: cloneChildren }) : null,
+        customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ jsx6(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ jsxs(Fragment, { children: [
+          cancelButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onCancel == null ? void 0 : onCancel(onClose), ...cancelButtonProps }) : null,
+          otherButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onOther == null ? void 0 : onOther(onClose), ...otherButtonProps }) : null,
+          successButtonProps ? /* @__PURE__ */ jsx6(Button, { onClick: () => onSuccess == null ? void 0 : onSuccess(onClose), ...successButtonProps }) : null
+        ] }) }) : null
+      ]
+    }
+  ) });
+});
+var DialogOverlay = forwardRef6(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ jsx6(
+      ModalOverlay,
+      {
+        ref,
+        className: cx6("ui-dialog-overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DialogCloseButton = forwardRef6(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ jsx6(
+      ModalCloseButton,
+      {
+        ref,
+        className: cx6("ui-dialog-close-button", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+var DialogHeader = forwardRef6(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.header };
+    return /* @__PURE__ */ jsx6(ModalHeader, { ref, className: cx6("ui-dialog-header", className), __css: css, ...rest });
+  }
+);
+var DialogBody = forwardRef6(({ className, ...rest }, ref) => {
+  const styles = useDialog();
+  const css = { ...styles.body };
+  return /* @__PURE__ */ jsx6(ModalBody, { ref, className: cx6("ui-dialog-body", className), __css: css, ...rest });
+});
+var DialogFooter = forwardRef6(
+  ({ className, ...rest }, ref) => {
+    const styles = useDialog();
+    const css = { ...styles.footer };
+    return /* @__PURE__ */ jsx6(ModalFooter, { ref, className: cx6("ui-dialog-footer", className), __css: css, ...rest });
+  }
+);
+
+// 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({
+  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 });
+  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
+  } = omitThemeProps3(mergedProps);
+  const onKeyDown = 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 = getValidChildren3(children);
+  const [customModalOverlay, ...cloneChildren] = findChildren3(
+    validChildren,
+    ModalOverlay,
+    DialogOverlay,
+    DrawerOverlay
+  );
+  let [drawerContent] = findChildren3(validChildren, DrawerContent);
+  if (drawerContent)
+    drawerContent = cloneElement(drawerContent, { onKeyDown });
+  const placement = 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__ */ jsx8(
+    ModalProvider,
+    {
+      value: {
+        isOpen,
+        onClose,
+        onOverlayClick,
+        withCloseButton,
+        scrollBehavior,
+        closeOnOverlay,
+        animation,
+        duration,
+        styles
+      },
+      children: /* @__PURE__ */ jsx8(AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsx8(
+        FocusLock,
+        {
+          autoFocus,
+          initialFocusRef,
+          finalFocusRef,
+          restoreFocus,
+          lockFocusAcrossFrames,
+          children: /* @__PURE__ */ jsx8(
+            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 })
+              ] })
+            }
+          )
+        }
+      ) }) : null })
+    }
+  );
+});
+var getModalContentProps = (animation = "scale", duration) => {
+  switch (animation) {
+    case "scale":
+      return {
+        ...scaleFadeProps,
+        custom: { scale: 0.95, reverse: true, duration }
+      };
+    case "top":
+      return {
+        ...slideFadeProps,
+        custom: { offsetY: -16, reverse: true, duration }
+      };
+    case "right":
+      return {
+        ...slideFadeProps,
+        custom: { offsetX: 16, reverse: true, duration }
+      };
+    case "left":
+      return {
+        ...slideFadeProps,
+        custom: { offsetX: -16, reverse: true, duration }
+      };
+    case "bottom":
+      return {
+        ...slideFadeProps,
+        custom: { offsetY: 16, reverse: true, duration }
+      };
+  }
+};
+var ModalContent = forwardRef8(
+  ({ className, children, __css, ...rest }, ref) => {
+    const { styles, scrollBehavior, withCloseButton, onClose, animation, duration } = useModal();
+    const validChildren = getValidChildren3(children);
+    const [customModalCloseButton, ...cloneChildren] = findChildren3(
+      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__ */ jsxs3(
+      ui5.section,
+      {
+        as: motion2.section,
+        ref,
+        className: cx8("ui-modal", className),
+        tabIndex: -1,
+        __css: css,
+        ...props,
+        ...rest,
+        children: [
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx8(ModalCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+
+export {
+  useModal,
+  Modal,
+  ModalOverlay,
+  ModalCloseButton,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Dialog,
+  DialogOverlay,
+  DialogCloseButton,
+  DialogHeader,
+  DialogBody,
+  DialogFooter
+};

package/dist/dialog.d.ts

@@ -0,0 +1,37 @@
+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.js';
+import { ModalOverlayProps } from './modal-overlay.js';
+import { ModalHeaderProps } from './modal-header.js';
+import { ModalBodyProps } from './modal-body.js';
+import { ModalFooterProps } from './modal-footer.js';
+import '@yamada-ui/focus-lock';
+import '@yamada-ui/motion';
+
+type DialogOptions = {
+    header?: ReactNode;
+    footer?: ReactNode;
+    cancel?: ReactNode | ButtonProps;
+    other?: ReactNode | ButtonProps;
+    success?: ReactNode | ButtonProps;
+    onCancel?: (onClose: (() => void) | undefined) => void;
+    onOther?: (onClose: (() => void) | undefined) => void;
+    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 };