@delacour/react-native-ui 0.1.0-alpha.4 → 0.2.0-alpha.20261010061731

package/src/components/collapsible/collapsible.variants.ts

@@ -0,0 +1,228 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+import type { IconSize } from "../icon/icon.variants";
+
+/**
+ * How the surface is painted.
+ *
+ * `ListGroup`'s and `Accordion`'s set, because a collapsible is the same kind of
+ * surface and the three sit beside each other on a screen. A test pins the set
+ * against `Accordion`'s.
+ */
+export const COLLAPSIBLE_VARIANTS = ["default", "secondary", "tertiary", "transparent"] as const;
+
+export const COLLAPSIBLE_SIZES = ["sm", "md", "lg"] as const;
+
+export type CollapsibleVariant = (typeof COLLAPSIBLE_VARIANTS)[number];
+export type CollapsibleSize = (typeof COLLAPSIBLE_SIZES)[number];
+
+/** The axes a collapsible falls back to when nothing names one. Pinned against `defaultVariants`. */
+export const COLLAPSIBLE_DEFAULT_VARIANT: CollapsibleVariant = "default";
+export const COLLAPSIBLE_DEFAULT_SIZE: CollapsibleSize = "md";
+
+/**
+ * The step every glyph in a collapsible is drawn at — the indicator, or an icon a
+ * caller composes into the trigger. One step, so a chevron and a leading glyph on
+ * the same row are the same mark. The `glyph` slot writes the class out, because
+ * Tailwind's scanner is static, and a test pins the two together.
+ */
+export const COLLAPSIBLE_GLYPH_STEP: Record<CollapsibleSize, IconSize> = { sm: "xs", md: "sm", lg: "md" };
+
+/** Theme token an `Icon` composed into the trigger inherits. */
+export const COLLAPSIBLE_FOREGROUND_TOKEN = "foreground";
+
+/** Theme token the indicator inherits — a step quieter than the title, and a test pins that the two differ. */
+export const COLLAPSIBLE_INDICATOR_TOKEN = "muted-foreground";
+
+/**
+ * The one spring a collapsible runs.
+ *
+ * **The panel's height, its opacity and the indicator's rotation all read it**,
+ * off a single `progress` shared value, so they cannot drift out of step by a
+ * frame. **Critically damped**, because an overshoot in *height* draws the panel
+ * taller than its content measured and flashes the surface behind it at the end
+ * of every expand.
+ *
+ * Restated rather than imported from `Accordion`, so `delacour add collapsible`
+ * copies one folder and not two. A test pins the two equal, so the two
+ * disclosures cannot drift apart in feel.
+ */
+export const COLLAPSIBLE_SPRING = { damping: 26, mass: 0.4, stiffness: 400 } as const;
+
+/** Where the indicator points at each end of the travel, in degrees — a half turn. */
+export const COLLAPSIBLE_INDICATOR_ROTATION = { collapsed: 0, expanded: 180 } as const;
+
+/**
+ * What the measured height holds before the panel has ever reported its layout.
+ *
+ * Negative rather than zero: a panel that measured `0` is a real answer and still
+ * opens. Only a value no layout can produce can mean *unmeasured*, so the height
+ * style floors it. Whether the panel *has* measured is never decided by comparing
+ * against this on the JS thread — see {@link collapsibleTravelTarget}.
+ */
+export const COLLAPSIBLE_UNMEASURED = -1;
+
+/**
+ * Where the root's `progress` should spring to, or `null` to wait — only an open,
+ * and only before the panel's first measurement.
+ *
+ * `isMeasured` is React state, never a JS-thread read of the measured height: the
+ * panel's write is queued onto the UI runtime, and a read straight after it can
+ * still see {@link COLLAPSIBLE_UNMEASURED} — a Release build does, every time, and
+ * the panel stays shut. `accordionTravelTarget`, restated.
+ */
+export function collapsibleTravelTarget({
+	isOpen,
+	isMeasured,
+}: {
+	isOpen: boolean;
+	isMeasured: boolean;
+}): 0 | 1 | null {
+	if (!isOpen) return 0;
+	return isMeasured ? 1 : null;
+}
+
+/**
+ * The window of the travel the panel's opacity ramps across — ahead of the
+ * height, so the content is legible for most of an expand rather than half
+ * transparent at its midpoint.
+ */
+export const COLLAPSIBLE_CONTENT_FADE = { start: 0.1, end: 0.6 } as const;
+
+/**
+ * Styling for every part of a collapsible.
+ *
+ * One slotted `tv()`, because the parts cannot import the root without closing a
+ * cycle (AGENTS.md rule 3) yet all of them read the same `size`.
+ *
+ * **The slots are `Accordion`'s, class for class**, and a test asserts it: a
+ * collapsible is one accordion item without the group, and the two on one screen
+ * have to read as the same control. What differs is where the state lives, not
+ * how it looks.
+ *
+ * **The disabled fade lands on `root`**, never on `trigger`. The trigger is a
+ * `Pressable`, whose `Animated.View` writes `opacity` every frame, so a class on
+ * that node is overwritten silently. A collapsible has no item layer between the
+ * two, so the root wears it.
+ *
+ * **`overflow-hidden` on `root`** keeps an expanding panel inside the rounded
+ * corner; **on `content`** it is the disclosure itself, since that slot's height
+ * is an animated style running below its content's.
+ *
+ * **`contentInner` is out of flow**, so its height is purely its content's and can
+ * never be fed back the clip's own animated one. `left-0 right-0` is the other
+ * half: an absolute child is content-width without it, and a paragraph would
+ * measure as a single unwrapped line.
+ *
+ * No slot worn by a `View` carries `text-*` (rule 1). Free of React Native
+ * imports so it stays reachable from `bun test`.
+ */
+export const collapsibleVariants = tv({
+	slots: {
+		/** The clipped, rounded surface. Wears the disabled fade. */
+		root: "overflow-hidden border border-transparent",
+		/** The row that opens the panel. A `Pressable`, so it carries no opacity of its own. */
+		trigger: "w-full flex-row items-center",
+		/** The trigger's text column, taking whatever width the indicator leaves. */
+		triggerContent: "min-w-0 flex-1 justify-center gap-0.5",
+		/** The box the indicator turns inside. Its rotation is an animated style. */
+		indicator: "items-center justify-center",
+		/** Edge length any glyph in a collapsible inherits. */
+		glyph: "",
+		/** The trigger's primary line. Carries its own colour — a `View` cannot cascade one. */
+		title: "font-medium text-foreground",
+		/** The trigger's secondary line, a step down in scale and on the muted token. */
+		description: "text-muted-foreground",
+		/** The clip. Its height is an animated style, never a class. */
+		content: "w-full overflow-hidden",
+		/** The measured layer, out of flow so no clip height can squash what it reports. */
+		contentInner: "absolute top-0 right-0 left-0",
+	},
+	variants: {
+		variant: {
+			default: { root: "border-border bg-card" },
+			secondary: { root: "bg-secondary" },
+			tertiary: { root: "bg-tertiary" },
+			transparent: { root: "bg-transparent" },
+		},
+		size: {
+			sm: {
+				root: "rounded-md",
+				trigger: "min-h-12 gap-2.5 px-3 py-3",
+				contentInner: "px-3 pb-3",
+				glyph: "size-icon-xs",
+				title: "text-sm",
+				description: "text-xs",
+			},
+			md: {
+				root: "rounded-md",
+				trigger: "min-h-14 gap-3 px-4 py-3.5",
+				contentInner: "px-4 pb-4",
+				glyph: "size-icon-sm",
+				title: "text-base",
+				description: "text-sm",
+			},
+			lg: {
+				root: "rounded-md",
+				trigger: "min-h-16 gap-3.5 px-5 py-4",
+				contentInner: "px-5 pb-5",
+				glyph: "size-icon-md",
+				title: "text-lg",
+				description: "text-base",
+			},
+		},
+		// The empty `false` branch is load-bearing typing: a map with only `true`
+		// types the prop as `true` rather than `boolean`.
+		isDisabled: { true: { root: "opacity-50" }, false: {} },
+	},
+	defaultVariants: {
+		variant: COLLAPSIBLE_DEFAULT_VARIANT,
+		size: COLLAPSIBLE_DEFAULT_SIZE,
+		isDisabled: false,
+	},
+});
+
+export type CollapsibleVariantProps = VariantProps<typeof collapsibleVariants>;
+
+/** The state a collapsible settles at rest. */
+export type CollapsibleState = { isOpen: boolean; isDisabled: boolean };
+
+/**
+ * The whole state transition a tap on the trigger makes.
+ *
+ * A disabled collapsible refuses the tap **in both directions** — it does not
+ * close a section that is already open. A disabled control is one that cannot be
+ * used, not one that undoes itself. The trigger is also a disabled `Pressable`,
+ * so this is the second line rather than the first; it is what keeps a tap that
+ * slips through the gesture layer, or a caller's own `toggle()`, honest.
+ */
+export function toggleCollapsibleOpen({ isOpen, isDisabled }: CollapsibleState): boolean {
+	return isDisabled ? isOpen : !isOpen;
+}
+
+/** What the trigger and the panel tell assistive technology. */
+export type CollapsibleAccessibility = {
+	trigger: { expanded: boolean; disabled: boolean };
+	content: {
+		accessibilityElementsHidden: boolean;
+		importantForAccessibility: "auto" | "no-hide-descendants";
+	};
+};
+
+/**
+ * Settles what the trigger and the panel announce, from the settled state.
+ *
+ * **A closed panel is taken out of the tree**, not merely clipped to zero. The
+ * panel stays mounted after its first expand, and mounted content is content a
+ * screen reader reads — so a closed one has to say it is not there. Disabling a
+ * section does not hide it: an open, disabled panel is still on screen.
+ */
+export function resolveCollapsibleAccessibility({ isOpen, isDisabled }: CollapsibleState): CollapsibleAccessibility {
+	return {
+		trigger: { disabled: isDisabled, expanded: isOpen },
+		content: {
+			accessibilityElementsHidden: !isOpen,
+			importantForAccessibility: isOpen ? "auto" : "no-hide-descendants",
+		},
+	};
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,32 @@
+export { Collapsible, type CollapsibleProps } from "./collapsible";
+export {
+	type CollapsibleContextValue,
+	CollapsibleProvider,
+	useCollapsible,
+	useCollapsibleContext,
+} from "./collapsible.context";
+export type { CollapsibleTextProps } from "./collapsible.types";
+export {
+	COLLAPSIBLE_CONTENT_FADE,
+	COLLAPSIBLE_DEFAULT_SIZE,
+	COLLAPSIBLE_DEFAULT_VARIANT,
+	COLLAPSIBLE_FOREGROUND_TOKEN,
+	COLLAPSIBLE_GLYPH_STEP,
+	COLLAPSIBLE_INDICATOR_ROTATION,
+	COLLAPSIBLE_INDICATOR_TOKEN,
+	COLLAPSIBLE_SIZES,
+	COLLAPSIBLE_SPRING,
+	COLLAPSIBLE_UNMEASURED,
+	COLLAPSIBLE_VARIANTS,
+	type CollapsibleAccessibility,
+	type CollapsibleSize,
+	type CollapsibleState,
+	type CollapsibleVariant,
+	type CollapsibleVariantProps,
+	collapsibleVariants,
+	resolveCollapsibleAccessibility,
+	toggleCollapsibleOpen,
+} from "./collapsible.variants";
+export type { CollapsibleContentProps } from "./collapsible-content";
+export type { CollapsibleIndicatorProps, CollapsibleIndicatorState } from "./collapsible-indicator";
+export type { CollapsibleTriggerProps } from "./collapsible-trigger";

package/src/components/context-menu/AGENTS.md

@@ -0,0 +1,103 @@
+# ContextMenu
+
+The actions that belong to a piece of **content** — a message bubble, a card, a
+row — reached by holding the content itself. A [Menu](../menu/AGENTS.md) hangs
+off a control that exists to be opened; a context menu has no such control,
+because the target is the content. Compound root plus `ContextMenu.Trigger`,
+`ContextMenu.Content`, `ContextMenu.Preview` and `ContextMenu.Item`, with Menu's
+`Label`, `Separator`, `CheckboxItem`, `RadioGroup`, `RadioItem`, `Sub`,
+`SubTrigger`, `SubContent` and `Background` re-exported outright.
+
+`import { ContextMenu } from "@delacour/react-native-ui/context-menu";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/context-menu` |
+| `context-menu.tsx` | Root — Menu's `useMenuRootValue` into `MenuRootProvider`, plus this folder's provider; the `Object.assign` |
+| `context-menu-trigger.tsx` | `ContextMenu.Trigger` — the wrapper, the hold-vs-tap gesture, the measurement, the accessibility actions |
+| `context-menu-content.tsx` | `ContextMenu.Content` — `Menu.Content` with the context defaults; lifts a `Preview` out by type |
+| `context-menu-preview.tsx` | `ContextMenu.Preview` — the lifted copy at the trigger's window rect |
+| `context-menu-item.tsx` | `ContextMenu.Item` — `Menu.Item` with a trailing icon and a taller row |
+| `context-menu.context.tsx` | The invocation, the registered trigger children, `useContextMenuTarget` |
+| `context-menu.variants.ts` | The slotted `tv()`, the constants and the pure resolvers — no RN imports |
+| `context-menu.variants.test.ts` | Anchor, hold, accessibility, the content defaults against Menu's resolvers, tokens |
+
+## Design
+
+- **The rows and the panel are Menu's, imported from its leaves.** `Menu.Content`,
+  `Menu.Item` and the other rows come from `../menu/<leaf>`, never from `../menu`
+  — the folder index would pull Menu's root and could close a cycle (rule 3).
+  A restyled copy would be a second press fill and a second placement that drift.
+- **One recogniser decides up front.** `Gesture.Exclusive(longPress, tap)`, with
+  `LongPress().minDuration(delay).maxDistance(slop)`: the tap waits for the hold
+  to fail, so a hold that opens the menu never also fires `onPress`. That is why
+  `onPress` is the trigger's prop — a pressable inside it would race the hold
+  instead of being arbitrated against it. Without `onPress` the tap is not
+  installed at all, so an inner control keeps its own taps.
+- **A scroll that starts on the trigger still scrolls.** The hold fails once the
+  finger drifts past `slop` (12pt), and the scroller takes the touch. The tap's
+  `maxDuration` is at least the hold's delay, so a long `delay` never leaves a
+  dead window where neither fires.
+- **The delay has a 150ms floor.** `resolveHoldConfig` clamps it: anything
+  shorter is a tap, and a menu that opens on a tap swallows `onPress`.
+- **The content is not cloned or altered**, and need not be pressable. The
+  wrapper is a plain `View` that lays out like one — it does not shrink to its
+  child — with `collapsable={false}` so Android keeps a node to measure.
+- **`point` anchors at the finger, `target` at the wrapper.** The hold's
+  `absoluteX/absoluteY` become a zero-size rect, which Menu's
+  `resolveMenuPlacement` handles with no special case; `target` is the wrapper's
+  `measureInWindow`. Both go to Menu through its reuse contract: `open(rect)`
+  on the shared `MenuRootProvider`, and `anchor` on `Menu.Content`.
+- **A preview, or a screen reader, forces the target.** With a preview the panel
+  must open beside the lifted copy, never across it; a screen-reader open has no
+  pointer coordinate. `resolveContextAnchor` is the one place this is decided.
+- **A stale invocation is detected by identity.** The trigger records the rect it
+  handed to `open()`; Menu keeps that object as its anchor. A parent flipping
+  `isOpen` makes Menu measure the trigger itself, the identities differ, and
+  Content and Preview fall back to Menu's measured rect rather than last visit's.
+- **The preview is drawn through Menu's `backdrop`.** A `Modal` covers everything,
+  so a copy above the scrim has to live inside it. `ContextMenu.Preview` is lifted
+  out of the rows by type and handed to `Menu.Content`'s `backdrop`: over the
+  scrim, behind the panel, fading with both, taking no touches. That prop is the
+  one change this component needed from Menu.
+- **The preview is a second instance.** It renders the trigger's children again
+  (registered in context from an effect), so their local state starts fresh;
+  pass `ContextMenu.Preview` children of its own when that matters. It grows
+  1 → 1.03 over Menu's 160ms enter and casts `shadow-lg`. The 8pt offset clears
+  that growth for any target under ~530pt tall, and a test pins the arithmetic.
+  Under reduced motion it does not grow — it still appears.
+- **The scrim is on by default.** `hasScrim` is Menu's; ContextMenu defaults it
+  to `true` — the content behind is not the menu's control, and the dim says
+  where the action now is. A tap on it (or the preview) closes; Android back
+  closes through the `Modal`.
+- **Defaults differ from Menu's**: below, start-aligned, 8pt offset, 280 wide at
+  least — a point anchor has no width to inherit, and Menu's 200 floor is too
+  narrow for a trailing icon and a label. `CONTEXT_MENU_CONTENT_DEFAULTS`.
+- **Rows are taller and icons trail.** `ContextMenu.Item` is `Menu.Item` with
+  `iconPlacement="trailing"` and `min-h-12` merged over the row's `min-h-11`.
+  The other row kinds are re-exported unchanged.
+- **The haptic fires at hold acceptance**, in the long-press `onStart` on the UI
+  thread, before the open crosses to JS. The root's `haptic` is Menu's: played
+  when a row is chosen. Both are off by default.
+
+## Accessibility
+
+- The trigger is **one** element (`accessible`): `accessibilityRole="button"` with
+  `onPress`, `"none"` without, `accessibilityState={{ disabled, expanded }}`.
+- `accessibilityActions`: `activate` and `longpress` labelled "Show menu".
+  `activate` runs `onPress`, or opens when there is none; `longpress` opens
+  against the target rect. `resolveContextMenuAccessibility` holds the matrix.
+- Disabled: announced, and neither the gesture nor either action does anything.
+- The panel is Menu's: `menu` / `menuitem` roles and modal containment. The
+  preview is hidden from the accessibility tree.
+
+## Out of scope
+
+- **`presentation="bottom-sheet"`** — the same reason as Menu: it would force the
+  optional sheet engine on every consumer.
+- **Hardware keyboard** — Shift+F10 and the Context Menu key.
+- **Gesture Handler's absolute coordinates** are relative to the root view; in an
+  app whose root is not the window (a modal screen with an offset), `point` mode
+  can land a few points off. Use `anchor="target"` there.

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

@@ -0,0 +1,64 @@
+import { Children, isValidElement, type ReactElement, type ReactNode, useMemo } from "react";
+import { MenuContent, type MenuContentProps } from "../menu/menu-content";
+import { useContextMenuTarget } from "./context-menu.context";
+import { CONTEXT_MENU_CONTENT_DEFAULTS } from "./context-menu.variants";
+import { ContextMenuPreview } from "./context-menu-preview";
+
+export type ContextMenuContentProps = Omit<MenuContentProps, "hasScrim" | "anchor" | "backdrop"> & {
+	/** Tint the screen behind the panel. Default `true`. */
+	hasScrim?: boolean;
+};
+
+/**
+ * The panel: `Menu.Content` itself, with the defaults a held menu wants —
+ * below, start-aligned, 8pt from the anchor, at least 280 wide, over a scrim.
+ *
+ * The anchor is this visit's: a zero-size point at the finger, or the trigger's
+ * rect — forced to the rect when a `ContextMenu.Preview` is among the children.
+ * The preview is lifted out by type and drawn through Menu's `backdrop`, over
+ * the scrim and behind the panel.
+ */
+export function ContextMenuContent({
+	children,
+	placement = CONTEXT_MENU_CONTENT_DEFAULTS.placement,
+	align = CONTEXT_MENU_CONTENT_DEFAULTS.align,
+	offset = CONTEXT_MENU_CONTENT_DEFAULTS.offset,
+	minWidth = CONTEXT_MENU_CONTENT_DEFAULTS.minWidth,
+	hasScrim = CONTEXT_MENU_CONTENT_DEFAULTS.hasScrim,
+	...props
+}: ContextMenuContentProps): ReactElement {
+	const { preview, rows } = useMemo(() => splitPreview(children), [children]);
+	const { anchor } = useContextMenuTarget("ContextMenu.Content", preview !== null);
+
+	return (
+		<MenuContent
+			align={align}
+			anchor={anchor ?? undefined}
+			backdrop={preview}
+			hasScrim={hasScrim}
+			minWidth={minWidth}
+			offset={offset}
+			placement={placement}
+			{...props}
+		>
+			{rows}
+		</MenuContent>
+	);
+}
+ContextMenuContent.displayName = "DelacourUI.ContextMenu.Content";
+
+/** Lifts a `ContextMenu.Preview` out of the rows, so it is drawn behind the panel instead of in it. */
+function splitPreview(children: ReactNode): { preview: ReactElement | null; rows: ReactNode[] } {
+	let preview: ReactElement | null = null;
+	const rows: ReactNode[] = [];
+
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === ContextMenuPreview) {
+			preview = child;
+			continue;
+		}
+		rows.push(child);
+	}
+
+	return { preview, rows };
+}

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

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import type { MenuItemProps } from "../menu/menu.types";
+import { MenuItem } from "../menu/menu-item";
+import { contextMenuVariants } from "./context-menu.variants";
+
+export type ContextMenuItemProps = MenuItemProps;
+
+/**
+ * A verb: `Menu.Item` itself, with its icon at the trailing edge by default
+ * and a taller row. The same row, so the two menus cannot drift.
+ *
+ * @example
+ * <ContextMenu.Item icon={IconShare} onSelect={share}>Share</ContextMenu.Item>
+ */
+export function ContextMenuItem({
+	className,
+	iconPlacement = "trailing",
+	...props
+}: ContextMenuItemProps): ReactElement {
+	return <MenuItem className={contextMenuVariants().item({ className })} iconPlacement={iconPlacement} {...props} />;
+}
+ContextMenuItem.displayName = "DelacourUI.ContextMenu.Item";

