pixelize-native-library 1.0.7 → 1.2.1

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

@@ -10,8 +10,9 @@ pure/testable resolvers, closed unions, no `{...rest}`.
 | `Input.tsx` | The component. Composition, a11y wiring, focus ring, disabled dimming. |
 | `Input.variants.ts` | Pure resolvers (`INPUT_SIZES`, `resolveInputStatus`, `resolveInputAccessibility`) + the themed structural variant resolver `inputStructure`. No React, no lucide. |
 | `index.ts` | Public surface: `Input`, `InputProps`, the closed unions, `IconName` (re-exported from `core/icon`). |
-| `__tests__/Input.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
-| `__tests__/Input.render.test.tsx` | Render: value/placeholder, editing, disabled, helper/error swap, focus ring. |
+| `__tests__/Input.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + label/hint a11y contract. |
+| `__tests__/Input.render.test.tsx` | Render: value/placeholder, editing, disabled, helper/error swap + announcement, focus-ring crossfade. |
+| `__tests__/Input.motion.test.tsx` | Reduce-motion: the snap branch (ring and message reach their final state with no tween). |
 
 ## Props
 
@@ -25,12 +26,13 @@ pure/testable resolvers, closed unions, no `{...rest}`.
 | `disabled` | `boolean` | `false` | Dimmed; blocks editing. |
 | `label` | `string` | — | Rendered above the field; falls back into `accessibilityLabel`. |
 | `helperText` | `string` | — | Shown below the field when `status` is `default`. |
-| `errorText` | `string` | — | Shown below the field (replacing `helperText`), live-announced, when `status` is `error`. |
+| `errorText` | `string` | — | Shown below the field (replacing `helperText`) and announced, when `status` is `error`. Joins the field's accessible NAME and sets `aria-invalid` — **not** `accessibilityHint` (see below; this used to contradict `FormField`'s own stated rule, fixed to match it). |
 | `leadingIcon` / `trailingIcon` | `IconName` | — | A NAME, never a `ReactNode`. Decorative (no built-in clear/press behaviour in v1). |
 | `secureTextEntry` | `boolean` | `false` | No visibility-toggle button in v1 — needs an icon outside the current catalogue. |
 | `accessibilityLabel` | `string` | `label` | Overrides the label fallback. |
 | `containerStyle` | `LayoutStyle` | — | The documented exception for a native-primitive wrapper. Outermost, last, once. Never `inputStyle`. |
 | `testID` | `string` | — | Forwarded to the underlying `TextInput`. |
+| `autoComplete` | `TextInputProps["autoComplete"]` | — | Pass `"off"` on fields that aren't a real form (e.g. a search box) to suppress the OS autofill/keyboard-suggestion strip. Also drives `importantForAutofill="no"` on Android when `"off"` — that strip otherwise eats vertical space above the keyboard. |
 
 ## Accessibility contract (WCAG)
 
@@ -51,7 +53,12 @@ pure/testable resolvers, closed unions, no `{...rest}`.
   3:1 everywhere (≥ 3.37:1 light, ≥ 5.05:1 dark) — see the comment on `resolveInputStatus`.
 - **2.4.7 / 2.4.11** — a visible focus ring (`border.focus`) appears on `TextInput` focus/blur, offset
   a small gap OUTSIDE the field, same pattern as Button's ring (its guaranteed ≥ 3:1 is against the
-  canvas, not the field's own border).
+  canvas, not the field's own border). The ring is **always mounted at opacity 0**, so asserting it
+  is "in the tree" proves nothing — `Input.render.test.tsx` reads its OPACITY across the real fade
+  (focus → 1, blur → 0, plus a mid-fade assertion), and `Input.motion.test.tsx` covers the snap
+  branch. That render test mocks `shouldUseNativeDriver` to `false`: the ring runs on the native
+  driver, whose JS-side value never advances under Jest (the native animation module is a stub), so
+  the JS driver is the only way to observe the same tween. Nothing about the component changes.
 - **Web** — RNW renders `TextInput` as a real `<input>`, so `styles.webOutlineReset` (`outlineWidth: 0`,
   applied only when `Platform.OS === "web"`) suppresses the browser's own default focus outline, which
   would otherwise double up visibly with the themed ring above. The themed ring remains the sole
