pixelize-native-library 1.2.1 → 1.3.0

package/lib/module/modules/combobox/Combobox.js

@@ -34,13 +34,13 @@
  */
 
 import { memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion, useAnimatedStyle } from "react-native-reanimated";
 import { useAnnounce } from "../../core/a11y/index.js";
 import { useDismissOnEscape, useFocusTrap, 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 { useAnimatedValue, useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
 import { elevation, floatingBackground, floatingSurfaceStyle, highlight, rippleColor } from "../../theme/platform/index.js";
 import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
@@ -49,12 +49,6 @@ import { renderWebPortal } from "../modal/renderWebPortal";
 import { Spinner } from "../spinner/index.js";
 import { useComboboxKeys } from "./comboboxKeys";
 import { COMBOBOX_CLEAR_BUTTON_HIT_SLOP, COMBOBOX_FIELD_FONT_SIZE, COMBOBOX_FIELD_HIT_SLOP, COMBOBOX_FIELD_ICON_SIZE, COMBOBOX_LISTBOX_ROLE, COMBOBOX_ROW_ICON_SIZE, comboboxOptionNativeId, DEFAULT_EMPTY_MESSAGE, DEFAULT_MAX_HEIGHT, DEFAULT_PLACEHOLDER, DEFAULT_SEARCH_PLACEHOLDER, FILTER_DEBOUNCE_MS, SEARCH_DEBOUNCE_MS, comboboxClearButtonStructure, comboboxFieldStructure, comboboxFieldValueStructure, comboboxListStateStructure, comboboxOverlayStructure, comboboxRowStructure, comboboxRowTextStructure, comboboxSearchRowStructure, comboboxSheetStructure, COMBOBOX_ROW_MIN_HEIGHT, normalizeForSearch, resolveComboboxAccessibility, resolveComboboxErrorTextColor, resolveComboboxRowAccessibility, resolveComboboxRowColors, resolveComboboxSummary, resolveComboboxTriggerColors } from "./Combobox.variants.js";
-
-/**
- * A discriminated union, not one flat interface with every field optional: `multiple: true` requires
- * `values`/`onValuesChange`, the default (`multiple` absent/`false`) requires `value`/`onChange` — a
- * caller can never wire the wrong pair for the active mode and have it silently do nothing.
- */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const FOCUS_RING_WIDTH = 2;
@@ -75,7 +69,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
   const rowDisabled = option.disabled === true;
   const motion = useMotion();
   const press = usePressMotion(rowDisabled);
-  const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const checkOpacity = useAnimatedValue(selected ? 1 : 0);
   const skipFirst = useRef(true);
   const running = useRef(null);
 
@@ -84,11 +78,11 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     running.current?.stop();
     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, {
@@ -98,6 +92,9 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     return () => running.current?.stop();
   }, [selected, motion, checkOpacity]);
   useEffect(() => () => running.current?.stop(), []);
+  const checkStyle = useAnimatedStyle(() => ({
+    opacity: checkOpacity.value
+  }));
   const rowA11y = useMemo(() => resolveComboboxRowAccessibility({
     selected,
     disabled: rowDisabled
@@ -125,9 +122,6 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     fontSize: theme.fontSizes.xs,
     color: rowColors.muted
   }], [theme, rowColors.muted]);
-  const checkStyle = useMemo(() => ({
-    opacity: checkOpacity
-  }), [checkOpacity]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID ? `${testID}-option-${option.value}` : undefined,
     nativeID: nativeID,
@@ -143,7 +137,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: pressableStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: testID ? `${testID}-option-${option.value}-content` : undefined,
       style: contentStyle,
       children: [option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
@@ -162,7 +156,7 @@ const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
           style: descriptionStyle,
           children: option.description
         })]
