@tamagui/dialog 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/esm/Dialog.js

@@ -1,56 +1,29 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
 import { AnimatePresence } from "@tamagui/animate-presence";
+import { hideOthers } from "@tamagui/aria-hidden";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import {
-  Slot,
   Theme,
   composeEventHandlers,
   isWeb,
   styled,
+  useGet,
   useId,
+  useMedia,
   useThemeName,
   withStaticProperties
 } from "@tamagui/core";
 import { createContext, createContextScope } from "@tamagui/create-context";
 import { Dismissable } from "@tamagui/dismissable";
 import { FocusScope } from "@tamagui/focus-scope";
-import { Portal } from "@tamagui/portal";
+import { PortalHost, PortalItem } from "@tamagui/portal";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
 import { ThemeableStack, YStack } from "@tamagui/stacks";
 import { H2, Paragraph } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import { hideOthers } from "aria-hidden";
 import * as React from "react";
-import { RemoveScroll } from "react-remove-scroll";
 const DIALOG_NAME = "Dialog";
 const [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
 const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
@@ -58,96 +31,112 @@ const TRIGGER_NAME = "DialogTrigger";
 const DialogTriggerFrame = styled(YStack, {
   name: TRIGGER_NAME
 });
-const DialogTrigger = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeDialog } = _a, triggerProps = __objRest(_a, ["__scopeDialog"]);
-  const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  return /* @__PURE__ */ React.createElement(DialogTriggerFrame, __spreadProps(__spreadValues({
-    tag: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": context.open,
-    "aria-controls": context.contentId,
-    "data-state": getState(context.open)
-  }, triggerProps), {
-    ref: composedTriggerRef,
-    onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-  }));
-});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ jsx(DialogTriggerFrame, {
+      tag: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+    });
+  }
+);
 DialogTrigger.displayName = TRIGGER_NAME;
 const PORTAL_NAME = "DialogPortal";
 const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
   forceMount: void 0
 });
