@mrmeg/expo-ui 0.22.0 → 0.24.0

package/dist/components/index.js

@@ -11,6 +11,7 @@ export * from "./Checkbox.js";
 export * from "./Collapsible.js";
 export * from "./Dialog.js";
 export * from "./DismissKeyboard.js";
+export * from "./keyboardDismiss.js";
 export * from "./Drawer.js";
 export * from "./DropdownMenu.js";
 export * from "./EmptyState.js";

package/dist/components/keyboardDismiss.d.ts

@@ -0,0 +1,37 @@
+import { type GestureResponderEvent, type ViewProps } from "react-native";
+/**
+ * `onStartShouldSetResponder` for a native text-field surface: decline the
+ * responder (the native field keeps every touch phase) but tag the touch so an
+ * enclosing tap-away boundary leaves it alone. The package `TextInput` uses
+ * this through {@link useTextInputSurfaceResponder}.
+ */
+export declare function markTextInputTouchStart(event: GestureResponderEvent): boolean;
+/**
+ * Hide the software keyboard for whatever is focused. Prefers the registered
+ * native field's own blur handle (window-independent), then falls back to
+ * `KeyboardController.dismiss()`, which resigns at the IME level and covers RN
+ * or third-party inputs. No-op on web, which has no software keyboard to hide.
+ */
+export declare function dismissKeyboard(): void;
+export type TextInputSurfaceResponderProps = Pick<ViewProps, "onStartShouldSetResponder" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel">;
+/**
+ * View props for the painted surface around a native (`@expo/ui`) text field.
+ *
+ * Two jobs. It tags every touch that begins on the surface so the tap-away
+ * boundary leaves it alone (see {@link markTextInputTouchStart}). And it
+ * focuses the field on release of a tap that no child claimed: the SwiftUI
+ * `TextField` only hit-tests its text line, so taps on the box's vertical
+ * padding never reach it, and a tap on the field's `hitSlop` never can. Calling
+ * `focus` is idempotent when the native field already took the tap, and the eye
+ * toggle is a `Pressable` that claims the responder first, so it never fires
+ * for that.
+ */
+export declare function useTextInputSurfaceResponder(focus: () => void): TextInputSurfaceResponderProps;
+export type KeyboardDismissResponderProps = Pick<ViewProps, "onStartShouldSetResponder" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel">;
+/**
+ * View props for a tap-away keyboard-dismiss boundary. Spread onto the wrapper
+ * `View` that encloses the screen (or a form). Nesting is safe: the innermost
+ * boundary owns each touch, so the keyboard is dismissed once. Returns `{}` on
+ * web.
+ */
+export declare function useKeyboardDismissResponder(): KeyboardDismissResponderProps;

package/dist/components/keyboardDismiss.js

