pixelize-native-library 1.0.6

package/lib/module/modules/menu/MODULE.md

@@ -0,0 +1,103 @@
+# menu/ — an anchored action list opened from a trigger, in RN's own Modal
+
+`Menu` wraps a single trigger element (via `React.cloneElement`, never `{...rest}`) and reveals a
+short list of actions in React Native's OWN `Modal` on press. Unlike `Select` (externally
+controlled via `value`/`onValueChange`), Menu is self-contained: a transient action list manages
+its own open/closed state.
+
+The one deliberate exception to "own `Modal`, not the library's": on web, Menu reads
+`../modal/ModalPortalContext` + `../modal/renderWebPortal` — the same web-portal-containment
+mechanism `Modal` and `Select` use — so opening a `ModalPortalProvider` containing an app also
+contains Menu's action sheet. See `../modal/MODULE.md`'s "Web portal mechanism" section for the
+full explanation; this is a plain context + a stateless helper with no React-tree footprint of its
+own, not a dependency on the `Modal` component.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Menu.tsx` | The component. `cloneElement` trigger composition, `Modal` + backdrop + row list, open/close state. |
+| `Menu.variants.ts` | Pure resolver (`resolveMenuItemColor`) + the themed structural resolvers (`menuOverlayStructure`, `menuSheetStructure`, `menuRowStructure`). No React, no lucide. |
+| `index.ts` | Public surface: `Menu`, `MenuProps`, `MenuItem`, `MenuTriggerProps`, `MenuItemTone`, `IconName` (re-exported from `core/icon`). |
+| `__tests__/Menu.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + the tone→role mapping. |
+| `__tests__/Menu.render.test.tsx` | Render: open/close, trigger `onPress` chaining, disabled gating, item selection, backdrop dismiss, and the web-portal opt-in branch (mocking `renderWebPortal`). |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `trigger` | `ReactElement<MenuTriggerProps>` | — | Required. A single element accepting `onPress` (e.g. a `Button`). Cloned to chain its `onPress` with opening the menu. |
+| `items` | `{ label: string; icon?: IconName; onPress: () => void; tone?: "default" \| "danger" }[]` | — | Required. Rendered in order; `danger` renders the row in `status.danger.text`. |
+| `disabled` | `boolean` | `false` | Blocks the menu from opening. Does **not** restyle the trigger — see "Design decisions" below. |
+| `testID` | `string` | — | Seeds `${testID}-backdrop` and `${testID}-item-${index}`. Not applied to the trigger — the trigger owns its own `testID`. |
+
+No `style` prop — like Tooltip, Menu renders no sized node of its own for an app to place; the
+trigger keeps whatever layout it already has. `variant`/`size` are also absent: Menu has one fixed
+row size, since an action list's row height isn't a caller-facing choice.
+
+## Accessibility contract (WCAG)
+
+- **4.1.2 / semantics** — every row is `accessibilityRole="menuitem"`. The backdrop is
+  `accessible={false}` (same as Select's) so it isn't announced as a separate focusable element.
+- **1.4.3** — every row's label is measured ≥ 4.5:1 against the sheet fill (`bg.surface`), for both
+  `default` (`fg.default`) and `danger` (`status.danger.text`) tones, across all 8 brands × both
+  modes.
+- **1.4.11** — the row icon reuses the label's exact colour (never a separate lookup): since the
+  label already clears the stricter 4.5:1 text minimum, the icon clears its looser 3:1 non-text
+  minimum for free — the same reasoning Select's active-row check glyph relies on.
+- **2.5.8 / 2.5.5 target size** — every row is a direct 44dp `minHeight` (a list row is already its
+  own full-width touch target, not a control that shrinks and needs `hitSlop`).
+- **Icon-only rule (rule 5) does not apply** — every row always renders a visible `label` text; a
+  menu row is never icon-only.
+- **2.3.3** — the menu's `animationType` is `"none"` instead of `"fade"` when `useReducedMotion()`
+  is true.
+- Backdrop press closes the menu without calling any item's `onPress` — dismissal and selection are
+  two distinct code paths (`closeMenu` vs. `selectItem`), so a stray tap can never accidentally fire
+  an action.
+
+## Patterns copied from Button / Select / Tooltip (the reference modules)
+
+1. **Structure vs colour split** — sheet/row padding/radius via `createThemedVariants`; colour
+   resolved from `RoleColors` per `tone`, applied inline.
+2. **Pure, testable resolver** in `Menu.variants.ts` — the WCAG contrast is unit-tested against real
+   palettes, never eyeballed.
+3. **`React.cloneElement` composition, never `{...rest}`** — only `onPress` is injected into the
+   trigger, chained after any handler it already had (same technique as Tooltip's
+   `onLongPress`/`onPressOut` injection).
+4. **RN's own `Modal`, not this library's** — same reasoning as Select: a quick transient overlay,
+   not a persistent app dialog with a title/children contract.
+5. **Closed `tone` union** — `default | danger`, resolved from role colours, never a free-form
+   `color` prop.
+
+## Design decisions specific to this module
+
+- **`disabled` only blocks opening; it does not restyle the trigger.** Menu cannot reliably inject a
+  `disabled` prop into an arbitrary caller-supplied element (the same constraint Tooltip's own docs
+  note: a component that destructures its own explicit prop list simply drops an unknown injected
+  prop). If the trigger should also *look* disabled, pass `disabled` to the trigger itself.
+- **The trigger's own `onPress` always fires, even while Menu is `disabled`.** Only the menu-opening
+  side is gated (inside `openMenu`); the trigger's existing handler is never suppressed, so Menu
+  never silently swallows a side effect the caller's trigger already relied on.
+- **Menu does not inject `accessibilityState.expanded` onto the trigger** (unlike Select, whose
+  trigger *is* this library's own `Pressable`). Menu's trigger is caller-supplied and opaque; the
+  same constraint that stops the `disabled` injection above stops this too.
+- **The sheet is centered, not a true measured anchor.** "Anchored" here means "attached to a
+  trigger", not "positioned at the trigger's exact on-screen coordinates" — a real measured anchor
+  would need a `ref`/`measure()` most trigger elements in this library don't forward (this
+  library's own `Button` isn't `forwardRef`). v1 reuses Select's exact overlay pattern (full-screen
+  scrim + centered sheet) rather than inventing an unmeasured guess at a position. A future
+  `Popover`-style module with real anchor measurement would be the place to fix this, not a prop
+  added here — the same deferral Tooltip's own docs make for its unmeasured bubble placement.
+
+## Known gaps
+
+- No measured anchor position (see above) — the sheet always centers, regardless of where the
+  trigger sits on screen.
+- No submenu / nested items — v1 is a single flat action list, matching the spec this module was
+  built against.
+- No keyboard/arrow-key navigation between rows (touch-only interaction model, same scope as
+  Select's option list).
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `openMenu`/`closeMenu` are `useCallback`'d, and the inline `onPress` previously injected into the caller-supplied `trigger` via `cloneElement` on every render is extracted to `handleTriggerPress` (`useCallback`, deps `[trigger, openMenu]`) — `trigger` is a consumer-supplied child (typically this library's own `Button`), so a fresh callback there would defeat its memo. `selectItem` and the per-row `onPress` stay inline: they go to `Pressable`/`Icon` (host elements / primitive props), not a memoized child.

