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

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

@@ -0,0 +1,245 @@
+import {
+	type BottomSheetBackdropProps,
+	BottomSheetModal,
+	type BottomSheetModalProps,
+	type BottomSheetBackgroundProps as GorhomBottomSheetBackgroundProps,
+	type BottomSheetFooterProps as GorhomBottomSheetFooterProps,
+	type BottomSheetHandleProps as GorhomBottomSheetHandleProps,
+} from "@gorhom/bottom-sheet";
+import {
+	Children,
+	cloneElement,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+} from "react";
+import { useSharedValue } from "react-native-reanimated";
+import { useKeyboardAnimationGuard } from "../../hooks/use-keyboard-state-sync";
+import {
+	BottomSheetContainerProvider,
+	BottomSheetProvider,
+	useBottomSheetPart,
+	useBottomSheetPortalContext,
+} from "./bottom-sheet.context";
+import {
+	BOTTOM_SHEET_KEYBOARD_DEFAULTS,
+	type BottomSheetFooterFlag,
+	type BottomSheetFooterPlacement,
+	resolveFooterPlacement,
+} from "./bottom-sheet.variants";
+import { BottomSheetBackground } from "./bottom-sheet-background";
+import { BottomSheetFooter, type BottomSheetFooterProps } from "./bottom-sheet-footer";
+import { BottomSheetHandle } from "./bottom-sheet-handle";
+
+export type BottomSheetContainerProps = Omit<
+	BottomSheetModalProps,
+	"backdropComponent" | "backgroundComponent" | "children" | "footerComponent" | "handleComponent" | "onDismiss" | "ref"
+> & {
+	children?: ReactNode;
+	/** Classes for the sheet's surface — the box behind the handle and the content. */
+	backgroundClassName?: string;
+	/** Classes for the row the grabber sits in. */
+	handleClassName?: string;
+	/** Classes for the grabber itself. */
+	handleIndicatorClassName?: string;
+};
+
+/**
+ * The sheet itself: the surface that slides up, and everything inside it.
+ *
+ * Every gorhom prop passes through, so snap points, dynamic sizing, the pan
+ * gestures and the animation configs are all reachable. Four are not, because
+ * this component supplies them: the backdrop and the footer are cloned from the
+ * parts a caller wrote, and the background and the handle are rendered as views
+ * of this package's own so they can take a `className` rather than a style.
+ *
+ * **It takes no `className`.** gorhom's modal wears an animated style that the
+ * sheet's own position writes to every frame, so there is nothing here for a
+ * class to reach that `backgroundClassName` does not already reach better. The
+ * same trade `Screen.Footer` makes — that file takes a `style` and never a
+ * `className`, and so wraps nothing in `withUniwind`.
+ *
+ * **Presenting is driven by state, never by the ref.** `isOpen` on the root is
+ * the one source, so a swipe-down, a backdrop press, `BottomSheet.Close` and a
+ * programmatic close all arrive at the same `onOpenChange`. gorhom's own
+ * `onDismiss` is therefore not forwarded: two callbacks for one event is two
+ * things that can disagree. `useBottomSheet().sheetRef` is still there for the
+ * imperative calls with no declarative form — `snapToIndex`, `expand`.
+ *
+ * **`accessible` defaults to `false`, and that is not a small thing.** gorhom
+ * marks the sheet's content container `accessible` with the label "Bottom
+ * Sheet" and the `adjustable` role. On iOS an `accessible` container collapses
+ * its whole subtree into ONE element, so every field, button and line of copy in
+ * the sheet becomes unreachable to VoiceOver — a form in a sheet cannot be
+ * filled in at all. This is `Field`'s rule one component along: the row is
+ * `accessible={false}` so the control stays the element a screen reader sees.
+ * Pass `accessible` to opt back into gorhom's behaviour for a sheet whose body
+ * really is one adjustable thing.
+ *
+ * Three defaults differ from gorhom's. `enablePanDownToClose` is on, because a
+ * modal sheet has no collapsed resting state to pan down to. And the keyboard
+ * trio comes from `BOTTOM_SHEET_KEYBOARD_DEFAULTS` — see that const for why
+ * Android must not be left on `adjustPan`. Both are ordinary props, so either
+ * can be turned back off.
+ *
+ * @example
+ * <BottomSheet.Container>
+ *   <BottomSheet.Content>{…}</BottomSheet.Content>
+ * </BottomSheet.Container>
+ *
+ * @example
+ * // A scrollable sheet needs a fixed height to scroll within.
+ * <BottomSheet.Container enableDynamicSizing={false} snapPoints={["50%", "90%"]}>
+ *   <BottomSheet.ScrollView>{rows}</BottomSheet.ScrollView>
+ *   <BottomSheet.Footer sticky>{actions}</BottomSheet.Footer>
+ * </BottomSheet.Container>
+ */
+export function BottomSheetContainer({
+	accessible = false,
+	backgroundClassName,
+	children,
+	enablePanDownToClose = true,
+	handleClassName,
+	handleIndicatorClassName,
+	...props
+}: BottomSheetContainerProps): ReactElement {
+	const sheet = useBottomSheetPart("BottomSheet.Container");
+	const { isOpen, setOpen, sheetRef } = sheet;
+	const portal = useBottomSheetPortalContext();
+	// A sheet that opens while `KeyboardProvider`'s shared values are pinned open
+	// by a keyboard that vanished without a `will` event would size itself for a
+	// keyboard that is not there. `Screen.Footer` runs the same repair on mount.
+	useKeyboardAnimationGuard();
+
+	// Whether this sheet has ever been presented. A JS ref rather than state:
+	// nothing renders differently for it, and it has to be readable inside the
+	// effect that sets it.
+	const hasPresentedRef = useRef(false);
+
+	const { content, footer, placement } = useMemo(() => hoistFooter(children), [children]);
+	const hasStickyFooter = placement === "sticky";
+	const overlay = portal?.overlay ?? null;
+
+	// Written by the pinned footer's own onLayout, read by the body's spacer. It
+	// lives here because the two are siblings in gorhom's tree and neither can see
+	// the other — the footer is rendered outside the children this file wraps.
+	const footerHeight = useSharedValue(0);
+
+	const containerValue = useMemo(() => ({ footerHeight, hasStickyFooter }), [footerHeight, hasStickyFooter]);
+
+	const backdropComponent = useMemo(
+		() =>
+			overlay === null ? undefined : (backdropProps: BottomSheetBackdropProps) => cloneElement(overlay, backdropProps),
+		[overlay]
+	);
+
+	const footerComponent = useMemo(
+		() =>
+			footer === null
+				? undefined
+				: (footerProps: GorhomBottomSheetFooterProps) => cloneElement(footer, { ...footerProps, footerHeight }),
+		[footer, footerHeight]
+	);
+
+	const backgroundComponent = useCallback(
+		(backgroundProps: GorhomBottomSheetBackgroundProps) => (
+			<BottomSheetBackground {...backgroundProps} className={backgroundClassName} />
+		),
+		[backgroundClassName]
+	);
+
+	const handleComponent = useCallback(
+		(handleProps: GorhomBottomSheetHandleProps) => (
+			<BottomSheetHandle {...handleProps} className={handleClassName} indicatorClassName={handleIndicatorClassName} />
+		),
+		[handleClassName, handleIndicatorClassName]
+	);
+
+	const handleDismiss = useCallback(() => {
+		hasPresentedRef.current = false;
+		setOpen(false);
+	}, [setOpen]);
+
+	useEffect(() => {
+		if (isOpen) {
+			hasPresentedRef.current = true;
+			sheetRef.current?.present();
+			return;
+		}
+
+		// Dismissing a modal that was never presented is NOT a no-op, and this is
+		// the sharpest edge in the component. gorhom's modal starts at status
+		// `INITIAL`; `dismiss()` reads that as a live sheet being closed and moves
+		// it to `DISMISSING`, where it stays. The next `present()` then mounts the
+		// portal and renders the sheet — and it never animates in, never lays out
+		// its content, and never fires `onChange`. Nothing is logged, nothing
+		// throws, and the screen simply does not change.
+		if (!hasPresentedRef.current) return;
+		hasPresentedRef.current = false;
+		sheetRef.current?.dismiss();
+	}, [isOpen, sheetRef]);
+
+	return (
+		<BottomSheetModal
+			accessible={accessible}
+			backdropComponent={backdropComponent}
+			backgroundComponent={backgroundComponent}
+			enablePanDownToClose={enablePanDownToClose}
+			footerComponent={footerComponent}
+			handleComponent={handleComponent}
+			onDismiss={handleDismiss}
+			ref={sheetRef}
+			{...BOTTOM_SHEET_KEYBOARD_DEFAULTS}
+			{...props}
+		>
+			<BottomSheetProvider value={sheet}>
+				<BottomSheetContainerProvider value={containerValue}>{content}</BottomSheetContainerProvider>
+			</BottomSheetProvider>
+		</BottomSheetModal>
+	);
+}
+BottomSheetContainer.displayName = "DelacourUI.BottomSheet.Container";
+
+/**
+ * Splits a container's children into the body and a footer to be pinned.
+ *
+ * gorhom takes a footer as a `footerComponent` render prop rather than as a
+ * child, so a sticky one has to leave the tree it was written in; an inline one
+ * stays put and is simply part of the body. {@link resolveFooterPlacement} is the
+ * decision and is pure, so `bun test` reaches the whole matrix — this walk only
+ * turns children into the flags it reads.
+ *
+ * Lives here rather than with the parts: it is the container that lifts its own
+ * children, and importing it from `bottom-sheet-footer.tsx` would close a cycle.
+ * See AGENTS.md.
+ */
+function hoistFooter(children: ReactNode): {
+	content: ReactNode;
+	footer: ReactElement<BottomSheetFooterProps> | null;
+	placement: BottomSheetFooterPlacement;
+} {
+	const items = Children.toArray(children);
+	const flags: BottomSheetFooterFlag[] = [];
+	let footer: ReactElement<BottomSheetFooterProps> | null = null;
+
+	for (const child of items) {
+		if (!isValidElement(child) || child.type !== BottomSheetFooter) {
+			flags.push({ isFooter: false, isSticky: false });
+			continue;
+		}
+
+		const element = child as ReactElement<BottomSheetFooterProps>;
+		const isSticky = element.props.sticky === true;
+		flags.push({ isFooter: true, isSticky });
+		if (isSticky) footer ??= element;
+	}
+
+	const placement = resolveFooterPlacement(flags);
+	if (placement !== "sticky" || footer === null) return { content: items, footer: null, placement };
+
+	return { content: items.filter((child) => child !== footer), footer, placement };
+}

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

