pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/image-viewer/MODULE.md

@@ -0,0 +1,57 @@
+# image-viewer/
+
+Modal image gallery with paging and thumbnails. Heavy module — subpath only.
+
+## Accessibility
+
+- **2.1.1 keyboard (web only)** — INHERITED whole from `Modal` (Escape, the Tab trap, focus restore
+  on the `ModalPortalProvider` branch). Sharpest case in the library: the viewer's only dismiss
+  affordance is the backdrop, so on that branch a keyboard user previously had no way to close it at
+  all. No keyboard code lives here — `__tests__/ImageViewer.keyboard.web.test.tsx` asserts the
+  inheritance.
+
+## Motion contract
+
+- Open/close runs through `useEnterExit()` from `core/motion`: `opacity` + `translateY` on the
+  native driver. The **unmount is timer-driven**, never gated on the animation reporting `finished`,
+  so an interrupted close can never leave the viewer mounted. The RN modal stays mounted until that
+  timer fires, which is what makes the close transition visible.
+- Pager: a thumbnail press scrolls the pager to that page with `scrollToIndex({ animated })`, where
+  `animated` is `motion.enabled` — so reduce motion jumps straight to the page.
+- No per-cell animation on pages or thumbnails.
+
+## Performance
+
+- Both the pager and the thumbnail strip are virtualized horizontal `FlatList`s with `getItemLayout`
+  (fixed page width / thumb stride). The thumbnail strip used to be an eager `.map()` that mounted
+  every `Image` at once. `core/list`'s `VirtualList` is not used here — it exposes no `horizontal`
+  or `pagingEnabled`.
+- `id -> index` lookups are memoized maps, replacing an `O(n)` `findIndex` that ran inside a per-item
+  closure on every render.
+- Pages and thumbs are extracted `React.memo` components; the thumb takes a stable `onPress(id)`
+  callback rather than a closure per item.
+- **Every image goes through `core/media`'s `MediaImage`.** Pages and thumbs used to be RN `Image`s
+  sharing one URI, so a 56dp thumbnail decoded the full 12MP original — ~48MB of bitmap per photo
+  against a ~100–200MB per-process budget on a weak Android. `expo-image` downsamples to the target
+  box natively, off the JS thread, and caches `memory-disk`; `recyclingKey` blanks a recycled cell.
+  `MediaImage` falls back to RN `Image` + the matching `resizeMode` when the app never injected
+  `expo-image` (an optional peer), so the viewer renders either way.
+- **`thumbUri` is the real fix when the consumer has renditions** — the strip prefers it and falls
+  back to `uri`.
+- Screen size comes from `useWindowDimensions()`, not a module-scope `Dimensions.get("window")`:
+  the old value froze at import and never followed rotation, split-screen or a foldable unfold.
+
+## Props
+
+| Prop | Type | Default |
+|------|------|---------|
+| `visible` | `boolean` | — |
+| `onRequestClose` | `() => void` | — |
+| `items` | `readonly ImageViewerItem[]` | — |
+| `initialIndex` | `number` | `0` |
+| `onShare` | `(item: ImageViewerItem) => void` | — |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
+
+`ImageViewerItem`: `id`, `uri`, `label?`, and `thumbUri?` — a smaller rendition for the thumbnail
+strip. `testID` seeds `${testID}-body`, `${testID}-page-<id>` and `${testID}-thumb-<id>`.

package/lib/module/modules/image-viewer/index.js

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

package/lib/module/modules/input/Input.js

@@ -5,12 +5,17 @@
  * comes from `createThemedVariants`, and the focus indicator is the same offset-ring pattern as
  * Button: a `border.focus` ring drawn a small gap OUTSIDE the field, on the canvas, because that is
  * the role token proven ≥ 3:1 against the canvas (over the field's own border it isn't guaranteed).
+ *
+ * Motion comes from `core/motion` — the ring crossfades on focus/blur and the helper/error message
+ * fades in and out. Both honour reduce-motion through `useMotion()`.
  */
 
