pixelize-native-library 1.2.0 → 1.2.1

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

@@ -3,9 +3,10 @@
 import { memo, useMemo, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import Svg, { Circle, Line, Path, Text as SvgText } from "react-native-svg";
+import { useDeviceTier } from "../../core/device/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
-import { buildAreaPath, buildLinePath, categoricalColorAt, decimateSeries, defaultNumberFormatter, describeMarker, niceScale, resolveChartAxisColors, resolveLineDomain, resolveSeriesPoints, scaleValue, seriesDashAt, seriesShapeAt, summarizeLineChart } from "./Charts.variants.js";
+import { buildAreaPath, buildLinePath, categoricalColorAt, decimateSeries, defaultNumberFormatter, describeMarker, maxRenderedPoints, niceScale, resolveChartAxisColors, resolveLineDomain, resolveSeriesPoints, scaleValue, seriesDashAt, seriesShapeAt, summarizeLineChart } from "./Charts.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Y_AXIS_WIDTH = 40;
 const X_AXIS_HEIGHT = 24;
@@ -33,6 +34,7 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
   const theme = useTheme();
   const axisColors = useMemo(() => resolveChartAxisColors(theme.colors), [theme.colors]);
   const [width, setWidth] = useState(0);
+  const tier = useDeviceTier();
   const onLayout = event => {
     setWidth(event.nativeEvent.layout.width);
   };
@@ -40,8 +42,8 @@ export const LineChart = /*#__PURE__*/memo(function LineChart({
   const plotHeight = Math.max(0, height - X_AXIS_HEIGHT - PLOT_TOP);
   const decimatedSeries = useMemo(() => series.map(s => ({
     ...s,
-    data: decimateSeries(s.data, datumY)
-  })), [series]);
+    data: decimateSeries(s.data, datumY, maxRenderedPoints(tier))
+  })), [series, tier]);
   const {
     plotted,
     paths,

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

@@ -31,7 +31,9 @@ breakdowns have no closed-union role) — a deliberate, documented exception to
 `centerLabel?`, `centerSublabel?`, `showLegend?` (true — **new**), `style?`, `testID?`. Non-finite /
 ≤ 0 segment values are dropped; with no valid segments only the `bg.sunken` track ring renders.
 `segment.label` (previously accepted but silently dropped) now renders as a legend row, falling
-back to `"Segment N"` when omitted; the legend is skipped for 0–1 valid segments.
+back to `"Segment N"` when omitted; the legend is skipped for 0–1 valid segments. Each legend row
+also carries a knocked-out shape keyed off the segment's own index in `segments[]`, same as
+`PieChart`.
 
 **Sparkline** — `data: number[]`, `width?` (120), `height?` (32),
 `tone?: accent | neutral | success | warning | danger | info` (accent), `style?`, `testID?`.
@@ -134,8 +136,9 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
 - Segment/bar/series `color` values come from the consumer — contrast of consumer-picked colors
   against the canvas is the consumer's to verify (documented exception to the closed-union rule).
   `DonutChart.segments[].color` is required and consumer-supplied (unlike the other three charts'
-  ramp-defaulted `color`), so it has no index identity a shape channel could hook into — its
-  separator is a track-coloured gap instead of a shape.
+  ramp-defaulted `color`); its ring separator stays a track-coloured gap (the ring segments are
+  strokes on one shared circle, not independent filled paths — see "Design decisions"), but the
+  legend now carries a shape per segment's own index in `segments[]`, same as `PieChart`.
 - LineChart's x-axis labels are taken from the longest (decimated) series and positioned by raw
   index; a series with dropped non-finite points can drift slightly out of alignment with the
   shared x-axis, and a decimated series labels only the samples it kept.
@@ -159,18 +162,28 @@ shape/dash channels (`seriesShapeAt`/`seriesDashAt`) wrap the same way, by the s
   styles hoisted out of the row loop; a per-row inline closure or a per-row `variants(theme)` call
   would defeat their memo. `ChartLegend`'s entry array is built inside each chart's own `useMemo`
   (keyed on `series`/`segments`/`showLegend`/`theme.colors`), never a fresh literal per render.
-- **Found, not acted on:** decimation (`MAX_RENDERED_POINTS`) is a fixed constant regardless of
-  `useDeviceTier()` — a `'low'`-tier phone gets the same 200-point cap (and the same new bar-marker/
-  legend work) as `'high'`. Worth a future device-tier-scaled pass; out of scope for this WCAG change
-  (no animation exists here for a native-driver check, and every geometry `useMemo` already keys
-  correctly).
-- **Decimation** (`LineChart`, `Sparkline`): a series longer than `MAX_RENDERED_POINTS` (200) is
+- **Android ripple** — `BarPressTarget`/`WedgePressTarget` take `android_ripple` (`borderless: false`)
+  computed once per chart (`androidRipple`, `useMemo` on `theme.mode`, `Platform.OS === "android"`
+  gated) and passed down per target, rather than re-resolved per row. Each target's absolutely
+  positioned box also gained `overflow: "hidden"` so the ripple clips to it instead of spilling past
+  the invisible press area.
+- **Decimation** (`LineChart`, `Sparkline`): a series longer than a `useDeviceTier()`-scaled
+  `maxRenderedPoints` (80/140/200, low/mid/high — `MAX_RENDERED_POINTS_HIGH` equals the pre-existing
+  fixed `MAX_RENDERED_POINTS`, still exported for a caller that decimates without a tier in hand) is
   downsampled inside the same `useMemo`, before any geometry, so it costs nothing on re-render —
   1,000 samples otherwise means 1,000 svg nodes. Min/max bucketing: both endpoints plus each
   bucket's lowest and highest sample, in original order, so a one-sample spike survives (plain
   stride sampling would drop it). Output is ≤ the threshold; below it the input array is returned
