@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0

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

@@ -0,0 +1,303 @@
+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;
+	/**
+	 * Drawn inside the `Modal`, over the scrim and behind the panel, fading with
+	 * them. It takes no touches — a tap on it is an outside tap. ContextMenu's
+	 * lifted preview is the reason it exists.
+	 */
+	backdrop?: ReactNode;
+};
+
+/**
+ * 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,
+	backdrop,
+	...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>
+				{backdrop ? (
+					<Animated.View
+						className={slots.backdrop()}
+						importantForAccessibility="no-hide-descendants"
+						pointerEvents="none"
+						style={scrimStyle}
+					>
+						{backdrop}
+					</Animated.View>
+				) : null}
+				<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 };
+}

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

@@ -0,0 +1,162 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo, useRef } from "react";
+import { type AccessibilityState, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { Icon } from "../icon";
+import { playHaptic } from "../pressable/pressable";
+import { Text } from "../text";
+import { useMenuPart } from "./menu.context";
+import type { MenuItemProps } from "./menu.types";
+import {
+	MENU_ICON_TOKEN,
+	MENU_PRESS,
+	MENU_TAP_MAX_DISTANCE,
+	type MenuRowKind,
+	menuVariants,
+	resolveCloseOnSelect,
+	resolveMenuItemAccessibility,
+} from "./menu.variants";
+
+export type { MenuItemProps } from "./menu.types";
+
+export type MenuRowProps = MenuItemProps & {
+	/** Which kind of row this is — decides whether choosing it closes the menu. */
+	kind: MenuRowKind;
+	/** Replaces the leading icon column — a checkbox's tick, a radio's mark. */
+	leading?: ReactNode;
+	accessibilityState?: AccessibilityState;
+};
+
+/**
+ * The row every menu row is built on: the press fill, the scale, the label
+ * column, the icon, the shortcut and the trailing slot.
+ *
+ * **The fill is the row's background**, an absolute layer whose opacity a tap
+ * drives — 90ms in, 160ms out — while the row dips to 0.98. Both read one shared
+ * value on the UI thread. Under reduced motion the fill snaps and the scale does
+ * not run: the fill is colour, not movement, and it is what says the tap landed.
+ *
+ * **A tap that travels is a scroll**, so the tap fails past
+ * `MENU_TAP_MAX_DISTANCE` and a long menu scrolls without choosing a row.
+ *
+ * Exported from this leaf, not from `index.ts`, so ContextMenu can build on it
+ * with `import { MenuRow } from "../menu/menu-item"` without pulling the root.
+ */
+export function MenuRow({
+	kind,
+	leading,
+	children,
+	className,
+	icon,
+	iconPlacement = "leading",
+	description,
+	shortcut,
+	trailing,
+	variant = "default",
+	isInset = false,
+	isDisabled = false,
+	isClosedOnSelect,
+	onSelect,
+	accessibilityState,
+	...props
+}: MenuRowProps): ReactElement {
+	const { close, haptic } = useMenuPart("Menu.Item");
+	const isReducedMotion = useReducedMotion();
+	const slots = menuVariants({ isDisabled, isInset, variant });
+	const shouldClose = resolveCloseOnSelect(kind, isClosedOnSelect);
+
+	const selectRef = useRef(onSelect);
+	selectRef.current = onSelect;
+	const handleSelect = useCallback(() => {
+		selectRef.current?.();
+		if (shouldClose) close();
+	}, [close, shouldClose]);
+
+	const pressed = useSharedValue(0);
+	const inMs = isReducedMotion ? 0 : MENU_PRESS.inMs;
+	const outMs = isReducedMotion ? 0 : MENU_PRESS.outMs;
+	const pressedScale = isReducedMotion ? 1 : MENU_PRESS.scale;
+
+	const gesture = useMemo(
+		() =>
+			Gesture.Tap()
+				.enabled(!isDisabled)
+				.maxDistance(MENU_TAP_MAX_DISTANCE)
+				.shouldCancelWhenOutside(true)
+				.onBegin(() => {
+					"worklet";
+					pressed.value = withTiming(1, { duration: inMs });
+				})
+				.onEnd(() => {
+					"worklet";
+					if (haptic) playHaptic(haptic);
+					scheduleOnRN(handleSelect);
+				})
+				.onFinalize(() => {
+					"worklet";
+					pressed.value = withTiming(0, { duration: outMs });
+				}),
+		[handleSelect, haptic, inMs, isDisabled, outMs, pressed]
+	);
+
+	const rowStyle = useAnimatedStyle(() => ({
+		transform: [{ scale: 1 - pressed.value * (1 - pressedScale) }],
+	}));
+	const fillStyle = useAnimatedStyle(() => ({ opacity: pressed.value }));
+
+	const glyph = icon ? <Icon className={slots.itemIcon()} color={MENU_ICON_TOKEN[variant]} icon={icon} /> : null;
+	const isLeadingIcon = iconPlacement === "leading";
+	const leadingNode =
+		leading ?? (isLeadingIcon && glyph ? glyph : isInset ? <View className={slots.indicator()} /> : null);
+	const label =
+		typeof children === "string" || typeof children === "number" ? (
+			<Text className={slots.itemLabel()} numberOfLines={1}>
+				{children}
+			</Text>
+		) : (
+			children
+		);
+
+	return (
+		<GestureDetector gesture={gesture}>
+			<Animated.View
+				accessibilityRole="menuitem"
+				accessibilityState={accessibilityState ?? resolveMenuItemAccessibility({ isDisabled, kind: "item" })}
+				accessible
+				className={slots.item({ className })}
+				style={rowStyle}
+				{...props}
+			>
+				<Animated.View className={slots.itemFill()} pointerEvents="none" style={fillStyle} />
+				{leadingNode}
+				<View className={slots.itemContent()}>
+					{label}
+					{description ? <Text className={slots.itemDescription()}>{description}</Text> : null}
+				</View>
+				{shortcut ? <Text className={slots.itemShortcut()}>{shortcut}</Text> : null}
+				{!isLeadingIcon ? glyph : null}
+				{trailing}
+			</Animated.View>
+		</GestureDetector>
+	);
+}
+MenuRow.displayName = "DelacourUI.Menu.Row";
+
+/**
+ * A verb: one row that runs `onSelect` and closes the menu.
+ *
+ * @example
+ * <Menu.Item icon={IconPencil} shortcut="⌘R" onSelect={rename}>Rename</Menu.Item>
+ */
+export function MenuItem({ isDisabled = false, ...props }: MenuItemProps): ReactElement {
+	return (
+		<MenuRow
+			accessibilityState={resolveMenuItemAccessibility({ isDisabled, kind: "item" })}
+			isDisabled={isDisabled}
+			kind="item"
+			{...props}
+		/>
+	);
+}
+MenuItem.displayName = "DelacourUI.Menu.Item";

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

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import { Text, type TextProps } from "../text";
+import { menuVariants } from "./menu.variants";
+
+export type MenuLabelProps = TextProps & {
+	/** Line up with rows that reserve the icon column. */
+	isInset?: boolean;
+};
+
+/** A section heading inside the panel. Not a row: it cannot be chosen. */
+export function MenuLabel({ isInset = false, className, ...props }: MenuLabelProps): ReactElement {
+	return <Text accessibilityRole="header" className={menuVariants({ isInset }).label({ className })} {...props} />;
+}
+MenuLabel.displayName = "DelacourUI.Menu.Label";

