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

package/src/components/overlay/overlay-registry.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test";
+import {
+	INITIAL_OVERLAY_REGISTRY,
+	isTopOverlay,
+	OVERLAY_LAYER_BASE,
+	type OverlayRegistryState,
+	reduceOverlayRegistry,
+	topOverlay,
+	zIndexOfOverlay,
+} from "./overlay-registry";
+
+function apply(...actions: Parameters<typeof reduceOverlayRegistry>[1][]): OverlayRegistryState {
+	return actions.reduce(reduceOverlayRegistry, INITIAL_OVERLAY_REGISTRY);
+}
+
+describe("OVERLAY_LAYER_BASE", () => {
+	test("orders modal under anchored under toast, all above the sheet engine's 1-up stamps", () => {
+		expect(OVERLAY_LAYER_BASE.modal).toBeGreaterThanOrEqual(1000);
+		expect(OVERLAY_LAYER_BASE.anchored).toBeGreaterThan(OVERLAY_LAYER_BASE.modal);
+		expect(OVERLAY_LAYER_BASE.toast).toBeGreaterThan(OVERLAY_LAYER_BASE.anchored);
+	});
+});
+
+describe("reduceOverlayRegistry", () => {
+	test("an open overlay draws above its layer's base", () => {
+		const state = apply({ type: "open", id: "a", layer: "modal" });
+		expect(zIndexOfOverlay(state, "a")).toBe(OVERLAY_LAYER_BASE.modal + 1);
+	});
+
+	test("a later open in the same layer draws above the earlier one", () => {
+		const state = apply({ type: "open", id: "a", layer: "modal" }, { type: "open", id: "b", layer: "modal" });
+		expect(zIndexOfOverlay(state, "b")).toBeGreaterThan(zIndexOfOverlay(state, "a"));
+	});
+
+	test("the layer wins over open order", () => {
+		const state = apply({ type: "open", id: "toast", layer: "toast" }, { type: "open", id: "dialog", layer: "modal" });
+		expect(zIndexOfOverlay(state, "toast")).toBeGreaterThan(zIndexOfOverlay(state, "dialog"));
+	});
+
+	test("re-opening brings an overlay forward instead of duplicating it", () => {
+		const state = apply(
+			{ type: "open", id: "a", layer: "modal" },
+			{ type: "open", id: "b", layer: "modal" },
+			{ type: "open", id: "a", layer: "modal" }
+		);
+		expect(state.open.filter((entry) => entry.id === "a")).toHaveLength(1);
+		expect(zIndexOfOverlay(state, "a")).toBeGreaterThan(zIndexOfOverlay(state, "b"));
+	});
+
+	test("a z never leaves its layer's band, however many opens came before", () => {
+		let state = INITIAL_OVERLAY_REGISTRY;
+		for (let i = 0; i < 5000; i++) {
+			state = reduceOverlayRegistry(state, { type: "open", id: `m${i}`, layer: "modal" });
+			state = reduceOverlayRegistry(state, { type: "close", id: `m${i}` });
+		}
+		state = reduceOverlayRegistry(state, { type: "open", id: "last", layer: "modal" });
+		expect(zIndexOfOverlay(state, "last")).toBeLessThan(OVERLAY_LAYER_BASE.anchored);
+	});
+
+	test("closing an overlay that is not open returns the same state", () => {
+		const state = apply({ type: "open", id: "a", layer: "modal" });
+		expect(reduceOverlayRegistry(state, { type: "close", id: "nope" })).toBe(state);
+	});
+
+	test("a closed overlay has no z", () => {
+		const state = apply({ type: "open", id: "a", layer: "modal" }, { type: "close", id: "a" });
+		expect(zIndexOfOverlay(state, "a")).toBe(0);
+	});
+});
+
+describe("topOverlay / isTopOverlay", () => {
+	test("is null with nothing open", () => {
+		expect(topOverlay(INITIAL_OVERLAY_REGISTRY)).toBeNull();
+	});
+
+	test("an anchored overlay over a dialog is the top", () => {
+		const state = apply({ type: "open", id: "dialog", layer: "modal" }, { type: "open", id: "pop", layer: "anchored" });
+		expect(topOverlay(state)).toBe("pop");
+		expect(isTopOverlay(state, "dialog")).toBe(false);
+	});
+
+	test("a toast never captures the back button", () => {
+		const state = apply({ type: "open", id: "dialog", layer: "modal" }, { type: "open", id: "toast", layer: "toast" });
+		expect(topOverlay(state)).toBe("dialog");
+		expect(isTopOverlay(state, "toast")).toBe(false);
+	});
+
+	test("closing the top hands it to the one beneath", () => {
+		const state = apply(
+			{ type: "open", id: "a", layer: "modal" },
+			{ type: "open", id: "b", layer: "modal" },
+			{ type: "close", id: "b" }
+		);
+		expect(isTopOverlay(state, "a")).toBe(true);
+	});
+});

