@mrmeg/expo-ui 0.25.0 → 0.25.1

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [0.25.1]
+
+### Fixed
+
+- **Android password toggles retain the native field.** The secure/plain Host
+  keys previously replaced the Compose field on every eye press, leaving the
+  keyboard visible but disconnecting subsequent typing. Android now changes
+  password transformation on one mounted Host/input/ref, preserving focus,
+  selection, and the input connection. iOS retains its two-field handoff.
+- **Non-scrolling drags no longer trigger tap-away dismissal.** `DismissKeyboard`
+  gives its boundary sole tap-dismiss ownership (`keyboardShouldPersistTaps="always"`)
+  instead of letting RN ScrollView independently blur a registered hosted field
+  on release. Both tap-away dismissal and text-surface focus check final travel
+  even when move events are missed, and cancel multitouch. Actual scrolling still
+  dismisses through the existing platform-specific scroll behavior.
+
+Consumer note: raw `Pressable` labels made from `StyledText` must set
+`selectable={false}`. On Android selectable label text can take native focus from
+an input even when the press handler does not dismiss. The template's auth
+controls and standalone scroll shell are corrected separately in app code;
+updating this package does not update a consuming app's copied forms.
+
+### Changed
+
+- **`spacing.radiusMd` is 10 instead of 12.** Buttons, inputs, selects, toggles,
+  tabs, menus, popovers, tooltips, list items and every other component on the
+  default radius render slightly squarer. `radiusSm` (8) and `radiusLg` (14) are
+  unchanged, so the scale still increases monotonically. Apps that want the old
+  look can pass `borderRadius: 12` through `setShape` or a `style` override.
+
 ## [0.25.0]
 
 ### Added

package/LLM_USAGE.md

@@ -74,6 +74,13 @@ avoidance is `react-native-keyboard-controller`, so mount its `KeyboardProvider`
 above `UIProvider`; use `KeyboardAvoidingView` directly only for a subtree with
 custom behavior.
 
+`DismissKeyboard` owns tap dismissal; its ScrollView uses
+`keyboardShouldPersistTaps="always"` so RN cannot independently blur a hosted
+field after a non-scrolling drag. Use `always` for your own scroll view inside
+that boundary too. Dead-space taps dismiss on release; movement and multitouch
+cancel. Actual scrolling retains platform-specific dismissal. Submit handlers
+call `dismissKeyboard()` explicitly.
+
 `BottomSheet` renders the platform's native sheet through `@expo/ui` (iOS
 SwiftUI `.sheet()`, Android Material3 `ModalBottomSheet`, web `vaul`). The
 platform owns gestures and keyboard avoidance: `swipeEnabled`, `avoidKeyboard`,
@@ -255,6 +262,11 @@ Check this before creating a new app-local primitive. All components come from
 `BodyText`, `CaptionText`, `LabelText`, `EyebrowText`, `MonoText`, `SerifText`,
 `SansSerifText`, `SerifBoldText`, `SansSerifBoldText`.
 
+Set `selectable={false}` on text labels inside app-owned `Pressable`s. Selectable
+Android text can take input focus even if the press handler never dismisses the
+keyboard. Package controls already scope label selectability; ordinary text
+should remain selectable.
+
 ## Component Selection Rules
 
 - `Button` commands · `Toggle` one pressed state · `ToggleGroup` a related set · `Switch` binary settings · `RadioGroup` few exclusive choices · `Select` longer option sets.

package/README.md

@@ -110,6 +110,20 @@ For a subtree with custom keyboard behavior, use `KeyboardAvoidingView`
 directly (`behavior`, `automaticOffset`, `contentContainerStyle`,
 `keyboardVerticalOffset`).
 
