@hanzogui/dialog 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/Dialog.cjs

@@ -0,0 +1,618 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogContext: () => DialogContext,
+  DialogDescription: () => DialogDescription,
+  DialogOverlay: () => DialogOverlay,
+  DialogOverlayFrame: () => DialogOverlayFrame,
+  DialogPortal: () => DialogPortal,
+  DialogPortalFrame: () => DialogPortalFrame,
+  DialogProvider: () => DialogProvider,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  DialogWarningProvider: () => DialogWarningProvider,
+  useDialogContext: () => useDialogContext
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_gui_adapt = require("@hanzo/gui-adapt"),
+  import_gui_animate = require("@hanzo/gui-animate"),
+  import_gui_compose_refs = require("@hanzo/gui-compose-refs"),
+  import_gui_constants = require("@hanzo/gui-constants"),
+  import_gui_core = require("@hanzo/gui-core"),
+  import_gui_create_context = require("@hanzo/gui-create-context"),
+  import_gui_dismissable = require("@hanzo/gui-dismissable"),
+  import_gui_focus_scope = require("@hanzo/gui-focus-scope"),
+  import_gui_helpers = require("@hanzo/gui-helpers"),
+  import_gui_portal = require("@hanzo/gui-portal"),
+  import_gui_remove_scroll = require("@hanzo/gui-remove-scroll"),
+  import_controller = require("@hanzo/gui-sheet/controller"),
+  import_gui_stacks = require("@hanzo/gui-stacks"),
+  import_gui_text = require("@hanzo/gui-text"),
+  import_gui_use_controllable_state = require("@hanzo/gui-use-controllable-state"),
+  import_gui_z_index_stack = require("@hanzo/gui-z-index-stack"),
+  React = __toESM(require("react"), 1),
+  import_jsx_runtime = require("react/jsx-runtime");
+const DialogContext = (0, import_gui_core.createStyledContext)(
+  // since we always provide this we can avoid setting here
+  {}, "Dialog__"),
+  {
+    useStyledContext: useDialogContext,
+    Provider: DialogProvider
+  } = DialogContext,
+  DialogTriggerFrame = (0, import_gui_core.styled)(import_gui_core.View, {
+    name: "DialogTrigger"
+  }),
+  DialogTrigger = DialogTriggerFrame.styleable(function (props, forwardedRef) {
+    const {
+        scope,
+        ...triggerProps
+      } = props,
+      isInsideButton = React.useContext(import_gui_stacks.ButtonNestingContext),
+      context = useDialogContext(scope),
+      composedTriggerRef = (0, import_gui_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_stacks.ButtonNestingContext.Provider, {
+      value: !0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
+        render: isInsideButton ? "span" : "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onPress: (0, import_gui_helpers.composeEventHandlers)(props.onPress, context.onOpenToggle)
+      })
+    });
+  }),
+  DialogPortalFrame = (0, import_gui_core.styled)(import_gui_stacks.YStack, {
+    pointerEvents: "none",
+    render: "dialog",
+    variants: {
+      unstyled: {
+        false: {
+          alignItems: "center",
+          justifyContent: "center",
+          fullscreen: !0,
+          "$platform-web": {
+            // undo dialog styles
+            borderWidth: 0,
+            backgroundColor: "transparent",
+            color: "inherit",
+            maxInlineSize: "none",
+            margin: 0,
+            width: "auto",
+            height: "auto",
+            // ensure always in frame and right height
+            maxHeight: "100vh",
+            position: "fixed",
+            // ensure dialog inherits stacking context from portal wrapper
+            zIndex: 1
+          }
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  needsRepropagation = (0, import_gui_portal.needsPortalRepropagation)(),
+  DialogPortalItem = ({
+    context,
+    children
+  }) => {
+    const themeName = (0, import_gui_core.useThemeName)(),
+      isAdapted = (0, import_gui_adapt.useAdaptIsActive)(context.adaptScope),
+      adaptContext = (0, import_gui_adapt.useAdaptContext)(context.adaptScope);
+    let content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_core.Theme, {
+      name: themeName,
+      children
+    });
+    return needsRepropagation && (content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_adapt.ProvideAdaptContext, {
+      ...adaptContext,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
+        ...context,
+        children: content
+      })
+    })), isAdapted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_adapt.AdaptPortalContents, {
+      scope: context.adaptScope,
+      children: content
+    }) : context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_portal.PortalItem, {
+      hostName: context.modal ? "root" : context.adaptScope,
+      children: content
+    }) : content;
+  },
+  DialogPortal = React.forwardRef((props, forwardRef) => {
+    const {
+        scope,
+        forceMount,
+        children,
+        ...frameProps
+      } = props,
+      dialogRef = React.useRef(null),
+      ref = (0, import_gui_compose_refs.composeRefs)(dialogRef, forwardRef),
+      context = useDialogContext(scope),
+      keepMounted = forceMount || context.keepChildrenMounted,
+      isAdapted = (0, import_gui_adapt.useAdaptIsActive)(context.adaptScope),
+      [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
+    context.open && isFullyHidden && setIsFullyHidden(!1);
+    const isVisible = context.open ? !0 : !isFullyHidden;
+    import_gui_constants.isWeb && (0, import_gui_constants.useIsomorphicLayoutEffect)(() => {
+      const node = dialogRef.current;
+      node instanceof HTMLDialogElement && (isVisible ? node.show?.() : node.close?.());
+    }, [isVisible]);
+    const onAnimationCompleteRef = React.useRef(context.onAnimationComplete);
+    onAnimationCompleteRef.current = context.onAnimationComplete;
+    const handleExitComplete = React.useCallback(() => {
+      setIsFullyHidden(!0), onAnimationCompleteRef.current?.({
+        open: !1
+      });
+    }, []);
+    React.useEffect(() => {
+      if (context.open && !isAdapted && onAnimationCompleteRef.current) {
+        const tm = setTimeout(() => {
+          onAnimationCompleteRef.current?.({
+            open: !0
+          });
+        }, 350);
+        return () => clearTimeout(tm);
+      }
+    }, [context.open, isAdapted]);
+    const zIndex = (0, import_gui_core.getExpandedShorthand)("zIndex", props),
+      contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_z_index_stack.StackZIndexContext, {
+        zIndex: (0, import_gui_portal.resolveViewZIndex)(zIndex),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_animate.Animate, {
+          type: "presence",
+          present: !!context.open,
+          keepChildrenMounted: !!keepMounted,
+          onExitComplete: handleExitComplete,
+          passThrough: isAdapted,
+          children
+        })
+      }),
+      framedContents = isFullyHidden && !keepMounted && !isAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_core.LayoutMeasurementController, {
+        disable: !context.open,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalFrame, {
+          ref,
+          ...(import_gui_constants.isWeb && context.open && {
+            "aria-modal": !0
+          }),
+          pointerEvents: context.open ? "auto" : "none",
+          ...frameProps,
+          className: "_no_backdrop " + (frameProps.className || ""),
+          children: contents
+        })
+      });
+    return import_gui_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_portal.Portal, {
+      zIndex,
+      stackZIndex: 1e5,
+      passThrough: isAdapted,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PassthroughTheme, {
+        passThrough: isAdapted,
+        children: framedContents
+      })
+    }) : isAdapted ? framedContents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+      context,
+      children: framedContents
+    });
+  }),
+  PassthroughTheme = ({
+    children,
+    passThrough
+  }) => {
+    const themeName = (0, import_gui_core.useThemeName)();
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_core.Theme, {
+      passThrough,
+      name: themeName,
+      forceClassName: !0,
+      children
+    });
+  },
+  OVERLAY_NAME = "DialogOverlay",
+  DialogOverlayFrame = (0, import_gui_core.styled)(import_gui_stacks.YStack, {
+    name: OVERLAY_NAME,
+    zIndex: 1,
+    variants: {
+      open: {
+        true: {
+          pointerEvents: "auto"
+        },
+        false: {
+          pointerEvents: "none"
+        }
+      },
+      unstyled: {
+        false: {
+          fullscreen: !0,
+          position: "absolute",
+          backgroundColor: "$background",
+          pointerEvents: "auto"
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  DialogOverlay = DialogOverlayFrame.styleable(function ({
+    scope,
+    ...props
+  }, forwardedRef) {
+    const context = useDialogContext(scope),
+      {
+        forceMount = context.forceMount,
+        ...overlayProps
+      } = props,
+      isAdapted = (0, import_gui_adapt.useAdaptIsActive)(context.adaptScope);
+    return !forceMount && (!context.modal || isAdapted) ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
+      "data-state": getState(context.open),
+      pointerEvents: context.open ? "auto" : "none",
+      ...overlayProps,
+      ref: forwardedRef
+    });
+  }),
+  CONTENT_NAME = "DialogContent",
+  DialogContentFrame = (0, import_gui_core.styled)(import_gui_stacks.ThemeableStack, {
+    name: CONTENT_NAME,
+    zIndex: 2,
+    variants: {
+      size: {
+        "...size": (val, extras) => ({})
+      },
+      unstyled: {
+        false: {
+          position: "relative",
+          backgroundColor: "$background",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          padding: "$true",
+          borderRadius: "$true",
+          elevate: !0,
+          // Ensure content receives pointer events (fixes React 19 + display:contents inheritance)
+          pointerEvents: "auto"
+        }
+      }
+    },
+    defaultVariants: {
+      size: "$true",
+      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
+    }
+  }),
+  DialogContent = DialogContentFrame.styleable(function ({
+    scope,
+    ...props
+  }, forwardedRef) {
+    const context = useDialogContext(scope),
+      contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: context.modal ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentModal, {
+          context,
+          ...props,
+          ref: forwardedRef
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentNonModal, {
+          context,
+          ...props,
+          ref: forwardedRef
+        })
+      });
+    return !import_gui_constants.isWeb || context.disableRemoveScroll ? contents : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_remove_scroll.RemoveScroll, {
+      enabled: context.open,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        "data-remove-scroll-container": !0,
+        className: "_dsp_contents",
+        children: contents
+      })
+    });
+  }),
+  DialogContentModal = React.forwardRef(({
+    children,
+    context,
+    ...props
+  }, forwardedRef) => {
+    const contentRef = React.useRef(null),
+      composedRefs = (0, import_gui_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
+      ...props,
+      context,
+      ref: composedRefs,
+      trapFocus: context.open,
+      disableOutsidePointerEvents: !0,
+      onCloseAutoFocus: (0, import_gui_helpers.composeEventHandlers)(props.onCloseAutoFocus, event => {
+        event.preventDefault(), context.triggerRef.current?.focus();
+      }),
+      onPointerDownOutside: (0, import_gui_helpers.composeEventHandlers)(props.onPointerDownOutside, event => {
+        const originalEvent = event.detail.originalEvent,
+          ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0;
+        (originalEvent.button === 2 || ctrlLeftClick) && event.preventDefault();
+      }),
+      onFocusOutside: (0, import_gui_helpers.composeEventHandlers)(props.onFocusOutside, event => event.preventDefault()),
+      ...(!props.unstyled && {
+        outlineStyle: "none"
+      }),
+      children
+    });
+  }),
+  DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(!1);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentImpl, {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: !1,
+      disableOutsidePointerEvents: !1,
+      onCloseAutoFocus: event => {
+        props.onCloseAutoFocus?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current || props.context.triggerRef.current?.focus(), event.preventDefault()), hasInteractedOutsideRef.current = !1;
+      },
+      onInteractOutside: event => {
+        props.onInteractOutside?.(event), event.defaultPrevented || (hasInteractedOutsideRef.current = !0);
+        const target = event.target,
+          trigger = props.context.triggerRef.current;
+        if (!(trigger instanceof HTMLElement)) return;
+        trigger.contains(target) && event.preventDefault();
+      }
+    });
+  }),
+  DialogContentImpl = React.forwardRef((props, forwardedRef) => {
+    const {
+        trapFocus,
+        onOpenAutoFocus,
+        onCloseAutoFocus,
+        disableOutsidePointerEvents,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside,
+        onInteractOutside,
+        context,
+        ...contentProps
+      } = props,
+      contentRef = React.useRef(null),
+      composedRefs = (0, import_gui_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+    if ((0, import_gui_adapt.useAdaptIsActive)(context.adaptScope)) return !import_gui_constants.isWeb && !context.open ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogPortalItem, {
+      context,
+      children: contentProps.children
+    });
+    const contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogContentFrame, {
+      ref: composedRefs,
+      id: context.contentId,
+      role: "dialog",
+      "aria-modal": context.modal,
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.titleId,
+      "data-state": getState(context.open),
+      pointerEvents: context.open ? "auto" : "none",
+      ...contentProps
+    });
+    return import_gui_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_dismissable.Dismissable, {
+        disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+        forceUnmount: !context.open,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside,
+        onInteractOutside,
+        onDismiss: () => context?.onOpenChange?.(!1),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_focus_scope.FocusScope, {
+          loop: !0,
+          enabled: context.open,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          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
+        })]
+      })]
+    }) : contents;
+  }),
+  DialogTitleFrame = (0, import_gui_core.styled)(import_gui_text.H2, {
+    name: "DialogTitle"
+  }),
+  DialogTitle = DialogTitleFrame.styleable(function (props, forwardedRef) {
+    const {
+        scope,
+        ...titleProps
+      } = props,
+      context = useDialogContext(scope);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogTitleFrame, {
+      id: context.titleId,
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }),
+  DialogDescriptionFrame = (0, import_gui_core.styled)(import_gui_text.Paragraph, {
+    name: "DialogDescription"
+  }),
+  DialogDescription = DialogDescriptionFrame.styleable(function (props, forwardedRef) {
+    const {
+        scope,
+        ...descriptionProps
+      } = props,
+      context = useDialogContext(scope);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
+      id: context.descriptionId,
+      ...descriptionProps,
+      ref: forwardedRef
+    });
+  }),
+  CLOSE_NAME = "DialogClose",
+  DialogCloseFrame = (0, import_gui_core.styled)(import_gui_core.View, {
+    name: CLOSE_NAME,
+    render: "button"
+  }),
+  DialogClose = DialogCloseFrame.styleable((props, forwardedRef) => {
+    const {
+        scope,
+        displayWhenAdapted,
+        ...closeProps
+      } = props,
+      context = useDialogContext(scope),
+      isAdapted = (0, import_gui_adapt.useAdaptIsActive)(context.adaptScope),
+      isInsideButton = React.useContext(import_gui_stacks.ButtonNestingContext);
+    return isAdapted && !displayWhenAdapted ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogCloseFrame, {
+      "aria-label": "Dialog Close",
+      render: isInsideButton ? "span" : "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: (0, import_gui_helpers.composeEventHandlers)(props.onPress, () => {
+        context.onOpenChange(!1);
+      })
+    });
+  });
+function getState(open) {
+  return open ? "open" : "closed";
+}
+const TITLE_WARNING_NAME = "DialogTitleWarning",
+  [DialogWarningProvider, useWarningContext] = (0, import_gui_create_context.createContext)(TITLE_WARNING_NAME, {
+    contentName: CONTENT_NAME,
+    titleName: "DialogTitle",
+    docsSlug: "dialog"
+  }),
+  TitleWarning = ({
+    titleId
+  }) => {
+    if (process.env.NODE_ENV === "development") {
+      const titleWarningContext = useWarningContext(TITLE_WARNING_NAME),
+        MESSAGE = `\`${titleWarningContext.contentName}\` wants a \`${titleWarningContext.titleName}\` to be accessible. If you want to hide the \`${titleWarningContext.titleName}\`, wrap it with <VisuallyHidden />.`;
+      React.useEffect(() => {
+        import_gui_constants.isWeb && titleId && (document.getElementById(titleId) || console.warn(MESSAGE));
+      }, [MESSAGE, titleId]);
+    }
+    return null;
+  },
+  DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning",
+  DescriptionWarning = ({
+    contentRef,
+    descriptionId
+  }) => {
+    if (process.env.NODE_ENV === "development") {
+      const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${useWarningContext(DESCRIPTION_WARNING_NAME).contentName}}.`;
+      React.useEffect(() => {
+        if (!import_gui_constants.isWeb) return;
+        const contentNode = contentRef.current;
+        if (!(contentNode instanceof HTMLElement)) return;
+        const describedById = contentNode.getAttribute("aria-describedby");
+        descriptionId && describedById && (document.getElementById(descriptionId) || console.warn(MESSAGE));
+      }, [MESSAGE, contentRef, descriptionId]);
+    }
+    return null;
+  },
+  Dialog = (0, import_gui_helpers.withStaticProperties)(React.forwardRef(function (props, ref) {
+    const {
+        scope = "",
+        children,
+        open: openProp,
+        defaultOpen = !1,
+        onOpenChange,
+        modal = !0,
+        keepChildrenMounted,
+        disableRemoveScroll = !1,
+        onAnimationComplete
+      } = props,
+      baseId = React.useId(),
+      dialogId = `Dialog-${scope}-${baseId}`,
+      contentId = `${dialogId}-content`,
+      titleId = `${dialogId}-title`,
+      descriptionId = `${dialogId}-description`,
+      triggerRef = React.useRef(null),
+      contentRef = React.useRef(null),
+      [open, setOpen] = (0, import_gui_use_controllable_state.useControllableState)({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange
+      }),
+      onOpenToggle = React.useCallback(() => {
+        setOpen(prevOpen => !prevOpen);
+      }, [setOpen]),
+      adaptScope = `DialogAdapt${scope}`,
+      context = {
+        dialogScope: scope,
+        adaptScope,
+        triggerRef,
+        contentRef,
+        contentId,
+        titleId,
+        descriptionId,
+        open,
+        onOpenChange: setOpen,
+        onOpenToggle,
+        modal,
+        keepChildrenMounted,
+        disableRemoveScroll,
+        onAnimationComplete
+      };
+    return React.useImperativeHandle(ref, () => ({
+      open: setOpen
+    }), [setOpen]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_adapt.AdaptParent, {
+      scope: adaptScope,
+      portal: {
+        forwardProps: props
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogProvider, {
+        scope,
+        ...context,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DialogSheetController, {
+          onOpenChange: setOpen,
+          scope,
+          children
+        })
+      })
+    });
+  }), {
+    Trigger: DialogTrigger,
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Content: DialogContent,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+    FocusScope: import_gui_focus_scope.FocusScopeController,
+    Adapt: import_gui_adapt.Adapt
+  });
+const DialogSheetController = props => {
+  const context = useDialogContext(props.scope),
+    isAdapted = (0, import_gui_adapt.useAdaptIsActive)(context.adaptScope);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
+    onOpenChange: val => {
+      isAdapted && props.onOpenChange?.(val);
+    },
+    open: context.open,
+    hidden: !isAdapted,
+    children: props.children
+  });
+};