pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/pagination/Pagination.js

@@ -17,13 +17,74 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { ActivityIndicator, Animated, Pressable, ScrollView, Text, View } from "react-native";
-import { useAnnounce } from "../../core/a11y/index.js";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion, useAnimatedStyle } from "react-native-reanimated";
+import { useAnnounce, useReducedMotion } from "../../core/a11y/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { AnimatedText, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { useTheme } from "../../theme/hooks.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/index.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { DEFAULT_LOAD_MORE_LABEL, PAGINATION_SIZES, clampPage, buildPageRange, formatPageLabel, normalizePageCount, paginationLoadMoreStructure, paginationRowStructure, paginationScrollContentStructure, paginationStripRootStructure, resolvePaginationColors, resolvePaginationHitSlop } from "./Pagination.variants.js";
 import { PaginationEllipsis, PaginationPageControl, PaginationStepControl } from "./PaginationControls.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+function LoadMoreButton({
+  inert,
+  loading,
+  loadMoreLabel,
+  onLoadMore,
+  theme,
+  colors,
+  hitSlop,
+  size,
+  spec,
+  testID
+}) {
+  const press = usePressState(inert);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID ? `${testID}-load-more` : undefined,
+    accessibilityRole: "button",
+    accessibilityLabel: loadMoreLabel,
+    "aria-disabled": inert,
+    "aria-busy": loading,
+    disabled: inert,
+    onPress: inert ? undefined : onLoadMore,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    hitSlop: hitSlop,
+    style: [paginationLoadMoreStructure(theme, {
+      size
+    }), {
+      borderColor: colors.border,
+      overflow: "hidden"
+    }, press.animatedStyle],
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), loading && /*#__PURE__*/_jsx(ActivityIndicator, {
+      size: "small",
+      color: colors.inactiveLabel,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants"
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+        fontSize: spec.fontSize,
+        color: inert ? colors.inactiveLabel : colors.label
+      }],
+      children: loadMoreLabel
+    })]
+  });
+}
 function PaginationImpl({
   page,
   pageCount,
@@ -42,6 +103,8 @@ function PaginationImpl({
 }) {
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
+  const reducedMotion = useReducedMotion();
   const colors = useMemo(() => resolvePaginationColors(theme.colors), [theme.colors]);
   const spec = PAGINATION_SIZES[size];
   const hitSlop = useMemo(() => resolvePaginationHitSlop(size), [size]);
@@ -60,10 +123,10 @@ function PaginationImpl({
     // The first render is not a page change — only a later one is worth acknowledging.
     if (!motion.enabled || !settled.current) {
       settled.current = true;
-      summaryOpacity.setValue(1);
+      summaryOpacity.value = 1;
       return;
     }
-    summaryOpacity.setValue(0);
+    summaryOpacity.value = 0;
     running.current = motion.timing(summaryOpacity, 1, {
       duration: "fast",
       easing: "decelerate"
@@ -73,6 +136,10 @@ function PaginationImpl({
   }, [current, motion, summaryOpacity]);
   useEffect(() => () => running.current?.stop(), []);
   const items = useMemo(() => variant === "numbered" ? buildPageRange(current, total, siblingCount) : [], [variant, current, total, siblingCount]);
+  const handlePageChange = useCallback(next => {
+    if (!reducedMotion) haptics.selection();
+    onPageChange(next);
+  }, [haptics, onPageChange, reducedMotion]);
   const renderStep = useCallback((kind, icon) => /*#__PURE__*/_jsx(PaginationStepControl, {
     kind: kind,
     icon: icon,
@@ -85,17 +152,22 @@ function PaginationImpl({
     theme: theme,
     colors: colors,
     hitSlop: hitSlop,
-    onPageChange: onPageChange,
+    onPageChange: handlePageChange,
     testID: testID ? `${testID}-${kind}` : undefined
-  }, kind), [current, total, disabled, loading, size, spec.iconSize, theme, colors, hitSlop, onPageChange, testID]);
+  }, kind), [current, total, disabled, loading, size, spec.iconSize, theme, colors, hitSlop, handlePageChange, testID]);
+  const summaryAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: summaryOpacity.value
+  }));
   const summaryStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
     fontSize: spec.fontSize,
     color: blocked ? colors.inactiveLabel : colors.label,
-    paddingHorizontal: theme.space[2],
-    opacity: summaryOpacity
-  }], [theme, spec.fontSize, blocked, colors, summaryOpacity]);
+    paddingHorizontal: theme.space[2]
+  }, summaryAnimatedStyle], [theme, spec.fontSize, blocked, colors, summaryAnimatedStyle]);
   const rowStyle = useMemo(() => [paginationRowStructure(theme), style], [theme, style]);
