expo-interface 0.1.0

package/src/screen/host-accent.android.ts

@@ -0,0 +1,8 @@
+/**
+ * Android: seed the Compose `Host` so all Material 3 children are themed by
+ * the accent-derived palette (`SchemeTonalSpot`), and no-arg
+ * `useMaterialColors()` calls inside the subtree read the same palette.
+ */
+export function hostAccentProps(seed: string) {
+  return {seedColor: seed};
+}

package/src/screen/host-accent.ios.ts

@@ -0,0 +1,9 @@
+import {tint} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS: apply the accent seed as a Host-level SwiftUI `tint`, which cascades
+ * to every SwiftUI child (buttons, pickers, switches, text fields).
+ */
+export function hostAccentProps(seed: string) {
+  return {modifiers: [tint(seed)]};
+}

package/src/screen/host-accent.ts

@@ -0,0 +1,15 @@
+/**
+ * Extra `Host` props that apply the accent seed to the native UI toolkit.
+ * Resolved per platform by Metro:
+ * - `.android.ts`: `{seedColor}` — themes all Compose children with the
+ *   seeded Material 3 palette and publishes it via `HostPaletteContext`.
+ * - `.ios.ts`: `{modifiers: [tint(seed)]}` — cascades the accent to all
+ *   SwiftUI children (standard `.tint` inheritance).
+ * - Web (this file): nothing; the accent flows through CSS custom properties.
+ *
+ * Typed loosely because `seedColor`/`modifiers` are platform-entry props that
+ * the universal `Host` type does not declare.
+ */
+export function hostAccentProps(_seed: string): Record<string, never> {
+  return {};
+}

package/src/screen/index.tsx

@@ -0,0 +1,79 @@
+import type {ColorSchemeName, ColorValue} from 'react-native';
+import type {Edge} from 'react-native-safe-area-context';
+
+import {Host} from '@expo/ui';
+import {useEffect} from 'react';
+import {StatusBar} from 'expo-status-bar';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useColorScheme, Appearance, StyleSheet, View} from 'react-native';
+import {setBackgroundColorAsync} from 'expo-system-ui';
+import {useAccentSeed} from '../accent';
+import * as theme from '../theme';
+
+import {hostAccentProps} from './host-accent';
+
+const CONTENT_EDGES: Edge[] = ['left', 'right', 'bottom'];
+const BG_COLOR: Record<ColorSchemeName, ColorValue> = {
+  unspecified: theme.colors.light.background,
+  light: theme.colors.light.background,
+  dark: theme.colors.dark.background,
+};
+
+setBackgroundColorAsync(BG_COLOR[Appearance.getColorScheme() ?? 'unspecified']);
+
+interface ScreenProps extends React.PropsWithChildren {
+  /** Whether to expect an @expo/ui or normal RN component children. */
+  native?: boolean;
+  /** Screen sits below a stack header — skip redundant top inset/padding. */
+  header?: boolean;
+  /** Whether to apply a horizontal padding to the screen. */
+  gutter?: boolean;
+}
+
+export function Screen({
+  children,
+  native = false,
+  header = false,
+  gutter = false,
+}: ScreenProps) {
+  const seed = useAccentSeed();
+  const scheme = useColorScheme();
+  const backgroundColor = BG_COLOR[scheme ?? 'unspecified'];
+
+  useEffect(() => {
+    setBackgroundColorAsync(backgroundColor);
+  }, [backgroundColor]);
+
+  return (
+    <SafeAreaView
+      style={{flex: 1, backgroundColor}}
+      edges={header ? CONTENT_EDGES : undefined}>
+      <StatusBar style={scheme === 'dark' ? 'light' : 'dark'}/>
+      <View style={[styles.root, {paddingTop: header ? 0 : theme.inset.topBar}]}>
+        <View style={[styles.content, gutter ? styles.gutter : undefined]}>
+          {!native ? children : (
+            <Host style={{flex: 1}} {...hostAccentProps(seed)}>
+              {children}
+            </Host>
+          )}
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    gap: theme.spacing.three,
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+    maxWidth: theme.bound.contentMaxWidth,
+  },
+  gutter: {
+    paddingHorizontal: theme.spacing.three,
+  },
+});

