expo-interface 0.1.0 → 0.1.1

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,61 @@
+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 (!dialog) return;
+    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/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.
@@ -24,7 +36,9 @@ export function Button({
   hideLabel = false,
   disabled = false,
   testID,
-}: ButtonProps) {
+  popoverTarget,
+  popoverTargetAction,
+}: WebButtonProps) {
   const themeTint = useColor('tint');
   const destructive = useColor('destructive');
   const themeOnAccent = useColor(role === 'destructive' ? 'onDestructive' : 'onTint');
@@ -53,6 +67,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/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) ?? undefined) as TextStyle | undefined),
+  } 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;
+}

package/src/collapsible/index.android.tsx

@@ -0,0 +1,34 @@
+import type {CollapsibleProps} from './types';
+
+import {Collapsible as UICollapsible} from '@expo/ui';
+import {Column} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+import {useExpanded} from './shared';
+
+/**
+ * Android renders `@expo/ui`'s universal `Collapsible`, which is already the
+ * Material 3 Expressive expandable list item (rounded card whose container
+ * tints from transparent to `surfaceContainer` while open, animated chevron).
+ * It reads the seeded Host palette, so it matches the rest of the screen.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const labelColor = useColor('label');
+  const collapsible = (
+    <UICollapsible isOpen={open} onOpenChange={setOpen} label={label} labelStyle={{color: labelColor}}>
+      {children}
+    </UICollapsible>
+  );
+  // `@expo/ui`'s universal Collapsible takes no testID, so a full-width
+  // Compose wrapper carries it.
+  if (testID == null) return collapsible;
+  return <Column modifiers={[fillMaxWidth(), testIDModifier(testID)]}>{collapsible}</Column>;
+}

package/src/collapsible/index.ios.tsx

@@ -0,0 +1,31 @@
+import type {CollapsibleProps} from './types';
+
+import {DisclosureGroup, Text} from '@expo/ui/swift-ui';
+import {foregroundStyle} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+import {useExpanded} from './shared';
+
+/**
+ * iOS renders SwiftUI's `DisclosureGroup`: a row with the label and a
+ * trailing chevron that rotates open, with the content revealed below. Drop
+ * it straight into a `FieldGroup.Section`.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const labelColor = useColor('label');
+  return (
+    <DisclosureGroup isExpanded={open} onIsExpandedChange={setOpen} testID={testID}>
+      <DisclosureGroup.Label>
+        <Text modifiers={[foregroundStyle(labelColor)]}>{label}</Text>
+      </DisclosureGroup.Label>
+      {children}
+    </DisclosureGroup>
+  );
+}

package/src/collapsible/index.tsx

@@ -0,0 +1,41 @@
+import './collapsible.css';
+import type {SyntheticEvent} from 'react';
+import type {CollapsibleProps} from './types';
+import {Label} from '../typography';
+import {useExpanded} from './shared';
+
+/**
+ * On web the disclosure is a real `<details>` element: the header is its
+ * `<summary>` with a trailing chevron that rotates while open, mirroring the
+ * iOS `DisclosureGroup` row.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const onToggle = (event: SyntheticEvent<HTMLDetailsElement>) => {
+    const next = event.currentTarget.open;
+    if (next === open) return;
+    // Controlled: snap the DOM back to the prop so `expanded` stays the
+    // source of truth — React re-applies the parent's decision on the next
+    // render, or the element stays put when the change was ignored.
+    if (expanded !== undefined) event.currentTarget.open = open;
+    setOpen(next);
+  };
+  return (
+    <details className="ui-collapsible" open={open} onToggle={onToggle} data-testid={testID}>
+      <summary className="ui-collapsible__summary">
+        <Label color="label" style={{flexShrink: 1}}>{label}</Label>
+        <svg className="ui-collapsible__chevron" width="8" height="14" viewBox="0 0 8 14" fill="none" aria-hidden="true">
+          <path d="M1.5 1.5 L6.5 7 L1.5 12.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </summary>
+      <div className="ui-collapsible__content">{children}</div>
+    </details>
+  );
+}

package/src/collapsible/shared.ts

@@ -0,0 +1,21 @@
+import {useCallback, useState} from 'react';
+
+/**
+ * Bridges controlled and uncontrolled expansion, mirroring `useSelectedValue`.
+ */
+export function useExpanded(
+  expanded: boolean | undefined,
+  defaultExpanded: boolean,
+  onChange: ((expanded: boolean) => void) | undefined,
+): [boolean, (next: boolean) => void] {
+  const [internal, setInternal] = useState(defaultExpanded);
+  const current = expanded ?? internal;
+  const setExpanded = useCallback(
+    (next: boolean) => {
+      if (expanded === undefined) setInternal(next);
+      onChange?.(next);
+    },
+    [expanded, onChange],
+  );
+  return [current, setExpanded];
+}