-      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+      }), selected && /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-option-${option.value}-check` : undefined,
         style: checkStyle,
         children: /*#__PURE__*/_jsx(Icon, {
@@ -459,12 +453,13 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
       style: backdropStyle,
       onPress: closeSheet
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStyle,
-      pointerEvents: "box-none",
+      style: [overlayStyle, {
+        pointerEvents: "box-none"
+      }],
       children: /*#__PURE__*/_jsx(Reanimated.View, {
+        ref: sheetRef,
         entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
-        children: /*#__PURE__*/_jsxs(Animated.View, {
-          ref: sheetRef,
+        children: /*#__PURE__*/_jsxs(Reanimated.View, {
           style: sheetStyle,
           children: [/*#__PURE__*/_jsxs(View, {
             style: searchRowStyle,
@@ -525,8 +520,9 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
   // Web portal opt-in — see Modal.tsx's/Select.tsx's identical branch + ModalPortalContext.ts. Every
   // other case (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below.
   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,
@@ -562,9 +558,10 @@ export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
       android_ripple: triggerRipple,
       style: fieldStyle,
       children: [showFocusRing && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: testID ? `${testID}-focus-ring` : undefined,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), /*#__PURE__*/_jsxs(View, {
         style: fieldValueStyle,
         children: [singleSelectedOption?.icon !== undefined && /*#__PURE__*/_jsx(Icon, {

package/lib/module/modules/combobox/Combobox.variants.js

@@ -25,11 +25,9 @@
  * this 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";
 /** Same touch-target floor as Button/Select/Input (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));
-
 /** No `size` prop (unlike Select/MultiSelect) — not part of this module's spec, and a search sheet's
  *  proportions don't benefit from the sm/lg range those triggers offer. One fixed box, sized exactly
  *  like Input's/Select's `md`, so a Combobox lines up with either in the same form. */
@@ -65,6 +63,7 @@ export const FILTER_DEBOUNCE_MS = 140;
  * Strips combining diacritical marks after Unicode NFD decomposition, so "José" and "jose" match the
  * same query. Lowercased last so the comparison is also case-insensitive.
  */
+export { MIN_TOUCH_TARGET };
 export function normalizeForSearch(value) {
   return value.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
 }

package/lib/module/modules/combobox/ComboboxProps.js

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

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

@@ -25,7 +25,7 @@ reuses directly, e.g. from `SearchBar`).
 | `__tests__/Combobox.keyboard.test.tsx` | Web keyboard: `aria-activedescendant` tracks the arrows, Enter selects, Space stays with the search field, Escape closes, trigger opens on Space. |
 | `__tests__/Combobox.filter.test.tsx` | The memoized filter matches `defaultComboboxFilter` exactly across diacritics/mixed case; a `filterFn` still runs per option. |
 | `__tests__/Combobox.layout.test.tsx` | `getItemLayout` is derived for uniform rows and absent as soon as one option has a `description`. |
-| `__tests__/Combobox.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, and `Animated.timing` is never called. |
+| `__tests__/Combobox.motion.test.tsx` | Reduce-motion (WCAG 2.3.3): check-glyph and press feedback snap to their final values, with no tween scheduled. |
 
 ## Props
 
@@ -171,7 +171,7 @@ handler.
 
 Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-motion aware.
 
-- **Row press** — `usePressMotion(rowDisabled)`; the row's content `Animated.View` (which carries
+- **Row press** — `usePressMotion(rowDisabled)`; the row's content `Reanimated.View` (which carries
   `comboboxRowStructure`, including the 44dp `minHeight`) scales/dips, while the `Pressable` keeps
   the `pressedRow` background. `scale` is a transform, so the row's hit area is unaffected.
 - **Check glyph** — fades in/out on selection change, but a row that mounts already-selected
@@ -180,14 +180,8 @@ Via `core/motion` only — `opacity`/`transform`, native driver, all reduce-moti
   (the same flag `<Modal visible>` uses), so there is no second source of truth and no extra render
   per open/close. See `Select`/`MultiSelect` — all three pickers use this one gate.
 
-## Modernization (v1.0.7)
+## Android
 