package/src/components/overlay/overlay-registry.ts

@@ -0,0 +1,99 @@
+/** The band of the z-order an overlay draws in. */
+export type OverlayLayer = "modal" | "anchored" | "toast";
+
+export const OVERLAY_LAYERS = ["modal", "anchored", "toast"] as const satisfies readonly OverlayLayer[];
+
+/**
+ * Where each layer's band starts.
+ *
+ * Every overlay and every bottom sheet teleports into the same `"root"` host, so
+ * they are siblings ordered by `zIndex`. The sheet engine stamps its sheets from
+ * 1 upward; starting the first band at 1000 puts every overlay above every sheet.
+ * A dialog sits under a popover opened from it, and a toast sits above both.
+ */
+export const OVERLAY_LAYER_BASE = {
+	modal: 1000,
+	anchored: 2000,
+	toast: 3000,
+} as const satisfies Record<OverlayLayer, number>;
+
+/** The layers whose top overlay answers Android's back button. A toast never does. */
+const BACK_CAPTURING_LAYERS: ReadonlySet<OverlayLayer> = new Set(["modal", "anchored"]);
+
+/** One overlay that is presented — open, or animating closed. */
+export type OverlayRegistryEntry = {
+	id: string;
+	layer: OverlayLayer;
+	/** Open order across every layer; later is larger. */
+	seq: number;
+};
+
+export type OverlayRegistryState = {
+	nextSeq: number;
+	open: readonly OverlayRegistryEntry[];
+};
+
+export const INITIAL_OVERLAY_REGISTRY: OverlayRegistryState = { nextSeq: 1, open: [] };
+
+export type OverlayRegistryAction = { type: "open"; id: string; layer: OverlayLayer } | { type: "close"; id: string };
+
+/**
+ * The registry as a pure reducer, so the z-order is testable without a renderer.
+ *
+ * An `open` stamps the next sequence number; an overlay already open is
+ * re-stamped rather than duplicated, which brings it forward. A `close` of an
+ * overlay that is not open returns the same state object, so an unmount racing
+ * an exit causes no render.
+ */
+export function reduceOverlayRegistry(
+	state: OverlayRegistryState,
+	action: OverlayRegistryAction
+): OverlayRegistryState {
+	if (action.type === "close") {
+		if (!state.open.some((entry) => entry.id === action.id)) return state;
+		return { ...state, open: state.open.filter((entry) => entry.id !== action.id) };
+	}
+
+	const others = state.open.filter((entry) => entry.id !== action.id);
+	return {
+		nextSeq: state.nextSeq + 1,
+		open: [...others, { id: action.id, layer: action.layer, seq: state.nextSeq }],
+	};
+}
+
+/**
+ * The overlay's `zIndex` while presented, `0` otherwise.
+ *
+ * Its layer's base plus its rank among the open overlays of that layer — a rank,
+ * not the raw sequence number, so a long session's thousandth dialog still sits
+ * below the first popover.
+ */
+export function zIndexOfOverlay(state: OverlayRegistryState, id: string): number {
+	const entry = state.open.find((candidate) => candidate.id === id);
+	if (entry === undefined) return 0;
+	let rank = 1;
+	for (const other of state.open) {
+		if (other.layer === entry.layer && other.seq < entry.seq) rank++;
+	}
+	return OVERLAY_LAYER_BASE[entry.layer] + rank;
+}
+
+/** The back-capturing overlay drawn on top, or `null` when none is presented. */
+export function topOverlay(state: OverlayRegistryState): string | null {
+	let top: string | null = null;
+	let topZ = 0;
+	for (const entry of state.open) {
+		if (!BACK_CAPTURING_LAYERS.has(entry.layer)) continue;
+		const z = zIndexOfOverlay(state, entry.id);
+		if (z > topZ) {
+			top = entry.id;
+			topZ = z;
+		}
+	}
+	return top;
+}
+
+/** Whether `id` is the overlay a back press should close. */
+export function isTopOverlay(state: OverlayRegistryState, id: string): boolean {
+	return topOverlay(state) === id;
+}

