@kanso-labs/react-native-kanso-ui 0.2.0 → 0.3.0

package/dist/components/dialog/index.js

@@ -0,0 +1,861 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { AnimatedPressable } from "../../button/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { OverlayHost } from "../../overlay/host.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Modal, Platform, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { createContext, use, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+//#region src/components/dialog/index.tsx
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 560;
+const SCALE_FROM = .9;
+const RISE_FROM = .03;
+const SCRIM_OPACITY = .32;
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const ORIENTATIONS = [
+	"portrait",
+	"portrait-upside-down",
+	"landscape",
+	"landscape-left",
+	"landscape-right"
+];
+const NO_PARTS = {
+	footer: 0,
+	header: 0,
+	title: 0
+};
+const stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) => StyleSheet.create({
+	actions: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		flexWrap: "wrap",
+		gap: spacing.sm,
+		justifyContent: "flex-end",
+		padding: spacing.xl
+	},
+	actionsFull: {
+		borderTopColor: colors.outlineVariant,
+		borderTopWidth: 1,
+		minHeight: sizing.rowSm,
+		paddingVertical: spacing.xs
+	},
+	bodyText: { color: colors.onSurfaceVariant },
+	container: {
+		backgroundColor: colors.surfaceContainerHigh,
+		overflow: "hidden"
+	},
+	containerBasic: {
+		borderRadius: radii.xl,
+		boxShadow: shadows.elevation3,
+		maxHeight: "100%",
+		maxWidth: MAX_WIDTH,
+		minWidth: MIN_WIDTH,
+		width: "100%"
+	},
+	containerFull: { flex: 1 },
+	header: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		gap: spacing.md,
+		justifyContent: "space-between",
+		paddingBottom: spacing.lg,
+		paddingHorizontal: spacing.xl,
+		paddingTop: spacing.xl
+	},
+	headerFull: {
+		borderBottomColor: colors.outlineVariant,
+		borderBottomWidth: 1,
+		minHeight: sizing.rowSm,
+		paddingBottom: spacing.xs,
+		paddingTop: spacing.xs
+	},
+	layout: {
+		alignItems: "center",
+		bottom: 0,
+		justifyContent: "center",
+		left: 0,
+		padding: spacing.xl,
+		pointerEvents: "box-none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	layoutFull: {
+		alignItems: "stretch",
+		padding: 0
+	},
+	scrim: {
+		backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),
+		bottom: 0,
+		left: 0,
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	title: {
+		color: colors.onSurface,
+		flexShrink: 1
+	}
+}));
+const DialogLayoutContext = createContext(null);
+const DialogTriggerContext = createContext(null);
+function bodyPaddingOf({ basic, parts }, spacing) {
+	return {
+		gap: spacing.lg,
+		paddingBottom: parts.footer > 0 ? 0 : spacing.xl,
+		paddingHorizontal: spacing.xl,
+		paddingTop: basic && parts.header > 0 ? 0 : spacing.xl
+	};
+}
+/**
+* A modal dialog centred over the screen, and the same dialog filling the
+* window in a compact window, the dialogs spec page's basic and full-screen
+* dialogs, paired by window size as the page pairs them. An alert dialog
+* stays the basic one at every width. Pass `isOpen` with `onOpenChange` to
+* hold the open state, or `defaultOpen` to let it keep its own.
+*
+* ```tsx
+* <Dialog>
+*   <Button>Open</Button>
+*   <Dialog.Content>
+*     <Dialog.Header>
+*       <Dialog.Title>Headline</Dialog.Title>
+*     </Dialog.Header>
+*     <Dialog.Body>Supporting text</Dialog.Body>
+*     <Dialog.Footer>
+*       <Button slot="close" variant="text">Cancel</Button>
+*     </Dialog.Footer>
+*   </Dialog.Content>
+* </Dialog>
+* ```
+*
+* Composed rather than configured by props, as web's is, since a dialog's
+* header, body and actions all take arbitrary content. A `Button` or
+* `IconButton` inside `Dialog` and outside its content opens it, and one
+* given `slot="close"` anywhere inside the content closes it. A dialog nothing on
+* the screen opens leaves `Dialog` out and passes `isOpen` and
+* `onOpenChange` to `Dialog.Content` instead.
+*/
+function Dialog(t0) {
+	const $ = c(15);
+	const { children, defaultOpen, isOpen, onOpenChange } = t0;
+	let t1;
+	if ($[0] !== defaultOpen || $[1] !== isOpen || $[2] !== onOpenChange) {
+		t1 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[0] = defaultOpen;
+		$[1] = isOpen;
+		$[2] = onOpenChange;
+		$[3] = t1;
+	} else t1 = $[3];
+	const state = useOverlayTriggerState(t1);
+	const [trigger, setTrigger] = useState(null);
+	let t2;
+	if ($[4] !== state || $[5] !== trigger) {
+		t2 = {
+			state,
+			trigger
+		};
+		$[4] = state;
+		$[5] = trigger;
+		$[6] = t2;
+	} else t2 = $[6];
+	const context = t2;
+	let t3;
+	if ($[7] !== state) {
+		t3 = { default: (event) => {
+			const target = event.currentTarget;
+			setTrigger(typeof target === "number" ? null : target);
+			state.open();
+		} };
+		$[7] = state;
+		$[8] = t3;
+	} else t3 = $[8];
+	const slots = t3;
+	let t4;
+	if ($[9] !== children || $[10] !== slots) {
+		t4 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[9] = children;
+		$[10] = slots;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== context || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DialogTriggerContext, {
+			value: context,
+			children: t4
+		});
+		$[12] = context;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
+/**
+* What the dialog shows, as a body that scrolls when its content runs past
+* the room it has. A string is drawn in the page's body medium on on-surface
+* variant; anything else draws itself. `style`, `ref` and `testID` land on
+* the `ScrollView`.
+*
+* A body its content runs past takes focus, as web's is a tab stop, so a
+* keyboard can scroll it when nothing inside it takes focus; a call site's
+* own `focusable` still wins.
+*/
+function DialogBody(t0) {
+	const $ = c(22);
+	let children;
+	let contentContainerStyle;
+	let onContentSizeChange;
+	let onLayout;
+	let props;
+	if ($[0] !== t0) {
+		({children, contentContainerStyle, onContentSizeChange, onLayout, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = contentContainerStyle;
+		$[3] = onContentSizeChange;
+		$[4] = onLayout;
+		$[5] = props;
+	} else {
+		children = $[1];
+		contentContainerStyle = $[2];
+		onContentSizeChange = $[3];
+		onLayout = $[4];
+		props = $[5];
+	}
+	const layout = useLayout("Dialog.Body");
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const text = useTypeRole("bodyMedium");
+	const { spacing } = theme;
+	const [content, setContent] = useState(0);
+	const [room, setRoom] = useState(0);
+	let t1;
+	if ($[6] !== onContentSizeChange) {
+		t1 = (width, height) => {
+			setContent(height);
+			onContentSizeChange?.(width, height);
+		};
+		$[6] = onContentSizeChange;
+		$[7] = t1;
+	} else t1 = $[7];
+	const measureContent = t1;
+	let t2;
+	if ($[8] !== onLayout) {
+		t2 = (event) => {
+			setRoom(event.nativeEvent.layout.height);
+			onLayout?.(event);
+		};
+		$[8] = onLayout;
+		$[9] = t2;
+	} else t2 = $[9];
+	const measureRoom = t2;
+	const T0 = ScrollView;
+	const t3 = content > room;
+	let t4;
+	if ($[10] !== contentContainerStyle || $[11] !== layout || $[12] !== spacing) {
+		t4 = composeStyles(bodyPaddingOf(layout, spacing), contentContainerStyle);
+		$[10] = contentContainerStyle;
+		$[11] = layout;
+		$[12] = spacing;
+		$[13] = t4;
+	} else t4 = $[13];
+	const t5 = typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(text, styles.bodyText),
+		children
+	}) : children;
+	let t6;
+	if ($[14] !== T0 || $[15] !== measureContent || $[16] !== measureRoom || $[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			focusable: t3,
+			onContentSizeChange: measureContent,
+			onLayout: measureRoom,
+			...props,
+			contentContainerStyle: t4,
+			children: t5
+		});
+		$[14] = T0;
+		$[15] = measureContent;
+		$[16] = measureRoom;
+		$[17] = props;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}
+/**
+* The dialog itself, and the scrim behind it. Everything the dialog shows
+* goes in here; the button that opens it stays outside it.
+*
+* Inside `Dialog`, the open state is the trigger's. On its own it is this
+* part's: `isOpen` with `onOpenChange` holds it, and a `slot="close"`
+* button, the scrim and the back gesture all report through `onOpenChange`.
+* `style`, `ref` and `testID` land on the container.
+*/
+function DialogContent(t0) {
+	const $ = c(46);
+	let children;
+	let defaultOpen;
+	let isOpen;
+	let onOpenChange;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({children, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled: t2, isOpen, onOpenChange, role: t3, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultOpen;
+		$[3] = isOpen;
+		$[4] = onOpenChange;
+		$[5] = props;
+		$[6] = style;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		children = $[1];
+		defaultOpen = $[2];
+		isOpen = $[3];
+		onOpenChange = $[4];
+		props = $[5];
+		style = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+	}
+	const isDismissable = t1 === void 0 ? true : t1;
+	const isKeyboardDismissDisabled = t2 === void 0 ? false : t2;
+	const role = t3 === void 0 ? "dialog" : t3;
+	const outer = use(DialogTriggerContext);
+	let t4;
+	if ($[10] !== defaultOpen || $[11] !== isOpen || $[12] !== onOpenChange) {
+		t4 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[10] = defaultOpen;
+		$[11] = isOpen;
+		$[12] = onOpenChange;
+		$[13] = t4;
+	} else t4 = $[13];
+	const own = useOverlayTriggerState(t4);
+	const state = outer?.state ?? own;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const sizeClass = useWindowSizeClass();
+	const basic = role === "alertdialog" || sizeClass !== "compact";
+	const titleId = useId();
+	const [parts, setParts] = useState(NO_PARTS);
+	let t5;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => registerOf(setParts);
+		$[14] = t5;
+	} else t5 = $[14];
+	const [register] = useState(t5);
+	const [title, setTitle] = useState(null);
+	const [present, setPresent] = useState(state.isOpen);
+	const motion = useDialogMotion(state.isOpen, present, setPresent, basic);
+	let t6;
+	if ($[15] !== state) {
+		t6 = () => {
+			state.close();
+		};
+		$[15] = state;
+		$[16] = t6;
+	} else t6 = $[16];
+	const close = t6;
+	let t7;
+	if ($[17] !== close) {
+		t7 = { close };
+		$[17] = close;
+		$[18] = t7;
+	} else t7 = $[18];
+	const slots = t7;
+	let t8;
+	if ($[19] !== basic || $[20] !== parts || $[21] !== register || $[22] !== titleId) {
+		t8 = {
+			basic,
+			parts,
+			register,
+			setTitle,
+			titleId
+		};
+		$[19] = basic;
+		$[20] = parts;
+		$[21] = register;
+		$[22] = titleId;
+		$[23] = t8;
+	} else t8 = $[23];
+	const layout = t8;
+	if (state.isOpen && !present) setPresent(true);
+	useReturnFocus(present, outer);
+	if (!present) return null;
+	const labelledBy = parts.title > 0 ? titleId : void 0;
+	const web = Platform.OS === "web";
+	let t9;
+	if ($[24] !== title) {
+		t9 = focusOf(title);
+		$[24] = title;
+		$[25] = t9;
+	} else t9 = $[25];
+	const T0 = View;
+	const t10 = composeStyles(styles.layout, basic ? void 0 : styles.layoutFull);
+	const t11 = Animated;
+	let t12;
+	if ($[26] !== labelledBy || $[27] !== role) {
+		t12 = web ? void 0 : panelRoleOf(role, labelledBy);
+		$[26] = labelledBy;
+		$[27] = role;
+		$[28] = t12;
+	} else t12 = $[28];
+	const t13 = isKeyboardDismissDisabled ? void 0 : close;
+	const t14 = composeStyles(styles.container, basic ? styles.containerBasic : styles.containerFull, basic ? void 0 : insetsOf(insets), motion.panel, style);
+	let t15;
+	if ($[29] !== children || $[30] !== slots) {
+		t15 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[29] = children;
+		$[30] = slots;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== layout || $[33] !== t15) {
+		t16 = /* @__PURE__ */ jsx(DialogLayoutContext, {
+			value: layout,
+			children: t15
+		});
+		$[32] = layout;
+		$[33] = t15;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== props || $[36] !== t11.View || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t16) {
+		t17 = /* @__PURE__ */ jsx(t11.View, {
+			...t12,
+			onAccessibilityEscape: t13,
+			...props,
+			style: t14,
+			children: t16
+		});
+		$[35] = props;
+		$[36] = t11.View;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t16;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== T0 || $[43] !== t10 || $[44] !== t17) {
+		t18 = /* @__PURE__ */ jsx(T0, {
+			style: t10,
+			children: t17
+		});
+		$[42] = T0;
+		$[43] = t10;
+		$[44] = t17;
+		$[45] = t18;
+	} else t18 = $[45];
+	return /* @__PURE__ */ jsx(Modal, {
+		animationType: "none",
+		"aria-labelledby": web ? labelledBy : void 0,
+		navigationBarTranslucent: true,
+		onRequestClose: isKeyboardDismissDisabled ? ignore : close,
+		onShow: t9,
+		statusBarTranslucent: true,
+		supportedOrientations: ORIENTATIONS,
+		transparent: true,
+		visible: true,
+		children: /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: null,
+			children: /* @__PURE__ */ jsxs(OverlayHost, { children: [/* @__PURE__ */ jsx(AnimatedPressable, {
+				accessible: false,
+				"aria-hidden": true,
+				focusable: false,
+				onPress: isDismissable && state.isOpen ? close : void 0,
+				style: composeStyles(styles.scrim, motion.scrim),
+				tabIndex: -1
+			}), t18] })
+		})
+	});
+}
+/**
+* The dialog's actions, at the trailing edge and wrapping onto another row
+* when they do not fit on one. Full screen they are the page's bottom action
+* bar. `style`, `ref` and `testID` land on its view.
+*/
+function DialogFooter(t0) {
+	const $ = c(10);
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+	} else {
+		props = $[1];
+		style = $[2];
+	}
+	const layout = useLayout("Dialog.Footer");
+	const styles = stylesOf(useTheme());
+	const { register } = layout;
+	let t1;
+	let t2;
+	if ($[3] !== register) {
+		t1 = () => register("footer");
+		t2 = [register];
+		$[3] = register;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useLayoutEffect(t1, t2);
+	const T0 = View;
+	const t3 = composeStyles(styles.actions, layout.basic ? void 0 : styles.actionsFull, style);
+	let t4;
+	if ($[6] !== T0 || $[7] !== props || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t3
+		});
+		$[6] = T0;
+		$[7] = props;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+/**
+* The dialog's header: its `Dialog.Title`, and anything beside it, such as a
+* close button. Full screen it is the page's header bar. `style`, `ref` and
+* `testID` land on its view.
+*/
+function DialogHeader(t0) {
+	const $ = c(10);
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+	} else {
+		props = $[1];
+		style = $[2];
+	}
+	const layout = useLayout("Dialog.Header");
+	const styles = stylesOf(useTheme());
+	const { register } = layout;
+	let t1;
+	let t2;
+	if ($[3] !== register) {
+		t1 = () => register("header");
+		t2 = [register];
+		$[3] = register;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useLayoutEffect(t1, t2);
+	const T0 = View;
+	const t3 = composeStyles(styles.header, layout.basic ? void 0 : styles.headerFull, style);
+	let t4;
+	if ($[6] !== T0 || $[7] !== props || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t3
+		});
+		$[6] = T0;
+		$[7] = props;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+/**
+* Names the dialog: the container is labelled by it, and a screen reader is
+* sent to it once the dialog shows. In headline small as the basic dialog,
+* and title large as the full-screen one, where it shares a 56dp bar.
+* `style`, `ref` and `testID` land on React Native's own Text.
+*/
+function DialogTitle(t0) {
+	const $ = c(16);
+	let props;
+	let ref;
+	let style;
+	if ($[0] !== t0) {
+		({ref, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = style;
+	} else {
+		props = $[1];
+		ref = $[2];
+		style = $[3];
+	}
+	const layout = useLayout("Dialog.Title");
+	const styles = stylesOf(useTheme());
+	const role = useTypeRole(layout.basic ? "headlineSmall" : "titleLarge");
+	const { register, setTitle } = layout;
+	let t1;
+	let t2;
+	if ($[4] !== register) {
+		t1 = () => register("title");
+		t2 = [register];
+		$[4] = register;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	useLayoutEffect(t1, t2);
+	const T0 = Text;
+	const t3 = layout.titleId;
+	let t4;
+	if ($[7] !== ref || $[8] !== setTitle) {
+		t4 = refsOf(setTitle, ref);
+		$[7] = ref;
+		$[8] = setTitle;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = "heading";
+	const t6 = composeStyles(role, styles.title, style);
+	let t7;
+	if ($[10] !== T0 || $[11] !== layout.titleId || $[12] !== props || $[13] !== t4 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			nativeID: t3,
+			ref: t4,
+			role: t5,
+			style: t6
+		});
+		$[10] = T0;
+		$[11] = layout.titleId;
+		$[12] = props;
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+function focusOf(title) {
+	return () => {
+		if (title !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(title, "focus");
+	};
+}
+function ignore() {}
+function insetsOf(insets) {
+	return {
+		paddingBottom: insets.bottom,
+		paddingLeft: insets.left,
+		paddingRight: insets.right,
+		paddingTop: insets.top
+	};
+}
+function panelRoleOf(role, labelledBy) {
+	return {
+		"aria-labelledby": labelledBy,
+		"aria-modal": true,
+		role
+	};
+}
+function refsOf(own, other) {
+	return (node) => {
+		own(node);
+		if (typeof other === "function") other(node);
+		else if (other !== null && other !== void 0) other.current = node;
+	};
+}
+function registerOf(setParts) {
+	return (part) => {
+		setParts((parts) => ({
+			...parts,
+			[part]: parts[part] + 1
+		}));
+		return () => {
+			setParts((parts) => ({
+				...parts,
+				[part]: parts[part] - 1
+			}));
+		};
+	};
+}
+/**
+* The scrim's and the panel's motion, and the timer that unmounts the dialog
+* once its exit has run. The panel arrives over the medium duration on the
+* emphasised decelerating curve and leaves over the short one on the
+* accelerating curve, and the scrim fades over the short one on the standard
+* curve, both ways. Under reduced motion the panel arrives and leaves at once.
+*/
+function useDialogMotion(isOpen, present, setPresent, basic) {
+	const $ = c(24);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const { height } = useWindowDimensions();
+	const panel = useSharedValue(0);
+	const scrim = useSharedValue(0);
+	let t0;
+	if ($[0] !== isOpen || $[1] !== motion.durationMedium1 || $[2] !== motion.durationShort2 || $[3] !== motion.durationShort3 || $[4] !== motion.easingEmphasizedAccelerate || $[5] !== motion.easingEmphasizedDecelerate || $[6] !== motion.easingStandard || $[7] !== panel || $[8] !== present || $[9] !== reduceMotion || $[10] !== scrim || $[11] !== setPresent) {
+		t0 = () => {
+			const fade = {
+				duration: motion.durationShort2,
+				easing: Easing.bezier(...motion.easingStandard)
+			};
+			if (isOpen) {
+				scrim.set(withTiming(1, fade));
+				panel.set(reduceMotion ? 1 : withTiming(1, {
+					duration: motion.durationMedium1,
+					easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+				}));
+				return;
+			}
+			if (!present) return;
+			scrim.set(withTiming(0, fade));
+			panel.set(reduceMotion ? 0 : withTiming(0, {
+				duration: motion.durationShort3,
+				easing: Easing.bezier(...motion.easingEmphasizedAccelerate)
+			}));
+			const timer = setTimeout(() => {
+				setPresent(false);
+			}, reduceMotion ? motion.durationShort2 : Math.max(motion.durationShort2, motion.durationShort3));
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		$[0] = isOpen;
+		$[1] = motion.durationMedium1;
+		$[2] = motion.durationShort2;
+		$[3] = motion.durationShort3;
+		$[4] = motion.easingEmphasizedAccelerate;
+		$[5] = motion.easingEmphasizedDecelerate;
+		$[6] = motion.easingStandard;
+		$[7] = panel;
+		$[8] = present;
+		$[9] = reduceMotion;
+		$[10] = scrim;
+		$[11] = setPresent;
+		$[12] = t0;
+	} else t0 = $[12];
+	let t1;
+	if ($[13] !== isOpen || $[14] !== motion || $[15] !== panel || $[16] !== present || $[17] !== reduceMotion || $[18] !== scrim || $[19] !== setPresent) {
+		t1 = [
+			isOpen,
+			motion,
+			panel,
+			present,
+			reduceMotion,
+			scrim,
+			setPresent
+		];
+		$[13] = isOpen;
+		$[14] = motion;
+		$[15] = panel;
+		$[16] = present;
+		$[17] = reduceMotion;
+		$[18] = scrim;
+		$[19] = setPresent;
+		$[20] = t1;
+	} else t1 = $[20];
+	useEffect(t0, t1);
+	const t2 = useAnimatedStyle(() => {
+		"worklet";
+		const shown = panel.get();
+		return basic ? {
+			opacity: shown,
+			transform: [{ scale: SCALE_FROM + .09999999999999998 * shown }]
+		} : {
+			opacity: shown,
+			transform: [{ translateY: (1 - shown) * RISE_FROM * height }]
+		};
+	});
+	const t3 = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: scrim.get() };
+	});
+	let t4;
+	if ($[21] !== t2 || $[22] !== t3) {
+		t4 = {
+			panel: t2,
+			scrim: t3
+		};
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+	} else t4 = $[23];
+	return t4;
+}
+function useLayout(part) {
+	const layout = use(DialogLayoutContext);
+	if (layout === null) throw new Error(`${part} is drawn inside Dialog.Content.`);
+	return layout;
+}
+function useReturnFocus(present, outer) {
+	const $ = c(6);
+	const shown = useRef(present);
+	let t0;
+	if ($[0] !== outer?.trigger || $[1] !== present) {
+		t0 = () => {
+			const trigger = outer?.trigger ?? null;
+			const gone = shown.current && !present;
+			shown.current = present;
+			if (gone && trigger !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(trigger, "focus");
+		};
+		$[0] = outer?.trigger;
+		$[1] = present;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== outer || $[4] !== present) {
+		t1 = [outer, present];
+		$[3] = outer;
+		$[4] = present;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
+}
+Dialog.Body = DialogBody;
+Dialog.Content = DialogContent;
+Dialog.Footer = DialogFooter;
+Dialog.Header = DialogHeader;
+Dialog.Title = DialogTitle;
+//#endregion
+export { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };
+
+//# sourceMappingURL=index.js.map