expo-interface 0.1.1 → 0.3.0

package/src/gauge/types.ts

@@ -0,0 +1,64 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Visual style of the gauge, named after the SwiftUI `GaugeStyle` it renders
+ * (the `gaugeStyle` modifier names in `@expo/ui`):
+ * - `automatic` — the default in-app style: a capacity bar with the label
+ *   centered above and the current value centered below.
+ * - `linear` — `accessoryLinear`: a bar with a point marker at the current
+ *   value (no label).
+ * - `linearCapacity` — `accessoryLinearCapacity`: a thin capacity bar with
+ *   the label above and the current value below, aligned to its leading edge.
+ * - `circular` — `accessoryCircular`: an open ring with a point marker, the
+ *   current value in the center and the bounds under the ring.
+ * - `circularCapacity` — `accessoryCircularCapacity`: a closed ring filled to
+ *   the current value with the current value in the center.
+ */
+export type GaugeVariant = 'automatic' | 'linear' | 'linearCapacity' | 'circular' | 'circularCapacity';
+
+/**
+ * Cross-platform gauge showing a value within a range.
+ *
+ * Bridges the SwiftUI `Gauge` (iOS 16+) on iOS; Android (Jetpack Compose) and
+ * web (DOM/SVG) redraw each SwiftUI style with the same geometry: the
+ * bounds and current value labels take the accent, the descriptive label
+ * keeps the label color, exactly as a tinted SwiftUI gauge does.
+ */
+export interface GaugeProps {
+  /** Current value, between `min` and `max`. */
+  value: number;
+  /**
+   * Lower bound of the range.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Upper bound of the range.
+   * @default 1
+   */
+  max?: number;
+  /**
+   * SwiftUI gauge style to render.
+   * @default 'automatic'
+   */
+  variant?: GaugeVariant;
+  /**
+   * Text describing the gauge's purpose. Shown above the bar in the linear
+   * capacity styles and in the center of the circular styles when there is
+   * no `currentValueLabel`; the `linear` style only exposes it to assistive
+   * technology.
+   */
+  label?: string;
+  /** Text showing the current value. */
+  currentValueLabel?: string;
+  /** Text showing the lower bound. */
+  minimumValueLabel?: string;
+  /** Text showing the upper bound. */
+  maximumValueLabel?: string;
+  /** Tint of the indicator and the value labels (overrides the theme accent). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the container (web only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/header-menu/index.tsx

@@ -0,0 +1,76 @@
+import type {ButtonTone} from '../button/types';
+import type {IconToken} from '../icons';
+import type {MenuItem} from '../menu/types';
+import {Platform} from 'react-native';
+import {useIsFocused} from 'expo-router';
+import {NativeHost} from '../host';
+import {Menu} from '../menu';
+
+export interface HeaderMenuProps {
+  /** Trigger text (kept for accessibility when `hideLabel` is set). */
+  label: string;
+  /** Trigger icon. */
+  icon?: IconToken;
+  /** Entries shown when the menu opens. */
+  items: MenuItem[];
+  /** Show only the icon; `label` is kept for accessibility. */
+  hideLabel?: boolean;
+  /**
+   * Color of the trigger: the accent, or the label color like the header's
+   * own buttons.
+   * @default 'accent'
+   */
+  tone?: ButtonTone;
+  /** Disables the trigger. */
+  disabled?: boolean;
+  /** Identifier used to locate the trigger in end-to-end tests. */
+  testID?: string;
+}
+
+/**
+ * A `Menu` for a stack header's trailing slot (`TabStack`'s `headerRight`,
+ * a `Stack.Screen`'s `headerRight` option): a small text trigger in its own
+ * accent-seeded host, so it can live in the React Native header.
+ *
+ * On Android the native stack re-parents the header's views on a tab switch,
+ * and a Compose view refuses a second parent ("The specified child already
+ * has a parent"). The host is therefore keyed on the screen's focus, so the
+ * Compose view is created afresh each time the header is rebuilt rather
+ * than re-added. Needs a navigator above it on Android (it reads the
+ * screen's focus); on web it is the plain `Menu` trigger, for a custom
+ * header such as `ConstrainedStackHeader`.
+ */
+export function HeaderMenu(props: HeaderMenuProps) {
+  if (Platform.OS === 'web') return <HeaderMenuTrigger {...props}/>;
+  if (Platform.OS === 'android') return <AndroidHeaderMenu {...props}/>;
+  return (
+    <NativeHost fit>
+      <HeaderMenuTrigger {...props}/>
+    </NativeHost>
+  );
+}
+
+function HeaderMenuTrigger({label, icon, items, hideLabel, tone = 'accent', disabled, testID}: HeaderMenuProps) {
+  return (
+    <Menu
+      label={label}
+      icon={icon}
+      items={items}
+      hideLabel={hideLabel}
+      tone={tone}
+      disabled={disabled}
+      variant="text"
+      size="small"
+      testID={testID}
+    />
+  );
+}
+
+function AndroidHeaderMenu(props: HeaderMenuProps) {
+  // Keyed on the screen's focus: a fresh host, and Compose view, per rebuild.
+  return (
+    <NativeHost key={useIsFocused() ? 'focused' : 'blurred'} fit>
+      <HeaderMenuTrigger {...props}/>
+    </NativeHost>
+  );
+}

