@yamada-ui/modal 1.3.9 → 1.3.10-dev-20240917033401

package/dist/drawer.js

@@ -21,81 +21,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/drawer.tsx
 var drawer_exports = {};
 __export(drawer_exports, {
-  Drawer: () => Drawer,
-  DrawerBody: () => DrawerBody,
-  DrawerCloseButton: () => DrawerCloseButton,
-  DrawerContent: () => DrawerContent,
-  DrawerDragBar: () => DrawerDragBar,
-  DrawerFooter: () => DrawerFooter,
-  DrawerHeader: () => DrawerHeader,
-  DrawerOverlay: () => DrawerOverlay
+  Drawer: () => Drawer
 });
 module.exports = __toCommonJS(drawer_exports);
 var import_core7 = require("@yamada-ui/core");
-var import_motion4 = require("@yamada-ui/motion");
-var import_transitions3 = require("@yamada-ui/transitions");
-var import_use_value2 = require("@yamada-ui/use-value");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react2 = require("react");
+var import_motion7 = require("@yamada-ui/motion");
+var import_utils12 = require("@yamada-ui/utils");
 
-// src/modal.tsx
-var import_core6 = require("@yamada-ui/core");
-var import_focus_lock = require("@yamada-ui/focus-lock");
-var import_motion3 = require("@yamada-ui/motion");
-var import_portal = require("@yamada-ui/portal");
-var import_transitions2 = require("@yamada-ui/transitions");
+// src/drawer-content.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_transitions = require("@yamada-ui/transitions");
 var import_use_value = require("@yamada-ui/use-value");
-var import_utils7 = require("@yamada-ui/utils");
+var import_utils5 = require("@yamada-ui/utils");
 var import_react = require("react");
-var import_react_remove_scroll = require("react-remove-scroll");
 
-// src/modal-overlay.tsx
-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_motion.motionForwardRef)(
-  ({ 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_motion.motion.div,
-      {
-        ref,
-        className: (0, import_utils.cx)("ui-modal__overlay", className),
-        custom: { duration },
-        __css: css,
-        onClick: (0, import_utils.handlerAll)(onClick, onOverlayClick, (ev) => {
-          ev.stopPropagation();
-          if (closeOnOverlay) onClose == null ? void 0 : onClose();
-        }),
-        ...props,
-        ...rest
-      }
-    );
-  }
-);
+// src/drawer-close-button.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
 
 // src/modal-close-button.tsx
 var import_close_button = require("@yamada-ui/close-button");
 var import_core = require("@yamada-ui/core");
 var import_utils2 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/modal-context.ts
