expo-interface 0.2.0 → 0.3.0

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. */

package/src/menu/index.android.tsx

@@ -1,18 +1,21 @@
 import type {MenuItem, MenuProps} from './types';
 
 import {Fragment, useState} from 'react';
-import {DropdownMenu, DropdownMenuItem, HorizontalDivider, Icon, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {Box, DropdownMenu, DropdownMenuItem, HorizontalDivider, Icon, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {background, clip, Shapes, size as sizeModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {Button} from '../button';
 import {useColor} from '../theme';
 
 const ICON_SIZE = 20;
+const SWATCH_SIZE = 16;
 
 /**
  * Android anchors a Material 3 `DropdownMenu` to the kit's `Button`. Entries
- * are `DropdownMenuItem`s with an optional drawable leading icon; destructive
- * items use the theme danger color.
+ * are `DropdownMenuItem`s with an optional drawable leading icon (or a color
+ * dot), a trailing check when active; destructive items use the theme
+ * danger color.
  */
-export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+export function Menu({label, icon, items, testID, trigger: _trigger, ...button}: MenuProps) {
   const [expanded, setExpanded] = useState(false);
   return (
     <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
@@ -30,7 +33,7 @@ export function Menu({label, icon, items, testID, ...button}: MenuProps) {
   );
 }
 
-/** Compose `DropdownMenu.Items` shared by `Menu` and `ContextMenu`. */
+/** Compose `DropdownMenu.Items` shared by `Menu`, `ContextMenu` and `Fab`. */
 export function MenuItems({items, onClose}: {items: MenuItem[]; onClose: () => void}) {
   const colors = useMaterialColors();
   const destructive = useColor('destructive');
@@ -39,24 +42,34 @@ export function MenuItems({items, onClose}: {items: MenuItem[]; onClose: () => v
     <DropdownMenu.Items>
       {items.map((item, index) => {
         const color = item.role === 'destructive' ? destructive : colors.onSurface;
+        const contentColor = item.disabled ? colors.onSurfaceVariant : color;
         return (
           <Fragment key={index}>
             {item.separator && index > 0 ? <HorizontalDivider color={separator}/> : null}
             <DropdownMenuItem
               enabled={!item.disabled}
-              elementColors={{textColor: color, leadingIconColor: color}}
+              elementColors={{textColor: color, leadingIconColor: color, trailingIconColor: color}}
               onClick={item.disabled ? undefined : () => {
                 onClose();
                 item.onPress?.();
               }}>
-              {item.icon?.drawable ? (
+              {item.swatch ? (
                 <DropdownMenuItem.LeadingIcon>
-                  <Icon source={item.icon.drawable} size={ICON_SIZE} tint={item.disabled ? colors.onSurfaceVariant : color}/>
+                  <Box modifiers={[sizeModifier(SWATCH_SIZE, SWATCH_SIZE), clip(Shapes.Circle), background(item.swatch)]}/>
+                </DropdownMenuItem.LeadingIcon>
+              ) : item.icon?.drawable ? (
+                <DropdownMenuItem.LeadingIcon>
+                  <Icon source={item.icon.drawable} size={ICON_SIZE} tint={contentColor}/>
                 </DropdownMenuItem.LeadingIcon>
               ) : null}
               <DropdownMenuItem.Text>
-                <Text color={item.disabled ? colors.onSurfaceVariant : color}>{item.label}</Text>
+                <Text color={contentColor}>{item.label}</Text>
               </DropdownMenuItem.Text>
+              {item.active ? (
+                <DropdownMenuItem.TrailingIcon>
+                  <Text color={contentColor}>✓</Text>
+                </DropdownMenuItem.TrailingIcon>
+              ) : null}
             </DropdownMenuItem>
           </Fragment>
         );

package/src/menu/index.ios.tsx

@@ -2,7 +2,7 @@ import type {MenuItem, MenuProps} from './types';
 import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
 
 import {Fragment} from 'react';
-import {Button, Divider, Menu as SwiftUIMenu} from '@expo/ui/swift-ui';
+import {Button, Divider, Menu as SwiftUIMenu, Toggle} from '@expo/ui/swift-ui';
 import {buttonBorderShape, buttonStyle, controlSize, disabled as disabledMod, labelStyle, tint} from '@expo/ui/swift-ui/modifiers';
 import {iosSymbol, swiftBorderShape, swiftControlSize} from '../button/shared';
 import {useColor} from '../theme';
@@ -16,7 +16,8 @@ const VARIANT_STYLE = {
 /**
  * iOS renders SwiftUI's `Menu`, styled with the same `buttonStyle` / `tint`
  * mapping as the kit's `Button` so the trigger matches. Entries are SwiftUI
- * `Button`s (with SF Symbol and `destructive` role) and `Divider`s.
+ * `Button`s (with SF Symbol and `destructive` role), checked `Toggle`s for
+ * active entries, and `Divider`s.
  */
 export function Menu({
   label,
@@ -26,15 +27,18 @@ export function Menu({
   size = 'medium',
   shape,
   color,
+  tone = 'accent',
   hideLabel,
   disabled,
   testID,
 }: MenuProps) {
   const themeTint = useColor('tint');
+  const themeLabel = useColor('label');
+  const accent = color ?? (variant === 'text' && tone === 'label' ? themeLabel : themeTint);
   const modifiers: ViewModifier[] = [
     buttonStyle(VARIANT_STYLE[variant]),
     controlSize(swiftControlSize(size)),
-    tint(color ?? themeTint),
+    tint(accent),
   ];
   if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
   if (hideLabel && icon) modifiers.push(labelStyle('iconOnly'));
@@ -51,20 +55,31 @@ export function Menu({
   );
 }
 
-/** SwiftUI menu entries shared by `Menu` and `ContextMenu`. */
+/** SwiftUI menu entries shared by `Menu`, `ContextMenu` and `Fab`. */
 export function MenuItems({items}: {items: MenuItem[]}) {
   return (
     <>
       {items.map((item, index) => (
         <Fragment key={index}>
           {item.separator && index > 0 ? <Divider/> : null}
-          <Button
-            label={item.label}
-            systemImage={item.icon ? iosSymbol(item.icon) : undefined}
-            role={item.role === 'destructive' ? 'destructive' : 'default'}
-            onPress={item.onPress}
-            modifiers={item.disabled ? [disabledMod(true)] : undefined}
-          />
+          {item.active ? (
+            // A checked toggle is how a SwiftUI menu shows the current state.
+            <Toggle
+              isOn
+              label={item.label}
+              systemImage={item.icon ? iosSymbol(item.icon) : undefined}
+              onIsOnChange={() => item.onPress?.()}
+              modifiers={item.disabled ? [disabledMod(true)] : undefined}
+            />
+          ) : (
+            <Button
+              label={item.label}
+              systemImage={item.icon ? iosSymbol(item.icon) : undefined}
+              role={item.role === 'destructive' ? 'destructive' : 'default'}
+              onPress={item.onPress}
+              modifiers={item.disabled ? [disabledMod(true)] : undefined}
+            />
+          )}
         </Fragment>
       ))}
     </>

package/src/menu/index.tsx

@@ -2,28 +2,44 @@ import './menu.css';
 import type {CSSProperties} from 'react';
 import type {MenuProps} from './types';
 import {useId, useRef} from 'react';
+import {SymbolView} from 'expo-symbols';
 import {Button} from '../button';
+import {SIZE_ICON} from '../button/shared';
 import {MenuList, menuIdent} from './list';
 
 /**
- * On web the trigger is the kit's `<button>` with a `popovertarget` pointing
- * at the entries' native `popover`, so opening, closing, light dismiss and
+ * On web the trigger is the kit's `<button>` (or, with `trigger="link"`, a
+ * text link like the tab bar's tabs) with a `popovertarget` pointing at the
+ * entries' native `popover`, so opening, closing, light dismiss and
  * `aria-expanded` are all handled by the browser. The wrapper carries the
  * `anchor-name` that CSS anchor positioning places the popup against.
  */
-export function Menu({label, icon, items, testID, ...button}: MenuProps) {
+export function Menu({label, icon, items, trigger = 'button', testID, ...button}: MenuProps) {
   const ident = menuIdent(useId());
   const anchor = `--${ident}`;
   const wrapper = useRef<HTMLSpanElement>(null);
   return (
     <span ref={wrapper} className="ui-menu" style={{anchorName: anchor} as CSSProperties}>
-      <Button
-        {...button}
-        label={label}
-        prefixIcon={icon}
-        popoverTarget={ident}
-        testID={testID}
-      />
+      {trigger === 'link' ? (
+        <button
+          type="button"
+          className="ui-menu__link"
+          disabled={button.disabled}
+          popoverTarget={ident}
+          data-testid={testID}
+          aria-label={button.hideLabel ? label : undefined}>
+          {icon ? <SymbolView name={icon.symbol} size={SIZE_ICON[button.size ?? 'medium']} tintColor="currentColor"/> : null}
+          {button.hideLabel ? null : <span>{label}</span>}
+        </button>
+      ) : (
+        <Button
+          {...button}
+          label={label}
+          prefixIcon={icon}
+          popoverTarget={ident}
+          testID={testID}
+        />
+      )}
       <MenuList id={ident} items={items} anchor={anchor} anchorRef={wrapper}/>
     </span>
   );

package/src/menu/list.tsx

@@ -27,17 +27,19 @@ interface MenuListProps {
   position?: {x: number; y: number} | null;
   /** Exposes the popover element so callers can `showPopover()` programmatically. */
   popoverRef?: React.RefObject<HTMLDivElement | null>;
+  /** Called when the popover closes (light dismiss, Escape, or a pick). */
+  onClose?: () => void;
 }
 
 /**
- * Web `role="menu"` popup shared by `Menu` and `ContextMenu`, rendered as a
- * native `popover="auto"` element. The browser handles the top layer, light
- * dismiss (outside click / Escape) and the trigger's `aria-expanded`; every
- * item carries `popovertargetaction="hide"` so picking one closes the menu
- * declaratively. Placement is CSS anchor positioning (see `menu.css`), with a
- * measured fallback for engines without it.
+ * Web `role="menu"` popup shared by `Menu`, `ContextMenu` and `Fab`, rendered
+ * as a native `popover="auto"` element. The browser handles the top layer,
+ * light dismiss (outside click / Escape) and the trigger's `aria-expanded`;
+ * every item carries `popovertargetaction="hide"` so picking one closes the
+ * menu declaratively. Placement is CSS anchor positioning (see `menu.css`),
+ * with a measured fallback for engines without it.
  */
-export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: MenuListProps) {
+export function MenuList({id, items, anchor, anchorRef, position, popoverRef, onClose}: MenuListProps) {
   const localRef = useRef<HTMLDivElement>(null);
   const ref = popoverRef ?? localRef;
   const anchored = !!anchor && !position;
@@ -51,7 +53,10 @@ export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: M
 
   const onToggle = (event: ToggleEvent<HTMLDivElement>) => {
     const popover = event.currentTarget;
-    if (event.newState !== 'open') return;
+    if (event.newState !== 'open') {
+      onClose?.();
+      return;
+    }
     // Fallback placement: below the trigger, right-aligned, kept on screen.
     if (anchored && !ANCHOR_SUPPORTED && anchorRef?.current) {
       const rect = anchorRef.current.getBoundingClientRect();
@@ -83,13 +88,23 @@ export function MenuList({id, items, anchor, anchorRef, position, popoverRef}: M
           <button
             type="button"
             role="menuitem"
-            className={['ui-menu__item', item.role === 'destructive' && 'ui-menu__item--destructive'].filter(Boolean).join(' ')}
+            aria-current={item.active ? 'true' : undefined}
+            className={[
+              'ui-menu__item',
+              item.role === 'destructive' && 'ui-menu__item--destructive',
+              item.active && 'ui-menu__item--active',
+            ].filter(Boolean).join(' ')}
             disabled={item.disabled}
             popoverTarget={id}
             popoverTargetAction="hide"
             onClick={item.onPress}>
-            {item.icon ? <SymbolView name={item.icon.symbol} size={ICON_SIZE} tintColor="currentColor"/> : null}
+            {item.swatch ? (
+              <span className="ui-menu__swatch" style={{background: item.swatch}} aria-hidden="true"/>
+            ) : item.icon ? (
+              <SymbolView name={item.icon.symbol} size={ICON_SIZE} tintColor="currentColor"/>
+            ) : null}
             <span>{item.label}</span>
+            {item.active ? <span className="ui-menu__check" aria-hidden="true">✓</span> : null}
           </button>
         </div>
       ))}

package/src/menu/menu.css

@@ -9,6 +9,38 @@
   display: inline-flex;
 }
 
+/* The `link` trigger: a text link like the tab bar's tabs, in the tint. */
+.ui-menu__link {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-tint);
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ui-menu__link:hover:not(:disabled),
+.ui-menu__link:focus-visible {
+  opacity: 0.7;
+  outline: none;
+}
+
+.ui-menu__link:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .ui-menu__list {
   box-sizing: border-box;
   min-width: 200px;
@@ -72,6 +104,26 @@
   color: var(--color-destructive);
 }
 
+/* The current state: highlighted like a hover, with a tick at the trailing edge. */
+.ui-menu__item--active {
+  background: var(--color-background-selected);
+}
+
+.ui-menu__check {
+  margin-inline-start: auto;
+  padding-inline-start: 12px;
+  font-weight: 600;
+}
+
+/* A color dot in place of the icon, for a palette. */
+.ui-menu__swatch {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid var(--color-separator);
+}
+
 .ui-menu__separator {
   height: 1px;
   margin: 6px 4px;