pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/multi-select/MODULE.md

@@ -35,6 +35,8 @@ context + a stateless helper with no React-tree footprint of its own, not a depe
 | `onValuesChange` | `(values: string[]) => void` | — | Required. Fired immediately on row press with the next array — no separate Apply/Cancel. |
 | `placeholder` | `string` | — | Shown when `values` is empty. |
 | `label` | `string` | — | Field label above the trigger; also folded into its accessible name. |
+| `status` | `InputStatus` (`Input.variants`) | `default` | `"error"` swaps the trigger border to `status.danger.solid` at `2`dp and sets `aria-invalid`. |
+| `errorText` | `string` | — | Rendered under the trigger, only while `status === "error"`. |
 | `disabled` | `boolean` | `false` | Blocks opening the sheet; dimmed like Select's disabled state. |
 | `size` | `sm \| md \| lg` | `md` | 32 / 40 / 48 dp; short sizes reach 44 via `hitSlop`. |
 | `containerStyle` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
@@ -67,6 +69,8 @@ caller-configurable.
 - Each option row is `accessibilityRole="checkbox"` with flat `aria-checked`, toggled immediately on
   press — the indicator box (outline when unchecked, `accent.solid` fill + "check" glyph when
   checked) is the sighted echo of the same state, never the only signal.
+- **Android** — the trigger (gated `!disabled`), the header close button and every option row carry
+  `android_ripple` (`borderless: false`); trigger and close button clip it with `overflow: "hidden"`.
 - The header close button is `accessibilityRole="button"` with a fixed `accessibilityLabel="Close"`
   (icon-only, hardcoded — not a caller-configurable slot); its icon shares the row label's colour
   pairing, already measured ≥ 3:1 (in practice ≥ 4.5:1) on the sheet fill.
@@ -84,8 +88,7 @@ caller-configurable.
 2. **Pure, testable resolvers** in `MultiSelect.variants.ts` — the WCAG + behaviour contract is
    unit-tested against real palettes, never eyeballed.
 3. **Row indicator colours mirror `Checkbox`'s role mapping** (`border.interactive` /
