50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T43b,import type { MenuContentProps, MenuGroupProps, MenuItemIconProps, MenuItemLabelProps, MenuItemProps, MenuProps, MenuTriggerProps, } from "./menu-types"; // Components export const MenuItem = (_: MenuItemProps) => { return null; }; export const MenuItemLabel = (_: MenuItemLabelProps) => { return null; }; export const MenuItemIcon = (_: MenuItemIconProps) => { return null; }; export const MenuSeparator = () => { return null; }; export const MenuGroup = (_: MenuGroupProps) => { return null; }; export const MenuTrigger = (_: MenuTriggerProps) => { return null; }; MenuTrigger.displayName = "MenuTrigger"; export const MenuContent = (_: MenuContentProps) => { return null; }; export const Menu = (_: MenuProps) => { return null; }; export const MenuSubTrigger = (_: MenuTriggerProps) => { return null; }; MenuSubTrigger.displayName = "MenuSubTrigger"; export const MenuSubContent = (_: MenuContentProps) => { return null; }; MenuSubContent.displayName = "MenuSubContent"; export const MenuSub = (_: MenuProps) => { return null; }; 53:T1486,import { Host as HostPrimitive, Icon as IconPrimitive, Text as TextPrimitive, } from "@expo/ui"; import { Button as ButtonPrimitive, ControlGroup as ControlGroupPrimitive, Divider as DividerPrimitive, Menu as MenuPrimitive, RNHostView, Section as SectionPrimitive, Toggle as TogglePrimitive, } from "@expo/ui/swift-ui"; import { disabled as disabledModifier, type ModifierConfig, } from "@expo/ui/swift-ui/modifiers"; import { Children, isValidElement, useMemo } from "react"; import { menuSlots, useAssertMenuParts } from "./menu-slots"; import type { MenuContentProps, MenuGroupProps, MenuItemIconProps, MenuItemLabelProps, MenuItemProps, MenuProps, MenuTriggerProps, } from "./menu-types"; // Types type MenuItemToggleProps = { children: React.ReactElement | React.ReactElement[]; selected: boolean; onPress?: () => void; modifiers?: ModifierConfig[]; }; // Components export const MenuItemLabel = ({ children }: MenuItemLabelProps) => { return {children}; }; MenuItemLabel.displayName = "MenuItemLabel"; export const MenuItemIcon = ({ icon }: MenuItemIconProps) => { return ; }; MenuItemIcon.displayName = "MenuItemIcon"; const MenuItemToggle = ({ selected, onPress, children, modifiers, }: MenuItemToggleProps) => { const selectableParts = useMemo( () => extractSelectableItemParts(children), [children] ); return ( ); }; export const MenuItem = ({ variant = "default", disabled, selected, onPress, children, }: MenuItemProps) => { const modifiers = disabled ? [disabledModifier(true)] : undefined; if (selected !== undefined) { return ( {children} ); } return ( {children} ); }; export const MenuSeparator = DividerPrimitive; export const MenuGroup = ({ direction = "vertical", ...props }: MenuGroupProps) => { if (direction === "horizontal") { return ; } return ; }; export const MenuTrigger = ({ children, ...props }: MenuTriggerProps) => { return ( {children} ); }; MenuTrigger.displayName = "MenuTrigger"; export const MenuContent = ({ children }: MenuContentProps) => { return {children}; }; MenuContent.displayName = "MenuContent"; export const Menu = (props: MenuProps) => { return ( ); }; const MenuView = ({ children, ...props }: MenuProps) => { useAssertMenuParts(); return ( <> {children} }> ); }; export const MenuSubTrigger = ({ children, ...props }: MenuTriggerProps) => { return ( {children} ); }; MenuSubTrigger.displayName = "MenuSubTrigger"; export const MenuSubContent = ({ children }: MenuContentProps) => { return {children}; }; MenuSubContent.displayName = "MenuSubContent"; export const MenuSub = (props: MenuProps) => { return ( ); }; const MenuSubView = ({ children, ...props }: MenuProps) => { useAssertMenuParts(); return ( <> {children} }> ); }; // Utils const extractSelectableItemParts = ( children: React.ReactElement | React.ReactElement[] ) => { let label: string | undefined; let systemImage: MenuItemIconProps["icon"] | undefined; Children.forEach(children, (child) => { if (!isValidElement(child)) { return; } const displayName = getMenuChildDisplayName(child); if (displayName === "MenuItemIcon") { systemImage = (child.props as MenuItemIconProps).icon; return; } if (displayName === "MenuItemLabel") { label = (child.props as MenuItemLabelProps).children; } }); return { label, systemImage }; }; const getMenuChildDisplayName = (child: React.ReactNode) => { if (!isValidElement(child)) { return; } return (child.type as { displayName?: string }).displayName; }; 54:T2943,import { Icon as IconPrimitive } from "@expo/ui"; import { Column, DropdownMenuItem as DropdownMenuItemPrimitive, DropdownMenu as DropdownMenuPrimitive, HorizontalDivider as HorizontalDividerPrimitive, Host as HostPrimitive, RNHostView, Row, Text as TextPrimitive, } from "@expo/ui/jetpack-compose"; import { defaultMinSize, padding, width, wrapContentWidth, } from "@expo/ui/jetpack-compose/modifiers"; import { Children, cloneElement, createContext, useCallback, useContext, useMemo, useState, } from "react"; import { Platform, type PressableProps } from "react-native"; import { useCSSVariable } from "uniwind"; import { menuSlots, useAssertMenuParts } from "./menu-slots"; import type { MenuContentProps, MenuGroupProps, MenuItemIconProps, MenuItemLabelProps, MenuItemProps, MenuItemVariant, MenuProps, MenuTriggerProps, } from "./menu-types"; const HORIZONTAL_MENU_ITEM_WIDTH = 48; const MENU_GROUP_LABEL_MODIFIERS = [padding(12, 8, 12, 4)]; const MENU_GROUP_HORIZONTAL_ROW_MODIFIERS = [ padding(12, 0, 12, 8), wrapContentWidth(), ]; // Types type InternalMenuAndroidContextType = { dismissAll: () => void; expanded: boolean; setExpanded: (expanded: boolean) => void; }; type InternalMenuSubAndroidContextType = { dismissAll: () => void; expanded: boolean; setExpanded: (expanded: boolean) => void; }; // Context const MenuAndroidContext = createContext( null ); const useMenuAndroidContext = () => { const context = useContext(MenuAndroidContext); if (!context) { throw new Error( "useMenuAndroidContext must be used within a Menu component" ); } return context; }; const MenuSubAndroidContext = createContext(null); const MenuSubTriggerContext = createContext(false); const MenuGroupHorizontalContext = createContext(false); const MenuItemAndroidContext = createContext(null); const useMenuItemAndroidContext = () => { const context = useContext(MenuItemAndroidContext); if (!context) { throw new Error( "useMenuItemAndroidContext must be used within a MenuItem component" ); } return context; }; // Components export const MenuItem = ({ variant = "default", onPress, children, disabled, selected, ...rest }: MenuItemProps) => { const { dismissAll: dismissRootMenu } = useMenuAndroidContext(); const subMenu = useContext(MenuSubAndroidContext); const isSubTrigger = useContext(MenuSubTriggerContext); const isHorizontalGroup = useContext(MenuGroupHorizontalContext); const [foregroundColor, destructiveColor] = useCSSVariable([ "--color-foreground", "--color-destructive", ]) as [string, string]; const modifiers = isHorizontalGroup ? [ defaultMinSize({ minHeight: 0, minWidth: 0 }), wrapContentWidth(), width(HORIZONTAL_MENU_ITEM_WIDTH), ] : undefined; const elementColors = variant === "destructive" ? { disabledLeadingIconColor: destructiveColor, disabledTextColor: destructiveColor, leadingIconColor: destructiveColor, textColor: destructiveColor, } : undefined; const handleClick = useCallback(() => { if (isSubTrigger && subMenu) { subMenu.setExpanded(true); return; } onPress?.(); subMenu?.setExpanded(false); dismissRootMenu(); }, [dismissRootMenu, isSubTrigger, onPress, subMenu]); return ( {children} {selected ? ( ✓ ) : null} ); }; export const MenuItemLabel = ({ children }: MenuItemLabelProps) => { const variant = useMenuItemAndroidContext(); const [foregroundColor, destructiveColor] = useCSSVariable([ "--color-foreground", "--color-destructive", ]) as [string, string]; return ( {children} ); }; export const MenuItemIcon = ({ icon }: MenuItemIconProps) => { const variant = useMenuItemAndroidContext(); const [foregroundColor, destructiveColor] = useCSSVariable([ "--color-foreground", "--color-destructive", ]) as [string, string]; return ( ); }; export const MenuSeparator = HorizontalDividerPrimitive; const MenuGroupLabel = ({ children, color, }: { children: string; color: string; }) => { return ( {children} ); }; export const MenuGroup = ({ direction = "vertical", title, children, }: MenuGroupProps) => { const mutedColor = useCSSVariable("--color-muted-foreground") as string; if (direction === "horizontal") { const row = ( {children} ); if (title) { return ( {title} {row} ); } return row; } if (title) { return ( {title} {children} ); } return <>{children}; }; export const MenuTrigger = ({ children, ...props }: MenuTriggerProps) => { const { setExpanded } = useMenuAndroidContext(); const child = Children.only(children); if (!child) { if (__DEV__) { throw new Error("MenuTrigger expects a single React element as children"); } return null; } return ( {cloneElement(child as React.ReactElement, { // onPress isn't triggering on Android, so we use onPressIn instead [Platform.select({ android: "onPressIn", default: "onPress", })]: () => setExpanded(true), })} ); }; MenuTrigger.displayName = "MenuTrigger"; export const MenuContent = ({ children }: MenuContentProps) => { return ( {children} ); }; MenuContent.displayName = "MenuContent"; export const Menu = (props: MenuProps) => { const [expanded, setExpanded] = useState(false); const popoverColor = useCSSVariable("--color-popover") as string; const dismissAll = useCallback(() => setExpanded(false), []); const ctx = useMemo( () => ({ dismissAll, expanded, setExpanded }), [dismissAll, expanded] ); return ( {props.children} ); }; const MenuView = ({ children, color, expanded, onDismiss, }: MenuProps & { color: string; expanded: boolean; onDismiss: () => void; }) => { useAssertMenuParts(); return ( <> {children} ); }; export const MenuSubTrigger = ({ children }: MenuTriggerProps) => { return ( {children} ); }; MenuSubTrigger.displayName = "MenuSubTrigger"; export const MenuSubContent = ({ children }: MenuContentProps) => { return ( {children} ); }; MenuSubContent.displayName = "MenuSubContent"; export const MenuSub = ({ children }: MenuProps) => { const { dismissAll: dismissRootMenu } = useMenuAndroidContext(); const [expanded, setExpanded] = useState(false); const dismissAll = useCallback(() => { setExpanded(false); dismissRootMenu(); }, [dismissRootMenu]); const ctx = useMemo( () => ({ dismissAll, expanded, setExpanded }), [dismissAll, expanded] ); return ( setExpanded(false)}> {children} ); }; const MenuSubView = ({ children, expanded, onDismiss, }: MenuProps & { expanded: boolean; onDismiss: () => void; }) => { useAssertMenuParts(); return ( <> {children} ); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@expo/ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40expo%2Fui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@expo/ui"}]]}]}],["$","li","@expo/material-symbols",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40expo%2Fmaterial-symbols","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@expo/material-symbols"}]]}]}]]}],["$","$L50",null,{"namespace":"@tetra-ui","registryDependencies":["@tetra-ui/slots"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/menu/index.ts","content":"export * from \"./menu\";\n","type":"registry:ui","target":"@ui/menu/index.ts"},{"path":"ui/menu/menu-types.ts","content":"import type { IconProps as IconPrimitiveProps } from \"@expo/ui\";\n\nexport type MenuItemVariant = \"default\" | \"destructive\";\n\nexport type MenuProps = {\n children: React.ReactNode;\n};\n\nexport type MenuContentProps = {\n children: React.ReactNode;\n};\n\nexport type MenuTriggerProps = {\n children: React.ReactElement;\n};\n\nexport type MenuGroupProps = {\n direction?: \"horizontal\" | \"vertical\";\n title?: string;\n children: React.ReactNode;\n};\n\nexport type MenuItemProps = {\n disabled?: boolean;\n variant?: MenuItemVariant;\n selected?: boolean;\n onPress?: () => void;\n children: React.ReactElement | React.ReactElement[];\n};\n\nexport type MenuItemLabelProps = {\n children: string;\n};\n\nexport type MenuItemIconProps = {\n icon: IconPrimitiveProps[\"name\"];\n};\n","type":"registry:ui","target":"@ui/menu/menu-types.ts"},{"path":"ui/menu/menu-slots.ts","content":"import { useLayoutEffect } from \"react\";\nimport { createSlots } from \"@/lib/slots\";\n\nexport const menuSlots = createSlots<\"content\" | \"trigger\">({\n errorMessage: \"MenuTrigger and MenuContent must be rendered inside Menu\",\n});\n\nexport const useAssertMenuParts = () => {\n const registry = menuSlots.useRegistry();\n\n useLayoutEffect(() => {\n if (registry.has(\"trigger\") && registry.has(\"content\")) {\n return;\n }\n\n throw new Error(\"Menu must have a MenuTrigger and MenuContent\");\n }, [registry]);\n};\n","type":"registry:ui","target":"@ui/menu/menu-slots.ts"},{"path":"ui/menu/menu.tsx","content":"$52","type":"registry:ui","target":"@ui/menu/menu.tsx"},{"path":"ui/menu/menu.ios.tsx","content":"$53","type":"registry:ui","target":"@ui/menu/menu.ios.tsx"},{"path":"ui/menu/menu.android.tsx","content":"$54","type":"registry:ui","target":"@ui/menu/menu.android.tsx"}],"className":"h-[70svh] min-h-80"}]]}]