@expo/ui 56.0.18 → 56.0.20

package/src/universal/ListItem/ListItem.android.tsx

@@ -19,14 +19,22 @@ function wrapStrings(node: ReactNode): ReactNode {
  * Delegates to Material 3 `ListItem` and applies `clickable` for tap handling.
  */
 export function ListItem(props: ListItemProps) {
-  const { children, onPress, leading: leadingProp, trailing: trailingProp, supportingText } = props;
+  const {
+    children,
+    onPress,
+    leading: leadingProp,
+    trailing: trailingProp,
+    supportingText,
+    modifiers,
+  } = props;
   const slots = extractListItemSlots(children);
   const leading = slots.leading ?? leadingProp;
   const trailing = slots.trailing ?? trailingProp;
   const supporting = slots.supporting ?? supportingText;
+  const itemModifiers = [...(onPress ? [clickable(onPress)] : []), ...(modifiers ?? [])];
 
   return (
-    <ComposeListItem modifiers={onPress ? [clickable(onPress)] : undefined}>
+    <ComposeListItem modifiers={itemModifiers.length ? itemModifiers : undefined}>
       <ComposeListItem.HeadlineContent>
         <>{wrapStrings(slots.headline)}</>
       </ComposeListItem.HeadlineContent>

package/src/universal/ListItem/ListItem.ios.tsx

@@ -1,7 +1,8 @@
-import { Button, HStack, Spacer, Text, VStack } from '@expo/ui/swift-ui';
+import { Button, HStack, RNHostView, Spacer, Text, VStack } from '@expo/ui/swift-ui';
 import { buttonStyle, contentShape, foregroundStyle, shapes } from '@expo/ui/swift-ui/modifiers';
-import { Children, type ReactNode } from 'react';
+import { Children, isValidElement, type ReactNode } from 'react';
 
+import { omitUserOverridden } from '../modifierUtils';
 import { extractListItemSlots } from './ListItemSlots';
 import type { ListItemProps } from './types';
 
@@ -22,6 +23,16 @@ function renderSupporting(node: ReactNode): ReactNode {
   return node;
 }
 
+// A raw RN view (e.g. `<View style={{ width: 20, height: 20 }} />`) has no intrinsic size, so when
+// embedded directly in the SwiftUI row it stretches to fill the available space instead of honoring
+// its layout size. Wrap each accessory in `RNHostView matchContents` so SwiftUI pins it to the RN
+// content's measured size. SwiftUI-native content (e.g. `Text`/`Image`) renders at its natural size.
+function renderAccessory(node: ReactNode): ReactNode {
+  const wrapped = wrapStrings(node);
+  if (!isValidElement(wrapped)) return wrapped;
+  return <RNHostView matchContents>{wrapped}</RNHostView>;
+}
+
 /**
  * iOS implementation of `ListItem`.
  * Wraps a plain SwiftUI `Button` and applies `contentShape(.rectangle())` so the full row rectangle registers taps, including the gap between slots.
@@ -34,22 +45,28 @@ export function ListItem(props: ListItemProps) {
     trailing: trailingProp,
     supportingText,
     testID,
+    modifiers,
   } = props;
   const slots = extractListItemSlots(children);
   const leading = slots.leading ?? leadingProp;
   const trailing = slots.trailing ?? trailingProp;
   const supporting = slots.supporting ?? supportingText;
 
+  const buttonModifiers = [
+    ...omitUserOverridden([buttonStyle('plain')], modifiers),
+    ...(modifiers ?? []),
+  ];
+
   return (
-    <Button onPress={onPress} modifiers={[buttonStyle('plain')]} testID={testID}>
-      <HStack alignment="center" spacing={12} modifiers={[contentShape(shapes.rectangle())]}>
-        {wrapStrings(leading)}
+    <Button onPress={onPress} modifiers={buttonModifiers} testID={testID}>
+      <HStack spacing={12} modifiers={[contentShape(shapes.rectangle())]}>
+        {renderAccessory(leading)}
         <VStack alignment="leading" spacing={2}>
           <>{wrapStrings(slots.headline)}</>
           {supporting != null ? renderSupporting(supporting) : null}
         </VStack>
         <Spacer />
-        {wrapStrings(trailing)}
+        {renderAccessory(trailing)}
       </HStack>
     </Button>
   );

package/src/universal/ListItem/types.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import type { ModifierConfig } from '../../types';
+
 /**
  * Props for the [`ListItem.Leading`](#listitemleading) slot marker.
  */
@@ -64,4 +66,12 @@ export interface ListItemProps {
    * Identifier used to locate the component in end-to-end tests.
    */
   testID?: string;
+
+  /**
+   * Platform-specific modifier escape hatch. Pass an array of modifier configs
+   * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.
+   * On iOS these are applied to the underlying SwiftUI `Button` and can override
+   * its default `buttonStyle(.plain)`.
+   */
+  modifiers?: ModifierConfig[];
 }

package/src/universal/Picker/Picker.tsx

@@ -1,11 +1,53 @@
-import type { ComponentProps } from 'react';
-import { StyleSheet, unstable_createElement, type ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
+import { colors, createWebComponent, durations, easings, shadows } from '../webUtils';
 import { extractPickerItems } from './PickerItem';
 import type { PickerItemValue, PickerProps } from './types';
+import { useFocusVisible } from '../hooks';
 
-const Select = (props: Omit<ComponentProps<'select'>, 'style'> & { style?: ViewProps['style'] }) =>
-  unstable_createElement('select', props);
+const Select = createWebComponent('select');
+const Svg = createWebComponent('svg');
+
+const styles = StyleSheet.create({
+  select: {
+    appearance: 'none',
+    backgroundColor: colors.background,
+    borderColor: colors.gray[200],
+    borderRadius: 8,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: shadows.input,
+    boxSizing: 'border-box',
+    color: colors.gray[900],
+    cursor: 'pointer',
+    display: 'flex',
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontSize: 14,
+    height: 40,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    paddingLeft: 12,
+    paddingRight: 36,
+    paddingVertical: 0,
+    transitionProperty: 'border-color, box-shadow',
+    transitionDuration: durations.fast,
+    transitionTimingFunction: easings.standard,
+  },
+  focused: {
+    borderColor: colors.primary[500],
+    boxShadow: shadows.focus,
+  },
+  arrow: {
+    height: 5,
+    width: 9,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 12,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+});
 
 /**
  * A single-selection input.
@@ -19,34 +61,37 @@ export function Picker<T extends PickerItemValue>({
   testID,
 }: PickerProps<T>) {
   const items = extractPickerItems<T>(children);
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
 
   return (
-    <Select
-      disabled={!enabled}
-      value={String(selectedValue)}
-      onChange={(e) => {
-        const index = e.target.selectedIndex;
-        const item = items[index];
-        if (item) onValueChange(item.value);
-      }}
-      style={styles.select}
-      data-testid={testID}>
-      {items.map((item) => (
-        <option key={String(item.value)} value={String(item.value)}>
-          {item.label}
-        </option>
-      ))}
-    </Select>
+    <View>
+      <Select
+        disabled={!enabled}
+        value={String(selectedValue)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        testID={testID}
+        onChange={(e) => {
+          const index = e.target.selectedIndex;
+          const item = items[index];
+          if (item) onValueChange(item.value);
+        }}
+        style={[styles.select, focusVisible && styles.focused]}>
+        {items.map((item) => (
+          <option key={String(item.value)} value={String(item.value)}>
+            {item.label}
+          </option>
+        ))}
+      </Select>
+
+      <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" style={styles.arrow}>
+        <path
+          d="M12.293.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6A1 1 0 1 1 1.707.293L7 5.586z"
+          fill={colors.gray[500]}
+        />
+      </Svg>
+    </View>
   );
 }
 
-const styles = StyleSheet.create({
-  select: {
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-    fontSize: 14,
-    margin: 0,
-  },
-});
-
 export * from './types';

package/src/universal/Slider/index.tsx

@@ -1,22 +1,95 @@
-import type { ComponentProps } from 'react';
-import { StyleSheet, unstable_createElement, View, type ViewProps } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import { colors, createWebComponent, css, durations, easings, shadows } from '../webUtils';
 import type { SliderProps } from './types';
 
+const Input = createWebComponent('input');
+
 const styles = StyleSheet.create({
   view: {
     alignSelf: 'stretch',
     justifyContent: 'center',
   },
   input: {
-    width: '100%',
+    appearance: 'none',
+    backgroundColor: 'transparent',
     cursor: 'pointer',
+    height: 22,
+    margin: 0,
+    padding: 0,
+    '--_track-bg': colors.gray[200],
+    '--_track-fill': colors.primary[500],
+  } as ViewStyle,
+  disabled: {
+    cursor: 'auto',
+    opacity: 0.5,
   },
 });
 
-const NativeSlider = (
-  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
-) => unstable_createElement('input', { ...props, type: 'range' });
+const sliderCss = css`
+  [data-expo-ui-slider]::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--_track-fill) 0 var(--_pct),
+      var(--_track-bg) var(--_pct) 100%
+    );
+  }
+
+  [data-expo-ui-slider]::-moz-range-track {
+    height: 4px;
+    border-radius: 999px;
+    background: var(--_track-bg);
+  }
+
+  [data-expo-ui-slider]::-moz-range-progress {
+    height: 4px;
+    border-radius: 999px;
+    background: var(--_track-fill);
+  }
+
+  [data-expo-ui-slider]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: white;
+    border: 1.5px solid ${colors.primary[500]};
+    margin-top: -7px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    transition-property: transform, box-shadow;
+    transition-duration: ${durations.fast};
+    transition-timing-function: ${easings.standard};
+  }
+
+  [data-expo-ui-slider]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: white;
+    border: 1.5px solid ${colors.primary[500]};
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  }
+
+  [data-expo-ui-slider]:hover:not(:disabled)::-webkit-slider-thumb {
+    transform: scale(1.1);
+  }
+
+  [data-expo-ui-slider]:focus-visible {
+    outline: none;
+  }
+
+  [data-expo-ui-slider]:focus-visible::-webkit-slider-thumb {
+    box-shadow: ${shadows.focus};
+  }
+
+  [data-expo-ui-slider]:active:not(:disabled)::-webkit-slider-thumb {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 6px color-mix(in oklab, ${colors.primary[500]} 18%, transparent);
+  }
+`;
 
 /**
  * A control for selecting a value from a continuous or stepped range.
@@ -30,17 +103,25 @@ export function Slider({
   disabled = false,
   testID,
 }: SliderProps) {
+  const pct = ((value - min) / (max - min)) * 100;
+
   return (
     <View style={styles.view}>
-      <NativeSlider
+      <style href="expo-ui-slider" precedence="expo-ui">
+        {sliderCss}
+      </style>
+
+      <Input
+        type="range"
+        dataSet={{ expoUiSlider: '' }}
         value={value}
         min={min}
         max={max}
         step={step ?? 'any'}
         disabled={disabled}
-        onChange={(e) => onValueChange(parseFloat(e.target.value))}
+        onChange={({ target: { value } }) => onValueChange(Number.parseFloat(value))}
         data-testid={testID}
-        style={styles.input}
+        style={[styles.input, { '--_pct': `${pct}%` } as ViewStyle, disabled && styles.disabled]}
       />
     </View>
   );

package/src/universal/Switch/index.android.tsx

@@ -1,5 +1,5 @@
 import { Row, Switch as ComposeSwitch, Text } from '@expo/ui/jetpack-compose';
-import { testID as testIDModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { testID as testIDModifier, weight } from '@expo/ui/jetpack-compose/modifiers';
 
 import type { SwitchProps } from './types';
 
@@ -17,7 +17,7 @@ export function Switch({ value, onValueChange, label, disabled, testID, modifier
 
   return (
     <Row verticalAlignment="center" horizontalArrangement={{ spacedBy: 8 }}>
-      <Text>{label}</Text>
+      <Text modifiers={[weight(1)]}>{label}</Text>
       {toggle}
     </Row>
   );

package/src/universal/Switch/index.tsx

@@ -1,19 +1,66 @@
-import { Switch as RNSwitch, View, Text, StyleSheet, useColorScheme } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 
 import type { SwitchProps } from './types';
+import { useFocusVisible } from '../hooks';
+import { colors, createWebComponent, durations, easings, shadows } from '../webUtils';
+
+const Input = createWebComponent('input');
 
 const styles = StyleSheet.create({
   view: {
-    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 8,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: 10,
   },
-  disabled: {
+  viewDisabled: {
+    cursor: 'auto',
     opacity: 0.5,
   },
-  darkText: {
-    color: '#fff',
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    margin: 0,
+    width: 0,
+    height: 0,
+  },
+  text: {
+    color: colors.foreground,
+    userSelect: 'none',
+  },
+  track: {
+    backgroundColor: colors.gray[300],
+    borderRadius: 22 / 2,
+    height: 22,
+    position: 'relative',
+    transitionDuration: durations.base,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: easings.standard,
+    width: 36,
+  },
+  trackChecked: {
+    backgroundColor: colors.primary[500],
+  },
+  focused: {
+    boxShadow: shadows.focus,
+  },
+  thumb: {
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    backgroundColor: '#fff',
+    borderRadius: 18 / 2,
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)',
+    height: 18,
+    width: 18,
+    transitionDuration: durations.base,
+    transitionProperty: 'transform',
+    transitionTimingFunction: easings.standard,
+  },
+  thumbChecked: {
+    transform: 'translateX(14px)',
   },
 });
 
@@ -21,19 +68,31 @@ const styles = StyleSheet.create({
  * A toggle control that switches between on and off states.
  */
 export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
-  const isDark = useColorScheme() === 'dark';
-
-  if (label) {
-    return (
-      <View style={[styles.view, disabled && styles.disabled]}>
-        <Text style={isDark && styles.darkText}>{label}</Text>
-        <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
-      </View>
-    );
-  }
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
 
   return (
-    <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
+    <View
+      aria-disabled={disabled}
+      role="label"
+      style={[styles.view, disabled && styles.viewDisabled]}>
+      <Input
+        type="checkbox"
+        role="switch"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        checked={value}
+        disabled={disabled}
+        testID={testID}
+        style={styles.input}
+        onChange={({ target: { checked } }) => onValueChange(checked)}
+      />
+
+      {label != null && <Text style={styles.text}>{label}</Text>}
+
+      <View style={[styles.track, value && styles.trackChecked, focusVisible && styles.focused]}>
+        <View style={[styles.thumb, value && styles.thumbChecked]} />
+      </View>
+    </View>
   );
 }
 

package/src/universal/TextInput/index.tsx

@@ -1,11 +1,39 @@
-import { useImperativeHandle, useRef } from 'react';
-import { TextInput as RNTextInput, StyleSheet, useColorScheme } from 'react-native';
+import { useImperativeHandle, useRef, useState } from 'react';
+import { TextInput as RNTextInput, StyleSheet } from 'react-native';
 
 import { useNativeState } from '../State';
 import type { TextInputProps } from './types';
+import { colors, durations, easings, shadows } from '../webUtils';
 
 const styles = StyleSheet.create({
-  darkInput: { color: '#fff' },
+  input: {
+    backgroundColor: colors.background,
+    borderColor: colors.gray[200],
+    borderRadius: 8,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: shadows.input,
+    boxSizing: 'border-box',
+    color: colors.gray[900],
+    display: 'flex',
+    fontSize: 14,
+    height: 40,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 0,
+    transitionDuration: durations.fast,
+    transitionProperty: 'border-color, box-shadow, background-color',
+    transitionTimingFunction: easings.standard,
+  },
+  focused: {
+    borderColor: colors.primary[500],
+    boxShadow: shadows.focus,
+  },
+  multiline: {
+    height: 'auto',
+    paddingVertical: 11,
+  },
 });
 
 export function TextInput({
@@ -45,7 +73,7 @@ export function TextInput({
   onSelectionChange,
   selectTextOnFocus,
 }: TextInputProps) {
-  const isDark = useColorScheme() === 'dark';
+  const [focused, setFocused] = useState(false);
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
   const state = value ?? fallback;
@@ -79,7 +107,7 @@ export function TextInput({
       ref={innerRef}
       value={state.value}
       placeholder={placeholder}
-      placeholderTextColor={placeholderTextColor}
+      placeholderTextColor={placeholderTextColor ?? colors.gray[500]}
       autoFocus={autoFocus}
       editable={editable}
       readOnly={readOnly}
@@ -98,15 +126,15 @@ export function TextInput({
       returnKeyType={returnKeyType}
       enterKeyHint={enterKeyHint}
       cursorColor={cursorColor}
-      style={[
-        isDark && styles.darkInput,
-        style,
-        textStyle,
-        textAlign && textAlign !== 'auto' ? { textAlign } : null,
-      ]}
       onSubmitEditing={onSubmitEditing ? (e) => onSubmitEditing(e.nativeEvent.text) : undefined}
-      onFocus={onFocus ? () => onFocus() : undefined}
-      onBlur={onBlur ? () => onBlur() : undefined}
+      onFocus={() => {
+        setFocused(true);
+        onFocus?.();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onBlur?.();
+      }}
       onChangeText={(text) => {
         state.value = text;
         onChangeText?.(text);
@@ -129,6 +157,14 @@ export function TextInput({
               }
             : undefined
       }
+      style={[
+        styles.input,
+        focused && styles.focused,
+        multiline && styles.multiline,
+        style,
+        textStyle,
+        textAlign && textAlign !== 'auto' ? { textAlign } : null,
+      ]}
     />
   );
 }

package/src/universal/hooks.ts

@@ -1,4 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { wasLastInputKeyboard } from './keyboardEvent.fx';
 
 /**
  * Shared hook for onAppear/onDisappear lifecycle callbacks.
@@ -18,3 +20,25 @@ export function useUniversalLifecycle(onAppear?: () => void, onDisappear?: () =>
     };
   }, []);
 }
+
+/**
+ * Tracks whether the element should display a keyboard focus indicator,
+ * mirroring the browser's `:focus-visible` heuristic. Spread the returned
+ * `onFocus`/`onBlur` onto a focusable element (e.g. `Pressable`) and read
+ * `focusVisible` to conditionally apply focus styles.
+ */
+export function useFocusVisible() {
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const onFocus = useCallback(() => {
+    if (wasLastInputKeyboard()) {
+      setFocusVisible(true);
+    }
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setFocusVisible(false);
+  }, []);
+
+  return { focusVisible, onFocus, onBlur };
+}

package/src/universal/keyboardEvent.fx.ts

@@ -0,0 +1,28 @@
+import { Platform } from 'react-native';
+
+// Default to true on other platforms than web (native, SSR) so any focus
+// event registers as keyboard-driven there. On web, a pointer event flips this
+// to false before the focus event fires.
+let lastInputWasKeyboard = Platform.OS !== 'web';
+
+export const wasLastInputKeyboard = () => lastInputWasKeyboard;
+
+if (Platform.OS === 'web' && typeof window !== 'undefined') {
+  window.addEventListener(
+    'keydown',
+    (event) => {
+      if (!event.altKey && !event.ctrlKey && !event.metaKey) {
+        lastInputWasKeyboard = true;
+      }
+    },
+    true
+  );
+
+  const listener = () => {
+    lastInputWasKeyboard = false;
+  };
+
+  window.addEventListener('mousedown', listener, true);
+  window.addEventListener('pointerdown', listener, true);
+  window.addEventListener('touchstart', listener, true);
+}