package/lib/module/modules/menu/Menu.js

@@ -0,0 +1,128 @@
+"use strict";
+
+/**
+ * Menu — a small anchored action list opened from a caller-supplied trigger. Unlike Select (whose
+ * open/closed state is a `value`/`onValueChange` pair the caller owns), Menu is self-contained: a
+ * transient action list manages its own visibility, closing itself after every dismissal path.
+ *
+ * The trigger is composed via `React.cloneElement` — never `{...rest}` — injecting only `onPress`,
+ * chained after any handler the trigger already defined (the same "merge, never clobber" technique
+ * Tooltip uses for its child). The dropdown itself is React Native's OWN `Modal`, imported directly
+ * from `"react-native"` on purpose: this module must never depend on the library's own `Modal`
+ * COMPONENT — this library's own `Modal` (built in parallel elsewhere) is for persistent app
+ * dialogs with a title/children contract, not a quick transient overlay — the same distinction
+ * Select already draws for its own option list.
+ *
+ * The one deliberate exception is the web portal mechanism: `ModalPortalContext`/`renderWebPortal`
+ * are a plain context + a stateless helper with no React-tree footprint of their own (not the
+ * `Modal` component), so Menu reads the same ones `Modal.tsx` and `Select.tsx` read to stay
+ * consistent once a consumer opts in via `ModalPortalProvider` — see `../modal/ModalPortalContext.ts`.
+ */
+
+import { cloneElement, memo, useCallback, useContext, useState } from "react";
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { ModalPortalContext } from "../modal/ModalPortalContext.js";
+import { renderWebPortal } from "../modal/renderWebPortal";
+import { MENU_ROW_ICON_SIZE, menuOverlayStructure, menuRowStructure, menuSheetStructure, resolveMenuItemColor } from "./Menu.variants.js";
+
+/** The subset of props Menu reads from / injects into its trigger child. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+// Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it.
+const BACKDROP_SCRIM = "#00000099";
+export const Menu = /*#__PURE__*/memo(function Menu({
+  trigger,
+  items,
+  disabled = false,
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const portalContainer = useContext(ModalPortalContext);
+  const [open, setOpen] = useState(false);
+  const openMenu = useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+  }, [disabled]);
+  const closeMenu = useCallback(() => setOpen(false), []);
+  const selectItem = item => {
+    closeMenu();
+    item.onPress();
+  };
+
+  // Passed to `trigger` — a consumer-supplied CHILD component (typically this library's own
+  // Button) — via cloneElement, so it is memoized like any other child-bound callback.
+  const handleTriggerPress = useCallback(event => {
+    trigger.props.onPress?.(event);
+    openMenu();
+  }, [trigger, openMenu]);
+  const clonedTrigger = /*#__PURE__*/cloneElement(trigger, {
+    onPress: handleTriggerPress
+  });
+  const sheet = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: BACKDROP_SCRIM
+      }],
+      onPress: closeMenu
+    }), /*#__PURE__*/_jsx(View, {
+      style: menuOverlayStructure(theme),
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [menuSheetStructure(theme), {
+          backgroundColor: theme.colors.bg.surface
+        }],
+        children: /*#__PURE__*/_jsx(ScrollView, {
+          bounces: false,
+          children: items.map((item, index) => {
+            const color = resolveMenuItemColor(theme.colors, item.tone ?? "default");
+            return /*#__PURE__*/_jsxs(Pressable, {
+              testID: testID ? `${testID}-item-${index}` : undefined,
+              accessibilityRole: "menuitem",
+              onPress: () => selectItem(item),
+              style: menuRowStructure(theme),
+              children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+                name: item.icon,
+                size: MENU_ROW_ICON_SIZE,
+                color: color,
+                strokeWidth: ICON_STROKE
+              }), /*#__PURE__*/_jsx(Text, {
+                numberOfLines: 1,
+                style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+                  flex: 1,
+                  fontSize: theme.fontSizes.md,
+                  color
+                }],
+                children: item.label
+              })]
+            }, `${item.label}-${index}`);
+          })
+        })
+      })
+    })]
+  });
+
+  // Web portal opt-in — see Modal.tsx's identical branch + ModalPortalContext.ts. Every other case
+  // (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below, unchanged.
+  const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    children: sheet
+  }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    animationType: reducedMotion ? "none" : "fade",
+    onRequestClose: closeMenu,
+    children: sheet
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [clonedTrigger, menu]
+  });
+});
+//# sourceMappingURL=Menu.js.map