-   `accent.solid` / `accent.onSolid`) — duplicated locally, not imported: modules never import
-   across `src/modules/*`.
+   `accent.solid` / `accent.onSolid`) — duplicated locally rather than imported from `checkbox/`.
 4. **Closed-ish surface** — `size` is a closed union; `options`/`values`/`onValuesChange` are the
    data contract a multi-select inherently needs, not a colour escape hatch. `containerStyle` is the
    one `style` exception (a component wrapping a native primitive's outer box), not a second `style` prop.
@@ -160,12 +163,3 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
   why `useEnterExit`'s `mounted` gate was dropped; `Select`/`Combobox` use the identical gate.
 - No chip/token UI on the trigger, so there is nothing to animate there (see Known gaps).
 
-## 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.
-
-- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
-- **Round 5 (Android parity)** — `android_ripple` (`borderless: false`) added to the trigger (gated
-  `!disabled`), the header close button, and each option row. The trigger and close button also
-  gained `overflow: "hidden"` so their ripple clips to their shape.

package/lib/module/modules/multi-select/MultiSelect.js

@@ -5,19 +5,21 @@
  */
 
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { focusItemProps, useDismissOnEscape, useFocusTrap, useRovingKeys, useSpaceActivation } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
-import { useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useMotion, useAnimatedValue, usePressMotion, useReveal } from "../../core/motion/index.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { MULTI_SELECT_CLOSE_BUTTON_HIT_SLOP, MULTI_SELECT_CLOSE_ICON_SIZE, MULTI_SELECT_LISTBOX_ROLE, MULTI_SELECT_ROW_ICON_SIZE, MULTI_SELECT_ROW_MIN_HEIGHT, MULTI_SELECT_SIZES, multiSelectCloseButtonStructure, multiSelectHeaderStructure, multiSelectOverlayStructure, multiSelectRowIndicatorStructure, multiSelectRowLeadingStructure, multiSelectRowStructure, multiSelectSheetStructure, multiSelectTriggerStructure, resolveMultiSelectAccessibility, resolveMultiSelectRowColors, resolveMultiSelectTriggerColors } from "./MultiSelect.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-const BACKDROP_SCRIM = "#00000099";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
   option,
   checked,
@@ -42,19 +44,18 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
 
   // `checkbox` is not `button`, so RNW never presses on Space — see `core/a11y/keyboard.web.ts`.
   useSpaceActivation(rowRef, handlePress);
-  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const checkOpacity = useAnimatedValue(checked ? 1 : 0);
   const skipFirst = useRef(true);
   const running = useRef(null);
   useEffect(() => {
     running.current?.stop();
-    // A row scrolled into view already-checked must snap, never fade.
     if (skipFirst.current) {
       skipFirst.current = false;
-      checkOpacity.setValue(checked ? 1 : 0);
+      checkOpacity.value = checked ? 1 : 0;
       return;
     }
     if (!motion.enabled) {
-      checkOpacity.setValue(checked ? 1 : 0);
+      checkOpacity.value = checked ? 1 : 0;
       return;
     }
     running.current = motion.timing(checkOpacity, checked ? 1 : 0, {
@@ -64,6 +65,9 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
     return () => running.current?.stop();
   }, [checked, motion, checkOpacity]);
   useEffect(() => () => running.current?.stop(), []);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const rowStructure = useMemo(() => multiSelectRowStructure(theme), [theme]);
   const indicatorStructure = useMemo(() => multiSelectRowIndicatorStructure(theme), [theme]);
   const leadingStructure = useMemo(() => multiSelectRowLeadingStructure(theme), [theme]);
@@ -96,16 +100,14 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: rowStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
       style: [rowStructure, press.style],
       children: [/*#__PURE__*/_jsx(View, {
         style: indicatorStyle,
-        children: checked && /*#__PURE__*/_jsx(Animated.View, {
+        children: checked && /*#__PURE__*/_jsx(Reanimated.View, {
           testID: testID ? `${testID}-option-${option.value}-check` : undefined,
-          style: {
-            opacity: checkOpacity
-          },
+          style: checkStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: "check",
             size: MULTI_SELECT_ROW_ICON_SIZE,
@@ -115,7 +117,7 @@ const MultiSelectOptionRow = /*#__PURE__*/memo(function MultiSelectOptionRow({
         })
       }), option.leading !== undefined && /*#__PURE__*/_jsx(View, {
         style: leadingStructure,
-        children: option.leading
+        children: renderNodeSlot(option.leading, labelStyle)
       }), /*#__PURE__*/_jsx(Text, {
         numberOfLines: 1,
         style: labelStyle,
@@ -130,6 +132,8 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
   onValuesChange,
   placeholder,
   label,
+  status = "default",
+  errorText,
   disabled = false,
   size = "md",
   containerStyle,
@@ -209,10 +213,11 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
     size
   }), {
     backgroundColor: triggerColors.background,
-    borderColor: triggerColors.border
+    borderColor: status === "error" ? theme.colors.status.danger.solid : triggerColors.border,
+    borderWidth: status === "error" ? 2 : theme.borderWidths.thin
   }, {
     overflow: "hidden"
-  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled]);
+  }, disabled && styles.dimmed], [theme, size, triggerColors, disabled, status]);
   const triggerRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
     color: rippleColor(theme.mode),
     borderless: false
@@ -247,9 +252,10 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
       style: styles.backdrop,
       onPress: closeMenu
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         ref: sheetRef,
         style: [sheetStyle, reveal.style],
         children: [/*#__PURE__*/_jsx(View, {
@@ -280,8 +286,9 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
     })]
   }) : null;
   const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    style: [StyleSheet.absoluteFill, {
+      pointerEvents: 'box-none'
+    }],
     children: sheet
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
@@ -302,6 +309,7 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
       accessibilityRole: a11y.accessibilityRole,
       accessibilityLabel: accessibleName,
       "aria-disabled": a11y["aria-disabled"],
+      "aria-invalid": status === "error" ? true : undefined,
       "aria-expanded": a11y["aria-expanded"],
       disabled: a11y.disabled,
       onPress: openMenu,
@@ -320,7 +328,14 @@ export const MultiSelect = /*#__PURE__*/memo(function MultiSelect({
         color: triggerColors.icon,
         strokeWidth: ICON_STROKE
       })]
-    }), menu]
+    }), status === "error" && errorText ? /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: theme.colors.status.danger.solid,
+        marginTop: theme.space[1]
+      }],
+      children: errorText
+    }) : null, menu]
   });
 });
 const styles = StyleSheet.create({

package/lib/module/modules/multi-select/MultiSelect.variants.js

@@ -18,10 +18,12 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
+
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 export const MULTI_SELECT_SIZES = {
   sm: {
     height: 32,

package/lib/module/modules/multi-select/MultiSelectProps.js

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

package/lib/module/modules/notification-bell/MODULE.md

@@ -0,0 +1,8 @@
+# notification-bell/ — an icon trigger with an unread count badge
+
+Ghost `Button` (bell icon) with an `UnreadBadge` overlay, shown only when `unreadCount > 0`. Panel
+composition stays in the app (`BottomSheet` / `Menu`).
+
+## Exports
+
+- `NotificationBell` — `unreadCount` (`number`, default `0`), `onPress` (required), `style`, `testID`

package/lib/module/modules/notification-bell/NotificationBell.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { memo } from "react";
+import { View } from "react-native";
+import { Button } from "../button/index.js";
+import { UnreadBadge } from "../unread-badge/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const NotificationBell = /*#__PURE__*/memo(function NotificationBell({
+  unreadCount = 0,
+  onPress,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "relative",
+        alignSelf: "flex-start"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "ghost",
+        icon: "bell",
+        accessibilityLabel: "Notifications",
+        onPress: onPress,
+        testID: testID ? `${testID}-button` : undefined
+      }), unreadCount > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          top: 4,
+          right: 4,
+          pointerEvents: 'none'
+        },
+        children: /*#__PURE__*/_jsx(UnreadBadge, {
+          count: unreadCount,
+          size: "sm"
+        })
+      }) : null]
+    })
+  });
+});
+//# sourceMappingURL=NotificationBell.js.map

