@delacour/react-native-ui 0.5.0-alpha.20261022200024 → 0.5.0-alpha.20261023075140

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261022200024",
+	"version": "0.5.0-alpha.20261023075140",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -182,8 +182,8 @@
 		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": ">=0.2.0",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261022200024",
+		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261023075140",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261023075140",
 		"@legendapp/list": ">=3.3",
 		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",

package/src/components/direction/AGENTS.md

@@ -84,8 +84,11 @@ they are unit-testable.
 - `bun test packages/react-native-ui/src/components/direction` — the resolvers.
 <!-- /registry:omit -->
 - Simulator, 2026-10-05, via warden + agent-device on the toggle demo: before the toggle,
-  `dir-step-one` at x 37; after, at x 261 and `dir-step-three` at x 37. The nested LTR row
-  (`dir-fixed-1..3`) kept x 37 / 149 / 261 in both states.
+  `dir-step-one` at x 37; after, at x 261 and `dir-step-three` at x 37. The demo then also held a
+  nested LTR number row that kept x 37 / 149 / 261 in both states; it was dropped from `toggle`
+  (2026-10-22) because a row that stays put while the card flips reads as broken in the clip.
+  Nesting is shown by `nested-override`, and the number row (`dir-number-1..3`) now mirrors with
+  the card.
 - Previews captured 2026-10-06 on an iPhone 17 Pro dev client (`--dev`): `toggle` is the hero clip
   (flow `direction/toggle`, flips to RTL and back so it loops); `mirrored-rows`, `nested-override` and
   `uniwind-variants` are stills. All four are `align: "stretch"`.

package/src/components/input/AGENTS.md

@@ -119,6 +119,13 @@ or drops its focus.
 - **A block makes the box a floor, not a height.** With one present the box
   takes the multiline branch (min height + vertical padding) whatever the field
   is; the row keeps its own alignment, so a single-line field stays centred.
+- **A block bleeds through the box's vertical padding on its outer edge.** That
+  padding is the field's. Stacked on the block's own `py-*`, it set a toolbar
+  half again as far from the border as from its separator and left the same
+  slack under a footer's counter. The block takes a `-mt-*` / `-mb-*` equal to
+  the multiline `py-*` (the `blockPosition` compounds), the way a horizontal
+  `Separator` bleeds through the horizontal inset, so its own padding is all
+  there is on either side.
 - **A `Block` draws no border.** Divide it from the row with a `Separator`, or
   leave it flush. Bare text and `Icon`s in it take the decorator treatment.
 - **`Separator` has no `orientation` prop.** `InputGroupPlacementProvider` tells

package/src/components/input/input-group-block.tsx

