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

package/dist/components/sheet/index.js

@@ -0,0 +1,1090 @@
+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 { messagesFor } from "../../i18n/index.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, refsOf, useModalState, useModalTrigger } from "../../modal/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { createContext, use, useEffect, useId, 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 { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+//#region src/components/sheet/index.tsx
+const SIDE_WIDTH = 400;
+const TOP_MARGIN = 72;
+const PARTIAL = .5;
+const DRAG_SLOP = 8;
+const FLING = 500;
+const BAR_WIDTH = 32;
+const BAR_HEIGHT = 4;
+const BAR_SPACE = 22;
+const BAR_SIDE = 8;
+const stylesOf = themedStyles(({ colors, radii, shadows, spacing }) => StyleSheet.create({
+	bar: {
+		backgroundColor: colors.onSurfaceVariant,
+		borderRadius: radii.pill,
+		height: BAR_HEIGHT,
+		width: BAR_WIDTH
+	},
+	body: {
+		gap: spacing.lg,
+		paddingHorizontal: spacing.xl,
+		paddingVertical: spacing.lg
+	},
+	bodyText: { color: colors.onSurfaceVariant },
+	container: {
+		backgroundColor: colors.surfaceContainerLow,
+		boxShadow: shadows.elevation1,
+		overflow: "hidden"
+	},
+	containerBottom: {
+		borderTopLeftRadius: radii.xl,
+		borderTopRightRadius: radii.xl,
+		width: "100%"
+	},
+	containerSide: {
+		borderBottomStartRadius: radii.lg,
+		borderTopStartRadius: radii.lg,
+		flex: 1
+	},
+	footer: {
+		alignItems: "center",
+		borderTopColor: colors.outlineVariant,
+		borderTopWidth: 1,
+		flexDirection: "row",
+		flexShrink: 0,
+		flexWrap: "wrap",
+		gap: spacing.sm,
+		justifyContent: "flex-start",
+		minHeight: 72,
+		paddingBottom: spacing.xl,
+		paddingHorizontal: spacing.xl,
+		paddingTop: spacing.lg
+	},
+	handle: {
+		alignItems: "center",
+		alignSelf: "center",
+		borderRadius: radii.pill,
+		flexShrink: 0,
+		paddingHorizontal: BAR_SIDE,
+		paddingVertical: BAR_SPACE
+	},
+	header: {
+		alignItems: "center",
+		borderBottomColor: colors.outlineVariant,
+		borderBottomWidth: 1,
+		flexDirection: "row",
+		flexShrink: 0,
+		gap: spacing.md,
+		justifyContent: "space-between",
+		paddingHorizontal: spacing.xl,
+		paddingVertical: spacing.sm
+	},
+	rootBottom: {
+		bottom: 0,
+		left: 0,
+		position: "absolute",
+		right: 0
+	},
+	rootSide: {
+		bottom: 0,
+		end: 0,
+		maxWidth: "100%",
+		position: "absolute",
+		top: 0,
+		width: SIDE_WIDTH
+	},
+	title: {
+		color: colors.onSurfaceVariant,
+		flexShrink: 1,
+		minWidth: 0
+	}
+}));
+const SheetLayoutContext = createContext(null);
+const SheetTriggerContext = createContext(null);
+function bottomBoundsOf(insets, height) {
+	return {
+		...insetsOf(insets),
+		maxHeight: height - Math.max(TOP_MARGIN, insets.top),
+		paddingTop: 0
+	};
+}
+/**
+* Where a bottom sheet let go comes to rest: one height on in the direction of
+* a fling, and the nearest height otherwise. Heights are how far the panel is
+* moved down, highest first, and the highest is always the whole sheet, 0.
+*/
+function settleOf(at, velocity, settles) {
+	if (velocity > FLING) return settles.find((stop) => stop > at) ?? settles.at(-1) ?? 0;
+	if (velocity < -500) return settles.findLast((stop) => stop < at) ?? 0;
+	return settles.reduce((nearest, stop) => Math.abs(stop - at) < Math.abs(nearest - at) ? stop : nearest, 0);
+}
+/**
+* A modal sheet along an edge of the screen, the bottom sheets and side sheets
+* spec pages' modal sheets, paired by window size as kanso-ui's are: a bottom
+* sheet in a compact window, dragged between heights and swiped down to go,
+* and a side sheet along the end edge from the medium window up. Pass
+* `isOpen` with `onOpenChange` to hold the open state, or `defaultOpen` to let
+* it keep its own.
+*
+* ```tsx
+* <Sheet>
+*   <Button>Open</Button>
+*   <Sheet.Content>
+*     <Sheet.Handle />
+*     <Sheet.Header>
+*       <Sheet.Title>Headline</Sheet.Title>
+*     </Sheet.Header>
+*     <Sheet.Body>Supporting text</Sheet.Body>
+*     <Sheet.Footer>
+*       <Button slot="close">Done</Button>
+*     </Sheet.Footer>
+*   </Sheet.Content>
+* </Sheet>
+* ```
+*
+* Composed rather than configured by props, as web's is. A `Button` or
+* `IconButton` inside `Sheet` and outside its content opens it, and one given
+* `slot="close"` anywhere inside the content closes it. A sheet nothing on the
+* screen opens leaves `Sheet` out and passes `isOpen` and `onOpenChange` to
+* `Sheet.Content` instead.
+*/
+function Sheet(t0) {
+	const $ = c(10);
+	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 { context, slots } = useModalTrigger(t1);
+	let t2;
+	if ($[4] !== children || $[5] !== slots) {
+		t2 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[4] = children;
+		$[5] = slots;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== context || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SheetTriggerContext, {
+			value: context,
+			children: t2
+		});
+		$[7] = context;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+/**
+* What the sheet shows, as a body that scrolls when its content runs past the
+* room it has. A string is drawn in 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. A bottom sheet's body scrolls only once the
+* sheet is at its whole height, and holds the sheet's drag off while it does.
+*/
+function SheetBody(t0) {
+	const $ = c(28);
+	let children;
+	let contentContainerStyle;
+	let onContentSizeChange;
+	let onLayout;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({children, contentContainerStyle, onContentSizeChange, onLayout, scrollEnabled: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = contentContainerStyle;
+		$[3] = onContentSizeChange;
+		$[4] = onLayout;
+		$[5] = props;
+		$[6] = t1;
+	} else {
+		children = $[1];
+		contentContainerStyle = $[2];
+		onContentSizeChange = $[3];
+		onLayout = $[4];
+		props = $[5];
+		t1 = $[6];
+	}
+	const scrollEnabled = t1 === void 0 ? true : t1;
+	const layout = useLayout("Sheet.Body");
+	const styles = stylesOf(useTheme());
+	const text = useTypeRole("bodyMedium");
+	const [content, setContent] = useState(0);
+	const [room, setRoom] = useState(0);
+	let t2;
+	if ($[7] !== onContentSizeChange) {
+		t2 = (width, height) => {
+			setContent(height);
+			onContentSizeChange?.(width, height);
+		};
+		$[7] = onContentSizeChange;
+		$[8] = t2;
+	} else t2 = $[8];
+	const measureContent = t2;
+	let t3;
+	if ($[9] !== onLayout) {
+		t3 = (event) => {
+			setRoom(event.nativeEvent.layout.height);
+			onLayout?.(event);
+		};
+		$[9] = onLayout;
+		$[10] = t3;
+	} else t3 = $[10];
+	const measureRoom = t3;
+	const scrolls = scrollEnabled && layout.expanded;
+	const overflows = content > room;
+	let t4;
+	if ($[11] !== layout.pan || $[12] !== overflows || $[13] !== scrolls) {
+		t4 = Gesture.Native().enabled(scrolls && overflows).blocksExternalGesture(layout.pan);
+		$[11] = layout.pan;
+		$[12] = overflows;
+		$[13] = scrolls;
+		$[14] = t4;
+	} else t4 = $[14];
+	const native = t4;
+	const T0 = GestureDetector;
+	const T1 = ScrollView;
+	const t5 = scrolls && overflows;
+	const t6 = composeStyles(styles.body, contentContainerStyle);
+	const t7 = typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(text, styles.bodyText),
+		children
+	}) : children;
+	let t8;
+	if ($[15] !== T1 || $[16] !== measureContent || $[17] !== measureRoom || $[18] !== props || $[19] !== scrolls || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			focusable: t5,
+			onContentSizeChange: measureContent,
+			onLayout: measureRoom,
+			...props,
+			contentContainerStyle: t6,
+			scrollEnabled: scrolls,
+			children: t7
+		});
+		$[15] = T1;
+		$[16] = measureContent;
+		$[17] = measureRoom;
+		$[18] = props;
+		$[19] = scrolls;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== T0 || $[25] !== native || $[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			gesture: native,
+			children: t8
+		});
+		$[24] = T0;
+		$[25] = native;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	return t9;
+}
+/**
+* The sheet itself, and the scrim behind it. Everything the sheet shows goes
+* in here; the button that opens it stays outside it.
+*
+* Inside `Sheet`, 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, the swipe and the back gesture all report through
+* `onOpenChange`. `style`, `ref` and `testID` land on the container, and
+* `testID` names the drag `<testID>-drag` for Gesture Handler's test helpers.
+*/
+function SheetContent(t0) {
+	const $ = c(19);
+	let defaultOpen;
+	let isOpen;
+	let onOpenChange;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({defaultOpen, isDismissable: t1, isKeyboardDismissDisabled: t2, isOpen, onOpenChange, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultOpen;
+		$[2] = isOpen;
+		$[3] = onOpenChange;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		defaultOpen = $[1];
+		isOpen = $[2];
+		onOpenChange = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const isDismissable = t1 === void 0 ? true : t1;
+	const isKeyboardDismissDisabled = t2 === void 0 ? false : t2;
+	const outer = use(SheetTriggerContext);
+	let t3;
+	if ($[7] !== defaultOpen || $[8] !== isOpen || $[9] !== onOpenChange) {
+		t3 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[7] = defaultOpen;
+		$[8] = isOpen;
+		$[9] = onOpenChange;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { close, present, setPresent, slots, state } = useModalState(outer, t3);
+	if (!present) return null;
+	let t4;
+	if ($[11] !== close || $[12] !== isDismissable || $[13] !== isKeyboardDismissDisabled || $[14] !== props || $[15] !== setPresent || $[16] !== slots || $[17] !== state.isOpen) {
+		t4 = /* @__PURE__ */ jsx(SheetWindow, {
+			...props,
+			close,
+			isDismissable,
+			isKeyboardDismissDisabled,
+			isOpen: state.isOpen,
+			setPresent,
+			slots
+		});
+		$[11] = close;
+		$[12] = isDismissable;
+		$[13] = isKeyboardDismissDisabled;
+		$[14] = props;
+		$[15] = setPresent;
+		$[16] = slots;
+		$[17] = state.isOpen;
+		$[18] = t4;
+	} else t4 = $[18];
+	return t4;
+}
+/**
+* The sheet's actions, leading and wrapping onto another row when they do not
+* fit on one, over a divider. On a bottom sheet at half height they are below
+* the fold until the sheet is raised. `style`, `ref` and `testID` land on its
+* view.
+*/
+function SheetFooter(t0) {
+	const $ = c(7);
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+	} else {
+		props = $[1];
+		style = $[2];
+	}
+	useLayout("Sheet.Footer");
+	const styles = stylesOf(useTheme());
+	const T0 = View;
+	const t1 = composeStyles(styles.footer, style);
+	let t2;
+	if ($[3] !== T0 || $[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t1
+		});
+		$[3] = T0;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+/**
+* The bottom sheet's drag handle, a 32 by 4dp bar centred along its top edge.
+* Where the sheet has two heights it is a button moving it to the other one,
+* named "Drag handle" in the device's locale unless `aria-label` says
+* otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
+* none. `style`, `ref` and `testID` land on its view.
+*/
+function SheetHandle(t0) {
+	const $ = c(23);
+	let label;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({"aria-label": label, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = label;
+		$[2] = props;
+		$[3] = style;
+	} else {
+		label = $[1];
+		props = $[2];
+		style = $[3];
+	}
+	const layout = useLayout("Sheet.Handle");
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const { colors, radii } = theme;
+	let t1;
+	if ($[4] !== radii.pill) {
+		t1 = { borderRadius: radii.pill };
+		$[4] = radii.pill;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== colors.onSurfaceVariant || $[7] !== t1) {
+		t2 = {
+			color: colors.onSurfaceVariant,
+			corners: t1
+		};
+		$[6] = colors.onSurfaceVariant;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	const feedback = usePressFeedback(t2);
+	const { toggle } = layout;
+	if (!layout.bottom) return null;
+	if (toggle === void 0) return /* @__PURE__ */ jsx(View, {
+		"aria-hidden": true,
+		...props,
+		style: composeStyles(styles.handle, style),
+		children: /* @__PURE__ */ jsx(View, { style: styles.bar })
+	});
+	const T0 = Pressable;
+	const t3 = layout.expanded;
+	let t4;
+	if ($[9] !== label) {
+		t4 = label ?? messagesFor().dragHandle;
+		$[9] = label;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = "button";
+	const t6 = feedback.handlers;
+	const t7 = composeStyles(styles.handle, feedback.ring, style);
+	let t8;
+	if ($[11] !== styles.bar) {
+		t8 = /* @__PURE__ */ jsx(View, { style: styles.bar });
+		$[11] = styles.bar;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== T0 || $[14] !== feedback.handlers || $[15] !== feedback.layer || $[16] !== layout.expanded || $[17] !== props || $[18] !== t4 || $[19] !== t7 || $[20] !== t8 || $[21] !== toggle) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			"aria-expanded": t3,
+			"aria-label": t4,
+			role: t5,
+			...props,
+			...t6,
+			onPress: toggle,
+			style: t7,
+			children: [feedback.layer, t8]
+		});
+		$[13] = T0;
+		$[14] = feedback.handlers;
+		$[15] = feedback.layer;
+		$[16] = layout.expanded;
+		$[17] = props;
+		$[18] = t4;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = toggle;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+/**
+* The sheet's header: its `Sheet.Title`, and anything beside it, such as a
+* close button, over a divider. `style`, `ref` and `testID` land on its view.
+*/
+function SheetHeader(t0) {
+	const $ = c(7);
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+	} else {
+		props = $[1];
+		style = $[2];
+	}
+	useLayout("Sheet.Header");
+	const styles = stylesOf(useTheme());
+	const T0 = View;
+	const t1 = composeStyles(styles.header, style);
+	let t2;
+	if ($[3] !== T0 || $[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t1
+		});
+		$[3] = T0;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+/**
+* Names the sheet: the container is labelled by it, and a screen reader is
+* sent to it once the sheet shows. In title large on on-surface variant.
+* `style`, `ref` and `testID` land on React Native's own Text.
+*/
+function SheetTitle(t0) {
+	const $ = c(13);
+	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("Sheet.Title");
+	const styles = stylesOf(useTheme());
+	const role = useTypeRole("titleLarge");
+	const T0 = Text;
+	const t1 = layout.titleId;
+	let t2;
+	if ($[4] !== layout.setTitle || $[5] !== ref) {
+		t2 = refsOf(layout.setTitle, ref);
+		$[4] = layout.setTitle;
+		$[5] = ref;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = "heading";
+	const t4 = composeStyles(role, styles.title, style);
+	let t5;
+	if ($[7] !== T0 || $[8] !== layout.titleId || $[9] !== props || $[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			nativeID: t1,
+			ref: t2,
+			role: t3,
+			style: t4
+		});
+		$[7] = T0;
+		$[8] = layout.titleId;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/**
+* The open sheet, mounted from the moment it opens until its exit has run, so
+* each opening starts from its edge and at its first height.
+*/
+function SheetWindow(t0) {
+	const $ = c(76);
+	let children;
+	let close;
+	let isDismissable;
+	let isKeyboardDismissDisabled;
+	let isOpen;
+	let onLayout;
+	let props;
+	let setPresent;
+	let slots;
+	let style;
+	let testID;
+	if ($[0] !== t0) {
+		({children, close, isDismissable, isKeyboardDismissDisabled, isOpen, onLayout, setPresent, slots, style, testID, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = close;
+		$[3] = isDismissable;
+		$[4] = isKeyboardDismissDisabled;
+		$[5] = isOpen;
+		$[6] = onLayout;
+		$[7] = props;
+		$[8] = setPresent;
+		$[9] = slots;
+		$[10] = style;
+		$[11] = testID;
+	} else {
+		children = $[1];
+		close = $[2];
+		isDismissable = $[3];
+		isKeyboardDismissDisabled = $[4];
+		isOpen = $[5];
+		onLayout = $[6];
+		props = $[7];
+		setPresent = $[8];
+		slots = $[9];
+		style = $[10];
+		testID = $[11];
+	}
+	const styles = stylesOf(useTheme());
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const { height } = useWindowDimensions();
+	const bottom = useWindowSizeClass() === "compact";
+	const titleId = useId();
+	const [title, setTitle] = useState(null);
+	const [full, setFull] = useState(null);
+	const [expanded, setExpanded] = useState(false);
+	let t1;
+	if ($[12] !== bottom || $[13] !== full || $[14] !== height || $[15] !== isDismissable) {
+		t1 = stopsOf(bottom, full, height, isDismissable);
+		$[12] = bottom;
+		$[13] = full;
+		$[14] = height;
+		$[15] = isDismissable;
+		$[16] = t1;
+	} else t1 = $[16];
+	const stops = t1;
+	const twoHeights = stops.partial !== null;
+	const rest = stops.partial !== null && !expanded ? stops.partial : 0;
+	let t2;
+	if ($[17] !== bottom || $[18] !== full || $[19] !== isOpen || $[20] !== rest || $[21] !== setPresent) {
+		t2 = {
+			bottom,
+			full,
+			isOpen,
+			rest,
+			setPresent
+		};
+		$[17] = bottom;
+		$[18] = full;
+		$[19] = isOpen;
+		$[20] = rest;
+		$[21] = setPresent;
+		$[22] = t2;
+	} else t2 = $[22];
+	const motion = useSheetMotion(t2);
+	const t3 = bottom && isOpen && stops.settles.length > 1;
+	let t4;
+	if ($[23] !== close || $[24] !== expanded || $[25] !== full || $[26] !== isDismissable || $[27] !== motion.offset || $[28] !== rest || $[29] !== stops || $[30] !== t3 || $[31] !== testID) {
+		t4 = {
+			close,
+			enabled: t3,
+			expanded,
+			full,
+			isDismissable,
+			offset: motion.offset,
+			rest,
+			setExpanded,
+			stops,
+			testID
+		};
+		$[23] = close;
+		$[24] = expanded;
+		$[25] = full;
+		$[26] = isDismissable;
+		$[27] = motion.offset;
+		$[28] = rest;
+		$[29] = stops;
+		$[30] = t3;
+		$[31] = testID;
+		$[32] = t4;
+	} else t4 = $[32];
+	const pan = useSheetDrag(t4);
+	let t5;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
+			setExpanded(_temp);
+		};
+		$[33] = t5;
+	} else t5 = $[33];
+	const toggle = t5;
+	const t6 = !twoHeights || expanded;
+	const t7 = twoHeights ? toggle : void 0;
+	let t8;
+	if ($[34] !== bottom || $[35] !== pan || $[36] !== t6 || $[37] !== t7 || $[38] !== titleId) {
+		t8 = {
+			bottom,
+			expanded: t6,
+			pan,
+			setTitle,
+			titleId,
+			toggle: t7
+		};
+		$[34] = bottom;
+		$[35] = pan;
+		$[36] = t6;
+		$[37] = t7;
+		$[38] = titleId;
+		$[39] = t8;
+	} else t8 = $[39];
+	const layout = t8;
+	let t9;
+	if ($[40] !== onLayout) {
+		t9 = (event) => {
+			setFull(event.nativeEvent.layout.height);
+			onLayout?.(event);
+		};
+		$[40] = onLayout;
+		$[41] = t9;
+	} else t9 = $[41];
+	const measure = t9;
+	const labelledBy = title === null ? void 0 : titleId;
+	const T0 = ModalWindow;
+	const t10 = isDismissable && isOpen ? close : void 0;
+	const t11 = motion.scrim;
+	const T1 = GestureHandlerRootView;
+	const t12 = bottom ? styles.rootBottom : styles.rootSide;
+	const T2 = GestureDetector;
+	const t13 = Animated;
+	let t14;
+	if ($[42] !== labelledBy) {
+		t14 = panelRoleOf("dialog", labelledBy);
+		$[42] = labelledBy;
+		$[43] = t14;
+	} else t14 = $[43];
+	const t15 = isKeyboardDismissDisabled ? void 0 : close;
+	const t16 = composeStyles(styles.container, bottom ? styles.containerBottom : styles.containerSide, bottom ? bottomBoundsOf(insets, height) : sideInsetsOf(insets), motion.panel, style);
+	let t17;
+	if ($[44] !== children || $[45] !== slots) {
+		t17 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[44] = children;
+		$[45] = slots;
+		$[46] = t17;
+	} else t17 = $[46];
+	let t18;
+	if ($[47] !== layout || $[48] !== t17) {
+		t18 = /* @__PURE__ */ jsx(SheetLayoutContext, {
+			value: layout,
+			children: t17
+		});
+		$[47] = layout;
+		$[48] = t17;
+		$[49] = t18;
+	} else t18 = $[49];
+	let t19;
+	if ($[50] !== measure || $[51] !== props || $[52] !== t13.View || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t18 || $[57] !== testID) {
+		t19 = /* @__PURE__ */ jsx(t13.View, {
+			...t14,
+			onAccessibilityEscape: t15,
+			...props,
+			onLayout: measure,
+			style: t16,
+			testID,
+			children: t18
+		});
+		$[50] = measure;
+		$[51] = props;
+		$[52] = t13.View;
+		$[53] = t14;
+		$[54] = t15;
+		$[55] = t16;
+		$[56] = t18;
+		$[57] = testID;
+		$[58] = t19;
+	} else t19 = $[58];
+	let t20;
+	if ($[59] !== T2 || $[60] !== pan || $[61] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T2, {
+			gesture: pan,
+			children: t19
+		});
+		$[59] = T2;
+		$[60] = pan;
+		$[61] = t19;
+		$[62] = t20;
+	} else t20 = $[62];
+	let t21;
+	if ($[63] !== T1 || $[64] !== t12 || $[65] !== t20) {
+		t21 = /* @__PURE__ */ jsx(T1, {
+			style: t12,
+			children: t20
+		});
+		$[63] = T1;
+		$[64] = t12;
+		$[65] = t20;
+		$[66] = t21;
+	} else t21 = $[66];
+	let t22;
+	if ($[67] !== T0 || $[68] !== close || $[69] !== isKeyboardDismissDisabled || $[70] !== labelledBy || $[71] !== motion.scrim || $[72] !== t10 || $[73] !== t21 || $[74] !== title) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			isKeyboardDismissDisabled,
+			labelledBy,
+			onClose: close,
+			onScrimPress: t10,
+			scrim: t11,
+			title,
+			children: t21
+		});
+		$[67] = T0;
+		$[68] = close;
+		$[69] = isKeyboardDismissDisabled;
+		$[70] = labelledBy;
+		$[71] = motion.scrim;
+		$[72] = t10;
+		$[73] = t21;
+		$[74] = title;
+		$[75] = t22;
+	} else t22 = $[75];
+	return t22;
+}
+function _temp(was) {
+	return !was;
+}
+function sideInsetsOf(insets) {
+	return {
+		...insetsOf(insets),
+		paddingStart: 0
+	};
+}
+function stopsOf(bottom, full, height, isDismissable) {
+	if (!bottom || full === null) return {
+		partial: null,
+		settles: [0]
+	};
+	const lower = full - height * PARTIAL;
+	const partial = lower > 0 ? lower : null;
+	return {
+		partial,
+		settles: [
+			0,
+			...partial === null ? [] : [partial],
+			...isDismissable ? [full] : []
+		]
+	};
+}
+function useLayout(part) {
+	const layout = use(SheetLayoutContext);
+	if (layout === null) throw new Error(`${part} is drawn inside Sheet.Content.`);
+	return layout;
+}
+/**
+* The bottom sheet's drag. The panel follows the finger, no higher than its
+* whole height and no lower than gone, or than its lowest height when it may
+* not be dismissed, and once let go it settles where `settleOf` says: below
+* the lowest height it closes, and at another height it moves the sheet there.
+*/
+function useSheetDrag(t0) {
+	const $ = c(17);
+	const { close, enabled, expanded, full, isDismissable, offset, rest, setExpanded, stops, testID } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const origin = useSharedValue(0);
+	let t1;
+	if ($[0] !== stops.settles) {
+		t1 = stops.settles.at(-1) ?? 0;
+		$[0] = stops.settles;
+		$[1] = t1;
+	} else t1 = $[1];
+	const lowest = t1;
+	const follow = function follow(translation) {
+		offset.set(Math.min(lowest, Math.max(0, origin.get() + translation)));
+	};
+	let t2;
+	if ($[2] !== close || $[3] !== expanded || $[4] !== full || $[5] !== isDismissable || $[6] !== motion || $[7] !== offset || $[8] !== reduceMotion || $[9] !== setExpanded || $[10] !== stops.partial) {
+		t2 = function settle(target) {
+			if (isDismissable && target === full) {
+				close();
+				return;
+			}
+			const higher = target === 0;
+			if (stops.partial !== null && higher !== expanded) {
+				setExpanded(higher);
+				return;
+			}
+			offset.set(reduceMotion ? target : withTiming(target, {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+			}));
+		};
+		$[2] = close;
+		$[3] = expanded;
+		$[4] = full;
+		$[5] = isDismissable;
+		$[6] = motion;
+		$[7] = offset;
+		$[8] = reduceMotion;
+		$[9] = setExpanded;
+		$[10] = stops.partial;
+		$[11] = t2;
+	} else t2 = $[11];
+	const settle = t2;
+	let t5;
+	if ($[12] !== offset || $[13] !== rest || $[14] !== settle || $[15] !== stops.settles) {
+		t5 = (t6, success) => {
+			const { velocityY } = t6;
+			settle(success ? settleOf(offset.get(), velocityY, stops.settles) : rest);
+		};
+		$[12] = offset;
+		$[13] = rest;
+		$[14] = settle;
+		$[15] = stops.settles;
+		$[16] = t5;
+	} else t5 = $[16];
+	const pan = Gesture.Pan().activeOffsetY([-8, DRAG_SLOP]).enabled(enabled).runOnJS(true).onStart((t3) => {
+		const { translationY } = t3;
+		origin.set(offset.get());
+		follow(translationY);
+	}).onUpdate((t4) => {
+		const { translationY: translationY_0 } = t4;
+		follow(translationY_0);
+	}).onEnd(t5);
+	return testID === void 0 ? pan : pan.withTestId(`${testID}-drag`);
+}
+/**
+* The scrim's and the panel's motion, and the timer that unmounts the sheet
+* once its exit has run. The bottom sheet's position is how far its panel is
+* moved down, which the drag sets too; it starts below the window and rises
+* to its height once that is measured. The side sheet's is how far it has
+* come in from its edge, which is the end edge, and so the left one under
+* right-to-left.
+*/
+function useSheetMotion(t0) {
+	const $ = c(33);
+	const { bottom, full, isOpen, rest, setPresent } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const { height } = useWindowDimensions();
+	const offset = useSharedValue(height);
+	const shown = useSharedValue(0);
+	const scrim = useSharedValue(0);
+	const direction = I18nManager.isRTL ? -1 : 1;
+	let t1;
+	if ($[0] !== bottom || $[1] !== full || $[2] !== height || $[3] !== isOpen || $[4] !== motion.durationMedium1 || $[5] !== motion.durationShort2 || $[6] !== motion.durationShort3 || $[7] !== motion.easingEmphasizedAccelerate || $[8] !== motion.easingEmphasizedDecelerate || $[9] !== motion.easingStandard || $[10] !== offset || $[11] !== reduceMotion || $[12] !== rest || $[13] !== scrim || $[14] !== setPresent || $[15] !== shown) {
+		t1 = () => {
+			const fade = {
+				duration: motion.durationShort2,
+				easing: Easing.bezier(...motion.easingStandard)
+			};
+			const enter = {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+			};
+			const exit = {
+				duration: motion.durationShort3,
+				easing: Easing.bezier(...motion.easingEmphasizedAccelerate)
+			};
+			if (isOpen) {
+				scrim.set(withTiming(1, fade));
+				if (!bottom) {
+					shown.set(reduceMotion ? 1 : withTiming(1, enter));
+					return;
+				}
+				if (full === null) return;
+				if (offset.get() > full) offset.set(full);
+				offset.set(reduceMotion ? rest : withTiming(rest, enter));
+				return;
+			}
+			scrim.set(withTiming(0, fade));
+			if (bottom) {
+				const gone = full ?? height;
+				offset.set(reduceMotion ? gone : withTiming(gone, exit));
+			} else shown.set(reduceMotion ? 0 : withTiming(0, exit));
+			const timer = setTimeout(() => {
+				setPresent(false);
+			}, reduceMotion ? motion.durationShort2 : Math.max(motion.durationShort2, motion.durationShort3));
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		$[0] = bottom;
+		$[1] = full;
+		$[2] = height;
+		$[3] = isOpen;
+		$[4] = motion.durationMedium1;
+		$[5] = motion.durationShort2;
+		$[6] = motion.durationShort3;
+		$[7] = motion.easingEmphasizedAccelerate;
+		$[8] = motion.easingEmphasizedDecelerate;
+		$[9] = motion.easingStandard;
+		$[10] = offset;
+		$[11] = reduceMotion;
+		$[12] = rest;
+		$[13] = scrim;
+		$[14] = setPresent;
+		$[15] = shown;
+		$[16] = t1;
+	} else t1 = $[16];
+	let t2;
+	if ($[17] !== bottom || $[18] !== full || $[19] !== height || $[20] !== isOpen || $[21] !== motion || $[22] !== offset || $[23] !== reduceMotion || $[24] !== rest || $[25] !== scrim || $[26] !== setPresent || $[27] !== shown) {
+		t2 = [
+			bottom,
+			full,
+			height,
+			isOpen,
+			motion,
+			offset,
+			reduceMotion,
+			rest,
+			scrim,
+			setPresent,
+			shown
+		];
+		$[17] = bottom;
+		$[18] = full;
+		$[19] = height;
+		$[20] = isOpen;
+		$[21] = motion;
+		$[22] = offset;
+		$[23] = reduceMotion;
+		$[24] = rest;
+		$[25] = scrim;
+		$[26] = setPresent;
+		$[27] = shown;
+		$[28] = t2;
+	} else t2 = $[28];
+	useEffect(t1, t2);
+	const t3 = useAnimatedStyle(() => {
+		"worklet";
+		if (bottom) return { transform: [{ translateY: offset.get() }] };
+		const progress = shown.get();
+		return {
+			opacity: progress,
+			transform: [{ translateX: (1 - progress) * SIDE_WIDTH * direction }]
+		};
+	});
+	const t4 = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: scrim.get() };
+	});
+	let t5;
+	if ($[29] !== offset || $[30] !== t3 || $[31] !== t4) {
+		t5 = {
+			offset,
+			panel: t3,
+			scrim: t4
+		};
+		$[29] = offset;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+	} else t5 = $[32];
+	return t5;
+}
+Sheet.Body = SheetBody;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
+Sheet.Handle = SheetHandle;
+Sheet.Header = SheetHeader;
+Sheet.Title = SheetTitle;
+//#endregion
+export { Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };
+
+//# sourceMappingURL=index.js.map