+### Keyboard dismissal
+
+`DismissKeyboard` owns tap-away dismissal without claiming touches. Its scroll
+view uses `keyboardShouldPersistTaps="always"`: RN's `handled` policy can blur
+Expo-hosted fields independently when a finger travels without scrolling.
+Single-finger dead-space taps dismiss on release; movement past 10 logical units
+and multitouch cancel the tap. Real scrolling still dismisses (interactive on
+iOS, an explicit scroll-begin handler on Android).
+
+If a form supplies its own ScrollView inside `DismissKeyboard scrollable={false}`
+or an app-level `useKeyboardDismissResponder` boundary, use `always` there too.
+Avoid nested keyboard-avoiding wrappers; the package reuses `UIProvider`'s owner.
+Call `dismissKeyboard()` explicitly from submit handlers.
+
 ## Theme System
 
 ```tsx
@@ -210,7 +224,7 @@ too, because @react-navigation parses them with a color library.
 
 `spacing` exposes an 8px base scale (`xxs` 2, `xs` 4, `sm` 8, `smd` 12, `md`
 16, `mdl` 20, `lg` 24, `xl` 32, `xxl` 48, `xxxl` 64), radii (`radiusNone` 0,
-`radiusXs` 4, `radiusSm` 8, `radiusMd` 12, `radiusLg` 14, `radiusXl` 18,
+`radiusXs` 4, `radiusSm` 8, `radiusMd` 10, `radiusLg` 14, `radiusXl` 18,
 `radius2xl` 24, `radiusFull` 9999), icon sizes (`iconXs` 12, `iconSm` 16,
 `iconMd` 24, `iconLg` 32, `iconXl` 48), and the semantic density tokens package
 components read from. Prefer the semantic names so a density tune lands
@@ -300,6 +314,10 @@ import { BodyText, CaptionText, HeadingText, StyledText } from "@mrmeg/expo-ui/c
 - `selectable`: defaults to `true`; package controls disable it for labels and
   interactive chrome where accidental drag selection would feel broken.
 
+For app-owned `Pressable` labels, explicitly set `selectable={false}` on the
+nested `StyledText`. On Android selectable label text can take focus and the IME
+connection from an active input. Preserve selection for ordinary readable text.
+
 Aliases: `DisplayText`, `TitleText`, `HeadingText`, `SubheadingText`,
 `BodyText`, `CaptionText`, `LabelText`, `EyebrowText`, `MonoText` (code, IDs,
 tabular figures), `SerifText`, `SansSerifText`, `SerifBoldText`,

package/dist/components/DismissKeyboard.d.ts

@@ -12,15 +12,17 @@ type Props = {
  * Wrapper for a screen (or form) that dismisses the keyboard when the user taps
  * outside of a text input.
  *
- * Mirrors RN's `keyboardShouldPersistTaps="handled"` for the native `@expo/ui`
- * field, which RN itself cannot see: the wrapper never claims the touch, so
- * buttons, other fields and the focused field's own gestures win, and it
- * dismisses on release only when nothing else took the tap and the finger did
- * not scroll. See `useKeyboardDismissResponder`.
+ * The wrapper never claims the touch: buttons, other fields and the focused
+ * field's own gestures win. It dismisses only an unclaimed single-finger tap
+ * within the travel slop, even if no scroll/move event was delivered. The inner
+ * ScrollView uses `always` to leave tap dismissal to this boundary; RN's
+ * `handled` policy can independently blur registered hosted inputs on release
+ * after a drag that produced no scroll. See `useKeyboardDismissResponder`.
  *
  * A drag on the inner ScrollView also hides the keyboard: `interactive` on iOS
  * (UIKit resigns any first responder, SwiftUI fields included) and an explicit
- * dismiss on drag start on Android, where RN's `on-drag` only knows RN inputs.
+ * dismiss on drag start on Android, using the package's window-independent
+ * native blur handle with a keyboard-controller fallback.
  */
 export declare function DismissKeyboard({ children, style, avoidKeyboard, scrollable, }: Props): React.JSX.Element;
 export {};

package/dist/components/DismissKeyboard.js

@@ -6,20 +6,22 @@ import { dismissKeyboard, useKeyboardDismissResponder } from "./keyboardDismiss.
  * Wrapper for a screen (or form) that dismisses the keyboard when the user taps
  * outside of a text input.
  *
- * Mirrors RN's `keyboardShouldPersistTaps="handled"` for the native `@expo/ui`
- * field, which RN itself cannot see: the wrapper never claims the touch, so
- * buttons, other fields and the focused field's own gestures win, and it
- * dismisses on release only when nothing else took the tap and the finger did
- * not scroll. See `useKeyboardDismissResponder`.
+ * The wrapper never claims the touch: buttons, other fields and the focused
+ * field's own gestures win. It dismisses only an unclaimed single-finger tap
+ * within the travel slop, even if no scroll/move event was delivered. The inner
+ * ScrollView uses `always` to leave tap dismissal to this boundary; RN's
+ * `handled` policy can independently blur registered hosted inputs on release
+ * after a drag that produced no scroll. See `useKeyboardDismissResponder`.
  *
  * A drag on the inner ScrollView also hides the keyboard: `interactive` on iOS
  * (UIKit resigns any first responder, SwiftUI fields included) and an explicit
- * dismiss on drag start on Android, where RN's `on-drag` only knows RN inputs.
+ * dismiss on drag start on Android, using the package's window-independent
+ * native blur handle with a keyboard-controller fallback.
  */
 export function DismissKeyboard({ children, style, avoidKeyboard = true, scrollable = true, }) {
     const responderProps = useKeyboardDismissResponder();
     const hasKeyboardAvoidance = useKeyboardAvoidance();
-    const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", keyboardDismissMode: Platform.OS === "ios" ? "interactive" : "none", onScrollBeginDrag: Platform.OS === "android" ? dismissKeyboard : undefined, showsVerticalScrollIndicator: false, children: children })) : (children);
+    const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "always", keyboardDismissMode: Platform.OS === "ios" ? "interactive" : "none", onScrollBeginDrag: Platform.OS === "android" ? dismissKeyboard : undefined, showsVerticalScrollIndicator: false, children: children })) : (children);
     if (!avoidKeyboard || hasKeyboardAvoidance) {
         return (_jsx(View, { style: { flex: 1 }, ...responderProps, children: content }));
     }

package/dist/components/TextInput.d.ts

@@ -10,7 +10,7 @@ export type TextInputSize = "sm" | "md" | "lg";
 export type TextInputVariant = "outline" | "filled" | "underlined";
 interface TextInputCustomProps extends TextInputProps {
     /**
-     * Forwarded ref to the underlying RNTextInput element.
+     * RNTextInput ref on web; an RN-compatible imperative handle on native.
      *
      * Written as `ComponentRef<typeof RNTextInput>` rather than RN 0.88's
      * `TextInputInstance` alias so the emitted declarations stay valid on

package/dist/components/TextInput.js

@@ -191,11 +191,10 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
  * never round-trips through React state — eliminating the cursor flicker seen on
  * controlled RN inputs.
  *
- * By design (reliability over feature-parity) this path renders the field plus
- * sibling label / helper / error text only. The in-field overlays from the web
- * implementation — password visibility toggle, clear button, left/right
- * elements, and error icon — are intentionally omitted on native to avoid
- * layering RN views over the native host view.
+ * This path supports label / helper / error text and a password visibility
+ * toggle laid out beside the native Host. Clear buttons, left/right elements,
+ * and the error icon remain web-only; RN overlays are not layered over the
+ * native host view.
  */
 function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, onFocus, onBlur, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
 // Web-only affordances. Destructured out of `rest` so they're NOT forwarded to
@@ -231,9 +230,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // parity) once it settles.
     const queuedTogglesRef = useRef(0);
     const toggleRef = useRef(() => { });
-    // Per-flavour mount generation. Bumped whenever a flavour becomes the incoming
-    // view so React always mounts a FRESH native view (whose `autoFocus` will run)
-    // instead of reusing one that is still unmounting from the previous handoff.
+    // iOS-only per-flavour mount generation. Bumped whenever a flavour becomes
+    // the incoming view so React mounts a FRESH native view (whose `autoFocus`
+    // will run) instead of reusing one still unmounting from the previous handoff.
     const generationRef = useRef({ secure: 0, plain: 0 });
     // Last text the JS side knows about; see handleChangeText.
     const lastTextRef = useRef(value ?? defaultValue ?? "");
@@ -256,12 +255,18 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // RNTextInput because that's what the public TextInputCustomProps declares.
     // We expose the subset consumers use, plus a `setNativeProps` shim so the
     // uncontrolled AuthTextField can push corrected text into the native buffer.
-    // One ref per native view flavour; only the active one (or, mid-handoff on
-    // iOS, both) is mounted.
+    // Android keeps one field/ref as visualTransformation changes in place.
+    // iOS has one ref per flavour; both are mounted only during a handoff.
+    const androidRef = useRef(null);
     const secureRef = useRef(null);
     const plainRef = useRef(null);
-    const activeInput = useCallback(() => (activeSecureRef.current ? secureRef : plainRef).current, []);
+    const activeInput = useCallback(() => {
+        if (Platform.OS === "android")
+            return androidRef.current;
+        return (activeSecureRef.current ? secureRef : plainRef).current;
+    }, []);
     const blurAll = useCallback(() => {
+        androidRef.current?.blur();
         secureRef.current?.blur();
         plainRef.current?.blur();
     }, []);
@@ -282,19 +287,15 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     }, []);
     const parentOnFocus = onFocus;
     const parentOnBlur = onBlur;
-    // Focus/blur from a view that is not the active flavour is ignored: that is
-    // the outgoing view resigning during a handoff, or a stale event from a view
-    // React is unmounting.
+    // On iOS, ignore focus/blur from the outgoing flavour during a handoff or
+    // unmount. Android events always belong to the same mounted field.
     const handleFocus = useCallback((secure) => {
-        if (secure !== activeSecureRef.current)
+        if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
         isFocusedRef.current = true;
-        // Register a blur handle so tap-away dismissal (`keyboardDismiss.ts`) and
-        // the BottomSheet overlay can resign this field: RN's `TextInputState`
-        // never sees SwiftUI / Compose fields, so `Keyboard.dismiss()` cannot.
-        // Blurring through the field's own ref is window-independent — inside a
-        // native bottom sheet `KeyboardController.dismiss()` can miss, the ref
-        // never does.
+        // Register the field's own blur handle for tap-away dismissal and the
+        // BottomSheet overlay. RN supports Expo-hosted field interop; this direct
+        // ref also targets the actual field inside a native sheet's window.
         setKeyboardFocusedInput(focusRegistryToken, blurAll);
         if (handoffRef.current) {
             // The incoming view took first responder; the parent never saw focus leave.
@@ -305,7 +306,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         parentOnFocus?.();
     }, [blurAll, finishHandoff, focusRegistryToken, parentOnFocus]);
     const handleBlur = useCallback((secure) => {
-        if (secure !== activeSecureRef.current)
+        if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
         isFocusedRef.current = false;
         restoreAfterSecureHandoffRef.current = false;
@@ -321,10 +322,12 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         }
         restoreAfterSecureHandoffRef.current = false;
         const outgoingSecure = activeSecureRef.current;
-        if (outgoingSecure)
-            generationRef.current.plain += 1;
-        else
-            generationRef.current.secure += 1;
+        if (Platform.OS === "ios") {
+            if (outgoingSecure)
+                generationRef.current.plain += 1;
+            else
+                generationRef.current.secure += 1;
+        }
         if (Platform.OS === "ios" && isFocusedRef.current) {
             const timer = setTimeout(() => {
                 // The incoming view never took first responder. Rather than unmount
@@ -460,7 +463,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         fontSize: sizeConfig.fontSize,
         ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [[true, false].map((secure) => {
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [(Platform.OS === "android" ? [effectiveSecureTextEntry] : [true, false]).map((secure) => {
                         const active = secure === effectiveSecureTextEntry;
                         const outgoing = handoff != null && secure === handoff.outgoingSecure;
                         if (!active && !outgoing)
@@ -472,7 +475,11 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
                                 ? hasSecureToggle
                                     ? styles.nativeHostFlex
                                     : styles.nativeHost
-                                : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(ExpoTextInput, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, secure ? `secure-${generationRef.current.secure}` : `plain-${generationRef.current.plain}`));
+                                : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(ExpoTextInput, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: Platform.OS === "android" ? androidRef : secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, Platform.OS === "android"
+                            ? "android"
+                            : secure
+                                ? `secure-${generationRef.current.secure}`
+                                : `plain-${generationRef.current.plain}`));
                     }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({

package/dist/components/keyboardDismiss.js

@@ -1,34 +1,38 @@
 /**
  * Tap-away keyboard dismissal that never steals a touch.
  *
- * React Native's own `keyboardShouldPersistTaps="handled"` is the model: let the
- * deepest interactive view win the responder negotiation, and blur on *release*
- * only when nothing else took the tap and the finger did not scroll. RN cannot
- * apply that to the native `@expo/ui` field (it is invisible to
- * `TextInputState`), so this module re-creates the same decision with two
- * signals that need no rectangles and no responder ownership:
+ * Let the deepest interactive view win the responder negotiation, and blur on
+ * release only for an unclaimed, single-finger tap within the travel slop.
+ * Hosted `@expo/ui` inputs register with RN's `TextInputState`. A ScrollView
+ * using `keyboardShouldPersistTaps="handled"` can therefore claim dead space
+ * and blur on release if it observed no scroll, even after substantial travel.
+ * `DismissKeyboard`'s ScrollView uses `always` so this boundary owns tap dismissal
+ * with an explicit travel policy, independent of whether content can scroll.
+ * Two signals need no rectangles and no responder ownership:
  *
  *  1. `onStartShouldSetResponder` in the *bubble* phase is only ever called on a
- *     view when no descendant claimed the touch. Pressables, RN TextInputs and
- *     scroll views all claim, so being asked at all means "this tap is on dead
- *     space or on a native view that does not participate".
+ *     view when no descendant claimed the touch. Pressables and RN TextInputs
+ *     claim, as can scroll views depending on their tap policy. Being asked
+ *     means no descendant took responder ownership, not necessarily dead space.
  *  2. The package `TextInput` tags touches that begin on its surface
  *     (`markTextInputTouchStart`). Its bubble handler runs before any enclosing
  *     boundary's, so the boundary can tell a tap on *any* native field — focused
  *     or not — from dead space, and leave focus handoff, double-tap selection
  *     and the eye toggle to the platform.
  *
- * The boundary always answers `false`, so no JS responder is ever set: native
- * controls (SwiftUI/Compose fields, sliders) keep receiving every touch phase
+ * The boundary always answers `false`, so it never becomes the JS responder.
+ * Native controls (SwiftUI/Compose fields, sliders) keep receiving every touch phase
  * on both platforms, and scroll views take over drags exactly as before.
  * Dismissal happens in `onTouchEnd`, a plain bubbling event that fires whether
- * or not anyone became the responder; a drag past the slop or a cancel drops it.
+ * or not anyone became the responder. Moves cancel permanently once past the
+ * slop; release coordinates also enforce it when move delivery was missed.
+ * Cancellation and multitouch drop the tap without rearming another finger.
  */
 import { useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { KeyboardController, useKeyboardState } from "./keyboardController";
 import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
-/** Finger travel (pt) after which a touch counts as a scroll, not a tap. */
+/** Maximum displacement per axis (RN logical units) for a tap, scrollable or not. */
 const MOVE_SLOP = 10;
 function keyOf(event) {
     const { identifier, timestamp } = event.nativeEvent;
@@ -42,6 +46,10 @@ function isSameEvent(key, event) {
 }
 let textInputTouch = null;
 let claimedTouch = null;
+// An ancestor can observe a second finger outside an inner boundary/surface.
+// Invalidate already-armed taps there too, even if that finger lifts first and
+// the inner view only receives its original finger's final touches=[] event.
+let multiTouchVersion = 0;
 /**
  * `onStartShouldSetResponder` for a native text-field surface: decline the
  * responder (the native field keeps every touch phase) but tag the touch so an
@@ -72,6 +80,77 @@ function movedPastSlop(tap, event) {
     return (Math.abs(event.nativeEvent.pageX - tap.pageX) > MOVE_SLOP ||
         Math.abs(event.nativeEvent.pageY - tap.pageY) > MOVE_SLOP);
 }
+/** Shared single-finger travel policy for tap-away dismissal and surface focus. */
+function createTapTracker() {
+    let pending = null;
+    let armedVersion = multiTouchVersion;
+    let lastStart = null;
+    const active = new Set();
+    function readTouches(event) {
+        const { touches } = event.nativeEvent;
+        if (touches == null)
+            return false;
+        active.clear();
+        touches.forEach(({ identifier }) => active.add(identifier));
+        return true;
+    }
+    return {
+        start(event) {
+            // Negotiation precedes the plain bubbling touch-start for the same event.
+            // Observe it once; a child-claimed start reaches only onTouchStart, which
+            // clears any stale pending tap but never arms one.
+            if (isSameEvent(lastStart, event))
+                return false;
+            lastStart = keyOf(event);
+            pending = null;
+            // RN's array is authoritative, including after a missed end. The set is
+            // also a fallback for callers/tests omitting arrays, retaining other down
+            // fingers even after movement has cancelled the pending tap.
+            if (!readTouches(event))
+                active.add(event.nativeEvent.identifier);
+            if (active.size > 1 || (event.nativeEvent.changedTouches?.length ?? 1) > 1) {
+                multiTouchVersion += 1;
+                return false;
+            }
+            return active.size === 1;
+        },
+        arm(event) {
+            pending = { ...keyOf(event), pageX: event.nativeEvent.pageX, pageY: event.nativeEvent.pageY };
+            armedVersion = multiTouchVersion;
+        },
+        move(event) {
+            readTouches(event);
+            if (active.size > 1 || (event.nativeEvent.changedTouches?.length ?? 1) > 1) {
+                multiTouchVersion += 1;
+                pending = null;
+            }
+            else if (isSameTouch(pending, event) && movedPastSlop(pending, event)) {
+                pending = null;
+            }
+        },
+        end(event) {
+            const tap = pending;
+            pending = null;
+            // On touch end, touches contains the REMAINING fingers (empty on the last
+            // release); changedTouches contains those that ended. Never treat the
+            // final empty array as an invalid single-finger tap.
+            if (!readTouches(event)) {
+                active.delete(event.nativeEvent.identifier);
+                event.nativeEvent.changedTouches?.forEach(({ identifier }) => active.delete(identifier));
+            }
+            if (active.size === 0)
+                lastStart = null;
+            if (active.size > 0 || (event.nativeEvent.changedTouches?.length ?? 1) > 1) {
+                multiTouchVersion += 1;
+            }
+            return (armedVersion === multiTouchVersion &&
+                active.size === 0 &&
+                (event.nativeEvent.changedTouches?.length ?? 1) <= 1 &&
+                isSameTouch(tap, event) &&
+                !movedPastSlop(tap, event));
+        },
+    };
+}
 /**
  * View props for the painted surface around a native (`@expo/ui`) text field.
  *
@@ -87,31 +166,30 @@ function movedPastSlop(tap, event) {
 export function useTextInputSurfaceResponder(focus) {
     const focusRef = useRef(focus);
     focusRef.current = focus;
-    const tap = useRef(null);
-    return useMemo(() => ({
-        onStartShouldSetResponder: (event) => {
-            markTextInputTouchStart(event);
-            tap.current = { ...keyOf(event), pageX: event.nativeEvent.pageX, pageY: event.nativeEvent.pageY };
-            return false;
-        },
-        onTouchStart: (event) => {
-            if (tap.current && !isSameEvent(tap.current, event))
-                tap.current = null;
-        },
-        onTouchMove: (event) => {
-            if (isSameTouch(tap.current, event) && movedPastSlop(tap.current, event))
-                tap.current = null;
-        },
-        onTouchEnd: (event) => {
-            if (!isSameTouch(tap.current, event))
-                return;
-            tap.current = null;
-            focusRef.current();
-        },
-        onTouchCancel: () => {
-            tap.current = null;
-        },
-    }), []);
+    return useMemo(() => {
+        const tap = createTapTracker();
+        return {
+            onStartShouldSetResponder: (event) => {
+                markTextInputTouchStart(event);
+                if (tap.start(event))
+                    tap.arm(event);
+                return false;
+            },
+            onTouchStart: (event) => {
+                tap.start(event);
+            },
+            onTouchMove: (event) => {
+                tap.move(event);
+            },
+            onTouchEnd: (event) => {
+                if (tap.end(event))
+                    focusRef.current();
+            },
+            onTouchCancel: (event) => {
+                tap.end(event);
+            },
+        };
+    }, []);
 }
 /**
  * View props for a tap-away keyboard-dismiss boundary. Spread onto the wrapper
@@ -123,13 +201,14 @@ export function useKeyboardDismissResponder() {
     const isVisible = useKeyboardState((state) => state.isVisible);
     const isVisibleRef = useRef(isVisible);
     isVisibleRef.current = isVisible;
-    const pending = useRef(null);
     return useMemo(() => {
         if (Platform.OS === "web")
             return {};
+        const tap = createTapTracker();
         return {
             onStartShouldSetResponder: (event) => {
-                pending.current = null;
+                if (!tap.start(event))
+                    return false;
                 // `hasKeyboardFocusedInput` covers the window where a field has focus but
                 // keyboard-controller has not reported the keyboard yet (or a hardware
                 // keyboard is attached and there is no software keyboard to observe).
@@ -141,29 +220,21 @@ export function useKeyboardDismissResponder() {
                 if (isSameEvent(claimedTouch, event))
                     return false;
                 claimedTouch = keyOf(event);
-                pending.current = { ...claimedTouch, pageX: event.nativeEvent.pageX, pageY: event.nativeEvent.pageY };
+                tap.arm(event);
                 return false;
             },
             onTouchStart: (event) => {
-                // Bubbling touch events run after the negotiation for the same native
-                // event, so a fresh pending tap matches here; anything else is stale
-                // (e.g. a touch whose end never reached this view).
-                if (pending.current && !isSameEvent(pending.current, event))
-                    pending.current = null;
+                tap.start(event);
             },
             onTouchMove: (event) => {
-                if (isSameTouch(pending.current, event) && movedPastSlop(pending.current, event)) {
-                    pending.current = null;
-                }
+                tap.move(event);
             },
             onTouchEnd: (event) => {
-                if (!isSameTouch(pending.current, event))
-                    return;
-                pending.current = null;
-                dismissKeyboard();
+                if (tap.end(event))
+                    dismissKeyboard();
             },
-            onTouchCancel: () => {
-                pending.current = null;
+            onTouchCancel: (event) => {
+                tap.end(event);
             },
         };
     }, []);

package/dist/components/keyboardFocusRegistry.d.ts

@@ -1,10 +1,12 @@
 /**
  * Registry of the currently focused native (`@expo/ui`) text field.
  *
- * React Native's `TextInputState` never learns about SwiftUI / Compose fields,
- * so `Keyboard.dismiss()` cannot blur them. The package `TextInput` registers a
- * blur handle here on focus; tap-away dismissal (`keyboardDismiss.ts`) and the
- * `BottomSheet` overlay resign the field through it.
+ * Hosted `@expo/ui` inputs also register with React Native's `TextInputState`.
+ * This package registry supplies a window-independent native blur handle and
+ * focus presence even when keyboard-controller cannot observe the keyboard
+ * (for example, in an isolated native sheet window). The package `TextInput`
+ * registers on focus; tap-away dismissal (`keyboardDismiss.ts`) and the
+ * `BottomSheet` overlay resign the field through that handle.
  */
 export type KeyboardFocusedInputToken = object;
 /**

package/dist/constants/spacing.d.ts

@@ -36,7 +36,7 @@ export declare const spacing: {
     readonly radiusNone: 0;
     readonly radiusXs: 4;
     readonly radiusSm: 8;
-    readonly radiusMd: 12;
+    readonly radiusMd: 10;
     readonly radiusLg: 14;
     readonly radiusXl: 18;
     readonly radius2xl: 24;
@@ -47,5 +47,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 12, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 10, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -38,11 +38,11 @@ export const spacing = {
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
     listItemSpacing: 8, // Space between list items
-    // Border radius — shadcn-inspired scale (radiusMd = 12px default)
+    // Border radius — shadcn-inspired scale (radiusMd = 10px default)
     radiusNone: 0,
     radiusXs: 4,
     radiusSm: 8,
-    radiusMd: 12,
+    radiusMd: 10,
     radiusLg: 14,
     radiusXl: 18,
     radius2xl: 24,

package/dist/design-system.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "@mrmeg/expo-ui",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "tokens": {
     "spacing": {
       "entries": [
@@ -127,7 +127,7 @@
         },
         {
           "name": "radiusMd",
-          "value": 12
+          "value": 10
         },
         {
           "name": "radiusLg",

package/dist/state/themeStore.d.ts

@@ -36,7 +36,7 @@ export type ShapeOverrides = {
     button?: {
         /**
          * Border radius applied to every Button preset. Package default:
-         * `spacing.radiusMd` (12). Use 9999 for pill buttons. A caller `style`
+         * `spacing.radiusMd` (10). Use 9999 for pill buttons. A caller `style`
          * still wins over this, as it always has.
          */
         borderRadius?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [