@tamagui/create-menu 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/createBaseMenu.mjs

@@ -1,1267 +1,1063 @@
+import { createRefComponent, createStyledHOC } from "@tamagui/core";
 import { Animate } from "@tamagui/animate";
-import { AnimatePresence as Presence } from "@tamagui/animate-presence";
+import { AnimatePresence } from "@tamagui/animate-presence";
 import { createCollection } from "@tamagui/collection";
-import { Dismissable as DismissableLayer, dispatchDiscreteCustomEvent } from "@tamagui/dismissable";
+import { Dismissable, dispatchDiscreteCustomEvent } from "@tamagui/dismissable";
 import { useFocusGuards } from "@tamagui/focus-guard";
 import { FocusScope } from "@tamagui/focus-scope";
+import { Image } from "@tamagui/image";
 import * as PopperPrimitive from "@tamagui/popper";
-import { needsPortalRepropagation, Portal as PortalPrimitive } from "@tamagui/portal";
+import { Portal, needsPortalRepropagation } from "@tamagui/portal";
 import { RemoveScroll } from "@tamagui/remove-scroll";
 import { RovingFocusGroup } from "@tamagui/roving-focus";
 import { useCallbackRef } from "@tamagui/use-callback-ref";
 import { useDirection } from "@tamagui/use-direction";
-import { composeEventHandlers, composeRefs, createStyledContext, isWeb, styled, Text, Theme, useComposedRefs, useIsTouchDevice, useThemeName, View, withStaticProperties } from "@tamagui/web";
+import { Text, Theme, View, composeEventHandlers, composeRefs, createStyledContext, isWeb, styled, useComposedRefs, useIsTouchDevice, useThemeName, withStaticProperties } from "@tamagui/web";
 import * as React from "react";
 import { useId } from "react";
-import { MenuPredefined } from "./MenuPredefined.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
 function whenMouse(handler) {
-  return event => event.pointerType === "mouse" ? handler(event) : void 0;
+	return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
 }
 const SELECTION_KEYS = ["Enter", " "];
-const FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
-const LAST_KEYS = ["ArrowUp", "PageDown", "End"];
+const FIRST_KEYS = [
+	"ArrowDown",
+	"PageUp",
+	"Home"
+];
+const LAST_KEYS = [
+	"ArrowUp",
+	"PageDown",
+	"End"
+];
 const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
 const SUB_OPEN_KEYS = {
-  ltr: [...SELECTION_KEYS, "ArrowRight"],
-  rtl: [...SELECTION_KEYS, "ArrowLeft"]
+	ltr: [...SELECTION_KEYS, "ArrowRight"],
+	rtl: [...SELECTION_KEYS, "ArrowLeft"]
 };
 const SUB_CLOSE_KEYS = {
-  ltr: ["ArrowLeft"],
-  rtl: ["ArrowRight"]
+	ltr: ["ArrowLeft"],
+	rtl: ["ArrowRight"]
 };
 const MENU_NAME = "Menu";
 const [Collection, useCollection] = createCollection(MENU_NAME);
-const {
-  Provider: MenuProvider,
-  useStyledContext: useMenuContext
-} = createStyledContext();
-const {
-  Provider: MenuRootProvider,
-  useStyledContext: useMenuRootContext
-} = createStyledContext();
+const { Provider: MenuProvider, useStyledContext: useMenuContext } = createStyledContext();
+const { Provider: MenuRootProvider, useStyledContext: useMenuRootContext } = createStyledContext();
 const MENU_CONTEXT = "MenuContext";