package/src/host/index.tsx

@@ -0,0 +1,32 @@
+import type {PropsWithChildren} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {Host} from '@expo/ui';
+import {useAccentSeed} from '../accent';
+import {hostAccentProps} from '../screen/host-accent';
+
+export interface NativeHostProps extends PropsWithChildren {
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Size the host to its content on both axes (a group of buttons in a row);
+   * by default only vertically, the width filling its container.
+   * @default false
+   */
+  fit?: boolean;
+}
+
+/**
+ * An accent-seeded `@expo/ui` `Host` for controls that sit inside a React
+ * Native layout: a toolbar next to a canvas, a search row, a floating
+ * button. `Screen native` mounts the same host around a whole screen; this
+ * one is for the places a screen cannot be native, sized to its content and
+ * seeded like the screen would be (`hostAccentProps`). On web it is a plain
+ * view carrying the `@expo/ui` palette.
+ */
+export function NativeHost({children, style, fit = false}: NativeHostProps) {
+  const seed = useAccentSeed();
+  return (
+    <Host matchContents={fit ? true : {vertical: true}} style={style} {...hostAccentProps(seed)}>
+      {children}
+    </Host>
+  );
+}

package/src/index.ts

@@ -4,41 +4,63 @@ export * from './theme';
 export * from './accent';
 export * from './icons';
 export {fillWidth} from './fill';
+export {
+  SCHEME_STORAGE_KEY,
+  getColorSchemeMode,
+  getThemeBootScript,
+  setColorScheme,
+  useColorScheme,
+} from './scheme';
+export type {ColorScheme, ColorSchemeMode} from './scheme';
 
 // Layout
 export {Screen} from './screen';
+export type {ScreenProps} from './screen';
 export {ScreenHeader} from './screen/header';
 export {hostAccentProps} from './screen/host-accent';
+export {NativeHost} from './host';
+export type {NativeHostProps} from './host';
 export {Sheet} from './sheet';
 export {ConstrainedStackHeader} from './stack-header';
 export {TabStack} from './tab-stack';
+export type {TabStackProps} from './tab-stack';
 export {Tabs} from './tabs';
 export type {TabBarProps, TabRoute, WebLogo} from './tabs/types';
+export {KeyboardBar} from './keyboard';
+export type {KeyboardBarProps, KeyboardLibrary, KeyboardState} from './keyboard';
 
 // Components
 export {Alert} from './alert';
 export type {AlertAction, AlertActionRole, AlertProps} from './alert/types';
 export {Button} from './button';
-export type {ButtonProps, ButtonRole, ButtonShape, ButtonSize, ButtonVariant} from './button/types';
+export type {ButtonProps, ButtonRole, ButtonShape, ButtonSize, ButtonTone, ButtonVariant} from './button/types';
 export {Checkbox} from './checkbox';
 export type {CheckboxProps} from './checkbox/types';
 export {Collapsible} from './collapsible';
 export type {CollapsibleProps} from './collapsible/types';