package/lib/module/modules/notification-bell/NotificationBellProps.js

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

package/lib/module/modules/notification-bell/index.js

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

package/lib/module/modules/number-input/MODULE.md

@@ -8,8 +8,8 @@ TWO trailing controls, which doesn't fit Input's single leading/trailing icon sl
 
 | File | Role |
 |------|------|
-| `NumberInput.tsx` | The component. Composition, draft/clamp wiring, a11y, focus ring, stepper buttons. |
-| `NumberInput.variants.ts` | Pure resolvers (`NUMBER_INPUT_SIZES`, `resolveNumberInputStatus`, `resolveNumberInputStepperPressColors`, `resolveNumberInputAccessibility`, `clampNumberInputValue`, `parseNumberInputDraft`, `canDecrementNumberInput`, `canIncrementNumberInput`) + the themed structural resolvers `numberInputStructure` / `numberInputStepperStructure`. No React, no lucide. |
+| `NumberInput.tsx` | The component. Composition, draft/clamp wiring, a11y, focus ring (local `FOCUS_RING_WIDTH`/`FOCUS_RING_GAP` + `stepperFocusRingStyle`), stepper buttons. |
+| `NumberInput.variants.ts` | Pure resolvers (`NUMBER_INPUT_SIZES`, `resolveNumberInputStatus`, `resolveNumberInputStepperPressColors`, `resolveNumberInputAccessibility`, `clampNumberInputValue`, `parseNumberInputDraft`, `canDecrementNumberInput`, `canIncrementNumberInput`) + the themed structural resolvers `numberInputStructure` / `numberInputStepperStructure`. `MIN_TOUCH_TARGET` / `slopFor` from `core/a11y/touchTarget`. No React, no lucide. |
 | `index.ts` | Public surface: `NumberInput`, `NumberInputProps`, the closed unions. No `icon` prop, so `IconName` is not re-exported. |
 | `__tests__/NumberInput.test.ts` | Pure: WCAG contrast (all brands × modes, incl. the stepper pressed-fill) + touch target + clamp/parse/limit + a11y contract. |
 | `__tests__/NumberInput.render.test.tsx` | Render: stepper press, typed input, clamping, disabled/at-limit, the field's and each stepper's own focus ring, the rendered `hitSlop`, `accessibilityValue`, and the increment/decrement accessibility actions. |