+var import_utils = require("@yamada-ui/utils");
+var [ModalProvider, useModal] = (0, import_utils.createContext)({
+  name: `ModalContext`,
+  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
+});
+var [DialogProvider, useDialog] = (0, import_utils.createContext)({
+  name: `DialogContext`,
+  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
+});
+var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
+  name: `DrawerContext`,
+  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
+});
+
+// src/modal-close-button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var ModalCloseButton = (0, import_core.forwardRef)(
   ({ onClick, __css, ...rest }, ref) => {
     const { styles, onClose } = useModal();
@@ -103,7 +69,7 @@ var ModalCloseButton = (0, import_core.forwardRef)(
       position: "absolute",
       ...__css ? __css : styles.closeButton
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_close_button.CloseButton,
       {
         ref,
@@ -119,24 +85,17 @@ var ModalCloseButton = (0, import_core.forwardRef)(
   }
 );
 
-// src/modal-header.tsx
-var import_core2 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ModalHeader = (0, import_core2.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_core2.ui.header,
+// src/drawer-close-button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DrawerCloseButton = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const styles = useDrawer();
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ModalCloseButton,
       {
         ref,
-        className: (0, import_utils3.cx)("ui-modal__header", className),
+        className: (0, import_utils3.cx)("ui-drawer__close-button", className),
         __css: css,
         ...rest
       }
@@ -144,25 +103,19 @@ var ModalHeader = (0, import_core2.forwardRef)(
   }
 );
 
-// src/modal-body.tsx
+// src/drawer-drag-bar.tsx
 var import_core3 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ModalBody = (0, import_core3.forwardRef)(
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DrawerDragBar = (0, import_core3.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)(
+    const styles = useDrawer();
+    const css = { ...styles.dragBar };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_core3.ui.div,
       {
         ref,
-        className: (0, import_utils4.cx)("ui-modal__body", className),
+        className: (0, import_utils4.cx)("ui-drawer__drag-bar", className),
         __css: css,
         ...rest
       }
@@ -170,223 +123,361 @@ var ModalBody = (0, import_core3.forwardRef)(
   }
 );
 
-// src/modal-footer.tsx
-var import_core4 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ModalFooter = (0, import_core4.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_core4.ui.footer,
+// src/drawer-content.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DrawerContent = (0, import_motion.motionForwardRef)(
+  ({
+    className,
+    children,
+    placement: _placement,
+    withCloseButton,
+    withDragBar,
+    closeOnDrag,
+    dragConstraints,
+    dragElastic,
+    dragOffset,
+    dragVelocity,
+    blankForDragProps,
+    ...rest
+  }, ref) => {
+    const { isOpen, onClose, duration } = useModal();
+    const styles = useDrawer();
+    const placement = (0, import_use_value.useValue)(_placement);
+    const validChildren = (0, import_utils5.getValidChildren)(children);
+    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils5.findChildren)(
+      validChildren,
+      DrawerCloseButton
+    );
+    const blankForDragBg = (0, import_react.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 (0, import_utils5.isArray)(computedBg) ? computedBg : [computedBg];
+    }, [rest, styles]);
+    const blankForDrag = (0, import_react.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 = (0, import_react.useMemo)(
+      () => ({
+        display: "flex",
+        flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
+        outline: 0,
+        ...closeOnDrag ? blankForDrag : {},
+        ...styles.container
+      }),
+      [blankForDrag, closeOnDrag, placement, styles]
+    );
+    const getDragDirectionRestriction = (0, import_react.useCallback)(
+      (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 = (0, import_react.useCallback)(() => {
+      switch (placement) {
+        case "top":
+        case "bottom":
+          return "y";
+        case "left":
+        case "right":
+          return "x";
+      }
+    }, [placement]);
+    const isCloseByDragInfo = (0, import_react.useCallback)(
+      (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__ */ (0, import_jsx_runtime4.jsxs)(
+      import_transitions.Slide,
       {
         ref,
-        className: (0, import_utils5.cx)("ui-modal__footer", className),
+        className: (0, import_utils5.cx)("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
+        ...rest,
+        children: [
+          customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerCloseButton, {}) : null,
+          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDragBar, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core4.ui.div,
+            {
+              className: "ui-drawer__inner",
+              __css: { display: "flex", flexDirection: "column", ...styles.inner },
+              children: cloneChildren
+            }
+          ),
+          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DrawerDragBar, {}) : null
+        ]
       }
     );
   }
 );
 
-// src/dialog.tsx
-var import_button = require("@yamada-ui/button");
-var import_core5 = require("@yamada-ui/core");
+// src/drawer-overlay.tsx
+var import_motion3 = require("@yamada-ui/motion");
+var import_utils7 = require("@yamada-ui/utils");
+
+// src/modal-overlay.tsx
 var import_motion2 = require("@yamada-ui/motion");
+var import_transitions2 = require("@yamada-ui/transitions");
 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_motion2.motionForwardRef)(
-  ({ size, ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("Dialog", {
-      size,
-      ...props
-    });
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ModalOverlay = (0, import_motion2.motionForwardRef)(
+  ({ className, __css, onClick, ...rest }, ref) => {
     const {
-      className,
-      children,
-      withOverlay = true,
-      withCloseButton = true,
-      header,
-      footer,
-      cancel,
-      other,
-      success,
+      styles,
+      closeOnOverlay,
+      onOverlayClick,
       onClose,
-      onCancel,
-      onOther,
-      onSuccess,
-      containerProps,
-      ...rest
-    } = (0, import_core5.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,
+      animation,
+      duration
+    } = useModal();
+    const css = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      w: "100vw",
+      h: "100vh",
+      ...__css ? __css : styles.overlay
+    };
+    const props = animation !== "none" ? import_transitions2.fadeProps : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_motion2.motion.div,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-dialog", className),
+        className: (0, import_utils6.cx)("ui-modal__overlay", className),
+        custom: { duration },
         __css: css,
-        ...{
-          onClose,
-          withOverlay: false,
-          withCloseButton: false,
-          containerProps,
-          ...rest,
-          size
-        },
-        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
-        ]
+        onClick: (0, import_utils6.handlerAll)(onClick, onOverlayClick, (ev) => {
+          ev.stopPropagation();
+          if (closeOnOverlay) onClose == null ? void 0 : onClose();
+        }),
+        ...props,
+        ...rest
       }
-    ) });
+    );
   }
 );