@@ -61,8 +68,25 @@ pure/testable resolvers, closed unions, no `{...rest}`.
   `TextInput` has no `htmlFor`-equivalent link to a sibling label, so its content is copied onto the
   field's own `accessibilityLabel` instead — keeping the label visible without a screen reader
   announcing "Email" twice (once for the label, once for the field).
-- `errorText` carries `accessibilityLiveRegion="polite"` so a validation error appearing after the
-  user leaves the field is announced without requiring re-focus.
+- **3.3.1 / 1.3.1 / 4.1.2 (describing the field) — CORRECTED.** This used to put `errorText` on
+  `accessibilityHint`, directly contradicting the rule `FormField.variants.ts` states explicitly: "a
+  hint is advisory and some readers suppress it, which a validity message must never be." `Input` was
+  the inconsistent one; fixed to match `FormField`. Now: `errorText` (error state) joins the
+  `TextInput`'s accessible NAME and sets `aria-invalid`; `helperText` (default state, genuinely
+  advisory) stays on `accessibilityHint` for native. On web, `accessibilityHint` reaches nothing at
+  all (zero occurrences in `react-native-web`'s dist) — RNW forwards both `nativeID` and
+  `aria-describedby`, so the field also carries `aria-describedby` pointing at the real rendered
+  message `Text`'s `nativeID`, proven on the real DOM by `__tests__/Input.dom.test.tsx`. The error
+  is never double-described: `aria-describedby` is omitted whenever the message is the error, since
+  that string is already in the name.
+- **4.1.3 (status messages)** — an appearing error is announced via `useAnnounce` (`core/a11y`),
+  i.e. `AccessibilityInfo.announceForAccessibility`, so it reaches VoiceOver **and** TalkBack. The
+  message `Text` deliberately carries **no** `accessibilityLiveRegion`: that prop is Android-only, so
+  it left iOS silent, and keeping it alongside the announcement would announce twice on Android. A
+  helper message is not announced — only an error interrupts.
+- The message `Text` stays mounted through its exit tween, so while it is leaving it carries
+  `accessibilityElementsHidden` / `importantForAccessibility="no-hide-descendants"` — a message the
+  field no longer has must not linger in the accessibility tree.
 - A disabled field is exempt from the contrast minimum (WCAG 1.4.3) and dims via `opacity: 0.5`,
   same as Button's disabled state — not a separate, unverified colour token.
 
@@ -95,3 +119,11 @@ identity — so it is never called `tone`.
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its one library child, `Icon`, only ever receives primitives — nothing to memoize; `TextInput`/`View` are host elements, outside this pass's scope.
+
+## 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 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

package/lib/module/modules/limit-reached-modal/LimitReachedModal.js

@@ -0,0 +1,90 @@
+"use strict";
+
+/**
+ * LimitReachedModal — a plan-limit dialog, DELIBERATELY composed from this library's own,
+ * already-shipped `Modal` and `Button` rather than reimplementing a backdrop/panel/action row from
+ * scratch (same reasoning `AlertDialog` documents for its own composition). This module's own job
+ * is: the six-`kind` copy (admin vs "contact your administrator"), the optional usage line, and
+ * which action(s) appear — an always-present dismiss action plus an upgrade CTA gated on
+ * `canManageBilling`.
+ *
+ * Web's counterpart (`Micro-Components/src/Components/LimitReachedModal`) renders a brand-gradient
+ * header with a per-`kind` icon (mostly `Crown`, `Users` for the `user` kind). Neither ports: this
+ * library has no `LinearGradient` anywhere and the API contract bans a raw `color?: string`/gradient
+ * prop, and `crown` isn't a registered glyph. A single `triangle-alert` icon on the theme's
+ * `status.warning` role reads correctly for every kind and every brand instead — the same icon
+ * `Banner` already resolves for its own `warning` tone.
+ */
+
+import { memo } from "react";
+import { Text, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { Icon } from "../../core/icon/index.js";
+import { Button } from "../button/index.js";
+import { Modal } from "../modal/index.js";
+import { LIMIT_REACHED_MODAL_ICON_SIZE, formatLimitUsage, limitReachedModalActionsStructure, limitReachedModalIconBadgeStructure, resolveLimitReachedCopy, resolveLimitReachedModalColors } from "./LimitReachedModal.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+export const LimitReachedModal = /*#__PURE__*/memo(function LimitReachedModal({
+  visible,
+  onRequestClose,
+  kind,
+  limit = null,
+  used = null,
+  canManageBilling,
+  onUpgrade,
+  title,
+  message,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = resolveLimitReachedModalColors(theme.colors);
+  const copy = resolveLimitReachedCopy(kind, canManageBilling);
+  const usage = formatLimitUsage(kind, used, limit);
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    title: title ?? copy.title,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [limitReachedModalIconBadgeStructure(theme), {
+        backgroundColor: colors.iconBadge
+      }],
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "triangle-alert",
+        size: LIMIT_REACHED_MODAL_ICON_SIZE,
+        color: colors.icon,
+        strokeWidth: ICON_STROKE
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.md,
+        color: colors.message,
+        marginBottom: theme.space[usage ? 1 : 5]
+      }],
+      children: message ?? copy.message
+    }), usage !== null && /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.sm,
+        color: colors.usage,
+        marginBottom: theme.space[5]
+      }],
+      children: usage
+    }), /*#__PURE__*/_jsxs(View, {
+      style: limitReachedModalActionsStructure(theme),
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outline",
+        label: canManageBilling ? "Maybe later" : "Close",
+        onPress: onRequestClose,
+        testID: testID ? `${testID}-dismiss` : undefined
+      }), canManageBilling && /*#__PURE__*/_jsx(Button, {
+        variant: "solid",
+        tone: "accent",
+        label: "Upgrade plan",
+        onPress: () => onUpgrade?.(),
+        testID: testID ? `${testID}-upgrade` : undefined
+      })]
+    })]
+  });
+});
+//# sourceMappingURL=LimitReachedModal.js.map