package/src/components/overlay/overlay-scrim.tsx

@@ -0,0 +1,49 @@
+import type { ReactElement } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import Animated, { type SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import { overlayVariants } from "./overlay.variants";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type OverlayScrimProps = Omit<PressableProps, "style" | "children" | "onPress"> & {
+	/** The 0 → 1 presence progress from `useOverlayPresence`; the scrim's opacity follows it. */
+	progress: SharedValue<number>;
+	/**
+	 * Called on a tap. Omit it and the scrim still takes the touch — the app
+	 * under a non-dismissible overlay must not be pressable — but does nothing.
+	 */
+	onDismiss?: () => void;
+	className?: string;
+};
+
+/**
+ * The dim layer between the app and a modal overlay.
+ *
+ * `bg-overlay` at opacity 1 — the token carries its own alpha — faded in and
+ * out by presence. Written before the panel in the same portal, so view order
+ * gives a touch on the panel to the panel.
+ *
+ * Invisible to assistive technology. A scrim is not a control a screen reader
+ * user can find; they dismiss through the panel's `onAccessibilityEscape` and
+ * the back button instead.
+ *
+ * React Native's own `Pressable`, not this library's: it needs no feedback, no
+ * haptic and no gesture handler — a gesture-handler tap here would race the
+ * panel's own pans for the touch.
+ */
+export function OverlayScrim({ progress, onDismiss, className, ...props }: OverlayScrimProps): ReactElement {
+	const fade = useAnimatedStyle(() => ({ opacity: progress.value }));
+
+	return (
+		<AnimatedPressable
+			accessibilityElementsHidden
+			accessible={false}
+			className={overlayVariants().scrim({ className })}
+			importantForAccessibility="no-hide-descendants"
+			onPress={onDismiss}
+			style={fade}
+			{...props}
+		/>
+	);
+}
+OverlayScrim.displayName = "DelacourUI.Overlay.Scrim";

package/src/components/overlay/overlay.context.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext } from "react";
+import type { OverlayLayer, OverlayRegistryState } from "./overlay-registry";
+
+/** What `OverlayProvider` shares with every overlay beneath it. */
+export type OverlayContextValue = {
+	/** The open set and its z-order. A change re-renders every presented portal. */
+	state: OverlayRegistryState;
+	/** A portal reports that its overlay is presented, and in which layer. */
+	present: (id: string, layer: OverlayLayer) => void;
+	/** The overlay's portal unmounted. */
+	dismissed: (id: string) => void;
+	/**
+	 * Hear every touch that starts anywhere under the provider — the app, a
+	 * sheet, another overlay — without taking it. A non-modal overlay closes on
+	 * an outside tap this way and the tap still reaches what was under it.
+	 * Returns the unsubscribe.
+	 */
+	subscribeTouchStart: (listener: () => void) => () => void;
+};
+
+export const OverlayContext = createContext<OverlayContextValue | null>(null);
+OverlayContext.displayName = "DelacourUI.Overlay.Context";
+
+/** The overlay registry, or `null` outside an `OverlayProvider`. */
+export function useOptionalOverlay(): OverlayContextValue | null {
+	return useContext(OverlayContext);
+}
+
+/**
+ * Whether a teleport `PortalProvider` is already mounted above.
+ *
+ * Teleport registers its hosts natively by name, so two providers would mean
+ * two hosts called `"root"`. `OverlayProvider` and this library's
+ * `BottomSheetProvider` both set this when they mount one, and both skip
+ * their own when it is already set — which is what makes either mount order
+ * work.
+ *
+ * This file is a leaf on purpose: `bottom-sheet/` imports it across folders,
+ * and it imports nothing but React and types, so the import can never close a
+ * cycle (package rule 3).
+ */
+export const TeleportProvidedContext = createContext(false);
+TeleportProvidedContext.displayName = "DelacourUI.Overlay.TeleportProvided";
+
+/** True beneath a provider that mounted teleport's `PortalProvider`. */
+export function useIsTeleportProvided(): boolean {
+	return useContext(TeleportProvidedContext);
+}