-const DialogPortal = (props) => {
-  const _a = props, { __scopeDialog, forceMount, children } = _a, rest = __objRest(_a, ["__scopeDialog", "forceMount", "children"]);
-  const themeName = useThemeName();
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  const isShowing = forceMount || context.open;
-  const contents = /* @__PURE__ */ React.createElement(AnimatePresence, null, isShowing ? children : null);
-  if (!context.modal) {
-    return contents;
+const DialogPortalFrame = styled(YStack, {
+  alignItems: "center",
+  justifyContent: "center",
+  fullscreen: true,
+  zIndex: 100,
+  ...isWeb && {
+    maxHeight: "100vh"
   }
-  if (!isWeb && !isShowing) {
-    return contents;
+});
+const DialogPortal = DialogPortalFrame.extractable(
+  (props) => {
+    const { __scopeDialog, forceMount, children, ...frameProps } = props;
+    const themeName = useThemeName();
+    const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+    const isShowing = forceMount || context.open;
+    const contents = /* @__PURE__ */ jsx(AnimatePresence, {
+      children: isShowing ? children : null
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (!context.modal || isSheet) {
+      return contents;
+    }
+    return /* @__PURE__ */ jsx(PortalItem, {
+      name: `${context.scopeKey}SheetContents`,
+      children: /* @__PURE__ */ jsx(DialogProvider, {
+        scope: __scopeDialog,
+        ...context,
+        children: /* @__PURE__ */ jsx(Theme, {
+          name: themeName,
+          children: /* @__PURE__ */ jsx(PortalProvider, {
+            scope: __scopeDialog,
+            forceMount,
+            children: /* @__PURE__ */ jsx(DialogPortalFrame, {
+              pointerEvents: isShowing ? "auto" : "none",
+              ...frameProps,
+              children: contents
+            })
+          })
+        })
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(PortalProvider, {
-    scope: __scopeDialog,
-    forceMount
-  }, /* @__PURE__ */ React.createElement(Portal, __spreadValues(__spreadValues({
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 100,
-    pointerEvents: isShowing ? "auto" : "none"
-  }, isWeb && {
-    maxHeight: "100vh"
-  }), rest), /* @__PURE__ */ React.createElement(Theme, {
-    name: themeName
-  }, contents)));
-};
+);
 DialogPortal.displayName = PORTAL_NAME;
 const OVERLAY_NAME = "DialogOverlay";
 const DialogOverlayFrame = styled(ThemeableStack, {
   name: OVERLAY_NAME,
-  pointerEvents: "auto",
   backgrounded: true,
   fullscreen: true
 });
-const DialogOverlay = React.forwardRef((_a, forwardedRef) => {
-  var _b = _a, { __scopeDialog } = _b, props = __objRest(_b, ["__scopeDialog"]);
-  const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
-  const _a2 = props, { forceMount = portalContext.forceMount } = _a2, overlayProps = __objRest(_a2, ["forceMount"]);
-  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-  if (!context.modal) {
-    return null;
+const DialogOverlay = React.forwardRef(
+  ({ __scopeDialog, ...props }, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    const showSheet = useShowDialogSheet(context);
+    if (!forceMount) {
+      if (!context.modal || showSheet) {
+        return null;
+      }
+    }
+    return /* @__PURE__ */ jsx(DialogOverlayImpl, {
+      context,
+      ...overlayProps,
+      ref: forwardedRef
+    });
   }
-  return /* @__PURE__ */ React.createElement(DialogOverlayImpl, __spreadProps(__spreadValues({}, overlayProps), {
-    ref: forwardedRef
-  }));
-});
+);
 DialogOverlay.displayName = OVERLAY_NAME;
-const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeDialog } = _a, overlayProps = __objRest(_a, ["__scopeDialog"]);
-  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-  const content = /* @__PURE__ */ React.createElement(DialogOverlayFrame, __spreadProps(__spreadValues({
-    "data-state": getState(context.open),
-    pointerEvents: "auto"
-  }, overlayProps), {
-    ref: forwardedRef
-  }));
-  if (!isWeb) {
-    return content;
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return /* @__PURE__ */ jsx(DialogOverlayFrame, {
+      "data-state": getState(context.open),
+      pointerEvents: context.open ? "auto" : "none",
+      ...overlayProps,
+      ref: forwardedRef
+    });
   }
-  return /* @__PURE__ */ React.createElement(RemoveScroll, {
-    as: Slot,
-    allowPinchZoom: context.allowPinchZoom,
-    shards: [context.contentRef]
-  }, content);
-});
+);
 const CONTENT_NAME = "DialogContent";
 const DialogContentFrame = styled(ThemeableStack, {
   name: CONTENT_NAME,
   tag: "dialog",
-  pointerEvents: "auto",
   position: "relative",
   backgrounded: true,
   padded: true,
@@ -164,216 +153,289 @@ const DialogContentFrame = styled(ThemeableStack, {
     size: "$4"
   }
 });
-const DialogContent = React.forwardRef((_c, forwardedRef) => {
-  var _d = _c, { __scopeDialog } = _d, props = __objRest(_d, ["__scopeDialog"]);
-  const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
-  const _a = props, { forceMount = portalContext.forceMount } = _a, contentProps = __objRest(_a, ["forceMount"]);
-  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, __spreadProps(__spreadValues({}, contentProps), {
-    ref: forwardedRef
-  })) : /* @__PURE__ */ React.createElement(DialogContentNonModal, __spreadProps(__spreadValues({}, contentProps), {
-    ref: forwardedRef
-  })));
-});
-DialogContent.displayName = CONTENT_NAME;
-const DialogContentModal = React.forwardRef((_e, forwardedRef) => {
-  var _f = _e, { __scopeDialog } = _f, props = __objRest(_f, ["__scopeDialog"]);
-  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-  React.useEffect(() => {
-    if (!context.open)
-      return;
-    const content = contentRef.current;
-    if (content)
-      return hideOthers(content);
-  }, [context.open]);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-      var _a;
-      event.preventDefault();
-      (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-    }),
-    onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
-      const originalEvent = event["detail"].originalEvent;
-      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (isRightClick)
-        event.preventDefault();
-    }),
-    onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())
-  }));
-});
-const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
-  const hasInteractedOutsideRef = React.useRef(false);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
-    ref: forwardedRef,
-    trapFocus: false,
-    disableOutsidePointerEvents: false,
-    onCloseAutoFocus: (event) => {
-      var _a, _b;
-      (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented) {
-        if (!hasInteractedOutsideRef.current)
-          (_b = context.triggerRef.current) == null ? void 0 : _b.focus();
-        event.preventDefault();
+const DialogContent = DialogContentFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...contentProps } = props;
+      const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+      const contents = context.modal ? /* @__PURE__ */ jsx(DialogContentModal, {
+        context,
+        ...contentProps,
+        ref: forwardedRef
+      }) : /* @__PURE__ */ jsx(DialogContentNonModal, {
+        context,
+        ...contentProps,
+        ref: forwardedRef
+      });
+      if (!isWeb) {
+        return contents;
       }
-      hasInteractedOutsideRef.current = false;
-    },
-    onInteractOutside: (event) => {
-      var _a;
-      (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented)
-        hasInteractedOutsideRef.current = true;
-      const target = event.target;
-      const trigger = context.triggerRef.current;
-      if (!(trigger instanceof HTMLElement))
+      return /* @__PURE__ */ jsx(RemoveScroll, {
+        forwardProps: true,
+        enabled: context.open,
+        allowPinchZoom: context.allowPinchZoom,
+        shards: [context.contentRef],
+        removeScrollBar: false,
+        children: /* @__PURE__ */ jsx("div", {
+          className: "_dsp_contents",
+          children: contents
+        })
+      });
+    }
+  )
+);
+DialogContent.displayName = CONTENT_NAME;
+const DialogContentModal = React.forwardRef(
+  ({ children, context, ...props }, forwardedRef) => {
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    React.useEffect(() => {
+      if (!context.open)
         return;
-      const targetIsTrigger = trigger.contains(target);
-      if (targetIsTrigger)
+      const content = contentRef.current;
+      if (content)
+        return hideOthers(content);
+    }, [context.open]);
+    return /* @__PURE__ */ jsx(DialogContentImpl, {
+      ...props,
+      context,
+      ref: composedRefs,
+      trapFocus: context.open,
+      disableOutsidePointerEvents: true,
+      onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+        var _a;
         event.preventDefault();
+        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+      }),
+      onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+        const originalEvent = event["detail"].originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (isRightClick)
+          event.preventDefault();
+      }),
+      onFocusOutside: composeEventHandlers(
+        props.onFocusOutside,
+        (event) => event.preventDefault()
+      ),
+      children
+    });
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(DialogContentImpl, {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        var _a, _b;
+        (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef.current) {
+            (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+          }
+          event.preventDefault();
+        }
+        hasInteractedOutsideRef.current = false;
+      },
+      onInteractOutside: (event) => {
+        var _a;
+        (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented)
+          hasInteractedOutsideRef.current = true;
+        const target = event.target;
+        const trigger = props.context.triggerRef.current;
+        if (!(trigger instanceof HTMLElement))
+          return;
+        const targetIsTrigger = trigger.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
+      }
+    });
+  }
+);
+const DialogContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeDialog,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      context,
+      ...contentProps
+    } = props;
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = /* @__PURE__ */ jsx(DialogContentFrame, {
+      id: context.contentId,
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.titleId,
+      "data-state": getState(context.open),
+      ...contentProps
+    });
+    if (showSheet) {
+      return /* @__PURE__ */ jsx(PortalItem, {
+        hostName: `${context.scopeKey}SheetContents`,
+        children: contentProps.children
+      });
     }