package/lib/module/modules/limit-reached-modal/LimitReachedModal.variants.js

@@ -0,0 +1,108 @@
+"use strict";
+
+/**
+ * LimitReachedModal's pure resolvers. Mirrors `AlertDialog.variants.ts`'s split: this module owns
+ * no colour resolver for the panel or the actions — those are `Modal`'s and `Button`'s own,
+ * applied unchanged (see `Modal.test.ts` / `Button.test.ts`). What IS this module's own contract:
+ * the six-`kind` × admin/member copy table (ported verbatim from web's `limitReachedCopy.ts` so
+ * both platforms read identically), the usage-line formatter, and the icon badge's own colour
+ * pairing (`status.warning.text` on `status.warning.subtle` — the same proven pairing Badge/Banner
+ * use for their own `subtle` variant, not a fresh, unmeasured one).
+ *
+ * Free of React and of any `Modal`/`Button` RENDER import — only `RoleColors`'s TYPE is pulled in
+ * — so this stays a pure resolver file, exactly like `AlertDialog.variants.ts`.
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+// Ported verbatim from web's `limitReachedCopy.ts` (Micro-Components) so both platforms read
+// identically — see that file's own comment for the original source (crm-frontend /
+// account-frontend copy this replaced).
+const COPY = {
+  record: {
+    title: "Record limit reached",
+    unit: "records",
+    admin: "You have reached your plan record limit. Upgrade to add more records.",
+    member: "Your organization has reached its record limit. Contact your organization administrator to upgrade the plan."
+  },
+  automation: {
+    title: "Automation limit reached",
+    unit: "automations",
+    admin: "You have reached your plan automation limit. Upgrade to create more workflows and cadences.",
+    member: "Your organization has reached its automation limit. Contact your organization administrator to upgrade the plan."
+  },
+  custom_modules: {
+    title: "Custom module limit reached",
+    unit: "custom modules",
+    admin: "You have reached your plan custom module limit. Upgrade to add more custom modules.",
+    member: "Your organization has reached its custom module limit. Contact your organization administrator to upgrade the plan."
+  },
+  user: {
+    title: "Seat limit reached",
+    unit: "users",
+    admin: "You have reached the number of users included on your plan. Upgrade to add more.",
+    member: "Your organization has reached its user limit. Contact your organization administrator to upgrade the plan."
+  },
+  projects: {
+    title: "Project limit reached",
+    unit: "projects",
+    admin: "You have reached your plan project limit. Upgrade to create more projects.",
+    member: "Your organization has reached its project limit. Contact your organization administrator to upgrade the plan."
+  },
+  tickets: {
+    title: "Ticket limit reached",
+    unit: "tickets",
+    admin: "You have reached your plan ticket limit. Upgrade to create more tickets.",
+    member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan."
+  }
+};
+/** `canManageBilling` selects the admin (upgrade-able) or member ("ask your admin") message. */
+export function resolveLimitReachedCopy(kind, canManageBilling) {
+  const c = COPY[kind];
+  return {
+    title: c.title,
+    message: canManageBilling ? c.admin : c.member
+  };
+}
+
+/** `null` when either value is missing — the caller renders no usage line at all in that case. */
+export function formatLimitUsage(kind, used, limit) {
+  if (used == null || limit == null) return null;
+  return `${used} of ${limit} ${COPY[kind].unit} used`;
+}
+/**
+ * Maps LimitReachedModal onto the theme's role colours. The severity is fixed (`warning` — a plan
+ * limit is a soft stop, not a destructive action), so there is no `tone` prop to widen; every
+ * colour this component can show is one of these role lookups.
+ */
+export function resolveLimitReachedModalColors(colors) {
+  return {
+    iconBadge: colors.status.warning.subtle,
+    icon: colors.status.warning.text,
+    message: colors.fg.default,
+    usage: colors.fg.muted
+  };
+}
+export const LIMIT_REACHED_MODAL_ICON_SIZE = 20;
+export const LIMIT_REACHED_MODAL_ICON_BADGE_SIZE = 40;
+
+/** The icon's circular badge — structural only, colour applied inline over this. */
+export const limitReachedModalIconBadgeStructure = createThemedVariants(theme => ({
+  base: {
+    width: LIMIT_REACHED_MODAL_ICON_BADGE_SIZE,
+    height: LIMIT_REACHED_MODAL_ICON_BADGE_SIZE,
+    borderRadius: LIMIT_REACHED_MODAL_ICON_BADGE_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: theme.space[3]
+  }
+}));
+
+/** The two-action row beneath the usage line — same shape as `alertDialogActionsStructure`. */
+export const limitReachedModalActionsStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    columnGap: theme.space[3]
+  }
+}));
+//# sourceMappingURL=LimitReachedModal.variants.js.map