@@ -38,10 +38,10 @@ export type InputGroupBlockProps = {
  *   </Input.Group.Block>
  * </Input.Group>
  */
-export function InputGroupBlock({ className, children }: InputGroupBlockProps): ReactElement {
+export function InputGroupBlock({ position, className, children }: InputGroupBlockProps): ReactElement {
 	const { isInvalid, size } = useInputGroupPart("Input.Group.Block");
 	const placement = useInputGroupPlacement();
-	const slots = inputVariants({ isInvalid, size });
+	const slots = inputVariants({ blockPosition: position, isInvalid, size });
 
 	if (process.env.NODE_ENV !== "production" && placement === "row") {
 		console.warn(

package/src/components/input/input.variants.test.ts

@@ -496,6 +496,21 @@ describe("a block", () => {
 		expect(inputVariants().block()).toContain("flex-row");
 	});
 
+	// The box's vertical padding is the field's. Stacked on a block's own, it
+	// left a toolbar half again as far from the border as from its separator,
+	// and the same slack under a footer. A block bleeds out by exactly that
+	// padding on its outer edge, so its own padding is all there is either side.
+	test("bleeds out through the box's vertical padding on its outer edge", () => {
+		for (const size of INPUT_SIZES) {
+			const padding = resolveInputGroupClass({ hasBlocks: true, size }).match(/\bpy-([\d.]+)\b/)?.[1];
+			expect(padding).toBeDefined();
+			expect(inputVariants({ blockPosition: "start", size }).block()).toMatch(new RegExp(`(?:^|\\s)-mt-${padding}\\b`));
+			expect(inputVariants({ blockPosition: "end", size }).block()).toMatch(new RegExp(`(?:^|\\s)-mb-${padding}\\b`));
+			expect(inputVariants({ blockPosition: "start", size }).block()).not.toMatch(/-mb-/);
+			expect(inputVariants({ blockPosition: "end", size }).block()).not.toMatch(/-mt-/);
+		}
+	});
+
 	test("carries no raw palette colour and no chrome", () => {
 		for (const state of everyBoxState()) {
 			const block = inputVariants(state).block();

package/src/components/input/input.variants.ts

@@ -140,6 +140,11 @@ export const inputVariants = tv({
 			row: { separator: "my-2 w-px self-stretch" },
 			box: { separator: "h-px self-stretch" },
 		},
+		/**
+		 * Which edge of the box a block sits on. `none` is everything that is
+		 * not a block.
+		 */
+		blockPosition: { none: {}, start: {}, end: {} },
 		isDisabled: { true: { root: "opacity-50" }, false: {} },
 		isMultiline: { true: {}, false: {} },
 		// A grouped field shares its row, so it stretches — and it clears React
@@ -190,6 +195,18 @@ export const inputVariants = tv({
 		{ placement: "box", size: "sm", class: { separator: "-mx-2.5" } },
 		{ placement: "box", size: "md", class: { separator: "-mx-3" } },
 		{ placement: "box", size: "lg", class: { separator: "-mx-3.5" } },
+		// A block bleeds out through the box's vertical padding on its outer
+		// edge, the way a horizontal hairline bleeds through the horizontal. That
+		// padding is the field's breathing room; stacked on the block's own it
+		// set a toolbar half again as far from the border as from its separator,
+		// and left the same slack under a footer. Each value is the multiline
+		// `py-*` above, so the block's own padding is all there is either side.
+		{ blockPosition: "start", size: "sm", class: { block: "-mt-2" } },
+		{ blockPosition: "start", size: "md", class: { block: "-mt-2.5" } },
+		{ blockPosition: "start", size: "lg", class: { block: "-mt-3" } },
+		{ blockPosition: "end", size: "sm", class: { block: "-mb-2" } },
+		{ blockPosition: "end", size: "md", class: { block: "-mb-2.5" } },
+		{ blockPosition: "end", size: "lg", class: { block: "-mb-3" } },
 		// The corner a lone field draws: the generic ramp, deliberately not the
 		// button's, because a field and the button beside it are meant to be
 		// retunable apart. `sm` steps down a notch; the other two share `lg`.
@@ -288,6 +305,7 @@ export const inputVariants = tv({
 		isMultiline: false,
 		isGrouped: false,
 		placement: "row",
+		blockPosition: "none",
 		orientation: "horizontal",
 		groupPosition: "none",
 		isSeamed: false,

package/src/components/markdown-editor/AGENTS.md

@@ -99,7 +99,11 @@ parts.
   on `bg-card` and its `secondary` filled `bg-secondary`, and its `etched` the same
   card fill with the highlight set into its edge; the preview draws the same
   three — a test reads `inputVariants` and fails if they part —
-  so flipping modes never changes what kind of box is on screen. On the
+  so flipping modes never changes what kind of box is on screen. Its corners
+  are the write pane's too — read from `inputVariants` per size — and it hands
+  its box to `resolveMarkdownPaneClass` as `base`, merged before the `bar`'s
+  `rounded-t-none`; passed as a className, its own `rounded-lg` once won and
+  the preview grew round top corners the write pane did not have. On the
   filled one an inline code run lifts to `bg-card`, or `Text.Code`'s muted run
   would vanish into it. Floored at the write pane's height
   (`resolveTextareaRowsHeight`) so flipping does not jump the screen. It is a

package/src/components/markdown-editor/markdown-editor-preview.tsx

@@ -39,13 +39,14 @@ export function MarkdownEditorPreview({
 
 	if (editor.mode !== "preview") return null;
 
-	const slots = markdownEditorVariants({ variant: editor.variant });
+	const slots = markdownEditorVariants({ size: editor.size, variant: editor.variant });
 
 	return (
 		<Animated.View
 			accessibilityLabel="Preview"
 			className={resolveMarkdownPaneClass({
-				className: [slots.preview(), className].join(" "),
+				base: slots.preview(),
+				className,
 				isAttached: editor.toolbarVariant === "bar",
 			})}
 			entering={isCalm ? undefined : FadeIn.duration(PREVIEW_FADE_MS)}

package/src/components/markdown-editor/markdown-editor.variants.test.ts

@@ -143,6 +143,23 @@ describe("panes", () => {
 		expect(resolveMarkdownPaneClass({ className: "rounded-t-xl", isAttached: true })).not.toContain("rounded-t-none");
 	});
 
+	test("the preview's corners are the write pane's at every size", () => {
+		const radius = (cls: string | undefined): string[] =>
+			(cls ?? "").split(/\s+/).filter((c) => c.startsWith("rounded"));
+		for (const size of MARKDOWN_EDITOR_SIZES) {
+			const field = radius(inputVariants({ isMultiline: true, size }).root());
+			expect(radius(markdownEditorVariants({ size }).preview())).toEqual(field);
+		}
+	});
+
+	test("a preview under a bar toolbar loses its top corners too", () => {
+		for (const size of MARKDOWN_EDITOR_SIZES) {
+			const base = markdownEditorVariants({ size }).preview();
+			expect(resolveMarkdownPaneClass({ base, isAttached: true })).toContain("rounded-t-none");
+			expect(resolveMarkdownPaneClass({ base, isAttached: false })).not.toContain("rounded-t-none");
+		}
+	});
+
 	test("the write pane is monospaced", () => {
 		expect(markdownEditorVariants().input()).toContain("font-mono");
 	});

package/src/components/markdown-editor/markdown-editor.variants.ts

@@ -25,6 +25,18 @@ function inputSurface(variant: InputVariant): string {
 		.join(" ");
 }
 
+/**
+ * The corner utilities a multiline Input draws at a size, read from
+ * `inputVariants` itself so the preview's corners follow the write pane's.
+ */
+function inputRadius(size: InputSize): string {
+	return inputVariants({ isMultiline: true, size })
+		.root()
+		.split(/\s+/)
+		.filter((cls) => cls.startsWith("rounded"))
+		.join(" ");
+}
+
 export const MARKDOWN_EDITOR_VARIANTS = INPUT_VARIANTS;
 export const MARKDOWN_TOOLBAR_VARIANTS = ["bar", "pill"] as const;
 
@@ -85,6 +97,10 @@ export const MARKDOWN_EDITOR_TABS_SIZE: Record<MarkdownEditorSize, TabsSize> = {
  * flipping modes does not change what kind of box is on screen: outlined on
  * `bg-card` for `primary`, filled `bg-secondary` for `secondary`.
  *
+ * Its corners are the write pane's too, per size, and it takes its box as
+ * `base` in {@link resolveMarkdownPaneClass} rather than as a className, so a
+ * `bar` toolbar's square top corners are not overridden by its own radius.
+ *
  * `inlineCode` lifts `Text.Code`'s muted run to `bg-card` on the filled
  * `secondary` preview, where muted on secondary would draw no run at all.
  *
@@ -107,7 +123,7 @@ export const markdownEditorVariants = tv({
 		actionRow: "flex-row items-center",
 		input: "font-mono",
 		pane: "",
-		preview: "gap-3 rounded-lg px-3 py-3",
+		preview: "gap-3 px-3 py-3",
 		quote: "gap-2 border-l-2 border-border pl-3",
 		codeBlock: "rounded-md border border-border bg-card p-3",
 		listItem: "flex-row gap-2",
@@ -117,9 +133,9 @@ export const markdownEditorVariants = tv({
 	},
 	variants: {
 		size: {
-			sm: { modeSwitch: "w-40" },
-			md: { modeSwitch: "w-52" },
-			lg: { modeSwitch: "w-60" },
+			sm: { modeSwitch: "w-40", preview: inputRadius("sm") },
+			md: { modeSwitch: "w-52", preview: inputRadius("md") },
+			lg: { modeSwitch: "w-60", preview: inputRadius("lg") },
 		},
 		toolbar: {
 			bar: {
@@ -153,16 +169,20 @@ export type MarkdownEditorVariantProps = VariantProps<typeof markdownEditorVaria
  * The class for a pane — the write field or the preview box.
  *
  * Under a `bar` toolbar the pane drops its top corners so the two read as one
- * box, the bar its lid. A caller's className is merged last and still wins.
+ * box, the bar its lid. `base` is the pane's own box, merged first so its
+ * radius cannot win over the lid's square corners. A caller's className is
+ * merged last and still wins.
  */
 export function resolveMarkdownPaneClass({
 	isAttached,
+	base,
 	className,
 }: {
 	isAttached: boolean;
+	base?: string;
 	className?: string;
 }): string {
-	return markdownEditorVariants().pane({ class: [isAttached ? "rounded-t-none" : undefined, className] }) ?? "";
+	return markdownEditorVariants().pane({ class: [base, isAttached ? "rounded-t-none" : undefined, className] }) ?? "";
 }
 
 /**

package/src/components/select/AGENTS.md

@@ -82,14 +82,16 @@ engine. An app that imports no picker still never resolves it.
   the sheet `maxDynamicContentSize` — the lower of 85% of the window and the room
   below the top inset less a 24pt gap — and the list scrolls inside it. Without
   the cap two hundred options measured taller than the screen and the sheet rose
-  under the status bar with nothing of the page left above it. An open
-  keyboard comes off the cap too — the engine lifts the sheet above it, and a
-  full list plus the keyboard reached the top of the screen. The height arrives
-  on the JS thread from `keyboardWillShow` while the lift runs on the UI thread,
-  so for about a quarter of a second the sheet still overshoots before settling;
-  removing that needs the engine to clamp its keyboard lift to
-  `maxDynamicContentSize`. `snapPoints` bypasses dynamic sizing, and the cap
-  with it.
+  under the status bar with nothing of the page left above it.
+- **The keyboard never lifts the sheet past that cap.** The root passes
+  `keyboardLiftLimit="maxDynamicContentSize"`, and the engine clamps its lift
+  on the UI thread: a short list rides the keyboard up until its top reaches
+  the cap, and a full one holds still while the keyboard covers its bottom and
+  the list shrinks by it. It used to shrink the cap itself from
+  `keyboardWillShow` — a JS event that lands after the UI-thread lift has
+  started — so a full list shot to the top of the screen and settled back
+  about a quarter of a second later. `snapPoints` bypasses dynamic sizing, and
+  the cap and the limit with it.
 - **The row floor is ListGroup's**, `min-h-12/14/16`, pinned by the test, so a
   row in the sheet sits level with a `ListGroup` row on the screen behind it. It
   is a floor, never a height, so a description can wrap.

package/src/components/select/select.tsx

@@ -1,6 +1,5 @@
 import { type ReactElement, type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { useWindowDimensions, View } from "react-native";
-import { KeyboardEvents } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useControllableState } from "../../hooks/use-controllable-state";
 import { IconMagnifyingGlass } from "../../icons/central";
@@ -103,31 +102,6 @@ export type SelectProps = SelectSingleProps | SelectMultipleProps;
 
 const NO_VALUES: readonly string[] = [];
 
-/**
- * The keyboard's height while `isActive`, else zero.
- *
- * Read on the JS thread from the will-show and will-hide events, so the sheet's
- * cap shrinks as the keyboard starts to rise rather than after it lands.
- */
-function useKeyboardHeight(isActive: boolean): number {
-	const [height, setHeight] = useState(0);
-
-	useEffect(() => {
-		if (!isActive) {
-			setHeight(0);
-			return;
-		}
-		const show = KeyboardEvents.addListener("keyboardWillShow", (event) => setHeight(event.height));
-		const hide = KeyboardEvents.addListener("keyboardWillHide", () => setHeight(0));
-		return () => {
-			show.remove();
-			hide.remove();
-		};
-	}, [isActive]);
-
-	return height;
-}
-
 function SelectRoot(props: SelectProps): ReactElement {
 	const {
 		options,
@@ -180,7 +154,6 @@ function SelectRoot(props: SelectProps): ReactElement {
 
 	const [isOpen, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
-	const keyboardHeight = useKeyboardHeight(isOpen && isSearchable);
 	const canOpen = !resolvedIsDisabled && !isReadOnly;
 
 	const open = useCallback(() => {
@@ -322,7 +295,8 @@ function SelectRoot(props: SelectProps): ReactElement {
 			<BottomSheet
 				dynamicSizing={snapPoints === undefined}
 				isOpen={isOpen}
-				maxDynamicContentSize={resolveSelectSheetMaxHeight({ keyboardHeight, topInset, windowHeight })}
+				keyboardLiftLimit="maxDynamicContentSize"
+				maxDynamicContentSize={resolveSelectSheetMaxHeight({ topInset, windowHeight })}
 				onOpenChange={handleOpenChange}
 				snapPoints={snapPoints}
 			>

package/src/components/select/select.variants.test.ts

@@ -551,17 +551,6 @@ describe("resolveSelectSheetMaxHeight", () => {
 		expect(Number.isInteger(resolveSelectSheetMaxHeight({ topInset: 59, windowHeight: 874 }))).toBe(true);
 	});
 
-	test("leaves room for the keyboard, which the sheet is lifted above", () => {
-		const open = resolveSelectSheetMaxHeight({ keyboardHeight: 336, topInset: 62, windowHeight: 874 });
-		expect(open).toBe(874 - 62 - SELECT_SHEET_TOP_GAP - 336);
-	});
-
-	test("an absent keyboard is a zero-height one", () => {
-		expect(resolveSelectSheetMaxHeight({ keyboardHeight: 0, topInset: 62, windowHeight: 874 })).toBe(
-			resolveSelectSheetMaxHeight({ topInset: 62, windowHeight: 874 })
-		);
-	});
-
 	test("never goes negative on a degenerate window", () => {
 		expect(resolveSelectSheetMaxHeight({ topInset: 50, windowHeight: 20 })).toBe(0);
 	});

package/src/components/select/select.variants.ts

@@ -49,22 +49,20 @@ export const SELECT_SHEET_TOP_GAP = 24;
  *
  * Without one, two hundred options measure taller than the screen and the sheet
  * rises under the status bar with nothing of the page left above it. The lower
- * of a fraction of the window and the room below the top inset wins, and an
- * open keyboard comes off the second: the sheet rides above it, and a full list
- * plus the keyboard would otherwise reach the top of the screen.
+ * of a fraction of the window and the room below the top inset wins. The
+ * keyboard does not come off it here: the sheet opts into
+ * `keyboardLiftLimit="maxDynamicContentSize"`, so the engine stops its lift at
+ * this cap on the UI thread, in the keyboard's first frame.
  */
 export function resolveSelectSheetMaxHeight({
 	windowHeight,
 	topInset,
-	keyboardHeight = 0,
 }: {
 	windowHeight: number;
 	topInset: number;
-	/** The sheet is lifted above an open keyboard, so the room it may take shrinks by the keyboard's height. */
-	keyboardHeight?: number;
 }): number {
 	const byFraction = windowHeight * SELECT_SHEET_MAX_FRACTION;
-	const belowInset = windowHeight - topInset - SELECT_SHEET_TOP_GAP - keyboardHeight;
+	const belowInset = windowHeight - topInset - SELECT_SHEET_TOP_GAP;
 	return Math.max(0, Math.floor(Math.min(byFraction, belowInset)));
 }