-var DialogOverlay = (0, import_motion2.motionForwardRef)(
+
+// src/drawer-overlay.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DrawerOverlay = (0, import_motion3.motionForwardRef)(
   ({ className, ...rest }, ref) => {
-    const styles = useDialog();
+    const styles = useDrawer();
     const css = { ...styles.overlay };
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ModalOverlay,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-dialog__overlay", className),
+        className: (0, import_utils7.cx)("ui-drawer__overlay", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var DialogCloseButton = (0, import_core5.forwardRef)(
+
+// src/modal.tsx
+var import_core6 = require("@yamada-ui/core");
+var import_focus_lock = require("@yamada-ui/focus-lock");
+var import_motion6 = require("@yamada-ui/motion");
+var import_portal = require("@yamada-ui/portal");
+var import_use_value2 = require("@yamada-ui/use-value");
+var import_utils11 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_react_remove_scroll = require("react-remove-scroll");
+
+// src/dialog-overlay.tsx
+var import_motion4 = require("@yamada-ui/motion");
+var import_utils8 = require("@yamada-ui/utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DialogOverlay = (0, import_motion4.motionForwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
-    const css = { ...styles.closeButton };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ModalCloseButton,
+    const css = { ...styles.overlay };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ModalOverlay,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-dialog__close-button", className),
+        className: (0, import_utils8.cx)("ui-dialog__overlay", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var DialogHeader = (0, import_core5.forwardRef)(
+
+// src/modal-content.tsx
+var import_motion5 = require("@yamada-ui/motion");
+var import_transitions3 = require("@yamada-ui/transitions");
+var import_utils10 = require("@yamada-ui/utils");
+
+// src/dialog-close-button.tsx
+var import_core5 = require("@yamada-ui/core");
+var import_utils9 = require("@yamada-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DialogCloseButton = (0, import_core5.forwardRef)(
   ({ className, ...rest }, ref) => {
     const styles = useDialog();
-    const css = { ...styles.header };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ModalHeader,
+    const css = { ...styles.closeButton };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ModalCloseButton,
       {
         ref,
-        className: (0, import_utils6.cx)("ui-dialog__header", className),
+        className: (0, import_utils9.cx)("ui-dialog__close-button", className),
         __css: css,
         ...rest
       }
     );
   }
 );
-var DialogBody = (0, import_core5.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
-      }
-    );
+
+// src/modal-content.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+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 DialogFooter = (0, import_core5.forwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDialog();
-    const css = { ...styles.footer };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ModalFooter,
+};
+var ModalContent = (0, import_motion5.motionForwardRef)(
+  ({ className, children, __css, ...rest }, ref) => {
+    const {
+      styles,
+      scrollBehavior,
+      withCloseButton,
+      onClose,
+      animation,
+      duration
+    } = useModal();
+    const validChildren = (0, import_utils10.getValidChildren)(children);
+    const [customModalCloseButton, ...cloneChildren] = (0, import_utils10.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_runtime9.jsxs)(
+      import_motion5.motion.section,
       {
+        role: "dialog",
+        "aria-modal": "true",
         ref,
-        className: (0, import_utils6.cx)("ui-dialog__footer", className),
+        className: (0, import_utils10.cx)("ui-modal", className),
+        tabIndex: -1,
         __css: css,
-        ...rest
+        ...props,
+        ...rest,
+        children: [
+          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalCloseButton, {}) : null,
+          cloneChildren
+        ]
       }
     );
   }
 );
 
 // src/modal.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var [ModalProvider, useModal] = (0, import_utils7.createContext)({
-  name: `ModalContext`,
-  errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
-});
-var Modal = (0, import_motion3.motionForwardRef)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Modal = (0, import_motion6.motionForwardRef)(
   ({ size, ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Modal", {
+    const [styles, mergedProps] = (0, import_core6.useComponentMultiStyle)("Modal", {
       size,
       ...props
     });
@@ -418,7 +509,7 @@ var Modal = (0, import_motion3.motionForwardRef)(
       containerProps,
       ...rest
     } = (0, import_core6.omitThemeProps)(mergedProps);
-    const onKeyDown = (0, import_react.useCallback)(
+    const onKeyDown = (0, import_react2.useCallback)(
       (ev) => {
         if (ev.key !== "Escape") return;
         ev.stopPropagation();
@@ -427,162 +518,84 @@ var Modal = (0, import_motion3.motionForwardRef)(
       },
       [closeOnEsc, onClose, onEsc]
     );
-    const validChildren = (0, import_utils7.getValidChildren)(children);
-    const [customModalOverlay, ...cloneChildren] = (0, import_utils7.findChildren)(
+    const validChildren = (0, import_utils11.getValidChildren)(children);
+    const [customModalOverlay, ...cloneChildren] = (0, import_utils11.findChildren)(
       validChildren,
       ModalOverlay,
       DialogOverlay,
       DrawerOverlay
     );
-    let [drawerContent] = (0, import_utils7.findChildren)(validChildren, DrawerContent);
+    let [drawerContent] = (0, import_utils11.findChildren)(validChildren, DrawerContent);
     if (drawerContent)
-      drawerContent = (0, import_react.cloneElement)(drawerContent, { onKeyDown });
-    const placement = (0, import_use_value.useValue)(_placement);
+      drawerContent = (0, import_react2.cloneElement)(drawerContent, { onKeyDown });
+    const placement = (0, import_use_value2.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__ */ (0, import_jsx_runtime7.jsx)(
-      ModalProvider,
-      {
-        value: {
-          isOpen,
-          onClose,
-          onOverlayClick,
-          withCloseButton,
-          scrollBehavior,
-          closeOnOverlay,
-          animation,
-          duration,
-          styles
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_motion3.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_focus_lock.FocusLock,
-          {
-            autoFocus,
-            initialFocusRef,
-            finalFocusRef,
-            restoreFocus,
-            lockFocusAcrossFrames,
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_remove_scroll.RemoveScroll,
-              {
-                allowPinchZoom,
-                enabled: blockScrollOnMount,
-                forwardProps: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core6.ui.div, { __css: css, ...containerProps, children: [
-                  customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalOverlay, {}) : null,
-                  drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    ModalContent,
-                    {
-                      ref,
-                      className,
-                      onKeyDown,
-                      ...rest,
-                      children: cloneChildren
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        ) }) : null })
-      }
-    );
-  }
-);
-var getModalContentProps = (animation = "scale", duration) => {
-  switch (animation) {
-    case "scale":
-      return {
-        ...import_transitions2.scaleFadeProps,
-        custom: { scale: 0.95, reverse: true, duration }
-      };
-    case "top":
-      return {
-        ...import_transitions2.slideFadeProps,
-        custom: { offsetY: -16, reverse: true, duration }
-      };
-    case "right":
-      return {
-        ...import_transitions2.slideFadeProps,
-        custom: { offsetX: 16, reverse: true, duration }
-      };
-    case "left":
-      return {
-        ...import_transitions2.slideFadeProps,
-        custom: { offsetX: -16, reverse: true, duration }
-      };
-    case "bottom":
-      return {
-        ...import_transitions2.slideFadeProps,
-        custom: { offsetY: 16, reverse: true, duration }
-      };
-  }
-};
-var ModalContent = (0, import_motion3.motionForwardRef)(
-  ({ className, children, __css, ...rest }, ref) => {
-    const {
-      styles,
-      scrollBehavior,
-      withCloseButton,
-      onClose,
-      animation,
-      duration
-    } = useModal();
-    const validChildren = (0, import_utils7.getValidChildren)(children);
-    const [customModalCloseButton, ...cloneChildren] = (0, import_utils7.findChildren)(
-      validChildren,
-      ModalCloseButton,
-      DialogCloseButton
-    );
-    const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
-    const css = {
-      position: "relative",
-      maxH: "100%",
+      zIndex: "fallback(jeice, 110)",
+      w: "100vw",
+      h: "100dvh",
+      p: size !== "full" ? outside : void 0,
       display: "flex",
-      flexDirection: "column",
-      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
-      outline: 0,
-      ...__css ? __css : styles.container
+      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__ */ (0, import_jsx_runtime7.jsxs)(
-      import_motion3.motion.section,
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ModalProvider,
       {
-        role: "dialog",
-        "aria-modal": "true",
-        ref,
-        className: (0, import_utils7.cx)("ui-modal", className),
-        tabIndex: -1,
-        __css: css,
-        ...props,
-        ...rest,
-        children: [
-          customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalCloseButton, {}) : null,
-          cloneChildren
-        ]
+        value: {
+          isOpen,
+          onClose,
+          onOverlayClick,
+          withCloseButton,
+          scrollBehavior,
+          closeOnOverlay,
+          animation,
+          duration,
+          styles
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_motion6.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_focus_lock.FocusLock,
+          {
+            autoFocus,
+            initialFocusRef,
+            finalFocusRef,
+            restoreFocus,
+            lockFocusAcrossFrames,
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_react_remove_scroll.RemoveScroll,
+              {
+                allowPinchZoom,
+                enabled: blockScrollOnMount,
+                forwardProps: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.ui.div, { __css: css, ...containerProps, children: [
+                  customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalOverlay, {}) : null,
+                  drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    ModalContent,
+                    {
+                      ref,
+                      className,
+                      onKeyDown,
+                      ...rest,
+                      children: cloneChildren
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : null })
       }
     );
   }
 );
 
 // src/drawer.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var [DrawerProvider, useDrawer] = (0, import_utils8.createContext)({
-  name: `DrawerContext`,
-  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
-});
-var Drawer = (0, import_motion4.motionForwardRef)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Drawer = (0, import_motion7.motionForwardRef)(
   ({ size, placement = "right", closeOnDrag = false, ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core7.useMultiComponentStyle)("Drawer", {
+    const [styles, mergedProps] = (0, import_core7.useComponentMultiStyle)("Drawer", {
       size,
       placement,
       closeOnDrag,
@@ -617,12 +630,12 @@ var Drawer = (0, import_motion4.motionForwardRef)(
       containerProps,
       ...rest
     } = (0, import_core7.omitThemeProps)(mergedProps, ["isFullHeight"]);
-    const validChildren = (0, import_utils8.getValidChildren)(children);
-    const [customDrawerOverlay, ...cloneChildren] = (0, import_utils8.findChildren)(
+    const validChildren = (0, import_utils12.getValidChildren)(children);
+    const [customDrawerOverlay, ...cloneChildren] = (0, import_utils12.findChildren)(
       validChildren,
       DrawerOverlay
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       Modal,
       {
         ref,
@@ -648,8 +661,8 @@ var Drawer = (0, import_motion4.motionForwardRef)(
           containerProps
         },
         children: [
-          customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerOverlay, {}) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DrawerOverlay, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             DrawerContent,
             {
               ...{
@@ -672,256 +685,8 @@ var Drawer = (0, import_motion4.motionForwardRef)(
     ) });
   }
 );
-var DrawerContent = (0, import_motion4.motionForwardRef)(
-  ({
-    className,
-    children,
-    placement: _placement,
-    withCloseButton,
-    withDragBar,
-    closeOnDrag,
-    dragConstraints,
-    dragElastic,
-    dragOffset,
-    dragVelocity,
-    blankForDragProps,
-    ...rest
-  }, ref) => {
-    const { isOpen, onClose, duration } = useModal();
-    const styles = useDrawer();
-    const placement = (0, import_use_value2.useValue)(_placement);
-    const validChildren = (0, import_utils8.getValidChildren)(children);
-    const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils8.findChildren)(
-      validChildren,
-      DrawerCloseButton
-    );
-    const blankForDragBg = (0, import_react2.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 (0, import_utils8.isArray)(computedBg) ? computedBg : [computedBg];
-    }, [rest, styles]);
-    const blankForDrag = (0, import_react2.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 = (0, import_react2.useMemo)(
-      () => ({
-        display: "flex",
-        flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
-        outline: 0,
-        ...closeOnDrag ? blankForDrag : {},
-        ...styles.container
-      }),
-      [blankForDrag, closeOnDrag, placement, styles]
-    );
-    const getDragDirectionRestriction = (0, import_react2.useCallback)(
-      (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 = (0, import_react2.useCallback)(() => {
-      switch (placement) {
-        case "top":
-        case "bottom":
-          return "y";
-        case "left":
-        case "right":
-          return "x";
-      }
-    }, [placement]);
-    const isCloseByDragInfo = (0, import_react2.useCallback)(
-      (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__ */ (0, import_jsx_runtime8.jsxs)(
-      import_transitions3.Slide,
-      {
-        ref,
-        className: (0, import_utils8.cx)("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__ */ (0, import_jsx_runtime8.jsx)(DrawerCloseButton, {}) : null,
-          withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerDragBar, {}) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_core7.ui.div,
-            {
-              className: "ui-drawer__inner",
-              __css: { display: "flex", flexDirection: "column", ...styles.inner },
-              children: cloneChildren
-            }
-          ),
-          withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DrawerDragBar, {}) : null
-        ]
-      }
-    );
-  }
-);
-var DrawerOverlay = (0, import_motion4.motionForwardRef)(
-  ({ className, ...rest }, ref) => {
-    const styles = useDrawer();
-    const css = { ...styles.overlay };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ModalOverlay,
-      {
-        ref,
-        className: (0, import_utils8.cx)("ui-drawer__overlay", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
-var DrawerDragBar = ({
-  className,
-  ...rest
-}) => {
-  const styles = useDrawer();
-  const css = { ...styles.dragBar };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_core7.ui.div,
-    {
-      className: (0, import_utils8.cx)("ui-drawer__drag-bar", 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_runtime8.jsx)(
-      ModalCloseButton,
-      {
-        ref,
-        className: (0, import_utils8.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_runtime8.jsx)(
-      ModalHeader,
-      {
-        ref,
-        className: (0, import_utils8.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_runtime8.jsx)(
-      ModalBody,
-      {
-        ref,
-        className: (0, import_utils8.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_runtime8.jsx)(
-      ModalFooter,
-      {
-        ref,
-        className: (0, import_utils8.cx)("ui-drawer__footer", className),
-        __css: css,
-        ...rest
-      }
-    );
-  }
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerDragBar,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay
+  Drawer
 });
 //# sourceMappingURL=drawer.js.map