-  const stripStyle = useMemo(() => [paginationStripRootStructure(), style], [style]);
+  const stripStyle = useMemo(() => [paginationStripRootStructure(), {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  }, style], [theme, style]);
   if (variant === "loadMore") {
     if (!hasMore && !loading) return null;
     const inert = blocked || onLoadMore === undefined;
@@ -103,41 +175,17 @@ function PaginationImpl({
       testID: testID,
       accessibilityRole: "none",
       style: rowStyle,
-      children: /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-load-more` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: loadMoreLabel,
-        "aria-disabled": inert,
-        "aria-busy": loading,
-        disabled: inert,
-        onPress: inert ? undefined : onLoadMore,
+      children: /*#__PURE__*/_jsx(LoadMoreButton, {
+        inert: inert,
+        loading: loading,
+        loadMoreLabel: loadMoreLabel,
+        onLoadMore: onLoadMore,
+        theme: theme,
+        colors: colors,
         hitSlop: hitSlop,
-        style: ({
-          pressed
-        }) => [paginationLoadMoreStructure(theme, {
-          size
-        }), {
-          borderColor: colors.border
-        }, pressed && {
-          backgroundColor: colors.pressedFill
-        }],
-        children: [loading &&
-        /*#__PURE__*/
-        // Never the sole loading signal — `aria-busy` announces it and the label
-        // stays visible. Hidden from AT so it isn't read as a separate element (Button's spinner).
-        _jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.inactiveLabel,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants"
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: spec.fontSize,
-            color: inert ? colors.inactiveLabel : colors.label
-          }],
-          children: loadMoreLabel
-        })]
+        size: size,
+        spec: spec,
+        testID: testID
       })
     });
   }
@@ -147,7 +195,7 @@ function PaginationImpl({
       testID: testID,
       accessibilityRole: "none",
       style: rowStyle,
-      children: [showFirstLast && renderStep("first", "chevrons-left"), renderStep("previous", "chevron-left"), /*#__PURE__*/_jsx(Animated.Text, {
+      children: [showFirstLast && renderStep("first", "chevrons-left"), renderStep("previous", "chevron-left"), /*#__PURE__*/_jsx(AnimatedText, {
         testID: testID ? `${testID}-summary` : undefined
         // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
         // already announces on both platforms — keeping both would double-announce on Android.
@@ -158,7 +206,8 @@ function PaginationImpl({
       }), renderStep("next", "chevron-right"), showFirstLast && renderStep("last", "chevrons-right")]
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
     testID: testID,
     accessibilityRole: "none",
     style: stripStyle,
@@ -184,7 +233,7 @@ function PaginationImpl({
         theme: theme,
         colors: colors,
         hitSlop: hitSlop,
-        onPageChange: onPageChange,
+        onPageChange: handlePageChange,
         testID: testID ? `${testID}-page-${item}` : undefined
       }, `page-${item}`)), renderStep("next", "chevron-right"), showFirstLast && renderStep("last", "chevrons-right")]
     })

package/lib/module/modules/pagination/Pagination.variants.js

@@ -16,13 +16,13 @@
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
 import { createThemedVariants, createVariants } from "../../core/style/index.js";
+export { MIN_TOUCH_TARGET };
 
 /** One slot in the numbered strip: a page number, or a gap marker standing in for a run of pages. */
 
 /** Same touch-target floor as Button/ButtonGroup (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));
 
 /**
  * The WIDTH-axis touch floor, met by the rendered node itself rather than by horizontal `hitSlop` —
@@ -241,7 +241,8 @@ export const paginationControlStructure = createThemedVariants(theme => ({
     justifyContent: "center",
     minWidth: PAGINATION_CONTROL_MIN_WIDTH,
     paddingHorizontal: theme.space[1],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -287,7 +288,8 @@ export const paginationLoadMoreStructure = createThemedVariants(theme => ({
     columnGap: theme.space[2],
     minWidth: PAGINATION_CONTROL_MIN_WIDTH,
     paddingHorizontal: theme.space[4],
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     borderWidth: theme.borderWidths.thin
   },
   variants: {

package/lib/module/modules/pagination/PaginationControls.js

@@ -1,23 +1,22 @@
 "use strict";
 
 /**
- * PRIVATE sub-components (not exported from `index.ts`). One control per node, each `React.memo`'d
- * and fed primitives only, so a page change re-renders the two controls whose state actually
- * changed instead of the whole strip — and so no `onPress`/`style` closure is rebuilt per control
- * per render.
+ * PRIVATE sub-components for Pagination controls.
  */
 
 import { memo, useCallback, useMemo, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { paginationControlStructure, paginationEllipsisStructure, resolvePaginationPage, resolvePaginationStep } from "./Pagination.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 const ELLIPSIS_GLYPH = "…";
-const FOCUS_RING_WIDTH = 2;
 const FOCUS_RING_INSET = 2;
-
-// Inset, not Button's outside offsets: the strip's ScrollView is one control tall and clips.
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const focusRingStyleFor = theme => ({
   position: "absolute",
   pointerEvents: "none",
@@ -27,8 +26,20 @@ const focusRingStyleFor = theme => ({
   bottom: FOCUS_RING_INSET,
   borderWidth: FOCUS_RING_WIDTH,
   borderColor: theme.colors.border.focus,
-  borderRadius: Math.max(0, theme.radii.base - FOCUS_RING_INSET)
+  borderRadius: Math.max(0, theme.radii.md - FOCUS_RING_INSET)
 });
+function usePaginationPress(theme, disabled) {
+  const press = usePressState(disabled);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  return {
+    press,
+    overlayStaticStyle
+  };
+}
 export const PaginationStepControl = /*#__PURE__*/memo(function PaginationStepControl({
   kind,
   icon,
@@ -52,38 +63,44 @@ export const PaginationStepControl = /*#__PURE__*/memo(function PaginationStepCo
     loading
   });
   const target = a11y.targetPage;
+  const inert = a11y.disabled;
+  const {
+    press,
+    overlayStaticStyle
+  } = usePaginationPress(theme, inert);
   const handlePress = useCallback(() => {
     if (target !== undefined) onPageChange(target);
   }, [target, onPageChange]);
-  const pressedFill = colors.pressedFill;
-  const inert = a11y.disabled;
-  const controlStyle = useCallback(({
-    pressed
-  }) => [paginationControlStructure(theme, {
-    size
-  }), pressed && !inert ? {
-    backgroundColor: pressedFill
-  } : null], [theme, size, inert, pressedFill]);
   const [focused, setFocused] = useState(false);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => focusRingStyleFor(theme), [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const controlStyle = useMemo(() => [paginationControlStructure(theme, {
+    size
+  }), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, press.animatedStyle]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
     "aria-disabled": a11y["aria-disabled"],
     "aria-busy": a11y["aria-busy"],
-    disabled: inert
-    // RN's Pressable stays `focusable` when disabled, so a TV remote could land on a boundary arrow.
-    ,
+    disabled: inert,
     focusable: !inert,
     onPress: target === undefined ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: controlStyle,
-    children: [focused && !inert && /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && !inert && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Icon, {
@@ -118,22 +135,20 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
   });
   const target = a11y.targetPage;
   const current = a11y.current;
+  const {
+    press,
+    overlayStaticStyle
+  } = usePaginationPress(theme, a11y.disabled);
   const handlePress = useCallback(() => {
     if (target !== undefined) onPageChange(target);
   }, [target, onPageChange]);
-  const {
-    currentFill,
-    pressedFill
-  } = colors;
-  const controlStyle = useCallback(({
-    pressed
-  }) => [paginationControlStructure(theme, {
+  const controlStyle = useMemo(() => [paginationControlStructure(theme, {
     size
   }), current ? {
-    backgroundColor: currentFill
-  } : null, !current && pressed ? {
-    backgroundColor: pressedFill
-  } : null], [theme, size, current, currentFill, pressedFill]);
+    backgroundColor: colors.currentFill
+  } : null, {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, current, colors.currentFill, press.animatedStyle]);
   const labelStyle = useMemo(() => [theme.fontStyleForWeight(current ? theme.fontWeights.semibold : theme.fontWeights.regular), {
     fontSize,
     color: current ? colors.onCurrentFill : blocked ? colors.inactiveLabel : colors.label
@@ -142,7 +157,7 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
   const focusRingStyle = useMemo(() => focusRingStyleFor(theme), [theme]);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
@@ -153,11 +168,18 @@ export const PaginationPageControl = /*#__PURE__*/memo(function PaginationPageCo
     disabled: a11y.disabled,
     focusable: !a11y.disabled,
     onPress: target === undefined ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: hitSlop,
     style: controlStyle,
-    children: [focused && !a11y.disabled && /*#__PURE__*/_jsx(View, {
+    children: [!current && /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), focused && !a11y.disabled && /*#__PURE__*/_jsx(View, {
       testID: testID ? `${testID}-focus-ring` : undefined,
       style: focusRingStyle
     }), /*#__PURE__*/_jsx(Text, {

package/lib/module/modules/pagination/PaginationProps.js

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

package/lib/module/modules/person-chip/MODULE.md

@@ -0,0 +1,11 @@
+# person-chip/ — an avatar and name chip for assignee rows
+
+Avatar + name (+ optional subtitle) for assignee rows. Removable variant composes `Chip`.
+
+## Exports
+
+- `PersonChip` — `name`, `subtitle`, `initials`, `imageUri`, `onRemove`, `size` (`"sm" | "md"`, default `"md"`)
+
+## Known gotchas
+
+- `subtitle` is dropped in the removable variant — `Chip` carries the label alone.

package/lib/module/modules/person-chip/PersonChip.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { Avatar } from "../avatar/index.js";
+import { Chip } from "../chip/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PersonChip = /*#__PURE__*/memo(function PersonChip({
+  name,
+  subtitle,
+  initials,
+  imageUri,
+  onRemove,
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rowStyle = useMemo(() => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2]
+  }), [theme]);
+  const avatarSize = size === "sm" ? "xs" : "sm";
+  if (onRemove) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [rowStyle, style],
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        size: avatarSize,
+        initials: initials ?? name,
+        source: imageUri ? {
+          uri: imageUri
+        } : undefined
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: name,
+        onRemove: onRemove,
+        size: "sm"
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [rowStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      size: avatarSize,
+      initials: initials ?? name,
+      source: imageUri ? {
+        uri: imageUri
+      } : undefined
+    }), /*#__PURE__*/_jsxs(View, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: name
+      }), subtitle ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
+        children: subtitle
+      }) : null]
+    })]
+  });
+});
+//# sourceMappingURL=PersonChip.js.map

package/lib/module/modules/person-chip/PersonChipProps.js

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

package/lib/module/modules/person-chip/index.js

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

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

@@ -27,7 +27,7 @@ single source of truth; the boxes only render what it already holds.
 | `secureTextEntry` | `boolean` | `false` | Renders a dot instead of the character per box, forwards to the real hidden `TextInput` (native secure-entry actually engages), and masks the announced value to one `•` per digit — same masking concept as `Input`'s prop of the same name, but end-to-end: visual, native, AND assistive tech. |
 | `keyboardType` | `number-pad \| default` | `number-pad` | `number-pad` strips non-digit characters on every change (typed OR pasted). |
 | `status` | `default \| error` | `default` | Closed union — a state, not a brand tone. |
-| `errorText` | `string` | — | Shown below the row and folded into the accessible name (`aria-invalid` set) when `status="error"`, same rule as `Input`/`FormField`. Previously `status="error"` was box-border colour only — no message, no programmatic invalid flag (WCAG 3.3.1 / 1.4.1). |
+| `errorText` | `string` | — | Shown below the row and folded into the accessible name (`aria-invalid` set) when `status="error"`, same rule as `Input`/`FormField`. |
 | `disabled` | `boolean` | `false` | Dimmed; blocks editing and the row's press-to-focus. |
 | `size` | `sm \| md \| lg` | `md` | Box 40/48/56dp square; short sizes reach 44dp via the ROW's `hitSlop`. |
 | `autoFocus` | `boolean` | `false` | Forwarded to the hidden `TextInput`. |
@@ -60,18 +60,14 @@ new `onComplete` closure) does not fire again.
   pasted string and the existing clamp logic handles it identically to typing.
 - **Focus management**: auto-advancing focus across N fields on every keystroke is a well-known
   source of bugs on backspace, selection, and IME composition. One field sidesteps the whole class.
-- **iOS/Android OTP autofill**: `textContentType="oneTimeCode"` is now UNCONDITIONAL, not gated on
-  `keyboardType="number-pad"` — an alphanumeric OTP is still an OTP, and the old gate silently lost
-  iOS's SMS-code suggestion whenever a consumer used `keyboardType="default"`. `autoComplete="sms-otp"`
-  is the Android half — genuinely absent before, despite this doc previously claiming it existed.
-- **Corrected: the field was `opacity: 0`, and that is invisible to VoiceOver, not merely "visually
-  suppressed".** iOS `UIAccessibility` excludes any view with `alpha == 0` from the accessibility
-  tree — since this hidden `TextInput` is the control's ONLY accessibility element, the whole
-  control was unreachable by VoiceOver, and there was no node to long-press for the OS paste
-  callout. Fixed by keeping `opacity: 1` and using `color: "transparent"` instead — the node stays
-  real, focusable, and long-press-able; only its glyphs render invisibly (the field paints no
-  background/border of its own). Still `StyleSheet.absoluteFill` with `pointerEvents="none"` so it
-  never intercepts touches; the row's own `Pressable` calls `inputRef.current.focus()` instead.
+- **iOS/Android OTP autofill**: `textContentType="oneTimeCode"` is unconditional — an alphanumeric
+  OTP is still an OTP — and `autoComplete` is `"sms-otp"` on Android, `"one-time-code"` elsewhere.
+- **Invisible via `color: "transparent"`, never `opacity: 0`.** iOS `UIAccessibility` drops any view
+  with `alpha == 0` from the accessibility tree, and this hidden `TextInput` is the control's ONLY
+  accessibility element — at `opacity: 0` the whole control is unreachable by VoiceOver, with no node
+  to long-press for the OS paste callout. It stays `StyleSheet.absoluteFill` with
+  `pointerEvents="none"` so it never intercepts touches; the row's own `Pressable` calls
+  `inputRef.current.focus()` instead.
 
 ## Touch target — the ROW, not per-box
 
@@ -79,7 +75,9 @@ Tapping ANY box focuses the same single underlying field — splitting the touch
 would just be N different ways to trigger the identical action, with no independent affordance
 each box could offer on its own. So the whole row is ONE `Pressable` (wrapping both the boxes and
 the hidden field), and `hitSlop` (via the same `slopFor` formula Button/Input use) is computed
-once against the row/box height, not per box. `PinInput.test.ts` asserts
+once against the row/box height, not per box. The row also carries `android_ripple`
+(`rippleColor(theme.mode)`, `borderless: false`) when not disabled, gated on
+`Platform.OS === "android"`. `PinInput.test.ts` asserts
 `boxSize + 2·hitSlop ≥ 44` arithmetically for every size; `PinInput.render.test.tsx` additionally
 asserts the REAL rendered `hitSlop` prop and box dimensions (not just the constants) reach 44dp,
 same pattern as `Input`/`ButtonGroup`/`Reorder`'s render-level touch-target checks.
@@ -142,8 +140,3 @@ same pattern as `Input`/`ButtonGroup`/`Reorder`'s render-level touch-target chec
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). No library child components at all — the `Array.from({length})` box list renders host `View`/`Text` — 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/pin-input/PinInput.js

@@ -13,9 +13,10 @@
  * per box would just be N ways to trigger the identical action.
  */
 
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { clampPinInputValue, isPinInputComplete, PIN_INPUT_SIZES, pinInputBoxStructure, pinInputRowStructure, resolvePinInputAccessibility, resolvePinInputActiveIndex, resolvePinInputBoxColors } from "./PinInput.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FOCUS_RING_WIDTH = 2;
@@ -51,6 +52,10 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
     errorText
   });
   const activeIndex = resolvePinInputActiveIndex(value, length);
+  const androidRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [disabled, theme.mode]);
 
   // Always reads the LATEST `onComplete` without making it an effect dependency — a caller passing
   // a fresh inline arrow every render must not re-fire the completion effect on every render, only
@@ -76,6 +81,7 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
       disabled: disabled,
       onPress: disabled ? undefined : focusInput,
       hitSlop: spec.hitSlop,
+      android_ripple: androidRipple,
       style: [pinInputRowStructure(theme, {
         size
       }), disabled && styles.dimmed],
@@ -95,7 +101,6 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
             borderColor: boxColors.border
           }],
           children: [isActive && /*#__PURE__*/_jsx(View, {
-            pointerEvents: "none",
             testID: "pin-input-focus-ring",
             style: {
               position: "absolute",
@@ -105,7 +110,9 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
               bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
               borderWidth: FOCUS_RING_WIDTH,
               borderColor: theme.colors.border.focus,
-              borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+              borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+              borderCurve: "continuous",
+              pointerEvents: "none"
             }
           }), char !== undefined && (secureTextEntry ? /*#__PURE__*/_jsx(View, {
             testID: testID ? `${testID}-dot-${index}` : undefined,

package/lib/module/modules/pin-input/PinInput.variants.js

@@ -16,13 +16,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 };
 
 /** A validity state, not a brand tone — same reasoning as `InputStatus`. */
 
-/** Same floor as Button/Input — 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));
 /**
  * PinInput-specific dimensions. Box size / dot size / gap are the component's own design
  * constants; `fontSize` sits on the theme's `fontSizes` scale (xl/2xl/3xl = 20/24/30) — a digit
@@ -166,7 +165,8 @@ export const pinInputBoxStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

package/lib/module/modules/pin-input/PinInputProps.js

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