pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/message-bubble/MessageBubble.js

@@ -0,0 +1,55 @@
+"use strict";
+
+/**
+ * MessageBubble — a single chat turn bubble. User variant uses accent fill; assistant uses surface
+ * card with border. Plain-text `content` only (rich assistant replies compose Markdown/RichText
+ * upstream).
+ *
+ * The accessible label names the sender ("You" / "Assistant") ahead of the content: alignment and
+ * fill colour are the only things that say who spoke, and neither reaches a screen reader.
+ *
+ * No mount animation, by rule 5 of `core/motion/MODULE.md`: bubbles are list cells, and `FlatList`
+ * unmounts and remounts them as they leave and re-enter its window — a "plays once per mount" enter
+ * therefore replays for every bubble scrolled back into view, which is exactly the per-row motion
+ * during scroll that rule forbids. A "new message arrived" reveal would have to be keyed off the
+ * message's own identity (an id/timestamp high-water mark the consumer owns), never off mounting.
+ */
+
+import { memo, useMemo } from "react";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { messageBubbleStructure, resolveMessageBubbleAccessibility, resolveMessageBubbleColors } from "./MessageBubble.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
+  variant = "assistant",
+  content,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = resolveMessageBubbleColors(theme.colors, variant);
+  const a11y = resolveMessageBubbleAccessibility(content, variant);
+  const bubbleStyle = useMemo(() => [messageBubbleStructure(theme, {
+    variant
+  }), {
+    backgroundColor: colors.background,
+    borderColor: colors.border
+  }, style], [theme, variant, colors.background, colors.border, style]);
+  const textStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    lineHeight: theme.fontSizes.md * 1.45,
+    color: colors.text
+  }], [theme, colors.text]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: a11y.accessible,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    style: bubbleStyle,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: content
+    })
+  });
+});
+//# sourceMappingURL=MessageBubble.js.map

