@lattice-ui/menu 0.1.1

package/out/Menu/MenuContent.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuContentProps } from "./types";
+export declare function MenuContent(props: MenuContentProps): React.JSX.Element | undefined;

package/out/Menu/MenuContent.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local DismissableLayer = _layer.DismissableLayer
+local Presence = _layer.Presence
+local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
+local useMenuContext = TS.import(script, script.Parent, "context").useMenuContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function MenuContentImpl(props)
+	local menuContext = useMenuContext()
+	local popper = usePopper({
+		anchorRef = menuContext.triggerRef,
+		contentRef = menuContext.contentRef,
+		placement = props.placement,
+		offset = props.offset,
+		padding = props.padding,
+		enabled = props.enabled,
+	})
+	local setContentRef = React.useCallback(function(instance)
+		menuContext.contentRef.current = toGuiObject(instance)
+	end, { menuContext.contentRef })
+	local contentNode = if props.asChild then ((function()
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[MenuContent] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			AnchorPoint = popper.anchorPoint,
+			Position = popper.position,
+			Visible = props.visible,
+			ref = setContentRef,
+		}, child)
+	end)()) else (React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Position = popper.position,
+		Size = UDim2.fromOffset(0, 0),
+		Visible = props.visible,
+		ref = setContentRef,
+	}, props.children))
+	return React.createElement(DismissableLayer, {
+		enabled = props.enabled,
+		modal = menuContext.modal,
+		onDismiss = props.onDismiss,
+		onEscapeKeyDown = props.onEscapeKeyDown,
+		onInteractOutside = props.onInteractOutside,
+		onPointerDownOutside = props.onPointerDownOutside,
+	}, React.createElement(RovingFocusGroup, {
+		active = props.enabled,
+		autoFocus = "first",
+		loop = props.loop,
+		orientation = "vertical",
+	}, contentNode))
+end
+local function MenuContent(props)
+	local menuContext = useMenuContext()
+	local open = menuContext.open
+	local forceMount = props.forceMount == true
+	local _condition = props.loop
+	if _condition == nil then
+		_condition = true
+	end
+	local loop = _condition
+	local handleDismiss = React.useCallback(function()
+		menuContext.setOpen(false)
+	end, { menuContext.setOpen })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(MenuContentImpl, {
+			asChild = props.asChild,
+			enabled = open,
+			loop = loop,
+			offset = props.offset,
+			onDismiss = handleDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+			padding = props.padding,
+			placement = props.placement,
+			visible = open,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = open,
+		render = function(state)
+			return React.createElement(MenuContentImpl, {
+				asChild = props.asChild,
+				enabled = state.isPresent,
+				loop = loop,
+				offset = props.offset,
+				onDismiss = handleDismiss,
+				onEscapeKeyDown = props.onEscapeKeyDown,
+				onInteractOutside = props.onInteractOutside,
+				onPointerDownOutside = props.onPointerDownOutside,
+				padding = props.padding,
+				placement = props.placement,
+				visible = state.isPresent,
+			}, props.children)
+		end,
+	})
+end
+return {
+	MenuContent = MenuContent,
+}

package/out/Menu/MenuGroup.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuGroupProps } from "./types";
+export declare function MenuGroup(props: MenuGroupProps): React.JSX.Element;

package/out/Menu/MenuGroup.luau

@@ -0,0 +1,25 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function MenuGroup(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[MenuGroup] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		Size = UDim2.fromOffset(220, 0),
+	}, React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Vertical,
+		Padding = UDim.new(0, 4),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}), props.children)
+end
+return {
+	MenuGroup = MenuGroup,
+}

package/out/Menu/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuItemProps } from "./types";
+export declare function MenuItem(props: MenuItemProps): React.JSX.Element;

package/out/Menu/MenuItem.luau