package/lib/module/modules/menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","memo","useCallback","useContext","useState","Modal","Platform","Pressable","ScrollView","StyleSheet","Text","View","useReducedMotion","Icon","useTheme","ModalPortalContext","renderWebPortal","MENU_ROW_ICON_SIZE","menuOverlayStructure","menuRowStructure","menuSheetStructure","resolveMenuItemColor","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ICON_STROKE","BACKDROP_SCRIM","Menu","trigger","items","disabled","testID","theme","reducedMotion","portalContainer","open","setOpen","openMenu","closeMenu","selectItem","item","onPress","handleTriggerPress","event","props","clonedTrigger","sheet","children","undefined","accessible","style","absoluteFill","backgroundColor","pointerEvents","colors","bg","surface","bounces","map","index","color","tone","accessibilityRole","icon","name","size","strokeWidth","numberOfLines","fontStyleForWeight","fontWeights","regular","flex","fontSize","fontSizes","md","label","menu","OS","visible","transparent","animationType","onRequestClose"],"sourceRoot":"../../../../src","sources":["modules/menu/Menu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/menu/Menu.variants.js

@@ -0,0 +1,75 @@
+"use strict";
+
+/**
+ * Menu's style + behaviour resolution — same split as Button/Select:
+ *  - STRUCTURE (sizing/spacing off the theme scale) lives in the `createThemedVariants` resolvers
+ *    below — static per (brand, mode), registered once.
+ *  - COLOUR is resolved from the theme's ROLE colours (never a raw ramp, never a hardcoded hex) by
+ *    `resolveMenuItemColor` — `tone` maps a row to `fg.default` or `status.danger.text`, the same
+ *    reason Button's `tone` is a closed union instead of a `color` prop.
+ *
+ * Free of React, `lucide`, and any `Modal`/`Pressable` import, so the WCAG + touch-target tests
+ * import it directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export const MIN_TOUCH_TARGET = 44;
+
+/** Row height is a direct `minHeight`, not a `hitSlop` expansion — a list row is already its own
+ *  full-width touch target, the same choice `Select`'s option rows make (`SELECT_ROW_MIN_HEIGHT`). */
+export const MENU_ROW_MIN_HEIGHT = MIN_TOUCH_TARGET;
+
+/** The optional leading glyph's size. Fixed — Menu has no `size` prop (unlike Button/Select), since
+ *  an action list's row height is not a caller-facing choice. */
+export const MENU_ROW_ICON_SIZE = 18;
+
+/**
+ * Maps a row's `tone` onto the theme's ROLE colours — the reason `tone` is a closed union and not a
+ * free-form `color` prop. The SAME colour drives both the label and the icon (like Select's active
+ * row): if the label clears the stricter 4.5:1 text minimum on the sheet fill, the icon clears its
+ * 3:1 non-text minimum for free.
+ */
+export function resolveMenuItemColor(colors, tone) {
+  switch (tone) {
+    case "danger":
+      return colors.status.danger.text;
+    case "default":
+      return colors.fg.default;
+  }
+}
+
+/**
+ * Structural styles only — layout, padding, radius, border WIDTH. No colours (those are resolved
+ * from `RoleColors` and applied inline), so this compiles once per theme identity via the themed
+ * resolver and never rebuilds per render.
+ *
+ * `justifyContent: "center"` mirrors Select's full-screen overlay + centered sheet — the same
+ * "transient overlay in RN's own Modal" pattern Select already established. See the "Known gaps"
+ * section of MODULE.md for why this is a centered sheet rather than a true measured anchor.
+ */
+export const menuOverlayStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[6]
+  }
+}));
+export const menuSheetStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.base,
+    paddingVertical: theme.space[2],
+    maxHeight: 320,
+    ...theme.elevation.lg
+  }
+}));
+export const menuRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: MENU_ROW_MIN_HEIGHT,
+    columnGap: theme.space[2],
+    paddingHorizontal: theme.space[4]
+  }
+}));
+//# sourceMappingURL=Menu.variants.js.map

