@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/Dialog.tsx

@@ -1,5 +1,4 @@
 import {
-  ScrollView,
   Text,
   View,
   useWindowDimensions,
@@ -7,7 +6,6 @@ import {
   type TextProps,
   type ViewProps,
 } from "react-native";
-import { SlideInDown } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconX } from "@tabler/icons-react-native";
 import { FloatingSurface } from "./FloatingSurface";
@@ -18,7 +16,7 @@ import { palette } from "./palette";
 import { tokens } from "./tokens";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
-import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { SheetDragView, SheetScrollView } from "./primitives/sheet-drag";
 import {
   OverlayClose,
   OverlayModal,
@@ -57,6 +55,13 @@ export type DialogContentProps = ViewProps & {
    * at every size.
    */
   viewportAware?: boolean;
+  /**
+   * Called once the dialog is on screen. Focus its field here (`ref.focus()`)
+   * rather than with `autoFocus`: in a `Modal`, Android may not raise the
+   * keyboard for a field focused at mount, and the web focus trap moves focus
+   * to the first control (the backdrop) after it.
+   */
+  onShow?: () => void;
 };
 
 /** Web `rounded-t-2xl` (16) on the compact sheet. */
@@ -64,8 +69,9 @@ const SHEET_RADIUS = tokens.radius.lg;
 
 /** The centred panel: at most 480 wide. */
 const PANEL = { width: "100%", maxWidth: 480, alignSelf: "center" } as const;
-/** The compact sheet: its bottom corners sit below the screen edge. */
-const SHEET = { marginBottom: -SHEET_RADIUS };
+/** The compact sheet: its bottom corners sit below the screen edge, and it shrinks to the room, as `SheetContent`. */
+const SHEET = { marginBottom: -SHEET_RADIUS, flexShrink: 1 };
+const SHRINK = { flexShrink: 1 };
 
 const CENTRED: DialogLayout = { compact: false, stacked: false };
 const COMPACT: DialogLayout = { compact: true, stacked: false };
@@ -79,8 +85,11 @@ const STACKED: DialogLayout = { compact: true, stacked: true };
  * In a compact window (the web `COMPACT_OVERLAY_QUERY`, from the window size)
  * it is the web phone bottom sheet: full width, top corners 16, a handle,
  * `pt-3 px-6`, the bottom safe-area inset (at least 24) below, and it slides
- * up unless Reduce Motion is on. Its bottom corners sit below the screen edge,
- * as `SheetContent`'s do. `DialogFooter` stacks its buttons there.
+ * up on open and down on close unless Reduce Motion is on. Drag it down to
+ * close, as `SheetContent`
+ * (when `dismissible`). Its bottom corners sit below the screen edge,
+ * as `SheetContent`'s do. `DialogFooter` stacks its buttons there. Taller than
+ * the room, it shrinks to fit, so a `DialogBody` inside scrolls.
  */
 export function DialogContent({
   children,
@@ -88,6 +97,7 @@ export function DialogContent({
   hideCloseButton = false,
   dismissible = true,
   viewportAware = true,
+  onShow,
   style,
   ...props
 }: DialogContentProps) {
@@ -103,27 +113,27 @@ export function DialogContent({
         part="DialogContent"
         placement={compact ? "bottom" : "center"}
         dismissible={dismissible}
+        onShow={onShow}
       >
-        <NativeOnlyAnimatedView
-          entering={compact ? SlideInDown.duration(240) : undefined}
-          style={compact ? SHEET : PANEL}
-        >
-          <FloatingSurface blur={false} radius={compact ? SHEET_RADIUS : tokens.radius.card}>
-            <View
-              accessibilityViewIsModal
-              className={cn(compact ? "gap-4 px-6 pt-3" : "gap-4 p-6", className)}
-              {...props}
-              style={[
-                compact ? { paddingBottom: Math.max(24, insets.bottom) + SHEET_RADIUS } : null,
-                style,
-              ]}
-            >
-              {compact ? <DialogHandle /> : null}
-              {children}
-            </View>
-            {hideCloseButton ? null : <DialogCloseButton />}
-          </FloatingSurface>
-        </NativeOnlyAnimatedView>
+        <View style={compact ? SHEET : PANEL}>
+          <SheetDragView enabled={compact && dismissible} style={compact ? SHRINK : undefined}>
+            <FloatingSurface blur={false} radius={compact ? SHEET_RADIUS : tokens.radius.card} style={compact ? SHRINK : undefined}>
+              <View
+                accessibilityViewIsModal
+                className={cn(compact ? "gap-4 px-6 pt-3" : "gap-4 p-6", className)}
+                {...props}
+                style={[
+                  compact ? { paddingBottom: Math.max(24, insets.bottom) + SHEET_RADIUS, flexShrink: 1 } : null,
+                  style,
+                ]}
+              >
+                {compact ? <DialogHandle /> : null}
+                {children}
+              </View>
+              {hideCloseButton ? null : <DialogCloseButton />}
+            </FloatingSurface>
+          </SheetDragView>
+        </View>
       </OverlayModal>
     </DialogLayoutContext.Provider>
   );
@@ -131,7 +141,7 @@ export function DialogContent({
 
 /**
  * The web compact handle: an `h-1 w-12` pill in `surface-tertiary`, in a
- * 44-high row. It is not a drag target, on the web either.
+ * 44-high row. The whole sheet drags (`SheetDragView`), the handle with it.
  */
 function DialogHandle() {
   const scheme = useScheme();
@@ -209,17 +219,19 @@ export function DialogDescription({ className, style, ...props }: TextPartProps)
   );
 }
 
-/** Scrolling body for long content. Height is capped at `maxHeight` (default 60% of the window). */
-export function DialogBody({
-  maxHeight,
-  style,
-  ...props
-}: ScrollViewProps & { maxHeight?: number }) {
+/**
+ * Scrolling body for long content. Height is capped at `maxHeight` (default
+ * 60% of the window). In a bottom sheet (`SheetScrollView`) dragging down
+ * scrolls it back first and moves the sheet only from the top, and it holds
+ * still while the sheet follows the finger.
+ */
+export function DialogBody({ maxHeight, style, ...props }: ScrollViewProps & { maxHeight?: number }) {
   const { height } = useWindowDimensions();
   return (
-    <ScrollView
+    <SheetScrollView
       bounces={false}
       keyboardShouldPersistTaps="handled"
+      scrollEventThrottle={16}
       style={[{ maxHeight: maxHeight ?? height * 0.6 }, style]}
       {...props}
     />

package/src/DividedList.tsx

@@ -17,21 +17,25 @@ export type DividedListProps = ViewProps & {
  * no divider is left hanging.
  */
 export function DividedList({ children, inset = 0, className, style, ...props }: DividedListProps) {
-  const scheme = useScheme();
   const rows = Children.toArray(children).filter(isValidElement);
   return (
     <View className={className} style={style} {...props}>
       {rows.map((row, index) => (
         <Fragment key={row.key ?? index}>
-          {index > 0 ? (
-            <View
-              accessible={false}
-              style={{ height: 1, marginLeft: inset, backgroundColor: tokens.color.border[scheme] }}
-            />
-          ) : null}
+          {index > 0 ? <ListDivider inset={inset} /> : null}
           {row}
         </Fragment>
       ))}
     </View>
   );
 }
+
+/**
+ * The hairline `DividedList` draws between two rows (1 high, `border`
+ * colour), on its own: the `ItemSeparatorComponent` of a `FlatList` or
+ * `SectionList` whose rows should look like a `DividedList`.
+ */
+export function ListDivider({ inset = 0 }: { inset?: number }) {
+  const scheme = useScheme();
+  return <View accessible={false} style={{ height: 1, marginLeft: inset, backgroundColor: tokens.color.border[scheme] }} />;
+}

package/src/DropdownMenu.tsx

@@ -16,7 +16,8 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { IconCheck, type IconProps } from "@tabler/icons-react-native";
 import { FloatingSurface } from "./FloatingSurface";
 import { cn } from "./cn";
-import { MIN_TOUCH_TARGET, sizeStyle, typeStyle } from "./controlStyles";
+import { sizeStyle, typeStyle } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
 import { palette } from "./palette";
 import { useLargerText } from "./theme";
 import { tokens } from "./tokens";
@@ -29,7 +30,8 @@ import { useControllableState } from "./primitives/use-controllable-state";
  * p-1.5 rounded-lg`, `sideOffset` 4 and `collisionPadding` 8; items `px-2.5
  * py-2 rounded-menu-item` (8) with a 16 icon `gap-2`; radio items `pl-8` with
  * the check at `left-2.5`; the label `px-2.5 py-1.5`; the separator `-mx-1.5
- * my-1 h-px`. Items are at least 44 high (the web `max-sm:min-h-10` is 40).
+ * my-1 h-px`. Items are at least 48 high, a phone menu row (the web
+ * `max-sm:min-h-10` is 40).
  */
 export const DROPDOWN_MENU = {
   minWidth: 192,
@@ -37,6 +39,7 @@ export const DROPDOWN_MENU = {
   radius: tokens.radius.lg,
   sideOffset: 4,
   edge: 8,
+  itemHeight: 48,
   itemRadius: 8,
   itemPaddingX: 10,
   itemPaddingY: 8,
@@ -206,9 +209,11 @@ export function DropdownMenuContent({
   const window = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const reduceMotion = useReduceMotion();
-  const [contentHeight, setContentHeight] = useState(0);
+  // `null` until the content is measured: only then is it known whether the
+  // menu fits below the trigger or flips above, so it stays hidden till then.
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
   const close = () => setOpen(false);
-  const position = dropdownMenuPosition({ trigger, window, insets, align, sideOffset, contentHeight });
+  const position = dropdownMenuPosition({ trigger, window, insets, align, sideOffset, contentHeight: contentHeight ?? 0 });
   return (
     <Modal
       visible={open}
@@ -237,6 +242,7 @@ export function DropdownMenuContent({
             ...position,
             minWidth: DROPDOWN_MENU.minWidth,
             maxWidth: window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge,
+            opacity: contentHeight === null ? 0 : 1,
           }}
         >
           <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={{ maxHeight: position.maxHeight }}>
@@ -257,11 +263,11 @@ export function DropdownMenuContent({
   );
 }
 
-/** Item type and icon size: the web `text-sm` with a 16 icon, or `text-lg` with a 22 icon and 56 rows with larger text. */
+/** Item type and icon size: the web `text-sm` with a 16 icon in 48 rows, or `text-lg` with a 22 icon and 56 rows with larger text. */
 function itemMetrics(largerText: boolean) {
   return largerText
     ? { text: sizeStyle("text-lg"), icon: 22, minHeight: 56 }
-    : { text: sizeStyle("text-sm"), icon: 16, minHeight: MIN_TOUCH_TARGET };
+    : { text: sizeStyle("text-sm"), icon: 16, minHeight: DROPDOWN_MENU.itemHeight };
 }
 
 type MenuIcon = ComponentType<IconProps>;
@@ -308,6 +314,8 @@ function MenuRow({
       disabled={disabled}
       accessibilityState={{ ...accessibilityState, disabled: Boolean(disabled), ...(checked === undefined ? null : { checked }) }}
       onPress={() => {
+        // A new pick from a set ticks; a plain action and the current choice do not.
+        if (checked === false) selectionHaptic();
         onSelect?.();
         if (closeOnSelect) setOpen(false);
       }}
@@ -346,13 +354,19 @@ export type DropdownMenuItemProps = MenuItemBaseProps & {
   icon?: MenuIcon;
   /** The web `text-destructive` item: label and icon in the danger colour. */
   destructive?: boolean;
+  /** The web `text-warning` item (such as Archive): label and icon in the warning colour. */
+  warning?: boolean;
 };
 
 /** One action row (`menuitem`): an optional icon and the label. */
-export function DropdownMenuItem({ icon: Icon, destructive, ...props }: DropdownMenuItemProps) {
+export function DropdownMenuItem({ icon: Icon, destructive, warning, ...props }: DropdownMenuItemProps) {
   const scheme = useScheme();
   const metrics = itemMetrics(useLargerText());
-  const color = destructive ? palette.danger[scheme] : palette.overlayForeground[scheme];
+  const color = destructive
+    ? palette.danger[scheme]
+    : warning
+      ? palette.warning[scheme]
+      : palette.overlayForeground[scheme];
   return (
     <MenuRow
       part="DropdownMenuItem"

package/src/FloatingSurface.tsx

@@ -1,5 +1,4 @@
 import { Platform, StyleSheet, View, type ViewProps } from "react-native";
-import { useColorScheme } from "nativewind";
 import { glassMode, loadBlur } from "./blur";
 import { cn } from "./cn";
 import { hasDefiniteHeight } from "./definiteSize";
@@ -12,6 +11,7 @@ import {
 } from "./floating";
 import { useGlassBlurTarget } from "./glassBlur";
 import { useReduceTransparency } from "./useReduceTransparency";
+import { useScheme } from "./useScheme";
 
 type FloatingSurfaceProps = ViewProps & {
   className?: string;
@@ -29,7 +29,7 @@ export function FloatingSurface({
   elevated = true,
   ...props
 }: FloatingSurfaceProps) {
-  const { colorScheme } = useColorScheme();
+  const colorScheme = useScheme();
   const reduceTransparency = useReduceTransparency();
   const blurTarget = useGlassBlurTarget();
   const BlurView = loadBlur()?.BlurView;
@@ -127,6 +127,9 @@ export function GlassSheetBackground({
 const styles = StyleSheet.create({
   clip: {
     overflow: "hidden",
+    // A surface held shorter than its content (a sheet in a short window)
+    // shrinks the clip with it, so a scroll view inside can scroll.
+    flexShrink: 1,
   },
   fill: {
     flex: 1,

package/src/FloatingTabBar.tsx

@@ -10,16 +10,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { floatingTabPillColors, tabColors, typeStyle } from "./controlStyles";
 import { selectionHaptic } from "./haptics";
 import { FloatingSurface } from "./FloatingSurface";
-import { isTabBarRouteVisible, type FloatingTabOptions } from "./tabBarRoutes";
+import { isTabBarHidden, isTabBarRouteVisible, type FloatingTabOptions } from "./tabBarRoutes";
 import { useLargerText } from "./theme";
 import { useReduceMotion } from "./useReduceMotion";
 import { useScheme } from "./useScheme";
-import {
-  FLOATING_INSET,
-  FLOATING_PILL_RADIUS,
-  FLOATING_TAB_BAR_HEIGHT,
-  FLOATING_TAB_BAR_HEIGHT_LARGE,
-} from "./floating";
+import { FLOATING_PILL_RADIUS, tabBarHeight, tabBarSlotStyle } from "./floating";
 
 /**
  * Space between the bar edge and the tabs, on every side of the active pill,
@@ -58,7 +53,8 @@ export type FloatingTabBarProps = {
  * `tabBarActiveTintColor` and `tabBarInactiveTintColor` override the label
  * and icon colours. Hide a tab with `options={{ href: null }}` on its
  * `Tabs.Screen`: the bar draws no tab for it (`isTabBarRouteVisible`), and
- * the other tabs keep their focus and navigation.
+ * the other tabs keep their focus and navigation. The focused route hides the
+ * whole bar with `tabBarStyle: { display: "none" }` (`isTabBarHidden`).
  */
 export function FloatingTabBar({
   state,
@@ -68,27 +64,22 @@ export function FloatingTabBar({
   const insets = useSafeAreaInsets();
   const largerText = useLargerText();
   const scheme = useScheme();
-  const height = largerText
-    ? FLOATING_TAB_BAR_HEIGHT_LARGE
-    : FLOATING_TAB_BAR_HEIGHT;
+  const height = tabBarHeight(largerText);
+  const focusedRoute = state.routes[state.index];
+  if (focusedRoute && isTabBarHidden(descriptors[focusedRoute.key]?.options)) {
+    return null;
+  }
   // The pill counts only the tabs drawn. No pill while a hidden route is focused.
   const visible = state.routes.filter((route) =>
     isTabBarRouteVisible(descriptors[route.key]?.options),
   );
-  const active = visible.findIndex(
-    (route) => route.key === state.routes[state.index]?.key,
-  );
+  const active = visible.findIndex((route) => route.key === focusedRoute?.key);
 
   return (
     <View
       pointerEvents="box-none"
       // Inside the home indicator and, in landscape, the notch.
-      style={{
-        position: "absolute",
-        left: insets.left + FLOATING_INSET,
-        right: insets.right + FLOATING_INSET,
-        bottom: FLOATING_INSET + Math.max(insets.bottom, 8),
-      }}
+      style={tabBarSlotStyle(insets)}
     >
       <FloatingSurface radius={FLOATING_PILL_RADIUS}>
         {active >= 0 ? (
@@ -184,11 +175,11 @@ function ActiveTabPill({ index, count }: { index: number; count: number }) {
   const offset = useSharedValue(left);
 
   useEffect(() => {
-    offset.value = reduceMotion ? left : withTiming(left, PILL_SLIDE);
+    offset.set(reduceMotion ? left : withTiming(left, PILL_SLIDE));
   }, [left, reduceMotion, offset]);
 
   const slide = useAnimatedStyle(() => ({
-    left: `${offset.value}%` as const,
+    left: `${offset.get()}%` as const,
   }));
 
   return (

package/src/HeaderIconButton.tsx

@@ -6,13 +6,14 @@ import { useScheme } from "./useScheme";
 
 /**
  * Fill and border of `HeaderIconButton`: the surface with a white hairline
- * (40% in light, 10% in dark). Styles, not `bg-surface`, which an app theme
- * that nests `dark` under `surface` keeps white in dark mode.
+ * (40%) in light and, in dark, the glass `tokens.color.hairline` of the
+ * floating tab bar, so `configureTheme` sets both. Styles, not `bg-surface`,
+ * which an app theme that nests `dark` under `surface` keeps white in dark mode.
  */
 export function headerIconButtonColors(scheme: "light" | "dark") {
   return {
     backgroundColor: tokens.color.surface[scheme],
-    borderColor: withAlpha(tokens.color.white, scheme === "dark" ? 0.1 : 0.4),
+    borderColor: scheme === "dark" ? tokens.color.hairline.dark : withAlpha(tokens.color.white, 0.4),
   };
 }
 

package/src/Input.tsx

@@ -21,8 +21,8 @@ const Input = React.forwardRef<
       ref={ref}
       placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
       className={cn(
-        // The web field: h-10 px-3.5 py-2, 16 px type (its phone size).
-        "min-h-10 border px-3.5 py-2 text-base font-instrument-sans",
+        // The web field px-3.5 py-2 with 16 px type (its phone size), 44 high (the web h-10 is a desktop 40).
+        "min-h-11 border px-3.5 py-2 text-base font-instrument-sans",
         largerText && "min-h-16 px-4 py-4 text-xl font-instrument-sans-medium",
         className,
       )}

package/src/LoadingState.tsx

@@ -0,0 +1,132 @@
+import { View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useFrameCallback,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
+import {
+  DRIVE_DELAYS,
+  DRIVE_SIZES,
+  DRIVE_STILL_FRAME_MS,
+  driveCellOpacity,
+  type LoadingStateSize,
+} from "./loadingGrid";
+import { tokens } from "./tokens";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+
+export type { LoadingStateSize } from "./loadingGrid";
+
+export type LoadingStateProps = {
+  /** What is running, for assistive tech. Default `"Working"`, as the web. */
+  label?: string;
+  /** `sm` is the web session-row grid (3 pt cells, 11 pt). Default `"default"` (4 pt cells, 15 pt). */
+  size?: LoadingStateSize;
+  /** Cell colour. Default the muted text colour. Native has no `currentColor`. */
+  color?: string;
+  /**
+   * One colour per column, left to right, as the web `LoadingState` `colors`
+   * (Eva's brand purple-to-blue sweep). Wins over `color`.
+   */
+  colors?: readonly [string, string, string];
+  /** Hold a still frame, for example while the screen is not focused. Default `false`. */
+  paused?: boolean;
+};
+
+/**
+ * The web `LoadingState` with `variant="Drive"` and `iconOnly`: a 3x3 pixel
+ * grid whose chevron wavefront drives right. Same cells, delays, 650 ms
+ * cycle and keyframes as the web (see `loadingGrid.ts`). One frame clock per
+ * grid on the UI thread, started on mount as the web WAAPI pulse is. With
+ * Reduce Motion, or `paused`, it holds a still chevron frame and runs no
+ * clock. The labelled form (label and elapsed timer) and the `Dots` and
+ * `Orbit` variants are not ported.
+ */
+export function LoadingState({ label = "Working", size = "default", color, colors, paused = false }: LoadingStateProps) {
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const single = color ?? tokens.color.muted[scheme];
+  const fill: Fills = colors ?? [single, single, single];
+  const still = reduceMotion || paused;
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: true }}
+      style={{ alignSelf: "flex-start" }}
+    >
+      {still ? (
+        <DriveGrid size={size} fill={fill} elapsed={undefined} />
+      ) : (
+        <RunningDriveGrid size={size} fill={fill} />
+      )}
+    </View>
+  );
+}
+
+/** Column colours, left to right. */
+type Fills = readonly [string, string, string];
+
+/** Owns the clock, so unmounting it (Reduce Motion, `paused`) stops the frame callback. */
+function RunningDriveGrid({ size, fill }: { size: LoadingStateSize; fill: Fills }) {
+  const elapsed = useSharedValue(0);
+  useFrameCallback((frame) => {
+    "worklet";
+    elapsed.set(frame.timeSinceFirstFrame);
+  }, true);
+  return <DriveGrid size={size} fill={fill} elapsed={elapsed} />;
+}
+
+/** The nine cells. No `elapsed`: the still frame. */
+function DriveGrid({
+  size,
+  fill,
+  elapsed,
+}: {
+  size: LoadingStateSize;
+  fill: Fills;
+  elapsed: SharedValue<number> | undefined;
+}) {
+  const { gap } = DRIVE_SIZES[size];
+  // Three explicit rows, not a wrapping row: a fractional gap could wrap early.
+  return (
+    <View style={{ gap }}>
+      {[0, 1, 2].map((row) => (
+        <View key={row} style={{ flexDirection: "row", gap }}>
+          {DRIVE_DELAYS.slice(row * 3, row * 3 + 3).map((delay, column) =>
+            elapsed ? (
+              <DriveCell key={column} size={size} fill={fill[column] ?? fill[0]} delay={delay} elapsed={elapsed} />
+            ) : (
+              <View
+                key={column}
+                style={[cellStyle(size, fill[column] ?? fill[0]), { opacity: driveCellOpacity(DRIVE_STILL_FRAME_MS, delay) }]}
+              />
+            ),
+          )}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function DriveCell({
+  size,
+  fill,
+  delay,
+  elapsed,
+}: {
+  size: LoadingStateSize;
+  fill: string;
+  delay: number;
+  elapsed: SharedValue<number>;
+}) {
+  const pulse = useAnimatedStyle(() => ({ opacity: driveCellOpacity(elapsed.get(), delay) }));
+  return <Animated.View style={[cellStyle(size, fill), pulse]} />;
+}
+
+function cellStyle(size: LoadingStateSize, fill: string) {
+  const { cell, radius } = DRIVE_SIZES[size];
+  return { width: cell, height: cell, borderRadius: radius, backgroundColor: fill };
+}

package/src/PageTitle.tsx

@@ -35,6 +35,11 @@ export function PageTitle({ className, style, ...props }: PageTitleProps) {
 export type PageHeaderProps = Omit<ViewProps, "children"> & {
   /** The page title, drawn with `PageTitle`. */
   title: string;
+  /**
+   * Content before the title, such as a close `HeaderIconButton` while the
+   * page is in select mode (Android's contextual action bar). It keeps its width.
+   */
+  leading?: ReactNode;
   /**
    * Content at the end of the row, such as an "Update all" `Button` (pass it
    * `fullWidth={false}`). It keeps its width; a long title is cut off instead.
@@ -52,13 +57,14 @@ export type PageHeaderProps = Omit<ViewProps, "children"> & {
 };
 
 /**
- * A screen's title row: `PageTitle` at the start and an optional `action` at
- * the end, with the `ScreenContainer` side padding (`px-4`). The row is at
+ * A screen's title row: an optional `leading` part, `PageTitle` and an
+ * optional `action` at the end, with the `ScreenContainer` side padding (`px-4`). The row is at
  * least `PAGE_HEADER_HEIGHT` (56) high below the top inset, so tab roots with
  * and without an action put their titles at the same height.
  */
 export function PageHeader({
   title,
+  leading,
   action,
   safeTop = true,
   className,
@@ -74,6 +80,7 @@ export function PageHeader({
       style={[{ paddingTop: top, minHeight: top + PAGE_HEADER_HEIGHT }, style]}
       {...props}
     >
+      {leading ? <View className="shrink-0">{leading}</View> : null}
       <PageTitle className={cn("min-w-0 flex-1", titleClassName)}>{title}</PageTitle>
       {action ? <View className="shrink-0">{action}</View> : null}
     </View>

package/src/Pager.tsx

@@ -0,0 +1,62 @@
+import { createContext, useContext, useEffect, type ComponentType, type ReactNode } from "react";
+import { View } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+export type PagerProps = {
+  /** The page shown, from 0. A change from outside (a tab press, a link) slides there in 220 ms, through the pages between (at once with Reduce Motion, and without the swipe). */
+  index: number;
+  count: number;
+  /** A swipe settled on another page. Set `index` to it. */
+  onIndexChange: (index: number) => void;
+  /**
+   * Where the pages are, in pages (1.5 is halfway between the second and the
+   * third). Create it with `useSharedValue(index)` and pass the same value to
+   * `PillTabs` (`progress`), so its indicator moves with the pages.
+   */
+  progress: SharedValue<number>;
+  /** Draws one page. A page is drawn once visited or once a swipe could reach it, and then stays, so it keeps its state. */
+  renderPage: (index: number) => ReactNode;
+};
+
+/**
+ * The Gesture Handler pager, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`.
+ */
+export const PagerGestureContext = createContext<ComponentType<PagerProps> | null>(null);
+
+/** Set inside a swiped `Pager`: a `SwipeableRow` there leaves the directions it has no actions for to the pager. */
+export const InsidePagerContext = createContext(false);
+
+/**
+ * Side-by-side pages a horizontal swipe moves between, such as the sections
+ * under a row of `PillTabs`. The pages follow the finger 1:1 and, on release,
+ * spring on at the finger's speed to the nearest page (a flick turns one
+ * page); past the first and last page they rubber-band. The linked
+ * `progress` moves the `PillTabs` indicator with them. Only a clearly
+ * sideways drag takes the pages: a vertical drag scrolls the page, and a
+ * `SwipeableRow` under the finger takes its own swipe first (it lets a drag
+ * toward a side it has no actions for through to the pager). A settled page
+ * fires a selection haptic and `onIndexChange`. With Reduce Motion on the
+ * pages still follow the finger, and the release settles at once.
+ *
+ * The swipe needs `GestureHandlerProvider`; without it only the current page
+ * is drawn, with no swipe.
+ */
+export function Pager(props: PagerProps) {
+  const GesturePager = useContext(PagerGestureContext);
+  if (GesturePager) return <GesturePager {...props} />;
+  return <StaticPager {...props} />;
+}
+
+function StaticPager({ index, progress, renderPage }: PagerProps) {
+  // The linked indicator follows a page set from outside. An effect: a shared value is never written in render.
+  useEffect(() => {
+    progress.set(index);
+  }, [index, progress]);
+  return (
+    <View key={index} style={{ flex: 1 }}>
+      {renderPage(index)}
+    </View>
+  );
+}

package/src/PasswordInput.tsx

@@ -54,7 +54,7 @@ const PasswordInput = React.forwardRef<
         // The type comes from these classes only (no style `fontSize`), so it
         // cannot diverge from NativeWind's `text-base` / `text-xl`.
         className={cn(
-          "min-h-10 border px-3.5 py-2 text-base font-instrument-sans",
+          "min-h-11 border px-3.5 py-2 text-base font-instrument-sans",
           largerText && "min-h-16 px-4 py-4 text-xl font-instrument-sans-medium",
           className,
         )}