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

package/dist/cjs/Dialog.js

@@ -1,38 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 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;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -45,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Dialog_exports = {};
 __export(Dialog_exports, {
@@ -55,25 +30,30 @@ __export(Dialog_exports, {
   DialogDescription: () => DialogDescription,
   DialogOverlay: () => DialogOverlay,
   DialogPortal: () => DialogPortal,
+  DialogPortalFrame: () => DialogPortalFrame,
+  DialogSheetContents: () => DialogSheetContents,
   DialogTitle: () => DialogTitle,
   DialogTrigger: () => DialogTrigger,
-  WarningProvider: () => WarningProvider,
+  DialogWarningProvider: () => DialogWarningProvider,
   createDialogScope: () => createDialogScope
 });
 module.exports = __toCommonJS(Dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_adapt = require("@tamagui/adapt");
 var import_animate_presence = require("@tamagui/animate-presence");
+var import_aria_hidden = require("@tamagui/aria-hidden");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_core = require("@tamagui/core");
 var import_create_context = require("@tamagui/create-context");
 var import_dismissable = require("@tamagui/dismissable");
 var import_focus_scope = require("@tamagui/focus-scope");
 var import_portal = require("@tamagui/portal");
+var import_remove_scroll = require("@tamagui/remove-scroll");
+var import_sheet = require("@tamagui/sheet");
 var import_stacks = require("@tamagui/stacks");
 var import_text = require("@tamagui/text");
 var import_use_controllable_state = require("@tamagui/use-controllable-state");
-var import_aria_hidden = require("aria-hidden");
 var React = __toESM(require("react"));
-var import_react_remove_scroll = require("react-remove-scroll");
 const DIALOG_NAME = "Dialog";
 const [createDialogContext, createDialogScope] = (0, import_create_context.createContextScope)(DIALOG_NAME);
 const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
@@ -81,96 +61,112 @@ const TRIGGER_NAME = "DialogTrigger";
 const DialogTriggerFrame = (0, import_core.styled)(import_stacks.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 = (0, import_compose_refs.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: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
-  }));
-});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
+      tag: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: (0, import_core.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 = (0, import_core.useThemeName)();
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  const isShowing = forceMount || context.open;
-  const contents = /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, isShowing ? children : null);
-  if (!context.modal) {
-    return contents;
+const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
+  alignItems: "center",
+  justifyContent: "center",
+  fullscreen: true,
+  zIndex: 100,
+  ...import_core.isWeb && {
+    maxHeight: "100vh"
   }
-  if (!import_core.isWeb && !isShowing) {
-    return contents;
+});
+const DialogPortal = DialogPortalFrame.extractable(
+  (props) => {
+    const { __scopeDialog, forceMount, children, ...frameProps } = props;
+    const themeName = (0, import_core.useThemeName)();
+    const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+    const isShowing = forceMount || context.open;
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+      children: isShowing ? children : null
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (!context.modal || isSheet) {
+      return contents;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+      name: `${context.scopeKey}SheetContents`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
+        scope: __scopeDialog,
+        ...context,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+          name: themeName,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, {
+            scope: __scopeDialog,
+            forceMount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalFrame, {
+              pointerEvents: isShowing ? "auto" : "none",
+              ...frameProps,
+              children: contents
+            })
+          })
+        })
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(PortalProvider, {
-    scope: __scopeDialog,
-    forceMount
-  }, /* @__PURE__ */ React.createElement(import_portal.Portal, __spreadValues(__spreadValues({
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 100,
-    pointerEvents: isShowing ? "auto" : "none"
-  }, import_core.isWeb && {
-    maxHeight: "100vh"
-  }), rest), /* @__PURE__ */ React.createElement(import_core.Theme, {
-    name: themeName
-  }, contents)));
-};
+);
 DialogPortal.displayName = PORTAL_NAME;
 const OVERLAY_NAME = "DialogOverlay";
 const DialogOverlayFrame = (0, import_core.styled)(import_stacks.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__ */ (0, import_jsx_runtime.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 (!import_core.isWeb) {
-    return content;
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
+      "data-state": getState(context.open),
+      pointerEvents: context.open ? "auto" : "none",
+      ...overlayProps,
+      ref: forwardedRef
+    });
   }
-  return /* @__PURE__ */ React.createElement(import_react_remove_scroll.RemoveScroll, {
-    as: import_core.Slot,
-    allowPinchZoom: context.allowPinchZoom,
-    shards: [context.contentRef]
-  }, content);
-});
+);
 const CONTENT_NAME = "DialogContent";
 const DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   name: CONTENT_NAME,
   tag: "dialog",
-  pointerEvents: "auto",
   position: "relative",
   backgrounded: true,
   padded: true,