package/lib/module/modules/limit-reached-modal/MODULE.md

@@ -0,0 +1,94 @@
+# limit-reached-modal/ — a plan-limit dialog composed from Modal + Button
+
+`LimitReachedModal` is the mobile counterpart to web's `LimitReachedModal`
+(`Micro-Components/src/Components/LimitReachedModal`) — a dialog shown when an org hits a plan
+limit (records, automations, custom modules, seats, projects, tickets). Like `AlertDialog`, it is
+DELIBERATELY built by composing this library's own, already-shipped `Modal` (backdrop, panel,
+dismissal, title contrast) and `Button` (tone, press feedback, touch target) rather than
+reimplementing either. This module owns exactly its own copy (six `kind`s × admin/member), the
+optional usage line, and which action(s) appear.
+
+## Files
+
+| File | Role |
+|------|------|
+| `LimitReachedModal.tsx` | The component. Composes `Modal` (title, dismissal) with an icon badge, a message, an optional usage line, and a one- or two-`Button` action row. |
+| `LimitReachedModal.variants.ts` | Pure resolvers: the `LimitKind` copy table (`resolveLimitReachedCopy`, ported verbatim from web), `formatLimitUsage`, and the themed icon-badge/action-row layout + colour (`resolveLimitReachedModalColors`). No React, no lucide. |
+| `index.ts` | Public surface: `LimitReachedModal`, `LimitReachedModalProps`, `LimitKind`. |
+| `__tests__/LimitReachedModal.test.ts` | Pure: the copy resolver for all six kinds × both admin/member paths, the usage formatter, and WCAG contrast for this module's own colour choices (icon badge, message, usage) — measured for all 9 brands × both modes. |
+| `__tests__/LimitReachedModal.render.test.tsx` | Render: hidden when `visible=false`, the upgrade CTA absent when `canManageBilling=false`, `onUpgrade`/`onRequestClose` wiring, and the usage line appearing only when both `limit` and `used` are given. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `visible` | `boolean` | — | Required. Forwarded to `Modal` — fully controlled, no internal open state. |
+| `onRequestClose` | `() => void` | — | Required. Forwarded to `Modal` (backdrop press, Android back, iOS VoiceOver escape). Also the dismiss action's `onPress`. |
+| `kind` | `LimitKind` | — | Required. `"record" \| "automation" \| "custom_modules" \| "user" \| "projects" \| "tickets"` — selects the copy table entry. |
+| `limit` | `number \| null` | `null` | Plan limit for `kind`. Paired with `used` to show `"<used> of <limit> <unit> used"`. |
+| `used` | `number \| null` | `null` | Current usage for `kind`. Either alone renders no usage line — both are required together. |
+| `canManageBilling` | `boolean` | — | Required. `true` shows the admin copy + an "Upgrade plan" CTA; `false` shows "contact your organization administrator" copy and no CTA. |
+| `onUpgrade` | `() => void` | — | Optional. Wired to the upgrade Button's `onPress` (only rendered when `canManageBilling`). |
+| `title` | `string` | `kind`'s default | Overrides the resolved title, forwarded to `Modal`'s `title`. |
+| `message` | `string` | `kind`'s default | Overrides the resolved admin/member message. |
+| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-dismiss` / `${testID}-upgrade` on the two actions. |
+
+No `style` — same reasoning as `Modal`/`AlertDialog`: there is no parent layout flow to place a
+full-screen dialog within.
+
+## Accessibility contract
+
+- **1.4.3** — the title (via `Modal`'s own `resolveModalPanelColors`) and the message (`fg.default`
+  on the panel's `bg.surface`) clear 4.5:1 for every brand × mode.
+- **1.4.3** — the usage line (`fg.muted` on `bg.surface`) clears 4.5:1 — the same pairing
+  `AlertDialog`'s description proves for itself.
+- **1.4.3** — the icon glyph (`status.warning.text` on its own `status.warning.subtle` badge fill)
+  clears 4.5:1 — the exact pairing Badge/Banner's own `subtle` variant already proves at the role
+  layer (`roleColors.test.ts`), reused rather than freshly measured.
+- **Dismissal semantics** — every one of `Modal`'s dismissal paths (backdrop press, Android hardware
+  back, iOS VoiceOver escape, and on web Escape) resolves to `onRequestClose`, since this module
+  never intercepts it — same contract as the dismiss action itself.
+- **2.1.1 keyboard (web only)** — INHERITED whole from `Modal`. This matters most at
+  `canManageBilling: false`, which renders a single "Close" button: on the `ModalPortalProvider`
+  branch, before that fix, one Tab put a keyboard user outside the dialog behind the scrim with no
+  way back to the only control that dismisses it. No keyboard code lives here;
+  `__tests__/LimitReachedModal.keyboard.web.test.tsx` asserts the inheritance.
+- **Upgrade vs. dismiss are never confusable** — the dismiss action is always `variant="outline"`
+  (unfilled) and the upgrade action is always `variant="solid"` (filled, high-emphasis), so the
+  primary choice is never the visually quieter one.
+
+## Patterns
+
+1. **Compose, don't reimplement.** `Modal` and `Button` are stable, shipped modules; no backdrop,
+   panel, or press-feedback logic is duplicated here — the same "compose existing exports" step
+   `AlertDialog` and `EmptyState` already take.
+2. **A fixed severity, not a `tone` prop.** A plan limit is a soft stop, not a destructive action —
+   the icon badge is always `status.warning`, so there is nothing here to widen into a raw
+   `color?: string`.
+3. **No gradient, no per-`kind` icon.** Web's header uses a brand gradient and swaps `Crown`/`Users`
+   per `kind`; this library has no `LinearGradient` and no registered `crown` glyph, and the API
+   contract bans a raw colour prop regardless. One `triangle-alert` icon on `status.warning` reads
+   correctly for every kind and every brand — the same icon `Banner` already resolves for its own
+   `warning` tone (`resolveBannerIcon`).
+4. **Structure vs. colour split**, even for a thin composing module — the icon badge and action row
+   layouts live in themed resolvers; colour is `resolveLimitReachedModalColors`, applied inline.
+
+## Known gaps
+
+- No built-in scrolling for a long message/usage combination on a small screen — same known gap
+  `Modal`/`AlertDialog` document for `children` in general.
+- No per-`kind` icon or illustration (see Patterns #3) — every `kind` shares one `triangle-alert`
+  badge. A future kind needing a distinct glyph adds one via `core/icon`'s deep-import + map-entry
+  pattern, not a per-kind override prop.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The inline
+`() => onUpgrade?.()` is a fresh closure per render, same as `EmptyState`'s action Button — cheap
+because it forwards straight to a leaf `Pressable`, never a memoized child list item.
+
+## 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/limit-reached-modal/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/limit-reached-modal`. Value exports and type exports
+ * are split for `verbatimModuleSyntax`. The copy table, usage formatter, and colour/structure
+ * resolvers stay internal — a consumer configures a LimitReachedModal through its props, never by
+ * importing its internals.
+ */
+
+export { LimitReachedModal } from "./LimitReachedModal.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/list-item/ListItem.js