package/src/components/context-menu/context-menu-preview.tsx

@@ -0,0 +1,60 @@
+import { type ReactElement, type ReactNode, useEffect } from "react";
+import type { ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useContextMenuPart, useContextMenuTarget } from "./context-menu.context";
+import { CONTEXT_MENU_PREVIEW_MS, CONTEXT_MENU_PREVIEW_SCALE, contextMenuVariants } from "./context-menu.variants";
+
+export type ContextMenuPreviewProps = Omit<ViewProps, "children"> & {
+	/** What to lift. Default: the trigger's own children, rendered again. */
+	children?: ReactNode;
+	className?: string;
+};
+
+/**
+ * The held content, lifted over the scrim while the menu is open.
+ *
+ * Placed among `ContextMenu.Content`'s rows, and lifted out of them by type: it
+ * is drawn through Menu's `backdrop`, absolutely at the trigger's measured
+ * window rect, grows 1 → 1.03 and casts a shadow. It takes no touches — a tap
+ * on it is an outside tap.
+ *
+ * It renders the trigger's children **again**, as a second instance, so any
+ * local state inside them starts fresh. Pass children of your own when that
+ * matters. With a preview present, the panel anchors to the trigger's rect
+ * rather than the press point, so it opens beside the copy, never across it.
+ *
+ * Under reduced motion it does not grow; it still appears, with the scrim.
+ */
+export function ContextMenuPreview({
+	children,
+	className,
+	style,
+	...props
+}: ContextMenuPreviewProps): ReactElement | null {
+	const { content } = useContextMenuPart("ContextMenu.Preview");
+	const { targetRect } = useContextMenuTarget("ContextMenu.Preview", true);
+	const isReducedMotion = useReducedMotion();
+
+	const lift = useSharedValue(1);
+	useEffect(() => {
+		if (isReducedMotion) return;
+		lift.value = withTiming(CONTEXT_MENU_PREVIEW_SCALE, { duration: CONTEXT_MENU_PREVIEW_MS });
+	}, [isReducedMotion, lift]);
+	const liftStyle = useAnimatedStyle(() => ({ transform: [{ scale: lift.value }] }));
+
+	if (!targetRect) return null;
+
+	const frame = { height: targetRect.height, left: targetRect.x, top: targetRect.y, width: targetRect.width };
+
+	return (
+		<Animated.View
+			className={contextMenuVariants().preview({ className })}
+			pointerEvents="none"
+			style={[frame, liftStyle, style]}
+			{...props}
+		>
+			{children ?? content}
+		</Animated.View>
+	);
+}
+ContextMenuPreview.displayName = "DelacourUI.ContextMenu.Preview";

