expo-interface 0.1.0

package/src/button/index.ios.tsx

@@ -0,0 +1,78 @@
+import type {ButtonProps, ButtonVariant} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+import {Button as SwiftUIButton, HStack, Image, Text} from '@expo/ui/swift-ui';
+import {buttonStyle, buttonBorderShape, controlSize, labelStyle, tint, disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+import {ICON_GAP, SIZE_ICON, iosSymbol, swiftBorderShape, swiftControlSize} from './shared';
+import {onAccent as contrastOf} from '../accent';
+import {useColor} from '../theme';
+
+const VARIANT_STYLE: Record<ButtonVariant, 'borderedProminent' | 'bordered' | 'plain'> = {
+  filled: 'borderedProminent',
+  outlined: 'bordered',
+  text: 'plain',
+};
+
+/**
+ * iOS renders SwiftUI's native `Button`. The variant maps to a `buttonStyle`
+ * modifier and the accent (theme tint by default, red for destructive) is
+ * applied with `tint` so the button is branded consistently across platforms.
+ */
+export function Button({
+  label,
+  onPress,
+  variant = 'filled',
+  role = 'default',
+  color,
+  size = 'medium',
+  shape,
+  prefixIcon,
+  suffixIcon,
+  hideLabel = false,
+  disabled,
+  testID,
+}: ButtonProps) {
+  const themeTint = useColor('tint');
+  const destructive = useColor('destructive');
+  const themeOnAccent = useColor(role === 'destructive' ? 'onDestructive' : 'onTint');
+  const hasSuffix = !!suffixIcon && !hideLabel;
+  const iconOnly = hideLabel && !!prefixIcon;
+  const accent = color ?? (role === 'destructive' ? destructive : themeTint);
+  // A custom accent brings its own contrast color for filled content.
+  const onAccent = color ? contrastOf(color) : themeOnAccent;
+  const iconColor = variant === 'filled' ? onAccent : accent;
+  const modifiers: ViewModifier[] = [
+    buttonStyle(VARIANT_STYLE[variant]),
+    controlSize(swiftControlSize(size)),
+    tint(accent),
+  ];
+
+  if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
+  if (disabled) modifiers.push(disabledMod(true));
+  if (iconOnly) modifiers.push(labelStyle('iconOnly'));
+  if (hasSuffix) {
+    return (
+      <SwiftUIButton
+        role={role === 'destructive' ? 'destructive' : 'default'}
+        onPress={onPress}
+        modifiers={modifiers}
+        testID={testID}>
+        <HStack spacing={ICON_GAP}>
+          {prefixIcon ? <Image systemName={iosSymbol(prefixIcon)} color={iconColor} size={SIZE_ICON[size]}/> : null}
+          <Text>{label}</Text>
+          <Image systemName={iosSymbol(suffixIcon!)} color={iconColor} size={SIZE_ICON[size]}/>
+        </HStack>
+      </SwiftUIButton>
+    );
+  }
+
+  return (
+    <SwiftUIButton
+      label={label}
+      role={role === 'destructive' ? 'destructive' : 'default'}
+      systemImage={prefixIcon ? iosSymbol(prefixIcon) : undefined}
+      modifiers={modifiers}
+      onPress={onPress}
+      testID={testID}
+    />
+  );
+}

package/src/button/index.tsx

@@ -0,0 +1,75 @@
+import './button.css';
+import type {CSSProperties} from 'react';
+import type {ButtonProps} from './types';
+import {SymbolView} from 'expo-symbols';
+import {onAccent as contrastOf} from '../accent';
+import {useColor} from '../theme';
+import {SIZE_ICON} from './shared';
+
+/**
+ * On web the button is a real `<button>` element styled via `button.css`, so it
+ * reads as a native web control rather than a ported Android/Material button.
+ * The accent color is passed through the `--ui-button-accent` custom property.
+ */
+export function Button({
+  label,
+  onPress,
+  variant = 'filled',
+  role = 'default',
+  size = 'medium',
+  color,
+  shape,
+  prefixIcon,
+  suffixIcon,
+  hideLabel = false,
+  disabled = false,
+  testID,
+}: ButtonProps) {
+  const themeTint = useColor('tint');
+  const destructive = useColor('destructive');
+  const themeOnAccent = useColor(role === 'destructive' ? 'onDestructive' : 'onTint');
+  const accent = color ?? (role === 'destructive' ? destructive : themeTint);
+  // A custom accent brings its own contrast color for filled content.
+  const onAccent = color ? contrastOf(color) : themeOnAccent;
+  const iconOnly = hideLabel && !!prefixIcon;
+  const iconSize = SIZE_ICON[size];
+  const style = color
+    ? ({'--ui-button-accent': color, '--ui-button-on-accent': onAccent} as CSSProperties)
+    : undefined;
+  const className = [
+    'ui-button',
+    `ui-button--${variant}`,
+    `ui-button--${size}`,
+    shape && `ui-button--${shape}`,
+    !shape && 'ui-button--pill',
+    iconOnly && 'ui-button--icon-only',
+    role === 'destructive' && 'ui-button--destructive',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type="button"
+      style={style}
+      className={className}
+      disabled={disabled}
+      onClick={onPress}
+      data-testid={testID}
+      aria-label={iconOnly ? label : undefined}>
+      {prefixIcon ? (
+        <SymbolView
+          name={prefixIcon.symbol}
+          size={iconSize}
+          tintColor={variant === 'filled' ? onAccent : accent}
+        />
+      ) : null}
+      {!iconOnly ? <span className="ui-button__label">{label}</span> : null}
+      {suffixIcon && !iconOnly ? (
+        <SymbolView
+          name={suffixIcon.symbol}
+          size={iconSize}
+          tintColor={variant === 'filled' ? onAccent : accent}
+        />
+      ) : null}
+    </button>
+  );
+}

package/src/button/shared.ts

@@ -0,0 +1,42 @@
+import type {IconToken} from '../icons';
+import type {SFSymbol} from 'expo-symbols';
+import type {ButtonShape, ButtonSize} from './types';
+
+export const ICON_GAP = 8;
+
+export const SIZE_ICON: Record<ButtonSize, number> = {
+  small: 16,
+  medium: 18,
+  large: 20,
+};
+
+export const SIZE_TEXT: Record<ButtonSize, number> = {
+  small: 13,
+  medium: 15,
+  large: 17,
+};
+
+export function iosSymbol(token: IconToken): SFSymbol {
+  const {symbol} = token;
+  if (typeof symbol === 'string') return symbol;
+  return symbol.ios ?? 'questionmark';
+}
+
+export function swiftControlSize(size: ButtonSize) {
+  return ({small: 'small', medium: 'regular', large: 'large'} as const)[size];
+}
+
+export function swiftBorderShape(shape: ButtonShape) {
+  return ({rounded: 'roundedRectangle', pill: 'capsule', circle: 'circle'} as const)[shape];
+}
+
+export function androidContentPadding(size: ButtonSize, hasIcon = false) {
+  switch (size) {
+    case 'small':
+      return {start: hasIcon ? 12 : 16, top: 6, end: 16, bottom: 6};
+    case 'medium':
+      return {start: hasIcon ? 16 : 24, top: 10, end: 24, bottom: 10};
+    case 'large':
+      return {start: hasIcon ? 20 : 28, top: 14, end: 28, bottom: 14};
+  }
+}

package/src/button/types.ts

@@ -0,0 +1,72 @@
+import type {IconToken} from '../icons';
+
+/**
+ * Cross-platform button.
+ *
+ * Bridges the SwiftUI `Button` on iOS, the Jetpack Compose Material 3 buttons on
+ * Android, and the HTML `<button>` element on web. The prop surface is the
+ * intersection of what every platform supports, so the same component renders a
+ * native-feeling button everywhere.
+ *
+ * Variants map to each platform's closest native equivalent:
+ *
+ * | variant    | iOS `buttonStyle`   | Android component     | web              |
+ * | ---------- | ------------------- | --------------------- | ---------------- |
+ * | `filled`   | `borderedProminent` | `Button`              | solid fill       |
+ * | `outlined` | `bordered`          | `OutlinedButton`      | border, no fill  |
+ * | `text`     | `plain`             | `TextButton`          | text only        |
+ */
+export type ButtonVariant = 'filled' | 'outlined' | 'text';
+
+/**
+ * Semantic role of the button. `destructive` renders the button in a danger
+ * color (SwiftUI button role, Material error color, web danger styling).
+ */
+export type ButtonRole = 'default' | 'destructive';
+
+/** Control size of the button. */
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+/** Border shape of the button. */
+export type ButtonShape = 'rounded' | 'pill' | 'circle';
+
+export interface ButtonProps {
+  /**
+   * Text shown inside the button. Required for accessibility even when
+   * `hideLabel` is true (icon-only mode).
+   */
+  label: string;
+  /** Called when the button is pressed. */
+  onPress?: () => void;
+  /**
+   * Visual emphasis of the button.
+   * @default 'filled'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Semantic role of the button.
+   * @default 'default'
+   */
+  role?: ButtonRole;
+  /** Accent color (tint) for the button. Defaults to the platform/theme tint. */
+  color?: string;
+  /**
+   * Control size of the button.
+   * @default 'medium'
+   */
+  size?: ButtonSize;
+  /**
+   * Border shape of the button. When omitted, each platform uses its default.
+   */
+  shape?: ButtonShape;
+  /** Leading icon. Also used as the sole icon when `hideLabel` is true. */
+  prefixIcon?: IconToken;
+  /** Trailing icon. Ignored when `hideLabel` is true. */
+  suffixIcon?: IconToken;
+  /** Show only the prefix icon; `label` is kept for accessibility. */
+  hideLabel?: boolean;
+  /** Disables interaction and dims the button. */
+  disabled?: boolean;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/css.d.ts

@@ -0,0 +1,2 @@
+// Side-effect CSS imports (resolved by Expo's Metro on web, no-ops on native).
+declare module '*.css';

package/src/date-time/index.android.tsx

@@ -0,0 +1,108 @@
+import type {DateTimePickerProps} from './types';
+
+import {useState} from 'react';
+import {useMaterialColors, Row, Text, Column, DatePickerDialog, TimePickerDialog} from '@expo/ui/jetpack-compose';
+import {clip, Shapes, padding, clickable, background, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+import {formatValue, useDateValue, withDatePart, withTimePart} from './shared';
+
+/**
+ * Android has no inline date+time control, so the row shows the same iOS-style
+ * pill as web — built with Jetpack Compose primitives so it lives natively
+ * inside the surrounding `Host`/`FieldGroup`. Pressing the pill opens a
+ * Material date dialog and then, for `datetime` mode, a time dialog. Each
+ * dialog mounts on demand and unmounts once it reports a value or is dismissed.
+ */
+export function DateTimePicker({
+  label,
+  value,
+  onChange,
+  mode = 'datetime',
+  minimumDate,
+  maximumDate,
+  disabled,
+  accentColor,
+}: DateTimePickerProps) {
+  const [current, setValue] = useDateValue(value, onChange);
+  const [stage, setStage] = useState<'idle' | 'date' | 'time'>('idle');
+  const [draft, setDraft] = useState<Date | null>(null);
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  // The dialogs are tinted with the live accent seed by default so they
+  // follow a user-supplied accent even when the native host is not seeded.
+  const dialogColor = accentColor ?? tint;
+  const labelColor = disabled ? colors.onSurfaceVariant : colors.onSurface;
+  const valueColor = disabled ? colors.onSurfaceVariant : (accentColor ?? colors.onSurface);
+  const selectableDates = minimumDate || maximumDate ? {start: minimumDate, end: maximumDate} : undefined;
+
+  const open = () => {
+    setStage(mode === 'time' ? 'time' : 'date');
+  };
+
+  const handleDate = (picked: Date) => {
+    const next = withDatePart(current, picked);
+    if (mode === 'datetime') {
+      setDraft(next);
+      setStage('time');
+    } else {
+      setValue(next);
+      setStage('idle');
+    }
+  };
+
+  const handleTime = (picked: Date) => {
+    setValue(withTimePart(draft ?? current, picked));
+    setDraft(null);
+    setStage('idle');
+  };
+
+  const dismissDate = () => {
+    setStage('idle');
+  };
+
+  const dismissTime = () => {
+    if (draft) {
+      setValue(draft);
+      setDraft(null);
+    }
+    setStage('idle');
+  };
+
+  return (
+    <Column modifiers={[fillMaxWidth()]}>
+      <Row
+        verticalAlignment="center"
+        horizontalArrangement="spaceBetween"
+        modifiers={[fillMaxWidth()]}>
+        {label != null ? <Text color={labelColor}>{label}</Text> : null}
+        <Text
+          color={valueColor}
+          modifiers={[
+            clip(Shapes.RoundedCorner(8)),
+            background(colors.surfaceContainerHighest),
+            ...(disabled ? [] : [clickable(open)]),
+            padding(12, 6, 12, 6),
+          ]}>
+          {formatValue(current, mode)}
+        </Text>
+      </Row>
+      {stage === 'date' && (
+        <DatePickerDialog
+          initialDate={(draft ?? current).toISOString()}
+          color={dialogColor}
+          selectableDates={selectableDates}
+          onDateSelected={handleDate}
+          onDismissRequest={dismissDate}
+        />
+      )}
+      {stage === 'time' && (
+        <TimePickerDialog
+          initialDate={(draft ?? current).toISOString()}
+          color={dialogColor}
+          onDateSelected={handleTime}
+          onDismissRequest={dismissTime}
+        />
+      )}
+    </Column>
+  );
+}

package/src/date-time/index.ios.tsx

@@ -0,0 +1,54 @@
+import type {DateTimeMode, DateTimePickerProps} from './types';
+import type {DatePickerComponent} from '@expo/ui/swift-ui';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {DatePicker} from '@expo/ui/swift-ui';
+import {datePickerStyle, tint, disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+import {useDateValue} from './shared';
+
+/**
+ * iOS renders the picker inline using SwiftUI's compact `DatePicker`, which is
+ * exactly the rounded-pill row look the other platforms emulate. Drop it
+ * straight into a `FieldGroup.Section` alongside other rows.
+ */
+export function DateTimePicker({
+  label,
+  value,
+  onChange,
+  mode = 'datetime',
+  minimumDate,
+  maximumDate,
+  disabled,
+  accentColor,
+  testID,
+}: DateTimePickerProps) {
+  const [current, setValue] = useDateValue(value, onChange);
+  const modifiers: ViewModifier[] = [datePickerStyle('compact')];
+
+  if (accentColor) modifiers.push(tint(accentColor));
+  if (disabled != null) modifiers.push(disabledMod(disabled));
+
+  return (
+    <DatePicker
+      title={label}
+      selection={current}
+      onDateChange={setValue}
+      displayedComponents={modeToComponents(mode)}
+      range={minimumDate || maximumDate ? {start: minimumDate, end: maximumDate} : undefined}
+      modifiers={modifiers}
+      testID={testID}
+    />
+  );
+}
+
+function modeToComponents(mode: DateTimeMode): DatePickerComponent[] {
+  switch (mode) {
+    case 'time':
+      return ['hourAndMinute'];
+    case 'datetime':
+      return ['date', 'hourAndMinute'];
+    case 'date':
+    default:
+      return ['date'];
+  }
+}

package/src/date-time/index.tsx

@@ -0,0 +1,119 @@
+import type {ChangeEvent, CSSProperties, MouseEvent} from 'react';
+import type {DateTimePickerProps} from './types';
+
+import {Pressable, StyleSheet, View} from 'react-native';
+import {Label} from '../typography';
+import {theme} from '../theme';
+import {formatValue, inputType, parseInputValue, toInputValue, useDateValue} from './shared';
+
+/**
+ * On web the row mirrors the native iOS/Android pill: a label on the leading
+ * edge and a rounded pill showing the value, with a transparent native
+ * `<input>` layered on top. Clicking the pill opens the browser's built-in
+ * date/time picker.
+ */
+export function DateTimePicker({
+  label,
+  value,
+  onChange,
+  mode = 'datetime',
+  minimumDate,
+  maximumDate,
+  disabled,
+  accentColor,
+  testID,
+  style,
+}: DateTimePickerProps) {
+  const [current, setValue] = useDateValue(value, onChange);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const next = parseInputValue(event.target.value, mode, current);
+    if (next) setValue(next);
+  };
+
+  const openPicker = (event: MouseEvent<HTMLInputElement>) => {
+    event.currentTarget.showPicker();
+  };
+
+  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-colored value — iOS's compact DatePicker pill uses the
+            primary label color (unlike the menu Picker's gray value). */}
+        <Label
+          color="label"
+          style={[styles.value, accentColor != null && {color: accentColor}]}>
+          {formatValue(current, mode)}
+        </Label>
+        <input
+          type={inputType(mode)}
+          value={toInputValue(current, mode)}
+          min={minimumDate ? toInputValue(minimumDate, mode) : undefined}
+          max={maximumDate ? toInputValue(maximumDate, mode) : undefined}
+          disabled={disabled}
+          aria-label={label ?? 'Select date'}
+          onChange={handleChange}
+          onClick={openPicker}
+          style={{...overlayStyle, cursor: disabled ? 'default' : 'pointer'}}
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    width: '100%',
+  },
+  label: {
+    flexShrink: 1,
+  },
+  pill: {
+    position: 'relative',
+    flexShrink: 0,
+    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 picker popup derives its colors from the input'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)',
+};