-  }));
-});
-const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
-  const _a = props, {
-    __scopeDialog,
-    trapFocus,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside
-  } = _a, contentProps = __objRest(_a, [
-    "__scopeDialog",
-    "trapFocus",
-    "onOpenAutoFocus",
-    "onCloseAutoFocus",
-    "disableOutsidePointerEvents",
-    "onEscapeKeyDown",
-    "onPointerDownOutside",
-    "onFocusOutside",
-    "onInteractOutside"
-  ]);
-  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, contentRef);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
-    loop: true,
-    trapped: trapFocus,
-    onMountAutoFocus: onOpenAutoFocus,
-    onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React.createElement(Dismissable, {
-    disableOutsidePointerEvents,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    ref: composedRefs,
-    onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ React.createElement(DialogContentFrame, __spreadValues({
-    id: context.contentId,
-    "aria-describedby": context.descriptionId,
-    "aria-labelledby": context.titleId,
-    "data-state": getState(context.open)
-  }, contentProps)))), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
-    titleId: context.titleId
-  }), /* @__PURE__ */ React.createElement(DescriptionWarning, {
-    contentRef,
-    descriptionId: context.descriptionId
-  })));
-});
+    if (!isWeb) {
+      return contents;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(FocusScope, {
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ jsx(Dismissable, {
+            disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+            forceUnmount: !context.open,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onFocusOutside,
+            onInteractOutside,
+            ref: composedRefs,
+            onDismiss: () => context.onOpenChange(false),
+            children: contents
+          })
+        }),
+        process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(TitleWarning, {
+              titleId: context.titleId
+            }),
+            /* @__PURE__ */ jsx(DescriptionWarning, {
+              contentRef,
+              descriptionId: context.descriptionId
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
+const SHEET_CONTENTS_NAME = "DialogSheetContents";
+const DialogSheetContents = ({ __scopeDialog }) => {
+  const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
+  return /* @__PURE__ */ jsx(PortalHost, {
+    name: `${context.scopeKey}SheetContents`
+  });
+};
+DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
 const TITLE_NAME = "DialogTitle";
 const DialogTitleFrame = styled(H2, {
   name: TITLE_NAME
 });
-const DialogTitle = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeDialog } = _a, titleProps = __objRest(_a, ["__scopeDialog"]);
-  const context = useDialogContext(TITLE_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogTitleFrame, __spreadProps(__spreadValues({
-    id: context.titleId
-  }, titleProps), {
-    ref: forwardedRef
-  }));
-});
+const DialogTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(DialogTitleFrame, {
+      id: context.titleId,
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogTitle.displayName = TITLE_NAME;
 const DialogDescriptionFrame = styled(Paragraph, {
   name: "DialogDescription"
 });
 const DESCRIPTION_NAME = "DialogDescription";
-const DialogDescription = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeDialog } = _a, descriptionProps = __objRest(_a, ["__scopeDialog"]);
-  const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogDescriptionFrame, __spreadProps(__spreadValues({
-    id: context.descriptionId
-  }, descriptionProps), {
-    ref: forwardedRef
-  }));
-});
+const DialogDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(DialogDescriptionFrame, {
+      id: context.descriptionId,
+      ...descriptionProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogDescription.displayName = DESCRIPTION_NAME;
 const CLOSE_NAME = "DialogClose";
-const DialogClose = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeDialog } = _a, closeProps = __objRest(_a, ["__scopeDialog"]);
-  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
-    tag: "button"
-  }, closeProps), {
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
-  }));
-});
+const DialogClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+    const isSheet = useShowDialogSheet(context);
+    if (isSheet) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(YStack, {
+      tag: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
+    });
+  }
+);
 DialogClose.displayName = CLOSE_NAME;
 function getState(open) {
   return open ? "open" : "closed";
 }
 const TITLE_WARNING_NAME = "DialogTitleWarning";