package/src/components/overlay/overlay.tsx

@@ -0,0 +1,118 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { PortalProvider } from "react-native-teleport";
+import {
+	OverlayContext,
+	type OverlayContextValue,
+	TeleportProvidedContext,
+	useIsTeleportProvided,
+} from "./overlay.context";
+import { OverlayPortal } from "./overlay-portal";
+import {
+	INITIAL_OVERLAY_REGISTRY,
+	type OverlayLayer,
+	type OverlayRegistryState,
+	reduceOverlayRegistry,
+} from "./overlay-registry";
+import { OverlayScrim } from "./overlay-scrim";
+
+export type OverlayProviderProps = {
+	children?: ReactNode;
+};
+
+function OverlayRoot({ children }: OverlayProviderProps): ReactElement {
+	const isTeleportProvided = useIsTeleportProvided();
+	const current = useRef<OverlayRegistryState>(INITIAL_OVERLAY_REGISTRY);
+	const [state, setState] = useState<OverlayRegistryState>(INITIAL_OVERLAY_REGISTRY);
+
+	const present = useCallback((id: string, layer: OverlayLayer) => {
+		current.current = reduceOverlayRegistry(current.current, { type: "open", id, layer });
+		setState(current.current);
+	}, []);
+
+	const dismissed = useCallback((id: string) => {
+		const next = reduceOverlayRegistry(current.current, { type: "close", id });
+		if (next === current.current) return;
+		current.current = next;
+		setState(next);
+	}, []);
+
+	const touchListeners = useRef(new Set<() => void>());
+	const subscribeTouchStart = useCallback((listener: () => void) => {
+		touchListeners.current.add(listener);
+		return () => {
+			touchListeners.current.delete(listener);
+		};
+	}, []);
+	const onTouchStart = useCallback(() => {
+		for (const listener of [...touchListeners.current]) listener();
+	}, []);
+
+	const value = useMemo<OverlayContextValue>(
+		() => ({ state, present, dismissed, subscribeTouchStart }),
+		[state, present, dismissed, subscribeTouchStart]
+	);
+
+	// `onTouchStart` is a bubbling touch event, not a responder claim: it fires
+	// for a touch on any descendant in the React tree — teleported overlays
+	// included, since teleport leaves the fiber where it was — and never stops
+	// the touch reaching its target or a gesture handler.
+	const registry = (
+		<OverlayContext.Provider value={value}>
+			<View onTouchStart={onTouchStart} style={styles.fill}>
+				{children}
+			</View>
+		</OverlayContext.Provider>
+	);
+	if (isTeleportProvided) return registry;
+
+	return (
+		<PortalProvider>
+			<TeleportProvidedContext.Provider value>{registry}</TeleportProvidedContext.Provider>
+		</PortalProvider>
+	);
+}
+
+const styles = StyleSheet.create({ fill: { flex: 1 } });
+
+/**
+ * The layer every overlay in this library draws into. Mount it once, inside
+ * `DelacourProvider` and around the navigator — and around
+ * `BottomSheetProvider` when the app has sheets.
+ *
+ * Two things. Teleport's `PortalProvider`, whose `"root"` host fills the app
+ * and is where every dialog, drawer, popover, tooltip, toast and sheet draws —
+ * skipped when a provider above already mounted one, because two would mean
+ * two native hosts with one name. And the overlay registry, which gives every
+ * presented overlay a `zIndex` in its layer's band and tells each one whether it
+ * is the top, the one Android's back button closes. It also hears every touch
+ * that starts beneath it, without claiming one, so a tooltip can close on an
+ * outside tap that still lands where it was aimed.
+ *
+ * `DelacourProvider` cannot mount this, for the reason it cannot mount
+ * `BottomSheetProvider`: `react-native-teleport` is an optional peer, and an
+ * import there would make every app resolve it.
+ *
+ * `OverlayProvider` is the same component under the name a root layout reads
+ * best with; `Overlay.Portal` and `Overlay.Scrim` are the parts every overlay
+ * is drawn with.
+ *
+ * @example
+ * <DelacourProvider>
+ *   <OverlayProvider>
+ *     <BottomSheetProvider>
+ *       <Stack />
+ *     </BottomSheetProvider>
+ *   </OverlayProvider>
+ * </DelacourProvider>
+ */
+export const Overlay = Object.assign(OverlayRoot, {
+	/** Teleports its children over the app, in a layer of the z-order. */
+	Portal: OverlayPortal,
+	/** The dim layer under a modal overlay, faded by presence. */
+	Scrim: OverlayScrim,
+	displayName: "DelacourUI.Overlay",
+});
+
+/** `Overlay` under the name a root layout reads best with. */
+export const OverlayProvider = Overlay;