-import { memo, useState } from "react";
-import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { memo, useCallback, useEffect, useId, useMemo, useRef } from "react";
+import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { useAnnounce } from "../../core/a11y/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { INPUT_SIZES, inputStructure, resolveInputAccessibility, resolveInputStatus } from "./Input.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FOCUS_RING_WIDTH = 2;
@@ -31,20 +36,83 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     secureTextEntry,
     accessibilityLabel,
     containerStyle,
-    testID
+    testID,
+    autoComplete
   } = props;
   const theme = useTheme();
-  const [focused, setFocused] = useState(false);
+  const motion = useMotion();
   const spec = INPUT_SIZES[size];
   const statusColors = resolveInputStatus(theme.colors, status);
   const a11y = resolveInputAccessibility({
     label,
     accessibilityLabel,
-    disabled
+    disabled,
+    status,
+    helperText,
+    errorText
   });
 
-  // Error message takes priority over the helper text — the field shows one message at a time.
-  const message = status === "error" ? errorText : helperText;
+  // The field shows one message at a time — the resolver owns that rule (error wins over helper).
+  const message = a11y.message;
+  // Links the rendered helper line to the field on web, where `accessibilityHint` does not exist.
+  // Only ever the ADVISORY line: an error is already inside the accessible name.
+  const hintId = useId();
+  useAnnounce(status === "error" ? message : undefined);
+  const messageMotion = useEnterExit(message !== undefined);
+  // Holds the text on screen while the exit tween runs.
+  const lastMessage = useRef(message);
+  if (message !== undefined) lastMessage.current = message;
+  const ringOpacity = useAnimatedValue(0);
+  const ringAnimation = useRef(null);
+  const setRingVisible = useCallback(visible => {
+    ringAnimation.current?.stop();
+    const to = visible ? 1 : 0;
+    if (!motion.enabled) {
+      ringOpacity.setValue(to);
+      return;
+    }
+    ringAnimation.current = motion.timing(ringOpacity, to, {
+      duration: "fast"
+    });
+    ringAnimation.current.start();
+  }, [motion, ringOpacity]);
+  useEffect(() => () => ringAnimation.current?.stop(), []);
+  const handleFocus = useCallback(() => {
+    if (!disabled) setRingVisible(true);
+  }, [disabled, setRingVisible]);
+  const handleBlur = useCallback(() => setRingVisible(false), [setRingVisible]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    marginBottom: theme.space[1]
+  }], [theme]);
+  const fieldStyle = useMemo(() => [inputStructure(theme, {
+    size
+  }), {
+    borderColor: statusColors.border
+  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled]);
+  const focusRingStyle = useMemo(() => ({
+    position: "absolute",
+    top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    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
+  }), [theme]);
+  const inputTextStyle = useMemo(() => [{
+    flex: 1,
+    alignSelf: "stretch",
+    fontSize: spec.fontSize,
+    color: theme.colors.fg.default,
+    padding: 0
+  }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset], [theme, spec.fontSize]);
+  const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: statusColors.message,
+    marginTop: theme.space[1]
+  }], [theme, statusColors.message]);
   const glyph = name => /*#__PURE__*/_jsx(Icon, {
     name: name,
     size: spec.iconSize,
@@ -60,31 +128,16 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     _jsx(Text, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-        fontSize: theme.fontSizes.sm,
-        color: theme.colors.fg.default,
-        marginBottom: theme.space[1]
-      }],
+      style: labelStyle,
       children: label
     }), /*#__PURE__*/_jsxs(View, {
-      style: [inputStructure(theme, {
-        size
-      }), {
-        borderColor: statusColors.border
-      }, disabled && styles.dimmed],
-      children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+      style: fieldStyle,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "none",
         testID: "input-focus-ring",
-        style: {
-          position: "absolute",
-          top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          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
-        }
+        style: [focusRingStyle, {
+          opacity: ringOpacity
+        }]
       }), leadingIcon && glyph(leadingIcon), /*#__PURE__*/_jsx(TextInput, {
         testID: testID,
         value: value,
@@ -92,28 +145,31 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
         placeholder: placeholder,
         placeholderTextColor: theme.colors.fg.muted,
         secureTextEntry: secureTextEntry,
+        autoComplete: autoComplete,
+        importantForAutofill: autoComplete === "off" ? "no" : undefined,
         editable: a11y.editable,
         accessibilityLabel: a11y.accessibilityLabel,
-        accessibilityState: a11y.accessibilityState,
+        accessibilityHint: a11y.accessibilityHint,
+        "aria-describedby": a11y.accessibilityHint === undefined ? undefined : hintId,
+        "aria-invalid": a11y["aria-invalid"],
+        "aria-disabled": a11y["aria-disabled"],
         hitSlop: spec.hitSlop,
-        onFocus: () => setFocused(true),
-        onBlur: () => setFocused(false),
-        style: [{
-          flex: 1,
-          alignSelf: "stretch",
-          fontSize: spec.fontSize,
-          color: theme.colors.fg.default,
-          padding: 0
-        }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset]
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: inputTextStyle
       }), trailingIcon && glyph(trailingIcon)]