package/lib/module/modules/message-bubble/MessageBubble.variants.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export function resolveMessageBubbleColors(colors, variant) {
+  if (variant === "user") {
+    return {
+      background: colors.accent.solid,
+      text: colors.accent.onSolid
+    };
+  }
+  return {
+    background: colors.bg.surface,
+    text: colors.fg.default,
+    border: colors.border.default
+  };
+}
+export const messageBubbleStructure = createThemedVariants(theme => ({
+  base: {
+    maxWidth: "85%",
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radii.lg
+  },
+  variants: {
+    variant: {
+      user: {
+        alignSelf: "flex-end",
+        borderBottomRightRadius: theme.radii.sm
+      },
+      assistant: {
+        alignSelf: "flex-start",
+        borderBottomLeftRadius: theme.radii.sm,
+        borderWidth: theme.borderWidths.thin
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "assistant"
+  }
+}));
+const SENDER = {
+  user: "You",
+  assistant: "Assistant"
+};
+
+/**
+ * Who sent a turn is carried only by `alignSelf` and the bubble fill on screen, so the label has to
+ * name the sender for it to reach assistive tech at all (WCAG 1.3.1).
+ */
+export function resolveMessageBubbleAccessibility(content, variant) {
+  return {
+    accessible: true,
+    accessibilityRole: "text",
+    accessibilityLabel: `${SENDER[variant]}: ${content}`
+  };
+}
+//# sourceMappingURL=MessageBubble.variants.js.map

package/lib/module/modules/message-bubble/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { MessageBubble } from "./MessageBubble.js";
+//# sourceMappingURL=index.js.map

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

@@ -20,6 +20,7 @@ VoiceOver's escape gesture via `onAccessibilityEscape`).
 | `__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). |
+| `__tests__/Modal.keyboard.web.test.tsx` | Escape / Tab trap / focus restore on the portal branch, and their deliberate ABSENCE on the RNModal branch. |
 
 ## Props
 
@@ -107,6 +108,21 @@ mechanism below.
 - `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.
 
+### Keyboard — the portal branch has to supply its own
+
+Every keyboard behaviour a web `<Modal>` has comes from `react-native-web`'s own `ModalContent`
+(Escape) and `ModalFocusTrap` (Tab cycling + focus restore). The portal branch renders no
+`<RNModal>`, so mounting a `ModalPortalProvider` silently lost all three at once: Escape did
+nothing, Tab walked into the page behind the scrim, and closing dropped focus on `<body>`.
+
+`Modal.tsx` therefore calls `useDismissOnEscape` + `useFocusTrap` (`core/a11y/keyboard`, imported
+directly — not through the `core/a11y` barrel) gated on `portalled && visible`. **The RNModal path
+must stay unwired**: two Escape listeners and two competing traps on one dialog is a worse bug than
+the one being fixed. Both hooks are no-ops on native by file resolution, so nothing changes there.
+
+`AlertDialog`, `LimitReachedModal` and `ImageViewer` compose this component and inherit all of it —
+none of them contains keyboard code, and each has a test asserting the inheritance.
+
 ## Patterns copied from Button / Select (the reference modules)
 
 1. **Structure vs colour split** — sizing/spacing/radius via `createThemedVariants`; colour
@@ -121,11 +137,15 @@ mechanism below.
 
 ## Known gaps
 
-- **No full focus trap.** iOS gets `accessibilityViewIsModal` (constrains VoiceOver to the panel).
-  Android has no JS-level equivalent for marking background siblings
+- **No full SCREEN-READER 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.
+  reader trap needs the app root to cooperate. Out of scope for v1. (The web *keyboard* trap above
+  is a separate mechanism and is wired.)
+- **The web keyboard trap only cycles Tab.** It does not pull focus back if focus leaves the panel
+  by a click outside or a programmatic `focus()` — that needs sentinel nodes at the panel's edges,
+  a component-level change nobody has needed yet. Inherited from `core/a11y/keyboard`.
 - **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.
@@ -136,3 +156,9 @@ mechanism below.
 ## 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.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

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

@@ -6,6 +6,12 @@
  * 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`).
  *
+ * Motion split: RN's own `animationType` owns the SURFACE fade (in AND out, natively, with no JS
+ * timer), and the global motion system (`core/motion`) owns the panel's own entrance lift. The exit
+ * is deliberately left to the native transition — a JS-timed exit would have to keep the `<Modal>`
+ * mounted past `visible`, widening the window in which iOS drops a sibling `<Modal>` presented while
+ * this one is dismissing.
+ *
  * 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
@@ -19,12 +25,19 @@
  * `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.
+ *
+ * Physical-keyboard support is scoped to exactly that portal branch. `react-native-web`'s own
+ * `<Modal>` already ships Escape, a Tab trap and focus restore (`ModalContent`/`ModalFocusTrap`),
+ * so the RNModal path below must stay untouched — wiring the hooks there too would give the page
+ * two Escape listeners and two competing traps. The portal branch renders no `<RNModal>` at all,
+ * which is where all three silently went missing.
  */
 
-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 { memo, useContext, useEffect, useMemo, useRef } from "react";
+import { Animated, Modal as RNModal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { ModalPortalContext } from "./ModalPortalContext.js";
 import { renderWebPortal } from "./renderWebPortal";
 import { modalOverlayStructure, modalPanelStructure, resolveModalAnimationType, resolveModalPanelColors } from "./Modal.variants.js";
@@ -42,42 +55,73 @@ export const Modal = /*#__PURE__*/memo(function Modal({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const panelColors = resolveModalPanelColors(theme.colors);
+  const motion = useMotion();
+  const panelColors = useMemo(() => resolveModalPanelColors(theme.colors), [theme.colors]);
   const portalContainer = useContext(ModalPortalContext);
+  const panelRef = useRef(null);
+  const portalled = Platform.OS === "web" && portalContainer != null;
+  useDismissOnEscape(portalled && visible, onRequestClose);
+  useFocusTrap(panelRef, portalled && visible);
+  const enter = useAnimatedValue(visible ? 1 : 0);
+  const entering = useRef(null);
+  useEffect(() => {
+    entering.current?.stop();
+    if (!visible) {
+      enter.setValue(0);
+      return;
+    }
+    if (!motion.enabled) {
+      enter.setValue(1);
+      return;
+    }
+    enter.setValue(0);
+    entering.current = motion.timing(enter, 1, {
+      easing: "decelerate"
+    });
+    entering.current.start();
+  }, [visible, motion, enter]);
+  useEffect(() => () => entering.current?.stop(), []);
+  const panelStyle = useMemo(() => [modalPanelStructure(theme, {
+    size
+  }), {
+    backgroundColor: panelColors.background,
+    transform: [{
+      translateY: enter.interpolate({
+        inputRange: [0, 1],
+        outputRange: [motion.transform.offsetY, 0]
+      })
+    }]
+  }], [theme, size, panelColors.background, enter, motion.transform.offsetY]);
+  const titleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.lg,
+    color: panelColors.title,
+    marginBottom: theme.space[3]
+  }], [theme, panelColors.title]);
   const overlay = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: MODAL_BACKDROP
-      }],
+      tabIndex: -1,
+      style: styles.backdrop,
       onPress: onRequestClose
     }), /*#__PURE__*/_jsx(View, {
       style: modalOverlayStructure(theme),
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(View, {
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        ref: panelRef,
         testID: testID ? `${testID}-panel` : undefined,
         accessibilityViewIsModal: true,
         onAccessibilityEscape: onRequestClose,
-        style: [modalPanelStructure(theme, {
-          size
-        }), {
-          backgroundColor: panelColors.background
-        }],
+        style: panelStyle,
         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]
-          }],
+          style: titleStyle,
           children: title
         }), children]
       })
     })]
   });