@@ -0,0 +1,170 @@
+/**
+ * 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:
+ *
+ *  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".
+ *  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
+ * 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.
+ */
+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. */
+const MOVE_SLOP = 10;
+function keyOf(event) {
+    const { identifier, timestamp } = event.nativeEvent;
+    return { identifier, timestamp };
+}
+/** Same native event: the responder negotiation hands one event to every listener. */
+function isSameEvent(key, event) {
+    return (key != null &&
+        key.identifier === event.nativeEvent.identifier &&
+        key.timestamp === event.nativeEvent.timestamp);
+}
+let textInputTouch = null;
+let claimedTouch = null;
+/**
+ * `onStartShouldSetResponder` for a native text-field surface: decline the
+ * responder (the native field keeps every touch phase) but tag the touch so an
+ * enclosing tap-away boundary leaves it alone. The package `TextInput` uses
+ * this through {@link useTextInputSurfaceResponder}.
+ */
+export function markTextInputTouchStart(event) {
+    textInputTouch = keyOf(event);
+    return false;
+}
+/**
+ * Hide the software keyboard for whatever is focused. Prefers the registered
+ * native field's own blur handle (window-independent), then falls back to
+ * `KeyboardController.dismiss()`, which resigns at the IME level and covers RN
+ * or third-party inputs. No-op on web, which has no software keyboard to hide.
+ */
+export function dismissKeyboard() {
+    if (Platform.OS === "web")
+        return;
+    if (!dismissKeyboardFocusedInput()) {
+        void KeyboardController.dismiss();
+    }
+}
+function isSameTouch(tap, event) {
+    return tap != null && tap.identifier === event.nativeEvent.identifier;
+}
+function movedPastSlop(tap, event) {
+    return (Math.abs(event.nativeEvent.pageX - tap.pageX) > MOVE_SLOP ||
+        Math.abs(event.nativeEvent.pageY - tap.pageY) > MOVE_SLOP);
+}
+/**
+ * View props for the painted surface around a native (`@expo/ui`) text field.
+ *
+ * Two jobs. It tags every touch that begins on the surface so the tap-away
+ * boundary leaves it alone (see {@link markTextInputTouchStart}). And it
+ * focuses the field on release of a tap that no child claimed: the SwiftUI
+ * `TextField` only hit-tests its text line, so taps on the box's vertical
+ * padding never reach it, and a tap on the field's `hitSlop` never can. Calling
+ * `focus` is idempotent when the native field already took the tap, and the eye
+ * toggle is a `Pressable` that claims the responder first, so it never fires
+ * for that.
+ */
+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;
+        },
+    }), []);
+}
+/**
+ * View props for a tap-away keyboard-dismiss boundary. Spread onto the wrapper
+ * `View` that encloses the screen (or a form). Nesting is safe: the innermost
+ * boundary owns each touch, so the keyboard is dismissed once. Returns `{}` on
+ * web.
+ */
+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 {};
+        return {
+            onStartShouldSetResponder: (event) => {
+                pending.current = null;
+                // `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).
+                if (!isVisibleRef.current && !hasKeyboardFocusedInput())
+                    return false;
+                if (isSameEvent(textInputTouch, event))
+                    return false;
+                // An inner boundary already runs this touch (bubble order is inner-first).
+                if (isSameEvent(claimedTouch, event))
+                    return false;
+                claimedTouch = keyOf(event);
+                pending.current = { ...claimedTouch, pageX: event.nativeEvent.pageX, pageY: event.nativeEvent.pageY };
+                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;
+            },
+            onTouchMove: (event) => {
+                if (isSameTouch(pending.current, event) && movedPastSlop(pending.current, event)) {
+                    pending.current = null;
+                }
+            },
+            onTouchEnd: (event) => {
+                if (!isSameTouch(pending.current, event))
+                    return;
+                pending.current = null;
+                dismissKeyboard();
+            },
+            onTouchCancel: () => {
+                pending.current = null;
+            },
+        };
+    }, []);
+}

package/dist/components/keyboardFocusRegistry.d.ts

@@ -1,6 +1,11 @@
-import type { GestureResponderEvent } from "react-native";
-import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
-export type KeyboardFocusedInputLayout = FocusedInputLayoutChangedEvent["layout"];
+/**
+ * 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.
+ */
 export type KeyboardFocusedInputToken = object;
 /**
  * Subscribe to focus presence changes. Pairs with {@link hasKeyboardFocusedInput}
@@ -9,16 +14,8 @@ export type KeyboardFocusedInputToken = object;
  * keyboards raised inside a native sheet's isolated window.
  */
 export declare function subscribeKeyboardFocus(listener: () => void): () => void;
-export declare function setKeyboardFocusedInputLayout(token: KeyboardFocusedInputToken, layout: KeyboardFocusedInputLayout, blur?: () => void): void;
-export declare function clearKeyboardFocusedInputLayout(token: KeyboardFocusedInputToken): void;
-export declare function getKeyboardFocusedInputLayout(): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    absoluteX: number;
-    absoluteY: number;
-} | undefined;
+export declare function setKeyboardFocusedInput(token: KeyboardFocusedInputToken, blur: () => void): void;
+export declare function clearKeyboardFocusedInput(token: KeyboardFocusedInputToken): void;
 /** Whether any native field currently holds focus. Stable boolean for snapshots. */
 export declare function hasKeyboardFocusedInput(): boolean;
 /**
@@ -26,4 +23,3 @@ export declare function hasKeyboardFocusedInput(): boolean;
  * `true` if a field was focused and a blur handle was available.
  */
 export declare function dismissKeyboardFocusedInput(): boolean;
