@delacour/react-native-ui 0.1.0-alpha.20261007130133 → 0.1.0-alpha.20261009010458

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.20261007130133",
+	"version": "0.1.0-alpha.20261009010458",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -56,6 +56,7 @@
 		"./kpi": "./src/components/kpi/index.ts",
 		"./label": "./src/components/label/index.ts",
 		"./list-group": "./src/components/list-group/index.ts",
+		"./menu": "./src/components/menu/index.ts",
 		"./meter": "./src/components/meter/index.ts",
 		"./overlay": "./src/components/overlay/index.ts",
 		"./popover": "./src/components/popover/index.ts",
@@ -69,6 +70,7 @@
 		"./skeleton": "./src/components/skeleton/index.ts",
 		"./slider": "./src/components/slider/index.ts",
 		"./spinner": "./src/components/spinner/index.ts",
+		"./stack-card": "./src/components/stack-card/index.ts",
 		"./steps": "./src/components/steps/index.ts",
 		"./surface": "./src/components/surface/index.ts",
 		"./swipe": "./src/components/swipe/index.ts",
@@ -109,8 +111,8 @@
 	},
 	"peerDependencies": {
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261007130133",
-		"@delacour/react-native-charts": "0.1.0-alpha.20261007130133",
+		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261009010458",
+		"@delacour/react-native-charts": "0.1.0-alpha.20261009010458",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",

package/src/components/menu/AGENTS.md

@@ -0,0 +1,172 @@
+# Menu
+
+A list of **verbs** dropped from a control that exists to open it — a ⋯ button,
+a toolbar item. Rename, duplicate, share, delete. A menu is not a select: its
+rows run actions, they never become the trigger's value. Compound root plus
+`Menu.Trigger`, `Menu.Content`, `Menu.Background`, `Menu.Label`, `Menu.Item`,
+`Menu.CheckboxItem`, `Menu.RadioGroup`, `Menu.RadioItem`, `Menu.Separator`,
+`Menu.Sub`, `Menu.SubTrigger` and `Menu.SubContent`.
+
+`import { Menu } from "@delacour/react-native-ui/menu";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/menu` |
+| `menu.tsx` | Root — `useMenuRootValue` into `MenuRootProvider`; the `Object.assign` |
+| `menu-trigger.tsx` | `Menu.Trigger` — measures itself and toggles; `asChild` donates the press |
+| `menu-content.tsx` | `Menu.Content` — the transparent `Modal`, the outside-tap layer, the placed and animated panel, the scroller |
+| `menu-background.tsx` | `Menu.Background` — the `bg-popover` surface behind the scroller |
+| `menu-label.tsx` | `Menu.Label` — a section heading |
+| `menu-item.tsx` | `MenuRow`, the row every row is built on, and `Menu.Item` |
+| `menu-checkbox-item.tsx` | `Menu.CheckboxItem` |
+| `menu-radio-group.tsx` | `Menu.RadioGroup` — holds the value |
+| `menu-radio-item.tsx` | `Menu.RadioItem` |
+| `menu-separator.tsx` | `Menu.Separator` — `Separator` with `my-1` |
+| `menu-sub.tsx` | `Menu.Sub` — the submenu's open state, `progress` and measured height |
+| `menu-sub-trigger.tsx` | `Menu.SubTrigger` — the row with the turning chevron |
+| `menu-sub-content.tsx` | `Menu.SubContent` — the measured clip |
+| `menu.context.tsx` | The menu, submenu and radio-group contexts; `useMenu`, `useMenuRootValue`, `MenuRootProvider` |
+| `menu.types.ts` | `MenuItemProps`, shared by every row |
+| `menu.variants.ts` | The slotted `tv()`, the constants and the pure resolvers — no RN imports |
+| `menu.variants.test.ts` | Placement (flip, cap, clamp, RTL, the zero-size anchor), width, close rules, accessibility, tokens |
+
+## The panel
+
+- **It is a minimal anchored panel built here, not a Popover.** There is no
+  Popover in the package yet. `Menu.Content` renders inside a transparent RN
+  `Modal` — top-most layer, Android back through `onRequestClose`, screen-reader
+  containment — so it needs no new peer. **When Popover lands, Menu.Content moves
+  onto it and `resolveMenuPlacement` moves with it.** The resolver is exported
+  for exactly that.
+- **Placement takes a rect, never a ref.** `resolveMenuPlacement({ anchor, content,
+  window, insets, placement, align, offset, isRTL })` places against
+  `{ x, y, width, height }`, so a zero-size point — ContextMenu's long-press —
+  goes through the same arithmetic with no special case, and a test proves it.
+- **Flip, then cap.** The requested side wins when the content fits; otherwise
+  the other side if it fits there; otherwise the larger side, and `maxHeight`
+  caps it so the rows scroll. Room is measured inside the safe area plus an 8pt
+  margin, and the panel is clamped horizontally inside the same bounds. `align`
+  start and end swap under RTL.
+- **Measure, place, show.** The panel's first frame is at opacity 0; the
+  scroller's `onContentSizeChange` reports the rows' height, placement runs with
+  it, and only then does the enter start — there is no jump.
+- **The side is locked for the visit.** A submenu expanding mid-visit must not
+  flip the panel under the finger. A panel above the anchor is positioned by
+  its **bottom** edge (`MenuPlacementResult.bottom`), so it grows upward, away
+  from the anchor, with nothing re-placed; past the cap the rows scroll.
+- **Its surface is `bg-popover`, never `bg-overlay`.** `overlay` is the
+  translucent scrim colour (`oklch(0 0 0 / 45%)`); a panel in it is a
+  see-through card. `hasScrim` (ContextMenu sets it) draws `bg-overlay` behind
+  the panel, fading with it.
+- **The shadow is on an outer layer with no clip.** iOS clips a shadow to a
+  clipping view's bounds, so `panel` casts `shadow-lg` and the inner `content`
+  slot carries the corner, the hairline and `overflow-hidden`.
+- **A caller's `Menu.Background` is lifted out by type** and drawn behind the
+  scroller, so it stays put while the rows scroll. The default is drawn when
+  there is none.
+- **Enter 160ms, exit 120ms**, opacity with a 0.96 scale from the anchor's side.
+  React Native has no animatable transform origin on both platforms, so
+  `resolveMenuOrigin` approximates it with a translate that falls to zero as the
+  panel arrives. Under reduced motion it is opacity alone — the panel still
+  appears, so the information is not lost. The `Modal` unmounts when the exit's
+  timing finishes; a reopen mid-exit cancels it and runs the enter instead.
+- **Gesture Handler needs its own root inside a `Modal`.** On Android a `Modal`
+  is a separate window the app's root view cannot see into, so every tap in the
+  panel would be dead. `Menu.Content` wraps its tree in a `GestureHandlerRootView`.
+
+## Rows
+
+- **One row, `MenuRow`, under every row kind.** `Menu.Item`, `CheckboxItem`,
+  `RadioItem` and `SubTrigger` are `MenuRow` with a `kind`, a leading override
+  and an `accessibilityState`. Four hand-rolled rows would be four press fills
+  that drift.
+- **The press fill is the row's background.** An absolute `bg-accent` layer
+  (`bg-destructive-soft` on a destructive row) fades in over 90ms and out over
+  160ms while the row dips to 0.98 — one shared value for both. There is no
+  wash or ripple on top. A row is built on its own Gesture Handler tap rather
+  than `Pressable`, because `Pressable` owns its `pressed` value privately and
+  the fill has to read it.
+- **Under reduced motion the fill snaps and the scale does not run.** The
+  scale is movement and goes; the fill is colour, and it is what says the tap
+  landed, so it stays — instantly.
+- **A tap that travels is a scroll.** The tap fails past 10pt
+  (`MENU_TAP_MAX_DISTANCE`), so a long menu scrolls without choosing the row the
+  finger started on.
+- **Rows take `ViewProps`, not `PressableProps`.** The spec sketched
+  `Omit<PressableProps, …>`, but a row ignores `feedback`, `asChild`, `busy` and
+  the rest; a type that accepts props it drops is a quiet bug. `isDisabled` is
+  the row's own.
+- **Close rules live in one resolver.** `resolveCloseOnSelect(kind, explicit?)`:
+  item and radio close, checkbox and sub-trigger stay open; an explicit
+  `isClosedOnSelect` wins. `resolveRadioNext` pins that re-choosing a selected
+  radio keeps it — a radio never clears.
+- **A checkbox's tick and a radio's mark take the leading icon column**, so the
+  labels of every row line up; an `icon` on those rows moves to the trailing
+  edge. `isInset` reserves the same column on a plain row, and on a `Menu.Label`.
+- **The icon column is 18pt, `size-icon-md`.** The spec named `size-icon-sm`,
+  which is 16pt in `tokens.css`; the 18pt it also named wins, since that is the
+  footprint `isInset` and the label's `ps-[42px]` (12 + 18 + 12) are built on.
+- **Haptics are the root's `haptic`, played on select**, from the tap's worklet,
+  and off by default.
+
+## Submenus
+
+- **They expand in place, never fly out.** A phone has no room beside the
+  panel, and a second layer over the first hides where the user came from.
+  `Menu.SubContent` is `Collapsible.Content`'s measured clip — restated, not
+  imported, so `delacour add menu` copies one folder — and `MENU_SUB_SPRING` is
+  `Collapsible`'s spring.
+- **The chevron turns 90° off the submenu's own `progress`**, so it and the
+  height cannot drift. Under RTL it is mirrored with `scaleX: -1` on a wrapper
+  view, so it points to the trailing edge and still turns downward; the
+  rotation lives on the inner view.
+- **Nothing on the JS thread reads `contentHeight.value`** — the accordion's
+  Release-build bug. "Measured" is React state.
+
+## State
+
+- **`isOpen` / `defaultOpen` / `onOpenChange` through `useControllableState`**,
+  in `useMenuRootValue`. `open(anchor?)` opens at a rect, or measures the
+  trigger first; `close()`; `toggle()`. Callbacks are ref-backed so the context
+  keeps its identity.
+- **A controlled open is measured too.** A parent flipping `isOpen` to `true`
+  without a trigger press still gets the trigger measured, by an effect that
+  tells such an open from one `open()` started.
+- **`Menu.Trigger asChild` donates the press**, `BottomSheet.Trigger`'s rule: a
+  `Button` wrapped in a pressable trigger would win the touch and the menu
+  would never open. The child gets `onPress`, the measured ref and the
+  accessibility props through `Slot`.
+
+## Accessibility
+
+- Content: `accessibilityRole="menu"`, `accessibilityViewIsModal`.
+- Rows: `accessibilityRole="menuitem"`; checkbox → `checked`, radio →
+  `selected`, sub-trigger → `expanded`, all → `disabled`. One source:
+  `resolveMenuItemAccessibility`, a discriminated union on `kind`.
+- Trigger: `accessibilityState={{ expanded }}`, hint "Opens a menu".
+- A closed submenu is out of the accessibility tree, not just clipped.
+
+## Reuse contract for ContextMenu
+
+ContextMenu renders this component's rows and panel rather than a copy:
+
+- **Import leaves, never `../menu`.** `../menu/menu-item` (`MenuRow`,
+  `MenuItem`), `../menu/menu-content`, `../menu/menu.context` and
+  `../menu/menu.variants` are each importable on their own. None imports
+  `./menu`, so no cycle can close (rule 3).
+- **Drive the state with your own anchor.** Build a value with
+  `useMenuRootValue(...)`, wrap your tree in `MenuRootProvider`, and call
+  `open({ x, y, width: 0, height: 0 })` from the long-press. Or pass
+  `anchor` straight to `Menu.Content`.
+- **`hasScrim`** tints the screen behind the panel; **`iconPlacement="trailing"`**
+  puts a row's icon at its end.
+
+## Out of scope
+
+- **`presentation="bottom-sheet"`.** Importing `../bottom-sheet` would force the
+  optional sheet engine and `react-native-teleport` on every Menu consumer. A
+  follow-up.
+- **Keyboard navigation and focus return on web.**
+- **Typeahead, and rows that open a second panel.**

package/src/components/menu/index.ts

@@ -0,0 +1,44 @@
+export { Menu, type MenuProps } from "./menu";
+export {
+	type MenuContextValue,
+	type MenuMeasurable,
+	MenuRootProvider,
+	type UseMenuRootValueOptions,
+	useMenu,
+	useMenuRootValue,
+} from "./menu.context";
+export type { MenuItemProps } from "./menu.types";
+export {
+	MENU_ALIGNS,
+	MENU_DEFAULT_MIN_WIDTH,
+	MENU_DEFAULT_OFFSET,
+	MENU_EDGE_MARGIN,
+	MENU_ITEM_VARIANTS,
+	MENU_PLACEMENTS,
+	MENU_RADIO_INDICATORS,
+	type MenuAlign,
+	type MenuAnchorRect,
+	type MenuInsets,
+	type MenuItemVariant,
+	type MenuPlacement,
+	type MenuPlacementInput,
+	type MenuPlacementResult,
+	type MenuRadioIndicator,
+	type MenuVariantProps,
+	menuVariants,
+	resolveCloseOnSelect,
+	resolveMenuPlacement,
+	resolveMenuWidth,
+	resolveRadioNext,
+} from "./menu.variants";
+export type { MenuBackgroundProps } from "./menu-background";
+export type { MenuCheckboxItemProps } from "./menu-checkbox-item";
+export type { MenuContentProps } from "./menu-content";
+export type { MenuLabelProps } from "./menu-label";
+export type { MenuRadioGroupProps } from "./menu-radio-group";
+export type { MenuRadioItemProps } from "./menu-radio-item";
+export type { MenuSeparatorProps } from "./menu-separator";
+export type { MenuSubProps } from "./menu-sub";
+export type { MenuSubContentProps } from "./menu-sub-content";
+export type { MenuSubTriggerProps } from "./menu-sub-trigger";
+export type { MenuTriggerProps } from "./menu-trigger";

package/src/components/menu/menu-background.tsx

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { menuVariants } from "./menu.variants";
+
+export type MenuBackgroundProps = ViewProps & { className?: string };
+
+/**
+ * The panel's surface: an absolute-fill layer in `bg-popover`, behind the rows.
+ *
+ * `Menu.Content` draws one by default. Pass your own as a child of
+ * `Menu.Content` to repaint it — the content lifts it out of the children and
+ * renders it outside the scroller, where it stays put while the rows scroll.
+ */
+export function MenuBackground({ className, ...props }: MenuBackgroundProps): ReactElement {
+	return <View className={menuVariants().background({ className })} pointerEvents="none" {...props} />;
+}
+MenuBackground.displayName = "DelacourUI.Menu.Background";

package/src/components/menu/menu-checkbox-item.tsx

@@ -0,0 +1,57 @@
+import type { ReactElement } from "react";
+import { View } from "react-native";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { IconCheckmark1 } from "../../icons/central";
+import { Icon } from "../icon";
+import type { MenuItemProps } from "./menu.types";
+import { MENU_INDICATOR_TOKEN, menuVariants, resolveMenuItemAccessibility } from "./menu.variants";
+import { MenuRow } from "./menu-item";
+
+export type MenuCheckboxItemProps = Omit<MenuItemProps, "onSelect" | "isClosedOnSelect"> & {
+	isChecked?: boolean;
+	defaultChecked?: boolean;
+	onCheckedChange?: (isChecked: boolean) => void;
+	/** Whether choosing the row closes the menu. Default `false` — several are usually toggled in one visit. */
+	isClosedOnSelect?: boolean;
+};
+
+/**
+ * A row that toggles a setting, with a tick in the icon column while it is on.
+ *
+ * Stays open on select by default. The tick takes the leading column, so an
+ * `icon` moves to the row's end. Announced as `checked`.
+ *
+ * @example
+ * <Menu.CheckboxItem isChecked={showDone} onCheckedChange={setShowDone}>Completed</Menu.CheckboxItem>
+ */
+export function MenuCheckboxItem({
+	isChecked: isCheckedProp,
+	defaultChecked = false,
+	onCheckedChange,
+	isDisabled = false,
+	...props
+}: MenuCheckboxItemProps): ReactElement {
+	const [isChecked, setChecked] = useControllableState<boolean>({
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange,
+		value: isCheckedProp,
+	});
+	const slots = menuVariants();
+
+	return (
+		<MenuRow
+			accessibilityState={resolveMenuItemAccessibility({ isChecked, isDisabled, kind: "checkbox" })}
+			isDisabled={isDisabled}
+			kind="checkbox"
+			leading={
+				<View className={slots.indicator()}>
+					{isChecked ? <Icon className={slots.itemIcon()} color={MENU_INDICATOR_TOKEN} icon={IconCheckmark1} /> : null}
+				</View>
+			}
+			onSelect={() => setChecked(!isChecked)}
+			{...props}
+			iconPlacement="trailing"
+		/>
+	);
+}
+MenuCheckboxItem.displayName = "DelacourUI.Menu.CheckboxItem";

package/src/components/menu/menu-content.tsx

@@ -0,0 +1,286 @@
+import {
+	Children,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import { I18nManager, Modal, ScrollView, useWindowDimensions, View, type ViewProps } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { Pressable } from "../pressable";
+import { useMenuPart } from "./menu.context";
+import {
+	MENU_DEFAULT_OFFSET,
+	MENU_EDGE_MARGIN,
+	MENU_ENTER_SCALE,
+	MENU_MOTION,
+	type MenuAlign,
+	type MenuAnchorRect,
+	type MenuPlacement,
+	type MenuPlacementResult,
+	menuVariants,
+	resolveMenuOrigin,
+	resolveMenuPhysicalAlign,
+	resolveMenuPlacement,
+	resolveMenuWidth,
+} from "./menu.variants";
+import { MenuBackground } from "./menu-background";
+
+export type MenuContentProps = Omit<ViewProps, "children"> & {
+	children: ReactNode;
+	className?: string;
+	/** The side it prefers. Default `bottom`; flips when there is no room. */
+	placement?: MenuPlacement;
+	/** Which edge lines up with the anchor's. Default `start`; swaps under RTL. */
+	align?: MenuAlign;
+	/** Gap from the anchor, in points. Default 6. */
+	offset?: number;
+	/** Panel width. Default: the trigger's width, at least 200. */
+	width?: number;
+	minWidth?: number;
+	/** Cap on the panel's height. Default: the room inside the safe area. */
+	maxHeight?: number;
+	/** Scroll rows past the cap. Default `true`; `false` clips instead. */
+	isScrollable?: boolean;
+	/** Tint the screen behind the panel. Default `false`. */
+	hasScrim?: boolean;
+	/** Anchor to this rect instead of the trigger. A zero-size rect is a point. */
+	anchor?: MenuAnchorRect;
+};
+
+/**
+ * The panel: a transparent `Modal` holding an anchored, scrolling list of rows.
+ *
+ * **The `Modal` is the layer.** It sits above everything, routes Android's back
+ * button to `onRequestClose`, and contains a screen reader — with no new
+ * dependency. A transparent full-screen pressable behind the panel closes it on
+ * an outside tap.
+ *
+ * **It measures, then places, then shows.** The first frame renders at opacity
+ * 0; once the rows report their height, `resolveMenuPlacement` picks the side,
+ * and the enter runs from there — so the panel never jumps. The side is then
+ * locked for the visit: a submenu expanding later grows the panel away from the
+ * anchor (a panel above is positioned by its bottom edge) and scrolls past the
+ * cap rather than flipping under the finger.
+ *
+ * **Enter is 160ms, exit 120ms**: opacity with a 0.96 scale from the anchor's
+ * side, approximated with a translate. Under reduced motion, opacity alone. The
+ * `Modal` unmounts when the exit finishes.
+ *
+ * A caller's `Menu.Background` child is lifted out and drawn behind the
+ * scroller in place of the default one.
+ */
+export function MenuContent({
+	children,
+	className,
+	placement = "bottom",
+	align = "start",
+	offset = MENU_DEFAULT_OFFSET,
+	width,
+	minWidth,
+	maxHeight: maxHeightProp,
+	isScrollable = true,
+	hasScrim = false,
+	anchor: anchorProp,
+	...props
+}: MenuContentProps): ReactElement | null {
+	const { anchor: contextAnchor, close, isOpen } = useMenuPart("Menu.Content");
+	const anchor = anchorProp ?? contextAnchor;
+	const window = useWindowDimensions();
+	const insets = useSafeAreaInsets();
+	const isReducedMotion = useReducedMotion();
+	const slots = menuVariants();
+
+	// Adjusted during render, so the Modal mounts in the commit that opened it.
+	const [isPresent, setPresent] = useState(isOpen);
+	if (isOpen && !isPresent) setPresent(true);
+
+	const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
+	const [locked, setLocked] = useState<MenuPlacementResult | null>(null);
+
+	const { background, rows } = useMemo(() => splitBackground(children), [children]);
+
+	const resolvedWidth = resolveMenuWidth({
+		maxWidth: window.width - insets.left - insets.right - MENU_EDGE_MARGIN * 2,
+		minWidth,
+		triggerWidth: anchor?.width ?? 0,
+		width,
+	});
+
+	const resolve = useCallback(
+		(height: number) =>
+			anchor
+				? resolveMenuPlacement({
+						align,
+						anchor,
+						content: { height, width: resolvedWidth },
+						insets,
+						isRTL: I18nManager.isRTL,
+						offset,
+						placement,
+						window: { height: window.height, width: window.width },
+					})
+				: null,
+		[align, anchor, insets, offset, placement, resolvedWidth, window.height, window.width]
+	);
+
+	// Placed once per visit, from the first measurement taken with an anchor.
+	useEffect(() => {
+		if (!isOpen || locked || measuredHeight === null) return;
+		const result = resolve(measuredHeight);
+		if (result) setLocked(result);
+	}, [isOpen, locked, measuredHeight, resolve]);
+
+	const handleContentSize = useCallback((_width: number, height: number) => setMeasuredHeight(height), []);
+
+	const handleExited = useCallback(() => {
+		setPresent(false);
+		setLocked(null);
+		setMeasuredHeight(null);
+	}, []);
+
+	const progress = useSharedValue(0);
+
+	useEffect(() => {
+		if (isOpen) {
+			if (!locked) return;
+			progress.value = withTiming(1, { duration: MENU_MOTION.enterMs });
+			return;
+		}
+		if (!isPresent) return;
+		progress.value = withTiming(0, { duration: MENU_MOTION.exitMs }, (isFinished) => {
+			"worklet";
+			if (isFinished) scheduleOnRN(handleExited);
+		});
+	}, [handleExited, isOpen, isPresent, locked, progress]);
+
+	const { cap, origin, position } = resolvePanelFrame({
+		align,
+		maxHeight: maxHeightProp,
+		measuredHeight,
+		placed: locked ?? resolve(measuredHeight ?? 0),
+		placement,
+		width: resolvedWidth,
+		windowHeight: window.height,
+	});
+	const originX = origin.x;
+	const originY = origin.y;
+	const enterScale = MENU_ENTER_SCALE;
+
+	const panelStyle = useAnimatedStyle(() => {
+		const p = progress.value;
+		if (isReducedMotion) return { opacity: p, transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }] };
+		return {
+			opacity: p,
+			transform: [
+				{ translateX: originX * (1 - p) },
+				{ translateY: originY * (1 - p) },
+				{ scale: enterScale + (1 - enterScale) * p },
+			],
+		};
+	});
+	const scrimStyle = useAnimatedStyle(() => ({ opacity: progress.value }));
+
+	if (!isPresent) return null;
+
+	return (
+		<Modal animationType="none" onRequestClose={close} statusBarTranslucent transparent visible>
+			<GestureHandlerRootView style={fill}>
+				<Pressable
+					accessibilityLabel="Close menu"
+					className="absolute inset-0"
+					feedback="none"
+					importantForAccessibility="no"
+					onPress={close}
+				>
+					{hasScrim ? <Animated.View className={slots.scrim()} style={scrimStyle} /> : null}
+				</Pressable>
+				<Animated.View
+					accessibilityRole="menu"
+					accessibilityViewIsModal
+					className={slots.panel()}
+					pointerEvents={locked ? "auto" : "none"}
+					style={[position, panelStyle]}
+					{...props}
+				>
+					<View className={slots.content({ className })}>
+						{background ?? <MenuBackground />}
+						<ScrollView
+							bounces={false}
+							contentContainerClassName={slots.scroll()}
+							onContentSizeChange={handleContentSize}
+							scrollEnabled={isScrollable}
+							showsVerticalScrollIndicator
+							style={{ flexGrow: 0, maxHeight: cap }}
+						>
+							{rows}
+						</ScrollView>
+					</View>
+				</Animated.View>
+			</GestureHandlerRootView>
+		</Modal>
+	);
+}
+MenuContent.displayName = "DelacourUI.Menu.Content";
+
+const fill = { flex: 1 };
+
+type PanelFrameInput = {
+	align: MenuAlign;
+	maxHeight: number | undefined;
+	measuredHeight: number | null;
+	placed: MenuPlacementResult | null;
+	placement: MenuPlacement;
+	width: number;
+	windowHeight: number;
+};
+
+/** The panel's height cap, its absolute position, and the side its enter grows from. */
+function resolvePanelFrame({
+	align,
+	maxHeight,
+	measuredHeight,
+	placed,
+	placement,
+	width,
+	windowHeight,
+}: PanelFrameInput): {
+	cap: number;
+	origin: { x: number; y: number };
+	position: { top?: number; bottom?: number; left: number; width: number };
+} {
+	const cap = Math.min(maxHeight ?? Number.POSITIVE_INFINITY, placed?.maxHeight ?? windowHeight);
+	const origin = resolveMenuOrigin({
+		align: resolveMenuPhysicalAlign(align, I18nManager.isRTL),
+		height: Math.min(measuredHeight ?? 0, cap),
+		placement: placed?.placement ?? placement,
+		width,
+	});
+	const position =
+		placed?.placement === "top"
+			? { bottom: placed.bottom, left: placed.left, width }
+			: { left: placed?.left ?? 0, top: placed?.top ?? 0, width };
+	return { cap, origin, position };
+}
+
+/** Lifts a caller's `Menu.Background` out of the rows, so it is drawn behind the scroller. */
+function splitBackground(children: ReactNode): { background: ReactElement | null; rows: ReactNode[] } {
+	let background: ReactElement | null = null;
+	const rows: ReactNode[] = [];
+
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === MenuBackground) {
+			background = child;
+			continue;
+		}
+		rows.push(child);
+	}
+
+	return { background, rows };
+}