+export {ColorPicker} from './color-picker';
+export type {ColorPickerProps} from './color-picker/types';
 export {ContextMenu} from './context-menu';
 export {DateTimePicker} from './date-time';
 export type {DateTimeMode, DateTimePickerProps} from './date-time/types';
 export {Divider} from './divider';
 export type {DividerProps} from './divider/types';
-export {FieldGroup, type FieldGroupProps} from './field-group';
+export {Fab} from './fab';
+export type {FabProps, FabSize} from './fab/types';
+export {FieldGroup} from './field-group';
+export type {FieldGroupProps, FieldGroupSectionProps, FieldSectionFooterColor} from './field-group/types';
+export {Gauge} from './gauge';
+export type {GaugeProps, GaugeVariant} from './gauge/types';
+export {HeaderMenu} from './header-menu';
+export type {HeaderMenuProps} from './header-menu';
 export {ListItem} from './list-item';
-export type {ListItemProps} from './list-item/types';
+export type {ListItemAction, ListItemProps} from './list-item/types';
 export {Menu} from './menu';
-export type {ContextMenuProps, MenuItem, MenuProps} from './menu/types';
+export type {ContextMenuProps, MenuItem, MenuPoint, MenuProps, MenuTrigger} from './menu/types';
 export {Picker} from './picker';
 export type {PickerItemProps, PickerOption, PickerProps, PickerValue} from './picker/types';
 export {Progress} from './progress';
 export type {ProgressProps, ProgressVariant} from './progress/types';
-export {QRCode, type QRCodeProps} from './qr';
 export {SegmentedControl} from './segmented';
 export type {SegmentedControlProps} from './segmented/types';
 export {Slider} from './slider';
@@ -50,7 +72,14 @@ export type {SwitchProps} from './switch/types';
 export {Tooltip} from './tooltip';
 export type {TooltipProps} from './tooltip/types';
 export {TextField} from './text-field';
-export type {TextFieldCapitalize, TextFieldKeyboard, TextFieldProps} from './text-field/types';
+export type {
+  TextFieldCapitalize,
+  TextFieldKeyboard,
+  TextFieldProps,
+  TextFieldReturnKey,
+  TextFieldSubmitBehavior,
+  TextFieldVariant,
+} from './text-field/types';
 export {ExternalLink} from './router/external-link';
 
 // Typography

package/src/keyboard/index.tsx

