@appinternalleads/ui 0.2.0

package/src/core/Input.tsx

@@ -0,0 +1,194 @@
+import { useState, type Ref } from 'react';
+import { Platform, TextInput, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { fieldEdge, focusRingFor, radii, type as typeScale, useDs } from '../tokens';
+import { Text, type TextVariant } from './Text';
+
+export type InputProps = {
+  value: string;
+  onChangeText: (next: string) => void;
+  onBlur?: () => void;
+  /**
+   * Enter commits. Named for the intent rather than the platform event, because "submit" is the
+   * same idea on a hardware keyboard, a soft keyboard's return key and a screen reader — and a
+   * field that can only be committed by finding a button with the pointer is not keyboard-usable.
+   */
+  onSubmit?: () => void;
+  /** Escape cancels. The other half of the same contract: every commit needs a way out. */
+  onCancel?: () => void;
+  /**
+   * Every other key, by name — a tag input's Backspace-on-empty, an OTP field's arrows. Fires
+   * before the text changes. Web and hardware keyboards only: never the sole way to do something.
+   */
+  onKey?: (key: string) => void;
+  onFocus?: () => void;
+  /** A one-time code: the OS offers the code from the message it just received. */
+  oneTimeCode?: boolean;
+  /** Focus return and programmatic focus — a tag input refocusing after a chip is removed. */
+  ref?: Ref<TextInput>;
+  placeholder?: string;
+  multiline?: boolean;
+  maxLength?: number;
+  autoFocus?: boolean;
+  variant?: TextVariant;
+  mono?: boolean;
+  error?: boolean;
+  minHeight?: number;
+  numeric?: boolean;
+  email?: boolean;
+  /**
+   * **A unit before or after the value — `$`, `USD`, `min`, `%` (C7).** Drawn inside the field's
+   * edge in secondary ink, and never part of the value: `onChangeText` receives `750`, not
+   * `$750`. The field's accessible name must still carry the unit ("Threshold in dollars"),
+   * because an affix is read as separate text rather than as part of the input.
+   */
+  prefix?: string;
+  suffix?: string;
+  /**
+   * A value the user can select and copy but not change — an API key, a generated id. Rendered
+   * as a real read-only input in the well, mono, so it stays focusable and selectable; a `Text`
+   * that looks like a field is neither.
+   */
+  readOnly?: boolean;
+  /**
+   * Not editable right now — a stage while its flow is live. Well ground and secondary ink, like
+   * `readOnly`, but in the body face: this is a value that WILL be editable again, not a key.
+   */
+  disabled?: boolean;
+  style?: StyleProp<TextStyle>;
+  nativeID?: string;
+  'aria-required'?: boolean;
+  'aria-invalid'?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+};
+
+/**
+ * The input primitive — **the seventh, and it was missing from the original six.**
+ *
+ * SPEC §4.2 fixed the primitive set at `Box · Text · Pressable · Icon · Image · Scroll` before
+ * any field had been built. The first three field types then needed a text input, and none of
+ * the six can express one: `Box` has no value and `Text` is not editable. The set was specified
+ * from the layout side and a form is not only layout.
+ *
+ * **A field is a hole in the paper, not an object on it, so it never lifts.** This owns that
+ * decision for every field type: the well, the three hairline states, and Android's M3
+ * treatment all live here rather than being re-derived per field. Focus darkens the hairline
+ * from 9% to 28% and does nothing else — there is no colour focus ring anywhere in this system,
+ * and the edge has to stay visible at 200% text size.
+ */
+/** react-native-web forwards `outlineStyle`; React Native's types do not list it. */
+const WEB_NO_OUTLINE = (Platform.OS === 'web' ? { outlineStyle: 'none' } : {}) as TextStyle;
+
+export function Input({
+  value, onChangeText, onBlur, onSubmit, onCancel, onKey, onFocus, oneTimeCode, ref, placeholder, multiline, maxLength, autoFocus,
+  variant = 'caption', mono, error, minHeight, numeric, email, prefix, suffix, readOnly, disabled, style, nativeID,
+  'aria-required': ariaRequired,
+  'aria-invalid': ariaInvalid,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+}: InputProps) {
+  const { colors, fonts, theme } = useDs();
+  const [focused, setFocused] = useState(false);
+  const md = Platform.OS === 'android';
+
+  /* Focus is the coral ring (Solarium 0.2.0, `:focus-within` for a field — the caret alone is not a
+     focus indicator); an error edge still wins, because the ring would hide the reason. */
+  /* Solarium has no red (0.2.0): an invalid field is an apricot edge with its soft ring. */
+  const errorEdge = theme === 'solarium'
+    ? `0 0 0 1px ${colors.status.needsUser}, 0 0 0 4px ${colors.statusBg.needsUser}`
+    : fieldEdge.error;
+  /* A read-only field is still focusable (selectable, copyable), so it takes the ring too: focus
+     must be visible on every focusable element (0.2.0 §1.7). */
+  const edge = error ? errorEdge : focused ? focusRingFor(colors) : fieldEdge.default;
+  const affixed = prefix !== undefined || suffix !== undefined;
+  const padY = md ? 11 : 9;
+  const padX = md ? 12 : 11;
+
+  /* The edge, the well and Android's M3 underline. On the input itself when there is no affix,
+     on the row that holds input and affixes when there is — the edge has to enclose the unit. */
+  const frame: ViewStyle = {
+    borderRadius: radii.field,
+    backgroundColor: readOnly || disabled ? colors.surfaceSunken : colors.surface1,
+    boxShadow: edge,
+    ...(md && {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      borderBottomWidth: 2,
+      borderBottomColor: colors.brandPrimary,
+    }),
+  };
+
+  const input = (
+    <TextInput
+      nativeID={nativeID}
+      value={value}
+      onChangeText={onChangeText}
+      ref={ref}
+      onFocus={() => {
+        setFocused(true);
+        onFocus?.();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onBlur?.();
+      }}
+      onSubmitEditing={onSubmit}
+      onKeyPress={onCancel || onKey ? e => {
+        const key = e.nativeEvent.key;
+        if (key === 'Escape') onCancel?.();
+        onKey?.(key);
+      } : undefined}
+      placeholder={placeholder}
+      placeholderTextColor={colors.textTertiary}
+      multiline={multiline}
+      maxLength={maxLength}
+      autoFocus={autoFocus}
+      readOnly={readOnly}
+      editable={!disabled}
+      aria-disabled={disabled || undefined}
+      /* Input BEHAVIOUR passes through; the style never does. An email field that
+         autocapitalises is a broken email field, and that is a keyboard decision rather than a
+         material one — which is why these are props and a style override is not. */
+      keyboardType={email ? 'email-address' : numeric ? 'numeric' : 'default'}
+      inputMode={email ? 'email' : numeric ? 'numeric' : 'text'}
+      autoCapitalize={email ? 'none' : 'sentences'}
+      autoCorrect={!email}
+      textContentType={oneTimeCode ? 'oneTimeCode' : email ? 'emailAddress' : 'none'}
+      autoComplete={oneTimeCode ? 'one-time-code' : undefined}
+      aria-required={ariaRequired}
+      aria-invalid={ariaInvalid}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      style={[
+        {
+          color: disabled ? colors.textSecondary : colors.textPrimary,
+          fontFamily: mono || readOnly ? fonts.mono : fonts.sans,
+          fontSize: typeScale[variant].fontSize,
+          paddingVertical: padY,
+        },
+        affixed
+          ? { flex: 1, minWidth: 0, paddingHorizontal: 0 }
+          : [frame as TextStyle, { paddingHorizontal: padX }],
+        /* The field draws its own focus ring (the coral box-shadow above, on the input or on the
+           affix row that encloses it), so the browser's default outline would be a second,
+           blue ring beside it. Removed here, where the replacement is drawn — never globally. */
+        WEB_NO_OUTLINE,
+        minHeight !== undefined && { minHeight, textAlignVertical: 'top' as const },
+        style,
+      ]}
+    />
+  );
+
+  if (!affixed) return input;
+
+  return (
+    <View style={[frame, { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: padX }]}>
+      {prefix !== undefined ? <Text variant={variant} color="textSecondary">{prefix}</Text> : null}
+      {input}
+      {suffix !== undefined ? <Text variant={variant} color="textSecondary">{suffix}</Text> : null}
+    </View>
+  );
+}

package/src/core/Layer.tsx

@@ -0,0 +1,164 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Modal, View, useWindowDimensions } from 'react-native';
+import { blockScrim } from '../tokens';
+
+/**
+ * **A layer above the page — the one primitive the blocks' menu, popover and modal share.**
+ *
+ * It is `Modal` underneath because that is what gives, on the web, the three things a layer must
+ * have and a hand-positioned `View` does not: it escapes every ancestor's `overflow` and stacking
+ * context, it traps focus, and Escape reaches `onRequestClose` (react-native-web's own
+ * implementation). On native it is the system modal window. The layer adds a backdrop that closes
+ * on press, placement, and focus return — which `Modal` leaves to the caller.
+ *
+ * Lives in `core/` because `Modal` and `useWindowDimensions` are platform APIs, and `react-native`
+ * is imported by `src/core` and `src/tokens` and nowhere else.
+ */
+
+export type LayerRect = { x: number; y: number; width: number; height: number };
+
+export type LayerPlacement =
+  /**
+   * Below an anchor, clamped inside the window with an 8px margin. Menus and popovers. `side:
+   * 'above'` opens it upward instead (a menu on a card's footer button); `align: 'end'` lines its
+   * right edge up with the anchor's.
+   */
+  | { kind: 'anchor'; rect: LayerRect | null; width: number; side?: 'below' | 'above'; align?: 'start' | 'end' }
+  /** Centred, at most `maxWidth` wide and never wider than the window less 32px. Dialogs. */
+  | { kind: 'center'; maxWidth: number };
+
+/** The margin a layer keeps from the window edge, so a menu at 372px never touches the glass. */
+export const LAYER_MARGIN = 8;
+
+/** Where a `width`-wide layer below `rect` goes in a `win`-sized window. Pure; exported for tests. */
+export function placeBelow(rect: LayerRect, width: number, win: { width: number; height: number }) {
+  const w = Math.min(width, win.width - LAYER_MARGIN * 2);
+  const left = Math.min(Math.max(LAYER_MARGIN, rect.x), win.width - w - LAYER_MARGIN);
+  const top = rect.y + rect.height + 4;
+  return { left, top, width: w };
+}
+
+/**
+ * Where a `width`-wide layer ABOVE `rect` goes: its bottom edge 6px over the anchor, so its height
+ * never has to be known. `align: 'end'` puts its right edge on the anchor's. Pure; exported for tests.
+ */
+export function placeAbove(rect: LayerRect, width: number, win: { width: number; height: number }, align: 'start' | 'end' = 'start') {
+  const w = Math.min(width, win.width - LAYER_MARGIN * 2);
+  const x = align === 'end' ? rect.x + rect.width - w : rect.x;
+  const left = Math.min(Math.max(LAYER_MARGIN, x), win.width - w - LAYER_MARGIN);
+  const bottom = Math.max(LAYER_MARGIN, win.height - rect.y + 6);
+  return { left, bottom, width: w };
+}
+
+/**
+ * The anchor half: a ref for the trigger, its measured rect, and `focus()` for focus return.
+ * Measure on open, not on mount — a trigger in a scrolled list has moved since it mounted.
+ */
+export function useAnchor() {
+  const ref = useRef<View>(null);
+  const [rect, setRect] = useState<LayerRect | null>(null);
+  const measure = useCallback(() => {
+    const el = ref.current as unknown as { measureInWindow?: (cb: (x: number, y: number, w: number, h: number) => void) => void } | null;
+    el?.measureInWindow?.((x, y, width, height) => setRect({ x, y, width, height }));
+  }, []);
+  const focus = useCallback(() => { (ref.current as unknown as { focus?: () => void } | null)?.focus?.(); }, []);
+  return { ref, rect, measure, focus };
+}
+
+/** Runs `run` once, from inside the layer, after the layer's content has mounted. */
+function FocusOnMount({ run }: { run: () => void }) {
+  useEffect(() => { run(); }, [run]);
+  return null;
+}
+
+export function Layer({
+  open, onClose, placement, scrim = false, label, labelledBy, initialFocus, returnFocus, children, testID,
+}: {
+  open: boolean;
+  /** Backdrop press and Escape. Focus returns to what had it before the layer opened. */
+  onClose: () => void;
+  placement: LayerPlacement;
+  /** A dimmed backdrop — a modal dialog has one, a menu does not. */
+  scrim?: boolean;
+  /** The layer's accessible name, when it has no visible title to point at. */
+  label?: string;
+  /** The id of the visible title — preferred over `label` whenever a title exists. */
+  labelledBy?: string;
+  /**
+   * Put focus somewhere specific on open — a menu's selected item. Runs from INSIDE the layer, so
+   * the focus trap sees focus already inside and leaves it; without it the trap takes the first
+   * focusable descendant.
+   */
+  initialFocus?: () => void;
+  /**
+   * Where focus goes when the layer closes — the control that opened it. Run AFTER the modal has
+   * unmounted (this component's effect follows its child's cleanup), so it wins over the modal's own
+   * restore, which would otherwise return focus to whatever held it at open: in Safari a clicked
+   * button never takes focus, so that is `<body>`.
+   */
+  returnFocus?: () => void;
+  children: ReactNode;
+  testID?: string;
+}) {
+  const win = useWindowDimensions();
+  /* Never open before mount. react-native-web's Modal creates its portal element DURING render on
+     the client but renders nothing on the server, so a layer that starts open (a restored session
+     with its menu showing) broke hydration — and the discarded render left portal nodes behind that
+     later failed to unmount. One frame later is indistinguishable to a person. */
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const box: { left: number; top?: number; bottom?: number; width: number } | null = placement.kind === 'anchor'
+    ? (placement.rect
+      ? (placement.side === 'above'
+        ? placeAbove(placement.rect, placement.width, win, placement.align)
+        : placement.align === 'end'
+          ? placeBelow({ ...placement.rect, x: placement.rect.x + placement.rect.width - Math.min(placement.width, win.width - LAYER_MARGIN * 2) }, placement.width, win)
+          : placeBelow(placement.rect, placement.width, win))
+      : { left: LAYER_MARGIN, top: LAYER_MARGIN, width: Math.min(placement.width, win.width - LAYER_MARGIN * 2) })
+    : null;
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  /* Native has no focus trap to undo, so the effect is enough there; on the web `onDismiss` fires
+     once the modal's content — and its trap's own focus restore — is gone, and runs last. */
+  const wasOpen = useRef(open);
+  useEffect(() => {
+    if (wasOpen.current && !open) returnFocus?.();
+    wasOpen.current = open;
+  }, [open, returnFocus]);
+
+  /* `Modal`'s own content element IS the dialog (`role="dialog"`, `aria-modal`) on the web — the
+     name goes on it, rather than on a second dialog nested inside. */
+  return (
+    <Modal
+      visible={open && mounted}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      onDismiss={() => returnFocus?.()}
+      {...({ 'aria-label': labelledBy ? undefined : label, 'aria-labelledby': labelledBy } as object)}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        {/* The content comes FIRST in the tree so it is what focus reaches; the backdrop is not
+            focusable and not in the accessibility tree — it is a surface, not a control. Escape is
+            the keyboard's way out. */}
+        <View
+          testID={testID}
+          style={[
+            { zIndex: 1 },
+            box
+              ? { position: 'absolute', left: box.left, top: box.top, bottom: box.bottom, width: box.width }
+              : { width: '100%', maxWidth: Math.min((placement as { maxWidth: number }).maxWidth, win.width - 32) },
+          ]}>
+          {children}
+          {initialFocus ? <FocusOnMount run={initialFocus} /> : null}
+        </View>
+        <View
+          aria-hidden
+          testID={testID ? `${testID}-backdrop` : 'layer-backdrop'}
+          onStartShouldSetResponder={() => true}
+          onResponderRelease={() => closeRef.current()}
+          style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: scrim ? blockScrim : 'transparent' }}
+        />
+      </View>
+    </Modal>
+  );
+}

