@tamagui/dialog 1.13.3 → 1.14.0

package/dist/esm/Dialog.mjs

@@ -1,610 +1,6 @@
-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 {
-  Theme,
-  composeEventHandlers,
-  isWeb,
-  spacedChildren,
-  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 { PortalHost, PortalItem } from "@tamagui/portal";
-import { RemoveScroll } from "@tamagui/remove-scroll";
-import { ControlledSheet, SheetController, SheetOverlayFrame } from "@tamagui/sheet";
-import { ThemeableStack, YStack } from "@tamagui/stacks";
-import { H2, Paragraph } from "@tamagui/text";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-const DIALOG_NAME = "Dialog";
-const [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
-const [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
-const TRIGGER_NAME = "DialogTrigger";
-const DialogTriggerFrame = styled(YStack, {
-  name: TRIGGER_NAME
-});
-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 DialogPortalFrame = styled(YStack, {
-  alignItems: "center",
-  justifyContent: "center",
-  fullscreen: true,
-  zIndex: 100,
-  ...isWeb && {
-    maxHeight: "100vh",
-    position: "fixed"
-  }
-});
-const DialogPortalItem = (props) => {
-  const themeName = useThemeName();
-  const context = useDialogContext(PORTAL_NAME, props.__scopeDialog);
-  return /* @__PURE__ */ jsx(PortalItem, { hostName: props.hostName, children: /* @__PURE__ */ jsx(DialogPortalItemContent, { ...props, themeName, context }) });
-};
-function DialogPortalItemContent(props) {
-  const {
-    __scopeDialog,
-    children,
-    context,
-    themeName,
-    space,
-    spaceDirection,
-    separator
-  } = props;
-  let childrenSpaced = children;
-  if (space || separator) {
-    childrenSpaced = spacedChildren({
-      children,
-      separator,
-      space,
-      direction: spaceDirection
-    });
-  }
-  return /* @__PURE__ */ jsx(DialogProvider, { scope: __scopeDialog, ...context, children: /* @__PURE__ */ jsx(Theme, { name: themeName, children: childrenSpaced }) });
-}
-const DialogPortal = (props) => {
-  const { __scopeDialog, forceMount, children, ...frameProps } = props;
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  const isShowing = forceMount || context.open;
-  const [isFullyHidden, setIsFullyHidden] = React.useState(!isShowing);
-  if (isShowing && isFullyHidden) {
-    setIsFullyHidden(false);
-  }
-  const contents = /* @__PURE__ */ jsx(
-    AnimatePresence,
-    {
-      onExitComplete: () => {
-        setIsFullyHidden(true);
-      },
-      children: isShowing ? children : null
-    }
-  );
-  const isSheet = useShowDialogSheet(context);
-  if (isSheet) {
-    return children;
-  }
-  if (context.modal) {
-    if (isFullyHidden) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(DialogPortalItem, { __scopeDialog, children: /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: /* @__PURE__ */ jsx(DialogPortalFrame, { pointerEvents: isShowing ? "auto" : "none", ...frameProps, children: contents }) }) });
-  }
-  return contents;
-};
-DialogPortal.displayName = PORTAL_NAME;
-const OVERLAY_NAME = "DialogOverlay";
-const DialogOverlayFrame = styled(SheetOverlayFrame, {
-  name: OVERLAY_NAME
-});
-const DialogOverlay = DialogOverlayFrame.extractable(
-  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 });
-    }
-  )
-);
-DialogOverlay.displayName = OVERLAY_NAME;
-const DialogOverlayImpl = React.forwardRef(
-  (props, forwardedRef) => {
-    const { context, ...overlayProps } = props;
-    return (
-      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-      // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx(
-        DialogOverlayFrame,
-        {
-          "data-state": getState(context.open),
-          pointerEvents: context.open ? "auto" : "none",
-          ...overlayProps,
-          ref: forwardedRef
-        }
-      )
-    );
-  }
-);
-const CONTENT_NAME = "DialogContent";
-const DialogContentFrame = styled(ThemeableStack, {
-  name: CONTENT_NAME,
-  tag: "dialog",
-  position: "relative",
-  backgrounded: true,
-  padded: true,
-  radiused: true,
-  elevate: true,
-  variants: {
-    size: {
-      "...size": (val, extras) => {
-        return {};
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$true"
-  }
-});
-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;
-      }
-      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);
-    if (isWeb) {
-      React.useEffect(() => {
-        if (!context.open)
-          return;
-        const content = contentRef.current;
-        if (content)
-          return hideOthers(content);
-      }, [context.open]);
-    }
-    return /* @__PURE__ */ jsx(
-      DialogContentImpl,
-      {
-        ...props,
-        context,
-        ref: composedRefs,
-        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(DialogPortalItem, { hostName: getSheetContentsName(context), children: contentProps.children });
-    }
-    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 TITLE_NAME = "DialogTitle";
-const DialogTitleFrame = styled(H2, {
-  name: TITLE_NAME
-});
-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 { __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 { __scopeDialog, displayWhenAdapted, ...closeProps } = props;
-    const context = useDialogContext(CLOSE_NAME, __scopeDialog, {
-      warn: false,
-      fallback: {}
-    });
-    const isSheet = useShowDialogSheet(context);
-    if (isSheet && !displayWhenAdapted) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      YStack,
-      {
-        tag: "button",
-        accessibilityLabel: "Dialog Close",
-        ...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 [DialogWarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME,
-  titleName: TITLE_NAME,
-  docsSlug: "dialog"
-});
-const TitleWarning = ({ titleId }) => {
-  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.
+import{Fragment as ne,jsx as i,jsxs as re}from"react/jsx-runtime";import{Adapt as ue,useAdaptParent as ge}from"@tamagui/adapt";import{AnimatePresence as de}from"@tamagui/animate-presence";import{hideOthers as me}from"@tamagui/aria-hidden";import{useComposedRefs as F}from"@tamagui/compose-refs";import{Theme as fe,composeEventHandlers as P,isWeb as f,spacedChildren as De,styled as D,useGet as Pe,useId as N,useMedia as Ce,useThemeName as he,withStaticProperties as Se}from"@tamagui/core";import{createContext as ye,createContextScope as Te}from"@tamagui/create-context";import{Dismissable as Ee}from"@tamagui/dismissable";import{FocusScope as Oe}from"@tamagui/focus-scope";import{PortalHost as B,PortalItem as ve}from"@tamagui/portal";import{RemoveScroll as Ne}from"@tamagui/remove-scroll";import{ControlledSheet as Re,SheetController as xe,SheetOverlayFrame as Ie}from"@tamagui/sheet";import{ThemeableStack as be,YStack as A}from"@tamagui/stacks";import{H2 as Fe,Paragraph as Ae}from"@tamagui/text";import{useControllableState as we}from"@tamagui/use-controllable-state";import*as c from"react";const Y="Dialog",[Z,_e]=Te(Y),[$,g]=Z(Y),w="DialogTrigger",Me=D(A,{name:w}),_=c.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,r=g(w,n),s=F(o,r.triggerRef);return i(Me,{tag:"button","aria-haspopup":"dialog","aria-expanded":r.open,"aria-controls":r.contentId,"data-state":G(r.open),...t,ref:s,onPress:P(e.onPress,r.onOpenToggle)})});_.displayName=w;const R="DialogPortal",[ke,K]=Z(R,{forceMount:void 0}),We=D(A,{alignItems:"center",justifyContent:"center",fullscreen:!0,zIndex:100,...f&&{maxHeight:"100vh",position:"fixed"}}),j=e=>{const o=he(),n=g(R,e.__scopeDialog);return i(ve,{hostName:e.hostName,children:i(Ve,{...e,themeName:o,context:n})})};function Ve(e){const{__scopeDialog:o,children:n,context:t,themeName:r,space:s,spaceDirection:a,separator:l}=e;let u=n;return(s||l)&&(u=De({children:n,separator:l,space:s,direction:a})),i($,{scope:o,...t,children:i(fe,{name:r,children:u})})}const M=e=>{const{__scopeDialog:o,forceMount:n,children:t,...r}=e,s=g(R,o),a=n||s.open,[l,u]=c.useState(!a);a&&l&&u(!1);const d=i(de,{onExitComplete:()=>{u(!0)},children:a?t:null});return h(s)?t:s.modal?l?null:i(j,{__scopeDialog:o,children:i(ke,{scope:o,forceMount:n,children:i(We,{pointerEvents:a?"auto":"none",...r,children:d})})}):d};M.displayName=R;const x="DialogOverlay",z=D(Ie,{name:x}),k=z.extractable(c.forwardRef(({__scopeDialog:e,...o},n)=>{const t=K(x,e),{forceMount:r=t.forceMount,...s}=o,a=g(x,e),l=h(a);return!r&&(!a.modal||l)?null:i(He,{context:a,...s,ref:n})}));k.displayName=x;const He=c.forwardRef((e,o)=>{const{context:n,...t}=e;return i(z,{"data-state":G(n.open),pointerEvents:n.open?"auto":"none",...t,ref:o})}),C="DialogContent",U=D(be,{name:C,tag:"dialog",position:"relative",backgrounded:!0,padded:!0,radiused:!0,elevate:!0,variants:{size:{"...size":(e,o)=>({})}},defaultVariants:{size:"$true"}}),W=U.extractable(c.forwardRef(({__scopeDialog:e,...o},n)=>{const t=K(C,e),{forceMount:r=t.forceMount,...s}=o,a=g(C,e),l=a.modal?i(Le,{context:a,...s,ref:n}):i(Ge,{context:a,...s,ref:n});return f?i(Ne,{forwardProps:!0,enabled:a.open,allowPinchZoom:a.allowPinchZoom,shards:[a.contentRef],removeScrollBar:!1,children:i("div",{className:"_dsp_contents",children:l})}):l}));W.displayName=C;const Le=c.forwardRef(({children:e,context:o,...n},t)=>{const r=c.useRef(null),s=F(t,o.contentRef,r);return f&&c.useEffect(()=>{if(!o.open)return;const a=r.current;if(a)return me(a)},[o.open]),i(q,{...n,context:o,ref:s,disableOutsidePointerEvents:!0,onCloseAutoFocus:P(n.onCloseAutoFocus,a=>{var l;a.preventDefault(),(l=o.triggerRef.current)==null||l.focus()}),onPointerDownOutside:P(n.onPointerDownOutside,a=>{const l=a.detail.originalEvent,u=l.button===0&&l.ctrlKey===!0;(l.button===2||u)&&a.preventDefault()}),onFocusOutside:P(n.onFocusOutside,a=>a.preventDefault()),children:e})}),Ge=c.forwardRef((e,o)=>{const n=c.useRef(!1);return i(q,{...e,ref:o,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:t=>{var r,s;(r=e.onCloseAutoFocus)==null||r.call(e,t),t.defaultPrevented||(n.current||(s=e.context.triggerRef.current)==null||s.focus(),t.preventDefault()),n.current=!1},onInteractOutside:t=>{var l;(l=e.onInteractOutside)==null||l.call(e,t),t.defaultPrevented||(n.current=!0);const r=t.target,s=e.context.triggerRef.current;if(!(s instanceof HTMLElement))return;s.contains(r)&&t.preventDefault()}})}),q=c.forwardRef((e,o)=>{const{__scopeDialog:n,trapFocus:t,onOpenAutoFocus:r,onCloseAutoFocus:s,disableOutsidePointerEvents:a,onEscapeKeyDown:l,onPointerDownOutside:u,onFocusOutside:d,onInteractOutside:S,context:p,...y}=e,T=c.useRef(null),E=F(o,T),O=h(p),v=i(U,{id:p.contentId,"aria-describedby":p.descriptionId,"aria-labelledby":p.titleId,"data-state":G(p.open),...y});return O?i(j,{hostName:oe(p),children:y.children}):f?re(ne,{children:[i(Oe,{loop:!0,trapped:t,onMountAutoFocus:r,forceUnmount:!p.open,onUnmountAutoFocus:s,children:i(Ee,{disableOutsidePointerEvents:p.open&&a,forceUnmount:!p.open,onEscapeKeyDown:l,onPointerDownOutside:u,onFocusOutside:d,onInteractOutside:S,ref:E,onDismiss:()=>p.onOpenChange(!1),children:v})}),process.env.NODE_ENV==="development"&&re(ne,{children:[i($e,{titleId:p.titleId}),i(je,{contentRef:T,descriptionId:p.descriptionId})]})]}):v}),I="DialogTitle",Be=D(Fe,{name:I}),V=c.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,r=g(I,n);return i(Be,{id:r.titleId,...t,ref:o})});V.displayName=I;const Ye=D(Ae,{name:"DialogDescription"}),J="DialogDescription",H=c.forwardRef((e,o)=>{const{__scopeDialog:n,...t}=e,r=g(J,n);return i(Ye,{id:r.descriptionId,...t,ref:o})});H.displayName=J;const Q="DialogClose",L=c.forwardRef((e,o)=>{const{__scopeDialog:n,displayWhenAdapted:t,...r}=e,s=g(Q,n,{warn:!1,fallback:{}});return h(s)&&!t?null:i(A,{tag:"button",accessibilityLabel:"Dialog Close",...r,ref:o,onPress:P(e.onPress,()=>s.onOpenChange(!1))})});L.displayName=Q;function G(e){return e?"open":"closed"}const X="DialogTitleWarning",[Ze,ee]=ye(X,{contentName:C,titleName:I,docsSlug:"dialog"}),$e=({titleId:e})=>{if(process.env.NODE_ENV==="development"){const o=ee(X),n=`\`${o.contentName}\` requires a \`${o.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.
+If you want to hide the \`${o.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) {
-          console.warn(MESSAGE);
-        }
-      }
-    }, [MESSAGE, titleId]);
-  }
-  return null;
-};
-const DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
-const DescriptionWarning = ({
-  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 Dialog = withStaticProperties(
-  React.forwardRef(function Dialog2(props, ref) {
-    const {
-      __scopeDialog,
-      children,
-      open: openProp,
-      defaultOpen = false,
-      onOpenChange,
-      modal = true,
-      allowPinchZoom = false
-    } = props;
-    const scopeId = useId();
-    const contentId = useId();
-    const titleId = useId();
-    const descriptionId = useId();
-    const scopeKey = __scopeDialog ? Object.keys(__scopeDialog)[0] : scopeId;
-    const sheetContentsName = getSheetContentsName({ scopeKey, contentId });
-    const triggerRef = React.useRef(null);
-    const contentRef = React.useRef(null);
-    const [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen,
-      onChange: onOpenChange
-    });
-    const onOpenToggle = React.useCallback(() => {
-      setOpen((prevOpen) => !prevOpen);
-    }, [setOpen]);
-    const context = {
-      scope: __scopeDialog,
-      scopeKey,
-      triggerRef,
-      contentRef,
-      contentId,
-      titleId,
-      descriptionId,
-      open,
-      onOpenChange: setOpen,
-      onOpenToggle,
-      modal,
-      allowPinchZoom
-    };
-    const { when, AdaptProvider } = useAdaptParent({
-      Contents: React.useCallback(
-        (props2) => {
-          return /* @__PURE__ */ jsx(PortalHost, { forwardProps: props2, name: sheetContentsName });
-        },
-        [sheetContentsName]
-      )
-    });
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        open: setOpen
-      }),
-      [setOpen]
-    );
-    return /* @__PURE__ */ jsx(AdaptProvider, { children: /* @__PURE__ */ jsx(DialogProvider, { ...context, sheetBreakpoint: when, children: /* @__PURE__ */ jsx(DialogSheetController, { onOpenChange: setOpen, __scopeDialog, children }) }) });
-  }),
-  {
-    Trigger: DialogTrigger,
-    Portal: DialogPortal,
-    Overlay: DialogOverlay,
-    Content: DialogContent,
-    Title: DialogTitle,
-    Description: DialogDescription,
-    Close: DialogClose,
-    Sheet: ControlledSheet,
-    Adapt
-  }
-);
-const SHEET_CONTENTS_NAME = "DialogSheetContents";
-const DialogSheetContents = ({
-  name,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(PortalHost, { forwardProps: props, name });
-};
-DialogSheetContents.displayName = SHEET_CONTENTS_NAME;
-const getSheetContentsName = ({
-  scopeKey,
-  contentId
-}) => `${scopeKey || contentId}SheetContents`;
-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();
-  if (!context.sheetBreakpoint)
-    return false;
-  if (context.sheetBreakpoint === true)
-    return true;
-  return media[context.sheetBreakpoint];
-};
-const useShowDialogSheet = (context) => {
-  const breakpointActive = useSheetBreakpointActive(context);
-  return context.open === false ? false : breakpointActive;
-};
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogOverlayFrame,
-  DialogPortal,
-  DialogPortalFrame,
-  DialogSheetContents,
-  DialogTitle,
-  DialogTrigger,
-  DialogWarningProvider,
-  createDialogScope
-};
+For more information, see https://radix-ui.com/primitives/docs/components/${o.docsSlug}`;c.useEffect(()=>{f&&e&&(document.getElementById(e)||console.warn(n))},[n,e])}return null},Ke="DialogDescriptionWarning",je=({contentRef:e,descriptionId:o})=>{if(process.env.NODE_ENV==="development"){const t=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ee(Ke).contentName}}.`;c.useEffect(()=>{if(!f)return;const r=e.current;if(!(r instanceof HTMLElement))return;const s=r.getAttribute("aria-describedby");o&&s&&(document.getElementById(o)||console.warn(t))},[t,e,o])}return null},ze=Se(c.forwardRef(function(o,n){const{__scopeDialog:t,children:r,open:s,defaultOpen:a=!1,onOpenChange:l,modal:u=!0,allowPinchZoom:d=!1}=o,S=N(),p=N(),y=N(),T=N(),E=t?Object.keys(t)[0]:S,O=oe({scopeKey:E,contentId:p}),v=c.useRef(null),ae=c.useRef(null),[se,m]=we({prop:s,defaultProp:a,onChange:l}),ie=c.useCallback(()=>{m(b=>!b)},[m]),le={scope:t,scopeKey:E,triggerRef:v,contentRef:ae,contentId:p,titleId:y,descriptionId:T,open:se,onOpenChange:m,onOpenToggle:ie,modal:u,allowPinchZoom:d},{when:ce,AdaptProvider:pe}=ge({Contents:c.useCallback(b=>i(B,{forwardProps:b,name:O}),[O])});return c.useImperativeHandle(n,()=>({open:m}),[m]),i(pe,{children:i($,{...le,sheetBreakpoint:ce,children:i(Je,{onOpenChange:m,__scopeDialog:t,children:r})})})}),{Trigger:_,Portal:M,Overlay:k,Content:W,Title:V,Description:H,Close:L,Sheet:Re,Adapt:ue}),Ue="DialogSheetContents",qe=({name:e,...o})=>i(B,{forwardProps:o,name:e});qe.displayName=Ue;const oe=({scopeKey:e,contentId:o})=>`${e||o}SheetContents`,Je=e=>{const o=g("DialogSheetController",e.__scopeDialog),n=h(o),t=te(o),r=Pe(n);return i(xe,{onOpenChange:s=>{r()&&e.onOpenChange(s)},open:o.open,hidden:t===!1,children:e.children})},te=e=>{const o=Ce();return e.sheetBreakpoint?e.sheetBreakpoint===!0?!0:o[e.sheetBreakpoint]:!1},h=e=>{const o=te(e);return e.open===!1?!1:o};export{ze as Dialog,L as DialogClose,W as DialogContent,H as DialogDescription,k as DialogOverlay,z as DialogOverlayFrame,M as DialogPortal,We as DialogPortalFrame,qe as DialogSheetContents,V as DialogTitle,_ as DialogTrigger,Ze as DialogWarningProvider,_e as createDialogScope};
 //# sourceMappingURL=Dialog.mjs.map