@@ -0,0 +1,81 @@
+import type {PropsWithChildren} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {KeyboardLibrary} from './types';
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {StyleSheet, useWindowDimensions, View} from 'react-native';
+import {useColor} from '../theme';
+import {loadKeyboardController} from './library';
+
+/** The keyboard library, when the app has it: loaded once, natively only. */
+const library = loadKeyboardController();
+
+export interface KeyboardBarProps extends PropsWithChildren {
+  /**
+   * The keyboard's height from the screen's bottom edge once it is up, `0`
+   * once it is away, for the screen's content to pad or scroll by (it is
+   * not resized: the bar rides over it).
+   */
+  onKeyboard?: (height: number) => void;
+  /** Style of the bar (its background is the screen's, opaque). */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A bottom bar that sticks to the keyboard: it rides up on it by a
+ * transform animated with the keyboard on the UI thread, so the layout never
+ * changes (no resize, no lines shaking with the animation), and reports the
+ * keyboard's height instead so the content can keep its caret above it.
+ * Opaque in `background`, since it rides over the content's bottom.
+ *
+ * Needs `react-native-keyboard-controller` (an optional peer, whose
+ * `KeyboardProvider` the kit's `AccentProvider` mounts natively); without it,
+ * and on web, where the browser keeps the page above the keyboard itself,
+ * the bar is a plain view.
+ */
+export function KeyboardBar({children, onKeyboard, style}: KeyboardBarProps) {
+  const background = useColor('background');
+  if (!library) {
+    return <View style={[{backgroundColor: background}, style]}>{children}</View>;
+  }
+  return (
+    <Sticky library={library} background={background} onKeyboard={onKeyboard} style={style}>
+      {children}
+    </Sticky>
+  );
+}
+
+interface StickyProps extends KeyboardBarProps {
+  library: KeyboardLibrary;
+  background: string;
+}
+
+function Sticky({library: {KeyboardStickyView, useKeyboardState}, background, children, onKeyboard, style}: StickyProps) {
+  const height = useKeyboardState(s => (s.isVisible ? s.height : 0));
+  useEffect(() => {
+    onKeyboard?.(height);
+  }, [height, onKeyboard]);
+  // The keyboard's height is from the window's bottom edge, the bar sits
+  // above the navigation inset: the sticky translation is corrected by what
+  // lies under the bar, measured while the keyboard is away (a measure while
+  // it is up would see the bar moved).
+  const window = useWindowDimensions().height;
+  const view = useRef<View>(null);
+  const [below, setBelow] = useState(0);
+  const onLayout = useCallback(() => {
+    if (height > 0) return;
+    view.current?.measureInWindow((_x, y, _w, h) => setBelow(Math.max(0, window - (y + h))));
+  }, [height, window]);
+  return (
+    <KeyboardStickyView offset={{opened: below}}>
+      <View ref={view} onLayout={onLayout} style={[styles.bar, {backgroundColor: background}, style]}>
+        {children}
+      </View>
+    </KeyboardStickyView>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {width: '100%'},
+});
+
+export type {KeyboardLibrary, KeyboardState} from './types';

package/src/keyboard/library.native.ts

@@ -0,0 +1,17 @@
+import type {KeyboardLibrary} from './types';
+
+/**
+ * iOS and Android: `react-native-keyboard-controller` when the app has it
+ * installed (an optional peer), `null` otherwise. The `require` sits in a
+ * `try` so Metro treats the dependency as optional and a bundle without the
+ * library still builds; `KeyboardBar` and `AccentProvider` then fall back to
+ * plain views.
+ */
+export function loadKeyboardController(): KeyboardLibrary | null {
+  try {
+    // eslint-disable-next-line typescript/no-require-imports -- optional peer, resolved only when installed.
+    return require('react-native-keyboard-controller') as KeyboardLibrary;
+  } catch {
+    return null;
+  }
+}

package/src/keyboard/library.ts

@@ -0,0 +1,12 @@
+import type {KeyboardLibrary} from './types';
+
+/**
+ * Web (and any platform without a native keyboard): nothing is loaded. The
+ * browser keeps the page above the keyboard itself, and
+ * `react-native-keyboard-controller` must never reach the web bundle: it is
+ * built on Reanimated, whose server render (the static export) calls
+ * `requestAnimationFrame` and dies. `library.native.ts` loads it natively.
+ */
+export function loadKeyboardController(): KeyboardLibrary | null {
+  return null;
+}

package/src/keyboard/types.ts

@@ -0,0 +1,20 @@
+import type {ComponentType, PropsWithChildren} from 'react';
+
+/** What `react-native-keyboard-controller` reports about the keyboard. */
+export interface KeyboardState {
+  isVisible: boolean;
+  /** The keyboard's height from the window's bottom edge. */
+  height: number;
+}
+
+/**
+ * The pieces of `react-native-keyboard-controller` the kit uses. The library
+ * is an optional peer: `KeyboardBar` sticks to the keyboard through it when
+ * it is installed and is a plain view otherwise (and always on web, where
+ * the library's Reanimated cannot render on the server).
+ */
+export interface KeyboardLibrary {
+  KeyboardProvider: ComponentType<PropsWithChildren>;
+  KeyboardStickyView: ComponentType<PropsWithChildren<{offset?: {closed?: number; opened?: number}}>>;
+  useKeyboardState: <T>(selector: (state: KeyboardState) => T) => T;
+}

package/src/list-item/index.android.tsx

@@ -1,22 +1,39 @@
 import type {ReactNode} from 'react';
 import type {ListItemProps} from './types';
-import {ListItem as ComposeListItem, Text} from '@expo/ui/jetpack-compose';
-import {clickable, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {ListItem as ComposeListItem, Row, Text, TextButton} from '@expo/ui/jetpack-compose';
+import {clickable, testID as testIDModifier, wrapContentHeight, wrapContentWidth} from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
 
 /**
  * Android uses the Material 3 Compose `ListItem` directly so the container
  * can be made transparent — the M3 default paints the Host palette's
  * `surface`, which reads as a grey panel over the app's screen background
- * (web/iOS rows are transparent).
+ * (web/iOS rows are transparent). An `action` is a `TextButton` in the
+ * trailing slot, after any `trailing` content.
  */
-export function ListItem({children, leading, trailing, supporting, onPress, testID}: ListItemProps) {
+export function ListItem({children, leading, trailing, action, supporting, onPress, testID}: ListItemProps) {
   const label = useColor('label');
   const subtle = useColor('secondaryLabel');
+  const tint = useColor('tint');
+  const destructive = useColor('destructive');
+  const muted = useColor('tertiaryLabel');
   const modifiers = [
     ...(onPress ? [clickable(onPress)] : []),
     ...(testID ? [testIDModifier(testID)] : []),
   ];
+  const actionColor = action?.role === 'destructive' ? destructive : tint;
+  const trailingContent = action ? (
+    <Row verticalAlignment="center" horizontalArrangement={{spacedBy: 8}}>
+      {trailing}
+      <TextButton
+        onClick={action.disabled ? undefined : action.onPress}
+        enabled={!action.disabled}
+        colors={{contentColor: actionColor}}
+        modifiers={[wrapContentWidth('end'), wrapContentHeight('centerVertically')]}>
+        <Text color={action.disabled ? muted : actionColor}>{action.label}</Text>
+      </TextButton>
+    </Row>
+  ) : trailing;
   return (
     <ComposeListItem colors={{containerColor: '#00000000'}} modifiers={modifiers}>
       <ComposeListItem.HeadlineContent>
@@ -34,8 +51,8 @@ export function ListItem({children, leading, trailing, supporting, onPress, test
           )}
         </ComposeListItem.SupportingContent>
       ) : null}
-      {trailing != null ? (
-        <ComposeListItem.TrailingContent>{trailing}</ComposeListItem.TrailingContent>
+      {trailingContent != null ? (
+        <ComposeListItem.TrailingContent>{trailingContent}</ComposeListItem.TrailingContent>
       ) : null}
     </ComposeListItem>
   );

package/src/list-item/index.tsx

@@ -1,16 +1,32 @@
 import type {ListItemProps} from './types';
 import {ListItem as UIListItem} from '@expo/ui';
+import {Button} from '../button';
 
 /**
- * Web/iOS render the universal `@expo/ui` `ListItem` (RN row on web, SwiftUI
- * list row on iOS) through explicit slot props.
+ * iOS renders the universal `@expo/ui` `ListItem` (a SwiftUI list row)
+ * through explicit slot props. An `action` is the kit's text `Button` at the
+ * end of the trailing slot, after any `trailing` content; the row itself
+ * only responds when it also has an `onPress`.
  */
-export function ListItem({children, leading, trailing, supporting, onPress, testID}: ListItemProps) {
+export function ListItem({children, leading, trailing, action, supporting, onPress, testID}: ListItemProps) {
+  const trailingContent = action ? (
+    <>
+      {trailing}
+      <Button
+        label={action.label}
+        variant="text"
+        size="small"
+        role={action.role === 'destructive' ? 'destructive' : 'default'}
+        disabled={action.disabled}
+        onPress={action.onPress}
+      />
+    </>
+  ) : trailing;
   return (
     <UIListItem
       onPress={onPress}
       leading={leading}
-      trailing={trailing}
+      trailing={trailingContent}
       supportingText={supporting}
       testID={testID}>
       {children}

package/src/list-item/index.web.tsx

@@ -0,0 +1,60 @@
+import './list-item.css';
+import type {ListItemProps} from './types';
+import {ListItem as UIListItem} from '@expo/ui';
+import {Button} from '../button';
+
+/**
+ * Web renders the universal `@expo/ui` `ListItem` (a React Native row)
+ * through explicit slot props. With an `action` the row is drawn here
+ * instead, so the action's `<button>` sits beside the row's own (a `<button>`
+ * when the row has an `onPress`, a `<div>` otherwise) rather than inside it:
+ * nested buttons are not valid HTML, and a click on the action would also
+ * press the row.
+ */
+export function ListItem({children, leading, trailing, action, supporting, onPress, testID}: ListItemProps) {
+  if (!action) {
+    return (
+      <UIListItem
+        onPress={onPress}
+        leading={leading}
+        trailing={trailing}
+        supportingText={supporting}
+        testID={testID}>
+        {children}
+      </UIListItem>
+    );
+  }
+  const content = (
+    <>
+      {leading != null ? <span className="ui-list-item__slot">{leading}</span> : null}
+      <span className="ui-list-item__main">
+        <span className="ui-list-item__headline">{children}</span>
+        {supporting != null ? (
+          typeof supporting === 'string' || typeof supporting === 'number'
+            ? <span className="ui-list-item__supporting">{supporting}</span>
+            : supporting
+        ) : null}
+      </span>
+      {trailing != null ? <span className="ui-list-item__slot">{trailing}</span> : null}
+    </>
+  );
+  return (
+    <div className="ui-list-item" data-testid={testID}>
+      {onPress ? (
+        <button type="button" className="ui-list-item__row ui-list-item__row--pressable" onClick={onPress}>{content}</button>
+      ) : (
+        <div className="ui-list-item__row">{content}</div>
+      )}
+      <Button
+        label={action.label}
+        variant="text"
+        size="small"
+        role={action.role === 'destructive' ? 'destructive' : 'default'}
+        disabled={action.disabled}
+        onPress={action.onPress}
+      />
+    </div>
+  );
+}
+
+export type {ListItemProps} from './types';

package/src/list-item/list-item.css

@@ -0,0 +1,65 @@
+/*
+ * The web row with a trailing action: the universal row's geometry (12px by
+ * 16px padding, a 12px gap between the slots), the row's own control beside
+ * the action's `<button>` rather than around it.
+ */
+.ui-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 16px;
+}
+
+.ui-list-item__row {
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-label);
+  font: inherit;
+  text-align: start;
+}
+
+.ui-list-item__row--pressable {
+  cursor: pointer;
+}
+
+.ui-list-item__main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-list-item__headline {
+  font-family: var(--font-display);
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--color-label);
+}
+
+.ui-list-item__supporting {
+  font-family: var(--font-display);
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--color-secondary-label);
+}
+
+.ui-list-item__slot {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+}

package/src/list-item/types.ts

@@ -1,5 +1,24 @@
 import type {ReactNode} from 'react';
 
+/**
+ * A text action at the trailing edge of a `ListItem` (sign in, sign out,
+ * clear cache): a Compose `TextButton`, a borderless SwiftUI `Button`, a DOM
+ * button. The row itself stays inert unless it also has an `onPress`.
+ */
+export interface ListItemAction {
+  /** The action's text. */
+  label: string;
+  /** Called when the action is pressed. */
+  onPress: () => void;
+  /** Greys the action out and ignores presses. */
+  disabled?: boolean;
+  /**
+   * `destructive` renders the action in the danger color.
+   * @default 'default'
+   */
+  role?: 'default' | 'destructive';
+}
+
 /**
  * Props for the app `ListItem`: a tappable row with leading/trailing slots
  * and optional supporting text. Bridges the universal `@expo/ui` `ListItem`
@@ -12,6 +31,8 @@ export interface ListItemProps {
   leading?: ReactNode;
   /** Trailing (end) slot — chevron, value, control, etc. */
   trailing?: ReactNode;
+  /** A text action rendered natively at the trailing edge, after `trailing`. */
+  action?: ListItemAction;
   /** Secondary content below the headline; strings get subtle styling. */
   supporting?: string | ReactNode;
   /** Tap handler, active over the entire row. */