@@ -0,0 +1,66 @@
+import { BottomSheetView } from "@gorhom/bottom-sheet";
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useBottomSheetContainerContext } from "./bottom-sheet.context";
+import { BOTTOM_SHEET_FOOTER_GAP, bottomSheetVariants, resolveSheetBottomInset } from "./bottom-sheet.variants";
+
+export type BottomSheetContentProps = ViewProps & {
+	className?: string;
+};
+
+/**
+ * The sheet's body — what a caller writes the title, the copy and the controls
+ * into.
+ *
+ * Two boxes, and neither is a `withUniwind` wrapper. gorhom's `BottomSheetView`
+ * is the outer one: it measures itself into the sheet's layout state, which is
+ * what makes `enableDynamicSizing` size the sheet to whatever is inside. The
+ * inner `View` is an ordinary React Native one and carries every class, so this
+ * file wraps nothing — the same move `Screen.Footer` makes with
+ * `KeyboardStickyView`.
+ *
+ * **A pinned footer is reserved by a spacer, not by gorhom's
+ * `enableFooterMarginAdjustment`.** That prop turns the footer's measured height
+ * into content-container padding through React state — a commit on every frame
+ * of the keyboard animation, because the footer changes height as it gives up
+ * its safe-area band. A spacer whose height is an animated style off the same
+ * shared value costs nothing on the JS thread, and `Screen` already reserves its
+ * own chrome exactly this way. The spacer sits OUTSIDE the classed box so the
+ * content's own `gap` does not land in front of it and quietly double the
+ * {@link BOTTOM_SHEET_FOOTER_GAP} the footer is held off by.
+ *
+ * **The safe-area band goes on the OUTER box, and only when nothing else is
+ * paying for it** — a pinned footer's own box carries it, so
+ * {@link resolveSheetBottomInset} withholds it here. The band comes from
+ * `useSafeAreaInsets()` and never from `pb-safe`, which compiles to
+ * `env(safe-area-inset-bottom)` and resolves to zero on React Native.
+ *
+ * @example
+ * <BottomSheet.Content>
+ *   <BottomSheet.Title>Delete this file?</BottomSheet.Title>
+ *   <BottomSheet.Description>This cannot be undone.</BottomSheet.Description>
+ * </BottomSheet.Content>
+ */
+export function BottomSheetContent({ className, children, style, ...props }: BottomSheetContentProps): ReactElement {
+	const container = useBottomSheetContainerContext();
+	const { bottom } = useSafeAreaInsets();
+	const hasStickyFooter = container?.hasStickyFooter ?? false;
+	const footerHeight = container?.footerHeight;
+	const paddingBottom = resolveSheetBottomInset({ bottom, hasStickyFooter });
+
+	const reserve = useAnimatedStyle(() => ({
+		height: footerHeight === undefined ? 0 : footerHeight.value + BOTTOM_SHEET_FOOTER_GAP,
+	}));
+
+	return (
+		<BottomSheetView style={{ paddingBottom }}>
+			<View className={bottomSheetVariants().content({ className })} style={style} {...props}>
+				{children}
+			</View>
+			{hasStickyFooter ? <Animated.View style={reserve} /> : null}
+		</BottomSheetView>
+	);
+}
+BottomSheetContent.displayName = "DelacourUI.BottomSheet.Content";

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

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import { cn } from "../../lib/cn";
+import { Text, type TextPresetProps } from "../text";
+
+export type BottomSheetDescriptionProps = TextPresetProps;
+
+/**
+ * Supporting copy under the sheet's title.
+ *
+ * *Is* a `Text.Paragraph`, defaulting to the muted token — the title is what the
+ * sheet is about and this is what it means, so the two need to read as a
+ * hierarchy rather than as two equal lines. `color` is an ordinary prop, so a
+ * description that needs the page colour asks for it.
+ *
+ * It has no slot in `bottomSheetVariants`, and that is deliberate: it carries no
+ * layout of its own, and `tv` emits `undefined` for an empty class string, so a
+ * slot here would be one nothing could assert against.
+ *
+ * @example
+ * <BottomSheet.Description>Update to the latest version.</BottomSheet.Description>
+ */
+export function BottomSheetDescription({
+	className,
+	color = "muted",
+	...props
+}: BottomSheetDescriptionProps): ReactElement {
+	return <Text.Paragraph className={cn(className)} color={color} {...props} />;
+}
+BottomSheetDescription.displayName = "DelacourUI.BottomSheet.Description";

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