package/src/components/overlay/overlay.variants.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "bun:test";
+import { declaredTokens } from "../../styles/theme-tokens.test";
+import { OVERLAY_MOTION, OVERLAY_SCRIM_TOKEN, overlayVariants } from "./overlay.variants";
+
+const LIGHT = declaredTokens("light");
+const DARK = declaredTokens("dark");
+
+describe("overlayVariants", () => {
+	test("the scrim fills its parent in the overlay token", () => {
+		const scrim = overlayVariants().scrim();
+		expect(scrim).toContain("absolute");
+		expect(scrim).toContain("inset-0");
+		expect(scrim).toContain(`bg-${OVERLAY_SCRIM_TOKEN}`);
+	});
+
+	test("a caller's className reaches the scrim and wins", () => {
+		expect(overlayVariants().scrim({ className: "bg-black/30" })).toContain("bg-black/30");
+		expect(overlayVariants().scrim({ className: "bg-black/30" })).not.toContain(`bg-${OVERLAY_SCRIM_TOKEN}`);
+	});
+
+	test("the scrim token exists in both themes", () => {
+		expect(LIGHT.has(OVERLAY_SCRIM_TOKEN)).toBe(true);
+		expect(DARK.has(OVERLAY_SCRIM_TOKEN)).toBe(true);
+	});
+});
+
+describe("OVERLAY_MOTION", () => {
+	test("is finite, so an E2E runner's settle wait always ends", () => {
+		expect(Number.isFinite(OVERLAY_MOTION.enterMs)).toBe(true);
+		expect(Number.isFinite(OVERLAY_MOTION.exitMs)).toBe(true);
+	});
+
+	test("leaves faster than it arrives", () => {
+		expect(OVERLAY_MOTION.exitMs).toBeLessThan(OVERLAY_MOTION.enterMs);
+		expect(OVERLAY_MOTION.exitMs).toBeGreaterThan(0);
+	});
+});

package/src/components/overlay/overlay.variants.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+
+/**
+ * The theme token every overlay's scrim paints with.
+ *
+ * `--overlay` carries its own alpha, and the two themes carry different ones,
+ * so a scrim draws it at opacity 1 and fades only through presence — the same
+ * rule `BottomSheet.Overlay` follows.
+ */
+export const OVERLAY_SCRIM_TOKEN = "overlay";
+
+/**
+ * How long an overlay takes to arrive and to leave, in milliseconds.
+ *
+ * Leaving is quicker than arriving: an overlay the user dismissed should get
+ * out of the way. Both are finite on purpose — overlay motion is behaviour, not
+ * decoration, so `isMotionCalm` does not still it, and a finite animation is
+ * what lets an E2E runner's settle wait end anyway.
+ */
+export const OVERLAY_MOTION = {
+	enterMs: 220,
+	exitMs: 160,
+} as const;
+
+/** Styling for the foundation's own parts. */
+export const overlayVariants = tv({
+	slots: {
+		scrim: "absolute inset-0 bg-overlay",
+	},
+});
+
+export type OverlayVariantProps = VariantProps<typeof overlayVariants>;

package/src/components/overlay/use-overlay-back-handler.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { BackHandler } from "react-native";
+import { useOptionalOverlay } from "./overlay.context";
+import { isTopOverlay } from "./overlay-registry";
+
+export type UseOverlayBackHandlerOptions = {
+	/** The id the overlay's `Overlay.Portal` was given. */
+	id: string;
+	/** Listen only while true — typically `isPresent && isDismissible`. */
+	isEnabled: boolean;
+	onBack: () => void;
+};
+
+/**
+ * Closes the overlay on Android's back button, but only while it is the top
+ * one: a popover over a dialog closes, the dialog under it stays.
+ *
+ * Without an `OverlayProvider` every overlay is its own top. React Native calls
+ * the most recently added listener first, and an overlay drawn over a bottom
+ * sheet subscribed after it, so the overlay answers before the sheet does.
+ */
+export function useOverlayBackHandler({ id, isEnabled, onBack }: UseOverlayBackHandlerOptions): void {
+	const registry = useOptionalOverlay();
+	const isTop = registry === null ? true : isTopOverlay(registry.state, id);
+
+	useEffect(() => {
+		if (!isEnabled || !isTop) return;
+		const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+			onBack();
+			return true;
+		});
+		return () => subscription.remove();
+	}, [isEnabled, isTop, onBack]);
+}

