@yamada-ui/modal 1.2.0 → 1.2.1-dev-20240409072750

package/dist/chunk-74PDTFI6.mjs

@@ -0,0 +1,942 @@
+"use client"
+
+// src/drawer.tsx
+import {
+  ui as ui6,
+  forwardRef as forwardRef8,
+  useMultiComponentStyle as useMultiComponentStyle3,
+  omitThemeProps as omitThemeProps3
+} from "@yamada-ui/core";
+import { Slide } from "@yamada-ui/transitions";
+import { useValue as useValue2 } from "@yamada-ui/use-value";
+import {
+  createContext as createContext3,
+  getValidChildren as getValidChildren3,
+  findChildren as findChildren3,
+  cx as cx8,
+  omitObject,
+  isArray
+} from "@yamada-ui/utils";
+import { useCallback as useCallback2, useMemo } from "react";
+
+// src/modal.tsx
+import {
+  ui as ui5,
+  forwardRef as forwardRef7,
+  omitThemeProps as omitThemeProps2,
+  useMultiComponentStyle as useMultiComponentStyle2
+} from "@yamada-ui/core";
+import { FocusLock } from "@yamada-ui/focus-lock";
+import { AnimatePresence, Motion } 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 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";
+
+// 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, (ev) => {
+          ev.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, (ev) => {
+          ev.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,
+        className: cx6("ui-dialog", className),
+        __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/modal.tsx
+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 = forwardRef7(
+  ({ size, ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle2("Modal", {
+      size,
+      ...props
+    });
+    const {
+      className,
+      children,
+      isOpen,
+      onClose,
+      onOverlayClick,
+      onEsc,
+      onCloseComplete,
+      placement: _placement = "center",
+      outside = "fallback(4, 1rem)",
+      withCloseButton = true,
+      withOverlay = true,
+      allowPinchZoom = false,
+      scrollBehavior = "inside",
+      autoFocus,
+      restoreFocus,
+      initialFocusRef,
+      finalFocusRef,
+      blockScrollOnMount = true,
+      closeOnOverlay = true,
+      closeOnEsc = true,
+      lockFocusAcrossFrames = true,
+      animation = "scale",
+      duration,
+      portalProps,
+      ...rest
+    } = omitThemeProps2(mergedProps);
+    const onKeyDown = useCallback(
+      (ev) => {
+        if (ev.key !== "Escape")
+          return;
+        ev.stopPropagation();
+        if (closeOnEsc)
+          onClose == null ? void 0 : onClose();
+        onEsc == null ? void 0 : onEsc();
+      },
+      [closeOnEsc, onClose, onEsc]
+    );
+    const validChildren = getValidChildren2(children);
+    const [customModalOverlay, ...cloneChildren] = findChildren2(
+      validChildren,
+      ModalOverlay,
+      DialogOverlay,
+      DrawerOverlay
+    );
+    let [drawerContent] = findChildren2(validChildren, DrawerContent);
+    if (drawerContent)
+      drawerContent = cloneElement(drawerContent, { onKeyDown });
+    const placement = useValue(_placement);
+    const css = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: "fallback(jeice, 110)",
+      w: "100vw",
+      h: "100dvh",
+      p: size !== "full" ? outside : void 0,
+      display: "flex",
+      justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
+      alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
+    };
+    return /* @__PURE__ */ jsx7(
+      ModalProvider,
+      {
+        value: {
+          isOpen,
+          onClose,
+          onOverlayClick,
+          withCloseButton,
+          scrollBehavior,
+          closeOnOverlay,
+          animation,
+          duration,
+          styles
+        },
+        children: /* @__PURE__ */ jsx7(AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ jsx7(Portal, { ...portalProps, children: /* @__PURE__ */ jsx7(
+          FocusLock,
+          {
+            autoFocus,
+            initialFocusRef,
+            finalFocusRef,
+            restoreFocus,
+            lockFocusAcrossFrames,
+            children: /* @__PURE__ */ jsx7(
+              RemoveScroll,
+              {
+                allowPinchZoom,
+                enabled: blockScrollOnMount,
+                forwardProps: true,
+                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
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : 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 = forwardRef7(
+  ({ className, children, __css, ...rest }, ref) => {
+    const {
+      styles,
+      scrollBehavior,
+      withCloseButton,
+      onClose,
+      animation,
+      duration
+    } = useModal();
+    const validChildren = getValidChildren2(children);
+    const [customModalCloseButton, ...cloneChildren] = findChildren2(
+      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__ */ jsxs2(
+      Motion,
+      {
+        as: "section",
+        ref,
+        className: cx7("ui-modal", className),
+        tabIndex: -1,
+        __css: css,
+        ...props,
+        ...rest,
+        children: [
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx7(ModalCloseButton, {}) : null,
+          cloneChildren
+        ]
+      }
+    );
+  }
+);
+
+// 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, placement = "right", closeOnDrag = false, ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle3("Drawer", {
+      size,
+      placement,
+      closeOnDrag,
+      ...props
+    });
+    const {
+      children,
+      isOpen,
+      onClose,
+      onOverlayClick,
+      onEsc,
+      onCloseComplete,
+      withCloseButton = !closeOnDrag,
+      withOverlay = true,
+      withDragBar = true,
+      allowPinchZoom,
+      autoFocus,
+      restoreFocus,
+      initialFocusRef,
+      finalFocusRef,
+      blockScrollOnMount,
+      closeOnOverlay,
+      closeOnEsc,
+      lockFocusAcrossFrames,
+      duration = { enter: 0.4, exit: 0.3 },
+      dragConstraints = 0,
+      dragElastic = 0.1,
+      dragOffset = 80,
+      dragVelocity = 100,
+      blankForDragProps,
+      portalProps,
+      ...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,
+          portalProps
+        },
+        children: [
+          customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ jsx8(DrawerOverlay, {}) : null,
+          /* @__PURE__ */ jsx8(
+            DrawerContent,
+            {
+              ...{
+                dragConstraints,
+                dragElastic,
+                dragOffset,
+                dragVelocity,
+                withCloseButton,
+                withDragBar,
+                blankForDragProps,
+                ...omitObject(rest, ["isFullHeight"]),
+                placement,
+                closeOnDrag
+              },
+              children: cloneChildren
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var DrawerContent = forwardRef8(
+  ({
+    className,
+    children,
+    placement: _placement,
+    withCloseButton,
+    withDragBar,
+    closeOnDrag,
+    dragConstraints,
+    dragElastic,
+    dragOffset,
+    dragVelocity,
+    blankForDragProps,
+    ...rest
+  }, ref) => {
+    const { isOpen, onClose, duration } = useModal();
+    const styles = useDrawer();
+    const placement = useValue2(_placement);
+    const validChildren = getValidChildren3(children);
+    const [customDrawerCloseButton, ...cloneChildren] = findChildren3(
+      validChildren,
+      DrawerCloseButton
+    );
+    const blankForDragBg = useMemo(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      const propBg = (_c = (_b = (_a = rest.backgroundColor) != null ? _a : rest.bgColor) != null ? _b : rest.background) != null ? _c : rest.bg;
+      const styleBg = (_j = (_h = (_f = (_d = styles.container) == null ? void 0 : _d.backgroundColor) != null ? _f : (_e = styles.container) == null ? void 0 : _e.bgColor) != null ? _h : (_g = styles.container) == null ? void 0 : _g.background) != null ? _j : (_i = styles.container) == null ? void 0 : _i.bg;
+      const computedBg = propBg != null ? propBg : styleBg;
+      return isArray(computedBg) ? computedBg : [computedBg];
+    }, [rest, styles]);
+    const blankForDrag = useMemo(() => {
+      let position = {};
+      switch (placement) {
+        case "top":
+          position = { top: "calc(-100dvh + 1px)", left: 0, right: 0 };
+          break;
+        case "bottom":
+          position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
+          break;
+        case "left":
+          position = { left: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          break;
+        case "right":
+          position = { right: "calc(-100% + 1px)", top: 0, bottom: 0 };
+          break;
+      }
+      const [lightBg, darkBg] = blankForDragBg;
+      return {
+        _after: {
+          content: '""',
+          display: "block",
+          w: "100%",
+          h: "100dvh",
+          bg: lightBg,
+          position: "absolute",
+          ...position,
+          ...blankForDragProps
+        },
+        _dark: {
+          _after: {
+            bg: darkBg
+          }
+        }
+      };
+    }, [placement, blankForDragBg, blankForDragProps]);
+    const css = useMemo(
+      () => ({
+        display: "flex",
+        flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
+        outline: 0,
+        ...closeOnDrag ? blankForDrag : {},
+        ...styles.container
+      }),
+      [blankForDrag, closeOnDrag, placement, styles]
+    );
+    const getDragDirectionRestriction = useCallback2(
+      (value) => {
+        switch (placement) {
+          case "top":
+            return { bottom: value };
+          case "bottom":
+            return { top: value };
+          case "left":
+            return { right: value };
+          case "right":
+            return { left: value };
+        }
+      },
+      [placement]
+    );
+    const getDragDirection = useCallback2(() => {
+      switch (placement) {
+        case "top":
+        case "bottom":
+          return "y";
+        case "left":
+        case "right":
+          return "x";
+      }
+    }, [placement]);
+    const isCloseByDragInfo = useCallback2(
+      (info) => {
+        switch (placement) {
+          case "top":
+            return info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1;
+          case "bottom":
+            return info.velocity.y >= dragVelocity || info.offset.y >= dragOffset;
+          case "left":
+            return info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1;
+          case "right":
+            return info.velocity.x >= dragVelocity || info.offset.x >= dragOffset;
+        }
+      },
+      [placement, dragVelocity, dragOffset]
+    );
+    return /* @__PURE__ */ jsxs3(
+      Slide,
+      {
+        ref,
+        className: cx8("ui-drawer", className),
+        isOpen,
+        placement,
+        duration,
+        drag: closeOnDrag ? getDragDirection() : false,
+        dragConstraints: getDragDirectionRestriction(dragConstraints),
+        dragElastic: getDragDirectionRestriction(dragElastic),
+        dragSnapToOrigin: true,
+        dragMomentum: false,
+        onDragEnd: (_, info) => {
+          if (isCloseByDragInfo(info))
+            onClose == null ? void 0 : onClose();
+        },
+        tabIndex: -1,
+        __css: css,
+        ...rest,
+        children: [
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ jsx8(DrawerCloseButton, {}) : null,
+          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ jsx8(DrawerDragBar, {}) : null,
+          /* @__PURE__ */ jsx8(
+            ui6.div,
+            {
+              className: "ui-drawer__inner",
+              __css: { display: "flex", flexDirection: "column", ...styles.inner },
+              children: cloneChildren
+            }
+          ),
+          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ jsx8(DrawerDragBar, {}) : null
+        ]
+      }
+    );
+  }
+);
+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 DrawerDragBar = ({
+  className,
+  ...rest
+}) => {
+  const styles = useDrawer();
+  const css = { ...styles.dragBar };
+  return /* @__PURE__ */ jsx8(
+    ui6.div,
+    {
+      className: cx8("ui-drawer__drag-bar", 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 {
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  DrawerDragBar,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  useModal,
+  Modal,
+  ModalOverlay,
+  ModalCloseButton,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Dialog,
+  DialogOverlay,
+  DialogCloseButton,
+  DialogHeader,
+  DialogBody,
+  DialogFooter
+};
+//# sourceMappingURL=chunk-74PDTFI6.mjs.map