@@ -0,0 +1,148 @@
+import { BottomSheetFooter as GorhomBottomSheetFooter } from "@gorhom/bottom-sheet";
+import { type ComponentProps, type ReactElement, type ReactNode, useCallback, useEffect } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import Animated, { type SharedValue, useAnimatedStyle } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BOTTOM_SHEET_FOOTER_PADDING, bottomSheetVariants } from "./bottom-sheet.variants";
+
+type GorhomFooterProps = ComponentProps<typeof GorhomBottomSheetFooter>;
+
+export type BottomSheetFooterProps = Omit<ViewProps, "children"> & {
+	/**
+	 * Pin the footer to the bottom of the sheet, above the keyboard, instead of
+	 * leaving it in the content's flow.
+	 *
+	 * Off by default, matching `Screen.Footer` — a footer holding a submit button
+	 * under a short sheet wants to sit where it was written, and a sheet only
+	 * needs the pinned treatment once its body can scroll under one.
+	 *
+	 * @default false
+	 */
+	sticky?: boolean;
+	className?: string;
+	children?: ReactNode;
+	/**
+	 * The sheet's own footer position. Injected by `BottomSheet.Container` when it
+	 * hoists a sticky footer; never written at a call site.
+	 */
+	animatedFooterPosition?: GorhomFooterProps["animatedFooterPosition"];
+	/**
+	 * Where this footer publishes its measured height. Injected alongside the
+	 * position, and read by whatever the sheet's body is so it can reserve exactly
+	 * what the footer covers. Never written at a call site.
+	 */
+	footerHeight?: SharedValue<number>;
+};
+
+/**
+ * A row of controls at the bottom of the sheet — pinned, or in the flow.
+ *
+ * **A sticky footer is not rendered where it is written.** gorhom takes it as a
+ * `footerComponent` render prop rather than as a child, so
+ * `BottomSheet.Container` lifts this element out of its children and clones it
+ * into that slot with the sheet's animated footer position attached. An inline
+ * footer needs none of that and stays exactly where it was put.
+ *
+ * The two branches deliberately look different. An inline footer is in the flow
+ * and inherits the sheet's surface; a pinned one draws OVER the content, so it
+ * brings a background and a top hairline of its own — without them the content
+ * scrolls straight through it and its buttons are legible only where they happen
+ * to overlap blank space. That is `Screen.Footer`'s rule about its backing, one
+ * component along.
+ *
+ * **A pinned footer is TALLER by the safe-area band; it is not moved up by it.**
+ * gorhom's own `bottomInset` translates the whole footer up instead, which
+ * leaves a band the height of the home indicator between the footer and the
+ * bottom of the sheet — and the content scrolls through it in plain view. So
+ * `bottomInset` stays 0 and the band becomes the footer's own `paddingBottom`,
+ * which puts its surface against the bottom of the screen where it belongs.
+ *
+ * The keyboard then needs that band back, and **only that band**. Its own
+ * padding stays, so the controls never end up flush against the keyboard, and
+ * the footer genuinely gets shorter rather than sliding down — which is what
+ * lets the body's reserve shrink with it instead of over-reserving by the height
+ * of a home indicator that is no longer there.
+ *
+ * It publishes its measured height into the sheet, and `BottomSheet.Content` and
+ * `BottomSheet.ScrollView` reserve exactly that plus a gap. The height is a
+ * shared value read by an animated spacer, never content-container padding —
+ * `Screen` reserves its own chrome the same way and for the same reason.
+ *
+ * **Do not put a `KeyboardStickyView` in here.** gorhom's `animatedFooterPosition`
+ * already carries the footer clear of the keyboard; this translate only gives up
+ * the safe-area band on top of that. A third mechanism moving the same view
+ * would fight both for prop ownership every frame.
+ *
+ * Written with `sticky` but rendered outside a container, it falls back to the
+ * inline branch rather than throwing: there is no footer position to ride, and a
+ * row of buttons in the flow is the useful failure.
+ *
+ * @example
+ * <BottomSheet.Footer>
+ *   <Button onPress={save}>Save</Button>
+ * </BottomSheet.Footer>
+ *
+ * @example
+ * <BottomSheet.Footer sticky>
+ *   <Button onPress={submit}>Submit</Button>
+ * </BottomSheet.Footer>
+ */
+export function BottomSheetFooter({
+	animatedFooterPosition,
+	className,
+	children,
+	footerHeight,
+	onLayout,
+	sticky = false,
+	style,
+	...props
+}: BottomSheetFooterProps): ReactElement {
+	const { bottom } = useSafeAreaInsets();
+	const { progress } = useReanimatedKeyboardAnimation();
+	const slots = bottomSheetVariants();
+
+	// The footer keeps its own padding and gives up only the safe-area band, which
+	// collapses as the keyboard arrives. `progress` runs 0 → 1 over the keyboard's
+	// own animation, so the two travel together.
+	const padding = useAnimatedStyle(() => ({
+		paddingBottom: BOTTOM_SHEET_FOOTER_PADDING + bottom * (1 - progress.value),
+		paddingTop: BOTTOM_SHEET_FOOTER_PADDING,
+	}));
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			if (footerHeight) footerHeight.value = event.nativeEvent.layout.height;
+			onLayout?.(event);
+		},
+		[footerHeight, onLayout]
+	);
+
+	useEffect(() => {
+		return () => {
+			if (footerHeight) footerHeight.value = 0;
+		};
+	}, [footerHeight]);
+
+	if (!sticky || animatedFooterPosition === undefined) {
+		return (
+			<View className={slots.footer({ className })} style={style} {...props}>
+				{children}
+			</View>
+		);
+	}
+
+	return (
+		<GorhomBottomSheetFooter animatedFooterPosition={animatedFooterPosition} bottomInset={0}>
+			<Animated.View
+				className={slots.stickyFooter({ className })}
+				onLayout={handleLayout}
+				style={[padding, style]}
+				{...props}
+			>
+				{children}
+			</Animated.View>
+		</GorhomBottomSheetFooter>
+	);
+}
+BottomSheetFooter.displayName = "DelacourUI.BottomSheet.Footer";

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