package/src/components/overlay/use-overlay-presence.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from "react";
+import { Easing, type SharedValue, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { OVERLAY_MOTION } from "./overlay.variants";
+import { isPresent, type PresenceEvent, type PresencePhase, presenceTarget, reducePresence } from "./overlay-presence";
+
+export type UseOverlayPresenceOptions = {
+	isOpen: boolean;
+	/** Entrance duration, ms. Default `OVERLAY_MOTION.enterMs`. */
+	enterMs?: number;
+	/** Exit duration, ms. Default `OVERLAY_MOTION.exitMs`. */
+	exitMs?: number;
+	/** The entrance finished — the moment to move accessibility focus in. */
+	onEntered?: () => void;
+	/** The exit finished and the overlay is about to unmount. */
+	onExited?: () => void;
+};
+
+export type OverlayPresence = {
+	/** Keep the overlay mounted while true: from the open until the exit animation ends. */
+	isPresent: boolean;
+	/** 0 hidden → 1 shown, animated on the UI thread. Drive opacity and transforms from it. */
+	progress: SharedValue<number>;
+	/** Reduce motion is on: drop scales and translates, keep the fade. */
+	isReduced: boolean;
+	phase: PresencePhase;
+};
+
+const ENTER_EASING = Easing.out(Easing.cubic);
+const EXIT_EASING = Easing.in(Easing.cubic);
+
+/**
+ * Keeps an overlay mounted through its exit animation and drives its
+ * `progress` from 0 to 1 and back.
+ *
+ * `isOpen` is the owner's state; this follows it through `reducePresence`,
+ * which is what lets a re-open during the exit reverse smoothly from wherever
+ * the animation is. The finish of each animation reaches React through
+ * `scheduleOnRN`, and only when the animation ran to the end — an interrupted
+ * one reports nothing, and the reducer drops a stale finish anyway.
+ *
+ * Under reduce motion the fade still runs — an opacity change is not motion —
+ * and `isReduced` tells the component to drop its transforms.
+ */
+export function useOverlayPresence({
+	isOpen,
+	enterMs = OVERLAY_MOTION.enterMs,
+	exitMs = OVERLAY_MOTION.exitMs,
+	onEntered,
+	onExited,
+}: UseOverlayPresenceOptions): OverlayPresence {
+	const [phase, setPhase] = useState<PresencePhase>(isOpen ? "entering" : "closed");
+	const progress = useSharedValue(0);
+	const isReduced = useReducedMotion();
+
+	const send = useCallback((event: PresenceEvent) => {
+		setPhase((current) => reducePresence(current, event));
+	}, []);
+
+	const finishEnter = useCallback(() => {
+		send({ type: "entered" });
+		onEntered?.();
+	}, [send, onEntered]);
+
+	const finishExit = useCallback(() => {
+		send({ type: "exited" });
+		onExited?.();
+	}, [send, onExited]);
+
+	useEffect(() => {
+		send({ type: isOpen ? "open" : "close" });
+	}, [isOpen, send]);
+
+	useEffect(() => {
+		if (phase === "entering") {
+			progress.value = withTiming(presenceTarget(phase), { duration: enterMs, easing: ENTER_EASING }, (finished) => {
+				if (finished) scheduleOnRN(finishEnter);
+			});
+		} else if (phase === "exiting") {
+			progress.value = withTiming(presenceTarget(phase), { duration: exitMs, easing: EXIT_EASING }, (finished) => {
+				if (finished) scheduleOnRN(finishExit);
+			});
+		}
+	}, [phase, progress, enterMs, exitMs, finishEnter, finishExit]);
+
+	return { isPresent: isPresent(phase), progress, isReduced, phase };
+}