expo-interface 0.1.0

package/src/list-item/index.tsx

@@ -0,0 +1,21 @@
+import type {ListItemProps} from './types';
+import {ListItem as UIListItem} from '@expo/ui';
+
+/**
+ * Web/iOS render the universal `@expo/ui` `ListItem` (RN row on web, SwiftUI
+ * list row on iOS) through explicit slot props.
+ */
+export function ListItem({children, leading, trailing, supporting, onPress, testID}: ListItemProps) {
+  return (
+    <UIListItem
+      onPress={onPress}
+      leading={leading}
+      trailing={trailing}
+      supportingText={supporting}
+      testID={testID}>
+      {children}
+    </UIListItem>
+  );
+}
+
+export type {ListItemProps} from './types';

package/src/list-item/types.ts

@@ -0,0 +1,21 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Props for the app `ListItem`: a tappable row with leading/trailing slots
+ * and optional supporting text. Bridges the universal `@expo/ui` `ListItem`
+ * on web/iOS and the Material 3 Compose `ListItem` on Android.
+ */
+export interface ListItemProps {
+  /** Headline content; strings are wrapped in default label styling. */
+  children?: ReactNode;
+  /** Leading (start) slot — icon, avatar, etc. */
+  leading?: ReactNode;
+  /** Trailing (end) slot — chevron, value, control, etc. */
+  trailing?: ReactNode;
+  /** Secondary content below the headline; strings get subtle styling. */
+  supporting?: string | ReactNode;
+  /** Tap handler, active over the entire row. */
+  onPress?: () => void;
+  /** Identifier used to locate the row in end-to-end tests. */
+  testID?: string;
+}

package/src/picker/index.android.tsx