@@ -0,0 +1,47 @@
+import type { BottomSheetHandleProps as GorhomBottomSheetHandleProps } from "@gorhom/bottom-sheet";
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { bottomSheetVariants } from "./bottom-sheet.variants";
+
+export type BottomSheetHandleProps = Partial<GorhomBottomSheetHandleProps> &
+	Omit<ViewProps, "children"> & {
+		className?: string;
+		/** Style for the pill itself. What gorhom's `handleIndicatorStyle` becomes. */
+		indicatorStyle?: ViewProps["style"];
+		indicatorClassName?: string;
+	};
+
+/**
+ * The grabber at the top of the sheet.
+ *
+ * Supplied to gorhom as `handleComponent` for the same reason the background is:
+ * this package paints with classNames, and gorhom's `handleStyle` /
+ * `handleIndicatorStyle` cannot carry one. Both still arrive — gorhom passes
+ * them down as `style` and `indicatorStyle` — so a caller who has a style object
+ * rather than a class is not locked out.
+ *
+ * The pill is drawn but never announced: gorhom's own handle container wraps this
+ * in the `Animated.View` that owns the pan and carries the accessibility surface,
+ * so a second announced element here would put a nameless control in front of
+ * every sheet.
+ *
+ * The two animated variables are destructured off rather than spread — see
+ * `BottomSheetBackground`.
+ */
+export function BottomSheetHandle({
+	animatedIndex: _animatedIndex,
+	animatedPosition: _animatedPosition,
+	className,
+	indicatorClassName,
+	indicatorStyle,
+	...props
+}: BottomSheetHandleProps): ReactElement {
+	const slots = bottomSheetVariants();
+
+	return (
+		<View className={slots.handle({ className })} {...props}>
+			<View className={slots.handleIndicator({ className: indicatorClassName })} style={indicatorStyle} />
+		</View>
+	);
+}
+BottomSheetHandle.displayName = "DelacourUI.BottomSheet.Handle";