package/lib/module/modules/menu/Menu.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","MENU_ROW_MIN_HEIGHT","MENU_ROW_ICON_SIZE","resolveMenuItemColor","colors","tone","status","danger","text","fg","default","menuOverlayStructure","theme","base","flex","justifyContent","paddingHorizontal","space","menuSheetStructure","borderRadius","radii","paddingVertical","maxHeight","elevation","lg","menuRowStructure","flexDirection","alignItems","minHeight","columnGap"],"sourceRoot":"../../../../src","sources":["modules/menu/Menu.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,oBAAoB,QAAQ,2BAAkB;AAIvD;AACA,OAAO,MAAMC,gBAAgB,GAAG,EAAE;;AAElC;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGD,gBAAgB;;AAEnD;AACA;AACA,OAAO,MAAME,kBAAkB,GAAG,EAAE;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAACC,MAAkB,EAAEC,IAAkB,EAAU;EACnF,QAAQA,IAAI;IACV,KAAK,QAAQ;MACX,OAAOD,MAAM,CAACE,MAAM,CAACC,MAAM,CAACC,IAAI;IAClC,KAAK,SAAS;MACZ,OAAOJ,MAAM,CAACK,EAAE,CAACC,OAAO;EAC5B;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGZ,oBAAoB,CAAEa,KAAY,KAAM;EAC1EC,IAAI,EAAE;IACJC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,iBAAiB,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;EAClC;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,kBAAkB,GAAGnB,oBAAoB,CAAEa,KAAY,KAAM;EACxEC,IAAI,EAAE;IACJM,YAAY,EAAEP,KAAK,CAACQ,KAAK,CAACP,IAAI;IAC9BQ,eAAe,EAAET,KAAK,CAACK,KAAK,CAAC,CAAC,CAAC;IAC/BK,SAAS,EAAE,GAAG;IACd,GAAGV,KAAK,CAACW,SAAS,CAACC;EACrB;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,MAAMC,gBAAgB,GAAG1B,oBAAoB,CAAEa,KAAY,KAAM;EACtEC,IAAI,EAAE;IACJa,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,SAAS,EAAE3B,mBAAmB;IAC9B4B,SAAS,EAAEjB,KAAK,CAACK,KAAK,CAAC,CAAC,CAAC;IACzBD,iBAAiB,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;EAClC;AACF,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/modules/menu/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/menu`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveMenuItemColor`, `MENU_ROW_ICON_SIZE`, …) stay
+ * internal — a consumer configures a Menu through its props, never by importing its internals.
+ */
+
+export { Menu } from "./Menu.js";
+
+// Re-exported so a caller can type an item's `icon` prop without a separate import from `core/icon`.
+//# sourceMappingURL=index.js.map