-    }), message !== undefined && /*#__PURE__*/_jsx(Text, {
-      accessibilityLiveRegion: status === "error" ? "polite" : undefined,
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.xs,
-        color: statusColors.message,
-        marginTop: theme.space[1]
-      }],
-      children: message
+    }), messageMotion.mounted && lastMessage.current !== undefined &&
+    /*#__PURE__*/
+    // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
+    // already announces on both platforms — keeping both would double-announce on Android.
+    // Hidden only once the message is gone: `lastMessage` outlives it for the exit tween, and a
+    // stale error must not sit in the a11y tree while it fades.
+    _jsx(Animated.Text, {
+      nativeID: hintId,
+      accessibilityElementsHidden: message === undefined,
+      importantForAccessibility: message === undefined ? "no-hide-descendants" : undefined,
+      style: [messageStyle, messageMotion.style],
+      children: lastMessage.current
     })]
   });
 });
@@ -126,7 +182,9 @@ const styles = StyleSheet.create({
   // outline on top of the themed ring above it — a visible double border. Web-only: `outlineWidth`
   // also drives native TV remote-control focus, so zeroing it globally would break that.
   webOutlineReset: {
-    outlineWidth: 0
+    outlineStyle: "solid",
+    outlineWidth: 0,
+    borderWidth: 0
   }
 });
 //# sourceMappingURL=Input.js.map

package/lib/module/modules/input/Input.variants.js

@@ -74,14 +74,28 @@ export function resolveInputStatus(colors, status) {
  * renderer. RN's `TextInput` has no `htmlFor`-equivalent link to a sibling label `Text`, so the
  * label's content must be copied onto `accessibilityLabel` directly (an explicit
  * `accessibilityLabel` always wins).
+ *
+ * The validity message rides the NAME, not the hint — the rule `resolveFormFieldAccessibility`
+ * already states and this resolver used to contradict: a hint is advisory and some readers suppress
+ * it, which a WCAG 3.3.1 message must never be. `helperText` is genuinely advisory, so it stays on
+ * the hint (native) and is linked by `aria-describedby` to the rendered message node (web, where
+ * `accessibilityHint` does not exist at all). The two never overlap: in the error state the message
+ * is in the name and `aria-invalid` is set, so nothing is announced twice.
+ *
+ * `message` is returned separately from `accessibilityHint` because the two diverged when the error
+ * moved into the name — the component still renders one visible line, error winning over helper.
  */
 export function resolveInputAccessibility(input) {
   const disabled = input.disabled === true;
+  const isError = (input.status ?? "default") === "error";
+  const errorInName = isError && input.errorText ? input.errorText : undefined;
+  const name = [input.accessibilityLabel ?? input.label, errorInName].filter(part => part !== undefined && part !== "");
   return {
-    accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      disabled
-    },
+    accessibilityLabel: name.length > 0 ? name.join(", ") : undefined,
+    accessibilityHint: errorInName === undefined ? input.helperText : undefined,
+    "aria-invalid": isError,
+    "aria-disabled": disabled,
+    message: errorInName ?? input.helperText,
     editable: !disabled
   };
 }

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,9 @@ 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.

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