expo-interface 0.1.0 → 0.2.0

package/src/alert/index.android.tsx

@@ -0,0 +1,68 @@
+import type {AlertProps} from './types';
+
+import {AlertDialog, Column, Row, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {Button} from '../button';
+import {useColor} from '../theme';
+import {DEFAULT_ACTIONS, splitActions} from './shared';
+
+/**
+ * Android renders the Material 3 `AlertDialog` while `visible`. The dialog
+ * has two button slots: the `cancel` action takes the dismiss slot and the
+ * remaining actions share the confirm slot as a row of text buttons (a
+ * column with `sheet`, mirroring the stacked iOS action sheet). Buttons are
+ * tinted with the live accent seed so they follow a user-supplied accent even
+ * when the native host is not seeded.
+ */
+export function Alert({title, message, visible, onDismiss, actions = DEFAULT_ACTIONS, sheet, children, testID}: AlertProps) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  const {cancel, others} = splitActions(actions);
+  const Actions = sheet ? Column : Row;
+  const press = (action: {onPress?: () => void}) => () => {
+    action.onPress?.();
+    onDismiss?.();
+  };
+
+  return (
+    <>
+      {children}
+      {visible ? (
+        <AlertDialog
+          onDismissRequest={onDismiss}
+          colors={{containerColor: colors.surfaceContainerHigh}}
+          modifiers={testID ? [testIDModifier(testID)] : undefined}>
+          <AlertDialog.Title>
+            <Text color={colors.onSurface} style={{typography: 'headlineSmall'}}>{title}</Text>
+          </AlertDialog.Title>
+          {message ? (
+            <AlertDialog.Text>
+              <Text color={colors.onSurfaceVariant} style={{typography: 'bodyMedium'}}>{message}</Text>
+            </AlertDialog.Text>
+          ) : null}
+          {others.length > 0 ? (
+            <AlertDialog.ConfirmButton>
+              <Actions>
+                {others.map((action, index) => (
+                  <Button
+                    key={index}
+                    label={action.label}
+                    variant="text"
+                    color={action.role === 'destructive' ? undefined : tint}
+                    role={action.role === 'destructive' ? 'destructive' : 'default'}
+                    onPress={press(action)}
+                  />
+                ))}
+              </Actions>
+            </AlertDialog.ConfirmButton>
+          ) : null}
+          {cancel ? (
+            <AlertDialog.DismissButton>
+              <Button label={cancel.label} variant="text" color={tint} onPress={press(cancel)}/>
+            </AlertDialog.DismissButton>
+          ) : null}
+        </AlertDialog>
+      ) : null}
+    </>
+  );
+}

package/src/alert/index.ios.tsx

@@ -0,0 +1,47 @@
+import type {AlertProps} from './types';
+
+import {Alert as SwiftUIAlert, Button, ConfirmationDialog, Spacer, Text} from '@expo/ui/swift-ui';
+import {frame} from '@expo/ui/swift-ui/modifiers';
+import {DEFAULT_ACTIONS} from './shared';
+
+/**
+ * iOS renders SwiftUI's `Alert`, or `ConfirmationDialog` (the action sheet)
+ * with `sheet`. SwiftUI presents from a view in the hierarchy, so the trigger
+ * slot holds `children` or, when none is given, a zero-size `Spacer` anchor.
+ * Action buttons carry their SwiftUI role (`cancel` bold / `destructive` red)
+ * and dismiss automatically; the presented-state change then reports
+ * `onDismiss`.
+ */
+export function Alert({title, message, visible, onDismiss, actions = DEFAULT_ACTIONS, sheet, children, testID}: AlertProps) {
+  const Component = sheet ? ConfirmationDialog : SwiftUIAlert;
+  const onPresentedChange = (presented: boolean) => {
+    if (!presented) onDismiss?.();
+  };
+  return (
+    <Component
+      title={title}
+      isPresented={visible}
+      onIsPresentedChange={onPresentedChange}
+      testID={testID}
+      {...(sheet ? {titleVisibility: 'visible' as const} : null)}>
+      <Component.Trigger>
+        {children ?? <Spacer modifiers={[frame({width: 0, height: 0})]}/>}
+      </Component.Trigger>
+      {message ? (
+        <Component.Message>
+          <Text>{message}</Text>
+        </Component.Message>
+      ) : null}
+      <Component.Actions>
+        {actions.map((action, index) => (
+          <Button
+            key={index}
+            label={action.label}
+            role={action.role ?? 'default'}
+            onPress={action.onPress}
+          />
+        ))}
+      </Component.Actions>
+    </Component>
+  );
+}

