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

package/src/components/dialog/AGENTS.md

@@ -0,0 +1,97 @@
+# Dialog
+
+A centred card over a dimmed app that asks for a decision or a short input before the user goes
+on: confirm a delete, rename a file, accept terms. Compound root plus `Dialog.Trigger`,
+`Dialog.Content`, `Dialog.Close`, `Dialog.Header`, `Dialog.Title`, `Dialog.Description`,
+`Dialog.Body` and `Dialog.Footer`, and `useDialog()`.
+
+`import { Dialog } from "@delacour/react-native-ui/dialog";`
+
+It is drawn with the [overlay foundation](../overlay/AGENTS.md) — `Overlay.Portal`,
+`Overlay.Scrim`, `useOverlayPresence`, `useOverlayBackHandler` — so the app has to mount
+`OverlayProvider` once at its root. Without one the dialog draws inline and warns once.
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/dialog` |
+| `dialog.tsx` | Root — the open state, the ids and the focus refs — and the `Object.assign` compound surface |
+| `dialog.context.tsx` | **Leaf.** `DialogProvider`, `DialogSizeProvider`, `useDialog()`, `useDialogContext()`, `useDialogPart()`, `useDialogSize()` |
+| `dialog-trigger.tsx` | `Dialog.Trigger` — donates the open with `asChild`, keeps the trigger's ref for focus return |
+| `dialog-content.tsx` | `Dialog.Content` — presence, portal, scrim, card, motion, keyboard lift, back button, focus |
+| `dialog-close.tsx` | `Dialog.Close` — the corner ✕, or with `asChild` any control that closes |
+| `dialog-header.tsx` | `Dialog.Header` |
+| `dialog-title.tsx` | `Dialog.Title` — a `Text.Header` carrying the title `nativeID` and the focus ref |
+| `dialog-description.tsx` | `Dialog.Description` — a muted `Text.Paragraph` |
+| `dialog-body.tsx` | `Dialog.Body` |
+| `dialog-footer.tsx` | `Dialog.Footer` — `plain` or `panel`, row or stacked by size |
+| `dialog.variants.ts` | The slotted `tv()`, the size classes, the motion and slop constants, and three pure resolvers — no RN imports |
+| `dialog.variants.test.ts` | Slots per size and footer variant, tokens in both themes, the resolvers |
+
+## Design
+
+- **One axis on the card, one on the footer.** `size` (`sm` 320, `md` 400, `lg` 520, `full`) is a
+  `max-w-*` on a `w-full` card, so a narrow phone shrinks every size to the screen gutter and only
+  a wider screen reaches the cap. `Dialog.Footer`'s `variant` is `plain` — a right-aligned row
+  inside the card's padding — or `panel`, which bleeds out of the padding to the card's edges on a
+  `bg-muted` band under a hairline, rounding only its bottom corners.
+- **An `sm` footer stacks.** Two labelled buttons side by side on a 320pt card leave each label a
+  few characters before it truncates. `resolveDialogFooterDirection` is the rule, and the footer
+  reads the size from `DialogSizeProvider`, which `Dialog.Content` mounts — a context of its own
+  rather than a field on the root's, because the size belongs to the content, not the dialog.
+  Stacked actions keep written order, so the primary action, written last, sits last either way.
+- **The card is a popover surface with the card corner.** `bg-popover`, the token a layer over the
+  app paints with (as `BottomSheet` does), and `rounded-lg`, the package's card step. The scrim is
+  the foundation's `bg-overlay` at opacity 1, faded by presence.
+- **`Dialog.Content` renders nothing until the dialog opens, and stays through the exit.**
+  `useOverlayPresence` keeps it mounted until the exit animation ends, and the portal is mounted
+  only while present, so the registry entry, the z-order and the back handler all follow presence
+  — the foundation's contract. A re-open mid-exit reverses from wherever `progress` is.
+- **It draws in the `modal` band**, above every bottom sheet and the navigator's header. A sheet
+  opened *from* a dialog would draw under it; open a dialog from a sheet, never the reverse.
+- **Every path to closed is one `setOpen(false)`** — the trigger, `Dialog.Close`, the scrim, the
+  back button, the escape gesture and `useDialog().close()`. The root drops a set that does not
+  change the value, so a second tap on the scrim while the card is already leaving does not report
+  `onOpenChange(false)` twice.
+- **`isDismissible={false}` turns off the ways out the user did not choose.** The scrim still takes
+  the touch — the app under an alert dialog must not be pressable — but does nothing; the back
+  button is not subscribed; `onAccessibilityEscape` is not set; and the card announces as
+  `alertdialog`. `Dialog.Close` still closes it: it is one of the dialog's own actions.
+- **Triggers and closes donate the press.** With `asChild` they hand `onPress` to the child,
+  chained ahead of the child's own, for `BottomSheet.Trigger`'s reason: two tap gestures in an
+  ancestor/descendant pair are not simultaneous, so a pressable wrapped around a `Button` never
+  fires. The child has to be something that handles `onPress`.
+- **The corner ✕ presses with `fade` and 8pt of slop.** A scale on a glyph this small reads as a
+  jitter, and a bare glyph has no capsule to bring it toward 44pt. It sits out of the flow, and
+  `Dialog.Title`'s `pr-8` reserves its clearance on every dialog, so adding a close never reflows
+  the title.
+- **The title and description carry no type of their own.** They *are* `Text.Header` and a muted
+  `Text.Paragraph`; a size in the slot would be a second definition of a preset. A test asserts
+  the `title` slot is exactly `pr-8`. There is no `description` slot: `tv` emits `undefined` for an
+  empty string, so the part merges its `className` with `cn()`, as `BottomSheet.Description` does.
+- **Motion.** Scrim opacity is `progress`; the card fades with it and grows from
+  `DIALOG_ENTER_SCALE` (0.96) and `DIALOG_ENTER_TRANSLATE_Y` (8pt) below. Under reduce motion the
+  transforms drop and the fade stays, per the foundation. `isMotionCalm` does not still it.
+- **The keyboard lifts the card just enough.** `resolveDialogKeyboardLift` is the smallest lift
+  that keeps the card's bottom `DIALOG_KEYBOARD_MARGIN` (16pt) above the keyboard, never negative,
+  and capped so the card's top never rises under the top safe-area inset — a card too tall for
+  both keeps its title on screen. It is a worklet read in the card's animated style against
+  `useReanimatedKeyboardAnimation`'s height, so it rides the keyboard's own frames. The card's
+  edges come from `onLayout`, which ignores transforms, so the lift never feeds back into itself.
+  The positioner fills the portal host, which fills the window, so layout `y` is window `y`.
+- **Accessibility.** The card is `accessibilityViewIsModal` with `role="dialog"` (or
+  `"alertdialog"`, `resolveDialogRole`) and `accessibilityLabelledBy` the title's `nativeID` for
+  Android. Once the entrance finishes (`onEntered`) focus moves to the title; once the exit
+  finishes, to the trigger, if one is still mounted. `findNodeHandle` of a ref that has gone is
+  null, and focus is then left where the system puts it. `Dialog.Title` takes no `ref` for that
+  reason — the dialog holds it.
+- **No blur backdrop.** Frosted scrims need `expo-blur`, which is not a peer; recorded as a
+  follow-up for every overlay.
+
+## Testing
+
+`bun test` reaches `dialogVariants`, the size classes, the footer direction, the role and the
+keyboard lift. Opening from a trigger and controlled, every dismissal path, the alert dialog, the
+z-order over a sheet, the exit, the keyboard, VoiceOver focus and reduce motion are verified on a
+simulator through `/dialog` in the playground — `over-sheet` is the z-order case.

package/src/components/dialog/dialog-body.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { dialogVariants } from "./dialog.variants";
+
+export type DialogBodyProps = ViewProps & { className?: string };
+
+/**
+ * Whatever the dialog asks for between the header and the footer — a field, a
+ * checkbox, a short list. Optional: a confirmation is a header and a footer.
+ *
+ * It does not scroll. Content long enough to need it belongs in a `BottomSheet`.
+ *
+ * @example
+ * <Dialog.Body>
+ *   <Input placeholder="Project name" />
+ * </Dialog.Body>
+ */
+export function DialogBody({ className, ...props }: DialogBodyProps): ReactElement {
+	return <View className={dialogVariants().body({ className })} {...props} />;
+}
+DialogBody.displayName = "DelacourUI.Dialog.Body";

package/src/components/dialog/dialog-close.tsx

@@ -0,0 +1,82 @@
+import { type ReactElement, useCallback } from "react";
+import { IconCrossSmall } from "../../icons/central";
+import { Slot } from "../../lib/slot";
+import { Icon } from "../icon";
+import { Pressable, type PressableProps } from "../pressable";
+import { useDialogPart } from "./dialog.context";
+import { DIALOG_CLOSE_HIT_SLOP, dialogVariants } from "./dialog.variants";
+
+export type DialogCloseProps =
+	/** Donates the close to the single child — a `Button` in the footer, say. */
+	| ({ asChild: true; children: ReactElement } & Omit<PressableProps, "asChild" | "children">)
+	/** The ✕ glyph in the card's top-right corner. */
+	| ({ asChild?: false; accessibilityLabel?: string } & Omit<PressableProps, "asChild" | "children">);
+
+/**
+ * Closes the dialog.
+ *
+ * Without children it is the ✕ in the card's corner: this library's
+ * `Pressable` with `fade` feedback — a scale on a glyph this small reads as a
+ * jitter — 8pt of slop because a bare glyph has no capsule to bring it toward
+ * 44pt, and `"Close"` as its label. It sits out of the flow; `Dialog.Title`
+ * reserves the clearance.
+ *
+ * With `asChild` it donates the close to its child, chained ahead of the
+ * child's own `onPress`, the way `Dialog.Trigger` donates the open. Either way
+ * the close is the same `setOpen(false)` the scrim and the back button take, so
+ * `onOpenChange` is the one thing to watch.
+ *
+ * It closes even an alert dialog: `isDismissible={false}` turns off the ways
+ * out the user did not choose, not the ones the dialog offers.
+ *
+ * @example
+ * <Dialog.Close />
+ *
+ * @example
+ * <Dialog.Close asChild>
+ *   <Button variant="secondary">Cancel</Button>
+ * </Dialog.Close>
+ */
+export function DialogClose(props: DialogCloseProps): ReactElement {
+	const { close } = useDialogPart("Dialog.Close");
+	const { onPress } = props;
+
+	const handlePress = useCallback(() => {
+		close();
+		onPress?.();
+	}, [close, onPress]);
+
+	if (props.asChild) {
+		const { asChild: _asChild, children, onPress: _onPress, ...rest } = props;
+		return (
+			<Slot onPress={handlePress} {...rest}>
+				{children}
+			</Slot>
+		);
+	}
+
+	const {
+		asChild: _asChild,
+		accessibilityLabel = "Close",
+		className,
+		feedback = "fade",
+		hitSlop = DIALOG_CLOSE_HIT_SLOP,
+		onPress: _onPress,
+		...rest
+	} = props;
+
+	return (
+		<Pressable
+			accessibilityLabel={accessibilityLabel}
+			accessibilityRole="button"
+			className={dialogVariants().close({ className })}
+			feedback={feedback}
+			hitSlop={hitSlop}
+			onPress={handlePress}
+			{...rest}
+		>
+			<Icon color="muted-foreground" icon={IconCrossSmall} />
+		</Pressable>
+	);
+}
+DialogClose.displayName = "DelacourUI.Dialog.Close";

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

@@ -0,0 +1,153 @@
+import { type ReactElement, useCallback, useId } from "react";
+import {
+	AccessibilityInfo,
+	findNodeHandle,
+	type LayoutChangeEvent,
+	useWindowDimensions,
+	View,
+	type ViewProps,
+} from "react-native";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Overlay, useOverlayBackHandler, useOverlayPresence } from "../overlay";
+import { type DialogFocusTarget, DialogSizeProvider, useDialogPart } from "./dialog.context";
+import {
+	DIALOG_ENTER_SCALE,
+	DIALOG_ENTER_TRANSLATE_Y,
+	DIALOG_KEYBOARD_MARGIN,
+	type DialogSize,
+	dialogVariants,
+	resolveDialogKeyboardLift,
+	resolveDialogRole,
+} from "./dialog.variants";
+
+export type DialogContentProps = ViewProps & {
+	className?: string;
+	/** Classes for the scrim behind the card. */
+	scrimClassName?: string;
+	/** The card's width cap: `sm` 320, `md` 400, `lg` 520, `full` the gutter. Default `md`. */
+	size?: DialogSize;
+};
+
+/** Moves VoiceOver / TalkBack focus to a mounted element. A no-op when it has gone. */
+function focus(target: DialogFocusTarget | null): void {
+	if (target === null) return;
+	const handle = findNodeHandle(target as Parameters<typeof findNodeHandle>[0]);
+	if (handle !== null) AccessibilityInfo.setAccessibilityFocus(handle);
+}
+
+/**
+ * The card, its scrim and the portal they draw through.
+ *
+ * Renders nothing until the dialog opens, and stays mounted through the exit
+ * animation (`useOverlayPresence`), so the portal, the z-order and the back
+ * button all follow presence with nothing else to keep in sync. It draws in the
+ * `modal` band, above every bottom sheet and the navigator's header.
+ *
+ * - **Motion.** The scrim's opacity is `progress`; the card fades with it and
+ *   grows from 0.96 and 8pt below. Under reduce motion only the fade runs.
+ * - **Keyboard.** The card lifts by `resolveDialogKeyboardLift` — just enough
+ *   to keep its bottom 16pt above the keyboard, never past the top inset — on
+ *   the keyboard's own frames, and settles back when it closes.
+ * - **Dismissal.** A scrim tap, Android back and the iOS escape gesture close a
+ *   dismissible dialog. With `isDismissible={false}` the scrim still takes the
+ *   touch so the app under it cannot be pressed, and only the dialog's own
+ *   actions close it.
+ * - **Accessibility.** The card is modal to assistive technology, announces as
+ *   a `dialog` (an `alertdialog` when not dismissible), is labelled by the
+ *   title, and moves focus to the title once it has entered — and back to the
+ *   trigger, if one is still mounted, once it has gone.
+ *
+ * @example
+ * <Dialog.Content size="sm">
+ *   <Dialog.Header>…</Dialog.Header>
+ * </Dialog.Content>
+ */
+export function DialogContent({
+	className,
+	scrimClassName,
+	size = "md",
+	children,
+	onLayout,
+	style,
+	...props
+}: DialogContentProps): ReactElement | null {
+	const { isOpen, close, isDismissible, titleId, titleRef, triggerRef } = useDialogPart("Dialog.Content");
+	const id = useId();
+
+	const handleEntered = useCallback(() => focus(titleRef.current), [titleRef]);
+	const handleExited = useCallback(() => focus(triggerRef.current), [triggerRef]);
+	const { isPresent, isReduced, progress } = useOverlayPresence({
+		isOpen,
+		onEntered: handleEntered,
+		onExited: handleExited,
+	});
+
+	useOverlayBackHandler({ id, isEnabled: isPresent && isDismissible, onBack: close });
+
+	const keyboard = useReanimatedKeyboardAnimation();
+	const { top: topInset } = useSafeAreaInsets();
+	const { height: windowHeight } = useWindowDimensions();
+	const cardTop = useSharedValue(0);
+	const cardBottom = useSharedValue(0);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			const { y, height } = event.nativeEvent.layout;
+			cardTop.value = y;
+			cardBottom.value = y + height;
+			onLayout?.(event);
+		},
+		[cardTop, cardBottom, onLayout]
+	);
+
+	const cardStyle = useAnimatedStyle(() => {
+		const lift = resolveDialogKeyboardLift({
+			cardBottom: cardBottom.value,
+			cardTop: cardTop.value,
+			keyboardHeight: keyboard.height.value,
+			margin: DIALOG_KEYBOARD_MARGIN,
+			topInset,
+			windowHeight,
+		});
+
+		if (isReduced) {
+			return { opacity: progress.value, transform: [{ translateY: -lift }] };
+		}
+
+		return {
+			opacity: progress.value,
+			transform: [
+				{ translateY: interpolate(progress.value, [0, 1], [DIALOG_ENTER_TRANSLATE_Y, 0]) - lift },
+				{ scale: interpolate(progress.value, [0, 1], [DIALOG_ENTER_SCALE, 1]) },
+			],
+		};
+	}, [isReduced, topInset, windowHeight]);
+
+	if (!isPresent) return null;
+
+	const slots = dialogVariants({ size });
+	const onEscape = isDismissible ? close : undefined;
+
+	return (
+		<Overlay.Portal id={id} layer="modal">
+			<Overlay.Scrim className={slots.scrim({ className: scrimClassName })} onDismiss={onEscape} progress={progress} />
+			<View className={slots.positioner()} pointerEvents="box-none">
+				<Animated.View
+					accessibilityLabelledBy={titleId}
+					accessibilityViewIsModal
+					className={slots.content({ className })}
+					onAccessibilityEscape={onEscape}
+					onLayout={handleLayout}
+					role={resolveDialogRole(isDismissible)}
+					style={[cardStyle, style]}
+					{...props}
+				>
+					<DialogSizeProvider value={size}>{children}</DialogSizeProvider>
+				</Animated.View>
+			</View>
+		</Overlay.Portal>
+	);
+}
+DialogContent.displayName = "DelacourUI.Dialog.Content";

package/src/components/dialog/dialog-description.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import { cn } from "../../lib/cn";
+import { Text, type TextPresetProps } from "../text";
+import { useDialogPart } from "./dialog.context";
+
+export type DialogDescriptionProps = TextPresetProps;
+
+/**
+ * Supporting copy under the title.
+ *
+ * *Is* a `Text.Paragraph`, muted by default so the title and this read as a
+ * hierarchy rather than two equal lines. `color` is an ordinary prop. It has no
+ * slot in `dialogVariants` — see the note there.
+ *
+ * @example
+ * <Dialog.Description>This cannot be undone.</Dialog.Description>
+ */
+export function DialogDescription({ className, color = "muted", ...props }: DialogDescriptionProps): ReactElement {
+	const { descriptionId } = useDialogPart("Dialog.Description");
+
+	return <Text.Paragraph className={cn(className)} color={color} nativeID={descriptionId} {...props} />;
+}
+DialogDescription.displayName = "DelacourUI.Dialog.Description";

package/src/components/dialog/dialog-footer.tsx

@@ -0,0 +1,32 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { useDialogSize } from "./dialog.context";
+import { type DialogFooterVariant, dialogVariants, resolveDialogFooterDirection } from "./dialog.variants";
+
+export type DialogFooterProps = ViewProps & {
+	className?: string;
+	/** `plain` sits inside the card's padding; `panel` bleeds to its edges on a muted band. Default `plain`. */
+	variant?: DialogFooterVariant;
+};
+
+/**
+ * The dialog's actions.
+ *
+ * A right-aligned row on every size but `sm`, where two labelled buttons side
+ * by side would truncate, so they stack full width in written order — write the
+ * primary action last and it sits last either way. The direction follows the
+ * card's size from `Dialog.Content`; `resolveDialogFooterDirection` is the rule.
+ *
+ * @example
+ * <Dialog.Footer variant="panel">
+ *   <Dialog.Close asChild><Button variant="secondary">Cancel</Button></Dialog.Close>
+ *   <Button onPress={save}>Save</Button>
+ * </Dialog.Footer>
+ */
+export function DialogFooter({ className, variant = "plain", ...props }: DialogFooterProps): ReactElement {
+	const size = useDialogSize();
+	const footerDirection = resolveDialogFooterDirection(size);
+
+	return <View className={dialogVariants({ footer: variant, footerDirection }).footer({ className })} {...props} />;
+}
+DialogFooter.displayName = "DelacourUI.Dialog.Footer";

package/src/components/dialog/dialog-header.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { dialogVariants } from "./dialog.variants";
+
+export type DialogHeaderProps = ViewProps & { className?: string };
+
+/**
+ * The column holding `Dialog.Title` and `Dialog.Description`, a tight gap apart
+ * so the two read as one block above the body.
+ *
+ * @example
+ * <Dialog.Header>
+ *   <Dialog.Title>Delete project?</Dialog.Title>
+ *   <Dialog.Description>This cannot be undone.</Dialog.Description>
+ * </Dialog.Header>
+ */
+export function DialogHeader({ className, ...props }: DialogHeaderProps): ReactElement {
+	return <View className={dialogVariants().header({ className })} {...props} />;
+}
+DialogHeader.displayName = "DelacourUI.Dialog.Header";

package/src/components/dialog/dialog-title.tsx

@@ -0,0 +1,42 @@
+import { type ReactElement, useCallback } from "react";
+import { Text, type TextPresetProps } from "../text";
+import { type DialogFocusTarget, useDialogPart } from "./dialog.context";
+import { dialogVariants } from "./dialog.variants";
+
+/**
+ * A `Text.Header`'s props less `ref`: the dialog holds the title's ref itself,
+ * to move accessibility focus onto it.
+ */
+export type DialogTitleProps = Omit<TextPresetProps, "ref">;
+
+/**
+ * The dialog's heading.
+ *
+ * *Is* a `Text.Header` — the preset supplies the type, and this adds only the
+ * clearance the corner ✕ needs. It carries the `nativeID` the card is labelled
+ * by on Android, and it is where accessibility focus lands once the card has
+ * finished entering, so a screen reader announces what the dialog is for first.
+ *
+ * @example
+ * <Dialog.Title>Delete project?</Dialog.Title>
+ */
+export function DialogTitle({ className, ...props }: DialogTitleProps): ReactElement {
+	const { titleId, titleRef } = useDialogPart("Dialog.Title");
+	const setTitleRef = useCallback(
+		(node: DialogFocusTarget | null) => {
+			titleRef.current = node;
+		},
+		[titleRef]
+	);
+
+	return (
+		<Text.Header
+			accessibilityRole="header"
+			className={dialogVariants().title({ className })}
+			nativeID={titleId}
+			ref={setTitleRef}
+			{...props}
+		/>
+	);
+}
+DialogTitle.displayName = "DelacourUI.Dialog.Title";

package/src/components/dialog/dialog-trigger.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement, useCallback } from "react";
+import { composeRefs } from "../../lib/compose-refs";
+import { Slot } from "../../lib/slot";
+import { Pressable, type PressableProps } from "../pressable";
+import { useDialogPart } from "./dialog.context";
+
+export type DialogTriggerProps = PressableProps;
+
+/**
+ * The control that opens the dialog.
+ *
+ * On its own it is this library's `Pressable`. **`asChild` donates the press
+ * rather than wrapping the child**, the way `BottomSheet.Trigger` does: two tap
+ * gestures in an ancestor/descendant pair are not simultaneous, so a `Button`
+ * wrapped in a pressable trigger would win the touch and the dialog would never
+ * open. With `asChild` the open is chained ahead of the child's own `onPress`,
+ * and the child keeps its gesture, feedback and haptic — so the child has to be
+ * something that handles `onPress`.
+ *
+ * The trigger's ref is kept so accessibility focus can return to it when the
+ * dialog closes.
+ *
+ * @example
+ * <Dialog.Trigger asChild>
+ *   <Button variant="destructive">Delete</Button>
+ * </Dialog.Trigger>
+ */
+export function DialogTrigger({ asChild = false, children, onPress, ref, ...props }: DialogTriggerProps): ReactElement {
+	const { setOpen, triggerRef } = useDialogPart("Dialog.Trigger");
+
+	const handlePress = useCallback(() => {
+		setOpen(true);
+		onPress?.();
+	}, [setOpen, onPress]);
+
+	const composedRef = composeRefs(ref, (node) => {
+		triggerRef.current = node;
+	});
+
+	if (asChild) {
+		return (
+			<Slot onPress={handlePress} ref={composedRef} {...props}>
+				{children}
+			</Slot>
+		);
+	}
+
+	return (
+		<Pressable accessibilityRole="button" onPress={handlePress} ref={composedRef} {...props}>
+			{children}
+		</Pressable>
+	);
+}
+DialogTrigger.displayName = "DelacourUI.Dialog.Trigger";

package/src/components/dialog/dialog.context.tsx

@@ -0,0 +1,90 @@
+import { createContext, type ReactElement, type ReactNode, type RefObject, use } from "react";
+import type { DialogSize } from "./dialog.variants";
+
+/** Anything `AccessibilityInfo.setAccessibilityFocus` can be pointed at through `findNodeHandle`. */
+export type DialogFocusTarget = object;
+
+export type DialogContextValue = {
+	/** Whether the dialog is open — the owner's state, not the exit animation's. */
+	isOpen: boolean;
+	/** Opens or closes it. Reports through `onOpenChange` only when the value changes. */
+	setOpen: (isOpen: boolean) => void;
+	/** `setOpen(false)`, for an action inside the card. */
+	close: () => void;
+	/** Whether the scrim, Android back and the iOS escape gesture close it. */
+	isDismissible: boolean;
+	/** The `nativeID` `Dialog.Title` carries and the card is labelled by. */
+	titleId: string;
+	/** The `nativeID` `Dialog.Description` carries. */
+	descriptionId: string;
+};
+
+/**
+ * What the parts share that a caller has no use for: where focus goes on open
+ * and on close, and the card's size for the footer.
+ */
+export type DialogInternalValue = DialogContextValue & {
+	/** The trigger, so focus can return to it on close. */
+	triggerRef: RefObject<DialogFocusTarget | null>;
+	/** The title, so focus can land on it on open. */
+	titleRef: RefObject<DialogFocusTarget | null>;
+};
+
+const DialogContext = createContext<DialogInternalValue | null>(null);
+
+/** The card's size, provided by `Dialog.Content` so the footer can choose its direction. */
+const DialogSizeContext = createContext<DialogSize>("md");
+
+/**
+ * Supplies the dialog's state to its parts.
+ *
+ * Lives in its own module, importing nothing but `dialog.variants`' types, so a
+ * part can read it without importing `./dialog` — that import would close a
+ * cycle, and Metro serves a partially initialised module for one.
+ */
+export function DialogProvider({ value, children }: { value: DialogInternalValue; children: ReactNode }): ReactElement {
+	return <DialogContext value={value}>{children}</DialogContext>;
+}
+DialogProvider.displayName = "DelacourUI.Dialog.Provider";
+
+/** Supplies the card's size to the parts inside `Dialog.Content`. */
+export function DialogSizeProvider({ value, children }: { value: DialogSize; children: ReactNode }): ReactElement {
+	return <DialogSizeContext value={value}>{children}</DialogSizeContext>;
+}
+DialogSizeProvider.displayName = "DelacourUI.Dialog.SizeProvider";
+
+/** The enclosing dialog's context, or null outside a `<Dialog>`. */
+export function useDialogContext(): DialogContextValue | null {
+	return use(DialogContext);
+}
+
+/**
+ * Reads the enclosing dialog's open state, its setter and its ids.
+ *
+ * Lets a custom child close the dialog — a form's submit, say — without the
+ * caller threading a setter down. Throws outside a `<Dialog>`.
+ */
+export function useDialog(): DialogContextValue {
+	const context = use(DialogContext);
+	if (!context) {
+		throw new Error("useDialog must be called inside a <Dialog>.");
+	}
+	return context;
+}
+
+/**
+ * The full context, for a part that cannot work without one. Internal: not
+ * re-exported from `index.ts`.
+ */
+export function useDialogPart(component: string): DialogInternalValue {
+	const context = use(DialogContext);
+	if (!context) {
+		throw new Error(`${component} must be rendered inside a <Dialog>.`);
+	}
+	return context;
+}
+
+/** The card's size. `md` outside `Dialog.Content`. */
+export function useDialogSize(): DialogSize {
+	return use(DialogSizeContext);
+}