-- 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.
-
-- **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 field
-  (gated `!disabled`), the clear button, and each option row (gated `!rowDisabled`). The trigger
-  field and clear button also gained `overflow: "hidden"` so their ripple clips to the field/button
-  shape instead of escaping it.
+`android_ripple` (`borderless: false`) on the trigger field (gated `!disabled`), the clear button and
+each option row (gated `!rowDisabled`); the field and clear button set `overflow: "hidden"` so the
+ripple clips to their shape. The backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`, aligned with `Modal`.

package/lib/module/modules/composer/Composer.js

@@ -10,17 +10,17 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { composerFieldStructure, composerInputStructure, composerSendStructure, composerStructure } from "./Composer.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ICON_SIZE = 18;
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
 const FIELD_STYLE = composerFieldStructure();
 /** Split out so the icon/spinner subtree survives the parent's per-keystroke `value` re-render. */
 const ComposerSend = /*#__PURE__*/memo(function ComposerSend({
@@ -77,11 +77,14 @@ export const Composer = /*#__PURE__*/memo(function Composer({
   }, [canSend, onSend]);
   const ringOpacity = useAnimatedValue(0);
   const ringAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
   const setRingVisible = useCallback(visible => {
     ringAnimation.current?.stop();
     const to = visible ? 1 : 0;
     if (!motion.enabled) {
-      ringOpacity.setValue(to);
+      ringOpacity.value = to;
       return;
     }
     ringAnimation.current = motion.timing(ringOpacity, to, {
@@ -124,11 +127,10 @@ export const Composer = /*#__PURE__*/memo(function Composer({
     style: rootStyle,
     children: [/*#__PURE__*/_jsxs(View, {
       style: FIELD_STYLE,
-      children: [/*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Reanimated.View, {
         testID: "composer-focus-ring",
-        style: [focusRingStyle, {
-          opacity: ringOpacity
+        style: [focusRingStyle, ringAnimatedStyle, {
+          pointerEvents: 'none'
         }]
       }), /*#__PURE__*/_jsx(TextInput, {
         testID: testID ? `${testID}-input` : undefined,

package/lib/module/modules/composer/ComposerProps.js

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

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

@@ -11,6 +11,7 @@ whitespace-only.
 | `Composer.tsx` | The component, plus the internal memo'd `ComposerSend` child. |
 | `Composer.variants.ts` | Structural resolvers (root row, field wrapper, input, send circle). No colour resolver — every colour here is a single non-branching role lookup, read at the component. |
 | `index.ts` | Public surface: `Composer`, `ComposerProps`. |
+| `__tests__/Composer.test.ts` | Pure: the structural resolvers and the send-enabled predicate. |
 | `__tests__/Composer.render.test.tsx` | Send fires with text present, stays inert when empty; focus-ring opacity on focus/blur/disabled/sending; web outline reset. |
 
 ## Props
@@ -21,7 +22,7 @@ whitespace-only.
 | `onChangeText` | `(text: string) => void` | — | Required. |
 | `onSend` | `() => void` | — | Required. Never fires while send is disabled. |
 | `placeholder` | `string` | `"Message"` | Falls back into the field's `accessibilityLabel`. |
-| `accessibilityLabel` | `string` | `placeholder` | Names the field. Previously absent — `ComposerProps` exposed no label prop at all, so a consumer with more than one composer on screen (or a placeholder unsuited as a name) could not give it an accessible name. |
+| `accessibilityLabel` | `string` | `placeholder` | Names the field. A placeholder disappears once there is a value, so a screen with more than one composer needs this to tell them apart. |
 | `disabled` | `boolean` | `false` | Blocks typing and sending. |
 | `sending` | `boolean` | `false` | Blocks typing and sending; shows the spinner. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
@@ -31,7 +32,7 @@ whitespace-only.
 
 - **Focus ring (WCAG 2.4.7 / 2.4.11).** Same offset-ring pattern as Input: a `border.focus` ring
   2px wide, 2px outside the field, crossfaded on the field's `onFocus`/`onBlur` through
-  `useMotion()`. It is always mounted at opacity 0 (`testID="composer-focus-ring"`,
+  `useMotion()` on a Reanimated node. It is always mounted at opacity 0 (`testID="composer-focus-ring"`,
   `pointerEvents="none"`) and never raised while `disabled` or `sending`. The ring is an absolutely
   positioned sibling of the `TextInput` inside a `composerFieldStructure` wrapper — that wrapper
   carries the row's `flex: 1`.
@@ -69,7 +70,6 @@ controlled), so:
   not an object, so it needs no memo of its own.
 - `ComposerSend` reads `useTheme()` itself rather than taking a `theme` prop.
 
-- **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)** — the round send button now gets `android_ripple` (`borderless: true`,
-  matching its circular shape), gated on `Platform.OS === "android" && canSend` so a disabled send
-  button shows no ripple.
+- The round send button takes `android_ripple` (`borderless: true`, matching its circular shape),
+  gated on `Platform.OS === "android" && canSend`, so a disabled send button shows no ripple.
+

package/lib/module/modules/copy-button/CopyButton.js

@@ -6,9 +6,13 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AccessibilityInfo, Animated, Platform, Pressable, Text, View } from "react-native";
+import { AccessibilityInfo, Platform, Pressable, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { usePressMotion } from "../../core/motion/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { COPY_BUTTON_SIZES, copyButtonMenuRowStructure, copyButtonOutlineStructure, COPY_FEEDBACK_MS, resolveCopyButtonColors, writeClipboard } from "./CopyButton.variants.js";
@@ -16,8 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 // The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
 // role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a fill it could fail.
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+
 export const CopyButton = /*#__PURE__*/memo(function CopyButton({
   value,
   variant = "icon",
@@ -31,6 +34,8 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
 }) {
   const theme = useTheme();
   const press = usePressMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const colors = resolveCopyButtonColors(theme.colors);
   const [status, setStatus] = useState("idle");
   // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
@@ -47,14 +52,17 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     // The label swap lands on a control nothing is focused on, so no reader would ever read it —
     // this imperative call reaches VoiceOver and TalkBack (same reason as `Toast`'s `show()`).
     AccessibilityInfo.announceForAccessibility(ok ? copiedLabel : failedLabel);
-    if (ok) onCopy?.(value);
+    if (ok) {
+      if (!reducedMotion) haptics.notification("success");
+      onCopy?.(value);
+    }
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
     // WCAG 2.2.1: only the SUCCESS state self-clears. A failure is an error the user has to act on,
     // and reverting the label 1.5s later took the only notice of it off the screen — so the failed
     // state now stays until the next press (which re-runs this and re-decides).
     if (ok) timer.current = setTimeout(() => setStatus("idle"), COPY_FEEDBACK_MS);
-  }, [value, onCopy, copiedLabel, failedLabel]);
+  }, [value, onCopy, copiedLabel, failedLabel, reducedMotion, haptics]);
   const onFocus = useCallback(() => setFocused(true), []);
   const onBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => ({
@@ -159,7 +167,7 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       borderless: true
     } : undefined,
     style: style,
-    children: [focusRing, /*#__PURE__*/_jsx(Animated.View, {
+    children: [focusRing, /*#__PURE__*/_jsx(Reanimated.View, {
       testID: "copy-button-glyph",
       style: press.style,
       children: /*#__PURE__*/_jsx(Icon, {

package/lib/module/modules/copy-button/CopyButton.variants.js

@@ -1,14 +1,15 @@
 "use strict";
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 export const COPY_FEEDBACK_MS = 1500;
 
 /**
  * Same touch-target floor as `Button`/`Checkbox` (44dp — Apple HIG minimum, WCAG 2.5.5 AAA).
  * Duplicated rather than imported — modules never import across `src/modules/*`.
  */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 /**
  * CopyButton-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `iconSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.

package/lib/module/modules/copy-button/CopyButtonProps.js

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

package/lib/module/modules/copy-button/MODULE.md

@@ -1,4 +1,4 @@
-# copy-button/
+# copy-button/ — a copy-to-clipboard control in icon, button or menu-item form
 
 Copies `value` to the clipboard. Variants: `icon`, `button`, `menu-item`. Brief copied state with check icon.
 
@@ -23,7 +23,9 @@ Copies `value` to the clipboard. Variants: `icon`, `button`, `menu-item`. Brief
 | `copiedLabel` | `string` | `Copied!` |
 | `failedLabel` | `string` | `Copy failed` |
 | `size` | `sm \| md` | `sm` |
-| `onCopy` | `(value) => void` | — |
+| `onCopy` | `(value: string) => void` | — |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
 
 Native clipboard uses optional `@react-native-clipboard/clipboard`; web uses `navigator.clipboard`.
 A failed write is **not** silent: the control switches to `failedLabel` with the `triangle-alert`
@@ -31,17 +33,14 @@ glyph in `status.danger.text` and announces it. `onCopy` fires only on success.
 
 **WCAG 2.2.1 — only a successful copy self-clears.** `COPY_FEEDBACK_MS` (1500ms) times out the
 `copied` state back to idle; a `failed` state does not arm that timer at all and stays up until the
-next press re-decides it. Previously both states shared the same timer, so "Copy failed" — the
-message a user most needs to actually read — vanished the fastest of anything in this catalogue.
-**Consumer-visible change:** a failed copy no longer reverts to the idle label on its own; the
-control now visibly stays in the failed state (icon + label + `border.danger` on the `button`
-variant) until the user retries.
+next press re-decides it: a failed copy never reverts to the idle label on its own, it stays in the
+failed state (icon + label + `border.danger` on the `button` variant) until the user retries.
 
 ## Accessibility contract (WCAG)
 
 - `accessibilityRole="button"`; the accessible name is the current label (`label` → `copiedLabel` /
   `failedLabel` while the feedback state is showing).
-- **2.2.1 (timing adjustable)** — see "Props" above: a failed copy no longer times out.
+- **2.2.1 (timing adjustable)** — see "Props" above: a failed copy never times out.
 - **4.1.3 (status messages)** — the copy result is announced with
   `AccessibilityInfo.announceForAccessibility`, the cross-platform imperative API (VoiceOver +
   TalkBack), same call site pattern as `Toast`'s `show()`. The label swap alone announces nothing:
@@ -72,7 +71,6 @@ variant) until the user retries.
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`).
 
-- **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)** — all three variants get `android_ripple`: `icon` (round, icon-only)
-  is `borderless: true`; `button` and `menu-item` are `borderless: false` and also gained
-  `overflow: "hidden"` so the ripple clips to the row/outline shape.
+All three variants take `android_ripple`: `icon` (round, icon-only) is `borderless: true`; `button`
+and `menu-item` are `borderless: false` with `overflow: "hidden"` so the ripple clips to their shape.
+A successful copy fires `haptics.notification("success")`, skipped while reduce-motion is on.

package/lib/module/modules/data-table/DataTable.js

@@ -18,6 +18,7 @@ import { HEADING_LEVEL, HeadingView } from "../../core/heading/index.js";
 import { Icon } from "../../core/icon/index.js";
 import { usePressState } from "../../core/motion/usePressState.js";
 import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Checkbox } from "../checkbox/index.js";
@@ -313,9 +314,10 @@ const DataTableHeaderCell = /*#__PURE__*/memo(function DataTableHeaderCell({
       onBlur: handleBlur,
       style: spec.cellStyle,
       children: [focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
         testID: spec.testID === undefined ? undefined : `${spec.testID}-focus-ring`,
-        style: focusRingStyle
+        style: [focusRingStyle, {
+          pointerEvents: "none"
+        }]
       }), label, /*#__PURE__*/_jsx(Icon, {
         name: resolveSortIcon(spec.key, sortBy, sortDirection),
         size: DATA_TABLE_SORT_ICON_SIZE,
@@ -373,7 +375,7 @@ function DataTableCellInner({
   if (spec.render) {
     return /*#__PURE__*/_jsx(View, {
       style: spec.cellStyle,
-      children: spec.render(row, index)
+      children: renderNodeSlot(spec.render(row, index), textStyle)
     });
   }
 
@@ -469,12 +471,14 @@ function DataTableRowInner({
     } : undefined,
     style: pressableStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: "none"
+      }]
     }), focused && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
       testID: testID === undefined ? undefined : `${testID}-focus-ring`,
-      style: focusRingStyle
+      style: [focusRingStyle, {
+        pointerEvents: "none"
+      }]
     }), cells]
   });
 }