@@ -0,0 +1,80 @@
+import type {PickerProps, PickerValue} from './types';
+
+import {useState} from 'react';
+import unfoldMore from '@expo/material-symbols/unfold_more.xml';
+import {useMaterialColors, DropdownMenu, DropdownMenuItem, Column, Row, Text, Icon} from '@expo/ui/jetpack-compose';
+import {background, clickable, clip, fillMaxWidth, padding, Shapes} from '@expo/ui/jetpack-compose/modifiers';
+import {extractItems, labelFor, PickerItem, useSelectedValue} from './shared';
+
+/**
+ * Android's stock dropdown spans the full row width with no label, so instead
+ * the row mirrors the iOS Form look — a leading label and a trailing rounded
+ * pill showing the value plus an up/down chevron — built with Jetpack Compose
+ * primitives so it lives natively inside the surrounding `Host`/`FieldGroup`.
+ * Pressing the pill anchors a Material dropdown menu of the options.
+ */
+function PickerComponent<T extends PickerValue>({
+  label,
+  children,
+  disabled,
+  accentColor,
+  selectedValue,
+  onValueChange,
+}: PickerProps<T>) {
+  const colors = useMaterialColors();
+  const items = extractItems<T>(children);
+  const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
+  const [expanded, setExpanded] = useState(false);
+  const colorLabel = disabled ? colors.onSurfaceVariant : colors.onSurface;
+  // Secondary by default — iOS renders the menu picker's value in gray inside
+  // a Form, and the web pill uses `secondaryLabel` to match.
+  const colorValue = accentColor && !disabled ? accentColor : colors.onSurfaceVariant;
+  return (
+    <Column modifiers={[fillMaxWidth()]}>
+      <Row
+        verticalAlignment="center"
+        horizontalArrangement="spaceBetween"
+        modifiers={[fillMaxWidth()]}>
+        {label != null ? <Text color={colorLabel}>{label}</Text> : null}
+        <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+          <DropdownMenu.Trigger>
+            <Row
+              verticalAlignment="center"
+              horizontalArrangement={{spacedBy: 4}}
+              modifiers={[
+                clip(Shapes.RoundedCorner(8)),
+                background(colors.surfaceContainerHighest),
+                ...(disabled ? [] : [clickable(() => setExpanded(true))]),
+                padding(12, 6, 12, 6),
+              ]}>
+              <Text color={colorValue}>{labelFor(items, current)}</Text>
+              <Icon source={unfoldMore} size={16} tint={colorValue} />
+            </Row>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Items>
+            {items.map(item => (
+              <DropdownMenuItem
+                key={String(item.value)}
+                onClick={
+                  disabled
+                    ? undefined
+                    : () => {
+                        setValue(item.value);
+                        setExpanded(false);
+                      }
+                }>
+                <DropdownMenuItem.Text>
+                  <Text>{item.label}</Text>
+                </DropdownMenuItem.Text>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenu.Items>
+        </DropdownMenu>
+      </Row>
+    </Column>
+  );
+}
+
+PickerComponent.Item = PickerItem;
+
+export {PickerComponent as Picker};

package/src/picker/index.ios.tsx

@@ -0,0 +1,48 @@
+import type {PickerProps, PickerValue} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Picker as SwiftUIPicker, Text} from '@expo/ui/swift-ui';
+import {pickerStyle, tag, tint, disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+import {extractItems, PickerItem, useSelectedValue} from './shared';
+
+/**
+ * iOS renders the picker inline using SwiftUI's `Picker` with the `menu` style,
+ * which is the rounded-pill Form row look the other platforms emulate: a
+ * leading label, the selected value, and a trailing chevron. Drop it straight
+ * into a `FieldGroup.Section` alongside other rows.
+ */
+function PickerComponent<T extends PickerValue>({
+  label,
+  testID,
+  children,
+  disabled,
+  accentColor,
+  selectedValue,
+  onValueChange,
+}: PickerProps<T>) {
+  const items = extractItems<T>(children);
+  const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
+  const modifiers: ViewModifier[] = [pickerStyle('menu')];
+
+  if (accentColor) modifiers.push(tint(accentColor));
+  if (disabled != null) modifiers.push(disabledMod(disabled));
+
+  return (
+    <SwiftUIPicker
+      label={label}
+      selection={current}
+      onSelectionChange={value => setValue(value as T)}
+      modifiers={modifiers}
+      testID={testID}>
+      {items.map(item => (
+        <Text key={String(item.value)} modifiers={[tag(item.value)]}>
+          {item.label}
+        </Text>
+      ))}
+    </SwiftUIPicker>
+  );
+}
+
+PickerComponent.Item = PickerItem;
+
+export {PickerComponent as Picker};

package/src/picker/index.tsx

@@ -0,0 +1,145 @@
+import type {ChangeEvent, CSSProperties} from 'react';
+import type {PickerProps, PickerValue} from './types';
+
+import {Pressable, StyleSheet, View} from 'react-native';
+import {Label} from '../typography';
+import {theme} from '../theme';
+import {extractItems, labelFor, PickerItem, useSelectedValue} from './shared';
+
+/**
+ * On web the row mirrors the native iOS/Android pill: a label on the leading
+ * edge and a rounded pill showing the selected value plus an up/down chevron,
+ * with a transparent native `<select>` layered on top. Clicking the pill opens
+ * the browser's built-in option list.
+ */
+function PickerComponent<T extends PickerValue>({
+  style,
+  label,
+  testID,
+  children,
+  disabled,
+  accentColor,
+  selectedValue,
+  onValueChange,
+}: PickerProps<T>) {
+  const items = extractItems<T>(children);
+  const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const item = items[event.target.selectedIndex];
+    if (item) setValue(item.value);
+  };
+
+  return (
+    <View style={[styles.row, style]} testID={testID}>
+      {label != null ? (
+        <Label color="label" style={[styles.label, disabled && styles.disabled]}>
+          {label}
+        </Label>
+      ) : null}
+      <Pressable disabled={disabled} style={[styles.pill, disabled && styles.disabled]}>
+        <Label
+          color="secondaryLabel"
+          style={[styles.value, accentColor != null && {color: accentColor}]}>
+          {labelFor(items, current)}
+        </Label>
+        <Chevron />
+        <select
+          value={current != null ? String(current) : undefined}
+          disabled={disabled}
+          aria-label={label ?? 'Select option'}
+          onChange={handleChange}
+          style={{...overlayStyle, cursor: disabled ? 'default' : 'pointer'}}>
+          {items.map(item => (
+            <option key={String(item.value)} value={String(item.value)} style={optionStyle}>
+              {item.label}
+            </option>
+          ))}
+        </select>
+      </Pressable>
+    </View>
+  );
+}
+
+PickerComponent.Item = PickerItem;
+
+export {PickerComponent as Picker};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    width: '100%',
+  },
+  label: {
+    flexShrink: 1,
+  },
+  pill: {
+    position: 'relative',
+    flexShrink: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: 8,
+    paddingHorizontal: 11,
+    paddingVertical: 4,
+    backgroundColor: theme.pillBackground,
+  },
+  value: {
+    flexShrink: 0,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+const overlayStyle: CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: '100%',
+  height: '100%',
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  opacity: 0,
+  appearance: 'none',
+  // The native options popup derives its colors from the select's own
+  // background/color (not `:root`), so theme them via CSS vars. `opacity: 0`
+  // keeps the overlay box invisible; the popup still uses these colors.
+  colorScheme: 'light dark',
+  color: 'var(--color-label)',
+  background: 'var(--color-background)',
+};
+
+const optionStyle: CSSProperties = {
+  color: 'var(--color-label)',
+  background: 'var(--color-background)',
+};
+
+const chevronStroke = {stroke: theme.tertiaryLabel as string} as CSSProperties;
+
+function Chevron() {
+  return (
+    <svg width="11" height="16" viewBox="0 0 11 16" fill="none" aria-hidden="true">
+      <path
+        d="M2.5 6.5 L5.5 3.5 L8.5 6.5"
+        style={chevronStroke}
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.5 9.5 L5.5 12.5 L8.5 9.5"
+        style={chevronStroke}
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/picker/shared.ts

@@ -0,0 +1,70 @@
+import type {ReactElement, ReactNode} from 'react';
+import type {PickerItemProps, PickerOption, PickerValue} from './types';
+import {Children, isValidElement, useCallback, useState} from 'react';
+
+/**
+ * Data-only option marker. Rendered as `<Picker.Item label value />` and never
+ * mounts anything itself — the parent `Picker` reads its props to build the
+ * platform-native list of options.
+ */
+export function PickerItem<T extends PickerValue>(_props: PickerItemProps<T>): null {
+  return null;
+}
+
+/**
+ * Walks `<Picker>` children and extracts each `<Picker.Item>`'s props.
+ * Non-`PickerItem` children are ignored.
+ * @param children - The picker children.
+ * @returns The list of options declared by the children.
+ */
+export function extractItems<T extends PickerValue>(children: ReactNode): PickerOption<T>[] {
+  return Children.toArray(children)
+    .filter(
+      (child): child is ReactElement<PickerItemProps<T>> =>
+        isValidElement(child) && child.type === PickerItem,
+    )
+    .map(child => ({label: child.props.label, value: child.props.value}));
+}
+
+/**
+ * Bridges controlled and uncontrolled usage, mirroring `useDateValue`. When
+ * `selectedValue` is provided the component is controlled; otherwise it falls
+ * back to internal state seeded with `fallback` (typically the first option).
+ * @param value - The current value of the picker.
+ * @param onChange - The function to call when the picker value changes.
+ * @param fallback - The value used when neither `value` nor internal state is set.
+ * @returns The current value and the function to call when the picker value changes.
+ */
+export function useSelectedValue<T extends PickerValue>(
+  value: T | undefined,
+  onChange: ((value: T) => void) | undefined,
+  fallback: T | undefined,
+): [T | undefined, (next: T) => void] {
+  const [internal, setInternal] = useState<T | undefined>(value);
+  const current = value ?? internal ?? fallback;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (value === undefined) {
+        setInternal(next);
+      }
+      onChange?.(next);
+    },
+    [value, onChange],
+  );
+
+  return [current, setValue];
+}
+
+/**
+ * Finds the display label for the currently selected value.
+ * @param options - The available options.
+ * @param value - The selected value.
+ * @returns The matching label, or an empty string when nothing matches.
+ */
+export function labelFor<T extends PickerValue>(
+  options: PickerOption<T>[],
+  value: T | undefined,
+): string {
+  return options.find(option => option.value === value)?.label ?? '';
+}

package/src/picker/types.ts

@@ -0,0 +1,48 @@
+import type {ReactNode} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/** The type of values a {@link PickerItem} can carry. */
+export type PickerValue = string | number;
+
+/** Internal shape extracted from each `<Picker.Item>` child. */
+export interface PickerOption<T extends PickerValue = PickerValue> {
+  label: string;
+  value: T;
+}
+
+/**
+ * Props for the `Picker.Item` component. A data-only marker used to declare the
+ * available options inside a {@link Picker}.
+ */
+export interface PickerItemProps<T extends PickerValue = PickerValue> {
+  /** Display text for the option. */
+  label: string;
+  /** Value reported through `onValueChange` when this option is selected. */
+  value: T;
+}
+
+/**
+ * Cross-platform dropdown picker with a conformed iOS-style appearance.
+ *
+ * The control may be used controlled (pass `selectedValue` + `onValueChange`)
+ * or uncontrolled (omit both and it manages its own state, seeded with the
+ * first option).
+ */
+export interface PickerProps<T extends PickerValue = PickerValue> {
+  /** Style applied to the row container (web/android only). */
+  style?: StyleProp<ViewStyle>;
+  /** Label rendered at the leading edge of the row, mirroring an iOS Form row. */
+  label?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** `Picker.Item` children that define the available options. */
+  children?: ReactNode;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Tint applied to the value text (web/android) and the native picker (iOS). */
+  accentColor?: string;
+  /** Current value (controlled). When omitted the component keeps its own state. */
+  selectedValue?: T;
+  /** Called whenever the user selects an option. */
+  onValueChange?: (value: T) => void;
+}

package/src/progress/index.android.tsx

@@ -0,0 +1,24 @@
+import type {ProgressProps} from './types';
+import {LinearProgressIndicator} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+
+/**
+ * Android renders the Material 3 `LinearProgressIndicator`. It fills the row
+ * width so it matches the iOS and web bars.
+ */
+export function Progress({value, color, trackColor, testID}: ProgressProps) {
+  const accent = useColor('tint');
+  const track = useColor('backgroundSelected');
+  return (
+    <LinearProgressIndicator
+      progress={value ?? null}
+      color={color ?? accent}
+      trackColor={trackColor ?? track}
+      modifiers={[
+        fillMaxWidth(),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}
+    />
+  );
+}

package/src/progress/index.ios.tsx

@@ -0,0 +1,20 @@
+import type {ProgressProps} from './types';
+import {ProgressView} from '@expo/ui/swift-ui';
+import {tint} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+
+/**
+ * iOS renders SwiftUI's `ProgressView` in its linear style (the default for a
+ * determinate `value`). The bar is flexible-width and fills the available space
+ * of its parent layout. `trackColor` has no SwiftUI equivalent and is ignored.
+ */
+export function Progress({value, color, testID}: ProgressProps) {
+  const accent = useColor('tint');
+  return (
+    <ProgressView
+      value={value ?? null}
+      modifiers={[tint(color ?? accent)]}
+      testID={testID}
+    />
+  );
+}

package/src/progress/index.tsx

@@ -0,0 +1,30 @@
+import './progress.css';
+import type {CSSProperties} from 'react';
+import type {ProgressProps} from './types';
+import {useColor} from '../theme';
+
+/**
+ * On web the bar is a native `<meter>` element. Its bar/track colors are driven
+ * by the `--ui-progress-*` custom properties consumed in `global.css`, since the
+ * meter pseudo-elements can't be styled inline. Indeterminate meters don't
+ * exist on the web platform, so an undefined `value` renders an empty bar.
+ */
+export function Progress({value, color, trackColor, testID}: ProgressProps) {
+  const tint = useColor('tint');
+  const track = useColor('backgroundSelected');
+  const clamped = Math.max(0, Math.min(1, value ?? 0));
+  const vars = {
+    '--ui-progress-bar': color ?? tint,
+    '--ui-progress-track': trackColor ?? track,
+  } as CSSProperties;
+  return (
+    <meter
+      className="ui-progress"
+      min={0}
+      max={1}
+      value={clamped}
+      data-testid={testID}
+      style={vars}
+    />
+  );
+}

package/src/progress/progress.css

@@ -0,0 +1,27 @@
+.ui-progress {
+  width: 100%;
+  height: 6px;
+  border: none;
+  border-radius: 999px;
+  background: var(--ui-progress-track);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ui-progress::-webkit-meter-bar {
+  border: none;
+  border-radius: 999px;
+  background: var(--ui-progress-track);
+}
+
+.ui-progress::-webkit-meter-optimum-value,
+.ui-progress::-webkit-meter-suboptimum-value,
+.ui-progress::-webkit-meter-even-less-good-value {
+  border-radius: 999px;
+  background: var(--ui-progress-bar);
+}
+
+.ui-progress::-moz-meter-bar {
+  border-radius: 999px;
+  background: var(--ui-progress-bar);
+}

package/src/progress/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Cross-platform determinate progress bar.
+ *
+ * Bridges the SwiftUI `ProgressView` on iOS, the Jetpack Compose
+ * `LinearProgressIndicator` on Android, and the HTML `<meter>` element on web.
+ */
+export interface ProgressProps {
+  /**
+   * Progress value between `0` and `1`.
+   * Omit for an indeterminate indicator (native only; web falls back to `0`).
+   */
+  value?: number;
+  /** Color of the filled portion of the bar. Defaults to the theme tint. */
+  color?: string;
+  /** Color of the unfilled track behind the bar. */
+  trackColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/qr/index.tsx

@@ -0,0 +1,26 @@
+import {useMemo} from 'react';
+import {Image} from 'expo-image';
+import qrcode from 'qrcode-generator';
+
+export interface QRCodeProps {
+  /** Value encoded in the QR code. */
+  value: string;
+  /** Rendered width/height in points. */
+  size?: number;
+}
+
+export function QRCode({value, size = 200}: QRCodeProps) {
+  const uri = useMemo(() => {
+    const qr = qrcode(0, 'M');
+    qr.addData(value);
+    qr.make();
+    return qr.createDataURL(8, 2);
+  }, [value]);
+  return (
+    <Image
+      source={{uri}}
+      style={{width: size, height: size, borderRadius: 12}}
+      contentFit="contain"
+    />
+  );
+}

package/src/router/external-link.tsx

@@ -0,0 +1,26 @@
+import {Href, Link} from 'expo-router';
+import {openBrowserAsync, WebBrowserPresentationStyle} from 'expo-web-browser';
+
+type Props = Omit<React.ComponentProps<typeof Link>, 'href'> & {
+  href: Href & string
+};
+
+export function ExternalLink({href, ...rest}: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (process.env.EXPO_OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href, {
+            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
+          });
+        }
+      }}
+    />
+  );
+}