-  as-is. `BarChart` is deliberately NOT decimated — every bar is a labelled category, and dropping
-  categories would contradict the x-axis labels and the a11y summary.
+  as-is. A point costs one svg node against a `BarChart` category's three (bar, label, press
+  target), so the same per-tier node budget affords more points than categories at the same tier.
+- **`BarChart` category cap:** an unbounded `data` array otherwise means unbounded svg nodes — one
+  bar, one label and one press target per category. Above a `useDeviceTier()`-scaled
+  `maxRenderedCategories` (60/120/200, low/mid/high — same worst-case scale as `MAX_RENDERED_POINTS`),
+  `decimateCategories` stride-samples down to the cap inside the same `useMemo`, first/last category
+  always kept, so the shown categories stay spread across the full range rather than clustered at one
+  end. Below the cap the input array is returned as-is (byte-identical to the pre-cap behavior).
+- **`BarList` windowing:** rows render through `VirtualList` (`itemHeight={BAR_LIST_ROW_HEIGHT}`)
+  instead of a raw `.map()`, so an unbounded `items` array no longer mounts every row up front.
 
 ## Modernization (v1.0.7)
 

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

@@ -1,8 +1,9 @@
 "use strict";
 
 import { memo, useCallback, useMemo } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
 import Svg, { Circle, Path } from "react-native-svg";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { ChartLegend } from "./ChartLegend.js";
 import { SEGMENT_SEPARATOR_WIDTH, describeWedge, hitSlopFor, resolvePieWedges, resolveWedgeBoundingBox, seriesShapeAt, summarizePieChart } from "./Charts.variants.js";
@@ -12,7 +13,8 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
   box,
   label,
   testID,
-  onPress
+  onPress,
+  androidRipple
 }) {
   const press = useCallback(() => onPress(index), [onPress, index]);
   const frame = useMemo(() => ({
@@ -20,7 +22,8 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
     left: box.x,
     top: box.y,
     width: box.width,
-    height: box.height
+    height: box.height,
+    overflow: "hidden"
   }), [box]);
   return /*#__PURE__*/_jsx(Pressable, {
     testID: testID,
@@ -28,6 +31,7 @@ const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
     accessibilityLabel: label,
     hitSlop: hitSlopFor(box.width, box.height),
     onPress: press,
+    android_ripple: androidRipple,
     style: frame
   });
 });
@@ -76,6 +80,10 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
     width: size,
     height: size
   }), [size]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     style: [styles.container, style],
@@ -122,7 +130,8 @@ export const PieChart = /*#__PURE__*/memo(function PieChart({
           index: index,
           box: target.box,
           label: target.label,
-          onPress: pressSegment
+          onPress: pressSegment,
+          androidRipple: androidRipple
         }, index))
       })]
     }), /*#__PURE__*/_jsx(ChartLegend, {

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/checkbox/Checkbox.js

@@ -11,10 +11,12 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { Animated, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 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 { rippleColor } from "../../theme/platform/stateLayer.native.js";
 import { useTheme } from "../../theme/hooks.js";
 import { CHECKBOX_SIZES, checkboxBoxStructure, checkboxRowStructure, resolveCheckboxAccessibility, resolveCheckboxColors } from "./Checkbox.variants.js";
 
@@ -46,6 +48,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);
@@ -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.
@@ -143,6 +147,10 @@ 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, {
       testID: "checkbox-row",

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

@@ -101,3 +101,8 @@ 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()`.

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 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,32 @@ 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, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), 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
@@ -117,39 +163,38 @@ export const Chip = /*#__PURE__*/memo(function Chip(props) {
     _jsxs(View, {
       hitSlop: spec.hitSlop,
       style: [disabled && styles.dimmed, style],
-      children: [chip, /*#__PURE__*/_jsx(Pressable, {
+      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,
-        style: ({
-          pressed
-        }) => [chipRemoveTouchStructure(theme, {
+        android_ripple: removeRipple,
+        style: [chipRemoveTouchStructure(theme, {
           size
-        }), pressedStyle(pressed)],
-        children: /*#__PURE__*/_jsx(Icon, {
+        }), {
+          overflow: "hidden"
+        }, removePress.animatedStyle],
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, removePress.overlayStyle]
+        }), /*#__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

@@ -67,7 +67,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 +117,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/MODULE.md

@@ -31,7 +31,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 +146,13 @@ 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`.
 
 ## 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.
+- **Round 5 (Android parity)** — the remove control (icon-only, circular) now gets its own
+  `borderless: true` ripple, split from the pill's own `borderless: false` ripple.