@@ -0,0 +1,73 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
+local useMenuContext = TS.import(script, script.Parent, "context").useMenuContext
+local function createMenuSelectEvent()
+	local event
+	event = {
+		defaultPrevented = false,
+		preventDefault = function()
+			event.defaultPrevented = true
+		end,
+	}
+	return event
+end
+local function MenuItem(props)
+	local menuContext = useMenuContext()
+	local handleActivated = React.useCallback(function()
+		if props.disabled then
+			return nil
+		end
+		local event = createMenuSelectEvent()
+		local _result = props.onSelect
+		if _result ~= nil then
+			_result(event)
+		end
+		if not event.defaultPrevented then
+			menuContext.setOpen(false)
+		end
+	end, { menuContext, props.disabled, props.onSelect })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[MenuItem] `asChild` requires a child element.")
+		end
+		return React.createElement(RovingFocusItem, {
+			asChild = true,
+			disabled = props.disabled,
+		}, React.createElement(Slot, {
+			Active = props.disabled ~= true,
+			Event = {
+				Activated = handleActivated,
+			},
+			Selectable = props.disabled ~= true,
+		}, child))
+	end
+	return React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = props.disabled,
+	}, React.createElement("textbutton", {
+		Active = props.disabled ~= true,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(47, 53, 68),
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Selectable = props.disabled ~= true,
+		Size = UDim2.fromOffset(220, 34),
+		Text = "Menu Item",
+		TextColor3 = if props.disabled then Color3.fromRGB(135, 142, 156) else Color3.fromRGB(234, 239, 247),
+		TextSize = 15,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+	}), props.children))
+end
+return {
+	MenuItem = MenuItem,
+}

package/out/Menu/MenuLabel.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuLabelProps } from "./types";
+export declare function MenuLabel(props: MenuLabelProps): React.JSX.Element;

package/out/Menu/MenuLabel.luau

@@ -0,0 +1,27 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function MenuLabel(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[MenuLabel] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		Size = UDim2.fromOffset(220, 24),
+		Text = "Label",
+		TextColor3 = Color3.fromRGB(162, 173, 191),
+		TextSize = 14,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+	}), props.children)
+end
+return {
+	MenuLabel = MenuLabel,
+}

package/out/Menu/MenuPortal.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuPortalProps } from "./types";
+export declare function MenuPortal(props: MenuPortalProps): React.JSX.Element;

package/out/Menu/MenuPortal.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local Portal = _layer.Portal
+local PortalProvider = _layer.PortalProvider
+local usePortalContext = _layer.usePortalContext
+local function MenuPortalWithOverrides(props)
+	local portalContext = usePortalContext()
+	local container = props.container or portalContext.container
+	local _condition = props.displayOrderBase
+	if _condition == nil then
+		_condition = portalContext.displayOrderBase
+	end
+	local displayOrderBase = _condition
+	return React.createElement(PortalProvider, {
+		container = container,
+		displayOrderBase = displayOrderBase,
+	}, React.createElement(Portal, nil, props.children))
+end
+local function MenuPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(MenuPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	MenuPortal = MenuPortal,
+}

package/out/Menu/MenuRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuProps } from "./types";
+export declare function Menu(props: MenuProps): React.JSX.Element;

package/out/Menu/MenuRoot.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local MenuContextProvider = TS.import(script, script.Parent, "context").MenuContextProvider
+local function Menu(props)
+	local _object = {
+		value = props.open,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultOpen
+	if _condition == nil then
+		_condition = false
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onOpenChange
+	local _binding = useControllableState(_object)
+	local open = _binding[1]
+	local setOpenState = _binding[2]
+	local _condition_1 = props.modal
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	local modal = _condition_1
+	local triggerRef = React.useRef()
+	local contentRef = React.useRef()
+	local setOpen = React.useCallback(function(nextOpen)
+		setOpenState(nextOpen)
+	end, { setOpenState })
+	local contextValue = React.useMemo(function()
+		return {
+			open = open,
+			setOpen = setOpen,
+			modal = modal,
+			triggerRef = triggerRef,
+			contentRef = contentRef,
+		}
+	end, { modal, open, setOpen })
+	return React.createElement(MenuContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	Menu = Menu,
+}

package/out/Menu/MenuSeparator.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuSeparatorProps } from "./types";
+export declare function MenuSeparator(props: MenuSeparatorProps): React.JSX.Element;