-const [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
+const [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
   contentName: CONTENT_NAME,
   titleName: TITLE_NAME,
   docsSlug: "dialog"
 });
 const TitleWarning = ({ titleId }) => {
-  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
-  const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
+  if (process.env.NODE_ENV === "development") {
+    const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+    const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
 
 If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
 
 For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
-  React.useEffect(() => {
-    if (!isWeb)
-      return;
-    if (titleId) {
-      const hasTitle = document.getElementById(titleId);
-      if (!hasTitle)
-        throw new Error(MESSAGE);
-    }
-  }, [MESSAGE, titleId]);
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      if (titleId) {
+        const hasTitle = document.getElementById(titleId);
+        if (!hasTitle) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, titleId]);
+  }
   return null;
 };
 const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
 const DescriptionWarning = ({ contentRef, descriptionId }) => {
-  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
-  const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
-  React.useEffect(() => {
-    if (!isWeb)
-      return;
-    const contentNode = contentRef.current;
-    if (!(contentNode instanceof HTMLElement)) {
-      return;
-    }
-    const describedById = contentNode.getAttribute("aria-describedby");
-    if (descriptionId && describedById) {
-      const hasDescription = document.getElementById(descriptionId);
-      if (!hasDescription)
-        console.warn(MESSAGE);
-    }
-  }, [MESSAGE, contentRef, descriptionId]);
+  if (process.env.NODE_ENV === "development") {
+    const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
+    const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
+    React.useEffect(() => {
+      if (!isWeb)
+        return;
+      const contentNode = contentRef.current;
+      if (!(contentNode instanceof HTMLElement)) {
+        return;
+      }
+      const describedById = contentNode.getAttribute("aria-describedby");
+      if (descriptionId && describedById) {
+        const hasDescription = document.getElementById(descriptionId);
+        if (!hasDescription) {
+          console.warn(MESSAGE);
+        }
+      }
+    }, [MESSAGE, contentRef, descriptionId]);
+  }
   return null;
 };
 const DialogInner = React.forwardRef(function Dialog(props, ref) {
@@ -386,6 +448,10 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     modal = true,
     allowPinchZoom = false
   } = props;
+  const { when, AdaptProvider } = useAdaptParent({
+    Contents: DialogSheetContents
+  });
+  const sheetBreakpoint = when || false;
   const triggerRef = React.useRef(null);
   const contentRef = React.useRef(null);
   const [open, setOpen] = useControllableState({
@@ -393,22 +459,37 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  React.useImperativeHandle(ref, () => ({
-    open: setOpen
-  }), []);
-  return /* @__PURE__ */ React.createElement(DialogProvider, {
-    scope: __scopeDialog,
-    triggerRef,
-    contentRef,
-    contentId: useId() || "",
-    titleId: useId() || "",
-    descriptionId: useId() || "",
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-    modal,
-    allowPinchZoom
-  }, children);
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      open: setOpen
+    }),
+    [setOpen]
+  );
+  const scopeId = useId();
+  const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
+  return /* @__PURE__ */ jsx(AdaptProvider, {
+    children: /* @__PURE__ */ jsx(DialogProvider, {
+      scope: __scopeDialog,
+      scopeKey,
+      triggerRef,
+      contentRef,
+      contentId: useId() || "",
+      titleId: useId() || "",
+      descriptionId: useId() || "",
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      allowPinchZoom,
+      sheetBreakpoint,
+      children: /* @__PURE__ */ jsx(DialogSheetController, {
+        onOpenChange: setOpen,
+        __scopeDialog,
+        children
+      })
+    })
+  });
 });
 const Dialog2 = withStaticProperties(DialogInner, {
   Trigger: DialogTrigger,
@@ -417,8 +498,34 @@ const Dialog2 = withStaticProperties(DialogInner, {
   Content: DialogContent,
   Title: DialogTitle,
   Description: DialogDescription,
-  Close: DialogClose
+  Close: DialogClose,
+  Sheet: ControlledSheet,
+  Adapt
 });
+const DialogSheetController = (props) => {
+  const context = useDialogContext("DialogSheetController", props.__scopeDialog);
+  const showSheet = useShowDialogSheet(context);
+  const breakpointActive = useSheetBreakpointActive(context);
+  const getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */ jsx(SheetController, {
+    onOpenChange: (val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
+      }
+    },
+    open: context.open,
+    hidden: breakpointActive === false,
+    children: props.children
+  });
+};
+const useSheetBreakpointActive = (context) => {
+  const media = useMedia();
+  return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
+};
+const useShowDialogSheet = (context) => {
+  const breakpointActive = useSheetBreakpointActive(context);
+  return context.open === false ? false : breakpointActive;
+};
 export {
   Dialog2 as Dialog,
   DialogClose,
@@ -426,9 +533,11 @@ export {
   DialogDescription,
   DialogOverlay,
   DialogPortal,
+  DialogPortalFrame,
+  DialogSheetContents,
   DialogTitle,
   DialogTrigger,
-  WarningProvider,
+  DialogWarningProvider,
   createDialogScope
 };
 //# sourceMappingURL=Dialog.js.map