package/src/components/context-menu/context-menu-trigger.tsx

@@ -0,0 +1,160 @@
+import { type ReactElement, type ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
+import { type AccessibilityActionEvent, View, type ViewProps } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { scheduleOnRN } from "react-native-worklets";
+import { type MenuMeasurable, useMenuPart } from "../menu/menu.context";
+import { type HapticFeedback, playHaptic } from "../pressable/pressable";
+import { useContextMenuPart } from "./context-menu.context";
+import {
+	CONTEXT_MENU_ACCESSIBILITY_ACTIONS,
+	type ContextMenuAnchor,
+	type ContextMenuInvoker,
+	type ContextMenuPoint,
+	contextMenuVariants,
+	resolveContextAnchor,
+	resolveContextMenuAccessibility,
+	resolveHoldConfig,
+} from "./context-menu.variants";
+
+export type ContextMenuTriggerProps = Omit<ViewProps, "children"> & {
+	/** The content that is held. Not cloned or altered, and it need not be pressable. */
+	children: ReactNode;
+	/** Lays out like a `View`; the wrapper does not shrink to its child. */
+	className?: string;
+	/** Open at the finger (`point`, default) or against the whole trigger (`target`). */
+	anchor?: ContextMenuAnchor;
+	/** How long the hold lasts before it opens, in ms. Default 350, at least 150. */
+	delay?: number;
+	/** How far the finger may drift during the hold, in pt. Default 12. */
+	slop?: number;
+	/** A short press. Arbitrated against the hold, so the two never both fire. */
+	onPress?: () => void;
+	/** Played the moment the hold is accepted. Off by default. */
+	haptic?: false | HapticFeedback;
+	/** Neither the hold nor `onPress` fires, and the trigger announces disabled. */
+	isDisabled?: boolean;
+};
+
+/**
+ * The content that is held: a message bubble, a card, a row.
+ *
+ * **One recogniser decides up front.** `Gesture.Exclusive(longPress, tap)`: the
+ * tap waits for the hold to fail, so a hold that opens the menu never also
+ * counts as a tap. That is why `onPress` belongs here, on the trigger, and not
+ * on a pressable inside it — an inner press would race the hold instead.
+ *
+ * **A scroll that starts here still scrolls.** The hold fails once the finger
+ * drifts past `slop`, and the scroller takes the touch.
+ *
+ * The haptic plays on the UI thread in the hold's `onStart`; the open crosses
+ * to JS, measures the wrapper with `measureInWindow`, and anchors the panel at
+ * the press point or against that rect.
+ *
+ * For a screen reader it is one element with two actions: `activate` runs
+ * `onPress` (or opens, without one) and `longpress`, "Show menu", opens against
+ * the trigger — there is no pointer coordinate to open at.
+ */
+export function ContextMenuTrigger({
+	children,
+	className,
+	anchor = "point",
+	delay,
+	slop,
+	onPress,
+	haptic = false,
+	isDisabled = false,
+	...props
+}: ContextMenuTriggerProps): ReactElement {
+	const { isOpen, open, triggerRef } = useMenuPart("ContextMenu.Trigger");
+	const { invoke, registerContent } = useContextMenuPart("ContextMenu.Trigger");
+	const hold = resolveHoldConfig({ delay, slop });
+	const hasPress = onPress !== undefined;
+	const a11y = resolveContextMenuAccessibility({ hasPress, isDisabled, isOpen });
+
+	useEffect(() => {
+		registerContent(children);
+	}, [children, registerContent]);
+
+	const nodeRef = useRef<View | null>(null);
+	const setNode = useCallback(
+		(node: View | null) => {
+			nodeRef.current = node;
+			triggerRef.current = node as MenuMeasurable | null;
+		},
+		[triggerRef]
+	);
+
+	const openFrom = useCallback(
+		(invokedBy: ContextMenuInvoker, point: ContextMenuPoint | null) => {
+			const node = nodeRef.current;
+			if (!node) return;
+			node.measureInWindow((x, y, width, height) => {
+				const targetRect = { height, width, x, y };
+				const opened = resolveContextAnchor({ hasPreview: false, invokedBy, mode: anchor, point, targetRect });
+				invoke({ invokedBy, mode: anchor, opened, point, targetRect });
+				open(opened);
+			});
+		},
+		[anchor, invoke, open]
+	);
+
+	const openAtPoint = useCallback((x: number, y: number) => openFrom("pointer", { x, y }), [openFrom]);
+
+	const pressRef = useRef(onPress);
+	pressRef.current = onPress;
+	const handlePress = useCallback(() => pressRef.current?.(), []);
+
+	const gesture = useMemo(() => {
+		const longPress = Gesture.LongPress()
+			.enabled(!isDisabled)
+			.minDuration(hold.delay)
+			.maxDistance(hold.slop)
+			.onStart((event) => {
+				"worklet";
+				if (haptic) playHaptic(haptic);
+				scheduleOnRN(openAtPoint, event.absoluteX, event.absoluteY);
+			});
+
+		if (!hasPress) return longPress;
+
+		const tap = Gesture.Tap()
+			.enabled(!isDisabled)
+			.maxDistance(hold.slop)
+			.maxDuration(Math.max(500, hold.delay))
+			.shouldCancelWhenOutside(true)
+			.onEnd((_event, isSuccess) => {
+				"worklet";
+				if (isSuccess) scheduleOnRN(handlePress);
+			});
+
+		return Gesture.Exclusive(longPress, tap);
+	}, [handlePress, hasPress, haptic, hold.delay, hold.slop, isDisabled, openAtPoint]);
+
+	const handleAccessibilityAction = useCallback(
+		(event: AccessibilityActionEvent) => {
+			const outcome = a11y.onAction(event.nativeEvent.actionName);
+			if (outcome === "press") handlePress();
+			else if (outcome === "open") openFrom("accessibility", null);
+		},
+		[a11y, handlePress, openFrom]
+	);
+
+	return (
+		<GestureDetector gesture={gesture}>
+			<View
+				accessibilityActions={CONTEXT_MENU_ACCESSIBILITY_ACTIONS}
+				accessibilityRole={a11y.role}
+				accessibilityState={a11y.state}
+				accessible
+				className={contextMenuVariants().trigger({ className })}
+				collapsable={false}
+				onAccessibilityAction={handleAccessibilityAction}
+				ref={setNode}
+				{...props}
+			>
+				{children}
+			</View>
+		</GestureDetector>
+	);
+}
+ContextMenuTrigger.displayName = "DelacourUI.ContextMenu.Trigger";