package/out/Menu/MenuSeparator.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local function MenuSeparator(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[MenuSeparator] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(72, 79, 97),
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(220, 1),
+	})
+end
+return {
+	MenuSeparator = MenuSeparator,
+}

package/out/Menu/MenuTrigger.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { MenuTriggerProps } from "./types";
+export declare function MenuTrigger(props: MenuTriggerProps): React.JSX.Element;

package/out/Menu/MenuTrigger.luau

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useMenuContext = TS.import(script, script.Parent, "context").useMenuContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function MenuTrigger(props)
+	local menuContext = useMenuContext()
+	local setTriggerRef = React.useCallback(function(instance)
+		menuContext.triggerRef.current = toGuiObject(instance)
+	end, { menuContext.triggerRef })
+	local handleActivated = React.useCallback(function()
+		if props.disabled then
+			return nil
+		end
+		menuContext.setOpen(not menuContext.open)
+	end, { menuContext.open, menuContext.setOpen, props.disabled })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[MenuTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Event = {
+				Activated = handleActivated,
+			},
+			ref = setTriggerRef,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = props.disabled ~= true,
+		AutoButtonColor = false,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Selectable = props.disabled ~= true,
+		Size = UDim2.fromOffset(140, 38),
+		Text = "Toggle Menu",
+		TextColor3 = Color3.fromRGB(240, 244, 250),
+		TextSize = 16,
+		ref = setTriggerRef,
+	}, props.children)
+end
+return {
+	MenuTrigger = MenuTrigger,
+}

package/out/Menu/context.d.ts

@@ -0,0 +1,3 @@
+import type { MenuContextValue } from "./types";
+declare const MenuContextProvider: import("@rbxts/react").Provider<MenuContextValue | undefined>, useMenuContext: () => MenuContextValue;
+export { MenuContextProvider, useMenuContext };

package/out/Menu/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Menu")
+local MenuContextProvider = _binding[1]
+local useMenuContext = _binding[2]
+return {
+	MenuContextProvider = MenuContextProvider,
+	useMenuContext = useMenuContext,
+}

package/out/Menu/types.d.ts

@@ -0,0 +1,62 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+export type MenuSetOpen = (open: boolean) => void;
+export type MenuContextValue = {
+    open: boolean;
+    setOpen: MenuSetOpen;
+    modal: boolean;
+    triggerRef: React.MutableRefObject<GuiObject | undefined>;
+    contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+export type MenuProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    children?: React.ReactNode;
+};
+export type MenuTriggerProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactElement;
+};
+export type MenuPortalProps = {
+    container?: BasePlayerGui;
+    displayOrderBase?: number;
+    children?: React.ReactNode;
+};
+export type MenuContentProps = {
+    asChild?: boolean;
+    forceMount?: boolean;
+    placement?: PopperPlacement;
+    offset?: Vector2;
+    padding?: number;
+    loop?: boolean;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    children?: React.ReactNode;
+};
+export type MenuSelectEvent = {
+    defaultPrevented: boolean;
+    preventDefault: () => void;
+};
+export type MenuItemProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (event: MenuSelectEvent) => void;
+    children?: React.ReactElement;
+};
+export type MenuSeparatorProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type MenuGroupProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type MenuLabelProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/Menu/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,9 @@
+export { MenuContent } from "./Menu/MenuContent";
+export { MenuGroup } from "./Menu/MenuGroup";
+export { MenuItem } from "./Menu/MenuItem";
+export { MenuLabel } from "./Menu/MenuLabel";
+export { MenuPortal } from "./Menu/MenuPortal";
+export { Menu } from "./Menu/MenuRoot";
+export { MenuSeparator } from "./Menu/MenuSeparator";
+export { MenuTrigger } from "./Menu/MenuTrigger";
+export type { MenuContentProps, MenuGroupProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuSelectEvent, MenuSeparatorProps, MenuTriggerProps, } from "./Menu/types";