package/src/sheet/index.android.tsx

@@ -0,0 +1,25 @@
+import type {BottomSheetProps} from '@expo/ui';
+
+import {HostPaletteContext, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {BottomSheet} from '@expo/ui';
+import {useAccentSeed} from '../accent';
+
+/**
+ * Android: the sheet's internal `Host` is not seeded (no `seedColor` prop is
+ * forwarded by `BottomSheet`), so overlay `HostPaletteContext` with the
+ * accent-seeded Material 3 palette. Every `useMaterialColors()` consumer in
+ * the sheet (text fields, pickers, switches, list rows) then resolves the
+ * same palette as the seeded `Screen` Host. Controls that also take explicit
+ * accent colors (switch track, dialog tint, cursor) read `useColor('tint')`.
+ */
+export function Sheet({children, ...props}: BottomSheetProps) {
+  const seed = useAccentSeed();
+  const palette = useMaterialColors({seedColor: seed});
+  return (
+    <BottomSheet {...props}>
+      <HostPaletteContext.Provider value={palette}>
+        {children}
+      </HostPaletteContext.Provider>
+    </BottomSheet>
+  );
+}

package/src/sheet/index.ios.tsx

@@ -0,0 +1,20 @@
+import type {BottomSheetProps} from '@expo/ui';
+
+import {tint} from '@expo/ui/swift-ui/modifiers';
+import {BottomSheet} from '@expo/ui';
+import {useAccentSeed} from '../accent';
+
+/**
+ * iOS: apply the accent seed as a `tint` presentation modifier on the sheet's
+ * content, mirroring the Host-level cascade in `Screen` (`hostAccentProps`).
+ * Without it, SwiftUI children in the sheet (toggles, pickers, text fields)
+ * would render the default systemBlue instead of the user-supplied accent.
+ */
+export function Sheet({children, modifiers, ...props}: BottomSheetProps) {
+  const seed = useAccentSeed();
+  return (
+    <BottomSheet {...props} modifiers={[tint(seed), ...(modifiers ?? [])]}>
+      {children}
+    </BottomSheet>
+  );
+}

package/src/sheet/index.tsx

@@ -0,0 +1,18 @@
+import type {BottomSheetProps} from '@expo/ui';
+import {BottomSheet} from '@expo/ui';
+
+/**
+ * Accent-aware bottom sheet. `@expo/ui`'s `BottomSheet` mounts its own `Host`
+ * without the accent seed (unlike `Screen`, which applies `hostAccentProps`),
+ * so sheet content would fall back to the platform default tint. Resolved per
+ * platform by Metro:
+ * - `.ios.tsx`: prepends a `tint(seed)` presentation modifier so the accent
+ *   cascades to all SwiftUI children in the sheet.
+ * - `.android.tsx`: overlays `HostPaletteContext` with the seeded Material 3
+ *   palette so `useMaterialColors()` consumers match the seeded `Screen` Host.
+ * - Web (this file): accent flows through CSS custom properties; vaul sheet
+ *   width is constrained via `global.css`.
+ */
+export function Sheet(props: BottomSheetProps) {
+  return <BottomSheet {...props}/>;
+}

package/src/stack-header/index.tsx

@@ -0,0 +1,3 @@
+export function ConstrainedStackHeader() {
+  return null;
+}

package/src/stack-header/index.web.tsx

@@ -0,0 +1,33 @@
+import {ScreenHeader} from '../screen/header';
+
+interface StackHeaderProps {
+  navigation: {goBack: () => void};
+  route: {name: string};
+  back?: unknown;
+  options: {
+    title?: string;
+    headerTitle?: string | (() => React.ReactNode);
+    headerRight?: (props: {tintColor?: string}) => React.ReactNode;
+  };
+}
+
+export function ConstrainedStackHeader({
+  navigation,
+  route,
+  back,
+  options,
+}: StackHeaderProps) {
+  const title = typeof options.headerTitle === 'string'
+    ? options.headerTitle
+    : options.title ?? route.name;
+
+  const trailing = options.headerRight?.({});
+
+  return (
+    <ScreenHeader
+      title={title}
+      onBack={back ? () => navigation.goBack() : undefined}
+      trailing={trailing}
+    />
+  );
+}

package/src/switch/index.android.tsx

@@ -0,0 +1,60 @@
+import type {SwitchProps} from './types';
+
+import {Row, Switch as ComposeSwitch, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, graphicsLayer, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+
+// Material 3's Switch has a fixed size; scale it down visually while keeping it
+// pinned to the trailing edge (transformOrigin at the right).
+const SCALE = 0.80;
+
+// iOS switches use a white thumb when on; M3 defaults to `onPrimary`.
+const THUMB_ON = '#FFFFFF';
+
+/**
+ * The stock universal switch packs the label and toggle tightly together. Here
+ * the row fills the available width and pushes the Material switch to the
+ * trailing edge, mirroring the iOS Form row. The "on" state is colored with
+ * the live accent seed (matching the iOS Host `tint` cascade and the web
+ * `--color-tint` default) instead of the host's tonal M3 primary, so the
+ * switch reads identically across platforms — including inside sheets whose
+ * native host is not seeded.
+ */
+export function Switch({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: SwitchProps) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  const toggle = (
+    <ComposeSwitch
+      value={value}
+      onCheckedChange={disabled ? undefined : onValueChange}
+      enabled={!disabled}
+      colors={{
+        checkedTrackColor: accentColor ?? tint,
+        checkedThumbColor: THUMB_ON,
+      }}
+      modifiers={[
+        graphicsLayer({scaleX: SCALE, scaleY: SCALE, transformOriginX: 1}),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}
+    />
+  );
+
+  if (label == null) return toggle;
+
+  return (
+    <Row
+      verticalAlignment="center"
+      horizontalArrangement="spaceBetween"
+      modifiers={[fillMaxWidth()]}>
+      <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      {toggle}
+    </Row>
+  );
+}

package/src/switch/index.ios.tsx

@@ -0,0 +1,33 @@
+import type {SwitchProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Toggle} from '@expo/ui/swift-ui';
+import {disabled as disabledMod, tint} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS renders the toggle inline using SwiftUI's `Toggle`, which is exactly the
+ * Form row look the other platforms emulate: a leading label with the switch
+ * pinned to the trailing edge. Drop it straight into a `FieldGroup.Section`.
+ */
+export function Switch({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: SwitchProps) {
+  const modifiers: ViewModifier[] = [];
+  if (accentColor) modifiers.push(tint(accentColor));
+  if (disabled) modifiers.push(disabledMod(true));
+
+  return (
+    <Toggle
+      isOn={value}
+      onIsOnChange={onValueChange}
+      label={label}
+      modifiers={modifiers}
+      testID={testID}
+    />
+  );
+}

package/src/switch/index.tsx

@@ -0,0 +1,62 @@
+import type {SwitchProps} from './types';
+import {Switch as RNSwitch, StyleSheet, View} from 'react-native';
+import {Label} from '../typography';
+import {theme} from '../theme';
+
+/** iOS switches use a white thumb in both states; web defaults to a green thumb. */
+const THUMB = '#ffffff';
+
+/**
+ * On web the row mirrors the native iOS/Android layout: a label on the leading
+ * edge and the native React Native Web switch pinned to the trailing edge.
+ * The "on" track defaults to the accent tint for iOS parity — on iOS the
+ * Host-level `tint` cascade colors the SwiftUI `Toggle` with the seed.
+ */
+export function Switch({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+  style,
+}: SwitchProps) {
+  const onColor = accentColor ?? (theme.tint as string);
+  const offColor = theme.switchTrack;
+  const toggle = (
+    <RNSwitch
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      thumbColor={THUMB}
+      trackColor={{true: onColor, false: offColor}}
+      testID={label == null ? testID : undefined}
+      {...({activeThumbColor: THUMB} as object)}
+    />
+  );
+
+  return label != null ? (
+    <View style={[styles.row, style]} testID={testID}>
+      <Label color="label" style={[styles.label, disabled && styles.disabled]}>
+        {label}
+      </Label>
+      {toggle}
+    </View>
+  ) : toggle;
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    width: '100%',
+  },
+  label: {
+    flexShrink: 1,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});

package/src/switch/types.ts

@@ -0,0 +1,23 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Cross-platform toggle with a conformed iOS-style appearance.
+ *
+ * A controlled control: pair `value` with `onValueChange` to manage state.
+ */
+export interface SwitchProps {
+  /** Label rendered at the leading edge of the row, mirroring an iOS Form row. */
+  label?: string;
+  /** Whether the switch is on. */
+  value: boolean;
+  /** Called when the user toggles the switch. */
+  onValueChange: (value: boolean) => void;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Tint applied to the "on" track (overrides the theme accent tint). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the row container (web/android only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/tab-stack/index.tsx

@@ -0,0 +1,21 @@
+import {Stack} from 'expo-router';
+import {Platform} from 'react-native';
+import {useNavTheme} from '../theme';
+
+export function TabStack({title}: {title: string}) {
+  const {colors} = useNavTheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: Platform.OS !== 'web',
+        headerShadowVisible: false,
+        headerBackButtonDisplayMode: 'minimal',
+        headerTintColor: colors.text,
+        headerTitleStyle: {color: colors.text},
+        headerStyle: {backgroundColor: colors.background},
+      }}>
+      <Stack.Screen name="index" options={{title}}/>
+    </Stack>
+  );
+}

package/src/tabs/index.tsx

@@ -0,0 +1,34 @@
+import type {TabBarProps} from './types';
+import {NativeTabs} from 'expo-router/unstable-native-tabs';
+import {useColor} from '../theme';
+
+export function Tabs({routes}: TabBarProps) {
+  const rippleColor = useColor('pillBackground');
+  const indicatorColor = useColor('backgroundElement');
+  const labelColor = useColor('label');
+
+  return (
+    <NativeTabs
+      backgroundColor="transparent"
+      indicatorColor={indicatorColor}
+      rippleColor={rippleColor}
+      labelStyle={{selected: {color: labelColor}}}
+      // Monochrome selected icon to match the label (and the web tab bar);
+      // without it iOS falls back to the default system tint.
+      iconColor={{selected: labelColor}}>
+      {routes.map(route => (
+        <NativeTabs.Trigger
+          key={route.name}
+          name={route.name}>
+          <NativeTabs.Trigger.Label>
+            {route.label}
+          </NativeTabs.Trigger.Label>
+          <NativeTabs.Trigger.Icon
+            sf={route.icon.ios}
+            md={route.icon.android}
+          />
+        </NativeTabs.Trigger>
+      ))}
+    </NativeTabs>
+  );
+}

package/src/tabs/index.web.tsx

@@ -0,0 +1,114 @@
+import type {TabTriggerSlotProps, TabListProps} from 'expo-router/ui';
+import type {TabBarProps, TabRoute, WebLogo} from './types';
+
+import {Tabs as WebTabs, TabSlot, TabList, TabTrigger} from 'expo-router/ui';
+import {View, Pressable, StyleSheet} from 'react-native';
+import {SymbolView} from 'expo-symbols';
+import {Image} from 'expo-image';
+import app from 'expo-constants';
+
+import {theme, spacing, bound} from '../theme';
+import {Headline, Label} from '../typography';
+
+export function Tabs({routes, webLogo = 'icon-and-text', webIcon}: TabBarProps) {
+  return (
+    <WebTabs>
+      <TabSlot style={styles.slot}/>
+      <TabList asChild>
+        <WebTabList logo={webLogo} icon={webIcon}>
+          {routes.map(route => (
+            <TabTrigger key={route.name} name={route.name} href={route.href} asChild>
+              <TabLink icon={route.icon}>{route.label}</TabLink>
+            </TabTrigger>
+          ))}
+        </WebTabList>
+      </TabList>
+    </WebTabs>
+  );
+}
+
+export function WebTabList({logo, icon, ...props}: TabListProps & {logo: WebLogo, icon?: TabBarProps['webIcon']}) {
+  const isPreset = typeof logo === 'string';
+  const isTextOnly = logo === 'text-only';
+  const isIconOnly = logo === 'icon-only';
+  return (
+    <View {...props} style={styles.list}>
+      <View style={styles.inner}>
+        <View style={styles.logo}>
+          {!isPreset ? logo : (
+            <>
+              {!isTextOnly && icon != null && (
+                <Image
+                  style={styles.icon}
+                  source={icon}
+                  contentFit="contain"
+                />
+              )}
+              {!isIconOnly && (
+                <Headline color="label">
+                  {app.expoConfig?.name}
+                </Headline>
+              )}
+            </>
+          )}
+        </View>
+        {props.children}
+      </View>
+    </View>
+  );
+}
+
+export function TabLink({children, isFocused, icon, ...props}: TabTriggerSlotProps & {icon: TabRoute['icon']}) {
+  return (
+    <Pressable {...props} style={({pressed}) => pressed && styles.pressed}>
+      <View style={styles.link}>
+        <SymbolView name={icon} size={18} tintColor={isFocused ? theme.label : theme.secondaryLabel}/>
+        <Label color={isFocused ? 'label' : 'secondaryLabel'}>{children}</Label>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  slot: {
+    height: '100%',
+  },
+  list: {
+    position: 'absolute',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    padding: spacing.three,
+  },
+  inner: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: bound.contentMaxWidth,
+    paddingHorizontal: spacing.five,
+    paddingVertical: spacing.three,
+    gap: spacing.three,
+    borderRadius: spacing.five,
+    backgroundColor: theme.backgroundElement,
+  },
+  logo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 'auto',
+    gap: spacing.two,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    borderRadius: spacing.two,
+  },
+  link: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.two,
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});