package/src/screen/header.tsx

@@ -0,0 +1,65 @@
+import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {SymbolView} from 'expo-symbols';
+import {bound, spacing, useColor} from '../theme';
+
+interface ScreenHeaderProps {
+  title: string;
+  onBack?: () => void;
+  trailing?: React.ReactNode;
+}
+
+export function ScreenHeader({title, onBack, trailing}: ScreenHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const label = useColor('label');
+  const background = useColor('background');
+  const paddingTop = Platform.OS === 'web' ? 0 : insets.top;
+
+  return (
+    <View style={[styles.bar, {backgroundColor: background, paddingTop}]}>
+      <View style={styles.inner}>
+        {onBack ? (
+          <Pressable
+            onPress={onBack}
+            accessibilityLabel="Go back"
+            style={styles.back}>
+            <SymbolView
+              name={{web: 'arrow_back', ios: 'chevron.left', android: 'arrow_back'}}
+              size={24}
+              tintColor={label}
+            />
+          </Pressable>
+        ) : null}
+        <Text numberOfLines={1} style={[styles.title, {color: label}]}>
+          {title}
+        </Text>
+        {trailing}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  inner: {
+    width: '100%',
+    alignItems: 'center',
+    flexDirection: 'row',
+    maxWidth: bound.contentMaxWidth,
+    paddingHorizontal: spacing.three,
+    height: 64,
+    gap: spacing.two,
+  },
+  back: {
+    padding: spacing.one,
+    marginLeft: -spacing.one,
+  },
+  title: {
+    flex: 1,
+    fontSize: 17,
+    fontWeight: '600',
+  },
+});