@@ -26,7 +26,7 @@ TWO trailing controls, which doesn't fit Input's single leading/trailing icon sl
 | `status` | `default \| error` | `default` | Closed union — a **state**, not a brand `tone` (same reasoning as Input). |
 | `disabled` | `boolean` | `false` | Dims the field; blocks editing and both steppers. |
 | `label` | `string` | — | Rendered above the field; falls back into `accessibilityLabel`. |
-| `errorText` | `string` | — | Shown below the field and folded into the accessible name (`aria-invalid` set) when `status="error"` — same prop name and rule as `Input`/`FormField`. Previously `status="error"` was border-colour only, with no message and no programmatic invalid flag (WCAG 3.3.1 / 1.4.1). |
+| `errorText` | `string` | — | Shown below the field and folded into the accessible name (`aria-invalid` set) when `status="error"` — same prop name and rule as `Input`/`FormField`. |
 | `accessibilityLabel` | `string` | `label` | Overrides the label fallback. |
 | `containerStyle` | `LayoutStyle` | — | The documented exception for a native-primitive wrapper. Outermost, last, once. Never `inputStyle`. |
 | `testID` | `string` | — | Forwarded to the `TextInput`; the steppers get `${testID}-decrement` / `${testID}-increment`. |
@@ -62,11 +62,9 @@ typed values are clamped to range but never snapped to a `step` grid.
   `accessibilityValue`, so object-only would be silently dropped on web. Both forms, one per
   platform. A bound the caller omitted is **left out**, never defaulted to `0` — absent means "no
   floor"/"no ceiling" here.
