expo-interface 0.1.0 → 0.2.0

package/src/color-picker/sheet.tsx

@@ -0,0 +1,432 @@
+import type {GestureResponderEvent, LayoutChangeEvent} from 'react-native';
+import type {RGBA} from './shared';
+
+import {useCallback, useState} from 'react';
+import {Pressable, StyleSheet, Text, TextInput, useColorScheme, View} from 'react-native';
+import {Image} from 'expo-image';
+import {fonts, fontWeights, useColor} from '../theme';
+import {
+  checkerSvg,
+  grid,
+  gridColor,
+  parseColor,
+  spectrumColor,
+  spectrumPosition,
+  spectrumSvg,
+  svgDataUri,
+  toCss,
+  toHex,
+  useColorValue,
+} from './shared';
+
+/**
+ * The iOS system color picker (`UIColorPickerViewController`) redrawn with
+ * React Native views, shown in a bottom sheet on Android and web. A title
+ * row with a close button, a Grid / Spectrum / Sliders segmented control, an
+ * opacity slider and a footer with the preview swatch and saved colors.
+ * The spectrum and the checkerboard are static SVGs; the slider tracks are
+ * bands of solid segments, so dragging never decodes an image.
+ */
+export interface ColorPickerSheetProps {
+  /** Title of the picker, the row's label on iOS. */
+  title: string;
+  /** Selected color as `#RRGGBB` or `#RRGGBBAA`. */
+  value: string;
+  /** Shows the opacity slider. */
+  supportsOpacity: boolean;
+  /** Called with the new hex whenever the user picks a color. */
+  onValueChange: (hex: string) => void;
+  /** Called from the close button. */
+  onClose: () => void;
+  /** Fixed content width (Android sizes the hosted React Native tree from its content). */
+  width?: number;
+  /** Identifier used to locate the sheet in end-to-end tests. */
+  testID?: string;
+}
+
+export type ColorPickerTab = 'grid' | 'spectrum' | 'sliders';
+
+const TABS: {value: ColorPickerTab; label: string}[] = [
+  {value: 'grid', label: 'Grid'},
+  {value: 'spectrum', label: 'Spectrum'},
+  {value: 'sliders', label: 'Sliders'},
+];
+
+const SPECTRUM = svgDataUri(spectrumSvg());
+const CHECKER = svgDataUri(checkerSvg());
+const THUMB = 28;
+const TRACK = 36;
+const THUMB_INSET = (TRACK - THUMB) / 2;
+const SEGMENTS = 32;
+const HANDLE = 28;
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+
+/** Colors the user saved with the `+` button, shared by every picker for the session. */
+let savedColors: RGBA[] = [];
+
+const responder = (handler: (x: number, y: number) => void) => ({
+  onStartShouldSetResponder: () => true,
+  onMoveShouldSetResponder: () => true,
+  onResponderTerminationRequest: () => false,
+  onResponderGrant: (event: GestureResponderEvent) => handler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+  onResponderMove: (event: GestureResponderEvent) => handler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+});
+
+export function ColorPickerSheet({title, value, supportsOpacity, onValueChange, onClose, width, testID}: ColorPickerSheetProps) {
+  const [tab, setTab] = useState<ColorPickerTab>('grid');
+  const [color, setColor] = useColorValue(value, onValueChange, supportsOpacity);
+  const [saved, setSaved] = useState(savedColors);
+  const label = useColor('label');
+  const secondary = useColor('secondaryLabel');
+  const fill = useColor('pillBackground');
+  const separator = useColor('separator');
+  const css = toCss(color);
+
+  const save = () => {
+    savedColors = [...savedColors, color];
+    setSaved(savedColors);
+  };
+
+  return (
+    <View style={[styles.sheet, width != null ? {width} : styles.fill]} testID={testID}>
+      <View style={styles.header}>
+        <Text style={[styles.title, {color: label}]} numberOfLines={1} role="heading" accessible>{title}</Text>
+        <Pressable
+          role="button"
+          aria-label="Close"
+          onPress={onClose}
+          style={[styles.close, {backgroundColor: fill}]}>
+          <Text style={[styles.closeGlyph, {color: secondary}]}>✕</Text>
+        </Pressable>
+      </View>
+      <Tabs value={tab} onChange={setTab}/>
+      <View style={styles.section}>
+        {tab === 'grid' ? <Grid color={color} onChange={setColor}/> : null}
+        {tab === 'spectrum' ? <Spectrum color={color} onChange={setColor}/> : null}
+        {tab === 'sliders' ? <Sliders color={color} onChange={setColor}/> : null}
+      </View>
+      {supportsOpacity ? (
+        <View style={styles.section}>
+          <Text style={[styles.caption, {color: secondary}]}>OPACITY</Text>
+          <View style={styles.sliderRow}>
+            <Slider
+              label="Opacity"
+              value={color.a}
+              checkered
+              colorAt={t => toCss({...color, a: t})}
+              onChange={a => setColor({...color, a})}
+            />
+            <Field
+              label="Opacity percent"
+              value={`${Math.round(color.a * 100)}%`}
+              onCommit={text => setColor({...color, a: clamp(parseFloat(text) || 0, 0, 100) / 100})}
+            />
+          </View>
+        </View>
+      ) : null}
+      <View style={[styles.divider, {backgroundColor: separator}]}/>
+      <View style={styles.footer}>
+        <View style={styles.preview} aria-label={`Selected color ${toHex(color, supportsOpacity)}`}>
+          {color.a < 1 ? <Image source={{uri: CHECKER}} style={StyleSheet.absoluteFill} contentFit="cover"/> : null}
+          <View style={[StyleSheet.absoluteFill, {backgroundColor: css}]}/>
+        </View>
+        <View style={styles.saved}>
+          {saved.map((entry, index) => (
+            <Pressable
+              key={`${toHex(entry, true)}-${index}`}
+              role="button"
+              aria-label={`Saved color ${toHex(entry, true)}`}
+              onPress={() => setColor(entry)}
+              style={[styles.swatch, {backgroundColor: toCss(entry)}]}
+            />
+          ))}
+          <Pressable
+            role="button"
+            aria-label="Save color"
+            onPress={save}
+            style={[styles.swatch, {backgroundColor: fill}]}>
+            <Text style={[styles.plus, {color: secondary}]}>+</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Tabs({value, onChange}: {value: ColorPickerTab; onChange: (tab: ColorPickerTab) => void}) {
+  const dark = useColorScheme() === 'dark';
+  const label = useColor('label');
+  const fill = useColor('pillBackground');
+  return (
+    <View style={[styles.tabs, {backgroundColor: fill}]} role="radiogroup" aria-label="Picker">
+      {TABS.map(tab => {
+        const selected = tab.value === value;
+        return (
+          <Pressable
+            key={tab.value}
+            role="radio"
+            aria-label={`${tab.label} tab`}
+            aria-checked={selected}
+            onPress={() => onChange(tab.value)}
+            style={[styles.tab, selected && [styles.tabSelected, {backgroundColor: dark ? '#636366' : '#ffffff'}]]}>
+            <Text style={[styles.tabLabel, {color: label}, selected && styles.tabLabelSelected]}>{tab.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+function Grid({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const rows = Array.from({length: grid.rows}, (_, row) =>
+    Array.from({length: grid.columns}, (_, column) => gridColor(row, column)),
+  );
+  return (
+    <View style={styles.grid}>
+      {rows.map((cells, row) => (
+        <View key={row} style={styles.gridRow}>
+          {cells.map((cell, column) => {
+            const selected = cell.r === color.r && cell.g === color.g && cell.b === color.b;
+            return (
+              <Pressable
+                key={column}
+                role="button"
+                aria-label={`Color ${toHex({...cell, a: 1}, false)}`}
+                aria-selected={selected}
+                onPress={() => onChange({...cell, a: color.a})}
+                style={[styles.gridCell, {backgroundColor: toCss({...cell, a: 1})}]}>
+                {selected ? <View style={styles.gridSelected}/> : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function Spectrum({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const [size, setSize] = useState({width: 0, height: 0});
+  const position = spectrumPosition(color);
+  const pick = (x: number, y: number) => {
+    if (!size.width || !size.height) return;
+    onChange({...spectrumColor(x / size.width, y / size.height), a: color.a});
+  };
+  return (
+    <View
+      {...responder(pick)}
+      role="slider"
+      aria-label="Spectrum"
+      aria-valuetext={toHex(color, false)}
+      onLayout={(event: LayoutChangeEvent) => setSize(event.nativeEvent.layout)}
+      style={styles.spectrum}>
+      <Image source={{uri: SPECTRUM}} style={StyleSheet.absoluteFill} contentFit="fill"/>
+      {size.width > 0 ? (
+        <View
+          pointerEvents="none"
+          style={[
+            styles.handle,
+            {
+              left: clamp(position.x * size.width, HANDLE / 2, size.width - HANDLE / 2) - HANDLE / 2,
+              top: clamp(position.y * size.height, HANDLE / 2, size.height - HANDLE / 2) - HANDLE / 2,
+              backgroundColor: toCss({...color, a: 1}),
+            },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const CHANNELS = ['r', 'g', 'b'] as const;
+const CHANNEL_NAMES = {r: 'Red', g: 'Green', b: 'Blue'} as const;
+
+function Sliders({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const secondary = useColor('secondaryLabel');
+  return (
+    <View style={styles.sliders}>
+      {CHANNELS.map(channel => (
+        <View key={channel}>
+          <Text style={[styles.caption, {color: secondary}]}>{CHANNEL_NAMES[channel].toUpperCase()}</Text>
+          <View style={styles.sliderRow}>
+            <Slider
+              label={CHANNEL_NAMES[channel]}
+              value={color[channel] / 255}
+              colorAt={t => toCss({...color, a: 1, [channel]: t * 255})}
+              onChange={t => onChange({...color, [channel]: Math.round(t * 255)})}
+            />
+            <Field
+              label={`${CHANNEL_NAMES[channel]} value`}
+              value={String(color[channel])}
+              onCommit={text => onChange({...color, [channel]: clamp(Math.round(Number(text)) || 0, 0, 255)})}
+            />
+          </View>
+        </View>
+      ))}
+      <View style={styles.hexRow}>
+        <Text style={[styles.caption, styles.hexCaption, {color: secondary}]}>Display P3 Hex Color #</Text>
+        <Field
+          label="Hex color"
+          value={toHex(color, false).slice(1)}
+          wide
+          onCommit={text => {
+            if (!/^[0-9a-f]{3}$|^[0-9a-f]{6}$/i.test(text)) return;
+            onChange({...parseColor(text), a: color.a});
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+interface SliderProps {
+  label: string;
+  /** Position `0…1`. */
+  value: number;
+  /** Color of the track at a position `0…1`. */
+  colorAt: (t: number) => string;
+  /** Draws a checkerboard under the track (for translucent colors). */
+  checkered?: boolean;
+  onChange: (value: number) => void;
+}
+
+/** A pill track banded with `SEGMENTS` solid colors and a ringed thumb, like the iOS color sliders. */
+function Slider({label, value, colorAt, checkered, onChange}: SliderProps) {
+  const [width, setWidth] = useState(0);
+  // The thumb travels inside the pill, inset by the ring around it.
+  const travel = Math.max(0, width - THUMB - 2 * THUMB_INSET);
+  const pick = (x: number) => {
+    if (!travel) return;
+    onChange(clamp((x - THUMB_INSET - THUMB / 2) / travel, 0, 1));
+  };
+  return (
+    <View
+      {...responder(pick)}
+      role="slider"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(value * 100)}
+      onLayout={(event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width)}
+      style={styles.track}>
+      {checkered ? <Image source={{uri: CHECKER}} style={StyleSheet.absoluteFill} contentFit="cover"/> : null}
+      <View style={styles.band} pointerEvents="none">
+        {Array.from({length: SEGMENTS}, (_, i) => (
+          <View key={i} style={[styles.segment, {backgroundColor: colorAt((i + 0.5) / SEGMENTS)}]}/>
+        ))}
+      </View>
+      {width > 0 ? (
+        <View
+          pointerEvents="none"
+          style={[styles.thumb, {left: THUMB_INSET + value * travel, backgroundColor: colorAt(value)}]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+interface FieldProps {
+  label: string;
+  value: string;
+  wide?: boolean;
+  /** Called with the typed text when editing ends or the return key is pressed. */
+  onCommit: (text: string) => void;
+}
+
+/** Rounded value box that commits when editing ends, like the iOS picker's fields. */
+function Field({label, value, wide, onCommit}: FieldProps) {
+  const [text, setText] = useState(value);
+  // Follow the picked color while the field is not being edited.
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    setText(value);
+  }
+  const fill = useColor('pillBackground');
+  const color = useColor('label');
+  const commit = useCallback(() => onCommit(text), [onCommit, text]);
+  return (
+    <TextInput
+      aria-label={label}
+      value={text}
+      onChangeText={setText}
+      onSubmitEditing={commit}
+      onBlur={commit}
+      selectTextOnFocus
+      style={[styles.field, wide && styles.fieldWide, {backgroundColor: fill, color}]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: {gap: 16},
+  fill: {alignSelf: 'stretch'},
+  header: {height: 44, alignItems: 'center', justifyContent: 'center'},
+  title: {
+    fontFamily: fonts?.sans,
+    fontSize: 17,
+    lineHeight: 22,
+    fontWeight: fontWeights.semibold,
+    marginHorizontal: 40,
+    textAlign: 'center',
+  },
+  close: {position: 'absolute', right: 0, width: 30, height: 30, borderRadius: 15, alignItems: 'center', justifyContent: 'center'},
+  closeGlyph: {fontFamily: fonts?.sans, fontSize: 15, lineHeight: 18, fontWeight: fontWeights.bold},
+  tabs: {flexDirection: 'row', padding: 2, borderRadius: 9},
+  tab: {flex: 1, height: 28, borderRadius: 7, alignItems: 'center', justifyContent: 'center'},
+  tabSelected: {
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04)',
+  },
+  tabLabel: {fontFamily: fonts?.sans, fontSize: 13, lineHeight: 18, fontWeight: fontWeights.medium},
+  tabLabelSelected: {fontWeight: fontWeights.semibold},
+  section: {gap: 8},
+  caption: {fontFamily: fonts?.sans, fontSize: 13, lineHeight: 18, fontWeight: fontWeights.normal, letterSpacing: 0.3},
+  grid: {aspectRatio: grid.columns / grid.rows, borderRadius: 10, overflow: 'hidden'},
+  gridRow: {flex: 1, flexDirection: 'row'},
+  gridCell: {flex: 1},
+  gridSelected: {flex: 1, borderWidth: 3, borderColor: '#ffffff', outlineWidth: 1, outlineColor: 'rgba(0, 0, 0, 0.35)', outlineOffset: -1},
+  spectrum: {aspectRatio: 361 / 337, borderRadius: 10, overflow: 'hidden'},
+  handle: {
+    position: 'absolute',
+    width: HANDLE,
+    height: HANDLE,
+    borderRadius: HANDLE / 2,
+    borderWidth: 3,
+    borderColor: '#ffffff',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.25)',
+  },
+  sliders: {gap: 12},
+  sliderRow: {flexDirection: 'row', alignItems: 'center', gap: 12},
+  track: {flex: 1, height: TRACK, borderRadius: TRACK / 2, overflow: 'hidden'},
+  band: {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, flexDirection: 'row'},
+  segment: {flex: 1},
+  thumb: {
+    position: 'absolute',
+    top: (TRACK - THUMB) / 2,
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    borderWidth: 3,
+    borderColor: '#ffffff',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.25)',
+  },
+  field: {
+    width: 72,
+    height: TRACK,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    fontFamily: fonts?.sans,
+    fontSize: 17,
+    textAlign: 'center',
+  },
+  fieldWide: {width: 112},
+  hexRow: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12},
+  hexCaption: {flexShrink: 1},
+  divider: {height: StyleSheet.hairlineWidth},
+  footer: {flexDirection: 'row', gap: 16},
+  preview: {width: 72, height: 72, borderRadius: 12, overflow: 'hidden'},
+  saved: {flex: 1, flexDirection: 'row', flexWrap: 'wrap', gap: 12, alignContent: 'flex-start'},
+  swatch: {width: 30, height: 30, borderRadius: 15, alignItems: 'center', justifyContent: 'center'},
+  plus: {fontFamily: fonts?.sans, fontSize: 20, lineHeight: 24, fontWeight: fontWeights.medium},
+});

package/src/color-picker/types.ts

@@ -0,0 +1,34 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Cross-platform color picker: a row with a label and a color well that
+ * opens the system color picker.
+ *
+ * Bridges the SwiftUI `ColorPicker` on iOS. Android (Jetpack Compose) and
+ * web (DOM) redraw the iOS row — the label and the rainbow-ringed well — and
+ * open a sheet that reproduces the iOS picker: Grid, Spectrum and Sliders
+ * tabs, the opacity slider and the preview swatch with saved colors.
+ * A controlled control: pair `value` with `onValueChange`.
+ */
+export interface ColorPickerProps {
+  /** Label rendered at the leading edge of the row, and the title of the picker. */
+  label?: string;
+  /** Selected color as `#RRGGBB` or `#RRGGBBAA`. */
+  value: string;
+  /**
+   * Called with the new color whenever the user picks one, as `#RRGGBBAA`
+   * when `supportsOpacity` is on and `#RRGGBB` otherwise.
+   */
+  onValueChange: (value: string) => void;
+  /**
+   * Shows the opacity slider and reports the alpha channel.
+   * @default true
+   */
+  supportsOpacity?: boolean;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the row container (web only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/context-menu/index.android.tsx

@@ -0,0 +1,27 @@
+import type {ContextMenuProps} from '../menu/types';
+
+import {useState} from 'react';
+import {Box, DropdownMenu} from '@expo/ui/jetpack-compose';
+import {combinedClickable, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {MenuItems} from '../menu/index.android';
+
+/**
+ * Android wraps `children` in a `Box` with `combinedClickable`, so a
+ * long-press expands a Material 3 `DropdownMenu` anchored to it while a tap
+ * goes to `onPress`. `children` must be Compose content.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  const [expanded, setExpanded] = useState(false);
+  const modifiers = [
+    ...(disabled ? [] : [combinedClickable({onClick: onPress, onLongClick: () => setExpanded(true)})]),
+    ...(testID ? [testIDModifier(testID)] : []),
+  ];
+  return (
+    <DropdownMenu expanded={expanded} onDismissRequest={() => setExpanded(false)}>
+      <DropdownMenu.Trigger>
+        <Box modifiers={modifiers}>{children}</Box>
+      </DropdownMenu.Trigger>
+      <MenuItems items={items} onClose={() => setExpanded(false)}/>
+    </DropdownMenu>
+  );
+}

package/src/context-menu/index.ios.tsx

@@ -0,0 +1,22 @@
+import type {ContextMenuProps} from '../menu/types';
+
+import {ContextMenu as SwiftUIContextMenu} from '@expo/ui/swift-ui';
+import {onTapGesture} from '@expo/ui/swift-ui/modifiers';
+import {MenuItems} from '../menu/index.ios';
+
+/**
+ * iOS renders SwiftUI's `contextMenu`: a long-press on `children` lifts it
+ * into a preview with the entries beneath. `children` must be SwiftUI
+ * content. A plain tap is passed to `onPress` through `onTapGesture`.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  if (disabled) return <>{children}</>;
+  return (
+    <SwiftUIContextMenu modifiers={onPress ? [onTapGesture(onPress)] : undefined} testID={testID}>
+      <SwiftUIContextMenu.Trigger>{children}</SwiftUIContextMenu.Trigger>
+      <SwiftUIContextMenu.Items>
+        <MenuItems items={items}/>
+      </SwiftUIContextMenu.Items>
+    </SwiftUIContextMenu>
+  );
+}

package/src/context-menu/index.tsx

@@ -0,0 +1,56 @@
+import '../menu/menu.css';
+import type {MouseEvent, PointerEvent} from 'react';
+import type {ContextMenuProps} from '../menu/types';
+import {useId, useRef, useState} from 'react';
+import {MenuList, menuIdent} from '../menu/list';
+
+const LONG_PRESS_MS = 500;
+
+/**
+ * On web the entries live in the same native `popover="auto"` element as
+ * `Menu`, opened with `showPopover()` on right-click (`contextmenu`) or a
+ * touch long-press and placed at the pointer. The browser still owns the top
+ * layer and light dismiss. The wrapper is `display: contents`, so it doesn't
+ * affect the layout of `children`.
+ */
+export function ContextMenu({items, children, onPress, disabled, testID}: ContextMenuProps) {
+  const ident = menuIdent(useId());
+  const popover = useRef<HTMLDivElement>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [position, setPosition] = useState<{x: number; y: number} | null>(null);
+
+  const open = (x: number, y: number) => {
+    setPosition({x, y});
+    const element = popover.current;
+    if (element && !element.matches(':popover-open')) element.showPopover();
+  };
+  const onContextMenu = (event: MouseEvent) => {
+    if (disabled) return;
+    event.preventDefault();
+    open(event.clientX, event.clientY);
+  };
+  const onPointerDown = (event: PointerEvent) => {
+    if (disabled || event.pointerType !== 'touch') return;
+    const {clientX: x, clientY: y} = event;
+    timer.current = setTimeout(() => open(x, y), LONG_PRESS_MS);
+  };
+  const cancelPress = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+
+  return (
+    <div
+      className="ui-context-menu"
+      onContextMenu={onContextMenu}
+      onPointerDown={onPointerDown}
+      onPointerUp={cancelPress}
+      onPointerCancel={cancelPress}
+      onPointerMove={cancelPress}
+      onClick={disabled ? undefined : onPress}
+      data-testid={testID}>
+      {children}
+      <MenuList id={ident} items={items} position={position} popoverRef={popover}/>
+    </div>
+  );
+}

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

@@ -2,7 +2,7 @@ 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 {clip, Shapes, padding, clickable, background, fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
 import {formatValue, useDateValue, withDatePart, withTimePart} from './shared';
 
@@ -22,6 +22,7 @@ export function DateTimePicker({
   maximumDate,
   disabled,
   accentColor,
+  testID,
 }: DateTimePickerProps) {
   const [current, setValue] = useDateValue(value, onChange);
   const [stage, setStage] = useState<'idle' | 'date' | 'time'>('idle');
@@ -69,7 +70,7 @@ export function DateTimePicker({
   };
 
   return (
-    <Column modifiers={[fillMaxWidth()]}>
+    <Column modifiers={[fillMaxWidth(), ...(testID ? [testIDModifier(testID)] : [])]}>
       <Row
         verticalAlignment="center"
         horizontalArrangement="spaceBetween"

package/src/divider/divider.css

@@ -0,0 +1,16 @@
+.ui-divider {
+  --ui-divider-color: var(--color-separator);
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  border: none;
+  background: var(--ui-divider-color);
+}
+
+.ui-divider--vertical {
+  width: 1px;
+  height: auto;
+  min-height: 1em;
+}

package/src/divider/index.android.tsx

@@ -0,0 +1,26 @@
+import type {DividerProps} from './types';
+
+import {StyleSheet} from 'react-native';
+import {HorizontalDivider, VerticalDivider} from '@expo/ui/jetpack-compose';
+import {padding, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+
+/**
+ * Android renders the Material 3 `HorizontalDivider` (or `VerticalDivider`)
+ * as a single-pixel line in the theme `separator` color, matching iOS/web.
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const separator = useColor('separator');
+  const Component = vertical ? VerticalDivider : HorizontalDivider;
+  const modifiers = [
+    ...(inset ? [vertical ? padding(0, inset, 0, 0) : padding(inset, 0, 0, 0)] : []),
+    ...(testID ? [testIDModifier(testID)] : []),
+  ];
+  return (
+    <Component
+      color={color ?? separator}
+      thickness={StyleSheet.hairlineWidth}
+      modifiers={modifiers}
+    />
+  );
+}

package/src/divider/index.ios.tsx

@@ -0,0 +1,18 @@
+import type {DividerProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Divider as SwiftUIDivider} from '@expo/ui/swift-ui';
+import {background, padding} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS renders SwiftUI's `Divider`, which is horizontal inside a `VStack` /
+ * `Form` and vertical inside an `HStack` on its own — `vertical` only picks
+ * the inset axis here, the surrounding stack decides the orientation. A custom
+ * `color` is painted with a `background` modifier (dividers take no tint).
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const modifiers: ViewModifier[] = [];
+  if (inset) modifiers.push(padding(vertical ? {top: inset} : {leading: inset}));
+  if (color) modifiers.push(background(color));
+  return <SwiftUIDivider modifiers={modifiers} testID={testID}/>;
+}

package/src/divider/index.tsx

@@ -0,0 +1,21 @@
+import './divider.css';
+import type {CSSProperties} from 'react';
+import type {DividerProps} from './types';
+
+/**
+ * On web the rule is a real `<hr>` element colored through the
+ * `--ui-divider-color` custom property (the theme `separator` by default).
+ */
+export function Divider({vertical, color, inset, testID}: DividerProps) {
+  const style: Record<string, string | number> = {};
+  if (color) style['--ui-divider-color'] = color;
+  if (inset) style[vertical ? 'marginTop' : 'marginLeft'] = inset;
+  return (
+    <hr
+      className={['ui-divider', vertical && 'ui-divider--vertical'].filter(Boolean).join(' ')}
+      aria-orientation={vertical ? 'vertical' : 'horizontal'}
+      style={style as CSSProperties}
+      data-testid={testID}
+    />
+  );
+}