package/src/alert/index.tsx

@@ -0,0 +1,60 @@
+import './alert.css';
+import type {SyntheticEvent} from 'react';
+import type {AlertProps} from './types';
+import {useEffect, useRef} from 'react';
+import {Button} from '../button';
+import {Body, Headline} from '../typography';
+import {DEFAULT_ACTIONS, splitActions} from './shared';
+
+/**
+ * On web the alert is a real `<dialog>` opened with `showModal()`, so it sits
+ * in the top layer with a backdrop, traps focus, and closes on Escape.
+ * Actions render as the kit's text buttons; `sheet` anchors the dialog to
+ * the bottom edge with the actions stacked, like an iOS action sheet.
+ */
+export function Alert({title, message, visible, onDismiss, actions = DEFAULT_ACTIONS, sheet, children, testID}: AlertProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const {cancel, others} = splitActions(actions);
+
+  useEffect(() => {
+    const dialog = ref.current!;
+    if (visible && !dialog.open) dialog.showModal();
+    else if (!visible && dialog.open) dialog.close();
+  }, [visible]);
+
+  const onBackdrop = (event: SyntheticEvent<HTMLDialogElement, MouseEvent>) => {
+    if (event.target === ref.current) ref.current?.close();
+  };
+
+  return (
+    <>
+      {children}
+      <dialog
+        ref={ref}
+        className={['ui-alert', sheet && 'ui-alert--sheet'].filter(Boolean).join(' ')}
+        aria-label={title}
+        onClose={onDismiss}
+        onClick={onBackdrop}
+        data-testid={testID}>
+        <div className="ui-alert__body">
+          <Headline testID={testID ? `${testID}-title` : undefined}>{title}</Headline>
+          {message ? <Body color="secondaryLabel">{message}</Body> : null}
+        </div>
+        <div className="ui-alert__actions">
+          {[...others, ...(cancel ? [cancel] : [])].map((action, index) => (
+            <Button
+              key={index}
+              label={action.label}
+              variant={sheet ? 'outlined' : 'text'}
+              role={action.role === 'destructive' ? 'destructive' : 'default'}
+              onPress={() => {
+                action.onPress?.();
+                ref.current?.close();
+              }}
+            />
+          ))}
+        </div>
+      </dialog>
+    </>
+  );
+}

package/src/alert/shared.ts

@@ -0,0 +1,10 @@
+import type {AlertAction} from './types';
+
+export const DEFAULT_ACTIONS: AlertAction[] = [{label: 'OK', role: 'cancel'}];
+
+/** Splits actions into the cancel action (at most one) and the rest. */
+export function splitActions(actions: AlertAction[] = DEFAULT_ACTIONS) {
+  const cancel = actions.find(action => action.role === 'cancel');
+  const others = actions.filter(action => action !== cancel);
+  return {cancel, others};
+}

package/src/alert/types.ts

@@ -0,0 +1,58 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Semantic role of an alert action. `cancel` is the dismissive action (bold
+ * on iOS, the dismiss slot on Android); `destructive` is rendered in the
+ * danger color.
+ */
+export type AlertActionRole = 'default' | 'cancel' | 'destructive';
+
+export interface AlertAction {
+  /** Button text. */
+  label: string;
+  /**
+   * Role of the action.
+   * @default 'default'
+   */
+  role?: AlertActionRole;
+  /** Called when the action is pressed; the alert then closes. */
+  onPress?: () => void;
+}
+
+/**
+ * Cross-platform alert dialog.
+ *
+ * Bridges the SwiftUI `Alert` (or `ConfirmationDialog` action sheet with
+ * `sheet`) on iOS, the Jetpack Compose Material 3 `AlertDialog` on Android,
+ * and the HTML `<dialog>` element on web. Presentation is controlled: set
+ * `visible` and clear it from `onDismiss`, which fires whenever the alert
+ * closes — after any action, or when the user dismisses it.
+ */
+export interface AlertProps {
+  /** Title shown at the top of the alert. */
+  title: string;
+  /** Optional body text under the title. */
+  message?: string;
+  /** Whether the alert is presented. */
+  visible: boolean;
+  /** Called when the alert closes for any reason. */
+  onDismiss?: () => void;
+  /**
+   * Buttons shown in the alert.
+   * @default [{label: 'OK', role: 'cancel'}]
+   */
+  actions?: AlertAction[];
+  /**
+   * Present as an action sheet (iOS `confirmationDialog`, bottom-anchored on
+   * web) with actions stacked vertically, instead of a centered alert.
+   */
+  sheet?: boolean;
+  /**
+   * Optional trigger rendered in place (for example the `Button` that opens
+   * the alert). SwiftUI presents alerts from a view in the hierarchy, so on
+   * iOS an invisible zero-size anchor is used when no trigger is given.
+   */
+  children?: ReactNode;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/button/button.css

@@ -6,6 +6,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Hug the content even inside a flex column that stretches its children. */
+  width: fit-content;
   border-radius: 999px;
   border: 1px solid transparent;
   padding: 10px 18px;
@@ -90,6 +92,10 @@
   padding-inline: 14px;
 }
 
