pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/charts/PieChartProps.js

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

package/lib/module/modules/charts/Sparkline.js

@@ -3,8 +3,9 @@
 import { memo, useMemo } from "react";
 import { View } from "react-native";
 import Svg, { Path } from "react-native-svg";
+import { useDeviceTier } from "../../core/device/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { decimateSeries, resolveSparklineTone } from "./Charts.variants.js";
+import { decimateSeries, maxRenderedPoints, resolveSparklineTone } from "./Charts.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const STROKE_WIDTH = 2;
 const AREA_OPACITY = 0.15;
@@ -45,7 +46,8 @@ export const Sparkline = /*#__PURE__*/memo(function Sparkline({
 }) {
   const theme = useTheme();
   const stroke = resolveSparklineTone(theme.colors, tone);
-  const paths = useMemo(() => buildPaths(decimateSeries(data, sampleValue), width, height), [data, width, height]);
+  const tier = useDeviceTier();
+  const paths = useMemo(() => buildPaths(decimateSeries(data, sampleValue, maxRenderedPoints(tier)), width, height), [data, width, height, tier]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessibilityElementsHidden: true,

package/lib/module/modules/charts/SparklineProps.js

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

package/lib/module/modules/checkbox/Checkbox.js

@@ -11,27 +11,21 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 import { useSpaceActivation } from "../../core/a11y/keyboard";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useMotion, useAnimatedValue, 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 { CHECKBOX_SIZES, checkboxBoxStructure, checkboxRowStructure, resolveCheckboxAccessibility, resolveCheckboxColors } from "./Checkbox.variants.js";
-
-/** A checkbox with a visible label. `accessibilityLabel` defaults to `label`. Pressing the label
- * toggles too — it lives inside the same `Pressable` row as the box. */
-
-/**
- * A checkbox with no visible label (e.g. a table row's select-all box). It has no visible text, so
- * `accessibilityLabel` is REQUIRED at the type level — the same trap `Button`'s icon-only shape
- * closes. `label?: never` makes the two shapes mutually exclusive.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
 // The focus ring sits a small gap OUTSIDE the box, because `border.focus` is the role token proven
 // ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over the filled box its contrast isn't guaranteed.
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+
 function CheckboxImpl(props) {
   const {
     checked,
@@ -46,6 +40,7 @@ function CheckboxImpl(props) {
   } = props;
   const theme = useTheme();
   const motion = useMotion();
+  const haptics = useHaptics();
   const press = usePressMotion(disabled);
   const spec = CHECKBOX_SIZES[size];
   const colors = resolveCheckboxColors(theme.colors);
@@ -61,11 +56,19 @@ function CheckboxImpl(props) {
   const ringAnimation = useRef(null);
   const glyphScale = useAnimatedValue(filled ? 1 : 0);
   const glyphAnimation = useRef(null);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: ringOpacity.value
+  }));
+  const glyphAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: glyphScale.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, {
@@ -79,7 +82,7 @@ function CheckboxImpl(props) {
     glyphAnimation.current?.stop();
     const to = filled ? 1 : 0;
     if (!motion.enabled) {
-      glyphScale.setValue(to);
+      glyphScale.value = to;
       return;
     }
     glyphAnimation.current = motion.timing(glyphScale, to, {
@@ -95,8 +98,9 @@ function CheckboxImpl(props) {
   }, []);
   const handlePress = useCallback(() => {
     if (disabled) return;
+    haptics.selection();
     onCheckedChange(!checked);
-  }, [disabled, onCheckedChange, checked]);
+  }, [disabled, haptics, onCheckedChange, checked]);
 
   // Space is the checkbox's PRIMARY key, but RNW only presses on Space for `role="button"` — see
   // `core/a11y/keyboard.web.ts`. No-op on native.
@@ -124,11 +128,6 @@ function CheckboxImpl(props) {
     fontSize: spec.fontSize,
     color: colors.label
   }], [theme, spec.fontSize, colors.label]);
-  const glyphStyle = useMemo(() => ({
-    transform: [{
-      scale: glyphScale
-    }]
-  }), [glyphScale]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: pressableRef,
     testID: testID,
@@ -143,21 +142,24 @@ function CheckboxImpl(props) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     hitSlop: spec.hitSlop,
+    android_ripple: Platform.OS === "android" && !disabled ? {
+      color: rippleColor(theme.mode),
+      borderless: false
+    } : undefined,
     style: rootStyle,
-    children: /*#__PURE__*/_jsxs(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Reanimated.View, {
       testID: "checkbox-row",
       style: [rowStyle, press.style],
       children: [/*#__PURE__*/_jsxs(View, {
         style: boxStyle,
-        children: [/*#__PURE__*/_jsx(Animated.View, {
-          pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
           testID: "checkbox-focus-ring",
-          style: [focusRingStyle, {
-            opacity: ringOpacity
+          style: [focusRingStyle, ringAnimatedStyle, {
+            pointerEvents: 'none'
           }]
-        }), filled && /*#__PURE__*/_jsx(Animated.View, {
+        }), filled && /*#__PURE__*/_jsx(Reanimated.View, {
           testID: "checkbox-glyph",
-          style: glyphStyle,
+          style: glyphAnimatedStyle,
           children: /*#__PURE__*/_jsx(Icon, {
             name: indeterminate ? "minus" : "check",
             size: spec.iconSize,

package/lib/module/modules/checkbox/Checkbox.variants.js

@@ -19,13 +19,15 @@
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
 
+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, WCAG 2.5.5 AAA). Duplicated rather than imported —
  * modules never import across `src/modules/*` — so this is the component's own copy.
  */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+
 /**
  * Checkbox-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `boxSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.

package/lib/module/modules/checkbox/CheckboxProps.js

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

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

@@ -14,6 +14,8 @@ the pattern rationale.
 | `__tests__/Checkbox.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
 | `__tests__/Checkbox.render.test.tsx` | Render: states, press-toggle (box and label), disabled, indeterminate, focus-ring tween + reached opacity. |
 | `__tests__/Checkbox.motion.test.tsx` | Motion: the reduce-motion snap for all three animations, and the real glyph/press tweens with motion on. |
+| `__tests__/Checkbox.keyboard.test.tsx` | Space activation via `useSpaceActivation`. |
+| `__tests__/Checkbox.dom.test.tsx` | Real-DOM a11y props on web (`jest --config jest.web.config.js`). |
 
 ## Props
 
@@ -79,14 +81,14 @@ Three animations, all from `core/motion`, all `opacity`/`transform` only on the
 
 | What | Where | Driver |
 |------|-------|--------|
-| Row press scale + opacity dip | the row `Animated.View` (`Checkbox.tsx:204`) | `usePressMotion(disabled)` (`:84`) — disabled rows never animate |
-| Focus-ring crossfade | the always-mounted ring `Animated.View` (`:206`) | `setRingVisible` (`:110`), `fast` |
-| Glyph scale-in / out on check | the glyph `Animated.View` (`:212`) | the `filled` effect (`:126`), `fast` + `emphasized` |
+| Row press scale + opacity dip | the row `Reanimated.View` | `usePressMotion(disabled)` — disabled rows never animate |
+| Focus-ring crossfade | the always-mounted ring `Reanimated.View` | `setRingVisible`, `fast` |
+| Glyph scale-in on check | the glyph `Reanimated.View`, mounted only while `filled` | the `filled` effect, `fast` + `emphasized` |
 
-**WCAG 2.3.3** — each one is guarded by `if (!motion.enabled) { …setValue(to); return; }` (`:106`,
-`:122`, and `usePressMotion`'s own guard), so under reduce motion (or the global kill switch) the
+**WCAG 2.3.3** — each one is guarded by `if (!motion.enabled) { …value = to; return; }` (and
+`usePressMotion`'s own guard), so under reduce motion (or the global kill switch) the
 value is at its FINAL state on the very next render: no tween, no timers. `Checkbox.motion.test.tsx`
-pins both halves — the snap with reduce motion on, a real `Animated.timing` with it off.
+pins both halves — the snap with reduce motion on, a real `motion.timing` with it off.
 
 ## Known gaps
 
@@ -101,3 +103,12 @@ Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLA
 - 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 5 (Android parity)** — `Checkbox` had no `android_ripple` while its sibling `RadioGroup`
+  already did, so the two controls in the same family felt different on Android. The row `Pressable`
+  now gets `android_ripple` (`borderless: false`), gated on `Platform.OS === "android" && !disabled`.
+
+Checkbox press uses `usePressState` and `useHaptics().selection()`.
+
+## Wave 2 behaviour
+
+The checked-state indicator tweens through `core/motion`; haptics fire on toggle when motion is enabled.

package/lib/module/modules/chip/Chip.js

@@ -9,20 +9,29 @@
  * target, never icon-only (`label` is required).
  */
 
-import { memo, useMemo } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useCallback, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion } from "react-native-reanimated";
 import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
+import { AccentGradientFill } from "../../core/gradient/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { MediaImage } from "../../core/media/index.js";
+import { rippleColor as androidRippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { elevation, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
 import { useTheme } from "../../theme/hooks.js";
-import { CHIP_AVATAR_SIZE, CHIP_REMOVE_HIT_SLOP, CHIP_REMOVE_ICON_SIZE, chipRemoveSlotStructure, chipRemoveTouchStructure, CHIP_SIZES, chipStructure, isChipFilled, resolveChipAccessibility, resolveChipColors, resolveChipPressedBackground } from "./Chip.variants.js";
+import { CHIP_AVATAR_SIZE, CHIP_REMOVE_HIT_SLOP, CHIP_REMOVE_ICON_SIZE, chipRemoveSlotStructure, chipRemoveTouchStructure, CHIP_SIZES, chipStructure, resolveChipAccessibility, resolveChipColors } from "./Chip.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const Chip = /*#__PURE__*/memo(function Chip(props) {
   const {
     label,
     variant = "subtle",
     tone = "neutral",
+    customColors,
     size = "md",
     selected = false,
     onPress,
@@ -34,22 +43,52 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     testID
   } = props;
   const theme = useTheme();
+  const haptics = useHaptics();
   const spec = CHIP_SIZES[size];
-  const filled = isChipFilled(variant, selected);
-  const colors = resolveChipColors(theme.colors, tone, variant, selected);
-  const pressedBackground = resolveChipPressedBackground(theme.colors);
+  const colors = resolveChipColors(theme.colors, tone, variant, selected, customColors);
+  const press = usePressState(disabled);
+  const removePress = usePressState(disabled);
   const a11y = resolveChipAccessibility({
     selected: props.selected,
     disabled
   });
-  const pressedStyle = pressed => pressed ? filled ? styles.filledPressed : {
-    backgroundColor: pressedBackground
-  } : null;
+  const handlePress = useCallback(() => {
+    haptics.selection();
+    onPress?.();
+  }, [haptics, onPress]);
+  const overlayColor = useMemo(() => stateLayerScrim(theme.mode), [theme.mode]);
+  const selectedDepth = useMemo(() => {
+    if (!selected) return undefined;
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.sm);
+    void theme.elevatedSurfaces;
+    return floatingSurfaceStyle(theme, "sm");
+  }, [selected, theme]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: overlayColor,
+    borderRadius: theme.radii.full,
+    borderCurve: "continuous"
+  }), [overlayColor, theme.radii.full]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled) return undefined;
+    return {
+      color: androidRippleColor(theme.mode),
+      borderless: false
+    };
+  }, [disabled, theme.mode]);
+  const removeRipple = useMemo(() => {
+    if (Platform.OS !== "android" || disabled) return undefined;
+    return {
+      color: androidRippleColor(theme.mode),
+      borderless: true
+    };
+  }, [disabled, theme.mode]);
   const avatarBox = CHIP_AVATAR_SIZE[size];
   const avatarStyle = useMemo(() => ({
     width: avatarBox,
     height: avatarBox,
     borderRadius: theme.radii.full,
+    borderCurve: "continuous",
     overflow: "hidden"
   }), [avatarBox, theme.radii.full]);
   const leading = avatarUri !== undefined ? /*#__PURE__*/_jsx(MediaImage, {
@@ -70,7 +109,7 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     strokeWidth: ICON_STROKE
   }) : null;
   const removable = onRemove !== undefined;
-  const chip = /*#__PURE__*/_jsxs(Pressable, {
+  const chip = /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: label,
@@ -78,25 +117,33 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     "aria-pressed": a11y["aria-pressed"],
     accessibilityState: a11y.accessibilityState,
     disabled: a11y.disabled,
-    onPress: a11y.disabled ? undefined : onPress,
+    onPress: a11y.disabled ? undefined : onPress === undefined ? undefined : handlePress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
     hitSlop: spec.hitSlop,
-    style: ({
-      pressed
-    }) => [chipStructure(theme, {
+    android_ripple: androidRipple,
+    style: [chipStructure(theme, {
       size,
       variant
     }), {
-      backgroundColor: colors.background,
-      borderColor: colors.border
-    }, removable ? chipRemoveSlotStructure(theme, {
+      borderColor: colors.border,
+      overflow: "hidden"
+    }, !selected && {
+      backgroundColor: colors.background
+    }, selectedDepth, removable ? chipRemoveSlotStructure(theme, {
       size
-    }) : null, pressedStyle(pressed),
-    // Removable: the wrapper below owns the dim and the consumer `style`, so both also cover
-    // the sibling "x".
-    removable ? null : disabled && styles.dimmed, removable ? null : style],
-    children: [leading, /*#__PURE__*/_jsx(Text, {
+    }) : null, press.animatedStyle, removable ? null : disabled && styles.dimmed, removable ? null : style],
+    children: [selected && /*#__PURE__*/_jsx(AccentGradientFill, {
+      color: colors.background
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+        pointerEvents: 'none'
+      }]
+    }), leading, /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+      style: [theme.fontStyleForWeight(theme.fontWeights[selected ? "semibold" : "medium"]), {
         fontSize: spec.fontSize,
         color: colors.text,
         flexShrink: 1
@@ -104,7 +151,17 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
       children: label
     })]
   });
-  if (!removable) return chip;
+  const chipEnter = FadeInDown.springify().reduceMotion(ReduceMotion.System);
+  const chipExit = FadeOut.reduceMotion(ReduceMotion.System);
+  const chipLayout = LinearTransition.reduceMotion(ReduceMotion.System);
+  if (!removable) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      entering: chipEnter,
+      exiting: chipExit,
+      layout: chipLayout,
+      children: chip
+    });
+  }
 
   // The remove control is a SIBLING of the chip's press target, never a descendant: a `Pressable`
   // defaults to `accessible`, which collapses its whole subtree into one element, so a nested "x"
@@ -114,42 +171,47 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     /*#__PURE__*/
     // The wrapper repeats the chip's `hitSlop`: a touch outside a view's own hit region is never
     // dispatched into its children, so without it this node would clip the chip back to 32dp.
-    _jsxs(View, {
-      hitSlop: spec.hitSlop,
-      style: [disabled && styles.dimmed, style],
-      children: [chip, /*#__PURE__*/_jsx(Pressable, {
-        testID: testID ? `${testID}-remove` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: removeAccessibilityLabel(label),
-        disabled: disabled,
-        onPress: disabled ? undefined : onRemove,
-        hitSlop: CHIP_REMOVE_HIT_SLOP,
-        style: ({
-          pressed
-        }) => [chipRemoveTouchStructure(theme, {
-          size
-        }), pressedStyle(pressed)],
-        children: /*#__PURE__*/_jsx(Icon, {
-          name: "x",
-          size: CHIP_REMOVE_ICON_SIZE,
-          color: colors.text,
-          strokeWidth: ICON_STROKE
-        })
-      })]
+    _jsx(Animated.View, {
+      entering: chipEnter,
+      exiting: chipExit,
+      layout: chipLayout,
+      children: /*#__PURE__*/_jsxs(View, {
+        hitSlop: spec.hitSlop,
+        style: [disabled && styles.dimmed, style],
+        children: [chip, /*#__PURE__*/_jsxs(AnimatedPressable, {
+          testID: testID ? `${testID}-remove` : undefined,
+          accessibilityRole: "button",
+          accessibilityLabel: removeAccessibilityLabel(label),
+          disabled: disabled,
+          onPress: disabled ? undefined : onRemove,
+          onPressIn: removePress.handlers.onPressIn,
+          onPressOut: removePress.handlers.onPressOut,
+          onLayout: removePress.onLayout,
+          hitSlop: CHIP_REMOVE_HIT_SLOP,
+          android_ripple: removeRipple,
+          style: [chipRemoveTouchStructure(theme, {
+            size
+          }), {
+            overflow: "hidden"
+          }, removePress.animatedStyle],
+          children: [/*#__PURE__*/_jsx(Animated.View, {
+            style: [StyleSheet.absoluteFill, overlayStaticStyle, removePress.overlayStyle, {
+              pointerEvents: 'none'
+            }]
+          }), /*#__PURE__*/_jsx(Icon, {
+            name: "x",
+            size: CHIP_REMOVE_ICON_SIZE,
+            color: colors.text,
+            strokeWidth: ICON_STROKE
+          })]
+        })]
+      })
     })
   );
 });
 const styles = StyleSheet.create({
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is
-  // correct — same precedent Button/Select/Badge use.
   dimmed: {
     opacity: 0.5
-  },
-  // Filled (solid/selected) chips dim on press instead of swapping to `bg.sunken`: replacing a
-  // coloured fill with a flat neutral tint would erase the tone/selection cue for the moment a
-  // finger is down. See `resolveChipPressedBackground`'s own comment for the non-filled case.
-  filledPressed: {
-    opacity: 0.85
   }
 });
 //# sourceMappingURL=Chip.js.map

package/lib/module/modules/chip/Chip.variants.js

@@ -13,15 +13,16 @@
  * (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 };
 
 /** `accent`/`neutral` are brand-driven emphasis; the rest mirror the theme's status roles — same
  *  shape `Badge`'s own `BadgeTone` uses. */
 
 /** Same touch-target floor as every interactive control in this library (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));
+
 /**
  * Chip-specific dimensions. Visibly smaller than Button (a chip is a token, not a call-to-action)
  * but every size still reaches the 44dp floor via `hitSlop`, exactly like Button/Select do for
@@ -67,7 +68,19 @@ export const CHIP_REMOVE_HIT_SLOP = slopFor(CHIP_REMOVE_TOUCH_BOX);
  * documents (`StatusColors.border` clears neither 3:1 against the canvas nor against its own
  * `subtle` fill, on any brand × mode).
  */
-function resolveChipToneColors(colors, tone) {
+function resolveChipToneColors(colors, tone, customColors) {
+  if (tone === "custom") {
+    if (!customColors) {
+      throw new Error('Chip tone="custom" requires customColors={{ bg, fg }}.');
+    }
+    return {
+      solidFill: customColors.bg,
+      onSolid: customColors.fg,
+      mutedText: customColors.fg,
+      subtleFill: customColors.bg,
+      border: customColors.fg
+    };
+  }
   switch (tone) {
     case "accent":
       return {
@@ -105,8 +118,8 @@ function resolveChipToneColors(colors, tone) {
  * pair `variant="solid"` reads — so "selected outline chip" and "solid chip" render identically
  * instead of introducing a third, separately-measured filled pairing.
  */
-export function resolveChipColors(colors, tone, variant, selected) {
-  const t = resolveChipToneColors(colors, tone);
+export function resolveChipColors(colors, tone, variant, selected, customColors) {
+  const t = resolveChipToneColors(colors, tone, customColors);
   if (selected || variant === "solid") {
     return {
       background: t.solidFill,

package/lib/module/modules/chip/ChipGroup.js

@@ -7,8 +7,10 @@
  * every layout-only wrapper in this library takes.
  */
 
-import { memo } from "react";
-import { ScrollView, View } from "react-native";
+import { memo, useMemo } from "react";
+import { ScrollView } from "react-native";
+import Reanimated, { LinearTransition, ReduceMotion } from "react-native-reanimated";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { resolveChipGroupGap } from "./Chip.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,6 +24,11 @@ export const ChipGroup = /*#__PURE__*/memo(function ChipGroup({
 }) {
   const theme = useTheme();
   const gapValue = resolveChipGroupGap(theme, gap);
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
+  const slottedChildren = renderNodeSlot(children, childrenSlotStyle);
   if (scrollable) {
     return /*#__PURE__*/_jsx(ScrollView, {
       testID: testID,
@@ -32,17 +39,21 @@ export const ChipGroup = /*#__PURE__*/memo(function ChipGroup({
         flexDirection: "row",
         gap: gapValue
       }, style],
-      children: children
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        layout: LinearTransition.reduceMotion(ReduceMotion.System),
+        children: slottedChildren
+      })
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: [{
       flexDirection: "row",
       flexWrap: wrap ? "wrap" : "nowrap",
       gap: gapValue
     }, style],
-    children: children
+    children: slottedChildren
   });
 });
 //# sourceMappingURL=ChipGroup.js.map

package/lib/module/modules/chip/ChipGroupProps.js

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

package/lib/module/modules/chip/ChipProps.js

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

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

@@ -21,6 +21,7 @@ independent select; `QuickChip` is select-only, unexported). `Chip` generalises
 | `Chip.variants.ts` | Pure resolvers (`resolveChipColors`, `isChipFilled`, `resolveChipPressedBackground`, `resolveChipAccessibility`, `resolveChipGroupGap`) + the themed structural resolvers (`chipStructure`, `chipRemoveSlotStructure`, `chipRemoveTouchStructure`). No React, no lucide. |
 | `index.ts` | Public surface: `Chip`, `ChipProps`, `ChipGroup`, `ChipGroupProps`, the closed unions, `IconName`. |
 | `__tests__/Chip.test.ts` | Pure: WCAG contrast (6 tones × 3 variants × selected, all brands × modes), touch target, the a11y contract, `selected` overriding `variant`. |
+| `__tests__/ChipGroup.dom.test.tsx` | Web DOM: the group's layout container on react-native-web. |
 | `__tests__/Chip.render.test.tsx` | Render: press wiring, the remove affordance never firing `onPress`, the remove button being a SIBLING of the chip's press target (WCAG 4.1.2), `selected` a11y, disabled gating, `avatarUri`-over-`icon`, `ChipGroup` wrap/scrollable. |
 
 ## Props
@@ -31,7 +32,8 @@ independent select; `QuickChip` is select-only, unexported). `Chip` generalises
 |------|------|---------|-------|
 | `label` | `string` | — | Required. A chip is never icon-only. |
 | `variant` | `solid \| outline \| subtle` | `subtle` | |
-| `tone` | `accent \| neutral \| success \| warning \| danger \| info` | `neutral` | |
+| `tone` | `accent \| neutral \| success \| warning \| danger \| info \| custom` | `neutral` | |
+| `customColors` | `{ bg, fg }` | — | Required when `tone="custom"`. Same contract as `Badge`. |
 | `size` | `sm \| md` | `md` | 28 / 32 dp visual height; both reach 44dp via `hitSlop`. |
 | `selected` | `boolean` | `false` | Renders the filled/accented look regardless of `variant`. Only exposed as toggle state (`aria-pressed` + `accessibilityState.selected`) when the caller passes it — see Accessibility contract. |
 | `onPress` | `() => void` | — | |
@@ -145,12 +147,10 @@ independent select; `QuickChip` is select-only, unexported). `Chip` generalises
 ## Performance
 
 Both `Chip` and `ChipGroup` are wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see
-root `CLAUDE.md`). `Chip`'s inline `pressedStyle` closure only ever reaches native `Pressable` host
-elements, never a memoized library child — the same non-memoized-inline-closure precedent Select's
-and Menu's own row `style` callbacks already establish.
+root `CLAUDE.md`). Chip and its remove affordance both use `usePressState` (scale + state-layer
+overlay); filled chips also dim via `press.overlayStyle` instead of swapping to `bg.sunken`. The
+remove control takes its own `borderless: true` Android ripple, split from the pill's `false` one.
 
-## Modernization (v1.0.7)
+## Wave 2 behaviour
 
-- 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.
+Chip and ChipGroup entering/leaving siblings use Reanimated layout with `ReduceMotion.System`.