package/out/init.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.MenuContent = TS.import(script, script, "Menu", "MenuContent").MenuContent
+exports.MenuGroup = TS.import(script, script, "Menu", "MenuGroup").MenuGroup
+exports.MenuItem = TS.import(script, script, "Menu", "MenuItem").MenuItem
+exports.MenuLabel = TS.import(script, script, "Menu", "MenuLabel").MenuLabel
+exports.MenuPortal = TS.import(script, script, "Menu", "MenuPortal").MenuPortal
+exports.Menu = TS.import(script, script, "Menu", "MenuRoot").Menu
+exports.MenuSeparator = TS.import(script, script, "Menu", "MenuSeparator").MenuSeparator
+exports.MenuTrigger = TS.import(script, script, "Menu", "MenuTrigger").MenuTrigger
+return exports

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@lattice-ui/menu",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1",
+    "@lattice-ui/focus": "0.1.1",
+    "@lattice-ui/layer": "0.1.1",
+    "@lattice-ui/popper": "0.1.1"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/Menu/MenuContent.tsx

@@ -0,0 +1,146 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusGroup } from "@lattice-ui/focus";
+import { DismissableLayer, Presence } from "@lattice-ui/layer";
+import { usePopper } from "@lattice-ui/popper";
+import { useMenuContext } from "./context";
+import type { MenuContentProps } from "./types";
+
+type MenuContentImplProps = {
+  enabled: boolean;
+  visible: boolean;
+  onDismiss: () => void;
+  loop: boolean;
+  asChild?: boolean;
+  placement?: MenuContentProps["placement"];
+  offset?: MenuContentProps["offset"];
+  padding?: MenuContentProps["padding"];
+} & Pick<MenuContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function MenuContentImpl(props: MenuContentImplProps) {
+  const menuContext = useMenuContext();
+
+  const popper = usePopper({
+    anchorRef: menuContext.triggerRef,
+    contentRef: menuContext.contentRef,
+    placement: props.placement,
+    offset: props.offset,
+    padding: props.padding,
+    enabled: props.enabled,
+  });
+
+  const setContentRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      menuContext.contentRef.current = toGuiObject(instance);
+    },
+    [menuContext.contentRef],
+  );
+
+  const contentNode = props.asChild ? (
+    (() => {
+      const child = props.children;
+      if (!React.isValidElement(child)) {
+        error("[MenuContent] `asChild` requires a child element.");
+      }
+
+      return (
+        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
+          {child}
+        </Slot>
+      );
+    })()
+  ) : (
+    <frame
+      AnchorPoint={popper.anchorPoint}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Position={popper.position}
+      Size={UDim2.fromOffset(0, 0)}
+      Visible={props.visible}
+      ref={setContentRef}
+    >
+      {props.children}
+    </frame>
+  );
+
+  return (
+    <DismissableLayer
+      enabled={props.enabled}
+      modal={menuContext.modal}
+      onDismiss={props.onDismiss}
+      onEscapeKeyDown={props.onEscapeKeyDown}
+      onInteractOutside={props.onInteractOutside}
+      onPointerDownOutside={props.onPointerDownOutside}
+    >
+      <RovingFocusGroup active={props.enabled} autoFocus="first" loop={props.loop} orientation="vertical">
+        {contentNode}
+      </RovingFocusGroup>
+    </DismissableLayer>
+  );
+}
+
+export function MenuContent(props: MenuContentProps) {
+  const menuContext = useMenuContext();
+  const open = menuContext.open;
+  const forceMount = props.forceMount === true;
+  const loop = props.loop ?? true;
+
+  const handleDismiss = React.useCallback(() => {
+    menuContext.setOpen(false);
+  }, [menuContext.setOpen]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <MenuContentImpl
+        asChild={props.asChild}
+        enabled={open}
+        loop={loop}
+        offset={props.offset}
+        onDismiss={handleDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+        padding={props.padding}
+        placement={props.placement}
+        visible={open}
+      >
+        {props.children}
+      </MenuContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <MenuContentImpl
+          asChild={props.asChild}
+          enabled={state.isPresent}
+          loop={loop}
+          offset={props.offset}
+          onDismiss={handleDismiss}
+          onEscapeKeyDown={props.onEscapeKeyDown}
+          onInteractOutside={props.onInteractOutside}
+          onPointerDownOutside={props.onPointerDownOutside}
+          padding={props.padding}
+          placement={props.placement}
+          visible={state.isPresent}
+        >
+          {props.children}
+        </MenuContentImpl>
+      )}
+    />
+  );
+}

