@oxyhq/bloom 0.46.0 → 0.48.0

package/src/dialog/DialogHeader.tsx

@@ -0,0 +1,420 @@
+import React, {
+  createContext,
+  memo,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
+import {
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+import {
+  ChevronLeft_Stroke2_Corner0_Rounded,
+  TimesLarge_Stroke2_Corner0_Rounded,
+} from '../icons';
+import { FrostedIconButton } from '../frosted-icon-button';
+import { useTheme } from '../theme/use-theme';
+import { H1, Text } from '../typography';
+import type { DialogHeaderConfig } from './types';
+
+export type { DialogHeaderConfig } from './types';
+
+// ---------------------------------------------------------------------------
+//  Dialog-owned navigation header (iOS large-title collapse).
+//
+//  This is a DISTINCT surface mode from the declarative
+//  `title`/`description`/`actions` centered-heading path: it turns the Dialog
+//  into a scrolling page with a sticky, gradient top bar (left + right slots)
+//  and a large collapsing title that lives in the Dialog's OWN scroll content.
+//  As the large title scrolls under the bar, a small title cross-fades into the
+//  bar center.
+//
+//  Screens render NO header of their own — they declare their title/subtitle
+//  (via the surface registry) or contribute runtime slots (a Save action, a
+//  dynamic title) through {@link useDialogHeader}.
+// ---------------------------------------------------------------------------
+
+/** Interactive nav-bar row height (px). Buttons + collapsed title live here. */
+export const DIALOG_NAV_BAR_HEIGHT = 52;
+
+/** Extra gradient tail (px) below the bar, over which scrolled content fades. */
+const GRADIENT_FADE = 20;
+
+/** Total gradient overlay height (bar + fade tail). */
+export const DIALOG_HEADER_OVERLAY_HEIGHT = DIALOG_NAV_BAR_HEIGHT + GRADIENT_FADE;
+
+/**
+ * Top inset applied to the Dialog's scroll content so the large title starts
+ * BELOW the whole gradient overlay (fully clear at rest, then scrolls under it).
+ */
+export const DIALOG_HEADER_CONTENT_TOP = DIALOG_HEADER_OVERLAY_HEIGHT;
+
+/** Horizontal gutter — matches the `screen-margin` (20px) SDK screens use. */
+const HEADER_H_PADDING = 20;
+
+/** Circular icon-button diameter for the default back / close affordances. */
+const NAV_BUTTON_SIZE = 36;
+
+// --- Runtime override store (child screen → nav bar / large title) ----------
+//
+// The nav bar overlay and the in-content large title live in DIFFERENT subtrees
+// (the bar is a sibling ABOVE the scroller; the large title + the screen are
+// inside it), so a plain React ancestor context cannot bridge a screen's runtime
+// contribution up to the bar. We use a tiny external store instead: the screen
+// writes its override through {@link useDialogHeader}; the bar and large title
+// read it via `useSyncExternalStore`. Only those two re-render — never the
+// screen subtree — and there is no shared-ancestor constraint.
+
+interface HeaderStore {
+  getSnapshot: () => DialogHeaderConfig | null;
+  setOverride: (next: DialogHeaderConfig | null) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.title === b.title &&
+    a.subtitle === b.subtitle &&
+    a.largeTitle === b.largeTitle &&
+    a.left === b.left &&
+    a.right === b.right &&
+    a.onBack === b.onBack &&
+    a.showClose === b.showClose
+  );
+}
+
+function createHeaderStore(): HeaderStore {
+  let override: DialogHeaderConfig | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    getSnapshot: () => override,
+    setOverride: (next) => {
+      if (configsEqual(override, next)) return;
+      override = next;
+      for (const l of listeners) l();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+/**
+ * The per-surface header controller — the scroll offset + measured large-title
+ * height shared values plus the runtime-override store. Created once per Dialog
+ * (via {@link useDialogHeaderController}) and threaded into the scroller (writes
+ * `scrollY`), the nav bar, the large title, and the child provider.
+ */
+export interface DialogHeaderController {
+  scrollY: SharedValue<number>;
+  largeTitleHeight: SharedValue<number>;
+  store: HeaderStore;
+}
+
+/** Create the header controller for one Dialog. Stable for the Dialog's life. */
+export function useDialogHeaderController(): DialogHeaderController {
+  const scrollY = useSharedValue(0);
+  const largeTitleHeight = useSharedValue(0);
+  const store = useMemo(() => createHeaderStore(), []);
+  return useMemo(
+    () => ({ scrollY, largeTitleHeight, store }),
+    [scrollY, largeTitleHeight, store],
+  );
+}
+
+const DialogHeaderContext = createContext<DialogHeaderController | null>(null);
+
+/**
+ * Wraps the Dialog's scroll content so a mounted screen can contribute header
+ * slots via {@link useDialogHeader}. Only the child subtree needs this — the nav
+ * bar and large title read the same controller directly.
+ */
+export function DialogHeaderProvider({
+  controller,
+  children,
+}: {
+  controller: DialogHeaderController;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <DialogHeaderContext.Provider value={controller}>
+      {children}
+    </DialogHeaderContext.Provider>
+  );
+}
+
+/**
+ * Contribute header content from within a Dialog surface — a dynamic title, a
+ * Save action, custom slots. Merges over the surface's static (registry) header
+ * config; unmounting clears the contribution. Slot nodes (`left`/`right`) MUST
+ * be referentially stable (memoize them) so the effect does not thrash.
+ *
+ * No-op outside a header-mode Dialog (e.g. a confirm dialog), so a screen can
+ * call it unconditionally.
+ */
+export function useDialogHeader(config: DialogHeaderConfig | null | undefined): void {
+  const controller = useContext(DialogHeaderContext);
+  const store = controller?.store;
+  // Set synchronously in the commit's layout phase so the bar/title fill in
+  // BEFORE the browser paints — no first-frame flash of an empty bar.
+  useLayoutEffect(() => {
+    if (!store) return;
+    store.setOverride(config ?? null);
+    return () => store.setOverride(null);
+    // Slot nodes are compared by identity; callers memoize them.
+  }, [
+    store,
+    config?.title,
+    config?.subtitle,
+    config?.largeTitle,
+    config?.left,
+    config?.right,
+    config?.onBack,
+    config?.showClose,
+  ]);
+}
+
+/** Read the merged (base + runtime-override) header config, reactively. */
+function useMergedHeaderConfig(
+  base: DialogHeaderConfig,
+  store: HeaderStore,
+): DialogHeaderConfig {
+  const override = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo(() => (override ? { ...base, ...override } : base), [base, override]);
+}
+
+// --- Nav bar overlay --------------------------------------------------------
+
+/**
+ * The sticky nav bar: gradient background + left / center (collapsing title) /
+ * right slots. Absolutely positioned at the top of the Dialog surface, painted
+ * ABOVE the scroll content. Reads the scroll offset to cross-fade the small
+ * title in as the large title scrolls under it.
+ *
+ * `onDismiss` is the Dialog's own close (the default right-slot close button
+ * calls it) — passed explicitly rather than read from the dialog context because
+ * the bar is rendered as a sibling of the scroller, outside that context on the
+ * bottom-sheet path.
+ */
+export const DialogNavHeader = memo(function DialogNavHeader({
+  controller,
+  header,
+  onDismiss,
+  collapse = true,
+  style,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+  onDismiss: () => void;
+  /**
+   * Whether the small title cross-fades in on scroll (paired with an in-content
+   * {@link DialogLargeTitle}). Defaults to `true`. Set `false` for a surface
+   * whose content owns its own scroller (no Dialog scroll offset to drive the
+   * collapse): the small title is then always visible — a plain titled nav bar.
+   */
+  collapse?: boolean;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { scrollY, largeTitleHeight } = controller;
+
+  const hasLargeTitle = collapse && (config.largeTitle ?? true) && !!config.title;
+
+  const titleStyle = useAnimatedStyle(() => {
+    // When there is no large title to collapse under, the bar title is always
+    // shown (a plain, non-collapsing nav bar). Otherwise it cross-fades in as the
+    // large title scrolls up under the bar.
+    if (!hasLargeTitle) return { opacity: 1, transform: [{ translateY: 0 }] };
+    const threshold = largeTitleHeight.value > 0 ? largeTitleHeight.value : 44;
+    const start = threshold * 0.35;
+    const end = threshold * 0.9;
+    return {
+      opacity: interpolate(scrollY.value, [start, end], [0, 1], Extrapolation.CLAMP),
+      transform: [
+        { translateY: interpolate(scrollY.value, [start, end], [10, 0], Extrapolation.CLAMP) },
+      ],
+    };
+    // Reanimated on RN-Web has no worklets plugin: every shared value the mapper
+    // reads MUST be in the deps array or it freezes on the first frame.
+  }, [scrollY, largeTitleHeight, hasLargeTitle]);
+
+  const left =
+    config.left ??
+    (config.onBack ? (
+      <FrostedIconButton
+        onPress={config.onBack}
+        accessibilityLabel="Go back"
+        icon={<ChevronLeft_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  const right =
+    config.right ??
+    (config.showClose !== false ? (
+      <FrostedIconButton
+        onPress={onDismiss}
+        accessibilityLabel="Close"
+        icon={<TimesLarge_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.overlay, style]}
+    >
+      {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
+          content fades out under the bar. Pure NativeWind — no SVG dependency. */}
+      <View
+        pointerEvents="none"
+        className="bg-gradient-to-b from-bg to-transparent"
+        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
+      />
+      <View pointerEvents="box-none" style={styles.navRow}>
+        <View style={styles.side}>{left}</View>
+        <Animated.View
+          pointerEvents="none"
+          testID="dialog-nav-title"
+          style={[styles.centerTitle, titleStyle]}
+        >
+          {config.title ? (
+            <Text numberOfLines={1} style={[styles.smallTitle, { color: theme.colors.text }]}>
+              {config.title}
+            </Text>
+          ) : null}
+          {/* The subtitle rides along ONLY in the static (non-collapsing) bar —
+              own-scroller screens whose subtitle is a short count. A large-title
+              screen keeps a clean single-line collapsed title. */}
+          {!hasLargeTitle && config.subtitle ? (
+            <Text
+              numberOfLines={1}
+              style={[styles.smallSubtitle, { color: theme.colors.textSecondary }]}
+            >
+              {config.subtitle}
+            </Text>
+          ) : null}
+        </Animated.View>
+        <View style={[styles.side, styles.sideRight]}>{right}</View>
+      </View>
+    </View>
+  );
+});
+
+// --- In-content large title -------------------------------------------------
+
+/**
+ * The large collapsing title, rendered at the TOP of the Dialog's scroll content
+ * (before the screen body). Owns the content top inset (so the title starts
+ * below the gradient overlay) and measures its own text height into the
+ * controller so the nav bar knows when to cross-fade the small title in.
+ */
+export const DialogLargeTitle = memo(function DialogLargeTitle({
+  controller,
+  header,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { largeTitleHeight } = controller;
+
+  const hasLargeTitle = (config.largeTitle ?? true) && !!config.title;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    largeTitleHeight.value = e.nativeEvent.layout.height;
+  };
+
+  if (!hasLargeTitle) {
+    // No large title: just inset the content below the nav bar.
+    return <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
+  }
+
+  return (
+    <>
+      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
+        <H1 style={[styles.largeTitle, { color: theme.colors.text }]}>{config.title}</H1>
+        {config.subtitle ? (
+          <Text style={[styles.largeSubtitle, { color: theme.colors.textSecondary }]}>
+            {config.subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: DIALOG_HEADER_OVERLAY_HEIGHT,
+    zIndex: 10,
+  },
+  navRow: {
+    height: DIALOG_NAV_BAR_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: HEADER_H_PADDING - 4,
+  },
+  side: {
+    minWidth: NAV_BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sideRight: {
+    justifyContent: 'flex-end',
+  },
+  centerTitle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  smallTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    lineHeight: 20,
+  },
+  smallSubtitle: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 14,
+  },
+  largeTitleBlock: {
+    paddingHorizontal: HEADER_H_PADDING,
+    paddingBottom: 4,
+  },
+  largeTitle: {
+    fontSize: 32,
+    lineHeight: 38,
+    letterSpacing: -0.5,
+    fontWeight: '700',
+  },
+  largeSubtitle: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginTop: 4,
+  },
+});

package/src/dialog/index.ts

@@ -2,6 +2,7 @@ export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
 export { BloomDialogProvider } from './BloomDialogProvider';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
+export { useDialogHeader } from './DialogHeader';
 export type {
   AlertButton,
   AlertButtonStyle,
@@ -11,6 +12,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,

package/src/dialog/index.web.ts

@@ -12,6 +12,7 @@ export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog
 export { BloomDialogProvider } from './BloomDialogProvider.web';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
+export { useDialogHeader } from './DialogHeader';
 export type {
   AlertButton,
   AlertButtonStyle,
@@ -21,6 +22,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,

package/src/dialog/types.ts

@@ -1,9 +1,51 @@
+import type { ReactNode } from 'react';
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
 import type { ResponsiveDialogPlacement } from './placement';
 
 export type { DialogPlacement, ResponsiveDialogPlacement } from './placement';
 
+/**
+ * Config for the Dialog's OWN navigation header — a DISTINCT surface mode from
+ * the declarative `title`/`description`/`actions` centered-heading path. When
+ * present it turns the Dialog into a scrolling page with a sticky, gradient top
+ * bar (left + right slots) and a large collapsing title that lives in the
+ * Dialog's own scroll content; as the large title scrolls under the bar a small
+ * title cross-fades into the bar center. Screens render NO header of their own.
+ *
+ * A surface seeds this from its registry config; a mounted screen may override
+ * or augment any field at runtime via `useDialogHeader` (a dynamic title, a Save
+ * action on the right, etc.).
+ */
+export interface DialogHeaderConfig {
+  /** Collapsing title — rendered large in-content and small in the nav bar. */
+  title?: string;
+  /** Supporting copy under the large title (and, optionally, in the bar). */
+  subtitle?: string;
+  /**
+   * Whether to render the large collapsing title in the scroll content.
+   * Defaults to `true`. When `false`, only the small nav-bar title shows (always
+   * visible, no collapse) and the content starts flush under the bar.
+   */
+  largeTitle?: boolean;
+  /** Custom left slot node. Overrides the default back button. */
+  left?: ReactNode;
+  /** Custom right slot node. Overrides the default close button. */
+  right?: ReactNode;
+  /**
+   * When set, the default left slot renders a back button that calls this. A
+   * custom `left` node still wins. Set by the surface host when the surface can
+   * navigate back.
+   */
+  onBack?: () => void;
+  /**
+   * Whether the default right slot renders a close button (dismiss). Defaults to
+   * `true`. A custom `right` node still wins. `false` suppresses the close
+   * affordance entirely (e.g. a blocking surface).
+   */
+  showClose?: boolean;
+}
+
 /**
  * Side-sheet inset (px) from the root overlay's edges. Lets a host place a
  * `left`/`right` placement "inside its own shell" — e.g. offset from the top
@@ -134,6 +176,40 @@ export type DialogProps = React.PropsWithChildren<{
   inset?: DialogInset;
   /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
   showHandle?: boolean;
+  /**
+   * Turns on the Dialog's OWN navigation header (see {@link DialogHeaderConfig}).
+   * When present the Dialog renders a sticky gradient nav bar + a large
+   * collapsing title over its own scroll content, and its content is inset below
+   * the bar — a DISTINCT mode from the declarative
+   * `title`/`description`/`actions` centered heading (a confirm/alert dialog
+   * passes NO `header` and is unchanged). Screens render no header of their own;
+   * the title/slots come from this config, refined at runtime by a mounted
+   * screen's `useDialogHeader` contribution.
+   */
+  header?: DialogHeaderConfig;
+  /**
+   * Open-INTENT seed for a freshly-mounted placement branch, distinct from the
+   * controlled `open` prop. It ONLY seeds a branch's initial visible state on
+   * mount — it never switches the dialog into controlled close semantics, so
+   * the imperative `control.close()` still owns the exit animation and fires
+   * `onClose` post-exit (no synchronous-`onClose` entry leak). Set by the
+   * surface stack so a responsive `Dialog` that swaps its inner component across
+   * a breakpoint (centered card ↔ bottom sheet on resize) re-mounts the new
+   * branch ALREADY OPEN instead of blank. Ignored when the controlled `open`
+   * prop is provided (that path seeds itself).
+   */
+  startOpen?: boolean;
+  /**
+   * Whether the dialog wraps its content in an internal scroll container.
+   * Defaults to `true`. Set `false` when the content owns its own scrolling
+   * primitive (a `FlatList` / `SectionList` / any VirtualizedList, or its own
+   * `ScrollView`): the surface then renders children WITHOUT a ScrollView wrap —
+   * a bounded, overflow-clipped card on the centered/side placements and a
+   * non-scrollable `BottomSheet` body on the bottom placement — so the child
+   * gets a bounded height and owns its scroll, and no "VirtualizedList inside a
+   * plain ScrollView" warning is emitted.
+   */
+  scrollable?: boolean;
   /**
    * Inner padding (px) of the dialog content container, applied uniformly across
    * every placement (centered panel, side-sheet body, bottom-sheet body).

package/src/index.ts

@@ -59,6 +59,7 @@ export {
   alert,
   useDialogContext,
   useDialogControl,
+  useDialogHeader,
 } from './dialog';
 export type {
   AlertButton,
@@ -67,6 +68,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,
@@ -144,7 +146,7 @@ export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 // Form components
 export * from './text-field';
 export * from './segmented-control';
-export { SearchInput } from './search-input';
+export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
 export { Field } from './field';

package/src/index.web.ts

@@ -64,6 +64,7 @@ export {
   alert,
   useDialogContext,
   useDialogControl,
+  useDialogHeader,
 } from './dialog/index.web';
 export type {
   AlertButton,
@@ -72,6 +73,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,
@@ -149,7 +151,7 @@ export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 // Form components
 export * from './text-field';
 export * from './segmented-control';
-export { SearchInput } from './search-input';
+export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
 export { Field } from './field';

package/src/input-group/types.ts

@@ -21,7 +21,7 @@ export interface InputGroupAddonProps {
 export interface InputGroupProps {
   /**
    * Group children. Place `InputGroup.Addon` elements before/after the input
-   * (a Bloom `TextFieldInput`, a `SearchInput`, or any control). The middle
+   * (a Bloom `TextFieldInput`, a `Search`, or any control). The middle
    * child stretches to fill.
    */
   children: React.ReactNode;

package/src/react-native-className.d.ts

@@ -0,0 +1,38 @@
+/**
+ * `className` support for React Native core components in Bloom.
+ *
+ * Bloom styles some primitives with NativeWind/`react-native-css` utility
+ * classes (`className="..."`). react-native-css applies them at runtime — on web
+ * as real CSS classes emitted by the consumer's Tailwind pipeline (`@source`-
+ * scanning Bloom's lib), on native as compiled styles. This ambient augmentation
+ * makes `className` type-valid on the RN primitives we set it on.
+ *
+ * Heritage-free (a plain interface-merge `declare module`, no `extends` / import
+ * of RN's own module graph) so it never drags a second `@types/react` copy into
+ * the RN 0.85 / React 19 tree — the same hazard the `mergeRefs` note calls out.
+ */
+// `export {}` makes this file a MODULE, so the `declare module` below MERGES
+// with react-native's real types (an augmentation) instead of replacing the
+// module and hiding its exports.
+export {};
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+}

package/src/{search-input → search}/index.tsx

@@ -8,7 +8,10 @@ import { TextField, TextFieldIcon, TextFieldInput, type TextFieldInputProps } fr
 import { MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon } from '../icons/MagnifyingGlass';
 import { TimesLarge_Stroke2_Corner0_Rounded as X } from '../icons/Times';
 
-type SearchInputProps = Omit<TextFieldInputProps, 'label'> & {
+/** Fully-rounded (pill) corner radius — clamps to half the field height. */
+const PILL_RADIUS = 999;
+
+type SearchProps = Omit<TextFieldInputProps, 'label'> & {
   label?: TextFieldInputProps['label'];
   /**
    * Called when the user presses the clear (X) button.
@@ -16,14 +19,14 @@ type SearchInputProps = Omit<TextFieldInputProps, 'label'> & {
   onClearText?: () => void;
 };
 
-export const SearchInput = forwardRef<TextInput, SearchInputProps>(
-  function SearchInput({ value, label = 'Search', onClearText, ...rest }, ref) {
+export const Search = forwardRef<TextInput, SearchProps>(
+  function Search({ value, label = 'Search', onClearText, ...rest }, ref) {
     const theme = useTheme();
     const showClear = value != null && value.length > 0;
 
     return (
       <View style={[a.w_full, a.relative]}>
-        <TextField>
+        <TextField radius={PILL_RADIUS}>
           <TextFieldIcon icon={MagnifyingGlassIcon} />
           <TextFieldInput
             inputRef={ref}
@@ -70,4 +73,4 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
     );
   },
 );
-SearchInput.displayName = 'SearchInput';
+Search.displayName = 'Search';

package/src/settings-list/SettingsList.tsx

@@ -243,7 +243,11 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   groupCard: {
-    marginHorizontal: 16,
+    // No horizontal self-inset: a `SettingsListGroup` fills its parent's content
+    // width, so the single horizontal inset comes from the ONE content padding
+    // the screen/Dialog already applies (the same `px-screen-margin` that pads
+    // the title/search). Keeping a self-margin here double-inset grouped rows on
+    // every screen that also applies that padding.
     borderRadius: 16,
     overflow: 'hidden',
   },