@@ -187,216 +183,289 @@ const DialogContentFrame = (0, import_core.styled)(import_stacks.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 = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
-  React.useEffect(() => {
-    if (!context.open)
-      return;
-    const content = contentRef.current;
-    if (content)
-      return (0, import_aria_hidden.hideOthers)(content);
-  }, [context.open]);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
-      var _a;
-      event.preventDefault();
-      (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-    }),
-    onPointerDownOutside: (0, import_core.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: (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, {
+        context,
+        ...contentProps,
+        ref: forwardedRef
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, {
+        context,
+        ...contentProps,
+        ref: forwardedRef
+      });
+      if (!import_core.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__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
+        forwardProps: true,
+        enabled: context.open,
+        allowPinchZoom: context.allowPinchZoom,
+        shards: [context.contentRef],
+        removeScrollBar: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_compose_refs.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 (0, import_aria_hidden.hideOthers)(content);
+    }, [context.open]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
+      ...props,
+      context,
+      ref: composedRefs,
+      trapFocus: context.open,
+      disableOutsidePointerEvents: true,
+      onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+        var _a;
         event.preventDefault();
+        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+      }),
+      onPointerDownOutside: (0, import_core.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: (0, import_core.composeEventHandlers)(
+        props.onFocusOutside,
+        (event) => event.preventDefault()
+      ),
+      children
+    });
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentFrame, {
+      id: context.contentId,
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.titleId,
+      "data-state": getState(context.open),
+      ...contentProps
+    });
+    if (showSheet) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.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 = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_focus_scope.FocusScope, {
-    loop: true,
-    trapped: trapFocus,
-    onMountAutoFocus: onOpenAutoFocus,
-    onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React.createElement(import_dismissable.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 (!import_core.isWeb) {
+      return contents;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, {
+              titleId: context.titleId
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, {
+              contentRef,
+              descriptionId: context.descriptionId
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
+const SHEET_CONTENTS_NAME = "DialogSheetContents";
+const DialogSheetContents = ({ __scopeDialog }) => {
+  const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
+    name: `${context.scopeKey}SheetContents`
+  });
+};
+DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
 const TITLE_NAME = "DialogTitle";
 const DialogTitleFrame = (0, import_core.styled)(import_text.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__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, {
+      id: context.titleId,
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogTitle.displayName = TITLE_NAME;
 const DialogDescriptionFrame = (0, import_core.styled)(import_text.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__ */ (0, import_jsx_runtime.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(import_stacks.YStack, __spreadProps(__spreadValues({
-    tag: "button"
-  }, closeProps), {
-    ref: forwardedRef,
-    onPress: (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+      tag: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: (0, import_core.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] = (0, import_create_context.createContext)(TITLE_WARNING_NAME, {
+const [DialogWarningProvider, useWarningContext] = (0, import_create_context.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 (!import_core.isWeb)
-      return;
-    if (titleId) {
-      const hasTitle = document.getElementById(titleId);
-      if (!hasTitle)
-        throw new Error(MESSAGE);
-    }
-  }, [MESSAGE, titleId]);
+    React.useEffect(() => {
+      if (!import_core.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 (!import_core.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 (!import_core.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) {
@@ -409,6 +478,10 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     modal = true,
     allowPinchZoom = false
   } = props;
+  const { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
+    Contents: DialogSheetContents
+  });
+  const sheetBreakpoint = when || false;
   const triggerRef = React.useRef(null);
   const contentRef = React.useRef(null);
   const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
@@ -416,22 +489,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: (0, import_core.useId)() || "",
-    titleId: (0, import_core.useId)() || "",
-    descriptionId: (0, import_core.useId)() || "",
-    open,
-    onOpenChange: setOpen,
-    onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-    modal,
-    allowPinchZoom
-  }, children);
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      open: setOpen
+    }),
+    [setOpen]
+  );
+  const scopeId = (0, import_core.useId)();
+  const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
+      scope: __scopeDialog,
+      scopeKey,
+      triggerRef,
+      contentRef,
+      contentId: (0, import_core.useId)() || "",
+      titleId: (0, import_core.useId)() || "",
+      descriptionId: (0, import_core.useId)() || "",
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      allowPinchZoom,
+      sheetBreakpoint,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, {
+        onOpenChange: setOpen,
+        __scopeDialog,
+        children
+      })
+    })
+  });
 });
 const Dialog2 = (0, import_core.withStaticProperties)(DialogInner, {
   Trigger: DialogTrigger,
@@ -440,8 +528,34 @@ const Dialog2 = (0, import_core.withStaticProperties)(DialogInner, {
   Content: DialogContent,
   Title: DialogTitle,
   Description: DialogDescription,
-  Close: DialogClose
+  Close: DialogClose,
+  Sheet: import_sheet.ControlledSheet,
+  Adapt: import_adapt.Adapt
 });
+const DialogSheetController = (props) => {
+  const context = useDialogContext("DialogSheetController", props.__scopeDialog);
+  const showSheet = useShowDialogSheet(context);
+  const breakpointActive = useSheetBreakpointActive(context);
+  const getShowSheet = (0, import_core.useGet)(showSheet);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
+    onOpenChange: (val) => {
+      if (getShowSheet()) {
+        props.onOpenChange(val);
+      }
+    },
+    open: context.open,
+    hidden: breakpointActive === false,
+    children: props.children
+  });
+};
+const useSheetBreakpointActive = (context) => {
+  const media = (0, import_core.useMedia)();
+  return context.sheetBreakpoint ? media[context.sheetBreakpoint] : false;
+};
+const useShowDialogSheet = (context) => {
+  const breakpointActive = useSheetBreakpointActive(context);
+  return context.open === false ? false : breakpointActive;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Dialog,
@@ -450,9 +564,11 @@ const Dialog2 = (0, import_core.withStaticProperties)(DialogInner, {
   DialogDescription,
   DialogOverlay,
   DialogPortal,
+  DialogPortalFrame,
+  DialogSheetContents,
   DialogTitle,
   DialogTrigger,
-  WarningProvider,
+  DialogWarningProvider,
   createDialogScope
 });
 //# sourceMappingURL=Dialog.js.map