@expo/ui 56.0.17 → 56.0.19

package/src/ts-declarations/react-native-web.d.ts

@@ -97,11 +97,37 @@ declare module 'react-native' {
   }
 
   export interface ViewProps extends WebAccessibilityProps {
+    dataSet?: Record<string, string | undefined>;
     dir?: string;
     role?: WebRole;
   }
 
-  export interface ImageStyle {
+  /**
+   * Animations and transitions
+   */
+
+  type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse';
+  type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
+  type AnimationIterationCount = number | 'infinite';
+  type AnimationKeyframes = Record<string, ImageStyle | TextStyle | ViewStyle>;
+  type AnimationPlayState = 'paused' | 'running';
+
+  export interface AnimationStyles {
+    animationDelay?: string;
+    animationDirection?: AnimationDirection;
+    animationDuration?: string;
+    animationFillMode?: AnimationFillMode;
+    animationIterationCount?: AnimationIterationCount;
+    animationKeyframes?: AnimationKeyframes | AnimationKeyframes[];
+    animationPlayState?: AnimationPlayState;
+    animationTimingFunction?: string;
+    transitionDelay?: string;
+    transitionDuration?: string;
+    transitionProperty?: string;
+    transitionTimingFunction?: string;
+  }
+
+  export interface ImageStyle extends AnimationStyles {
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;
@@ -113,7 +139,7 @@ declare module 'react-native' {
     paddingBottom?: WebDimensionValue;
   }
 
-  export interface TextStyle {
+  export interface TextStyle extends AnimationStyles {
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;
@@ -123,9 +149,11 @@ declare module 'react-native' {
     paddingRight?: WebDimensionValue;
     paddingTop?: WebDimensionValue;
     paddingBottom?: WebDimensionValue;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
   }
 
-  export interface ViewStyle {
+  export interface ViewStyle extends AnimationStyles {
+    appearance?: 'none' | 'auto';
     display?: DisplayValue;
     height?: WebDimensionValue;
     width?: WebDimensionValue;

package/src/universal/Button/index.ios.tsx

@@ -2,6 +2,7 @@ import { Button as SwiftUIButton } from '@expo/ui/swift-ui';
 import { buttonStyle } from '@expo/ui/swift-ui/modifiers';
 import type { ModifierConfig } from '@expo/ui/swift-ui/modifiers';
 
+import { omitUserOverridden } from '../modifierUtils';
 import { transformToModifiers } from '../transformStyle';
 import type { ButtonProps, ButtonVariant } from './types';
 
@@ -24,7 +25,11 @@ export function Button({
   testID,
   modifiers: extraModifiers,
 }: ButtonProps) {
-  const buttonSpecificModifiers: ModifierConfig[] = [buttonStyle(variantButtonStyle[variant])];
+  // A user-supplied buttonStyle modifier replaces the variant's.
+  const buttonSpecificModifiers: ModifierConfig[] = omitUserOverridden(
+    [buttonStyle(variantButtonStyle[variant])],
+    extraModifiers
+  );
 
   const universalModifiers = transformToModifiers(
     style,

package/src/universal/Button/index.tsx

@@ -1,40 +1,60 @@
-import { Pressable, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text } from 'react-native';
 
-import type { ButtonProps, ButtonVariant } from './types';
-import { useUniversalLifecycle } from '../hooks';
+import type { ButtonProps } from './types';
+import { useFocusVisible, useUniversalLifecycle } from '../hooks';
+import { colors, durations, easings, shadows } from '../webUtils';
 
-const styles = StyleSheet.create({
-  button: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
+const buttonStyles = StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    backgroundColor: colors.primary[500],
     borderRadius: 8,
-    userSelect: 'none',
+    boxShadow: shadows.button,
+    display: 'inline-flex',
+    height: 40,
+    justifyContent: 'center',
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    paddingHorizontal: 16,
+    transitionDuration: durations.fast,
+    transitionProperty: 'background-color, color, box-shadow, transform',
+    transitionTimingFunction: easings.standard,
+    whiteSpace: 'nowrap',
+  },
+  outlined: {
+    backgroundColor: 'transparent',
+    boxShadow: `inset 0 0 0 1px ${colors.gray[300]}`,
   },
+  text: {
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+  },
+  focused: { boxShadow: shadows.focus },
   disabled: { opacity: 0.5 },
   hidden: { display: 'none' },
-  label: { textAlign: 'center' },
+  hovered: { backgroundColor: colors.primary[600] },
+  hoveredOutlined: { backgroundColor: colors.gray[50] },
+  hoveredText: { backgroundColor: colors.gray[50] },
+  pressed: {
+    backgroundColor: colors.primary[700],
+    transform: 'translateY(0.5px)',
+  },
+  pressedOutlined: { backgroundColor: colors.gray[100] },
+  pressedText: { backgroundColor: colors.gray[100] },
 });
 
-const variantStyles = StyleSheet.create({
-  filled: { backgroundColor: '#007AFF' },
-  outlined: {
-    borderColor: '#007AFF',
-    borderWidth: 1,
+const textStyles = StyleSheet.create({
+  base: {
+    color: colors.primary.foreground,
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 14,
+    textAlign: 'center',
+    userSelect: 'none',
   },
-  text: {},
-} satisfies Record<ButtonVariant, ViewStyle>);
-
-const variantHoverStyles = StyleSheet.create({
-  filled: { backgroundColor: '#0066DB' },
-  outlined: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
-  text: { backgroundColor: 'rgba(0, 122, 255, 0.08)' },
-} satisfies Record<ButtonVariant, ViewStyle>);
-
-const variantLabelStyles = StyleSheet.create({
-  filled: { color: '#FFFFFF' },
-  outlined: { color: '#007AFF' },
-  text: { color: '#007AFF' },
-} satisfies Record<ButtonVariant, TextStyle>);
+  outlined: { color: colors.gray[900] },
+  text: { color: colors.primary[600] },
+});
 
 /**
  * A pressable button that supports multiple visual variants.
@@ -53,21 +73,49 @@ export function Button({
 }: ButtonProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
+
   return (
     <Pressable
       role="button"
+      onFocus={onFocus}
+      onBlur={onBlur}
       onPress={onPress}
       disabled={disabled}
       testID={testID}
-      style={({ hovered }) => [
-        styles.button,
-        variantStyles[variant],
+      style={({ hovered, pressed }) => [
+        buttonStyles.base,
+        variant === 'outlined' && buttonStyles.outlined,
+        variant === 'text' && buttonStyles.text,
+
+        hovered && [
+          buttonStyles.hovered,
+          variant === 'outlined' && buttonStyles.hoveredOutlined,
+          variant === 'text' && buttonStyles.hoveredText,
+        ],
+
+        pressed && [
+          buttonStyles.pressed,
+          variant === 'outlined' && buttonStyles.pressedOutlined,
+          variant === 'text' && buttonStyles.pressedText,
+        ],
+
         style,
-        hovered && !disabled && variantHoverStyles[variant],
-        hidden && styles.hidden,
-        disabled && styles.disabled,
+
+        focusVisible && buttonStyles.focused,
+        hidden && buttonStyles.hidden,
+        disabled && buttonStyles.disabled,
       ]}>
-      {children ?? <Text style={[styles.label, variantLabelStyles[variant]]}>{label}</Text>}
+      {children ?? (
+        <Text
+          style={[
+            textStyles.base,
+            variant === 'outlined' && textStyles.outlined,
+            variant === 'text' && textStyles.text,
+          ]}>
+          {label}
+        </Text>
+      )}
     </Pressable>
   );
 }

package/src/universal/Checkbox/index.tsx

@@ -1,56 +1,111 @@
-import type { ComponentProps } from 'react';
-import {
-  StyleSheet,
-  Text,
-  unstable_createElement,
-  useColorScheme,
-  View,
-  type ViewProps,
-} from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { CheckboxProps } from './types';
+import { useFocusVisible } from '../hooks';
+import { colors, createWebComponent, durations, easings, shadows } from '../webUtils';
+
+const Input = createWebComponent('input');
 
 const styles = StyleSheet.create({
-  label: {
-    flexDirection: 'row',
-    display: 'inline-flex',
+  view: {
     alignItems: 'center',
-    gap: 8,
     cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: 10,
   },
-  disabled: {
-    opacity: 0.5,
+  viewDisabled: {
     cursor: 'auto',
   },
-  cursorInherit: {
-    // @ts-expect-error
-    cursor: 'inherit',
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    margin: 0,
+    width: 0,
+    height: 0,
+  },
+  pressable: {
+    backgroundColor: colors.background,
+    borderColor: colors.gray[300],
+    borderRadius: 6,
+    borderStyle: 'solid',
+    borderWidth: 1.5,
+    height: 18,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    transitionDuration: durations.fast,
+    transitionProperty: 'all',
+    transitionTimingFunction: easings.standard,
+    width: 18,
+  },
+  hovered: {
+    borderColor: colors.primary[500],
   },
-  darkText: {
-    color: '#fff',
+  focused: {
+    boxShadow: shadows.focus,
+  },
+  checked: {
+    backgroundColor: colors.primary[500],
+    borderColor: colors.primary[500],
+  },
+  disabled: {
+    cursor: 'auto',
+    opacity: 0.5,
+  },
+  text: {
+    color: colors.foreground,
+    lineHeight: 20,
+    userSelect: 'none',
   },
 });
 
-const NativeCheckbox = (
-  props: Omit<ComponentProps<'input'>, 'style' | 'type'> & { style?: ViewProps['style'] }
-) => unstable_createElement('input', { ...props, type: 'checkbox' });
-
 /**
  * A toggle control that represents a checked or unchecked state.
  */
 export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
-  const isDark = useColorScheme() === 'dark';
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
 
   return (
-    <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
-      <NativeCheckbox
+    <View
+      aria-disabled={disabled}
+      role="label"
+      style={[styles.view, disabled && styles.viewDisabled]}>
+      <Input
+        type="checkbox"
+        focusable
+        onFocus={onFocus}
+        onBlur={onBlur}
         checked={value}
-        onChange={(e) => onValueChange(e.target.checked)}
+        onChange={({ target: { checked } }) => onValueChange(checked)}
         disabled={disabled}
         data-testid={testID}
-        style={styles.cursorInherit}
+        style={styles.input}
       />
-      {label != null && <Text style={isDark && styles.darkText}>{label}</Text>}
+
+      <Pressable
+        tabIndex={-1}
+        style={({ hovered }) => [
+          styles.pressable,
+          hovered && !disabled && styles.hovered,
+          value && styles.checked,
+          focusVisible && styles.focused,
+          disabled && styles.disabled,
+        ]}>
+        {value && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="white"
+            strokeWidth="1.75"
+            strokeLinecap="round"
+            strokeLinejoin="round">
+            <polyline points="3 8.5 6.5 12 13 4.5" />
+          </svg>
+        )}
+      </Pressable>
+      {label != null && <Text style={styles.text}>{label}</Text>}
     </View>
   );
 }

package/src/universal/Collapsible/index.tsx

@@ -1,23 +1,11 @@
-import type { ComponentProps, SyntheticEvent } from 'react';
-import {
-  StyleSheet,
-  Text,
-  unstable_createElement,
-  useColorScheme,
-  View,
-  type TextProps,
-  type ViewProps,
-} from 'react-native';
+import type { SyntheticEvent } from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import type { CollapsibleProps } from './types';
+import { createWebComponent } from '../webUtils';
 
-const Details = (
-  props: Omit<ComponentProps<'details'>, 'style'> & { style?: TextProps['style'] }
-) => unstable_createElement('details', props);
-
-const Summary = (
-  props: Omit<ComponentProps<'summary'>, 'style'> & { style?: ViewProps['style'] }
-) => unstable_createElement('summary', props);
+const Details = createWebComponent('details');
+const Summary = createWebComponent('summary');
 
 /**
  * A primitive that toggles visibility of its content via a labelled tappable

package/src/universal/FieldGroup/FieldGroup.tsx

@@ -1,24 +1,21 @@
-import { ScrollView, StyleSheet, useColorScheme } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 
 import { groupFieldGroupChildren } from './groupChildren';
 import type { FieldGroupProps } from './types';
 import { useUniversalLifecycle } from '../hooks';
+import { colors } from '../webUtils';
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f2f2f7',
+    backgroundColor: colors.gray[50],
     flex: 1,
   },
-  containerDark: {
-    backgroundColor: '#000000',
-  },
   hidden: {
     display: 'none',
   },
   contentContainer: {
-    paddingHorizontal: 16,
-    paddingVertical: 16,
     gap: 24,
+    padding: 16,
   },
 });
 
@@ -39,16 +36,9 @@ export function FieldGroup({
 }: FieldGroupProps) {
   useUniversalLifecycle(onAppear, onDisappear);
 
-  const isDarkScheme = useColorScheme() === 'dark';
-
   return (
     <ScrollView
-      style={[
-        styles.container,
-        isDarkScheme && styles.containerDark,
-        style,
-        hidden && styles.hidden,
-      ]}
+      style={[styles.container, style, hidden && styles.hidden]}
       contentContainerStyle={styles.contentContainer}
       testID={testID}>
       {groupFieldGroupChildren(children)}

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/FieldGroup/FieldSectionSlots.tsx

@@ -44,6 +44,9 @@ export function extractFieldSectionSlots(children: ReactNode): ExtractedFieldSec
 
   const walk = (node: ReactNode) => {
     Children.forEach(node, (child) => {
+      if (child == null || typeof child === 'boolean') {
+        return;
+      }
       if (!isValidElement(child)) {
         rows.push(child);
         return;

package/src/universal/FieldGroup/groupChildren.tsx

@@ -21,6 +21,9 @@ export function groupFieldGroupChildren(children: ReactNode): ReactNode[] {
   };
 
   Children.forEach(children, (child) => {
+    if (child == null || typeof child === 'boolean') {
+      return;
+    }
     if (isSectionElement(child)) {
       flush();
       result.push(child);

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>
+    </>
   );
 }