package/lib/module/modules/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Menu"],"sourceRoot":"../../../../src","sources":["modules/menu/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,WAAQ;;AAK7B","ignoreList":[]}

package/lib/module/modules/modal/MODULE.md

@@ -0,0 +1,138 @@
+# modal/ — the library's own dialog, built on React Native's `Modal`
+
+`Modal` wraps React Native's own `<Modal>` (`transparent`, faded in unless the OS has reduced
+motion on) with a dismissible backdrop scrim and a themed panel — `bg.surface`, `theme.radii.lg`,
+`theme.elevation.lg` — capped to one of three closed widths. It is fully controlled: the caller
+owns `visible` and reacts to `onRequestClose` (backdrop press, Android back button, iOS
+VoiceOver's escape gesture via `onAccessibilityEscape`).
+
+## Files
+
+| File | Role |
+|------|------|
+| `Modal.tsx` | The component. RN `<Modal>` composition, backdrop, overlay, panel, title. Falls back to the web portal mechanism below when opted in. |
+| `Modal.variants.ts` | Pure resolvers (`MODAL_SIZES`, `resolveModalPanelColors`, `resolveModalAnimationType`) + the themed structural resolvers (`modalOverlayStructure`, `modalPanelStructure`). No React, no lucide. Untouched by the web portal mechanism — see below. |
+| `ModalPortalContext.ts` | The web-only portal-container `React.Context<unknown>`, default `null`. Read by `Modal`, `Select`, `MultiSelect`, and `Menu`. |
+| `ModalPortalProvider.tsx` | Public provider wrapping `ModalPortalContext.Provider`. A consumer's opt-in API. |
+| `renderWebPortal.ts` / `renderWebPortal.web.ts` | The platform-split portal renderer — see "Web portal mechanism" below. |
+| `index.ts` | Public surface: `Modal`, `ModalProps`, `ModalSize`, `ModalPortalProvider`, `ModalPortalProviderProps`. |
+| `__tests__/Modal.test.ts` | Pure: WCAG contrast (all brands × modes), size-cap sanity, reduced-motion contract. |
+| `__tests__/Modal.render.test.tsx` | Render: visibility, title semantics, backdrop dismissal, and the web-portal opt-in branch (mocking `renderWebPortal`). |
+| `__tests__/ModalPortalProvider.test.tsx` | The provider forwards `container` onto `ModalPortalContext`; an unwrapped tree reads the `null` default. |
+| `__tests__/renderWebPortal.test.ts` / `renderWebPortal.web.test.ts` | Each platform file in isolation — the native file is always a no-op; the web file calls `ReactDOM.createPortal` with the exact children/container (mocked — no real DOM under Jest). |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `visible` | `boolean` | — | Required. Fully controlled — no internal open state. |
+| `onRequestClose` | `() => void` | — | Required. Fired by the backdrop press, Android hardware back, and iOS VoiceOver's escape gesture (`onAccessibilityEscape` on the panel). |
+| `title` | `string` | — | Optional heading, rendered `accessibilityRole="header"`. |
+| `children` | `ReactNode` | — | Required. Panel content. |
+| `size` | `sm \| md \| lg` | `md` | Closed union — panel max width, reusing the shared `sizes` primitive (384/448/512dp). |
+| `testID` | `string` | — | Also seeds `${testID}-backdrop` and `${testID}-panel`. |
+
+No `style`/`containerStyle` — see "Why no `style`" below.
+
+## Accessibility contract (WCAG)
+
+- **iOS modal context** — the panel sets `accessibilityViewIsModal`, so VoiceOver constrains
+  navigation to the dialog's content while it's open.
+- **1.4.3** — the title is measured ≥ 4.5:1 against the panel fill (`bg.surface`) for every brand ×
+  mode via `resolveModalPanelColors`.
+- **2.3.3** — `resolveModalAnimationType(reducedMotion)` returns `"none"` instead of `"fade"` when
+  the OS reduce-motion setting is on.
+- The title is `accessibilityRole="header"`, giving it heading semantics for screen readers.
+- The backdrop is `accessible={false}` — a decorative dismiss target, not a focusable element (same
+  treatment as `Select`'s backdrop). It is never the *only* way to close: Android hardware back also
+  fires `onRequestClose`, and the panel's `onAccessibilityEscape={onRequestClose}` gives iOS
+  VoiceOver users a real two-finger-Z "escape" gesture to dismiss without hunting for the invisible
+  backdrop. (RN's `<Modal>` only treats a swipe as a dismiss when `allowSwipeDismissal` is passed —
+  this component doesn't set it — and `transparent` with no `presentationStyle` forces
+  `overFullScreen`, which has no native iOS swipe-to-dismiss gesture at all; `onAccessibilityEscape`
+  is the real, working native hook here, not a swipe.)
+- No touch-target sizing needed: the only interactive surface is the full-screen backdrop, already
+  far larger than the 44dp floor.
+
+## Why no `style`
+
+Every other module's `style: LayoutStyle` places the component within a *parent's* layout flow
+(margin, flex, alignSelf). `Modal` is presented through RN's own portal — there is no parent flow
+to place it in, and its one real sizing lever (panel width) is already the closed `size` union. The
+component spec omits `style` rather than including it as an unused escape hatch.
+
+## Web portal mechanism (opt-in)
+
+`react-native-web`'s own `<Modal>` unconditionally portals to `document.body`
+(`ModalPortal.js` in the installed 0.21.2 does `document.body.appendChild(...)` then
+`createPortal(children, elementRef.current)` — no `container`/`portalHost` prop exists to
+override it, confirmed by reading the source). That's correct for a full app, but breaks visual
+containment inside a fixed-size preview frame (`example/DeviceFrame.tsx`'s 390px phone card): the
+overlay renders full-browser-viewport instead of clipped to the frame. Same problem, same fix, for
+`Select`'s option sheet, `MultiSelect`'s option sheet, and `Menu`'s action sheet — all three render
+their own RN `<Modal>` directly (never this module's `Modal` component) and read the identical
+mechanism below.
+
+- **`ModalPortalContext`** — a `React.Context<unknown>`, default `null`. `unknown` because this
+  package has no `"dom"` lib entry (native has no DOM) — a `HTMLElement` type here wouldn't
+  compile. Internal; a consumer never reads it directly.
+- **`ModalPortalProvider`** — the public opt-in. `<ModalPortalProvider container={node}>` makes
+  every `Modal` / `AlertDialog` / `Select` / `MultiSelect` / `Menu` underneath portal into `node`
+  instead of `document.body`. Safe to mount unconditionally on every platform — there's no DOM to
+  portal into outside web, so `container` is simply never read off the context there.
+- **`renderWebPortal.ts` (base) / `renderWebPortal.web.ts` (web)** — a Metro platform-extension
+  pair, same idea as `theme/platform/*.native.ts` but the other direction: the BASE file (no
+  suffix) is the safe default every platform except an actual web bundle resolves to (a pure
+  no-op — always returns `null`), and `renderWebPortal.web.ts` (the only file that imports
+  `react-dom`) is what an actual web bundle resolves to instead. Metro never resolves
+  `react-dom` for a native bundle, so it's never part of that dependency graph — verified via
+  `expo export --platform ios` vs `--platform web`, grepping each bundle for a marker string
+  unique to each file. Jest's `react-native` preset has no `web` haste platform either, so every
+  test also resolves the base file by default — this is why `Modal.render.test.tsx` /
+  `Select.render.test.tsx` / `MultiSelect.render.test.tsx` / `Menu.render.test.tsx` mock
+  `renderWebPortal` directly to exercise the opt-in branch, and `renderWebPortal.web.test.ts` is the
+  one place the real `ReactDOM.createPortal` call is verified (mocking `react-dom` itself — no real
+  DOM under Jest).
+- **Backward compatibility (the hard bar):** `Platform.OS === "web" && portalContainer != null`
+  gates the whole mechanism — every existing consumer (native, or web with no provider) takes the
+  exact same code path as before this mechanism existed: RN's own `<Modal>`, untouched. Neither
+  `Modal.variants.ts` nor `Select.variants.ts`/`MultiSelect.variants.ts`/`Menu.variants.ts`'s
+  structural resolvers were touched — the portal path reproduces just the sizing RN's `<Modal>`
+  otherwise supplies (a `StyleSheet.absoluteFill` wrapper around the SAME backdrop+panel tree)
+  rather than changing the shared resolvers, so the default path's styles are provably unaffected.
+- **Known simplification:** the portal path skips RN `<Modal>`'s open/close animation entirely
+  (mounts/unmounts on `visible`/`open` directly) — `resolveModalAnimationType`/reduced-motion only
+  apply to the RNModal path. Acceptable: the goal is containment, not animation fidelity, and this
+  only affects a consumer that has opted in.
+- `react-dom` is an **optional peer dependency** (`peerDependenciesMeta.react-dom.optional`) —
+  only needed by an app that actually renders for web; native-only consumers never install it.
+
+## Patterns copied from Button / Select (the reference modules)
+
+1. **Structure vs colour split** — sizing/spacing/radius via `createThemedVariants`; colour
+   resolved from `RoleColors`, applied inline.
+2. **Pure, testable resolvers** in `Modal.variants.ts` — WCAG contrast and the reduced-motion
+   contract are unit-tested against real palettes, never eyeballed.
+3. **RN's own `<Modal>`, not a hand-rolled portal** — `transparent` + backdrop `Pressable` +
+   `pointerEvents="box-none"` overlay, the same shape `Select`'s option list uses (converged on
+   independently — this module owns none of that code, built in parallel).
+4. **Closed `size` union** reusing the shared `sizes` primitive (384/448/512dp) instead of
+   Modal-local numbers — `theme/tokens/primitives/sizes.ts` is documented for exactly this case.
+
+## Known gaps
+
+- **No full focus trap.** iOS gets `accessibilityViewIsModal` (constrains VoiceOver to the panel).
+  Android has no JS-level equivalent for marking background siblings
+  `importantForAccessibility="no-hide-descendants"` from inside this component (that prop applies
+  to the element it's set on, not to arbitrary siblings elsewhere in the tree) — a full Android
+  focus trap needs the app root to cooperate. Out of scope for v1.
+- **No built-in scrolling.** The panel caps at `maxHeight: "92%"` but does not wrap `children` in a
+  `ScrollView` — forcing one risks nested-`VirtualizedList` warnings if a consumer's content is
+  already scrollable. Tall content is the consumer's own `ScrollView`/`FlatList` to add.
+- No close ("×") button — not in this module's prop contract; dismissal is backdrop press, Android
+  back, or iOS VoiceOver's escape gesture. A consumer wanting an explicit close control renders its
+  own `Button` (`icon="x"`) inside `children`.
+
+## Performance
+
+Both `Modal` and `ModalPortalProvider` are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `Modal.tsx` has no `.map()` lists and no library child components (only RN host elements); `ModalPortalProvider` just passes `container`/`children` into a `Context.Provider` — nothing to memoize in either.

package/lib/module/modules/modal/Modal.js

@@ -0,0 +1,101 @@
+"use strict";
+
+/**
+ * Modal — the library's own dialog, built ON TOP of React Native's `<Modal>` (`transparent`,
+ * `animationType` "fade" unless the OS has reduced motion on, in which case "none"). A full-screen
+ * backdrop scrim dismisses it on press; the panel sits on `bg.surface` with `theme.radii.lg` and
+ * `theme.elevation.lg`, capped to one of three closed widths (`size`).
+ *
+ * Fully controlled: the caller owns `visible` and reacts to `onRequestClose`, which fires from the
+ * backdrop press, the Android hardware back button, and — via `onAccessibilityEscape` on the panel
+ * — iOS VoiceOver's two-finger-Z escape gesture. (RN's `<Modal>` only fires `onRequestClose` from a
+ * swipe when `allowSwipeDismissal` is passed, which this component doesn't set, and `transparent`
+ * with no `presentationStyle` forces `overFullScreen`, which has no native swipe-to-dismiss gesture
+ * on iOS at all — so the VoiceOver escape hook is the real iOS-native path here, not a swipe.)
+ * Never from an internal open/close state.
+ *
+ * Web portal opt-in: when an ancestor renders `ModalPortalProvider` (web only), this bypasses RN's
+ * `<Modal>` and portals the SAME backdrop+panel tree into the provided container via
+ * `renderWebPortal` instead — see `ModalPortalContext.ts` for why. Every other case (native, or web
+ * with no provider — the default `ModalPortalContext` value is `null`) renders through RN's own
+ * `<Modal>`, byte-identical to before this mechanism existed.
+ */
+
+import { memo, useContext } from "react";
+import { Modal as RNModal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useTheme } from "../../theme/index.js";
+import { ModalPortalContext } from "./ModalPortalContext.js";
+import { renderWebPortal } from "./renderWebPortal";
+import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType, resolveModalPanelColors } from "./Modal.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
+// justification as Button's PRESS_SCRIM_DARK/LIGHT and Select's BACKDROP_SCRIM.
+const MODAL_BACKDROP = "#00000080";
+export const Modal = /*#__PURE__*/memo(function Modal({
+  visible,
+  onRequestClose,
+  title,
+  children,
+  size = "md",
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const panelColors = resolveModalPanelColors(theme.colors);
+  const portalContainer = useContext(ModalPortalContext);
+  const overlay = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: MODAL_BACKDROP
+      }],
+      onPress: onRequestClose
+    }), /*#__PURE__*/_jsx(View, {
+      style: modalOverlayStructure(theme),
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-panel` : undefined,
+        accessibilityViewIsModal: true,
+        onAccessibilityEscape: onRequestClose,
+        style: [modalPanelStructure(theme, {
+          size
+        }), {
+          backgroundColor: panelColors.background
+        }],
+        children: [title !== undefined && /*#__PURE__*/_jsx(Text, {
+          accessibilityRole: "header",
+          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+            fontSize: theme.fontSizes.lg,
+            color: panelColors.title,
+            marginBottom: theme.space[3]
+          }],
+          children: title
+        }), children]
+      })
+    })]
+  });
+  if (Platform.OS === "web" && portalContainer != null) {
+    if (!visible) return null;
+    // RN's own <Modal> supplies a `position: fixed`/full-screen ancestor for `overlay`'s children
+    // to size against (see ModalPortalContext.ts) — reproduce just that sizing here (never touching
+    // the shared `modalOverlayStructure`/`modalPanelStructure` resolvers the RNModal path below
+    // still uses untouched) so the same tree fills `portalContainer`'s bounds instead of the
+    // viewport.
+    return renderWebPortal(/*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: overlay
+    }), portalContainer);
+  }
+  return /*#__PURE__*/_jsx(RNModal, {
+    visible: visible,
+    transparent: true,
+    animationType: resolveModalAnimationType(reducedMotion),
+    onRequestClose: onRequestClose,
+    children: overlay
+  });
+});
+//# sourceMappingURL=Modal.js.map

package/lib/module/modules/modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useContext","Modal","RNModal","Platform","Pressable","StyleSheet","Text","View","useReducedMotion","useTheme","ModalPortalContext","renderWebPortal","modalOverlayStructure","modalPanelStructure","resolveModalAnimationType","resolveModalPanelColors","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","MODAL_BACKDROP","visible","onRequestClose","title","children","size","testID","theme","reducedMotion","panelColors","colors","portalContainer","overlay","undefined","accessible","style","absoluteFill","backgroundColor","onPress","pointerEvents","accessibilityViewIsModal","onAccessibilityEscape","background","accessibilityRole","fontStyleForWeight","fontWeights","semibold","fontSize","fontSizes","lg","color","marginBottom","space","OS","transparent","animationType"],"sourceRoot":"../../../../src","sources":["modules/modal/Modal.tsx"],"mappings":"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","ignoreList":[]}