@delacour/react-native-ui 0.1.0-alpha.20260925053522

package/src/components/bottom-sheet/bottom-sheet-overlay.tsx

@@ -0,0 +1,180 @@
+import {
+	BottomSheetBackdrop,
+	type BottomSheetBackdropProps,
+	useBottomSheet as useGorhomBottomSheet,
+} from "@gorhom/bottom-sheet";
+import type { ReactElement, ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { withUniwind } from "uniwind";
+import { Pressable } from "../pressable";
+import {
+	BOTTOM_SHEET_BACKDROP_INDICES,
+	BOTTOM_SHEET_OVERLAY_OPACITY,
+	bottomSheetVariants,
+} from "./bottom-sheet.variants";
+
+/**
+ * gorhom's backdrop is third-party and takes a `style`, never a `className`, and
+ * it is a leaf — there is no inner view to hang classes on the way
+ * `BottomSheet.Content` and `BottomSheet.Footer` do. So it is wrapped, once, at
+ * module scope. In render `withUniwind` would mint a new component type every
+ * frame and remount the scrim mid-fade. See AGENTS.md rule 7.
+ */
+const StyledBackdrop = withUniwind(BottomSheetBackdrop);
+
+export type BottomSheetOverlayProps = Partial<BottomSheetBackdropProps> & {
+	className?: string;
+	/**
+	 * Opacity at full appearance.
+	 *
+	 * Defaults to 1 rather than gorhom's 0.5, because `--overlay` carries
+	 * its own alpha — the two would otherwise multiply and land the scrim at a
+	 * fifth of what the theme asked for.
+	 */
+	opacity?: number;
+	/** Snap index the scrim is fully in by. @default 0, the first snap point */
+	appearsOnIndex?: number;
+	/** Snap index the scrim is gone by. @default -1, the closed position */
+	disappearsOnIndex?: number;
+	/** Let touches reach the app behind the scrim. @default false */
+	enableTouchThrough?: boolean;
+	/** Close the sheet when the scrim is pressed. @default true */
+	isCloseOnPress?: boolean;
+	/** Announced on the pressable scrim. Ignored when it does not close. */
+	accessibilityLabel?: string;
+	onPress?: () => void;
+	children?: ReactNode;
+};
+
+/**
+ * The scrim over the app behind the sheet.
+ *
+ * **It is not rendered where it is written.** gorhom takes the backdrop as a
+ * `backdropComponent` render prop rather than as a child, so
+ * `BottomSheet.Portal` lifts this element out of its own children, publishes it
+ * on context, and `BottomSheet.Container` clones it into that slot with the
+ * sheet's animated position attached. Writing it as a sibling of the container is
+ * what makes the anatomy read like the thing it draws.
+ *
+ * Omit it and the sheet has no scrim at all — gorhom's own default for
+ * `backdropComponent` is nothing.
+ *
+ * **gorhom's own press handling is deliberately turned off, and the press area
+ * is rebuilt here.** Its backdrop puts a full-screen `Gesture.Tap()` behind the
+ * sheet, and Gesture Handler resolves a touch between competing GESTURES: a
+ * `Button` in the sheet has one of its own and wins, but a `TextInput` has none,
+ * so the backdrop takes the tap and the sheet closes instead of the field
+ * focusing. That is why gorhom ships its own `BottomSheetTextInput` — and taking
+ * that route would mean this package's `Input`, with its variants, its
+ * `Input.Group` and its `Field` cascade, could not be used in a sheet at all.
+ *
+ * So the scrim keeps `pressBehavior="none"` — no gesture anywhere — and a
+ * `Pressable` is laid over the region ABOVE the sheet, sized from the sheet's own
+ * `animatedPosition`. It never overlaps the sheet, so there is nothing for it to
+ * take, and pressing the part of the scrim anyone can actually see still closes.
+ * The colour and the fade stay gorhom's, driven off the sheet's position on the
+ * UI thread; the slot therefore carries no `opacity-*`, or a class and an
+ * animated style would be two writers of one property.
+ *
+ * @example
+ * <BottomSheet.Overlay />
+ *
+ * @example
+ * // A scrim that does not close the sheet — a decision the caller has to make.
+ * <BottomSheet.Overlay isCloseOnPress={false} />
+ */
+export function BottomSheetOverlay({
+	accessibilityLabel = "Close",
+	animatedIndex,
+	animatedPosition,
+	appearsOnIndex = BOTTOM_SHEET_BACKDROP_INDICES.appearsOnIndex,
+	className,
+	disappearsOnIndex = BOTTOM_SHEET_BACKDROP_INDICES.disappearsOnIndex,
+	isCloseOnPress = true,
+	opacity = BOTTOM_SHEET_OVERLAY_OPACITY,
+	onPress,
+	...props
+}: BottomSheetOverlayProps): ReactElement {
+	if (animatedIndex === undefined || animatedPosition === undefined) {
+		throw new Error(
+			"BottomSheet.Overlay must be written inside a <BottomSheet.Portal>, beside its <BottomSheet.Container>."
+		);
+	}
+
+	return (
+		<>
+			<StyledBackdrop
+				animatedIndex={animatedIndex}
+				animatedPosition={animatedPosition}
+				appearsOnIndex={appearsOnIndex}
+				className={bottomSheetVariants().overlay({ className })}
+				disappearsOnIndex={disappearsOnIndex}
+				opacity={opacity}
+				pressBehavior="none"
+				{...props}
+			/>
+			{isCloseOnPress ? (
+				<BottomSheetOverlayPressArea
+					accessibilityLabel={accessibilityLabel}
+					animatedPosition={animatedPosition}
+					onPress={onPress}
+				/>
+			) : null}
+		</>
+	);
+}
+BottomSheetOverlay.displayName = "DelacourUI.BottomSheet.Overlay";
+
+/**
+ * The pressable band between the top of the screen and the top of the sheet.
+ *
+ * Its height is the sheet's own `animatedPosition`, so it grows and shrinks with
+ * the sheet on the UI thread and stops exactly where the sheet begins — which is
+ * the whole point. The `Pressable` is a child rather than the animated view
+ * itself because `Pressable` takes no `style`: its own `Animated.View` already
+ * owns one, and a second would fight it for prop ownership every frame.
+ *
+ * It reads gorhom's `useBottomSheet()` rather than this package's. The backdrop
+ * is rendered by gorhom's own container, OUTSIDE the children
+ * `BottomSheet.Container` re-publishes its context around, so the sheet's own
+ * handle is the one thing in scope here — and closing through it lands on
+ * `onDismiss`, which is where `onOpenChange` already is.
+ */
+function BottomSheetOverlayPressArea({
+	accessibilityLabel,
+	animatedPosition,
+	onPress,
+}: {
+	accessibilityLabel: string;
+	animatedPosition: NonNullable<BottomSheetBackdropProps["animatedPosition"]>;
+	onPress?: () => void;
+}): ReactElement {
+	const { close } = useGorhomBottomSheet();
+
+	const style = useAnimatedStyle(() => ({ height: Math.max(0, animatedPosition.value) }));
+
+	const handlePress = () => {
+		onPress?.();
+		close();
+	};
+
+	return (
+		<Animated.View style={[styles.pressArea, style]}>
+			<Pressable
+				accessibilityLabel={accessibilityLabel}
+				accessibilityRole="button"
+				className="flex-1"
+				feedback="none"
+				onPress={handlePress}
+			/>
+		</Animated.View>
+	);
+}
+BottomSheetOverlayPressArea.displayName = "DelacourUI.BottomSheet.Overlay.PressArea";
+
+// A style rather than a class: the height beside it is an animated value, and the
+// two have to arrive on the same node.
+const styles = StyleSheet.create({
+	pressArea: { left: 0, position: "absolute", right: 0, top: 0 },
+});

package/src/components/bottom-sheet/bottom-sheet-portal.tsx

@@ -0,0 +1,72 @@
+import { Children, isValidElement, type ReactElement, type ReactNode, useMemo } from "react";
+import { BottomSheetPortalProvider } from "./bottom-sheet.context";
+import { BottomSheetOverlay } from "./bottom-sheet-overlay";
+
+export type BottomSheetPortalProps = {
+	children?: ReactNode;
+};
+
+/**
+ * Everything that draws above the app once the sheet is open.
+ *
+ * It renders no view of its own, and it does not portal anything either —
+ * `BottomSheetModal` already hosts itself in the `BottomSheetModalProvider` that
+ * `DelacourProvider` mounts innermost. What this part does is one thing:
+ * **it lifts the `BottomSheet.Overlay` out of its own children** and publishes it
+ * on context, so `BottomSheet.Container` can clone it into gorhom's
+ * `backdropComponent` slot.
+ *
+ * That indirection buys the anatomy. The scrim and the sheet are siblings on
+ * screen, so they read best as siblings in the tree — but gorhom takes the scrim
+ * as a render prop, and a component cannot hand a prop to a sibling. This is the
+ * seam where the two shapes are reconciled, and it is why the part exists at all
+ * rather than the container simply taking a `backdrop` prop.
+ *
+ * @example
+ * <BottomSheet.Portal>
+ *   <BottomSheet.Overlay />
+ *   <BottomSheet.Container>{…}</BottomSheet.Container>
+ * </BottomSheet.Portal>
+ */
+export function BottomSheetPortal({ children }: BottomSheetPortalProps): ReactElement {
+	const { content, overlay } = useMemo(() => hoistOverlay(children), [children]);
+	const value = useMemo(() => ({ overlay }), [overlay]);
+
+	return <BottomSheetPortalProvider value={value}>{content}</BottomSheetPortalProvider>;
+}
+BottomSheetPortal.displayName = "DelacourUI.BottomSheet.Portal";
+
+/**
+ * Splits a portal's children into the scrim and everything else.
+ *
+ * Lives here rather than with the parts: it is the portal that lifts its own
+ * children, and importing it from `bottom-sheet-overlay.tsx` would close a cycle.
+ * The same rule that keeps `withIndicator` in `radio.tsx`. See AGENTS.md.
+ *
+ * A second overlay is dropped rather than rendered — there is one
+ * `backdropComponent` slot to clone into, and silently drawing two scrims at
+ * different opacities is worse than the warning.
+ */
+function hoistOverlay(children: ReactNode): { content: ReactNode; overlay: ReactElement | null } {
+	const items = Children.toArray(children);
+	const content: ReactNode[] = [];
+	let overlay: ReactElement | null = null;
+	let seen = 0;
+
+	for (const child of items) {
+		if (isValidElement(child) && child.type === BottomSheetOverlay) {
+			seen += 1;
+			overlay ??= child;
+			continue;
+		}
+		content.push(child);
+	}
+
+	if (process.env.NODE_ENV !== "production" && seen > 1) {
+		console.warn(
+			`BottomSheet.Portal: ${seen} <BottomSheet.Overlay> elements were written; only the first is drawn. A sheet has one backdrop.`
+		);
+	}
+
+	return { content, overlay };
+}

package/src/components/bottom-sheet/bottom-sheet-scroll-view.tsx

@@ -0,0 +1,105 @@
+import { BottomSheetScrollView as GorhomBottomSheetScrollView } from "@gorhom/bottom-sheet";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { View } from "react-native";
+import { useAnimatedStyle } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { withUniwind } from "uniwind";
+import { cn } from "../../lib/cn";
+import { useBottomSheetContainerContext } from "./bottom-sheet.context";
+import { bottomSheetVariants, resolveSheetScrollEndPadding } from "./bottom-sheet.variants";
+
+type GorhomScrollViewProps = ComponentProps<typeof GorhomBottomSheetScrollView>;
+
+/**
+ * The one class prop this file uses, restated so the props survive the wrapper.
+ *
+ * `withUniwind`'s return type maps over a component's props, and over a
+ * scrollable's animated ones it collapses to a single entry — `data`,
+ * `contentContainerStyle` and the rest would all check against nothing. Writing
+ * the signature out keeps them, the way `Screen.LegendList` already has to.
+ *
+ * `contentContainerClassName` is deliberately absent even though the wrapper adds
+ * one at runtime: passing it would put a second writer on `contentContainerStyle`
+ * and cost the safe-area band — see the component's doc comment.
+ */
+type StyledScrollViewComponent = (props: GorhomScrollViewProps & { className?: string }) => ReactElement | null;
+
+// Third-party, so `className` needs the wrapper — and it has to be built at
+// module scope or every render mints a new component type and remounts the list.
+const StyledScrollView = withUniwind(GorhomBottomSheetScrollView) as unknown as StyledScrollViewComponent;
+
+export type BottomSheetScrollViewProps = Omit<
+	GorhomScrollViewProps,
+	"children" | "contentContainerStyle" | "enableFooterMarginAdjustment"
+> & {
+	className?: string;
+	/** Classes for the padded box the children sit in. */
+	contentContainerClassName?: string;
+	children?: ReactNode;
+};
+
+/**
+ * A scrolling body for a sheet taller than its snap point.
+ *
+ * Use this rather than a plain `ScrollView`: gorhom's scrollable and the sheet's
+ * pan negotiate with each other, so dragging a list that is already at its top
+ * moves the sheet instead of fighting it. A React Native `ScrollView` in here has
+ * no such arrangement, and the sheet stops responding to a drag over the list.
+ *
+ * **It needs a height to scroll within.** With `enableDynamicSizing` left on, the
+ * sheet grows to whatever the content measures and there is nothing to scroll —
+ * pass `enableDynamicSizing={false}` and explicit `snapPoints` on the
+ * `BottomSheet.Container` around it.
+ *
+ * The classes go on an inner `View`, not on gorhom's own content container, and
+ * that is not tidiness: uniwind compiles a `contentContainerClassName` into an
+ * *array* alongside any `contentContainerStyle`, and the two then fight over the
+ * one style this component has to own — the safe-area band. One writer for it.
+ *
+ * **A pinned footer shortens the scroll view; it is not reserved inside it.**
+ * The footer draws over the sheet, so a scroll view that ran the sheet's full
+ * height would carry its indicator and its overscroll bounce on underneath the
+ * footer, the bottom of the track hidden behind the buttons. So the frame gives
+ * up the footer's measured height as a `marginBottom` and ends at the footer's
+ * hairline, and the content keeps only the gap
+ * ({@link resolveSheetScrollEndPadding}). The margin is an animated style off
+ * the footer's shared value, never gorhom's `enableFooterMarginAdjustment`,
+ * which routes that height through React state and would commit a render on
+ * every frame of the keyboard animation — see `BottomSheet.Content`.
+ *
+ * @example
+ * <BottomSheet.Container enableDynamicSizing={false} snapPoints={["60%", "90%"]}>
+ *   <BottomSheet.ScrollView>{rows}</BottomSheet.ScrollView>
+ * </BottomSheet.Container>
+ */
+export function BottomSheetScrollView({
+	className,
+	contentContainerClassName,
+	children,
+	style,
+	...props
+}: BottomSheetScrollViewProps): ReactElement {
+	const container = useBottomSheetContainerContext();
+	const { bottom } = useSafeAreaInsets();
+	const hasStickyFooter = container?.hasStickyFooter ?? false;
+	const footerHeight = container?.footerHeight;
+
+	// The footer's height, band included, as the frame's own margin — so the
+	// indicator's track ends where the footer begins and follows it as the
+	// keyboard takes the band back.
+	const aboveFooter = useAnimatedStyle(() => ({
+		marginBottom: hasStickyFooter && footerHeight !== undefined ? footerHeight.value : 0,
+	}));
+
+	return (
+		<StyledScrollView
+			className={cn(className)}
+			contentContainerStyle={{ paddingBottom: resolveSheetScrollEndPadding({ bottom, hasStickyFooter }) }}
+			{...props}
+			style={[aboveFooter, style]}
+		>
+			<View className={bottomSheetVariants().scrollContent({ className: contentContainerClassName })}>{children}</View>
+		</StyledScrollView>
+	);
+}
+BottomSheetScrollView.displayName = "DelacourUI.BottomSheet.ScrollView";

package/src/components/bottom-sheet/bottom-sheet-title.tsx

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { Text, type TextPresetProps } from "../text";
+import { bottomSheetVariants } from "./bottom-sheet.variants";
+
+export type BottomSheetTitleProps = TextPresetProps;
+
+/**
+ * The sheet's heading.
+ *
+ * *Is* a `Text.Header` — it renders the preset and adds layout, never a size or a
+ * weight of its own, the same trade `Field.Label` makes with `Text.Label`. A
+ * `text-lg font-semibold` here would be a second definition of that preset which
+ * could drift from it, and the tests assert the slot carries neither.
+ *
+ * The preset already announces itself as a heading, so a screen reader reaches
+ * the sheet's purpose first with nothing said at the call site.
+ *
+ * @example
+ * <BottomSheet.Title>Keep yourself safe</BottomSheet.Title>
+ */
+export function BottomSheetTitle({ className, ...props }: BottomSheetTitleProps): ReactElement {
+	return <Text.Header className={bottomSheetVariants().title({ className })} {...props} />;
+}
+BottomSheetTitle.displayName = "DelacourUI.BottomSheet.Title";

package/src/components/bottom-sheet/bottom-sheet-trigger.tsx

@@ -0,0 +1,73 @@
+import { type ReactElement, useCallback } from "react";
+import { Slot } from "../../lib/slot";
+import { Pressable, type PressableProps } from "../pressable";
+import { useBottomSheetPart } from "./bottom-sheet.context";
+
+export type BottomSheetTriggerProps = PressableProps;
+
+/**
+ * The control that opens the sheet.
+ *
+ * On its own it is a `Pressable`, so `feedback`, `haptic` and the rest are
+ * inherited rather than restated. It opens through the same state a controlled
+ * `isOpen` drives, so a sheet can be opened from here and from elsewhere on the
+ * same screen without the two disagreeing, and a caller's own `onPress` still
+ * runs after the open.
+ *
+ * **`asChild` donates the press rather than wrapping the child**, which is where
+ * it differs from `Pressable`'s own. `Pressable asChild` keeps its gesture and
+ * renders the child inside it — correct for a child that is not itself a
+ * control, and wrong here, because the thing anyone wraps in a trigger is a
+ * `Button`. Two tap gestures in an ancestor/descendant pair are not
+ * simultaneous, so Gesture Handler gives the press to the DESCENDANT: the
+ * button's own detector wins, fires the `onPress` it does not have, and the
+ * sheet never opens. Nothing announces this — the press simply does nothing.
+ *
+ * So the trigger hands its `onPress` down as a prop instead, through `Slot`,
+ * which chains it ahead of any the child already had. The child keeps its own
+ * gesture, its own feedback and its own haptic, and there is still no extra view
+ * in the tree.
+ *
+ * The corollary: **the child has to be something that handles `onPress`.** A
+ * `View` or a `Text` takes the prop and ignores it. Wrap a `Button`, a
+ * `ListGroup.Item`, or anything else built on `Pressable`.
+ *
+ * @example
+ * <BottomSheet.Trigger asChild>
+ *   <Button variant="secondary">Open</Button>
+ * </BottomSheet.Trigger>
+ *
+ * @example
+ * // No asChild: the trigger is its own pressable.
+ * <BottomSheet.Trigger className="p-4">
+ *   <Text>Open</Text>
+ * </BottomSheet.Trigger>
+ */
+export function BottomSheetTrigger({
+	asChild = false,
+	children,
+	onPress,
+	...props
+}: BottomSheetTriggerProps): ReactElement {
+	const { open } = useBottomSheetPart("BottomSheet.Trigger");
+
+	const handlePress = useCallback(() => {
+		open();
+		onPress?.();
+	}, [onPress, open]);
+
+	if (asChild) {
+		return (
+			<Slot onPress={handlePress} {...props}>
+				{children}
+			</Slot>
+		);
+	}
+
+	return (
+		<Pressable onPress={handlePress} {...props}>
+			{children}
+		</Pressable>
+	);
+}
+BottomSheetTrigger.displayName = "DelacourUI.BottomSheet.Trigger";

package/src/components/bottom-sheet/bottom-sheet.context.tsx

@@ -0,0 +1,135 @@
+import type { BottomSheetModal } from "@gorhom/bottom-sheet";
+import { type ComponentRef, createContext, type ReactElement, type ReactNode, type RefObject, use } from "react";
+import type { SharedValue } from "react-native-reanimated";
+
+/**
+ * The imperative handle a `BottomSheetModal` exposes.
+ *
+ * Derived from the component rather than imported by name: gorhom re-exports the
+ * modal's *value* from its package root but not the `BottomSheetModalMethods`
+ * type behind its ref, and reaching into `lib/typescript/` for one would pin this
+ * package to a path that is not part of that package's public surface.
+ */
+export type BottomSheetHandle = ComponentRef<typeof BottomSheetModal>;
+
+export type BottomSheetContextValue = {
+	isOpen: boolean;
+	/** The controllable-state setter. Reports upward whether controlled or not. */
+	setOpen: (isOpen: boolean) => void;
+	open: () => void;
+	close: () => void;
+	/**
+	 * The modal's handle, for the imperative calls that have no declarative form —
+	 * `snapToIndex`, `expand`, `collapse`. Presenting and dismissing are driven by
+	 * `isOpen` instead, so a caller never has to keep two sources in step.
+	 */
+	sheetRef: RefObject<BottomSheetHandle | null>;
+};
+
+const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);
+
+export function BottomSheetProvider({
+	value,
+	children,
+}: {
+	value: BottomSheetContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <BottomSheetContext value={value}>{children}</BottomSheetContext>;
+}
+BottomSheetProvider.displayName = "DelacourUI.BottomSheet.Provider";
+
+/** The sheet's state, or `null` outside one. For a component that works either way. */
+export function useBottomSheetContext(): BottomSheetContextValue | null {
+	return use(BottomSheetContext);
+}
+
+/**
+ * The enclosing sheet's open state and controls.
+ *
+ * Reach for this to drive a sheet from a control of your own — a row that closes
+ * it, a button that snaps it somewhere — without threading props down.
+ */
+export function useBottomSheet(): BottomSheetContextValue {
+	const context = use(BottomSheetContext);
+	if (context === null) throw new Error("useBottomSheet must be called inside a <BottomSheet>.");
+	return context;
+}
+
+/** The same read, with a message naming the part that is misplaced. Internal. */
+export function useBottomSheetPart(component: string): BottomSheetContextValue {
+	const context = use(BottomSheetContext);
+	if (context === null) throw new Error(`${component} must be rendered inside a <BottomSheet>.`);
+	return context;
+}
+
+export type BottomSheetPortalContextValue = {
+	/**
+	 * The `BottomSheet.Overlay` element the portal lifted out of its own children,
+	 * or `null` when none was written.
+	 *
+	 * gorhom takes the scrim as a `backdropComponent` render prop rather than as a
+	 * child, so the element cannot be rendered where it was declared. The portal
+	 * publishes it here and `BottomSheet.Container` clones it into that slot.
+	 */
+	overlay: ReactElement | null;
+};
+
+const BottomSheetPortalContext = createContext<BottomSheetPortalContextValue | null>(null);
+
+export function BottomSheetPortalProvider({
+	value,
+	children,
+}: {
+	value: BottomSheetPortalContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <BottomSheetPortalContext value={value}>{children}</BottomSheetPortalContext>;
+}
+BottomSheetPortalProvider.displayName = "DelacourUI.BottomSheet.Portal.Provider";
+
+/** What the enclosing portal lifted out, or `null` for a container written without one. */
+export function useBottomSheetPortalContext(): BottomSheetPortalContextValue | null {
+	return use(BottomSheetPortalContext);
+}
+
+export type BottomSheetContainerContextValue = {
+	/**
+	 * Whether a pinned footer is drawing at the bottom of this sheet.
+	 *
+	 * `BottomSheet.Content` reads it to decide whether the safe-area band is its
+	 * to apply. Exactly one part takes it: both applying leaves a gap the height
+	 * of the home indicator between the content and the footer.
+	 */
+	hasStickyFooter: boolean;
+	/**
+	 * What a pinned footer covers, measured, in points.
+	 *
+	 * A shared value rather than state: it changes on every frame of the keyboard
+	 * animation as the footer gives up its safe-area band, and the body reserves it
+	 * with an animated spacer. Routing that through React would commit a dozen
+	 * renders per keystroke's worth of keyboard travel. `Screen` publishes its own
+	 * chrome the same way.
+	 *
+	 * Zero when there is no pinned footer.
+	 */
+	footerHeight: SharedValue<number>;
+};
+
+const BottomSheetContainerContext = createContext<BottomSheetContainerContextValue | null>(null);
+
+export function BottomSheetContainerProvider({
+	value,
+	children,
+}: {
+	value: BottomSheetContainerContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <BottomSheetContainerContext value={value}>{children}</BottomSheetContainerContext>;
+}
+BottomSheetContainerProvider.displayName = "DelacourUI.BottomSheet.Container.Provider";
+
+/** The enclosing container's layout facts, or `null` outside one. */
+export function useBottomSheetContainerContext(): BottomSheetContainerContextValue | null {
+	return use(BottomSheetContainerContext);
+}