package/lib/module/modules/data-table/DataTable.variants.js

@@ -16,15 +16,15 @@ import { StyleSheet } from "react-native";
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** The three glyphs a header can show. A literal union rather than an `IconName` import, so this
  *  file stays free of the icon registry (which pulls `lucide` at runtime); `Icon`'s own `name` prop
  *  still type-checks these against the closed `IconName` set at the call site. */
 
 /** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
-export const MIN_TOUCH_TARGET = 44;
-
 /** Header cells are sortable buttons, so the header is a direct 44dp target — never slop-expanded. */
 export const DATA_TABLE_HEADER_HEIGHT = MIN_TOUCH_TARGET;
 export const DATA_TABLE_DEFAULT_ROW_HEIGHT = 48;

package/lib/module/modules/data-table/DataTableProps.js

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

package/lib/module/modules/data-table/MODULE.md

@@ -1,7 +1,7 @@
 # data-table/ — a horizontally-scrollable, column-configured table
 
 `DataTable` renders column headers + rows for tabular data on a phone screen. Header and body live
-in ONE vertical `FlatList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}` for the
+in ONE vertical `VirtualList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}` for the
 pin) nested inside a single horizontal `ScrollView` — header and rows are always the same width and
 scroll sideways together with no hand-rolled scroll-offset syncing between two separate lists.
 
