@expo/ui 56.0.18 → 56.0.19

package/src/universal/FieldGroup/FieldSection.tsx

@@ -1,9 +1,10 @@
 import { Fragment } from 'react';
-import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { extractFieldSectionSlots } from './FieldSectionSlots';
 import type { FieldSectionProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
+import { colors } from '../webUtils';
 
 const styles = StyleSheet.create({
   hidden: {
@@ -11,49 +12,42 @@ const styles = StyleSheet.create({
   },
   headerContainer: {
     paddingHorizontal: 16,
-    paddingBottom: 8,
+    paddingBottom: 12,
   },
   headerText: {
-    color: '#6c6c70',
+    color: colors.gray[900],
     fontSize: 14,
     fontWeight: '500',
   },
-  headerTextDark: {
-    color: '#98989e',
-  },
   headerTextUppercase: {
     textTransform: 'uppercase',
     letterSpacing: 0.5,
     fontSize: 13,
   },
   card: {
-    backgroundColor: '#ffffff',
+    backgroundColor: colors.background,
     borderRadius: 12,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: colors.gray[100],
     overflow: 'hidden',
   },
-  cardDark: {
-    backgroundColor: '#1c1c1e',
-  },
   // Gives each row the same minimum height SwiftUI `Form` uses for single-line
   // rows on iOS, so a text-only row doesn't collapse to its text intrinsic
   // size. Taller content (e.g. a Switch) grows the row naturally. Horizontal
   // padding matches SwiftUI `Form`'s built-in row leading/trailing inset.
   rowWrapper: {
-    minHeight: 44,
+    minHeight: 48,
     justifyContent: 'center',
     paddingHorizontal: 16,
   },
   divider: {
-    backgroundColor: '#e5e5ea',
+    backgroundColor: colors.gray[100],
     height: 1,
-    marginLeft: 16,
-  },
-  dividerDark: {
-    backgroundColor: '#38383a',
   },
   footerContainer: {
     paddingHorizontal: 16,
-    paddingTop: 8,
+    paddingTop: 12,
   },
 });
 
@@ -75,34 +69,23 @@ export function FieldSection({
 }: FieldSectionProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const isDarkScheme = useColorScheme() === 'dark';
-
   const { header, footer, rows } = extractFieldSectionSlots(children);
 
   const headerNode =
     header ??
     (title ? (
-      <Text
-        style={[
-          styles.headerText,
-          isDarkScheme && styles.headerTextDark,
-          titleUppercase && styles.headerTextUppercase,
-        ]}>
-        {title}
-      </Text>
+      <Text style={[styles.headerText, titleUppercase && styles.headerTextUppercase]}>{title}</Text>
     ) : null);
 
   return (
     <View style={[style, hidden && styles.hidden]} testID={testID}>
       {headerNode ? <View style={styles.headerContainer}>{headerNode}</View> : null}
       {rows.length > 0 ? (
-        <View style={[styles.card, isDarkScheme && styles.cardDark]}>
+        <View style={styles.card}>
           {rows.map((child, index) => (
             <Fragment key={index}>
               <View style={styles.rowWrapper}>{child}</View>
-              {index < rows.length - 1 ? (
-                <View style={[styles.divider, isDarkScheme && styles.dividerDark]} />
-              ) : null}
+              {index < rows.length - 1 ? <View role="separator" style={styles.divider} /> : null}
             </Fragment>
           ))}
         </View>

package/src/universal/Host/index.tsx

@@ -1,5 +1,7 @@
+import { useMemo } from 'react';
 import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
 
+import { generatePrimaryColorScale, globalCss } from '../webUtils';
 import type { UniversalHostProps } from './types';
 
 const styles = StyleSheet.create({
@@ -27,10 +29,11 @@ const styles = StyleSheet.create({
 /**
  * A bridging container that hosts SwiftUI views on iOS and Jetpack Compose views on Android.
  * On platforms without a native UI-toolkit binding (web, RN fallback), renders a plain `View`.
- * The `colorScheme`, `layoutDirection`, and `matchContents` props are accepted for API parity but have no effect.
  */
 export function Host({
   children,
+  colorScheme = 'unspecified',
+  seedColor,
   ignoreSafeArea,
   layoutDirection,
   matchContents = false,
@@ -38,44 +41,55 @@ export function Host({
   onLayoutContent,
   style,
   useViewportSizeMeasurement = false,
-  colorScheme: _colorScheme,
   ...rest
 }: UniversalHostProps) {
+  const dataSet = colorScheme !== 'unspecified' ? { theme: colorScheme } : undefined;
+  const primaryColorScale = useMemo(() => generatePrimaryColorScale(seedColor), [seedColor]);
+
+  const dir =
+    layoutDirection === 'leftToRight'
+      ? 'ltr'
+      : layoutDirection === 'rightToLeft'
+        ? 'rtl'
+        : undefined;
+
   const shouldMatchContents =
     typeof matchContents === 'object'
       ? matchContents.horizontal || matchContents.vertical
       : matchContents;
 
   return (
-    <View
-      dir={
-        layoutDirection === 'leftToRight'
-          ? 'ltr'
-          : layoutDirection === 'rightToLeft'
-            ? 'rtl'
-            : undefined
-      }
-      onLayout={(event: LayoutChangeEvent) => {
-        onLayout?.(event);
+    <>
+      <style href="expo-ui-host" precedence="expo-ui">
+        {globalCss}
+      </style>
+
+      <View
+        dataSet={dataSet}
+        dir={dir}
+        onLayout={(event: LayoutChangeEvent) => {
+          onLayout?.(event);
 
-        onLayoutContent?.({
-          nativeEvent: {
-            width: event.nativeEvent.layout.width,
-            height: event.nativeEvent.layout.height,
-          },
-        });
-      }}
-      style={[
-        ignoreSafeArea !== 'all' &&
-          (ignoreSafeArea === 'keyboard' ? styles.safeAreaWithoutKeyboard : styles.safeArea),
-        shouldMatchContents
-          ? styles.matchContents
-          : useViewportSizeMeasurement && styles.matchViewport,
-        style,
-      ]}
-      {...rest}>
-      {children}
-    </View>
+          onLayoutContent?.({
+            nativeEvent: {
+              width: event.nativeEvent.layout.width,
+              height: event.nativeEvent.layout.height,
+            },
+          });
+        }}
+        style={[
+          primaryColorScale,
+          ignoreSafeArea !== 'all' &&
+            (ignoreSafeArea === 'keyboard' ? styles.safeAreaWithoutKeyboard : styles.safeArea),
+          shouldMatchContents
+            ? styles.matchContents
+            : useViewportSizeMeasurement && styles.matchViewport,
+          style,
+        ]}
+        {...rest}>
+        {children}
+      </View>
+    </>
   );
 }
 

package/src/universal/Host/types.ts

@@ -1,4 +1,4 @@
-import type { ColorSchemeName, ViewProps } from 'react-native';
+import type { ColorSchemeName, ColorValue, ViewProps } from 'react-native';
 
 /**
  * Props for the [`Host`](#host) component.
@@ -16,14 +16,29 @@ export interface UniversalHostProps extends ViewProps {
   matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
 
   /**
-   * The color scheme to apply to descendant native views.
+   * The color scheme to apply to the subtree.
    * `'light'` / `'dark'` force a specific appearance; omitted follows the device setting.
    *
    * @platform android
    * @platform ios
+   * @platform web
    */
   colorScheme?: ColorSchemeName;
 
+  /**
+   * Seed color used to derive the theme applied to the host's subtree. Each platform interprets it natively:
+   * - On Android, it generates a full Material 3 palette (`SchemeTonalSpot`, the same algorithm as Material You) that themes Compose children and is exposed to descendants via `useMaterialColors()`.
+   * - On iOS, it is applied as the SwiftUI tint, propagating through the environment to theme interactive controls such as buttons, switches, and sliders.
+   * - On web, it generates a primary color scale exposed as CSS variables to the subtree.
+   *
+   * When omitted, each platform falls back to its default theme.
+   *
+   * @platform android
+   * @platform ios
+   * @platform web
+   */
+  seedColor?: ColorValue;
+
   /**
    * Layout direction for the platform UI content.
    * Defaults to the current locale direction from `I18nManager`.

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>
   );