package/src/Menu/MenuGroup.tsx

@@ -0,0 +1,24 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { MenuGroupProps } from "./types";
+
+export function MenuGroup(props: MenuGroupProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[MenuGroup] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <frame BackgroundTransparency={1} Size={UDim2.fromOffset(220, 0)}>
+      <uilistlayout
+        FillDirection={Enum.FillDirection.Vertical}
+        Padding={new UDim(0, 4)}
+        SortOrder={Enum.SortOrder.LayoutOrder}
+      />
+      {props.children}
+    </frame>
+  );
+}

package/src/Menu/MenuItem.tsx

@@ -0,0 +1,72 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useMenuContext } from "./context";
+import type { MenuItemProps, MenuSelectEvent } from "./types";
+
+function createMenuSelectEvent(): MenuSelectEvent {
+  const event: MenuSelectEvent = {
+    defaultPrevented: false,
+    preventDefault: () => {
+      event.defaultPrevented = true;
+    },
+  };
+
+  return event;
+}
+
+export function MenuItem(props: MenuItemProps) {
+  const menuContext = useMenuContext();
+
+  const handleActivated = React.useCallback(() => {
+    if (props.disabled) {
+      return;
+    }
+
+    const event = createMenuSelectEvent();
+    props.onSelect?.(event);
+
+    if (!event.defaultPrevented) {
+      menuContext.setOpen(false);
+    }
+  }, [menuContext, props.disabled, props.onSelect]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[MenuItem] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={props.disabled}>
+        <Slot
+          Active={props.disabled !== true}
+          Event={{ Activated: handleActivated }}
+          Selectable={props.disabled !== true}
+        >
+          {child}
+        </Slot>
+      </RovingFocusItem>
+    );
+  }
+
+  return (
+    <RovingFocusItem asChild disabled={props.disabled}>
+      <textbutton
+        Active={props.disabled !== true}
+        AutoButtonColor={false}
+        BackgroundColor3={Color3.fromRGB(47, 53, 68)}
+        BorderSizePixel={0}
+        Event={{ Activated: handleActivated }}
+        Selectable={props.disabled !== true}
+        Size={UDim2.fromOffset(220, 34)}
+        Text="Menu Item"
+        TextColor3={props.disabled ? Color3.fromRGB(135, 142, 156) : Color3.fromRGB(234, 239, 247)}
+        TextSize={15}
+        TextXAlignment={Enum.TextXAlignment.Left}
+      >
+        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+        {props.children}
+      </textbutton>
+    </RovingFocusItem>
+  );
+}

package/src/Menu/MenuLabel.tsx

@@ -0,0 +1,27 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { MenuLabelProps } from "./types";
+
+export function MenuLabel(props: MenuLabelProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[MenuLabel] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <textlabel
+      BackgroundTransparency={1}
+      Size={UDim2.fromOffset(220, 24)}
+      Text="Label"
+      TextColor3={Color3.fromRGB(162, 173, 191)}
+      TextSize={14}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} />
+      {props.children}
+    </textlabel>
+  );
+}

package/src/Menu/MenuPortal.tsx

@@ -0,0 +1,28 @@
+import { React } from "@lattice-ui/core";
+import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
+import type { MenuPortalProps } from "./types";
+
+function MenuPortalWithOverrides(props: MenuPortalProps) {
+  const portalContext = usePortalContext();
+  const container = props.container ?? portalContext.container;
+  const displayOrderBase = props.displayOrderBase ?? portalContext.displayOrderBase;
+
+  return (
+    <PortalProvider container={container} displayOrderBase={displayOrderBase}>
+      <Portal>{props.children}</Portal>
+    </PortalProvider>
+  );
+}
+
+export function MenuPortal(props: MenuPortalProps) {
+  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
+  if (hasOverrides) {
+    return (
+      <MenuPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
+        {props.children}
+      </MenuPortalWithOverrides>
+    );
+  }
+
+  return <Portal>{props.children}</Portal>;
+}

package/src/Menu/MenuRoot.tsx