@@ -13,7 +13,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 
 | File | Role |
 |------|------|
-| `DataTable.tsx` | The component. Header/row/skeleton/empty JSX built inline per render (Select's precedent), one `FlatList` wired with `stickyHeaderIndices`. |
+| `DataTable.tsx` | The component. Header/row/skeleton/empty JSX built inline per render (Select's precedent), one `core/list` `VirtualList` wired with `stickyHeaderIndices`. |
 | `DataTable.variants.ts` | Pure resolvers (`resolveDataTableColors`, `nextSortDirection`, `resolveSortIcon`, `resolveSortAccessibilityLabel`, `toggleSelectionKey`, `resolveSelectAllState`, `resolveSelectAllSelection`, `resolveDefaultCellText`, `resolveRowBackground`, `resolveTotalWidth`) + themed structural resolvers. No React, no lucide. |
 | `index.ts` | Public surface: `DataTable`, `DataTableProps`, `DataTableColumn`, `DataTableAlign`, `DataTableSortDirection`. |
 | `__tests__/DataTable.test.ts` | Pure: WCAG contrast (all brands × modes) + sort/selection/formatting contracts. |
@@ -93,7 +93,7 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 
 ## Design decisions specific to this module
 
-- **One `FlatList`, not two scroll views kept in sync.** The header is that FlatList's own
+- **One list, not two scroll views kept in sync.** The header is that `VirtualList`'s own
   `ListHeaderComponent`, pinned via `stickyHeaderIndices={[0]}` — RN's built-in mechanism for
   exactly this, so there is no manual `onScroll`/`scrollTo` offset-mirroring between a header list
   and a body list.
@@ -137,10 +137,5 @@ never sorts `data` itself and never owns `selectedKeys` — it reports the next
 Wrapped in `React.memo`; since the component itself is generic (`<T>`), `memo`'s erased type is
 restored with a documented `as typeof DataTableInner` cast. Header/row/skeleton/empty JSX are built
 inline per render, matching `Select`'s own precedent (its `renderItem` isn't extracted or memoized
-either) — real windowing for large datasets still comes from `FlatList` itself.
-
-## 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.
+either) — real windowing for large datasets comes from `core/list`'s `VirtualList` (FlashList when
+the app injected it, `FlatList` otherwise) with device-tier window sizing.