@@ -1,10 +1,20 @@
 "use strict";
 
-import { memo, useCallback } from "react";
-import { Pressable, Text, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+/**
+ * ListItem — a row primitive. Press feedback uses `usePressState` (scale + state-layer overlay).
+ */
+
+import { memo, useMemo } from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { concentric } from "../../core/style/index.js";
+import { rippleColor as androidRippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Text } from "../text/index.js";
 import { listItemBodyStructure, listItemDotStructure, listItemStructure, resolveListItemAccessibility, resolveListItemColors } from "./ListItem.variants.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const ListItem = /*#__PURE__*/memo(function ListItem({
   leading,
   title,
@@ -16,60 +26,89 @@ export const ListItem = /*#__PURE__*/memo(function ListItem({
   testID
 }) {
   const theme = useTheme();
-  const colors = resolveListItemColors(theme.colors, unread);
-  const a11y = resolveListItemAccessibility({
+  const pressable = onPress !== undefined;
+  const press = usePressState(!pressable);
+  const leadingRadius = useMemo(() => concentric(theme.radii.lg, theme.space[4]), [theme.radii.lg, theme.space]);
+  const colors = useMemo(() => resolveListItemColors(theme.colors, unread), [theme.colors, unread]);
+  const a11y = useMemo(() => resolveListItemAccessibility({
     title,
     subtitle,
     unread
-  });
-  const rootStyle = useCallback(({
-    pressed
-  }) => [listItemStructure(theme), {
-    backgroundColor: pressed ? colors.pressed : colors.background
+  }), [title, subtitle, unread]);
+  const baseStyle = useMemo(() => [listItemStructure(theme), {
+    backgroundColor: colors.background
   }, style], [theme, colors, style]);
+  const pressableStyle = useMemo(() => [listItemStructure(theme), {
+    backgroundColor: colors.background,
+    overflow: "hidden"
+  }, press.animatedStyle, style], [theme, colors, press.animatedStyle, style]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const androidRipple = useMemo(() => {
+    if (!pressable || Platform.OS !== "android") return undefined;
+    return {
+      color: androidRippleColor(theme.mode),
+      borderless: false
+    };
+  }, [pressable, theme.mode]);
+  const dotStyle = useMemo(() => [listItemDotStructure(theme), {
+    backgroundColor: colors.dot
+  }], [theme, colors]);
+  const bodyStyle = useMemo(() => listItemBodyStructure(theme), [theme]);
   const body = /*#__PURE__*/_jsxs(_Fragment, {
     children: [unread && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-dot`,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: [listItemDotStructure(theme), {
-        backgroundColor: colors.dot
-      }]
-    }), leading, /*#__PURE__*/_jsxs(View, {
-      style: listItemBodyStructure(theme),
+      style: dotStyle
+    }), leading !== undefined && /*#__PURE__*/_jsx(View, {
+      style: {
+        borderRadius: leadingRadius,
+        borderCurve: "continuous",
+        overflow: "hidden"
+      },
+      children: leading
+    }), /*#__PURE__*/_jsxs(View, {
+      style: bodyStyle,
       children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        weight: unread ? "semibold" : "medium",
         numberOfLines: 1,
-        style: [theme.fontStyleForWeight(unread ? theme.fontWeights.semibold : theme.fontWeights.medium), {
-          fontSize: theme.fontSizes.md,
-          color: colors.title
-        }],
         children: title
       }), subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        color: "muted",
         numberOfLines: 2,
-        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-          fontSize: theme.fontSizes.sm,
-          color: colors.subtitle
-        }],
         children: subtitle
       })]
     }), trailing]
   });
-  if (onPress === undefined) {
-    return /*#__PURE__*/_jsx(View, {
+  if (!pressable) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
       testID: testID,
-      style: [listItemStructure(theme), {
-        backgroundColor: colors.background
-      }, style],
+      style: baseStyle,
       children: body
     });
   }
-  return /*#__PURE__*/_jsx(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: "button",
     accessibilityLabel: a11y.accessibilityLabel,
     onPress: onPress,
-    style: rootStyle,
-    children: body
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onLayout: press.onLayout,
+    android_ripple: androidRipple,
+    style: pressableStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-press-overlay`,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), body]
   });
 });
 //# sourceMappingURL=ListItem.js.map

package/lib/module/modules/list-item/ListItem.variants.js

@@ -1,13 +1,15 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * Pure resolvers for ListItem — no React, so the WCAG tests import this directly (mocking only
  * `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+import { floatingBackground, floatingSurfaceStyle } from "../../theme/platform/floatingSurface.native.js";
 export const LIST_ITEM_DOT_SIZE = 8;
-export const LIST_ITEM_MIN_HEIGHT = 44;
+export const LIST_ITEM_MIN_HEIGHT = 56;
 export function resolveListItemColors(colors, unread) {
   return {
     background: unread ? colors.bg.surface : undefined,
@@ -34,7 +36,8 @@ export const listItemStructure = createThemedVariants(theme => ({
     columnGap: theme.space[3],
     minHeight: LIST_ITEM_MIN_HEIGHT,
     paddingVertical: theme.space[3],
-    paddingHorizontal: theme.space[4]
+    paddingHorizontal: theme.space[4],
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 export const listItemBodyStructure = createThemedVariants(theme => ({
@@ -43,6 +46,12 @@ export const listItemBodyStructure = createThemedVariants(theme => ({
     rowGap: theme.space[1]
   }
 }));
+export function listItemRaisedStyle(theme) {
+  return {
+    backgroundColor: floatingBackground(theme, "sm"),
+    ...floatingSurfaceStyle(theme, "sm")
+  };
+}
 export const listItemDotStructure = createThemedVariants(theme => ({
   base: {
     width: LIST_ITEM_DOT_SIZE,

package/lib/module/modules/list-item/MODULE.md

@@ -3,9 +3,8 @@
 `ListItem` renders one row for notification lists, inboxes, and settings screens: optional
 `leading`/`trailing` nodes around a title + subtitle column. `unread` adds an `accent.solid` dot
 and a `bg.surface` row emphasis (plus a semibold title) — `bg.surface`, not `bg.selected`, because
-`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set
-(`bg.sunken` pressed fill — measured, `fg.default` fails AA on `bg.hover` on 4 light brands),
-a plain `View` otherwise.
+`fg.muted` is only measured AA against surface/hover. A `Pressable` when `onPress` is set uses
+`usePressState` (scale + state-layer overlay on the native driver); a plain `View` otherwise.
 
 ## Files
 
@@ -45,3 +44,9 @@ a plain `View` otherwise.
 ## Performance
 
 Wrapped in `React.memo`; the Pressable style function is `useCallback`'d.
+
+## 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.