package/src/tabs/types.ts

@@ -0,0 +1,64 @@
+import type {Href} from 'expo-router';
+import type {SFSymbol, AndroidSymbol} from 'expo-symbols';
+import type {ReactNode} from 'react';
+import type {ImageSource} from 'expo-image';
+
+/**
+ * Props for the tab bar component.
+ * @see Tabs
+ */
+export interface TabBarProps {
+  /** 
+   * Configures the tab bar items for native & web.
+   * @example
+   * ```ts
+   * const routes: readonly TabRoute[] = [
+   *   {
+   *     href: '/',
+   *     name: 'index',
+   *     label: 'Home',
+   *     icon: {ios: 'house', android: 'home', web: 'home'},
+   *   },
+   *   {
+   *     href: '/settings',
+   *     name: 'settings',
+   *     label: 'Settings',
+   *     icon: {ios: 'gearshape', android: 'settings', web: 'settings'},
+   *   },
+   * ];
+   * ```
+   */
+  routes: readonly TabRoute[];
+  /**
+   * Controls the web tab bar logo. Use a preset mode to show the app icon
+   * and/or name, or pass a custom node to replace them entirely.
+   * @default 'icon-and-text'
+   */
+  webLogo?: WebLogo;
+  /**
+   * App icon rendered by the `icon-only` and `icon-and-text` web logo presets,
+   * e.g. `require('./assets/icon.png')`. When omitted only the name is shown.
+   */
+  webIcon?: ImageSource | number;
+}
+
+export type WebLogo =
+  | 'icon-only'
+  | 'text-only'
+  | 'icon-and-text'
+  | ReactNode;
+
+export interface TabRoute {
+  /** Route segment, matching the file name in `src/app`. */
+  name: string;
+  /** Navigation target used by the web tab bar. */
+  href: Href;
+  /** Visible tab label. */
+  label: string;
+  /** Symbol name per platform. */
+  icon: {
+    ios: SFSymbol;
+    android: AndroidSymbol;
+    web: AndroidSymbol;
+  };
+}