-function createBaseMenu({
-  Item: _Item = MenuPredefined.MenuItem,
-  Title: _Title = MenuPredefined.Title,
-  SubTitle: _SubTitle = MenuPredefined.SubTitle,
-  Image: _Image = MenuPredefined.MenuImage,
-  Icon: _Icon = MenuPredefined.MenuIcon,
-  Indicator: _Indicator = MenuPredefined.MenuIndicator,
-  Separator: _Separator = MenuPredefined.MenuSeparator,
-  MenuGroup: _MenuGroup = MenuPredefined.MenuGroup,
-  Label: _Label = MenuPredefined.MenuLabel
-}) {
-  const MenuComp = props => {
-    const direction = useDirection(props.dir);
-    const defaultPlacement = direction === "rtl" ? "bottom-end" : "bottom-start";
-    const {
-      scope = MENU_CONTEXT,
-      open = false,
-      children,
-      dir,
-      onOpenChange,
-      modal = true,
-      allowFlip = {
-        padding: 10
-      },
-      stayInFrame = {
-        padding: 10
-      },
-      placement = defaultPlacement,
-      resize = true,
-      offset = 10,
-      ...rest
-    } = props;
-    const [content, setContent] = React.useState(null);
-    const isUsingKeyboardRef = React.useRef(false);
-    const handleOpenChange = useCallbackRef(onOpenChange);
-    if (isWeb) {
-      React.useEffect(() => {
-        const handleKeyDown = () => {
-          isUsingKeyboardRef.current = true;
-          document.addEventListener("pointerdown", handlePointer, {
-            capture: true,
-            once: true
-          });
-          document.addEventListener("pointermove", handlePointer, {
-            capture: true,
-            once: true
-          });
-        };
-        const handlePointer = () => isUsingKeyboardRef.current = false;
-        document.addEventListener("keydown", handleKeyDown, {
-          capture: true
-        });
-        return () => {
-          document.removeEventListener("keydown", handleKeyDown, {
-            capture: true
-          });
-          document.removeEventListener("pointerdown", handlePointer, {
-            capture: true
-          });
-          document.removeEventListener("pointermove", handlePointer, {
-            capture: true
-          });
-        };
-      }, []);
-    }
-    return /* @__PURE__ */jsx(PopperPrimitive.Popper, {
-      scope,
-      open,
-      placement,
-      allowFlip,
-      stayInFrame,
-      resize,
-      offset,
-      ...rest,
-      children: /* @__PURE__ */jsx(MenuProvider, {
-        scope,
-        open,
-        onOpenChange: handleOpenChange,
-        content,
-        onContentChange: setContent,
-        children: /* @__PURE__ */jsx(MenuRootProvider, {
-          scope,
-          open,
-          onClose: React.useCallback(() => handleOpenChange(false), [handleOpenChange]),
-          isUsingKeyboardRef,
-          dir: direction,
-          modal,
-          children: /* @__PURE__ */jsx(MenuSubProvider, {
-            scope,
-            children
-          })
-        })
-      })
-    });
-  };
-  const RepropagateMenuAndMenuRootProvider = props => {
-    const {
-      scope = MENU_CONTEXT,
-      menuContext,
-      rootContext,
-      popperContext,
-      menuSubContext,
-      children
-    } = props;
-    return /* @__PURE__ */jsx(PopperPrimitive.PopperProvider, {
-      ...popperContext,
-      scope,
-      children: /* @__PURE__ */jsx(MenuProvider, {
-        scope,
-        ...menuContext,
-        children: /* @__PURE__ */jsx(MenuRootProvider, {
-          scope,
-          ...rootContext,
-          children: menuSubContext ? /* @__PURE__ */jsx(MenuSubProvider, {
-            scope,
-            ...menuSubContext,
-            children
-          }) : children
-        })
-      })
-    });
-  };
-  MenuComp.displayName = MENU_NAME;
-  const ANCHOR_NAME = "MenuAnchor";
-  const MenuAnchor = props => {
-    return /* @__PURE__ */jsx(PopperPrimitive.PopperAnchor, {
-      scope: MENU_CONTEXT,
-      ...props
-    });
-  };
-  MenuAnchor.displayName = ANCHOR_NAME;
-  const PORTAL_NAME = "MenuPortal";
-  const {
-    Provider: PortalProvider,
-    useStyledContext: usePortalContext
-  } = createStyledContext(void 0, "Portal");
-  const MenuPortal = props => {
-    const {
-      scope = MENU_CONTEXT,
-      forceMount,
-      zIndex,
-      children
-    } = props;
-    const menuContext = useMenuContext(scope);
-    const rootContext = useMenuRootContext(scope);
-    const popperContext = PopperPrimitive.usePopperContext(scope);
-    const menuSubContext = useMenuSubContext(scope);
-    const themeName = useThemeName();
-    const themedChildren = /* @__PURE__ */jsx(Theme, {
-      forceClassName: true,
-      name: themeName,
-      children
-    });
-    const content = needsPortalRepropagation() ? /* @__PURE__ */jsx(RepropagateMenuAndMenuRootProvider, {
-      menuContext,
-      rootContext,
-      popperContext,
-      menuSubContext,
-      scope,
-      children: themedChildren
-    }) : themedChildren;
-    const isPresent = forceMount || rootContext.open && menuContext.open;
-    return /* @__PURE__ */jsx(Animate, {
-      type: "presence",
-      present: isPresent,
-      children: /* @__PURE__ */jsx(PortalPrimitive, {
-        stackZIndex: true,
-        children: /* @__PURE__ */jsx(Fragment, {
-          children: /* @__PURE__ */jsx(PortalProvider, {
-            scope,
-            forceMount,
-            children: /* @__PURE__ */jsxs(View, {
-              zIndex: zIndex || 100,
-              inset: 0,
-              position: "absolute",
-              children: [!!menuContext.open && !isWeb && /* @__PURE__ */jsx(View, {
-                inset: 0,
-                position: "absolute",
-                onPress: () => menuContext.onOpenChange(!menuContext.open)
-              }), content]
-            })
-          })
-        })
-      })
-    });
-  };
-  MenuPortal.displayName = PORTAL_NAME;
-  const CONTENT_NAME = "MenuContent";
-  const {
-    Provider: MenuContentProvider,
-    useStyledContext: useMenuContentContext
-  } = createStyledContext();
-  const MenuContentFrame = styled(PopperPrimitive.PopperContentFrame, {
-    name: CONTENT_NAME
-  });
-  const MenuContent = MenuContentFrame.styleable((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT;
-    const portalContext = usePortalContext(scope);
-    const {
-      forceMount = portalContext.forceMount,
-      ...contentProps
-    } = props;
-    const rootContext = useMenuRootContext(scope);
-    return /* @__PURE__ */jsx(Collection.Provider, {
-      scope,
-      children: /* @__PURE__ */jsx(Collection.Slot, {
-        scope,
-        children: rootContext.modal ? /* @__PURE__ */jsx(MenuRootContentModal, {
-          ...contentProps,
-          ref: forwardedRef
-        }) : /* @__PURE__ */jsx(MenuRootContentNonModal, {
-          ...contentProps,
-          ref: forwardedRef
-        })
-      })
-    });
-  });
-  const MenuRootContentModal = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT;
-    const context = useMenuContext(scope);
-    const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */jsx(MenuContentImpl, {
-      ...props,
-      scope,
-      ref: composedRefs,
-      trapFocus: context.open,
-      disableOutsidePointerEvents: context.open,
-      disableOutsideScroll: false,
-      onFocusOutside: composeEventHandlers(props.onFocusOutside, event => event.preventDefault(), {
-        checkDefaultPrevented: false
-      }),
-      onDismiss: () => context.onOpenChange(false)
-    });
-  });
-  const MenuRootContentNonModal = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT;
-    const context = useMenuContext(scope);
-    return /* @__PURE__ */jsx(MenuContentImpl, {
-      ...props,
-      scope,
-      ref: forwardedRef,
-      trapFocus: false,
-      disableOutsidePointerEvents: false,
-      disableOutsideScroll: false,
-      onDismiss: () => context.onOpenChange(false)
-    });
-  });
-  const MenuContentImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-      scope = MENU_CONTEXT,
-      loop = false,
-      trapFocus,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      disableOutsidePointerEvents,
-      onEntryFocus,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      disableOutsideScroll,
-      disableDismissOnScroll = false,
-      unstyled = process.env.TAMAGUI_HEADLESS === "1",
-      ...contentProps
-    } = props;
-    const context = useMenuContext(scope);
-    const rootContext = useMenuRootContext(scope);
-    const popperContext = PopperPrimitive.usePopperContext(scope);
-    const getItems = useCollection(scope);
-    const [currentItemId, setCurrentItemId] = React.useState(null);
-    const contentRef = React.useRef(null);
-    const focusableContentRef = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
-    const timerRef = React.useRef(0);
-    const searchRef = React.useRef("");
-    const pointerGraceTimerRef = React.useRef(0);
-    const pointerGraceIntentRef = React.useRef(null);
-    const pointerDirRef = React.useRef("right");
-    const lastPointerXRef = React.useRef(0);
-    const handleTypeaheadSearch = key => {
-      const search = searchRef.current + key;
-      const items = getItems().filter(item => !item.disabled);
-      const currentItem = document.activeElement;
-      const currentMatch = items.find(item => item.ref.current === currentItem)?.textValue;
-      const values = items.map(item => item.textValue);
-      const nextMatch = getNextMatch(values, search, currentMatch);
-      const newItem = items.find(item => item.textValue === nextMatch)?.ref.current;
-      (function updateSearch(value) {
-        searchRef.current = value;
-        clearTimeout(timerRef.current);
-        if (value !== "") timerRef.current = setTimeout(() => updateSearch(""), 1e3);
-      })(search);
-      if (newItem) {
-        setTimeout(() => newItem.focus());
-      }
-    };
-    React.useEffect(() => {
-      return () => clearTimeout(timerRef.current);
-    }, []);
-    React.useEffect(() => {
-      if (!isWeb || !context.open) return;
-      const frame = requestAnimationFrame(() => {
-        const container = contentRef.current;
-        const el = container?.querySelector("[data-tamagui-menu-content]");
-        if (el) focusableContentRef.current = el;
-      });
-      return () => cancelAnimationFrame(frame);
-    }, [context.open]);
-    React.useEffect(() => {
-      if (!isWeb || disableDismissOnScroll || !context.open) return;
-      const handleScroll = event => {
-        const scrolled = event.target;
-        if (!scrolled) return;
-        const content2 = contentRef.current;
-        if (content2?.contains(scrolled)) return;
-        const reference = popperContext.refs?.reference?.current;
-        const anchor = reference instanceof Element ? reference : reference?.contextElement ?? null;
-        if (anchor && !scrolled.contains(anchor)) return;
-        onDismiss?.();
-      };
-      window.addEventListener("scroll", handleScroll, {
-        capture: true,
-        passive: true
-      });
-      return () => {
-        window.removeEventListener("scroll", handleScroll, {
-          capture: true
-        });
-      };
-    }, [disableDismissOnScroll, context.open, onDismiss, popperContext.refs]);
-    if (isWeb) {
-      useFocusGuards();
-    }
-    const isPointerMovingToSubmenu = React.useCallback(event => {
-      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
-      const inArea = isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
-      return isMovingTowards && inArea;
-    }, []);
-    const content = /* @__PURE__ */jsx(PopperPrimitive.PopperContent, {
-      role: "menu",
-      tabIndex: -1,
-      unstyled,
-      ...(!unstyled && {
-        backgroundColor: "$background",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        outlineWidth: 0,
-        minWidth: 180
-      }),
-      "aria-orientation": "vertical",
-      "data-state": getOpenState(context.open),
-      "data-tamagui-menu-content": "",
-      dir: rootContext.dir,
-      scope: scope || MENU_CONTEXT,
-      ...contentProps,
-      ref: composedRefs,
-      className: contentProps.transition ? void 0 : contentProps.className,
-      ...(isWeb ? {
-        onKeyDown: composeEventHandlers(contentProps.onKeyDown, event => {
-          const target = event.target;
-          const isKeyDownInside = target.closest("[data-tamagui-menu-content]") === event.currentTarget;
-          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-          const isCharacterKey = event.key.length === 1;
-          if (isKeyDownInside) {
-            if (event.key === "Tab") event.preventDefault();
-            if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
-          }
-          const isOnContentFrame = event.target.hasAttribute("data-tamagui-menu-content");
-          if (!isKeyDownInside || !isOnContentFrame) return;
-          if (!FIRST_LAST_KEYS.includes(event.key)) return;
-          event.preventDefault();
-          const items = getItems().filter(item => !item.disabled);
-          const candidateNodes = items.map(item => item.ref.current);
-          if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
-          focusFirst(candidateNodes, {
-            focusVisible: true
-          });
-        }),
-        // TODO
-        // @ts-ignore
-        onBlur: composeEventHandlers(props.onBlur, event => {
-          if (!event.currentTarget?.contains(event.target)) {
-            clearTimeout(timerRef.current);
-            searchRef.current = "";
-          }
-        }),
-        // TODO
-        onPointerMove: composeEventHandlers(props.onPointerMove, event => {
-          if (event.pointerType !== "mouse") return;
-          const target = event.target;
-          const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
-          if (event.currentTarget?.contains(target) && pointerXHasChanged) {
-            const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
-            pointerDirRef.current = newDir;
-            lastPointerXRef.current = event.clientX;
-          }
-        })
-      } : {})
-    });
-    return /* @__PURE__ */jsx(MenuContentProvider, {
-      scope,
-      searchRef,
-      onItemEnter: React.useCallback(event => {
-        if (isPointerMovingToSubmenu(event)) event.preventDefault();
-      }, [isPointerMovingToSubmenu]),
-      onItemLeave: React.useCallback(event => {
-        if (isPointerMovingToSubmenu(event)) return;
-        focusableContentRef.current?.focus();
-        setCurrentItemId(null);
-      }, [isPointerMovingToSubmenu]),
-      onTriggerLeave: React.useCallback(event => {
-        if (isPointerMovingToSubmenu(event)) event.preventDefault();
-      }, [isPointerMovingToSubmenu]),
-      pointerGraceTimerRef,
-      onPointerGraceIntentChange: React.useCallback(intent => {
-        pointerGraceIntentRef.current = intent;
-      }, []),
-      children: /* @__PURE__ */jsx(RemoveScroll, {
-        enabled: disableOutsideScroll,
-        children: /* @__PURE__ */jsx(FocusScope, {
-          asChild: false,
-          trapped: trapFocus,
-          onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, event => {
-            event.preventDefault();
-            const content2 = document.querySelector("[data-tamagui-menu-content]");
-            content2?.focus({
-              preventScroll: true
-            });
-          }),
-          onUnmountAutoFocus: onCloseAutoFocus,
-          children: /* @__PURE__ */jsx(DismissableLayer, {
-            disableOutsidePointerEvents,
-            onEscapeKeyDown,
-            onPointerDownOutside,
-            onFocusOutside,
-            onInteractOutside,
-            onDismiss,
-            asChild: true,
-            children: /* @__PURE__ */jsx(RovingFocusGroup, {
-              asChild: true,
-              __scopeRovingFocusGroup: scope || MENU_CONTEXT,
-              dir: rootContext.dir,
-              orientation: "vertical",
-              loop,
-              currentTabStopId: currentItemId,
-              onCurrentTabStopIdChange: setCurrentItemId,
-              onEntryFocus: composeEventHandlers(onEntryFocus, event => {
-                if (!rootContext.isUsingKeyboardRef.current) {
-                  event.preventDefault();
-                }
-              }),
-              children: content
-            })
-          })
-        })
-      })
-    });
-  });
-  MenuContent.displayName = CONTENT_NAME;
-  const ITEM_NAME = "MenuItem";
-  const ITEM_SELECT = "menu.itemSelect";
-  const MenuItem = _Item.styleable((props, forwardedRef) => {
-    const {
-      disabled = false,
-      onSelect,
-      preventCloseOnSelect,
-      children,
-      scope = MENU_CONTEXT,
-      // filter out native-only props that shouldn't reach the DOM
-      // @ts-ignore
-      destructive,
-      // @ts-ignore
-      hidden,
-      // @ts-ignore
-      androidIconName,
-      // @ts-ignore
-      iosIconName,
-      ...itemProps
-    } = props;
-    const ref = React.useRef(null);
-    const rootContext = useMenuRootContext(scope);
-    const contentContext = useMenuContentContext(scope);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    const isPointerDownRef = React.useRef(false);
-    const handleSelect = () => {
-      const menuItem = ref.current;
-      if (!disabled && menuItem) {
-        if (isWeb) {
-          const menuItemEl = menuItem;
-          const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
-            bubbles: true,
-            cancelable: true
-          });
-          menuItemEl.addEventListener(ITEM_SELECT, event => onSelect?.(event), {
-            once: true
-          });
-          dispatchDiscreteCustomEvent(menuItemEl, itemSelectEvent);
-          if (itemSelectEvent.defaultPrevented || preventCloseOnSelect) {
-            isPointerDownRef.current = false;
-          } else {
-            rootContext.onClose();
-          }
-        } else {
-          onSelect?.({
-            target: menuItem
-          });
-          isPointerDownRef.current = false;
-          if (!preventCloseOnSelect) {
-            rootContext.onClose();
-          }
-        }
-      }
-    };
-    const content = typeof children === "string" ? /* @__PURE__ */jsx(Text, {
-      children
-    }) : children;
-    return /* @__PURE__ */jsx(MenuItemImpl, {
-      outlineStyle: "none",
-      ...itemProps,
-      scope,
-      ref: composedRefs,
-      disabled,
-      onPress: composeEventHandlers(props.onPress, handleSelect),
-      onPointerDown: event => {
-        props.onPointerDown?.(event);
-        isPointerDownRef.current = true;
-      },
-      onPointerUp: composeEventHandlers(props.onPointerUp, event => {
-        if (isWeb) {
-          if (!isPointerDownRef.current) event.currentTarget?.click();
-        }
-      }),
-      ...(isWeb ? {
-        onKeyDown: composeEventHandlers(props.onKeyDown, event => {
-          const isTypingAhead = contentContext.searchRef.current !== "";
-          if (disabled || isTypingAhead && event.key === " ") return;
-          if (SELECTION_KEYS.includes(event.key)) {
-            event.currentTarget?.click();
-            event.preventDefault();
-          }
-        })
-      } : {}),
-      children: content
-    });
-  });
-  const MenuItemImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-      scope = MENU_CONTEXT,
-      disabled = false,
-      textValue,
-      unstyled = process.env.TAMAGUI_HEADLESS === "1",
-      ...itemProps
-    } = props;
-    const contentContext = useMenuContentContext(scope);
-    const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    const [isFocused, setIsFocused] = React.useState(false);
-    const [textContent, setTextContent] = React.useState("");
-    if (isWeb) {
-      React.useEffect(() => {
-        const menuItem = ref.current;
-        if (menuItem) {
-          setTextContent((menuItem.textContent ?? "").trim());
-        }
-      }, [itemProps.children]);
-    }
-    return /* @__PURE__ */jsx(Collection.ItemSlot, {
-      scope,
-      disabled,
-      textValue: textValue ?? textContent,
-      children: /* @__PURE__ */jsx(RovingFocusGroup.Item, {
-        asChild: true,
-        __scopeRovingFocusGroup: scope,
-        focusable: !disabled,
-        children: /* @__PURE__ */jsx(_Item, {
-          unstyled,
-          componentName: ITEM_NAME,
-          role: "menuitem",
-          "data-highlighted": isFocused ? "" : void 0,
-          "aria-disabled": disabled || void 0,
-          "data-disabled": disabled ? "" : void 0,
-          ...itemProps,
-          ref: composedRefs,
-          onPointerMove: composeEventHandlers(props.onPointerMove, event => {
-            if (event.pointerType !== "mouse") return;
-            if (disabled) {
-              contentContext.onItemLeave(event);
-            } else {
-              contentContext.onItemEnter(event);
-              if (!event.defaultPrevented) {
-                const item = event.currentTarget;
-                item.focus({
-                  preventScroll: true,
-                  focusVisible: false
-                });
-              }
-            }
-          }),
-          onPointerLeave: composeEventHandlers(props.onPointerLeave, event => {
-            contentContext.onItemLeave(event);
-          }),
-          onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
-          onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
-        })
-      })
-    });
-  });
-  MenuItem.displayName = ITEM_NAME;
-  const ITEM_TITLE_NAME = "MenuItemTitle";
-  const MenuItemTitle = _Title.styleable((props, forwardedRef) => {
-    return /* @__PURE__ */jsx(_Title, {
-      ...props,
-      ref: forwardedRef
-    });
-  });
-  MenuItemTitle.displayName = ITEM_TITLE_NAME;
-  const ITEM_SUB_TITLE_NAME = "MenuItemSubTitle";
-  const MenuItemSubTitle = _SubTitle.styleable((props, forwardedRef) => {
-    return /* @__PURE__ */jsx(_SubTitle, {
-      ...props,
-      ref: forwardedRef
-    });
-  });
-  MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
-  const ITEM_IMAGE = "MenuItemImage";
-  const MenuItemImage = React.forwardRef((props, forwardedRef) => {
-    const {
-      // @ts-ignore - native menu ios config
-      ios,
-      // @ts-ignore
-      androidIconName,
-      // @ts-ignore
-      iosIconName,
-      ...rest
-    } = props;
-    return /* @__PURE__ */jsx(_Image, {
-      ...rest,
-      ref: forwardedRef
-    });
-  });
-  MenuItemImage.displayName = ITEM_IMAGE;
-  const ITEM_ICON = "MenuItemIcon";
-  const MenuItemIcon = _Icon.styleable((props, forwardedRef) => {
-    const {
-      // @ts-ignore
-      ios,
-      // @ts-ignore
-      android,
-      // @ts-ignore
-      androidIconName,
-      // @ts-ignore
-      iosIconName,
-      ...rest
-    } = props;
-    return /* @__PURE__ */jsx(_Icon, {
-      ...rest,
-      ref: forwardedRef
-    });
-  });
-  MenuItemIcon.displayName = ITEM_ICON;
-  const CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
-  const MenuCheckboxItem = _Item.styleable((props, forwardedRef) => {
-    const {
-      checked = false,
-      onCheckedChange,
-      scope = MENU_CONTEXT,
-      // filter out native-only props
-      // @ts-ignore - native menu value state
-      value,
-      // @ts-ignore - native menu value change handler
-      onValueChange,
-      ...checkboxItemProps
-    } = props;
-    return /* @__PURE__ */jsx(ItemIndicatorProvider, {
-      scope,
-      checked,
-      children: /* @__PURE__ */jsx(MenuItem, {
-        componentName: CHECKBOX_ITEM_NAME,
-        role: isWeb ? "menuitemcheckbox" : "menuitem",
-        "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-        ...checkboxItemProps,
-        scope,
-        ref: forwardedRef,
-        "data-state": getCheckedState(checked),
-        onSelect: composeEventHandlers(checkboxItemProps.onSelect, () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked), {
-          checkDefaultPrevented: false
-        })
-      })
-    });
-  });
-  MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
-  const RADIO_GROUP_NAME = "MenuRadioGroup";
-  const {
-    Provider: RadioGroupProvider,
-    useStyledContext: useRadioGroupContext
-  } = createStyledContext();
-  const MenuRadioGroup = _MenuGroup.styleable((props, forwardedRef) => {
-    const {
-      value,
-      onValueChange,
-      scope = MENU_CONTEXT,
-      ...groupProps
-    } = props;
-    const handleValueChange = useCallbackRef(onValueChange);
-    return /* @__PURE__ */jsx(RadioGroupProvider, {
-      scope,
-      value,
-      onValueChange: handleValueChange,
-      children: /* @__PURE__ */jsx(_MenuGroup, {
-        componentName: RADIO_GROUP_NAME,
-        ...groupProps,
-        ref: forwardedRef
-      })
-    });
-  });
-  MenuRadioGroup.displayName = RADIO_GROUP_NAME;
-  const RADIO_ITEM_NAME = "MenuRadioItem";
-  const MenuRadioItem = _Item.styleable((props, forwardedRef) => {
-    const {
-      value,
-      scope = MENU_CONTEXT,
-      ...radioItemProps
-    } = props;
-    const context = useRadioGroupContext(scope);
-    const checked = value === context.value;
-    return /* @__PURE__ */jsx(ItemIndicatorProvider, {
-      scope,
-      checked,
-      children: /* @__PURE__ */jsx(MenuItem, {
-        componentName: RADIO_ITEM_NAME,
-        ...radioItemProps,
-        scope,
-        "aria-checked": checked,
-        ref: forwardedRef,
-        role: isWeb ? "menuitemradio" : "menuitem",
-        "data-state": getCheckedState(checked),
-        onSelect: composeEventHandlers(radioItemProps.onSelect, () => context.onValueChange?.(value), {
-          checkDefaultPrevented: false
-        })
-      })
-    });
-  });
-  MenuRadioItem.displayName = RADIO_ITEM_NAME;
-  const ITEM_INDICATOR_NAME = "MenuItemIndicator";
-  const {
-    Provider: ItemIndicatorProvider,
-    useStyledContext: useItemIndicatorContext
-  } = createStyledContext();
-  const MenuItemIndicator = _Indicator.styleable((props, forwardedRef) => {
-    const {
-      scope = MENU_CONTEXT,
-      forceMount,
-      ...itemIndicatorProps
-    } = props;
-    const indicatorContext = useItemIndicatorContext(scope);
-    return /* @__PURE__ */jsx(Presence, {
-      children: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true ? /* @__PURE__ */jsx(_Indicator, {
-        componentName: ITEM_INDICATOR_NAME,
-        render: "span",
-        ...itemIndicatorProps,
-        ref: forwardedRef,
-        "data-state": getCheckedState(indicatorContext.checked)
-      }) : null
-    });
-  });
-  MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
-  const MenuArrow = React.forwardRef(function MenuArrow2(props, forwardedRef) {
-    const {
-      scope = MENU_CONTEXT,
-      unstyled = process.env.TAMAGUI_HEADLESS === "1",
-      ...rest
-    } = props;
-    return /* @__PURE__ */jsx(PopperPrimitive.PopperArrow, {
-      scope,
-      componentName: "PopperArrow",
-      unstyled,
-      ...(!unstyled && {
-        backgroundColor: "$background"
-      }),
-      ...rest,
-      ref: forwardedRef
-    });
-  });
-  const SUB_NAME = "MenuSub";
-  const {
-    Provider: MenuSubProvider,
-    useStyledContext: useMenuSubContext
-  } = createStyledContext();
-  const MenuSub = props => {
-    const isTouchDevice = useIsTouchDevice();
-    const {
-      scope = MENU_CONTEXT
-    } = props;
-    const rootContext = useMenuRootContext(scope);
-    const parentPopperContext = PopperPrimitive.usePopperContext(scope);
-    const parentSide = parentPopperContext.placement?.split("-")[0];
-    const isNestedSubmenu = parentSide === "left" || parentSide === "right";
-    const defaultPlacement = isTouchDevice ? "bottom" : isNestedSubmenu ? `${parentSide}-start` : rootContext.dir === "rtl" ? "left-start" : "right-start";
-    const {
-      children,
-      open = false,
-      onOpenChange,
-      allowFlip: allowFlipProp = {
-        padding: 10
-      },
-      stayInFrame = {
-        padding: 10
-      },
-      placement = defaultPlacement,
-      ...rest
-    } = props;
-    const allowFlip = React.useMemo(() => {
-      if (!isNestedSubmenu || typeof allowFlipProp === "boolean") return allowFlipProp;
-      if (allowFlipProp.fallbackPlacements) return allowFlipProp;
-      const side = placement.split("-")[0];
-      const align = placement.split("-")[1] || "start";
-      const otherAlign = align === "start" ? "end" : "start";
-      if (side === "left" || side === "right") {
-        const oppositeSide = side === "right" ? "left" : "right";
-        return {
-          ...(typeof allowFlipProp === "object" ? allowFlipProp : {}),
-          fallbackPlacements: [`${side}-${otherAlign}`, `${oppositeSide}-${align}`, `${oppositeSide}-${otherAlign}`]
-        };
-      }
-      return allowFlipProp;
-    }, [isNestedSubmenu, allowFlipProp, placement]);
-    const parentMenuContext = useMenuContext(scope);
-    const [trigger, setTrigger] = React.useState(null);
-    const [content, setContent] = React.useState(null);
-    const handleOpenChange = useCallbackRef(onOpenChange);
-    React.useEffect(() => {
-      if (parentMenuContext.open === false) handleOpenChange(false);
-      return () => handleOpenChange(false);
-    }, [parentMenuContext.open, handleOpenChange]);
-    return /* @__PURE__ */jsx(PopperPrimitive.Popper, {
-      open,
-      placement,
-      allowFlip,
-      stayInFrame,
-      ...rest,
-      scope,
-      children: /* @__PURE__ */jsx(MenuProvider, {
-        scope,
-        open,
-        onOpenChange: handleOpenChange,
-        content,
-        onContentChange: setContent,
-        children: /* @__PURE__ */jsx(MenuSubProvider, {
-          scope,
-          contentId: useId(),
-          triggerId: useId(),
-          trigger,
-          onTriggerChange: setTrigger,
-          children
-        })
-      })
-    });
-  };
-  MenuSub.displayName = SUB_NAME;
-  const SUB_TRIGGER_NAME = "MenuSubTrigger";
-  const MenuSubTrigger = React.forwardRef((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT;
-    const context = useMenuContext(scope);
-    const rootContext = useMenuRootContext(scope);
-    const subContext = useMenuSubContext(scope);
-    const contentContext = useMenuContentContext(scope);
-    const popperContext = PopperPrimitive.usePopperContext(scope);
-    const openTimerRef = React.useRef(null);
-    const {
-      pointerGraceTimerRef,
-      onPointerGraceIntentChange
-    } = contentContext;
-    const effectiveDir = rootContext.dir;
-    const clearOpenTimer = React.useCallback(() => {
-      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
-      openTimerRef.current = null;
-    }, []);
-    React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
-    React.useEffect(() => {
-      const pointerGraceTimer = pointerGraceTimerRef.current;
-      return () => {
-        window.clearTimeout(pointerGraceTimer);
-        onPointerGraceIntentChange(null);
-      };
-    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
-    return /* @__PURE__ */jsx(MenuAnchor, {
-      componentName: SUB_TRIGGER_NAME,
-      asChild: "except-style",
-      scope,
-      children: /* @__PURE__ */jsx(MenuItemImpl, {
-        id: subContext.triggerId,
-        "aria-haspopup": "menu",
-        "aria-expanded": context.open,
-        "aria-controls": subContext.contentId,
-        "data-state": getOpenState(context.open),
-        outlineStyle: "none",
-        ...props,
-        ref: composeRefs(forwardedRef, subContext.onTriggerChange),
-        onPress: event => {
-          props.onPress?.(event);
-          if (props.disabled || event.defaultPrevented) return;
-          if (isWeb) {
-            event.currentTarget.focus();
-          }
-          if (!context.open) context.onOpenChange(true);
-        },
-        onPointerMove: composeEventHandlers(props.onPointerMove,
-        // @ts-ignore
-        whenMouse(event => {
-          contentContext.onItemEnter(event);
-          if (event.defaultPrevented) return;
-          if (!props.disabled && !context.open && !openTimerRef.current) {
-            contentContext.onPointerGraceIntentChange(null);
-            openTimerRef.current = window.setTimeout(() => {
-              context.onOpenChange(true);
-              clearOpenTimer();
-            }, 100);
-          }
-        })),
-        onPointerLeave: composeEventHandlers(props.onPointerLeave, eventIn => {
-          const event = eventIn;
-          clearOpenTimer();
-          const contentRect = context.content?.getBoundingClientRect();
-          if (contentRect) {
-            const contentEl = context.content;
-            const sideEl = contentEl?.dataset?.side ? contentEl : contentEl?.querySelector("[data-side]");
-            const side = sideEl?.dataset?.side || "right";
-            const rightSide = side === "right";
-            const bleed = rightSide ? -5 : 5;
-            const contentNearEdge = contentRect[rightSide ? "left" : "right"];
-            const contentFarEdge = contentRect[rightSide ? "right" : "left"];
-            const polygon = {
-              area: [
-              // Apply a bleed on clientX to ensure that our exit point is
-              // consistently within polygon bounds
-              {
-                x: event.clientX + bleed,
-                y: event.clientY
-              }, {
-                x: contentNearEdge,
-                y: contentRect.top
-              }, {
-                x: contentFarEdge,
-                y: contentRect.top
-              }, {
-                x: contentFarEdge,
-                y: contentRect.bottom
-              }, {
-                x: contentNearEdge,
-                y: contentRect.bottom
-              }],
-              side
-            };
-            contentContext.onPointerGraceIntentChange(polygon);
-            window.clearTimeout(pointerGraceTimerRef.current);
-            pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
-          } else if (isWeb && subContext.trigger) {
-            const triggerEl = subContext.trigger;
-            const triggerRect = triggerEl?.getBoundingClientRect();
-            if (triggerRect) {
-              const placementSide = popperContext.placement?.split("-")[0];
-              const side = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
-              const rightSide = side === "right";
-              const bleed = rightSide ? -5 : 5;
-              const nearEdge = rightSide ? triggerRect.right + 4 : triggerRect.left - 4;
-              const farEdge = rightSide ? nearEdge + 200 : nearEdge - 200;
-              const polygon = {
-                area: [{
-                  x: event.clientX + bleed,
-                  y: event.clientY
-                }, {
-                  x: nearEdge,
-                  y: triggerRect.top - 50
-                }, {
-                  x: farEdge,
-                  y: triggerRect.top - 50
-                }, {
-                  x: farEdge,
-                  y: triggerRect.bottom + 50
-                }, {
-                  x: nearEdge,
-                  y: triggerRect.bottom + 50
-                }],
-                side
-              };
-              contentContext.onPointerGraceIntentChange(polygon);
-              window.clearTimeout(pointerGraceTimerRef.current);
-              pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
-            }
-          } else {
-            contentContext.onTriggerLeave(event);
-            if (event.defaultPrevented) return;
-            contentContext.onPointerGraceIntentChange(null);
-          }
-        }),
-        ...(isWeb ? {
-          onKeyDown: composeEventHandlers(props.onKeyDown, event => {
-            const isTypingAhead = contentContext.searchRef.current !== "";
-            if (props.disabled || isTypingAhead && event.key === " ") return;
-            const willOpen = SUB_OPEN_KEYS[effectiveDir].includes(event.key);
-            if (willOpen) {
-              if (context.open && context.content) {
-                const contentEl = context.content;
-                const firstItem = contentEl.querySelector?.('[role="menuitem"]:not([data-disabled])');
-                if (firstItem) {
-                  firstItem.focus({
-                    focusVisible: true
-                  });
-                  event.preventDefault();
-                  return;
-                }
-              }
-              const triggerEl = event.currentTarget;
-              popperContext.refs?.setReference(triggerEl);
-              context.onOpenChange(true);
-              requestAnimationFrame(() => {
-                popperContext.update?.();
-              });
-              context.content?.focus({
-                focusVisible: true
-              });
-              event.preventDefault();
-            }
-          })
-        } : null)
-      })
-    });
-  });
-  MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
-  const SUB_CONTENT_NAME = "MenuSubContent";
-  const MenuSubContentFrame = styled(PopperPrimitive.PopperContentFrame, {
-    name: SUB_CONTENT_NAME
-  });
-  const MenuSubContent = MenuSubContentFrame.styleable((props, forwardedRef) => {
-    const scope = props.scope || MENU_CONTEXT;
-    const portalContext = usePortalContext(scope);
-    const {
-      forceMount = portalContext.forceMount,
-      ...subContentProps
-    } = props;
-    const context = useMenuContext(scope);
-    const rootContext = useMenuRootContext(scope);
-    const subContext = useMenuSubContext(scope);
-    const popperContext = PopperPrimitive.usePopperContext(scope);
-    const ref = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    const placementSide = popperContext.placement?.split("-")[0];
-    const dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
-    const effectiveDir = rootContext.dir;
-    return /* @__PURE__ */jsx(Collection.Provider, {
-      scope,
-      children: /* @__PURE__ */jsx(Collection.Slot, {
-        scope,
-        children: /* @__PURE__ */jsx(MenuContentImpl, {
-          id: subContext.contentId,
-          "aria-labelledby": subContext.triggerId,
-          ...subContentProps,
-          ref: composedRefs,
-          "data-side": dataSide,
-          disableOutsidePointerEvents: false,
-          disableOutsideScroll: false,
-          trapFocus: false,
-          onOpenAutoFocus: event => {
-            if (rootContext.isUsingKeyboardRef.current) {
-              const root = ref.current;
-              const content = root?.querySelector?.("[data-tamagui-menu-content]");
-              (content || root)?.focus({
-                preventScroll: true
-              });
-            }
-            event.preventDefault();
-          },
-          onCloseAutoFocus: event => event.preventDefault(),
-          onFocusOutside: composeEventHandlers(props.onFocusOutside, event => {
-            if (event.target !== subContext.trigger) context.onOpenChange(false);
-          }),
-          onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, event => {
-            context.onOpenChange(false);
-            subContext.trigger?.focus({
-              focusVisible: true
-            });
-            event.preventDefault();
-          }),
-          ...(isWeb ? {
-            onKeyDown: composeEventHandlers(props.onKeyDown, event => {
-              const isKeyDownInside = event.currentTarget.contains(event.target);
-              const isCloseKey = SUB_CLOSE_KEYS[effectiveDir].includes(event.key);
-              if (isKeyDownInside && isCloseKey) {
-                context.onOpenChange(false);
-                subContext.trigger?.focus({
-                  focusVisible: true
-                });
-                event.preventDefault();
-              }
-            })
-          } : null)
-        })
-      })
-    });
-  });
-  MenuSubContent.displayName = SUB_CONTENT_NAME;
-  const Anchor = MenuAnchor;
-  const Portal = MenuPortal;
-  const Content = MenuContent;
-  const Group = _MenuGroup.styleable((props, ref) => {
-    return /* @__PURE__ */jsx(_MenuGroup, {
-      ...props,
-      ref
-    });
-  });
-  Group.displayName = "MenuGroup";
-  const Label = _Label.styleable((props, ref) => {
-    return /* @__PURE__ */jsx(_Label, {
-      ...props,
-      ref
-    });
-  });
-  Label.displayName = "MenuLabel";
-  const Item = MenuItem;
-  const CheckboxItem = MenuCheckboxItem;
-  const RadioGroup = MenuRadioGroup;
-  const RadioItem = MenuRadioItem;
-  const ItemIndicator = MenuItemIndicator;
-  const Separator = _Separator.styleable((props, ref) => {
-    return /* @__PURE__ */jsx(_Separator, {
-      ...props,
-      ref
-    });
-  });
-  Separator.displayName = "MenuSeparator";
-  const Arrow = MenuArrow;
-  const Sub = MenuSub;
-  const SubTrigger = MenuSubTrigger;
-  const SubContent = MenuSubContent;
-  const ItemTitle = MenuItemTitle;
-  const ItemSubtitle = MenuItemSubTitle;
-  const ItemImage = MenuItemImage;
-  const ItemIcon = MenuItemIcon;
-  const Menu = withStaticProperties(MenuComp, {
-    Anchor,
-    Portal,
-    Content,
-    Group,
-    Label,
-    Item,
-    CheckboxItem,
-    RadioGroup,
-    RadioItem,
-    ItemIndicator,
-    Separator,
-    Arrow,
-    Sub,
-    SubTrigger,
-    SubContent,
-    ItemTitle,
-    ItemSubtitle,
-    ItemImage,
-    ItemIcon
-  });
-  return {
-    Menu
-  };
+const MenuImageFrame = styled(Image, { displayName: "MenuItemImage" });
+function createBaseMenu() {
+	const MenuComp = (props) => {
+		const direction = useDirection(props.dir);
+		const defaultPlacement = direction === "rtl" ? "bottom-end" : "bottom-start";
+		const { scope = MENU_CONTEXT, open = false, children, dir, onOpenChange, modal = true, allowFlip = { padding: 10 }, stayInFrame = { padding: 10 }, placement = defaultPlacement, resize = true, offset = 10, ...rest } = props;
+		const [content, setContent] = React.useState(null);
+		const isUsingKeyboardRef = React.useRef(false);
+		const handleOpenChange = useCallbackRef(onOpenChange);
+		if (isWeb) {
+			React.useEffect(() => {
+				const handleKeyDown = () => {
+					isUsingKeyboardRef.current = true;
+					document.addEventListener("pointerdown", handlePointer, {
+						capture: true,
+						once: true
+					});
+					document.addEventListener("pointermove", handlePointer, {
+						capture: true,
+						once: true
+					});
+				};
+				const handlePointer = () => isUsingKeyboardRef.current = false;
+				document.addEventListener("keydown", handleKeyDown, { capture: true });
+				return () => {
+					document.removeEventListener("keydown", handleKeyDown, { capture: true });
+					document.removeEventListener("pointerdown", handlePointer, { capture: true });
+					document.removeEventListener("pointermove", handlePointer, { capture: true });
+				};
+			}, []);
+		}
+		return /* @__PURE__ */ jsx(PopperPrimitive.Popper, {
+			scope,
+			open,
+			placement,
+			allowFlip,
+			stayInFrame,
+			resize,
+			offset,
+			...rest,
+			children: /* @__PURE__ */ jsx(MenuProvider, {
+				scope,
+				open,
+				onOpenChange: handleOpenChange,
+				content,
+				onContentChange: setContent,
+				children: /* @__PURE__ */ jsx(MenuRootProvider, {
+					scope,
+					open,
+					onClose: React.useCallback(() => handleOpenChange(false), [handleOpenChange]),
+					isUsingKeyboardRef,
+					dir: direction,
+					modal,
+					children: /* @__PURE__ */ jsx(MenuSubProvider, {
+						scope,
+						children
+					})
+				})
+			})
+		});
+	};
+	const RepropagateMenuAndMenuRootProvider = (props) => {
+		const { scope = MENU_CONTEXT, menuContext, rootContext, popperContext, menuSubContext, children } = props;
+		return /* @__PURE__ */ jsx(PopperPrimitive.PopperProvider, {
+			...popperContext,
+			scope,
+			children: /* @__PURE__ */ jsx(MenuProvider, {
+				scope,
+				...menuContext,
+				children: /* @__PURE__ */ jsx(MenuRootProvider, {
+					scope,
+					...rootContext,
+					children: menuSubContext ? /* @__PURE__ */ jsx(MenuSubProvider, {
+						scope,
+						...menuSubContext,
+						children
+					}) : children
+				})
+			})
+		});
+	};
+	MenuComp.displayName = MENU_NAME;
+	const ANCHOR_NAME = "MenuAnchor";
+	const MenuAnchor = (props) => {
+		return /* @__PURE__ */ jsx(PopperPrimitive.PopperAnchor, {
+			scope: MENU_CONTEXT,
+			...props
+		});
+	};
+	MenuAnchor.displayName = ANCHOR_NAME;
+	const PORTAL_NAME = "MenuPortal";
+	const { Provider: PortalProvider, useStyledContext: usePortalContext } = createStyledContext(void 0, "Portal");
+	const MenuPortal = (props) => {
+		const { scope = MENU_CONTEXT, forceMount, zIndex, children } = props;
+		const menuContext = useMenuContext(scope);
+		const rootContext = useMenuRootContext(scope);
+		const popperContext = PopperPrimitive.usePopperContext(scope);
+		const menuSubContext = useMenuSubContext(scope);
+		const themeName = useThemeName();
+		const themedChildren = /* @__PURE__ */ jsx(Theme, {
+			forceClassName: true,
+			name: themeName,
+			children
+		});
+		const content = needsPortalRepropagation() ? /* @__PURE__ */ jsx(RepropagateMenuAndMenuRootProvider, {
+			menuContext,
+			rootContext,
+			popperContext,
+			menuSubContext,
+			scope,
+			children: themedChildren
+		}) : themedChildren;
+		const isPresent = forceMount || rootContext.open && menuContext.open;
+		return /* @__PURE__ */ jsx(Animate, {
+			type: "presence",
+			present: isPresent,
+			children: /* @__PURE__ */ jsx(Portal, {
+				stackZIndex: true,
+				children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(PortalProvider, {
+					scope,
+					forceMount,
+					children: /* @__PURE__ */ jsxs(View, {
+						zIndex: zIndex || 100,
+						inset: 0,
+						position: "absolute",
+						children: [!!menuContext.open && !isWeb && /* @__PURE__ */ jsx(View, {
+							inset: 0,
+							position: "absolute",
+							onPress: () => menuContext.onOpenChange(!menuContext.open)
+						}), content]
+					})
+				}) })
+			})
+		});
+	};
+	MenuPortal.displayName = PORTAL_NAME;
+	const CONTENT_NAME = "MenuContent";
+	const { Provider: MenuContentProvider, useStyledContext: useMenuContentContext } = createStyledContext();
+	const MenuContentFrame = styled(PopperPrimitive.PopperContentFrame, { displayName: CONTENT_NAME });
+	const MenuContent = createStyledHOC(MenuContentFrame, (props, forwardedRef) => {
+		const scope = props.scope || MENU_CONTEXT;
+		const portalContext = usePortalContext(scope);
+		const { forceMount = portalContext.forceMount, ...contentProps } = props;
+		const rootContext = useMenuRootContext(scope);
+		return /* @__PURE__ */ jsx(Collection.Provider, {
+			scope,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope,
+				children: rootContext.modal ? /* @__PURE__ */ jsx(MenuRootContentModal, {
+					...contentProps,
+					ref: forwardedRef
+				}) : /* @__PURE__ */ jsx(MenuRootContentNonModal, {
+					...contentProps,
+					ref: forwardedRef
+				})
+			})
+		});
+	});
+	const MenuRootContentModal = createRefComponent((props, forwardedRef) => {
+		const scope = props.scope || MENU_CONTEXT;
+		const context = useMenuContext(scope);
+		const ref = React.useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, ref);
+		return /* @__PURE__ */ jsx(MenuContentImpl, {
+			...props,
+			scope,
+			ref: composedRefs,
+			trapFocus: context.open,
+			disableOutsidePointerEvents: context.open,
+			disableOutsideScroll: false,
+			onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.cancel(), { checkDefaultPrevented: false }),
+			onDismiss: () => context.onOpenChange(false)
+		});
+	});
+	const MenuRootContentNonModal = createRefComponent((props, forwardedRef) => {
+		const scope = props.scope || MENU_CONTEXT;
+		const context = useMenuContext(scope);
+		return /* @__PURE__ */ jsx(MenuContentImpl, {
+			...props,
+			scope,
+			ref: forwardedRef,
+			trapFocus: false,
+			disableOutsidePointerEvents: false,
+			disableOutsideScroll: false,
+			onDismiss: () => context.onOpenChange(false)
+		});
+	});
+	const MenuContentImpl = createRefComponent((props, forwardedRef) => {
+		const { scope = MENU_CONTEXT, loop = false, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEntryFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onDismiss, disableOutsideScroll, disableDismissOnScroll = false, ...contentProps } = props;
+		const context = useMenuContext(scope);
+		const rootContext = useMenuRootContext(scope);
+		const popperContext = PopperPrimitive.usePopperContext(scope);
+		const getItems = useCollection(scope);
+		const [currentItemId, setCurrentItemId] = React.useState(null);
+		const contentRef = React.useRef(null);
+		const focusableContentRef = React.useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);
+		const timerRef = React.useRef(0);
+		const searchRef = React.useRef("");
+		const pointerGraceTimerRef = React.useRef(0);
+		const pointerGraceIntentRef = React.useRef(null);
+		const pointerDirRef = React.useRef("right");
+		const lastPointerXRef = React.useRef(0);
+		const handleTypeaheadSearch = (key) => {
+			const search = searchRef.current + key;
+			const items = getItems().filter((item) => !item.disabled);
+			const currentItem = document.activeElement;
+			const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;
+			const values = items.map((item) => item.textValue);
+			const nextMatch = getNextMatch(values, search, currentMatch);
+			const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;
+			(function updateSearch(value) {
+				searchRef.current = value;
+				clearTimeout(timerRef.current);
+				if (value !== "") timerRef.current = setTimeout(() => updateSearch(""), 1e3);
+			})(search);
+			if (newItem) {
+				setTimeout(() => newItem.focus());
+			}
+		};
+		React.useEffect(() => {
+			return () => clearTimeout(timerRef.current);
+		}, []);
+		React.useEffect(() => {
+			if (!isWeb || !context.open) return;
+			const frame = requestAnimationFrame(() => {
+				const container = contentRef.current;
+				const el = container?.querySelector("[data-tamagui-menu-content]");
+				if (el) focusableContentRef.current = el;
+			});
+			return () => cancelAnimationFrame(frame);
+		}, [context.open]);
+		React.useEffect(() => {
+			if (!isWeb || disableDismissOnScroll || !context.open) return;
+			const handleScroll = (event) => {
+				const scrolled = event.target;
+				if (!scrolled) return;
+				const content2 = contentRef.current;
+				if (content2?.contains(scrolled)) return;
+				const reference = popperContext.refs?.reference?.current;
+				const anchor = reference instanceof Element ? reference : reference?.contextElement ?? null;
+				if (anchor && !scrolled.contains(anchor)) return;
+				context.onOpenChange(false);
+			};
+			window.addEventListener("scroll", handleScroll, {
+				capture: true,
+				passive: true
+			});
+			return () => {
+				window.removeEventListener("scroll", handleScroll, { capture: true });
+			};
+		}, [
+			disableDismissOnScroll,
+			context.open,
+			context.onOpenChange,
+			popperContext.refs
+		]);
+		if (isWeb) {
+			useFocusGuards();
+		}
+		const isPointerMovingToSubmenu = React.useCallback((event) => {
+			const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
+			const inArea = isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
+			return isMovingTowards && inArea;
+		}, []);
+		const content = /* @__PURE__ */ jsx(PopperPrimitive.PopperContent, {
+			role: "menu",
+			tabIndex: -1,
+			"aria-orientation": "vertical",
+			"data-state": getOpenState(context.open),
+			"data-tamagui-menu-content": "",
+			dir: rootContext.dir,
+			scope: scope || MENU_CONTEXT,
+			...contentProps,
+			ref: composedRefs,
+			className: contentProps.transition ? void 0 : contentProps.className,
+			...isWeb ? {
+				onKeyDown: composeEventHandlers(contentProps.onKeyDown, (event) => {
+					const target = event.target;
+					const isKeyDownInside = target.closest("[data-tamagui-menu-content]") === event.currentTarget;
+					const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+					const isCharacterKey = event.key.length === 1;
+					if (isKeyDownInside) {
+						if (event.key === "Tab") event.preventDefault();
+						if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
+					}
+					const isOnContentFrame = event.target.hasAttribute("data-tamagui-menu-content");
+					if (!isKeyDownInside || !isOnContentFrame) return;
+					if (!FIRST_LAST_KEYS.includes(event.key)) return;
+					event.preventDefault();
+					const items = getItems().filter((item) => !item.disabled);
+					const candidateNodes = items.map((item) => item.ref.current);
+					if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();
+					focusFirst(candidateNodes, { focusVisible: true });
+				}),
+				onBlur: composeEventHandlers(props.onBlur, (event) => {
+					if (!event.currentTarget?.contains(event.target)) {
+						clearTimeout(timerRef.current);
+						searchRef.current = "";
+					}
+				}),
+				onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+					if (event.pointerType !== "mouse") return;
+					const target = event.target;
+					const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+					if (event.currentTarget?.contains(target) && pointerXHasChanged) {
+						const newDir = event.clientX > lastPointerXRef.current ? "right" : "left";
+						pointerDirRef.current = newDir;
+						lastPointerXRef.current = event.clientX;
+					}
+				})
+			} : {}
+		});
+		return /* @__PURE__ */ jsx(MenuContentProvider, {
+			scope,
+			searchRef,
+			onItemEnter: React.useCallback((event) => {
+				if (isPointerMovingToSubmenu(event)) event.preventDefault();
+			}, [isPointerMovingToSubmenu]),
+			onItemLeave: React.useCallback((event) => {
+				if (isPointerMovingToSubmenu(event)) return;
+				focusableContentRef.current?.focus();
+				setCurrentItemId(null);
+			}, [isPointerMovingToSubmenu]),
+			onTriggerLeave: React.useCallback((event) => {
+				if (isPointerMovingToSubmenu(event)) event.preventDefault();
+			}, [isPointerMovingToSubmenu]),
+			pointerGraceTimerRef,
+			onPointerGraceIntentChange: React.useCallback((intent) => {
+				pointerGraceIntentRef.current = intent;
+			}, []),
+			children: /* @__PURE__ */ jsx(RemoveScroll, {
+				enabled: disableOutsideScroll,
+				children: /* @__PURE__ */ jsx(FocusScope, {
+					asChild: false,
+					trapped: trapFocus,
+					onMountAutoFocus: composeEventHandlers(onOpenAutoFocus, (event) => {
+						event.cancel();
+						const content2 = document.querySelector("[data-tamagui-menu-content]");
+						content2?.focus({ preventScroll: true });
+					}),
+					onUnmountAutoFocus: onCloseAutoFocus,
+					children: /* @__PURE__ */ jsx(Dismissable, {
+						disableOutsidePointerEvents,
+						onEscapeKeyDown,
+						onPointerDownOutside,
+						onFocusOutside,
+						onInteractOutside,
+						onDismiss,
+						asChild: true,
+						children: /* @__PURE__ */ jsx(RovingFocusGroup, {
+							asChild: true,
+							__scopeRovingFocusGroup: scope || MENU_CONTEXT,
+							dir: rootContext.dir,
+							orientation: "vertical",
+							loop,
+							currentTabStopId: currentItemId,
+							onCurrentTabStopIdChange: setCurrentItemId,
+							onEntryFocus: composeEventHandlers(onEntryFocus, (event) => {
+								if (!rootContext.isUsingKeyboardRef.current) {
+									event.cancel();
+								}
+							}),
+							children: content
+						})
+					})
+				})
+			})
+		});
+	});
+	MenuContent.displayName = CONTENT_NAME;
+	const ITEM_NAME = "MenuItem";
+	const ITEM_SELECT = "menu.itemSelect";
+	const MenuItem = createStyledHOC(View, (props, forwardedRef) => {
+		const { disabled = false, onSelect, preventCloseOnSelect, children, scope = MENU_CONTEXT, destructive, hidden, androidIconName, ...itemProps } = props;
+		const ref = React.useRef(null);
+		const rootContext = useMenuRootContext(scope);
+		const contentContext = useMenuContentContext(scope);
+		const composedRefs = useComposedRefs(forwardedRef, ref);
+		const isPointerDownRef = React.useRef(false);
+		const handleSelect = () => {
+			const menuItem = ref.current;
+			if (!disabled && menuItem) {
+				if (isWeb) {
+					const menuItemEl = menuItem;
+					const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+						bubbles: true,
+						cancelable: true
+					});
+					menuItemEl.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });
+					dispatchDiscreteCustomEvent(menuItemEl, itemSelectEvent);
+					if (itemSelectEvent.defaultPrevented || preventCloseOnSelect) {
+						isPointerDownRef.current = false;
+					} else {
+						rootContext.onClose();
+					}
+				} else {
+					onSelect?.({ target: menuItem });
+					isPointerDownRef.current = false;
+					if (!preventCloseOnSelect) {
+						rootContext.onClose();
+					}
+				}
+			}
+		};
+		const content = typeof children === "string" ? /* @__PURE__ */ jsx(Text, { children }) : children;
+		return /* @__PURE__ */ jsx(MenuItemImpl, {
+			...itemProps,
+			scope,
+			ref: composedRefs,
+			disabled,
+			onPress: composeEventHandlers(props.onPress, handleSelect),
+			onPointerDown: (event) => {
+				props.onPointerDown?.(event);
+				isPointerDownRef.current = true;
+			},
+			onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+				if (isWeb) {
+					if (!isPointerDownRef.current) event.currentTarget?.click();
+				}
+			}),
+			...isWeb ? { onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+				const isTypingAhead = contentContext.searchRef.current !== "";
+				if (disabled || isTypingAhead && event.key === " ") return;
+				if (SELECTION_KEYS.includes(event.key)) {
+					event.currentTarget?.click();
+					event.preventDefault();
+				}
+			}) } : {},
+			children: content
+		});
+	});
+	const MenuItemImpl = createRefComponent((props, forwardedRef) => {
+		const { scope = MENU_CONTEXT, className, disabled = false, textValue, ...itemProps } = props;
+		const contentContext = useMenuContentContext(scope);
+		const ref = React.useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, ref);
+		const [isFocused, setIsFocused] = React.useState(false);
+		const [textContent, setTextContent] = React.useState("");
+		if (isWeb) {
+			React.useEffect(() => {
+				const menuItem = ref.current;
+				if (menuItem) {
+					setTextContent((menuItem.textContent ?? "").trim());
+				}
+			}, [itemProps.children]);
+		}
+		return /* @__PURE__ */ jsx(Collection.ItemSlot, {
+			scope,
+			disabled,
+			textValue: textValue ?? textContent,
+			children: /* @__PURE__ */ jsx(RovingFocusGroup.Item, {
+				asChild: true,
+				__scopeRovingFocusGroup: scope,
+				tabIndex: disabled ? -1 : 0,
+				children: /* @__PURE__ */ jsx(View, {
+					className: `is_${ITEM_NAME} ${className || ""}`.trim(),
+					role: "menuitem",
+					"data-highlighted": isFocused ? "" : void 0,
+					"aria-disabled": disabled || void 0,
+					"data-disabled": disabled ? "" : void 0,
+					...itemProps,
+					ref: composedRefs,
+					onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+						if (event.pointerType !== "mouse") return;
+						if (disabled) {
+							contentContext.onItemLeave(event);
+						} else {
+							contentContext.onItemEnter(event);
+							if (!event.defaultPrevented) {
+								const item = event.currentTarget;
+								item.focus({
+									preventScroll: true,
+									focusVisible: false
+								});
+							}
+						}
+					}),
+					onPointerLeave: composeEventHandlers(props.onPointerLeave, (event) => {
+						contentContext.onItemLeave(event);
+					}),
+					onFocus: composeEventHandlers(props.onFocus, () => setIsFocused(true)),
+					onBlur: composeEventHandlers(props.onBlur, () => setIsFocused(false))
+				})
+			})
+		});
+	});
+	MenuItem.displayName = ITEM_NAME;
+	const ITEM_TITLE_NAME = "MenuItemTitle";
+	const MenuItemTitle = createStyledHOC(Text, (props, forwardedRef) => {
+		return /* @__PURE__ */ jsx(Text, {
+			...props,
+			ref: forwardedRef
+		});
+	});
+	MenuItemTitle.displayName = ITEM_TITLE_NAME;
+	const ITEM_SUB_TITLE_NAME = "MenuItemSubTitle";
+	const MenuItemSubTitle = createStyledHOC(Text, (props, forwardedRef) => {
+		return /* @__PURE__ */ jsx(Text, {
+			...props,
+			ref: forwardedRef
+		});
+	});
+	MenuItemSubTitle.displayName = ITEM_SUB_TITLE_NAME;
+	const ITEM_IMAGE = "MenuItemImage";
+	const MenuItemImage = createRefComponent((props, forwardedRef) => {
+		const { ios, androidIconName, ...rest } = props;
+		return /* @__PURE__ */ jsx(MenuImageFrame, {
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	MenuItemImage.displayName = ITEM_IMAGE;
+	const ITEM_ICON = "MenuItemIcon";
+	const MenuItemIcon = createStyledHOC(View, (props, forwardedRef) => {
+		const { ios, android, androidIconName, ...rest } = props;
+		return /* @__PURE__ */ jsx(View, {
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	MenuItemIcon.displayName = ITEM_ICON;
+	const CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
+	const MenuCheckboxItem = createStyledHOC(View, (props, forwardedRef) => {
+		const { checked = false, onCheckedChange, scope = MENU_CONTEXT, value, onValueChange, className, ...checkboxItemProps } = props;
+		return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+			scope,
+			checked,
+			children: /* @__PURE__ */ jsx(MenuItem, {
+				className: `is_${CHECKBOX_ITEM_NAME} ${className || ""}`.trim(),
+				role: isWeb ? "menuitemcheckbox" : "menuitem",
+				"aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+				...checkboxItemProps,
+				scope,
+				ref: forwardedRef,
+				"data-state": getCheckedState(checked),
+				onSelect: composeEventHandlers(checkboxItemProps.onSelect, () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked), { checkDefaultPrevented: false })
+			})
+		});
+	});
+	MenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+	const RADIO_GROUP_NAME = "MenuRadioGroup";
+	const { Provider: RadioGroupProvider, useStyledContext: useRadioGroupContext } = createStyledContext();
+	const MenuRadioGroup = createStyledHOC(View, (props, forwardedRef) => {
+		const { value, onValueChange, scope = MENU_CONTEXT, className, ...groupProps } = props;
+		const handleValueChange = useCallbackRef(onValueChange);
+		return /* @__PURE__ */ jsx(RadioGroupProvider, {
+			scope,
+			value,
+			onValueChange: handleValueChange,
+			children: /* @__PURE__ */ jsx(View, {
+				className: `is_${RADIO_GROUP_NAME} ${className || ""}`.trim(),
+				...groupProps,
+				ref: forwardedRef
+			})
+		});
+	});
+	MenuRadioGroup.displayName = RADIO_GROUP_NAME;
+	const RADIO_ITEM_NAME = "MenuRadioItem";
+	const MenuRadioItem = createStyledHOC(View, (props, forwardedRef) => {
+		const { value, scope = MENU_CONTEXT, className, ...radioItemProps } = props;
+		const context = useRadioGroupContext(scope);
+		const checked = value === context.value;
+		return /* @__PURE__ */ jsx(ItemIndicatorProvider, {
+			scope,
+			checked,
+			children: /* @__PURE__ */ jsx(MenuItem, {
+				className: `is_${RADIO_ITEM_NAME} ${className || ""}`.trim(),
+				...radioItemProps,
+				scope,
+				"aria-checked": checked,
+				ref: forwardedRef,
+				role: isWeb ? "menuitemradio" : "menuitem",
+				"data-state": getCheckedState(checked),
+				onSelect: composeEventHandlers(radioItemProps.onSelect, () => context.onValueChange?.(value), { checkDefaultPrevented: false })
+			})
+		});
+	});
+	MenuRadioItem.displayName = RADIO_ITEM_NAME;
+	const ITEM_INDICATOR_NAME = "MenuItemIndicator";
+	const { Provider: ItemIndicatorProvider, useStyledContext: useItemIndicatorContext } = createStyledContext();
+	const MenuItemIndicator = createStyledHOC(View, (props, forwardedRef) => {
+		const { scope = MENU_CONTEXT, className, forceMount, ...itemIndicatorProps } = props;
+		const indicatorContext = useItemIndicatorContext(scope);
+		return /* @__PURE__ */ jsx(AnimatePresence, { children: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true ? /* @__PURE__ */ jsx(View, {
+			className: `is_${ITEM_INDICATOR_NAME} ${className || ""}`.trim(),
+			render: "span",
+			...itemIndicatorProps,
+			ref: forwardedRef,
+			"data-state": getCheckedState(indicatorContext.checked)
+		}) : null });
+	});
+	MenuItemIndicator.displayName = ITEM_INDICATOR_NAME;
+	const MenuArrow = createRefComponent(function MenuArrow2(props, forwardedRef) {
+		const { scope = MENU_CONTEXT, className, ...rest } = props;
+		return /* @__PURE__ */ jsx(PopperPrimitive.PopperArrow, {
+			scope,
+			className: `is_PopperArrow ${className || ""}`.trim(),
+			...rest,
+			ref: forwardedRef
+		});
+	});
+	const SUB_NAME = "MenuSub";
+	const { Provider: MenuSubProvider, useStyledContext: useMenuSubContext } = createStyledContext();
+	const MenuSub = (props) => {
+		const isTouchDevice = useIsTouchDevice();
+		const { scope = MENU_CONTEXT } = props;
+		const rootContext = useMenuRootContext(scope);
+		const parentPopperContext = PopperPrimitive.usePopperContext(scope);
+		const parentSide = parentPopperContext.placement?.split("-")[0];
+		const isNestedSubmenu = parentSide === "left" || parentSide === "right";
+		const defaultPlacement = isTouchDevice ? "bottom" : isNestedSubmenu ? `${parentSide}-start` : rootContext.dir === "rtl" ? "left-start" : "right-start";
+		const { children, open = false, onOpenChange, allowFlip: allowFlipProp = { padding: 10 }, stayInFrame = { padding: 10 }, placement = defaultPlacement, ...rest } = props;
+		const allowFlip = React.useMemo(() => {
+			if (!isNestedSubmenu || typeof allowFlipProp === "boolean") return allowFlipProp;
+			if (allowFlipProp.fallbackPlacements) return allowFlipProp;
+			const side = placement.split("-")[0];
+			const align = placement.split("-")[1] || "start";
+			const otherAlign = align === "start" ? "end" : "start";
+			if (side === "left" || side === "right") {
+				const oppositeSide = side === "right" ? "left" : "right";
+				return {
+					...typeof allowFlipProp === "object" ? allowFlipProp : {},
+					fallbackPlacements: [
+						`${side}-${otherAlign}`,
+						`${oppositeSide}-${align}`,
+						`${oppositeSide}-${otherAlign}`
+					]
+				};
+			}
+			return allowFlipProp;
+		}, [
+			isNestedSubmenu,
+			allowFlipProp,
+			placement
+		]);
+		const parentMenuContext = useMenuContext(scope);
+		const [trigger, setTrigger] = React.useState(null);
+		const [content, setContent] = React.useState(null);
+		const handleOpenChange = useCallbackRef(onOpenChange);
+		React.useEffect(() => {
+			if (parentMenuContext.open === false) handleOpenChange(false);
+			return () => handleOpenChange(false);
+		}, [parentMenuContext.open, handleOpenChange]);
+		return /* @__PURE__ */ jsx(PopperPrimitive.Popper, {
+			open,
+			placement,
+			allowFlip,
+			stayInFrame,
+			...rest,
+			scope,
+			children: /* @__PURE__ */ jsx(MenuProvider, {
+				scope,
+				open,
+				onOpenChange: handleOpenChange,
+				content,
+				onContentChange: setContent,
+				children: /* @__PURE__ */ jsx(MenuSubProvider, {
+					scope,
+					contentId: useId(),
+					triggerId: useId(),
+					trigger,
+					onTriggerChange: setTrigger,
+					children
+				})
+			})
+		});
+	};
+	MenuSub.displayName = SUB_NAME;
+	const SUB_TRIGGER_NAME = "MenuSubTrigger";
+	const MenuSubTrigger = createRefComponent((props, forwardedRef) => {
+		const scope = props.scope || MENU_CONTEXT;
+		const context = useMenuContext(scope);
+		const rootContext = useMenuRootContext(scope);
+		const subContext = useMenuSubContext(scope);
+		const contentContext = useMenuContentContext(scope);
+		const popperContext = PopperPrimitive.usePopperContext(scope);
+		const openTimerRef = React.useRef(null);
+		const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;
+		const effectiveDir = rootContext.dir;
+		const clearOpenTimer = React.useCallback(() => {
+			if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
+			openTimerRef.current = null;
+		}, []);
+		React.useEffect(() => clearOpenTimer, [clearOpenTimer]);
+		React.useEffect(() => {
+			const pointerGraceTimer = pointerGraceTimerRef.current;
+			return () => {
+				window.clearTimeout(pointerGraceTimer);
+				onPointerGraceIntentChange(null);
+			};
+		}, [pointerGraceTimerRef, onPointerGraceIntentChange]);
+		return /* @__PURE__ */ jsx(MenuAnchor, {
+			className: `is_${SUB_TRIGGER_NAME}`,
+			asChild: "except-style",
+			scope,
+			children: /* @__PURE__ */ jsx(MenuItemImpl, {
+				id: subContext.triggerId,
+				"aria-haspopup": "menu",
+				"aria-expanded": context.open,
+				"aria-controls": subContext.contentId,
+				"data-state": getOpenState(context.open),
+				...props,
+				ref: composeRefs(forwardedRef, subContext.onTriggerChange),
+				onPress: (event) => {
+					props.onPress?.(event);
+					if (props.disabled || event.defaultPrevented) return;
+					if (isWeb) {
+						event.currentTarget.focus();
+					}
+					if (!context.open) context.onOpenChange(true);
+				},
+				onPointerMove: composeEventHandlers(props.onPointerMove, whenMouse((event) => {
+					contentContext.onItemEnter(event);
+					if (event.defaultPrevented) return;
+					if (!props.disabled && !context.open && !openTimerRef.current) {
+						contentContext.onPointerGraceIntentChange(null);
+						openTimerRef.current = window.setTimeout(() => {
+							context.onOpenChange(true);
+							clearOpenTimer();
+						}, 100);
+					}
+				})),
+				onPointerLeave: composeEventHandlers(props.onPointerLeave, (eventIn) => {
+					const event = eventIn;
+					clearOpenTimer();
+					const contentRect = context.content?.getBoundingClientRect();
+					if (contentRect) {
+						const contentEl = context.content;
+						const sideEl = contentEl?.dataset?.side ? contentEl : contentEl?.querySelector("[data-side]");
+						const side = sideEl?.dataset?.side || "right";
+						const rightSide = side === "right";
+						const bleed = rightSide ? -5 : 5;
+						const contentNearEdge = contentRect[rightSide ? "left" : "right"];
+						const contentFarEdge = contentRect[rightSide ? "right" : "left"];
+						const polygon = {
+							area: [
+								{
+									x: event.clientX + bleed,
+									y: event.clientY
+								},
+								{
+									x: contentNearEdge,
+									y: contentRect.top
+								},
+								{
+									x: contentFarEdge,
+									y: contentRect.top
+								},
+								{
+									x: contentFarEdge,
+									y: contentRect.bottom
+								},
+								{
+									x: contentNearEdge,
+									y: contentRect.bottom
+								}
+							],
+							side
+						};
+						contentContext.onPointerGraceIntentChange(polygon);
+						window.clearTimeout(pointerGraceTimerRef.current);
+						pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
+					} else if (isWeb && subContext.trigger) {
+						const triggerEl = subContext.trigger;
+						const triggerRect = triggerEl?.getBoundingClientRect();
+						if (triggerRect) {
+							const placementSide = popperContext.placement?.split("-")[0];
+							const side = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
+							const rightSide = side === "right";
+							const bleed = rightSide ? -5 : 5;
+							const nearEdge = rightSide ? triggerRect.right + 4 : triggerRect.left - 4;
+							const farEdge = rightSide ? nearEdge + 200 : nearEdge - 200;
+							const polygon = {
+								area: [
+									{
+										x: event.clientX + bleed,
+										y: event.clientY
+									},
+									{
+										x: nearEdge,
+										y: triggerRect.top - 50
+									},
+									{
+										x: farEdge,
+										y: triggerRect.top - 50
+									},
+									{
+										x: farEdge,
+										y: triggerRect.bottom + 50
+									},
+									{
+										x: nearEdge,
+										y: triggerRect.bottom + 50
+									}
+								],
+								side
+							};
+							contentContext.onPointerGraceIntentChange(polygon);
+							window.clearTimeout(pointerGraceTimerRef.current);
+							pointerGraceTimerRef.current = window.setTimeout(() => contentContext.onPointerGraceIntentChange(null), 300);
+						}
+					} else {
+						contentContext.onTriggerLeave(event);
+						if (event.defaultPrevented) return;
+						contentContext.onPointerGraceIntentChange(null);
+					}
+				}),
+				...isWeb ? { onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+					const isTypingAhead = contentContext.searchRef.current !== "";
+					if (props.disabled || isTypingAhead && event.key === " ") return;
+					const willOpen = SUB_OPEN_KEYS[effectiveDir].includes(event.key);
+					if (willOpen) {
+						if (context.open && context.content) {
+							const contentEl = context.content;
+							const firstItem = contentEl.querySelector?.("[role=\"menuitem\"]:not([data-disabled])");
+							if (firstItem) {
+								firstItem.focus({ focusVisible: true });
+								event.preventDefault();
+								return;
+							}
+						}
+						const triggerEl = event.currentTarget;
+						popperContext.refs?.setReference(triggerEl);
+						context.onOpenChange(true);
+						requestAnimationFrame(() => {
+							popperContext.update?.();
+						});
+						context.content?.focus({ focusVisible: true });
+						event.preventDefault();
+					}
+				}) } : null
+			})
+		});
+	});
+	MenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+	const SUB_CONTENT_NAME = "MenuSubContent";
+	const MenuSubContentFrame = styled(PopperPrimitive.PopperContentFrame, { displayName: SUB_CONTENT_NAME });
+	const MenuSubContent = createStyledHOC(MenuSubContentFrame, (props, forwardedRef) => {
+		const scope = props.scope || MENU_CONTEXT;
+		const portalContext = usePortalContext(scope);
+		const { forceMount = portalContext.forceMount, ...subContentProps } = props;
+		const context = useMenuContext(scope);
+		const rootContext = useMenuRootContext(scope);
+		const subContext = useMenuSubContext(scope);
+		const popperContext = PopperPrimitive.usePopperContext(scope);
+		const ref = React.useRef(null);
+		const composedRefs = useComposedRefs(forwardedRef, ref);
+		const placementSide = popperContext.placement?.split("-")[0];
+		const dataSide = placementSide === "left" || placementSide === "right" ? placementSide : rootContext.dir === "rtl" ? "left" : "right";
+		const effectiveDir = rootContext.dir;
+		return /* @__PURE__ */ jsx(Collection.Provider, {
+			scope,
+			children: /* @__PURE__ */ jsx(Collection.Slot, {
+				scope,
+				children: /* @__PURE__ */ jsx(MenuContentImpl, {
+					id: subContext.contentId,
+					"aria-labelledby": subContext.triggerId,
+					...subContentProps,
+					ref: composedRefs,
+					"data-side": dataSide,
+					disableOutsidePointerEvents: false,
+					disableOutsideScroll: false,
+					trapFocus: false,
+					onOpenAutoFocus: (event) => {
+						if (rootContext.isUsingKeyboardRef.current) {
+							const root = ref.current;
+							const content = root?.querySelector?.("[data-tamagui-menu-content]");
+							(content || root)?.focus({ preventScroll: true });
+						}
+						event.cancel();
+					},
+					onCloseAutoFocus: (event) => event.cancel(),
+					onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
+						if (event.event?.target !== subContext.trigger) context.onOpenChange(false);
+					}),
+					onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (event) => {
+						context.onOpenChange(false);
+						subContext.trigger?.focus({ focusVisible: true });
+						event.cancel();
+						event.event?.preventDefault?.();
+					}),
+					...isWeb ? { onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
+						const isKeyDownInside = event.currentTarget.contains(event.target);
+						const isCloseKey = SUB_CLOSE_KEYS[effectiveDir].includes(event.key);
+						if (isKeyDownInside && isCloseKey) {
+							context.onOpenChange(false);
+							subContext.trigger?.focus({ focusVisible: true });
+							event.preventDefault();
+						}
+					}) } : null
+				})
+			})
+		});
+	});
+	MenuSubContent.displayName = SUB_CONTENT_NAME;
+	const Anchor = MenuAnchor;
+	const Portal$1 = MenuPortal;
+	const Content = MenuContent;
+	const Group = createStyledHOC(View, (props, ref) => {
+		return /* @__PURE__ */ jsx(View, {
+			role: "group",
+			...props,
+			ref
+		});
+	});
+	Group.displayName = "MenuGroup";
+	const Label = createStyledHOC(Text, (props, ref) => {
+		return /* @__PURE__ */ jsx(Text, {
+			...props,
+			ref
+		});
+	});
+	Label.displayName = "MenuLabel";
+	const Item = MenuItem;
+	const CheckboxItem = MenuCheckboxItem;
+	const RadioGroup = MenuRadioGroup;
+	const RadioItem = MenuRadioItem;
+	const ItemIndicator = MenuItemIndicator;
+	const Separator = createStyledHOC(View, (props, ref) => {
+		return /* @__PURE__ */ jsx(View, {
+			role: "separator",
+			"aria-orientation": "horizontal",
+			...props,
+			ref
+		});
+	});
+	Separator.displayName = "MenuSeparator";
+	const Arrow = MenuArrow;
+	const Sub = MenuSub;
+	const SubTrigger = MenuSubTrigger;
+	const SubContent = MenuSubContent;
+	const ItemTitle = MenuItemTitle;
+	const ItemSubtitle = MenuItemSubTitle;
+	const ItemImage = MenuItemImage;
+	const ItemIcon = MenuItemIcon;
+	const Menu = withStaticProperties(MenuComp, {
+		Anchor,
+		Portal: Portal$1,
+		Content,
+		Group,
+		Label,
+		Item,
+		CheckboxItem,
+		RadioGroup,
+		RadioItem,
+		ItemIndicator,
+		Separator,
+		Arrow,
+		Sub,
+		SubTrigger,
+		SubContent,
+		ItemTitle,
+		ItemSubtitle,
+		ItemImage,
+		ItemIcon
+	});
+	return { Menu };
 }
 function getOpenState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
 function isIndeterminate(checked) {
-  return checked === "indeterminate";
+	return checked === "indeterminate";
 }
 function getCheckedState(checked) {
-  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+	return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
 }
 function focusFirst(candidates, options) {
-  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-  for (const candidate of candidates) {
-    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-    candidate.focus({
-      preventScroll: true,
-      focusVisible: options?.focusVisible
-    });
-    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-  }
+	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+	for (const candidate of candidates) {
+		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+		candidate.focus({
+			preventScroll: true,
+			focusVisible: options?.focusVisible
+		});
+		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+	}
 }
 function wrapArray(array, startIndex) {
-  return array.map((_, index) => array[(startIndex + index) % array.length]);
+	return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
 function getNextMatch(values, search, currentMatch) {
-  const isRepeated = search.length > 1 && Array.from(search).every(char => char === search[0]);
-  const normalizedSearch = isRepeated ? search[0] : search;
-  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
-  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
-  const excludeCurrentMatch = normalizedSearch.length === 1;
-  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter(v => v !== currentMatch);
-  const nextMatch = wrappedValues.find(value => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
-  return nextMatch !== currentMatch ? nextMatch : void 0;
+	const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+	const normalizedSearch = isRepeated ? search[0] : search;
+	const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+	let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+	const excludeCurrentMatch = normalizedSearch.length === 1;
+	if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+	const nextMatch = wrappedValues.find((value) => value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
+	return nextMatch !== currentMatch ? nextMatch : void 0;
 }
 function isPointInPolygon(point, polygon) {
-  const {
-    x,
-    y
-  } = point;
-  let inside = false;
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i].x;
-    const yi = polygon[i].y;
-    const xj = polygon[j].x;
-    const yj = polygon[j].y;
-    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
-    if (intersect) inside = !inside;
-  }
-  return inside;
+	const { x, y } = point;
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i].x;
+		const yi = polygon[i].y;
+		const xj = polygon[j].x;
+		const yj = polygon[j].y;
+		const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+		if (intersect) inside = !inside;
+	}
+	return inside;
 }
 function isPointerInGraceArea(event, area) {
-  if (!area) return false;
-  const cursorPos = {
-    x: event.clientX,
-    y: event.clientY
-  };
-  return isPointInPolygon(cursorPos, area);
+	if (!area) return false;
+	const cursorPos = {
+		x: event.clientX,
+		y: event.clientY
+	};
+	return isPointInPolygon(cursorPos, area);
 }
+
 export { createBaseMenu };
 //# sourceMappingURL=createBaseMenu.mjs.map