-  if (Platform.OS === "web" && portalContainer != null) {
+  if (portalled) {
     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
@@ -93,9 +137,15 @@ export const Modal = /*#__PURE__*/memo(function Modal({
   return /*#__PURE__*/_jsx(RNModal, {
     visible: visible,
     transparent: true,
-    animationType: resolveModalAnimationType(reducedMotion),
+    animationType: resolveModalAnimationType(!motion.enabled),
     onRequestClose: onRequestClose,
     children: overlay
   });
 });
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: MODAL_BACKDROP
+  }
+});
 //# sourceMappingURL=Modal.js.map

package/lib/module/modules/more-items/MODULE.md

@@ -0,0 +1,72 @@
+# more-items/ — a "+N more" overflow affordance
+
+`MoreItems` is a `Pressable` "+N more" badge (with optional leading text) that opens a `Modal` sheet
+listing the hidden items, each with an optional tone dot. It is the overflow tail for any capped
+row — assignees, tags, labels — so a caller renders the first few itself and hands the rest here.
+
+Fully controlled and store-agnostic: `items` and `moreCount` come from the host, and the component
+owns nothing but its open/closed state.
+
+## Files
+
+| File | Role |
+|------|------|
+| `MoreItems.tsx` | The component: trigger, `Modal` sheet, and the memo'd `MoreItemsRow`. |
+| `MoreItems.variants.ts` | Pure `resolveMoreItemsCount` / `resolveMoreItemsDotColor` (tone reuses `Badge`'s tone table) + the themed structural resolvers. No React. |
+| `index.ts` | Public surface: `MoreItems`, `MoreItemsProps`, `MoreItemsEntry`. |
+| `__tests__/MoreItems.test.ts` | Pure: the count fallback (`moreCount` wins over `items.length`). |
+| `__tests__/MoreItems.render.test.tsx` | Render: the trigger opens the sheet, the entries show, the real rendered touch-target size, label-in-name, modal semantics, and the hidden tone dot. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `readonly MoreItemsEntry[]` | — | `{ id, label, tone? }`; `tone` is a `BadgeTone`, defaulting to `accent`. |
+| `moreCount` | `number` | `items.length` | The number on the badge when it differs from the list length. |
+| `triggerText` | `string` | — | Optional text before the badge. Rendered alone when the count is ≤0. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Trigger gets it directly. Also seeds `${testID}-sheet`, `${testID}-backdrop`, `${testID}-list` and `${testID}-row-${item.id}` (+ `-dot` under that). |
+
+Renders `null` when the count is ≤0 and there is no `triggerText` — nothing to overflow.
+
+## Accessibility
+
+- **Touch target (WCAG 2.5.5 / 2.5.8)** — the trigger carries `minHeight: 44` (this library's
+  floor). It is a standalone node with no neighbouring target to overlap, so the floor is real
+  height via `minHeight`, not `hitSlop` expansion the way `Button`'s shorter sizes reach it.
+- **Label in Name (WCAG 2.5.3)** — the accessible name is built to CONTAIN the visible text
+  (`"${triggerText} +${count} more"`, or just `"+${count} more"` with no leading text), not a
+  separately-worded `"${count} more items"`. Voice control says what it reads; the old name shared no
+  full word with what was on screen.
+- **Modal semantics** — the sheet panel carries `accessibilityViewIsModal` + `onAccessibilityEscape`,
+  the same pair every other overlay in this library gives its panel, and an `accessibilityLabel`
+  matching the trigger's name. The scrim `Pressable` is `accessible={false}` + `tabIndex={-1}` so it
+  doesn't surface as an unlabelled full-screen button ahead of the sheet.
+- **Colour as sole carrier (WCAG 1.4.1)** — a row's tone dot has no text equivalent for its colour, so
+  it is `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"`; the row
+  itself is one `accessible` node with `accessibilityRole="text"` reading only the label.
+
+## Performance contract
+
+- The sheet's list is `core/list`'s `VirtualList`, not a `ScrollView` + `.map()`: `items` is
+  caller-supplied and unbounded, so a long overflow list would otherwise mount every row at once.
+  **No `itemHeight`** is passed — a row's height is text-driven (it grows with the OS font scale),
+  so a fixed `getItemLayout` would mis-position the scroll offset.
+- `MoreItemsRow` is extracted + `React.memo`'d; `renderItem`/`keyExtractor` are `useCallback`s.
+- Every `*Structure(theme)` result, `resolveMoreItemsDotColor` call and style array literal is
+  `useMemo`'d on `[theme]` (plus `[item.tone]` in the row) — a fresh object per render defeats the
+  row's `memo`.
+
+## Motion (`core/motion` only — never a local duration)
+
+- **Press** — the trigger uses `usePressMotion`, applied to an inner `Animated.View` so the
+  consumer's `style` stays on the outermost node.
+- **Sheet** — `useEnterExit(open)` on the panel; the `Modal` keeps `visible={open}` with
+  `animationType="none"` so the library owns the reveal and the sheet fully unmounts when closed.
+- Rows carry no motion of their own: they are not interactive, and per-row animation must never run
+  during scroll.
+
+## Known gaps
+
+- Rows are display-only — no press/selection. A selectable overflow list would be a different
+  component (`Select`/`Menu`), not a prop added here.

package/lib/module/modules/more-items/MoreItems.js

@@ -0,0 +1,162 @@
+"use strict";
+
+/**
+ * MoreItems — "+N more" overflow affordance opening a sheet of hidden items (avatars, tags, etc.).
+ */
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Animated, Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { VirtualList } from "../../core/list/index.js";
+import { useEnterExit, usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { moreItemsBadgeStructure, moreItemsDotStructure, moreItemsOverlayStructure, moreItemsRowStructure, moreItemsSheetStructure, moreItemsTriggerContentStructure, moreItemsTriggerStructure, resolveMoreItemsCount, resolveMoreItemsDotColor } from "./MoreItems.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BACKDROP = "#00000080";
+const MoreItemsRow = /*#__PURE__*/memo(function MoreItemsRow({
+  item,
+  theme,
+  testID
+}) {
+  const rowStructure = useMemo(() => moreItemsRowStructure(theme), [theme]);
+  const dotStyle = useMemo(() => [moreItemsDotStructure(theme), {
+    backgroundColor: resolveMoreItemsDotColor(theme.colors, item.tone)
+  }], [theme, item.tone]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    flex: 1
+  }], [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: "text",
+    style: rowStructure,
+    children: [/*#__PURE__*/_jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-dot`,
+      style: dotStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants"
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: item.label
+    })]
+  });
+});
+export const MoreItems = /*#__PURE__*/memo(function MoreItems({
+  items,
+  moreCount,
+  triggerText,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const press = usePressMotion();
+  const sheetMotion = useEnterExit(open);
+  const count = resolveMoreItemsCount(moreCount, items.length);
+  const openSheet = useCallback(() => setOpen(true), []);
+  const closeSheet = useCallback(() => setOpen(false), []);
+  const emptyTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default
+  }], [theme]);
+  const triggerStyle = useMemo(() => [moreItemsTriggerStructure(theme), style], [theme, style]);
+  const triggerContentStructure = useMemo(() => moreItemsTriggerContentStructure(theme), [theme]);
+  const triggerTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    flexShrink: 1
+  }], [theme]);
+  const badgeStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), moreItemsBadgeStructure(theme), {
+    color: theme.colors.accent.text,
+    backgroundColor: theme.colors.accent.subtle
+  }], [theme]);
+  const overlayStructure = useMemo(() => moreItemsOverlayStructure(theme), [theme]);
+  const sheetStyle = useMemo(() => [moreItemsSheetStructure(theme), {
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+
+  // WCAG 2.5.3: the accessible name must CONTAIN the visible text, or a voice-control user saying
+  // what they can read ("tap plus three more") never activates the trigger.
+  const accessibleName = triggerText === undefined ? `+${count} more` : `${triggerText} +${count} more`;
+  const keyExtractor = useCallback(item => item.id, []);
+  const renderItem = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(MoreItemsRow, {
+    item: item,
+    theme: theme,
+    testID: testID === undefined ? undefined : `${testID}-row-${item.id}`
+  }), [theme, testID]);
+  if (count <= 0) {
+    return triggerText ? /*#__PURE__*/_jsx(Text, {
+      style: emptyTextStyle,
+      children: triggerText
+    }) : null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleName,
+      accessibilityHint: "Opens the full list",
+      onPress: openSheet,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      style: triggerStyle,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: [triggerContentStructure, press.style],
+        children: [triggerText !== undefined && /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: triggerTextStyle,
+          children: triggerText
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: badgeStyle,
+          children: ["+", count, " more"]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: closeSheet,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        testID: testID === undefined ? undefined : `${testID}-backdrop`
+        // Otherwise the scrim is an unlabelled full-screen button sitting ahead of the sheet.
+        ,
+        accessible: false,
+        tabIndex: -1,
+        style: StyleSheet.absoluteFill,
+        onPress: closeSheet,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.backdrop
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: overlayStructure,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          testID: testID ? `${testID}-sheet` : undefined
+          // The modal-semantics pair every other overlay in this library gives its panel, plus a
+          // name: the sheet had neither, so VoiceOver could wander into the row behind it.
+          ,
+          accessibilityViewIsModal: true,
+          onAccessibilityEscape: closeSheet,
+          accessibilityLabel: accessibleName,
+          style: [sheetStyle, sheetMotion.style],
+          children: /*#__PURE__*/_jsx(VirtualList, {
+            data: items,
+            keyExtractor: keyExtractor,
+            renderItem: renderItem,
+            testID: testID === undefined ? undefined : `${testID}-list`
+          })
+        })
+      })]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: BACKDROP
+  }
+});
+//# sourceMappingURL=MoreItems.js.map

package/lib/module/modules/more-items/MoreItems.variants.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+import { resolveBadgeTone } from "../badge/Badge.variants.js";
+export function resolveMoreItemsCount(moreCount, itemsLength) {
+  return moreCount ?? itemsLength;
+}
+
+/** Tone dot beside each overflow label. */
+export const MORE_ITEMS_DOT_SIZE = 8;
+
+/** The sheet never grows past this — the list inside it scrolls (and virtualizes). */
+export const MORE_ITEMS_SHEET_MAX_HEIGHT = 280;
+
+/**
+ * 44dp is Apple's HIG minimum and WCAG 2.5.5 (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). The
+ * trigger reaches it with `minHeight` rather than `hitSlop`: it is a standalone node with no
+ * neighbouring target to overlap, and a slop-expanded rectangle would still leave a ~22dp visual
+ * control that misses under an unsteady finger.
+ */
+export const MIN_TOUCH_TARGET = 44;
+export const moreItemsTriggerStructure = createThemedVariants(_theme => ({
+  base: {
+    maxWidth: 250,
+    minHeight: MIN_TOUCH_TARGET,
+    justifyContent: "center"
+  }
+}));
+
+/** The trigger's animated layer: press motion moves the content, never the outer layout box. */
+export const moreItemsTriggerContentStructure = createThemedVariants(_theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+}));
+
+/** Overflow-list row. Height is text-driven (font scaling), so the list gets no fixed itemHeight. */
+export const moreItemsRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[2],
+    paddingVertical: theme.space[1]
+  }
+}));
+export const moreItemsDotStructure = createThemedVariants(theme => ({
+  base: {
+    width: MORE_ITEMS_DOT_SIZE,
+    height: MORE_ITEMS_DOT_SIZE,
+    borderRadius: theme.radii.full
+  }
+}));
+export const moreItemsOverlayStructure = createThemedVariants(theme => ({
+  base: {
+    flex: 1,
+    justifyContent: "center",
+    padding: theme.space[4]
+  }
+}));
+export const moreItemsSheetStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.lg,
+    padding: theme.space[3],
+    maxHeight: MORE_ITEMS_SHEET_MAX_HEIGHT
+  }
+}));
+export const moreItemsBadgeStructure = createThemedVariants(theme => ({
+  base: {
+    marginLeft: theme.space[1],
+    paddingHorizontal: theme.space[2],
+    paddingVertical: 2,
+    borderRadius: theme.radii.full,
+    fontSize: theme.fontSizes.xs
+  }
+}));
+export function resolveMoreItemsDotColor(colors, tone = "accent") {
+  return resolveBadgeTone(colors, tone).text;
+}
+//# sourceMappingURL=MoreItems.variants.js.map

package/lib/module/modules/more-items/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { MoreItems } from "./MoreItems.js";
+//# sourceMappingURL=index.js.map