-export declare function isTouchInsideKeyboardFocusedInput(event: GestureResponderEvent, nativeLayout?: KeyboardFocusedInputLayout | null): boolean;

package/dist/components/keyboardFocusRegistry.js

@@ -1,4 +1,3 @@
-const FOCUSED_INPUT_TOUCH_SLOP = 16;
 let focusedInput = null;
 const listeners = new Set();
 function emit() {
@@ -16,23 +15,22 @@ export function subscribeKeyboardFocus(listener) {
         listeners.delete(listener);
     };
 }
-export function setKeyboardFocusedInputLayout(token, layout, blur) {
+export function setKeyboardFocusedInput(token, blur) {
     const wasPresent = focusedInput != null;
-    focusedInput = { token, layout, blur };
-    // Only notify subscribers on a presence transition; re-measures (scroll,
-    // layout) update the layout silently so the overlay doesn't churn.
+    focusedInput = { token, blur };
+    // Only notify subscribers on a presence transition; a focus handoff between
+    // two fields keeps presence true and stays silent.
     if (!wasPresent)
         emit();
 }
-export function clearKeyboardFocusedInputLayout(token) {
+export function clearKeyboardFocusedInput(token) {
+    // Token-guarded: when focus hops A -> B, B's focus can land before A's blur,
+    // and A's late clear must not wipe B's registration.
     if (focusedInput?.token === token) {
         focusedInput = null;
         emit();
     }
 }
-export function getKeyboardFocusedInputLayout() {
-    return focusedInput?.layout;
-}
 /** Whether any native field currently holds focus. Stable boolean for snapshots. */
 export function hasKeyboardFocusedInput() {
     return focusedInput != null;
@@ -42,23 +40,9 @@ export function hasKeyboardFocusedInput() {
  * `true` if a field was focused and a blur handle was available.
  */
 export function dismissKeyboardFocusedInput() {
-    if (focusedInput?.blur) {
+    if (focusedInput) {
         focusedInput.blur();
         return true;
     }
     return false;
 }
-function isTouchInsideLayout(event, layout) {
-    if (!layout)
-        return false;
-    const { pageX, pageY } = event.nativeEvent;
-    const left = layout.absoluteX - FOCUSED_INPUT_TOUCH_SLOP;
-    const right = layout.absoluteX + layout.width + FOCUSED_INPUT_TOUCH_SLOP;
-    const top = layout.absoluteY - FOCUSED_INPUT_TOUCH_SLOP;
-    const bottom = layout.absoluteY + layout.height + FOCUSED_INPUT_TOUCH_SLOP;
-    return pageX >= left && pageX <= right && pageY >= top && pageY <= bottom;
-}
-export function isTouchInsideKeyboardFocusedInput(event, nativeLayout) {
-    return (isTouchInsideLayout(event, getKeyboardFocusedInputLayout()) ||
-        isTouchInsideLayout(event, nativeLayout));
-}

package/dist/constants/spacing.d.ts

@@ -1,15 +1,19 @@
 /**
  * Spacing Constants
  *
- * A consistent spacing scale based on an 8px base unit.
- * Use these constants throughout the app for consistent spacing.
+ * A consistent spacing scale based on an 8px base unit, plus a small set of
+ * density tokens that components reach for when composing rows, surfaces, and
+ * screens. Tune the density tokens to shift the whole library's feel without
+ * touching the base scale.
  */
 export declare const spacing: {
     readonly base: 8;
     readonly xxs: 2;
     readonly xs: 4;
     readonly sm: 8;
+    readonly smd: 12;
     readonly md: 16;
+    readonly mdl: 20;
     readonly lg: 24;
     readonly xl: 32;
     readonly xxl: 48;
@@ -17,12 +21,18 @@ export declare const spacing: {
     readonly gutter: 16;
     readonly gutterVertical: 24;
     readonly screenPadding: 16;
+    readonly sectionSpacing: 24;
+    readonly rowPaddingY: 10;
+    readonly rowPaddingX: 16;
+    readonly rowGap: 12;
+    readonly rowMinHeight: 40;
+    readonly formRowMinHeight: 32;
+    readonly cardPadding: 16;
+    readonly dialogPadding: 20;
+    readonly touchTarget: 44;
     readonly buttonPadding: 10;
     readonly inputPadding: 10;
-    readonly cardPadding: 16;
-    readonly sectionSpacing: 32;
     readonly listItemSpacing: 8;
-    readonly touchTarget: 44;
     readonly radiusNone: 0;
     readonly radiusXs: 4;
     readonly radiusSm: 8;
@@ -37,5 +47,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, buttonPadding: 10, inputPadding: 10, cardPadding: 16, sectionSpacing: 32, listItemSpacing: 8, touchTarget: 44, 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: 12, 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

@@ -1,8 +1,10 @@
 /**
  * Spacing Constants
  *
- * A consistent spacing scale based on an 8px base unit.
- * Use these constants throughout the app for consistent spacing.
+ * A consistent spacing scale based on an 8px base unit, plus a small set of
+ * density tokens that components reach for when composing rows, surfaces, and
+ * screens. Tune the density tokens to shift the whole library's feel without
+ * touching the base scale.
  */
 export const spacing = {
     // Base unit: 8px
@@ -11,7 +13,9 @@ export const spacing = {
     xxs: 2, // 2px  - Minimal spacing
     xs: 4, // 4px  - Extra small
     sm: 8, // 8px  - Small (1 unit)
+    smd: 12, // 12px - Between small and medium (1.5 units); compact gaps and row padding
     md: 16, // 16px - Medium (2 units)
+    mdl: 20, // 20px - Between medium and large (2.5 units); dialog and sheet padding
     lg: 24, // 24px - Large (3 units)
     xl: 32, // 32px - Extra large (4 units)
     xxl: 48, // 48px - 2x extra large (6 units)
@@ -20,13 +24,20 @@ export const spacing = {
     gutter: 16, // Standard horizontal gutter
     gutterVertical: 24, // Standard vertical spacing
     screenPadding: 16, // Default screen edge padding
+    sectionSpacing: 24, // Space between major sections / grouped lists
+    // Density tokens — rows, surfaces, overlays
+    rowPaddingY: 10, // Vertical padding for list / settings rows
+    rowPaddingX: 16, // Horizontal padding for list / settings rows
+    rowGap: 12, // Gap between media, content, and actions in a row
+    rowMinHeight: 40, // Visual min height for rows on pointer surfaces (web)
+    formRowMinHeight: 32, // Visual min height for checkbox / radio rows on web
+    cardPadding: 16, // Default card / stat card padding
+    dialogPadding: 20, // Default dialog / alert dialog padding
+    touchTarget: 44, // Minimum comfortable native touch target
     // Component-specific
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
-    cardPadding: 16, // Default card padding
-    sectionSpacing: 32, // Space between major sections
     listItemSpacing: 8, // Space between list items
-    touchTarget: 44, // Minimum comfortable native touch target
     // Border radius — shadcn-inspired scale (radiusMd = 12px default)
     radiusNone: 0,
     radiusXs: 4,
@@ -44,6 +55,6 @@ export const spacing = {
     iconXl: 48,
 };
 // Export individual constants for convenience
-export const { base, xxs, xs, sm, md, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, buttonPadding, inputPadding, cardPadding, sectionSpacing, listItemSpacing, touchTarget, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
 // Helper function to multiply base spacing
 export const space = (multiplier) => spacing.base * multiplier;