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

package/src/lib/cn.parity.test.ts

@@ -0,0 +1,62 @@
+import { describe, expect, test } from "bun:test";
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { extendTailwindMerge } from "tailwind-merge";
+import { type CustomClassGroupId, TW_MERGE_CONFIG } from "../styles/tokens";
+import { cn } from "./cn";
+
+/**
+ * `cn` against the tailwind-merge it replaced, on this library's own classes.
+ *
+ * `cn` promises tailwind-merge's output for every input; this holds it to that
+ * on the strings that matter here — every class literal in a `*.variants.ts`,
+ * merged pairwise with a caller-style override, through the same
+ * `TW_MERGE_CONFIG`. tailwind-merge stays installed as `tailwind-variants`'
+ * peer, which is what makes the reference available.
+ */
+const reference = extendTailwindMerge<CustomClassGroupId>(TW_MERGE_CONFIG);
+
+function variantFiles(dir: string): string[] {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) return variantFiles(path);
+		return entry.name.endsWith(".variants.ts") ? [path] : [];
+	});
+}
+
+const literals = [
+	...new Set(
+		variantFiles(join(import.meta.dir, "../components")).flatMap((file) =>
+			[...readFileSync(file, "utf8").matchAll(/"([a-z0-9!:[\]/.\-_% ]+)"/g)]
+				.map((match) => match[1] ?? "")
+				.filter((value) => value.includes("-"))
+		)
+	),
+];
+
+const OVERRIDES = [
+	"p-4",
+	"h-12",
+	"rounded-none",
+	"bg-destructive",
+	"text-sm",
+	"text-primary",
+	"opacity-50",
+	"h-button-sm",
+];
+
+describe("cn matches tailwind-merge on the library's classes", () => {
+	test("found a real corpus", () => {
+		expect(literals.length).toBeGreaterThan(100);
+	});
+
+	test("every literal alone", () => {
+		for (const value of literals) expect(cn(value)).toBe(reference(value));
+	});
+
+	test("every literal under a caller override", () => {
+		for (const value of literals) {
+			for (const override of OVERRIDES) expect(cn(value, override)).toBe(reference(value, override));
+		}
+	});
+});

package/src/lib/cn.test.ts

@@ -134,3 +134,17 @@ describe("cn with the semantic size tokens", () => {
 		expect(cn("border-input", "text-input-md")).toBe("border-input text-input-md");
 	});
 });
+
+describe("cn with Uniwind's corner-curve utilities", () => {
+	// `border-continuous` is a Uniwind utility, not a Tailwind one, and a bare
+	// tailwind-merge files it under border *colour* — so it and `border-border`
+	// were judged to conflict and one of them was silently dropped.
+	test("a corner curve and a border colour both survive", () => {
+		expect(cn("border-continuous", "border-border")).toBe("border-continuous border-border");
+		expect(cn("border-border", "border-continuous")).toBe("border-border border-continuous");
+	});
+
+	test("one corner curve replaces the other", () => {
+		expect(cn("border-continuous", "border-circular")).toBe("border-circular");
+	});
+});

package/src/lib/cn.ts

@@ -1,11 +1,16 @@
-import { type ClassValue, clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
+import type { ClassValue } from "cn";
+import { createCn } from "cn/config";
 import { TW_MERGE_CONFIG } from "../styles/tokens";
 
 /**
- * tailwind-merge, taught the semantic size tokens from `tokens.css`.
+ * Class joining and conflict resolution, taught the semantic size tokens from `tokens.css`.
  *
- * Registering them is load-bearing rather than tidiness. tailwind-merge only
+ * Built on `cn` (shadcn-ui/cn), which replaces `clsx` + `tailwind-merge` with one
+ * engine: the same join semantics, the same merge output, and much cheaper on the
+ * repeated calls a render loop makes. `createCn` takes tailwind-merge's own
+ * `{ extend }` shape, so `TW_MERGE_CONFIG` is passed unchanged.
+ *
+ * Registering the tokens is load-bearing rather than tidiness. The merger only
  * treats two classes as conflicting when it recognises both as members of the
  * same group, and `button-md` is not a value it knows. Left unregistered,
  * `cn("h-button-md", "h-12")` returns *both* classes: they each resolve to a
@@ -15,7 +20,7 @@ import { TW_MERGE_CONFIG } from "../styles/tokens";
  *
  * `tv()` needs the same treatment for its own merger — see `lib/tv.ts`.
  */
-const twMerge = extendTailwindMerge(TW_MERGE_CONFIG);
+const merge = createCn(TW_MERGE_CONFIG);
 
 /**
  * Merges class names and resolves Tailwind conflicts so the last utility wins.
@@ -25,5 +30,5 @@ const twMerge = extendTailwindMerge(TW_MERGE_CONFIG);
  * `className` through this before handing it to a component.
  */
 export function cn(...inputs: ClassValue[]): string {
-	return twMerge(clsx(inputs));
+	return merge(...inputs);
 }

package/src/no-gorhom.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from "bun:test";
+import { readdirSync, readFileSync } from "node:fs";
+import { join, relative } from "node:path";
+
+const SRC = import.meta.dirname;
+const PACKAGE_JSON = join(SRC, "..", "package.json");
+
+/** The sheet library `BottomSheet` used to wrap. */
+const FORBIDDEN = "@gorhom/";
+
+/**
+ * Nothing in this package names the sheet library it used to wrap.
+ *
+ * `BottomSheet` is built on `@delacour/react-native-bottom-sheet` now, and the
+ * old library left as a peer with it. A stray import would make every consumer
+ * install a package nobody uses; a stray mention in a doc would send a reader
+ * to a workaround that no longer applies. Both read the same to `grep`, so this
+ * reads the whole tree as text, source and docs alike.
+ *
+ * Like `docs.test.ts`, this imports nothing from the tree — `bun test` cannot
+ * parse React Native's Flow-typed source, and it does not need to.
+ */
+function sourceFiles(dir: string): string[] {
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) return sourceFiles(path);
+		return /\.(tsx?|md|css)$/.test(entry.name) && entry.name !== "no-gorhom.test.ts" ? [path] : [];
+	});
+}
+
+const FILES = sourceFiles(SRC);
+
+describe("no gorhom", () => {
+	// An empty walk would let the assertion below pass on nothing.
+	test("finds the source tree", () => {
+		expect(FILES.length).toBeGreaterThan(50);
+	});
+
+	test("no source file or doc mentions the old sheet library", () => {
+		const offenders = FILES.filter((path) => readFileSync(path, "utf-8").includes(FORBIDDEN)).map((path) =>
+			relative(SRC, path)
+		);
+		expect(offenders).toEqual([]);
+	});
+
+	test("it is not a dependency or peer of the package", () => {
+		const pkg = JSON.parse(readFileSync(PACKAGE_JSON, "utf-8")) as Record<string, Record<string, string> | undefined>;
+		const declared = ["dependencies", "peerDependencies", "devDependencies", "optionalDependencies"].flatMap((field) =>
+			Object.keys(pkg[field] ?? {})
+		);
+		expect(declared.filter((name) => name.startsWith(FORBIDDEN))).toEqual([]);
+		expect(Object.keys(pkg.peerDependenciesMeta ?? {}).filter((name) => name.startsWith(FORBIDDEN))).toEqual([]);
+	});
+});

package/src/styles/geometry.test.ts

@@ -83,6 +83,7 @@ describe("the geometry block", () => {
 			"--spacing-navbar-row",
 			"--spacing-screen-gutter",
 			...(["sm", "md", "lg"] as const).map((step) => `--spacing-chart-${step}`),
+			...(["sm", "md", "lg"] as const).map((step) => `--spacing-fab-${step}`),
 		];
 
 		for (const name of required) {

package/src/styles/theme.css

@@ -350,6 +350,10 @@
 			--spacing-chart-sm: 160px;
 			--spacing-chart-md: 220px;
 			--spacing-chart-lg: 280px;
+
+			--spacing-fab-sm: 44px;
+			--spacing-fab-md: 56px;
+			--spacing-fab-lg: 64px;
 		}
 	}
 }

package/src/styles/tokens.css

@@ -106,6 +106,50 @@
 	--spacing-chart-sm: 160px;
 	--spacing-chart-md: 220px;
 	--spacing-chart-lg: 280px;
+
+	/*
+	 * The kicker: the tiny uppercase mono label that sits over a group, a
+	 * screen or a field. Ten points at 0.2em tracking, named as a pair so
+	 * `Text variant="kicker"` and a hand-written `text-kicker tracking-kicker`
+	 * agree. Nothing reads it unless asked, so the default look is unchanged.
+	 */
+	--text-kicker: 10px;
+	--tracking-kicker: 0.2em;
+
+	/*
+	 * The etched material: a one-pixel highlight set into a surface's edge plus
+	 * a very soft drop. Light puts the highlight on the bottom edge as a
+	 * darkening, dark puts it on the top edge as a lightening, so a card reads
+	 * as lit from above in both. They are two tokens because one `shadow-*`
+	 * utility sets one `box-shadow` and a scheme flip needs `dark:`.
+	 *
+	 * `etched-primary` is the primary button's own: a white inset top edge at
+	 * 16% that is the same in both schemes, because the fill under it is the
+	 * dark one in light and invisible against the pale one in dark.
+	 *
+	 * `focus` is the three-point halo an etched field draws round its ring
+	 * border. A neutral alpha rather than the ring colour: `color-mix` inside a
+	 * `box-shadow` does not survive Uniwind's compile and draws nothing, and
+	 * the ring is a neutral in every base ramp anyway.
+	 *
+	 * Opt-in only: no default component reads any of these.
+	 */
+	--shadow-etched: inset 0 -1px 0 0 rgb(0 0 0 / 4%), 0 1px 2px 0 rgb(0 0 0 / 5%);
+	--shadow-etched-dark: inset 0 1px 0 0 rgb(255 255 255 / 6%), 0 1px 2px 0 rgb(0 0 0 / 30%);
+	--shadow-etched-primary: inset 0 1px 0 0 rgb(255 255 255 / 16%), 0 1px 2px 0 rgb(0 0 0 / 5%);
+	--shadow-focus: 0 0 0 3px rgb(0 0 0 / 10%);
+	--shadow-focus-dark: 0 0 0 3px rgb(255 255 255 / 14%);
+
+	/*
+	 * A floating action button's footprint — the circle's edge, and the
+	 * height of an extended one. A scale of its own rather than
+	 * `--spacing-button-*`: a fab sits over content rather than in a row of
+	 * controls, so it is a step larger, and retuning a toolbar's density must
+	 * not move the one thing floating over the list.
+	 */
+	--spacing-fab-sm: 44px;
+	--spacing-fab-md: 56px;
+	--spacing-fab-lg: 64px;
 }
 
 /*

package/src/styles/tokens.test.ts

@@ -6,10 +6,14 @@ import {
 	BUTTON_SIZE_TOKENS,
 	BUTTON_TEXT_TOKENS,
 	CHART_SIZE_TOKENS,
+	ETCHED_SHADOW_TOKENS,
+	FAB_SIZE_TOKENS,
 	ICON_SIZE_TOKENS,
 	INPUT_SIZE_TOKENS,
 	INPUT_TEXT_TOKENS,
+	KICKER_TOKEN,
 	SCREEN_SIZE_TOKENS,
+	TW_MERGE_CONFIG,
 } from "./tokens";
 
 const CSS = readFileSync(join(import.meta.dirname, "tokens.css"), "utf-8");
@@ -44,6 +48,7 @@ describe("tokens.ts and tokens.css", () => {
 		const registered = [
 			...BUTTON_SIZE_TOKENS,
 			...CHART_SIZE_TOKENS,
+			...FAB_SIZE_TOKENS,
 			...ICON_SIZE_TOKENS,
 			...INPUT_SIZE_TOKENS,
 			...SCREEN_SIZE_TOKENS,
@@ -179,3 +184,54 @@ describe("the input scale", () => {
 		}
 	});
 });
+
+describe("the etched material", () => {
+	test("declares every shadow the registry names, and no other", () => {
+		const declared = [...CSS.matchAll(/--shadow-([\w-]+):/g)].map((match) => match[1]).sort();
+		expect(declared).toEqual([...ETCHED_SHADOW_TOKENS].sort());
+	});
+
+	// An inset layer is what makes it a highlight rather than a drop shadow, and
+	// the soft outer layer is what lifts the edge off the page.
+	test("light and dark edges sit on opposite sides of the surface", () => {
+		expect(CSS).toMatch(/--shadow-etched:\s*inset 0 -1px/);
+		expect(CSS).toMatch(/--shadow-etched-dark:\s*inset 0 1px/);
+		expect(CSS).toMatch(/--shadow-etched-primary:\s*inset 0 1px 0 0 rgb\(255 255 255 \/ 16%\)/);
+	});
+
+	test("registers its shadows so a caller's shadow-* can replace them", () => {
+		expect(TW_MERGE_CONFIG.extend.theme.shadow).toEqual([...ETCHED_SHADOW_TOKENS]);
+	});
+});
+
+describe("the kicker type style", () => {
+	test("is ten points, tracked at 0.2em", () => {
+		expect(px("text-kicker")).toBe(10);
+		expect(CSS).toMatch(/--tracking-kicker:\s*0\.2em;/);
+	});
+
+	test("registers both tokens so text-kicker is read as a size, not a colour", () => {
+		expect(TW_MERGE_CONFIG.extend.theme.text).toContain(KICKER_TOKEN);
+		expect(TW_MERGE_CONFIG.extend.theme.tracking).toEqual([KICKER_TOKEN]);
+	});
+});
+
+describe("the fab scale", () => {
+	test("ascends in the order the registry lists it", () => {
+		const values = FAB_SIZE_TOKENS.map((token) => px(`spacing-${token}`));
+		expect(values).toEqual([...values].sort((a, b) => a - b));
+		expect(new Set(values).size).toBe(FAB_SIZE_TOKENS.length);
+	});
+
+	// The smallest fab is still a touch target, which the platform guidelines
+	// put at 44pt — the same floor the medium button sits on.
+	test("never drops below a touch target", () => {
+		expect(px("spacing-fab-sm")).toBeGreaterThanOrEqual(44);
+	});
+
+	// A fab's glyph indexes the shared icon scale: sm → icon-md, md and lg → icon-lg.
+	test("holds its glyph with room around it", () => {
+		expect(px("spacing-icon-md")).toBeLessThan(px("spacing-fab-sm") / 2);
+		expect(px("spacing-icon-lg")).toBeLessThan(px("spacing-fab-md") / 2);
+	});
+});

package/src/styles/tokens.ts

@@ -59,6 +59,15 @@ export const INPUT_TEXT_TOKENS = ["input-sm", "input-md", "input-lg"] as const;
  */
 export const CHART_SIZE_TOKENS = ["chart-sm", "chart-md", "chart-lg"] as const;
 