package/lib/module/modules/date-picker/Calendar.js

@@ -84,7 +84,7 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
     backgroundColor: stateLayerScrim(theme.mode),
     borderRadius: concentric(theme.radii.md, theme.space[1]),
     borderCurve: "continuous"
-  }), [theme.mode, theme.radii.md]);
+  }), [theme.mode, theme.radii.md, theme.space]);
   const cellStyle = useMemo(() => [cellStructure, {
     backgroundColor: resting.background,
     borderColor: resting.ring,
@@ -107,8 +107,9 @@ const CalendarDayCell = /*#__PURE__*/memo(function CalendarDayCell({
     onLayout: press.onLayout,
     style: cellStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: dayOfMonth
@@ -154,7 +155,7 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
     backgroundColor: stateLayerScrim(theme.mode),
     borderRadius: concentric(theme.radii.md, theme.space[1]),
     borderCurve: "continuous"
-  }), [theme.mode, theme.radii.md]);
+  }), [theme.mode, theme.radii.md, theme.space]);
   const cellStyle = useMemo(() => [cellStructure, {
     backgroundColor: resting.background,
     overflow: "hidden"
@@ -175,8 +176,9 @@ const QuickJumpCell = /*#__PURE__*/memo(function QuickJumpCell({
     onLayout: press.onLayout,
     style: cellStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
     }), /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: name
@@ -341,8 +343,9 @@ export const Calendar = /*#__PURE__*/memo(function Calendar({
           backgroundColor: chrome.headerPressed
         }],
         children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
-          style: [StyleSheet.absoluteFill, headerOverlayStyle, headerPress.overlayStyle]
+          style: [StyleSheet.absoluteFill, headerOverlayStyle, headerPress.overlayStyle, {
+            pointerEvents: 'none'
+          }]
         }), /*#__PURE__*/_jsx(Text, {
           numberOfLines: 1,
           style: headerLabelStyle,

package/lib/module/modules/date-picker/CalendarProps.js

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

package/lib/module/modules/date-picker/DatePicker.variants.js

@@ -18,14 +18,15 @@
  * Asia/Beirut) — the single most common calendar bug class there is.
  */
 
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** `1` = Monday (the library default — the team and its consumer apps are India-based, where the
  *  week starts on Monday), `0` = Sunday. */
 
 /** Same floor as Button/Select — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules stay
  *  isolated. */
-export const MIN_TOUCH_TARGET = 44;
 export const DAY_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
 export const QUICK_JUMP_CELL_MIN_HEIGHT = MIN_TOUCH_TARGET;
 export const TIME_OPTION_HEIGHT = MIN_TOUCH_TARGET;

package/lib/module/modules/date-picker/DatePickerProps.js

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