@@ -0,0 +1,35 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { MenuContextProvider } from "./context";
+import type { MenuProps } from "./types";
+
+export function Menu(props: MenuProps) {
+  const [open, setOpenState] = useControllableState<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+  });
+  const modal = props.modal ?? true;
+
+  const triggerRef = React.useRef<GuiObject>();
+  const contentRef = React.useRef<GuiObject>();
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpenState(nextOpen);
+    },
+    [setOpenState],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      modal,
+      triggerRef,
+      contentRef,
+    }),
+    [modal, open, setOpen],
+  );
+
+  return <MenuContextProvider value={contextValue}>{props.children}</MenuContextProvider>;
+}

package/src/Menu/MenuSeparator.tsx

@@ -0,0 +1,15 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { MenuSeparatorProps } from "./types";
+
+export function MenuSeparator(props: MenuSeparatorProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[MenuSeparator] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return <frame BackgroundColor3={Color3.fromRGB(72, 79, 97)} BorderSizePixel={0} Size={UDim2.fromOffset(220, 1)} />;
+}

package/src/Menu/MenuTrigger.tsx

@@ -0,0 +1,61 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useMenuContext } from "./context";
+import type { MenuTriggerProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function MenuTrigger(props: MenuTriggerProps) {
+  const menuContext = useMenuContext();
+
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      menuContext.triggerRef.current = toGuiObject(instance);
+    },
+    [menuContext.triggerRef],
+  );
+
+  const handleActivated = React.useCallback(() => {
+    if (props.disabled) {
+      return;
+    }
+
+    menuContext.setOpen(!menuContext.open);
+  }, [menuContext.open, menuContext.setOpen, props.disabled]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[MenuTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Event={{ Activated: handleActivated }} ref={setTriggerRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={props.disabled !== true}
+      AutoButtonColor={false}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Event={{ Activated: handleActivated }}
+      Selectable={props.disabled !== true}
+      Size={UDim2.fromOffset(140, 38)}
+      Text="Toggle Menu"
+      TextColor3={Color3.fromRGB(240, 244, 250)}
+      TextSize={16}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Menu/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { MenuContextValue } from "./types";
+
+const [MenuContextProvider, useMenuContext] = createStrictContext<MenuContextValue>("Menu");
+
+export { MenuContextProvider, useMenuContext };

package/src/Menu/types.ts

@@ -0,0 +1,73 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+
+export type MenuSetOpen = (open: boolean) => void;
+
+export type MenuContextValue = {
+  open: boolean;
+  setOpen: MenuSetOpen;
+  modal: boolean;
+  triggerRef: React.MutableRefObject<GuiObject | undefined>;
+  contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+
+export type MenuProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  children?: React.ReactNode;
+};
+
+export type MenuTriggerProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type MenuPortalProps = {
+  container?: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type MenuContentProps = {
+  asChild?: boolean;
+  forceMount?: boolean;
+  placement?: PopperPlacement;
+  offset?: Vector2;
+  padding?: number;
+  loop?: boolean;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  children?: React.ReactNode;
+};
+
+export type MenuSelectEvent = {
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+};
+
+export type MenuItemProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  onSelect?: (event: MenuSelectEvent) => void;
+  children?: React.ReactElement;
+};
+
+export type MenuSeparatorProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type MenuGroupProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type MenuLabelProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+export { MenuContent } from "./Menu/MenuContent";
+export { MenuGroup } from "./Menu/MenuGroup";
+export { MenuItem } from "./Menu/MenuItem";
+export { MenuLabel } from "./Menu/MenuLabel";
+export { MenuPortal } from "./Menu/MenuPortal";
+export { Menu } from "./Menu/MenuRoot";
+export { MenuSeparator } from "./Menu/MenuSeparator";
+export { MenuTrigger } from "./Menu/MenuTrigger";
+export type {
+  MenuContentProps,
+  MenuGroupProps,
+  MenuItemProps,
+  MenuLabelProps,
+  MenuPortalProps,
+  MenuProps,
+  MenuSelectEvent,
+  MenuSeparatorProps,
+  MenuTriggerProps,
+} from "./Menu/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}