-  **Corrected claim:** this file previously said the announced text is `String(value)` "verbatim" —
-  false. `value` and the field's own visible `draft` state diverge while typing (e.g. a keystroke
-  that doesn't parse yet, or one that clamps), and the announcement used to speak `value` while the
-  screen showed `draft` — a 4.1.2 failure in itself. The announced text is now `draft`, matching what
-  is actually on screen; `now` stays the raw, unclamped `value` (unlike `Slider`'s clamped `now`).
+  `aria-valuetext` announces the visible `draft`, not `value` — the two diverge while typing (a
+  keystroke that doesn't parse yet, or one that clamps). `now` stays the raw, unclamped `value`
+  (unlike `Slider`'s clamped `now`).
 - **2.5.7 non-pointer alternative** — the field also declares
   `accessibilityActions: [{name:"increment"},{name:"decrement"}]` + `onAccessibilityAction`, reusing
   the same `handleIncrement`/`handleDecrement` (so an at-limit or disabled action is a no-op).
@@ -110,6 +108,8 @@ typed values are clamped to range but never snapped to a `step` grid.
 - Decrement/increment each carry `accessibilityRole="button"` and their own
   `accessibilityLabel` ("Decrease" / "Increase") plus flat `aria-disabled`, so a screen
   reader announces the control and its at-limit state even though it shows no visible text.
+- **Android** — both steppers carry `android_ripple` (`rippleColor(theme.mode)`, `borderless: false`),
+  gated on the stepper being enabled.
 - A disabled field is exempt from the contrast minimum (WCAG 1.4.3) and dims via `opacity: 0.5`, same
   as Input/Button. An at-limit stepper (value already at `min`/`max`) dims the same way *without*
   double-dimming when the whole field is also `disabled` (the outer dim already covers that case).
@@ -136,8 +136,3 @@ typed values are clamped to range but never snapped to a `step` grid.
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Same shape as `MultiSelect`: `Icon` gets only primitive props, no `.map()` list, every handler goes to host `Pressable`/`TextInput` — nothing to memoize.
 
-## 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/number-input/NumberInput.js

@@ -148,7 +148,6 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         borderColor: statusColors.border
       }, disabled && styles.dimmed],
       children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: "number-input-focus-ring",
         style: {
           position: "absolute",
@@ -159,14 +158,16 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: theme.colors.border.focus,
           borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
-          borderCurve: "continuous"
+          borderCurve: "continuous",
+          pointerEvents: "none"
         }
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.stepperHost,
         children: [decrementFocused && decrementEnabled && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
           testID: "number-input-decrement-focus-ring",
-          style: stepperFocusRingStyle(theme, "leading")
+          style: [stepperFocusRingStyle(theme, "leading"), {
+            pointerEvents: "none"
+          }]
         }), /*#__PURE__*/_jsx(AnimatedPressable, {
           testID: testID ? `${testID}-decrement` : undefined,
           accessibilityRole: "button",
@@ -231,9 +232,10 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.stepperHost,
         children: [incrementFocused && incrementEnabled && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
           testID: "number-input-increment-focus-ring",
-          style: stepperFocusRingStyle(theme, "trailing")
+          style: [stepperFocusRingStyle(theme, "trailing"), {
+            pointerEvents: "none"
+          }]
         }), /*#__PURE__*/_jsx(AnimatedPressable, {
           testID: testID ? `${testID}-increment` : undefined,
           accessibilityRole: "button",

package/lib/module/modules/number-input/NumberInput.variants.js

@@ -16,14 +16,12 @@
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** A state, not a brand tone — same reasoning as Input's `status`. */
 
-/** Same floor as Button/Input/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- *  stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
 /** Same numbers as Input's sizes, so a NumberInput lines up beside a plain field. */
 export const NUMBER_INPUT_SIZES = {
   sm: {

package/lib/module/modules/number-input/NumberInputProps.js

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

package/lib/module/modules/org-switcher/MODULE.md

@@ -52,7 +52,7 @@ mode — `bg.selected` is not, which is exactly why `Select` refuses to tint.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `options` | `OrgSwitcherOption[]` | — | `{ value, label, role?, avatarSource?, avatarInitials? }`. `avatarInitials` defaults to the first letters of `label`'s first two words. |
-| `value` | `string` | — | Active org id. |
+| `value` | `string` | — | Optional — active org id. Absent shows the `placeholder`. |
 | `onValueChange` | `(value: string) => void` | — | |
 | `placeholder` | `string` | `"Select organization"` | Shown with a `building-2` glyph when nothing is selected. |
 | `size` | `sm \| md \| lg` | `md` | Trigger heights 32 / 40 / 48 dp; avatar `xs` / `sm` / `md`. |
@@ -73,7 +73,8 @@ mode — `bg.selected` is not, which is exactly why `Select` refuses to tint.
   mutually exclusive set, and `aria-selected` is invalid ARIA on `role="menuitem"` (2026-08 sweep;
   React Native's typed `accessibilityRole` has no `menuitemradio`, so `radio` is the closest valid
   role). The tint is never the *only* selection cue.
-- Rows and trigger both clear the 44dp touch target (trigger via `hitSlop`).
+- Rows and trigger both clear the 44dp touch target (trigger via `hitSlop`), and both carry
+  `android_ripple` on Android.
 - **2.1.1 keyboard (web only)** — on the `ModalPortalProvider` branch there is no RN `<Modal>`, so
   `react-native-web`'s own Escape / focus trap / focus restore never run. The sheet wires
   `useDismissOnEscape` + `useFocusTrap` (`core/a11y/keyboard`) gated on `portalled && open`;
@@ -120,14 +121,6 @@ The host app owns fetching the org list and the active org id, passing `role` as
   conditional render.
 - **Sheet** — `useEnterExit(open)` on the panel; the `Modal` keeps `visible={open}` with
   `animationType="none"` so the library owns the reveal and the sheet always fully unmounts when
-  closed (never gated on an animation callback). This replaced the old `reducedMotion ? "none" :
-  "fade"` — reduce-motion is now handled inside `core/motion` (`motion.enabled === false` snaps).
+  closed (never gated on an animation callback). Reduce-motion is handled inside `core/motion`
+  (`motion.enabled === false` snaps). The backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`.
 
-## Modernization (v1.0.7)
-
-- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
-
-- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.
-- **Round 5 tonal** — the trigger's `border.interactive` hairline is KEPT: it's a form-control
-  affordance (opens a picker), the identical role `Select`'s own trigger border plays, not decorative
-  container chrome. Trigger and rows both gained `android_ripple` for Android parity.

package/lib/module/modules/org-switcher/OrgSwitcher.js

@@ -20,22 +20,23 @@
  */
 
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
 import { VirtualList } from "../../core/list/index.js";
-import { useAnimatedValue, useEnterExit, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useEnterExit, useMotion, useAnimatedValue, usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { Avatar } from "../avatar/index.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { ORG_SWITCHER_ROW_ICON_SIZE, ORG_SWITCHER_ROW_MIN_HEIGHT, ORG_SWITCHER_SIZES, orgInitials, orgSwitcherOverlayStructure, orgSwitcherRowBodyStructure, orgSwitcherRowContentStructure, orgSwitcherRowStructure, orgSwitcherSheetStructure, orgSwitcherTriggerContentStructure, orgSwitcherTriggerStructure, orgSwitcherTriggerValueStructure, resolveOrgSwitcherAccessibility, resolveOrgSwitcherRowColors, resolveOrgSwitcherTriggerColors } from "./OrgSwitcher.variants.js";
 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";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
   option,
   selected,
@@ -69,21 +70,20 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
     color: restingColors.subtitle
   }], [theme, restingColors]);
   const checkOpacity = useAnimatedValue(selected ? 1 : 0);
-  const checkStyle = useMemo(() => ({
-    opacity: checkOpacity
-  }), [checkOpacity]);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const skipFirst = useRef(true);
   const running = useRef(null);
   useEffect(() => {
     running.current?.stop();
-    // A row scrolled into view already-selected must snap, never fade — no motion during scroll.
     if (skipFirst.current) {
       skipFirst.current = false;
-      checkOpacity.setValue(selected ? 1 : 0);
+      checkOpacity.value = selected ? 1 : 0;
       return;
     }
     if (!motion.enabled) {
-      checkOpacity.setValue(selected ? 1 : 0);
+      checkOpacity.value = selected ? 1 : 0;
       return;
     }
     running.current = motion.timing(checkOpacity, selected ? 1 : 0, {
@@ -102,7 +102,7 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: rowStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       style: [contentStructure, press.style],
       children: [/*#__PURE__*/_jsx(Avatar, {
         size: spec.avatarSize,
@@ -121,7 +121,7 @@ const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
           style: roleStyle,
           children: option.role
         })]
-      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+      }), selected && /*#__PURE__*/_jsx(Reanimated.View, {
         style: checkStyle,
         children: /*#__PURE__*/_jsx(Icon, {
           name: "check",
@@ -213,9 +213,10 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
       style: styles.backdrop,
       onPress: closeMenu
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         ref: sheetRef,
         style: [sheetStyle, sheetMotion.style],
         children: /*#__PURE__*/_jsx(VirtualList, {
@@ -228,8 +229,9 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
     })]
   }) : null;
   const menu = portalled ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    style: [StyleSheet.absoluteFill, {
+      pointerEvents: 'box-none'
+    }],
     children: sheet
   }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
     visible: open,
@@ -253,7 +255,7 @@ export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
       hitSlop: spec.hitSlop,
       android_ripple: androidRipple,
       style: triggerStyle,
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         style: [triggerContentStructure, triggerPress.style],
         children: [/*#__PURE__*/_jsxs(View, {
           style: triggerValueStructure,

package/lib/module/modules/org-switcher/OrgSwitcher.variants.js

@@ -18,10 +18,12 @@
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
+
 /** Same touch-target floor as Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+
 export const ORG_SWITCHER_SIZES = {
   sm: {
     height: 32,

package/lib/module/modules/org-switcher/OrgSwitcherProps.js

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

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

@@ -98,6 +98,8 @@ for a closed union to resolve.
 `fast` + `decelerate`) — opacity only, native driver, no fade on first mount, stopped on effect
 cleanup and unmount. That is the whole motion budget for this module.
 
+A page change also fires `useHaptics().selection()`, skipped under reduced motion.
+
 `numbered` deliberately animates **nothing**: it is a row of up to nine controls, and moving or
 fading each one on every page change reads as noise rather than feedback. `loadMore` keeps its
 existing spinner and no transition.
@@ -156,8 +158,3 @@ most `2·siblingCount + 5` items, so `VirtualizedList` setup would be pure cost
 benefit (Menu's rows document the same measurement). The themed structural resolvers compile once
 per `(theme, size)` via the `WeakMap` cache and never rebuild per render.
 
-## 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.