package/src/components/menu/menu-radio-group.tsx

@@ -0,0 +1,50 @@
+import { type ReactElement, useMemo } from "react";
+import { View, type ViewProps } from "react-native";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { type MenuRadioGroupContextValue, MenuRadioGroupProvider } from "./menu.context";
+import { resolveRadioNext } from "./menu.variants";
+
+export type MenuRadioGroupProps = ViewProps & {
+	value?: string;
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+};
+
+/**
+ * One choice from several, as rows. Holds the value; `Menu.RadioItem` rows read it.
+ *
+ * @example
+ * <Menu.RadioGroup value={density} onValueChange={setDensity}>
+ *   <Menu.RadioItem value="comfortable">Comfortable</Menu.RadioItem>
+ *   <Menu.RadioItem value="compact">Compact</Menu.RadioItem>
+ * </Menu.RadioGroup>
+ */
+export function MenuRadioGroup({
+	value: valueProp,
+	defaultValue,
+	onValueChange,
+	children,
+	...props
+}: MenuRadioGroupProps): ReactElement {
+	const [value, setValue] = useControllableState<string | undefined>({
+		defaultValue,
+		onChange: (next) => {
+			if (next !== undefined) onValueChange?.(next);
+		},
+		value: valueProp,
+	});
+
+	const context = useMemo<MenuRadioGroupContextValue>(
+		() => ({ select: (next) => setValue(resolveRadioNext(value, next)), value }),
+		[setValue, value]
+	);
+
+	return (
+		<MenuRadioGroupProvider value={context}>
+			<View accessibilityRole="radiogroup" {...props}>
+				{children}
+			</View>
+		</MenuRadioGroupProvider>
+	);
+}
+MenuRadioGroup.displayName = "DelacourUI.Menu.RadioGroup";

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