+.ui-button--fill {
+  width: 100%;
+}
+
 .ui-button--destructive {
   --ui-button-accent: var(--color-destructive);
   --ui-button-on-accent: var(--color-on-destructive);

package/src/button/index.android.tsx

@@ -1,5 +1,5 @@
 import type {ButtonProps, ButtonShape, ButtonVariant} from './types';
-import {testID as testIDModifier, width} from '@expo/ui/jetpack-compose/modifiers';
+import {fillMaxWidth, testID as testIDModifier, width, wrapContentHeight, wrapContentWidth} from '@expo/ui/jetpack-compose/modifiers';
 import {Button as ComposeButton, OutlinedButton, TextButton, Icon, IconButton, FilledIconButton, OutlinedIconButton, Spacer, Shape, Text} from '@expo/ui/jetpack-compose';
 import {SIZE_ICON, SIZE_TEXT, androidContentPadding} from './shared';
 import {onAccent as contrastOf} from '../accent';
@@ -47,6 +47,7 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled,
+  fillWidth = false,
   testID,
 }: ButtonProps) {
   const themeTint = useColor('tint');
@@ -63,7 +64,13 @@ export function Button({
   const iconSize = SIZE_ICON[size];
   const textSize = SIZE_TEXT[size];
   const resolvedShape = resolveShape(shape);
-  const modifiers = testID ? [testIDModifier(testID)] : [];
+  // A `Host` measures a direct child with its own (tight) constraints, which
+  // a Compose button would fill on both axes; wrap to the content instead.
+  const modifiers = [
+    fillWidth ? fillMaxWidth() : wrapContentWidth('start'),
+    wrapContentHeight('top'),
+  ];
+  if (testID) modifiers.push(testIDModifier(testID));
   const iconOnly = hideLabel && !!prefixIcon?.drawable;
 
   if (iconOnly) {

package/src/button/index.ios.tsx

@@ -4,6 +4,7 @@ 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 {fillWidth as fillWidthModifiers} from '../fill';
 import {useColor} from '../theme';
 
 const VARIANT_STYLE: Record<ButtonVariant, 'borderedProminent' | 'bordered' | 'plain'> = {
@@ -29,6 +30,7 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled,
+  fillWidth = false,
   testID,
 }: ButtonProps) {
   const themeTint = useColor('tint');
@@ -49,17 +51,20 @@ export function Button({
   if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
   if (disabled) modifiers.push(disabledMod(true));
   if (iconOnly) modifiers.push(labelStyle('iconOnly'));
-  if (hasSuffix) {
+  // SwiftUI has no trailing-icon `Label`, and a bordered style only paints
+  // behind the label, so both cases compose the label by hand: the frame
+  // that fills the width goes on the label, not the button.
+  if ((hasSuffix || fillWidth) && !iconOnly) {
     return (
       <SwiftUIButton
         role={role === 'destructive' ? 'destructive' : 'default'}
         onPress={onPress}
         modifiers={modifiers}
         testID={testID}>
-        <HStack spacing={ICON_GAP}>
+        <HStack spacing={ICON_GAP} modifiers={fillWidth ? fillWidthModifiers : undefined}>
           {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]}/>
+          {hasSuffix ? <Image systemName={iosSymbol(suffixIcon!)} color={iconColor} size={SIZE_ICON[size]}/> : null}
         </HStack>
       </SwiftUIButton>
     );

package/src/button/index.tsx

@@ -6,6 +6,18 @@ import {onAccent as contrastOf} from '../accent';
 import {useColor} from '../theme';
 import {SIZE_ICON} from './shared';
 
+/** Web-only additions: hook the button up to a native `popover` element. */
+interface WebButtonProps extends ButtonProps {
+  /**
+   * `id` of a `[popover]` element this button toggles (the `popovertarget`
+   * attribute). The browser then manages open/close, `aria-expanded` and
+   * light-dismiss without JavaScript.
+   */
+  popoverTarget?: string;
+  /** @default 'toggle' */
+  popoverTargetAction?: 'toggle' | 'show' | 'hide';
+}
+
 /**
  * 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.
@@ -23,8 +35,11 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled = false,
+  fillWidth = false,
   testID,
-}: ButtonProps) {
+  popoverTarget,
+  popoverTargetAction,
+}: WebButtonProps) {
   const themeTint = useColor('tint');
   const destructive = useColor('destructive');
   const themeOnAccent = useColor(role === 'destructive' ? 'onDestructive' : 'onTint');
@@ -44,6 +59,7 @@ export function Button({
     !shape && 'ui-button--pill',
     iconOnly && 'ui-button--icon-only',
     role === 'destructive' && 'ui-button--destructive',
+    fillWidth && 'ui-button--fill',
   ].filter(Boolean).join(' ');
 
   return (
@@ -53,6 +69,8 @@ export function Button({
       className={className}
       disabled={disabled}
       onClick={onPress}
+      popoverTarget={popoverTarget}
+      popoverTargetAction={popoverTarget ? popoverTargetAction : undefined}
       data-testid={testID}
       aria-label={iconOnly ? label : undefined}>
       {prefixIcon ? (

package/src/button/types.ts

@@ -67,6 +67,13 @@ export interface ButtonProps {
   hideLabel?: boolean;
   /** Disables interaction and dims the button. */
   disabled?: boolean;
+  /**
+   * Stretch the button to its container's full width. By default the button
+   * hugs its content, even when the parent would stretch it (a flex column on
+   * web, a `Host` on Android).
+   * @default false
+   */
+  fillWidth?: boolean;
   /** Identifier used to locate the component in end-to-end tests. */
   testID?: string;
 }

package/src/checkbox/checkbox.css

@@ -0,0 +1,29 @@
+.ui-checkbox {
+  --ui-checkbox-accent: var(--color-tint);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-checkbox__input {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  cursor: pointer;
+  accent-color: var(--ui-checkbox-accent);
+}
+
+.ui-checkbox--disabled,
+.ui-checkbox__input:disabled {
+  cursor: default;
+}
+
+.ui-checkbox--disabled {
+  opacity: 0.4;
+}

package/src/checkbox/index.android.tsx

@@ -0,0 +1,54 @@
+import type {CheckboxProps} from './types';
+
+import {Checkbox as ComposeCheckbox, Row, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier, toggleable} from '@expo/ui/jetpack-compose/modifiers';
+import {onAccent} from '../accent';
+import {useColor} from '../theme';
+
+/**
+ * Android renders the Material 3 `Checkbox`. The row fills the available
+ * width and pins the box to the trailing edge, mirroring the iOS Form row,
+ * and the checked state is colored with the live accent seed so it matches
+ * the iOS glyph and the web `accent-color` — including inside sheets whose
+ * native host is not seeded.
+ */
+export function Checkbox({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: CheckboxProps) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  const accent = accentColor ?? tint;
+  const box = (
+    <ComposeCheckbox
+      value={value}
+      onCheckedChange={disabled ? undefined : onValueChange}
+      enabled={!disabled}
+      colors={{
+        checkedColor: accent,
+        checkmarkColor: onAccent(accent),
+        uncheckedColor: colors.onSurfaceVariant,
+      }}
+      modifiers={testID ? [testIDModifier(testID)] : []}
+    />
+  );
+
+  if (label == null) return box;
+
+  return (
+    <Row
+      verticalAlignment="center"
+      horizontalArrangement="spaceBetween"
+      modifiers={[
+        fillMaxWidth(),
+        ...(disabled ? [] : [toggleable(value, () => onValueChange(!value), {role: 'checkbox'})]),
+      ]}>
+      <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      {box}
+    </Row>
+  );
+}

package/src/checkbox/index.ios.tsx

@@ -0,0 +1,50 @@
+import type {CheckboxProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Button, HStack, Image, Spacer, Text} from '@expo/ui/swift-ui';
+import {buttonStyle, disabled as disabledMod, foregroundStyle} from '@expo/ui/swift-ui/modifiers';
+import {fillWidth} from '../fill';
+import {useColor} from '../theme';
+
+const ICON_SIZE = 22;
+
+/**
+ * SwiftUI on iOS has no checkbox control (the `.checkbox` toggle style is
+ * macOS only), so the row is the platform idiom instead: a plain `Button`
+ * holding the label and a tinted `checkmark.square.fill` / `square` glyph
+ * pinned to the trailing edge. The glyph follows the accent seed like the
+ * Host `tint` cascade; `accentColor` overrides it per instance.
+ */
+export function Checkbox({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: CheckboxProps) {
+  const tint = useColor('tint');
+  const labelColor = useColor(disabled ? 'secondaryLabel' : 'label');
+  const modifiers: ViewModifier[] = [buttonStyle('plain')];
+  if (disabled) modifiers.push(disabledMod(true));
+
+  const glyph = (
+    <Image
+      systemName={value ? 'checkmark.square.fill' : 'square'}
+      color={value ? (accentColor ?? tint) : labelColor}
+      size={ICON_SIZE}
+    />
+  );
+
+  return (
+    <Button onPress={() => onValueChange(!value)} modifiers={modifiers} testID={testID}>
+      {label == null ? glyph : (
+        <HStack spacing={8} modifiers={fillWidth}>
+          <Text modifiers={[foregroundStyle(labelColor)]}>{label}</Text>
+          <Spacer/>
+          {glyph}
+        </HStack>
+      )}
+    </Button>
+  );
+}

package/src/checkbox/index.tsx

@@ -0,0 +1,50 @@
+import './checkbox.css';
+import type {CSSProperties} from 'react';
+import type {CheckboxProps} from './types';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {Label} from '../typography';
+import {flatten} from '../theme';
+
+/**
+ * On web the box is a native `<input type="checkbox">` themed through the
+ * `accent-color` CSS property. The whole row is a `<label>`, so clicking the
+ * text toggles the box, and the layout mirrors the native rows: label on the
+ * leading edge, box pinned to the trailing edge.
+ */
+export function Checkbox({
+  label,
+  value,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+  style,
+}: CheckboxProps) {
+  const vars = {
+    ...(accentColor ? {'--ui-checkbox-accent': accentColor} : null),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
+  } as CSSProperties;
+  const input = (
+    <input
+      className="ui-checkbox__input"
+      type="checkbox"
+      checked={value}
+      disabled={disabled}
+      onChange={event => onValueChange(event.target.checked)}
+      data-testid={label == null ? testID : undefined}
+      style={label == null ? vars : undefined}
+    />
+  );
+
+  if (label == null) return input;
+
+  return (
+    <label
+      className={['ui-checkbox', disabled && 'ui-checkbox--disabled'].filter(Boolean).join(' ')}
+      style={vars}
+      data-testid={testID}>
+      <Label color="label" style={{flexShrink: 1}}>{label}</Label>
+      {input}
+    </label>
+  );
+}

package/src/checkbox/types.ts

@@ -0,0 +1,27 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Cross-platform checkbox with a conformed Form-row appearance.
+ *
+ * Bridges a SwiftUI checkmark button on iOS (iOS has no native checkbox
+ * control — a tinted `checkmark.square` glyph is the platform idiom), the
+ * Jetpack Compose Material 3 `Checkbox` on Android, and the HTML
+ * `<input type="checkbox">` element on web. A controlled control: pair
+ * `value` with `onValueChange`.
+ */
+export interface CheckboxProps {
+  /** Label rendered at the leading edge of the row, mirroring an iOS Form row. */
+  label?: string;
+  /** Whether the box is checked. */
+  value: boolean;
+  /** Called when the user toggles the box. */
+  onValueChange: (value: boolean) => void;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Tint applied to the checked box (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 only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/collapsible/collapsible.css

@@ -0,0 +1,32 @@
+.ui-collapsible {
+  width: 100%;
+}
+
+.ui-collapsible__summary {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-collapsible__summary::-webkit-details-marker {
+  display: none;
+}
+
+.ui-collapsible__chevron {
+  flex-shrink: 0;
+  color: var(--color-tertiary-label);
+  transition: transform 0.15s ease;
+}
+
+.ui-collapsible[open] .ui-collapsible__chevron {
+  transform: rotate(90deg);
+}
+
+.ui-collapsible__content {
+  padding-top: 8px;
+}