+/**
+ * Suffixes in the `--spacing-*` namespace: `size-fab-md`, `h-fab-md`.
+ *
+ * A floating action button's footprint — the circle's edge, or an extended
+ * one's height. Its own scale rather than the button's, so a fab can be
+ * retuned without moving every control in a form.
+ */
+export const FAB_SIZE_TOKENS = ["fab-sm", "fab-md", "fab-lg"] as const;
+
 /**
  * The tailwind-merge extension both mergers in this package are built from.
  *
@@ -68,19 +77,38 @@ export const CHART_SIZE_TOKENS = ["chart-sm", "chart-md", "chart-lg"] as const;
  * `text-button-md` as an unrecognised utility — which is how a size token ends
  * up colliding with a colour and silently dropping it. One config, read by
  * `lib/cn.ts` and `lib/tv.ts`, so they cannot drift apart.
+ *
+ * `border-curve` is Uniwind's, not Tailwind's: `border-continuous` sets iOS's
+ * `borderCurve`. Unregistered, tailwind-merge reads it as a border *colour*,
+ * and `border-continuous border-border` loses one of the two.
  */
+/** Names of the shadows the etched material declares in `tokens.css`. */
+export const ETCHED_SHADOW_TOKENS = ["etched", "etched-dark", "etched-primary", "focus", "focus-dark"] as const;
+
+/** The size and tracking token behind `Text variant="kicker"`; one name for both. */
+export const KICKER_TOKEN = "kicker";
+
 export const TW_MERGE_CONFIG = {
 	extend: {
+		classGroups: {
+			"border-curve": ["border-continuous", "border-circular"],
+		},
 		theme: {
 			radius: [...BUTTON_RADIUS_TOKENS],
 			spacing: [
 				...BUTTON_SIZE_TOKENS,
 				...CHART_SIZE_TOKENS,
+				...FAB_SIZE_TOKENS,
 				...ICON_SIZE_TOKENS,
 				...INPUT_SIZE_TOKENS,
 				...SCREEN_SIZE_TOKENS,
 			],
-			text: [...BUTTON_TEXT_TOKENS, ...INPUT_TEXT_TOKENS],
+			shadow: [...ETCHED_SHADOW_TOKENS],
+			text: [...BUTTON_TEXT_TOKENS, ...INPUT_TEXT_TOKENS, KICKER_TOKEN],
+			tracking: [KICKER_TOKEN],
 		},
 	},
 } as const;
+
+/** Class groups `TW_MERGE_CONFIG` adds, which tailwind-merge's extension has to be told about by name. */
+export type CustomClassGroupId = keyof typeof TW_MERGE_CONFIG.extend.classGroups;

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

@@ -1,72 +0,0 @@
-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.context.tsx

@@ -1,135 +0,0 @@
-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);
-}