@@ -0,0 +1,57 @@
+import type { ReactElement } from "react";
+import { View } from "react-native";
+import { IconCheckmark1 } from "../../icons/central";
+import { Icon } from "../icon";
+import { useMenuRadioGroupPart } from "./menu.context";
+import type { MenuItemProps } from "./menu.types";
+import {
+	MENU_INDICATOR_TOKEN,
+	type MenuRadioIndicator,
+	menuVariants,
+	resolveMenuItemAccessibility,
+} from "./menu.variants";
+import { MenuRow } from "./menu-item";
+
+export type MenuRadioItemProps = Omit<MenuItemProps, "onSelect"> & {
+	value: string;
+	/** A tick, or a 6pt dot. Default `check`. */
+	indicator?: MenuRadioIndicator;
+};
+
+/**
+ * One option in a `Menu.RadioGroup`, marked in the icon column while selected.
+ *
+ * Closes the menu on select by default — a choice made is a visit finished.
+ * The mark takes the leading column, so an `icon` moves to the row's end.
+ * Announced as `selected`.
+ */
+export function MenuRadioItem({
+	value,
+	indicator = "check",
+	isDisabled = false,
+	...props
+}: MenuRadioItemProps): ReactElement {
+	const group = useMenuRadioGroupPart("Menu.RadioItem");
+	const isSelected = group.value === value;
+	const slots = menuVariants();
+
+	const mark =
+		indicator === "dot" ? (
+			<View className={slots.indicatorDot()} />
+		) : (
+			<Icon className={slots.itemIcon()} color={MENU_INDICATOR_TOKEN} icon={IconCheckmark1} />
+		);
+
+	return (
+		<MenuRow
+			accessibilityState={resolveMenuItemAccessibility({ isDisabled, isSelected, kind: "radio" })}
+			isDisabled={isDisabled}
+			kind="radio"
+			leading={<View className={slots.indicator()}>{isSelected ? mark : null}</View>}
+			onSelect={() => group.select(value)}
+			{...props}
+			iconPlacement="trailing"
+		/>
+	);
+}
+MenuRadioItem.displayName = "DelacourUI.Menu.RadioItem";

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

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { Separator, type SeparatorProps } from "../separator";
+import { menuVariants } from "./menu.variants";
+
+export type MenuSeparatorProps = Omit<SeparatorProps, "orientation">;
+
+/** A rule between groups of rows — `Separator`, spaced for the panel. */
+export function MenuSeparator({ className, ...props }: MenuSeparatorProps): ReactElement {
+	return <Separator className={menuVariants().separator({ className })} {...props} />;
+}
+MenuSeparator.displayName = "DelacourUI.Menu.Separator";

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

@@ -0,0 +1,72 @@
+import { type ReactElement, type ReactNode, useCallback, useState } from "react";
+import { type LayoutChangeEvent, StyleSheet, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useMenuSubPart } from "./menu.context";
+import { menuVariants } from "./menu.variants";
+
+export type MenuSubContentProps = Omit<ViewProps, "style"> & {
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * The rows a `Menu.Sub` discloses, expanding in place.
+ *
+ * `Collapsible.Content`'s measured clip: the outer view's height runs from zero
+ * to what the out-of-flow inner view reported, so the rows below follow through
+ * ordinary layout and the panel's scroller sees the new height. The rows mount
+ * on first open; a closed submenu leaves the accessibility tree and takes no
+ * touches.
+ */
+export function MenuSubContent({ className, children, ...props }: MenuSubContentProps): ReactElement {
+	const { contentHeight, isOpen, onMeasured, progress } = useMenuSubPart("Menu.SubContent");
+	const slots = menuVariants();
+
+	const [hasOpened, setHasOpened] = useState(isOpen);
+	if (isOpen && !hasOpened) setHasOpened(true);
+
+	const [isMeasured, setMeasured] = useState(false);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			contentHeight.value = event.nativeEvent.layout.height;
+			if (isMeasured) return;
+			setMeasured(true);
+			onMeasured();
+		},
+		[contentHeight, isMeasured, onMeasured]
+	);
+
+	const clipStyle = useAnimatedStyle(() => ({
+		height: progress.value * Math.max(contentHeight.value, 0),
+		opacity: progress.value,
+	}));
+
+	return (
+		<Animated.View
+			accessibilityElementsHidden={!isOpen}
+			className={slots.subClip()}
+			importantForAccessibility={isOpen ? "auto" : "no-hide-descendants"}
+			pointerEvents={isOpen && isMeasured ? "auto" : "none"}
+			style={isMeasured ? clipStyle : subContentStyles.measuring}
+		>
+			{hasOpened ? (
+				<View className={slots.subInner()} onLayout={handleLayout}>
+					<View className={slots.subContent({ className })} {...props}>
+						{children}
+					</View>
+				</View>
+			) : null}
+		</Animated.View>
+	);
+}
+MenuSubContent.displayName = "DelacourUI.Menu.SubContent";
+
+const subContentStyles = StyleSheet.create({
+	/**
+	 * Out of flow and transparent until the rows report a height — never
+	 * `height: 0`, because a child mounted into a zero-height parent never fires
+	 * `onLayout`. `Collapsible.Content` carries the same sheet.
+	 */
+	measuring: { left: 0, opacity: 0, position: "absolute", right: 0, top: 0 },
+});