package/src/core/Motion.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useReduceMotion } from './platform';
+
+/**
+ * **A looping 0→1 driver, and the view that can be styled from one.**
+ *
+ * The input-widget handoff specifies four continuous animations — the recorder's halo and
+ * waveform, the indeterminate runner, the spinner. Every one of them is a value repeating over
+ * time, so rather than four bespoke components this exposes the driver and lets each widget
+ * interpolate it into the property the handoff names.
+ *
+ * It lives in `core/` for the same reason every other platform module does: `react-native` is
+ * imported by `src/core/` and `src/tokens/` and nowhere else, and `Animated` is as much a
+ * platform API as `View` is.
+ */
+export type Loop = Animated.Value;
+
+/** `Animated.View`, re-exported so a widget can style from a loop without importing RN. */
+export const MotionView = Animated.View;
+
+/**
+ * A value that runs 0→1 forever.
+ *
+ * **Reduce Motion parks it at `rest` rather than slowing it down.** A user who has asked for no
+ * motion has asked for none; a gentler loop is still a loop. Widgets that animate to convey
+ * *state* (recording, working) must therefore also say it in words — which is why every one of
+ * them here carries a status line.
+ */
+export function useLoop({
+  duration, delay = 0, enabled = true, rest = 0, easing = Easing.linear,
+}: {
+  duration: number;
+  delay?: number;
+  enabled?: boolean;
+  /** Where the value sits when the loop is not running. */
+  rest?: number;
+  easing?: (v: number) => number;
+}): Loop {
+  const reduced = useReduceMotion();
+  const value = useRef(new Animated.Value(rest)).current;
+  const run = enabled && !reduced;
+
+  useEffect(() => {
+    if (!run) {
+      value.setValue(rest);
+      return;
+    }
+    value.setValue(0);
+    const anim = Animated.loop(
+      Animated.timing(value, {
+        toValue: 1,
+        duration,
+        delay,
+        easing,
+        /* Transform and opacity go to the native driver; width, height and colour cannot. */
+        useNativeDriver: false,
+      }),
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [run, duration, delay, rest, easing, value]);
+
+  return value;
+}

package/src/core/Pressable.tsx

@@ -0,0 +1,206 @@
+import type { ReactNode, Ref } from 'react';
+import { Pressable as RNPressable, type StyleProp, type View, type ViewStyle } from 'react-native';
+import { focusRingFor, liftAccent, motion, outlineEdge, scrim, space, useDs } from '../tokens';
+import { isKeyboardModality } from './focusVisible';
+import { groundFor, radiusFor, type GroundToken, type RadiusToken } from './roles';
+
+export type PressableProps = {
+  children?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  /**
+   * Hover. **Web-only by nature** — a touch device has no hover, and RN forwards these only where
+   * a pointer exists. Never carry state a touch user cannot reach through hover alone.
+   */
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+
+  row?: boolean;
+  align?: ViewStyle['alignItems'];
+  justify?: ViewStyle['justifyContent'];
+  gap?: keyof typeof space;
+  /** Share a row equally — two actions weighted the same are two actions weighted the same. */
+  flex?: number;
+  p?: keyof typeof space;
+  px?: keyof typeof space;
+  py?: keyof typeof space;
+
+  bg?: GroundToken;
+  /** As `Box`. A scrim is usually pressable — tapping it dismisses. */
+  scrim?: 'default' | 'destructive';
+  radius?: RadiusToken;
+  /**
+   * How a press reads. **`scale` is the button's gesture, `dim` is everything else's.**
+   *
+   * A button presses by shrinking and never by changing colour or dipping opacity — a colour
+   * change on press competes with the state the colour already encodes.
+   */
+  press?: 'dim' | 'scale';
+  /** Elevation. `accent` is the one coloured shadow in the system, and only a primary button has it. */
+  lift?: 1 | 2 | 3 | 'accent';
+  /** A hairline ring. The ring IS the border — never add one alongside. */
+  edge?: 'outline';
+  minHeight?: number;
+  alignSelf?: ViewStyle['alignSelf'];
+  /**
+   * Square hit area in points. **44 is the floor and the default**, and it is why a control's
+   * glyph is usually much smaller than the box around it — the target is padding, not the mark.
+   */
+  hit?: number;
+
+  width?: ViewStyle['width'];
+  height?: ViewStyle['height'];
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  /**
+   * What this control IS. `button` is the default and stays right for almost everything.
+   *
+   * `checkbox` exists because a checkbox is not a button that happens to look ticked: a screen
+   * reader announces a role and a checked state, and a pressable with only an `aria-label` tells
+   * it the name and nothing about the state. `components/checklist` is the first consumer; see
+   * `docs/components/checklist/CHECKLIST-DESIGN.md` §17.
+   */
+  role?: 'button' | 'checkbox' | 'switch' | 'tab' | 'link' | 'radio' | 'menuitem' | 'menuitemradio' | 'option' | 'spinbutton';
+  /** A spinbutton's value and bounds, forwarded as the DOM's own `aria-value*`. */
+  'aria-valuenow'?: number;
+  'aria-valuemin'?: number;
+  'aria-valuemax'?: number;
+  'aria-valuetext'?: string;
+  /** Press start and end, for hold-to-repeat. `onPress` still fires on release as always. */
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+  'aria-label'?: string;
+  /** A toggle control's own state — a selected filter tile, an active tab. Omit for a plain action. */
+  'aria-pressed'?: boolean;
+  /** A `tab` role's state (batch 6: Criteria Spider's segmented tablist). */
+  'aria-selected'?: boolean;
+  /**
+   * A checkbox's, radio's or switch's own state. Required whenever the role has one. `'mixed'` is
+   * a tri-state checkbox parent — some, not all, of its children checked.
+   */
+  'aria-checked'?: boolean | 'mixed';
+  /** The current item in a set — a stepper's current step, a pager's current page. */
+  'aria-current'?: boolean | 'step' | 'page';
+  /** What pressing this opens. A menu trigger says `menu`, so a screen reader announces it. */
+  'aria-haspopup'?: 'menu' | 'dialog' | 'listbox';
+  /** Working. A button mid-operation is still a button, and says so. */
+  'aria-busy'?: boolean;
+  /** An id, so a popover or a message can point back at this control. */
+  nativeID?: string;
+  /**
+   * **Keyboard, for the controls whose keys are part of their contract** — a radio group's arrows,
+   * a stepper's Home/End, a menu's Escape. Web-only by nature: RN forwards it where a keyboard
+   * event exists. Never the only way to do something a touch user must also be able to do.
+   */
+  onKeyDown?: (e: { key: string; preventDefault: () => void }) => void;
+  /** Roving focus: the one item of a group that takes Tab is `0`, its siblings `-1`. */
+  tabIndex?: 0 | -1;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  /** For roving focus and focus return — the one reason a control is ever focused from code. */
+  ref?: Ref<View>;
+  /** A disclosure's state, with the id of what it discloses. */
+  'aria-expanded'?: boolean;
+  'aria-controls'?: string;
+  /**
+   * The id of text that explains this control — a gate's reason, a failure's message. Distinct
+   * from the label: the label is what it is, this is why it is the way it is.
+   */
+  'aria-describedby'?: string;
+};
+
+/**
+ * The interactive primitive.
+ *
+ * **A disabled control dims; it does not disappear.** A button that vanishes at its limit moves
+ * whatever sits beside it under the thumb already reaching for it, so the user presses the wrong
+ * thing at exactly the moment they were told they could not press the right one.
+ */
+export function Pressable({
+  children, onPress, disabled, onHoverIn, onHoverOut, row, align = 'center', justify = 'center',
+  gap, flex, p, px, py, bg, scrim: scrimTone, radius, hit, width, height, style, testID,
+  press = 'dim', lift, edge, minHeight, alignSelf, role = 'button', nativeID, onKeyDown, tabIndex,
+  onFocus, onBlur, ref, onPressIn, onPressOut,
+  'aria-valuenow': ariaValueNow, 'aria-valuemin': ariaValueMin, 'aria-valuemax': ariaValueMax,
+  'aria-valuetext': ariaValueText,
+  'aria-current': ariaCurrent, 'aria-haspopup': ariaHasPopup, 'aria-busy': ariaBusy,
+  'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'aria-selected': ariaSelected, 'aria-checked': ariaChecked,
+  'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-describedby': ariaDescribedBy,
+}: PressableProps) {
+  const ds = useDs();
+  const s = (t?: keyof typeof space) => (t === undefined ? undefined : space[t]);
+  return (
+    <RNPressable
+      onPress={onPress}
+      disabled={disabled}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      testID={testID}
+      /* `menuitemradio` is real ARIA that RN's `Role` union omits; react-native-web passes it through. */
+      role={role as 'button'}
+      ref={ref}
+      nativeID={nativeID}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
+      {...(onKeyDown ? ({ onKeyDown } as object) : null)}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      aria-valuenow={ariaValueNow}
+      aria-valuemin={ariaValueMin}
+      aria-valuemax={ariaValueMax}
+      aria-valuetext={ariaValueText}
+      aria-current={ariaCurrent}
+      aria-haspopup={ariaHasPopup}
+      aria-busy={ariaBusy}
+      aria-label={ariaLabel}
+      aria-pressed={ariaPressed}
+      aria-selected={ariaSelected}
+      aria-checked={ariaChecked}
+      aria-expanded={ariaExpanded}
+      aria-controls={ariaControls}
+      aria-describedby={ariaDescribedBy}
+      aria-disabled={disabled}
+      style={(state) => {
+        const { pressed } = state;
+        /* react-native-web reports `focused` in the same state object; native reports `pressed` only,
+           and a native focus ring is the platform's. */
+        const focusVisible = Boolean((state as { focused?: boolean }).focused) && isKeyboardModality();
+        return [
+        {
+          flexDirection: row ? 'row' : 'column',
+          alignItems: align,
+          justifyContent: justify,
+          gap: s(gap),
+          flex,
+          padding: s(p),
+          paddingHorizontal: s(px),
+          paddingVertical: s(py),
+          backgroundColor: scrimTone ? scrim[scrimTone] : bg ? groundFor(ds.colors, bg) : undefined,
+          borderRadius: radius ? radiusFor(radius) : undefined,
+          width: width ?? hit,
+          height: height ?? hit,
+          alignSelf,
+          minWidth: hit === undefined ? undefined : hit,
+          minHeight: minHeight ?? (hit === undefined ? undefined : hit),
+          boxShadow:
+            lift === 'accent' ? liftAccent
+            : lift === 3 ? ds.edge3
+            : lift === 2 ? ds.lift2
+            : lift === 1 ? ds.lift1
+            : edge === 'outline' ? outlineEdge
+            : undefined,
+          opacity: disabled ? 0.4 : press === 'dim' && pressed ? 0.7 : 1,
+          transform: press === 'scale' ? [{ scale: pressed ? motion.pressScale : 1 }] : undefined,
+        },
+        style,
+        /* The Solarium 0.2.0 keyboard focus ring (mandatory, onboarding PRD §1.7) — after `style` so a
+           caller's own shadow cannot hide it, and with the browser outline turned off only when this
+           ring replaces it. */
+        focusVisible ? ({ boxShadow: focusRingFor(ds.colors), outlineStyle: 'none' } as unknown as ViewStyle) : null,
+      ] as StyleProp<ViewStyle>;
+      }}>
+      {children}
+    </RNPressable>
+  );
+}