pixelize-native-library 1.0.6

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

@@ -0,0 +1,80 @@
+# tabs/ — a single-select strip with a sliding active indicator
+
+`Tabs` renders ONLY the tab strip — content switching is the consumer's job. There is no
+`TabPanel` and it never renders children per tab, mirroring how real design systems split `Tabs`
+from panel content and keeping this component simple and composable.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Tabs.tsx` | The component. Strip + per-tab composition, press wiring, a11y wiring, the indicator's layout measurement + animation. |
+| `Tabs.variants.ts` | Pure resolvers (`TABS_SIZES`, `resolveTabsColors`, `resolveTabAccessibility`) + the themed structural resolvers (`tabsStripStructure`, `tabItemStructure`, `tabsIndicatorStructure`). No React, no lucide. |
+| `index.ts` | Public surface: `Tabs`, `TabsProps`, `TabItem`, `TabsSize`, `IconName` (re-exported from `core/icon`). |
+| `__tests__/Tabs.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/Tabs.render.test.tsx` | Render: strip/tab roles, selection state, press wiring, indicator animation respects reduced motion. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `{ label: string; value: string; icon?: IconName }[]` | — | Rendered in order. `label` is always required — there is no icon-only tab, so there is no a11y trap to type-enforce against here. |
+| `value` | `string` | — | The active item's `value`. |
+| `onValueChange` | `(value: string) => void` | — | Fires with the pressed tab's `value`. |
+| `size` | `sm \| md \| lg` | `md` | 36 / 44 / 52 dp visual height; `sm` reaches 44 via `hitSlop`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
+| `testID` | `string` | — | Container's testID; each tab gets `` `${testID}-${item.value}` ``, and the indicator gets `` `${testID}-indicator` ``, when set. |
+
+No per-item `disabled` and no `tone` — every active label + indicator is the same accent role,
+every inactive label is the same neutral `fg.muted`. Same reasoning as `RadioGroup`: a single-
+purpose control has no closed union of appearances to resolve.
+
+## Accessibility contract (WCAG)
+
+- **4.1.2** — `accessibilityRole="tablist"` on the container, `"tab"` per item with
+  `accessibilityState={ selected }`. Both are real, recognised RN `AccessibilityRole` values — no
+  fallback needed on this RN version (same precedent as `RadioGroup`'s `"radiogroup"`).
+- **2.5.x target size** — every size reaches ≥ 44 dp: `sm`'s 36 dp tab grows via `hitSlop`; `md`/
+  `lg` are already ≥ 44 dp.
+- **1.4.3** — the active label is `accent.text`, the inactive label is `fg.muted`, both measured
+  ≥ 4.5:1 against the canvas for every brand × mode. The pressed-tab background (`pressedTab`) is
+  `bg.raised`, not `bg.hover`: `activeLabel` stays on-screen while a selected tab is pressed, and
+  `bg.hover` drops that pairing below 4.5:1 on 8 of 16 brand/mode combos (measured); `bg.sunken`
+  (the fix used for this in `Button`/`RadioGroup`) still isn't enough here — it measures 4.40:1 on
+  slate light — so `bg.raised` is used instead, measured ≥ 4.5:1 (4.63:1 worst case) on every
+  brand × mode.
+- **1.4.11** — the indicator bar (`accent.solid`) is a non-text UI marker, measured ≥ 3:1 against
+  the canvas for every brand × mode.
+- **2.3.3** — the indicator's movement is two `Animated.Value`s (`x`, `width`) driven off each
+  tab's own `onLayout` measurement. Under reduced motion they're set with `setValue` (an instant
+  snap) instead of `Animated.timing` (which would still tween through intermediate frames even at
+  `duration: 0` for a position **and** size change together) — verified in the render tests by
+  spying on `Animated.timing` and asserting it isn't called when reduced motion is on.
+
+## Patterns (copied from Button / RadioGroup)
+
+1. **Structure vs colour split.** Strip gap, tab height/padding/gap, and the indicator's
+   thickness/radius are `createThemedVariants` (registered once per `(theme, size)`); colour is
+   resolved by `resolveTabsColors` from role tokens and applied inline over the structural style.
+2. **Pure, testable resolvers** in `Tabs.variants.ts` (no React) so the WCAG + behaviour contract
+   is unit-tested against the real palettes — never eyeballed.
+3. **No `{...rest}`, `style` once on the outermost node.** `icon` is a NAME (`IconName`), never a
+   `ReactNode`.
+4. **Layout keyed by `value`, not index** — each tab's measured `{x, width}` is stored in state
+   keyed by its `value`, so reordering `items` (or a label-driven width change) can never apply a
+   stale measurement to the wrong tab.
+
+## Known gaps
+
+- The indicator starts at `x: 0, width: 0` until the active tab's first `onLayout` fires (native
+  layout is asynchronous), so there's a single frame before its true position is known. No visible
+  flash in practice — RN fires `onLayout` before the first paint completes — but it's worth noting
+  since it isn't unit-tested (RNTL's test renderer never calls `onLayout` on its own; the render
+  tests fire it manually to simulate a measured tab).
+- No horizontal scrolling for an `items` list too wide for the viewport (e.g. wrapped in a
+  `ScrollView` by the consumer) — v1 assumes the strip fits, same scope decision `RadioGroup` made
+  for its own vertical list.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `items.map()` renders host `Pressable`/`Text`, and the one library child, `Icon`, only receives primitive props — nothing to memoize. The pre-existing `handleTabLayout` was already correctly `useCallback`'d.

package/lib/module/modules/tabs/Tabs.js

@@ -0,0 +1,127 @@
+"use strict";
+
+/**
+ * Tabs — renders ONLY the tab strip. Content switching is the consumer's job: this mirrors how
+ * real design systems split the strip from panel content, and keeps the component simple and
+ * composable (no `TabPanel`, no rendering children per tab).
+ *
+ * The active-tab indicator is two `Animated.Value`s (`x`, `width`) driven off each tab's own
+ * `onLayout` measurement, keyed by `value` so reordering `items` doesn't scramble which
+ * measurement belongs to which tab. Reduced motion (WCAG 2.3.3) snaps both values with `setValue`
+ * instead of animating — same `duration: reducedMotion ? 0 : …` idiom `Button`'s press fade and
+ * `Toast`'s slide use, just applied to `setValue` vs `Animated.timing` instead of a duration of 0
+ * (a 0-width/0-position change would still tween through intermediate frames otherwise).
+ */
+
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Pressable, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsIndicatorStructure, tabsStripStructure, TABS_SIZES } from "./Tabs.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const INDICATOR_MOVE_MS = 200;
+export const Tabs = /*#__PURE__*/memo(function Tabs({
+  items,
+  value,
+  onValueChange,
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const colors = resolveTabsColors(theme.colors);
+  const spec = TABS_SIZES[size];
+  const [layouts, setLayouts] = useState({});
+  const indicatorX = useRef(new Animated.Value(0)).current;
+  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const activeLayout = layouts[value];
+  const handleTabLayout = useCallback((itemValue, event) => {
+    const {
+      x,
+      width
+    } = event.nativeEvent.layout;
+    setLayouts(prev => {
+      const existing = prev[itemValue];
+      if (existing !== undefined && existing.x === x && existing.width === width) return prev;
+      return {
+        ...prev,
+        [itemValue]: {
+          x,
+          width
+        }
+      };
+    });
+  }, []);
+  useEffect(() => {
+    if (activeLayout === undefined) return;
+    if (reducedMotion) {
+      indicatorX.setValue(activeLayout.x);
+      indicatorWidth.setValue(activeLayout.width);
+      return;
+    }
+    Animated.parallel([Animated.timing(indicatorX, {
+      toValue: activeLayout.x,
+      duration: INDICATOR_MOVE_MS,
+      useNativeDriver: false
+    }), Animated.timing(indicatorWidth, {
+      toValue: activeLayout.width,
+      duration: INDICATOR_MOVE_MS,
+      useNativeDriver: false
+    })]).start();
+  }, [activeLayout, reducedMotion, indicatorX, indicatorWidth]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessibilityRole: "tablist",
+    style: [tabsStripStructure(theme), style],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-indicator` : undefined,
+      style: [tabsIndicatorStructure(theme), {
+        backgroundColor: colors.indicator,
+        transform: [{
+          translateX: indicatorX
+        }],
+        width: indicatorWidth
+      }]
+    }), items.map(item => {
+      const selected = item.value === value;
+      const a11y = resolveTabAccessibility({
+        selected
+      });
+      const labelColor = selected ? colors.activeLabel : colors.inactiveLabel;
+      return /*#__PURE__*/_jsxs(Pressable, {
+        testID: testID ? `${testID}-${item.value}` : undefined,
+        accessibilityRole: a11y.accessibilityRole,
+        accessibilityState: a11y.accessibilityState,
+        accessibilityLabel: item.label,
+        onPress: () => onValueChange(item.value),
+        onLayout: event => handleTabLayout(item.value, event),
+        hitSlop: spec.hitSlop,
+        style: ({
+          pressed
+        }) => [tabItemStructure(theme, {
+          size
+        }), pressed && {
+          backgroundColor: colors.pressedTab
+        }],
+        children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+          name: item.icon,
+          size: spec.iconSize,
+          color: labelColor,
+          strokeWidth: ICON_STROKE
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+            fontSize: spec.fontSize,
+            color: labelColor
+          }],
+          children: item.label
+        })]
+      }, item.value);
+    })]
+  });
+});
+//# sourceMappingURL=Tabs.js.map

package/lib/module/modules/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useCallback","useEffect","useRef","useState","Animated","Pressable","Text","View","useReducedMotion","Icon","useTheme","resolveTabAccessibility","resolveTabsColors","tabItemStructure","tabsIndicatorStructure","tabsStripStructure","TABS_SIZES","jsx","_jsx","jsxs","_jsxs","ICON_STROKE","INDICATOR_MOVE_MS","Tabs","items","value","onValueChange","size","style","testID","theme","reducedMotion","colors","spec","layouts","setLayouts","indicatorX","Value","current","indicatorWidth","activeLayout","handleTabLayout","itemValue","event","x","width","nativeEvent","layout","prev","existing","undefined","setValue","parallel","timing","toValue","duration","useNativeDriver","start","accessibilityRole","children","pointerEvents","backgroundColor","indicator","transform","translateX","map","item","selected","a11y","labelColor","activeLabel","inactiveLabel","accessibilityState","accessibilityLabel","label","onPress","onLayout","hitSlop","pressed","pressedTab","icon","name","iconSize","color","strokeWidth","numberOfLines","fontStyleForWeight","fontWeights","medium","fontSize"],"sourceRoot":"../../../../src","sources":["modules/tabs/Tabs.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/tabs/Tabs.variants.js

@@ -0,0 +1,135 @@
+"use strict";
+
+/**
+ * Tabs' style + behaviour resolution — pure, React/lucide-free, same split as Button:
+ *  - STRUCTURE (strip gap, item height/padding/gap, indicator thickness/radius) lives in the
+ *    `createThemedVariants` resolvers below, registered once per (theme, size) — never rebuilt
+ *    per render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveTabsColors`), never a raw hex: the
+ *    active label + indicator are always the accent role, the inactive label is always `fg.muted`.
+ *  - `resolveTabAccessibility` derives the per-tab a11y surface purely, so the "selected" contract
+ *    is unit-testable without rendering React Native.
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/** Same floor as Button/RadioGroup — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
+ * stay isolated. */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+/**
+ * Tabs-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target test
+ * can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export const TABS_SIZES = {
+  sm: {
+    height: 36,
+    fontSize: 14,
+    iconSize: 16,
+    hitSlop: slopFor(36)
+  },
+  md: {
+    height: 44,
+    fontSize: 16,
+    iconSize: 18,
+    hitSlop: slopFor(44)
+  },
+  lg: {
+    height: 52,
+    fontSize: 18,
+    iconSize: 20,
+    hitSlop: slopFor(52)
+  }
+};
+/**
+ * Maps the strip's fixed visual roles onto ROLE colours — never a hardcoded hex, so it's
+ * guaranteed legible in both modes and can never be an off-palette value an app invented. There is
+ * no per-tab `tone`: every active label + indicator is the accent role, every inactive label is
+ * the same neutral `fg.muted`, so — like `RadioGroup` — this is pure indirection, not a union to
+ * resolve.
+ */
+export function resolveTabsColors(colors) {
+  return {
+    activeLabel: colors.accent.text,
+    inactiveLabel: colors.fg.muted,
+    indicator: colors.accent.solid,
+    // NOT `bg.hover`: measured, its saturated mid-tone drops `activeLabel` (the active tab stays
+    // accent-tinted while pressed) below 4.5:1 on 8 of 16 brand/mode combos — same class of bug
+    // Button's "neutral" tone documents fixing. `bg.sunken` (the fix used there) still isn't enough
+    // here: it measures 4.40:1 on slate light, just under AA_TEXT. `bg.raised` clears 4.5:1 on every
+    // brand × mode (4.63:1 worst case, slate light) — see the WCAG test in Tabs.test.ts.
+    pressedTab: colors.bg.raised
+  };
+}
+/**
+ * Derives one tab's accessibility surface purely, mirroring `resolveRadioRowAccessibility`: every
+ * item always carries a visible `label`, so — unlike `Button` — there is no icon-only shape here
+ * and nothing to gate a press on.
+ */
+export function resolveTabAccessibility(input) {
+  return {
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: input.selected
+    }
+  };
+}
+
+/** The strip container — a row with a small gap between tabs. */
+export const tabsStripStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    position: "relative",
+    columnGap: theme.space[1]
+  }
+}));
+
+/**
+ * One tab's layout — height, inset padding, and the gap to its optional icon. Colour (label tint,
+ * pressed fill) is resolved and applied inline over this.
+ */
+export const tabItemStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.base
+  },
+  variants: {
+    size: {
+      sm: {
+        height: TABS_SIZES.sm.height,
+        columnGap: theme.space[1],
+        paddingHorizontal: theme.space[3]
+      },
+      md: {
+        height: TABS_SIZES.md.height,
+        columnGap: theme.space[2],
+        paddingHorizontal: theme.space[4]
+      },
+      lg: {
+        height: TABS_SIZES.lg.height,
+        columnGap: theme.space[2],
+        paddingHorizontal: theme.space[5]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+
+/**
+ * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp); the pill radius is
+ * `radii.full`. Position (`left`/`width`, via `transform`/`width`) is driven by `Animated.Value`s
+ * in `Tabs.tsx`, not by this static resolver.
+ */
+export const tabsIndicatorStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    height: theme.borderWidths.thick,
+    borderRadius: theme.radii.full
+  }
+}));
+//# sourceMappingURL=Tabs.variants.js.map

package/lib/module/modules/tabs/Tabs.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","slopFor","height","Math","max","ceil","TABS_SIZES","sm","fontSize","iconSize","hitSlop","md","lg","resolveTabsColors","colors","activeLabel","accent","text","inactiveLabel","fg","muted","indicator","solid","pressedTab","bg","raised","resolveTabAccessibility","input","accessibilityRole","accessibilityState","selected","tabsStripStructure","theme","base","flexDirection","position","columnGap","space","tabItemStructure","alignItems","justifyContent","borderRadius","radii","variants","size","paddingHorizontal","defaultVariants","tabsIndicatorStructure","left","bottom","borderWidths","thick","full"],"sourceRoot":"../../../../src","sources":["modules/tabs/Tabs.variants.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/tabs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/tabs`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveTabsColors`, `TABS_SIZES`, …)
+ * stay internal — a consumer configures Tabs through its props, never by importing its internals.
+ */
+
+export { Tabs } from "./Tabs.js";
+
+// Re-exported so a caller can type an item's `icon` without a separate import from `core/icon`.
+//# sourceMappingURL=index.js.map

package/lib/module/modules/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tabs"],"sourceRoot":"../../../../src","sources":["modules/tabs/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,WAAQ;;AAK7B","ignoreList":[]}

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

@@ -0,0 +1,91 @@
+# textarea/ — multiline text entry
+
+`Textarea` is `Input`'s multiline sibling (Input is built in parallel; this module has no dependency
+on it). Same closed-prop shape as every other module: `size` / `status` are closed unions, colour is
+resolved from `RoleColors`, and `containerStyle` is the one documented `LayoutStyle` exception for a
+component wrapping a native `TextInput` (CLAUDE.md).
+
+## Files
+
+| File | Role |
+|------|------|
+| `Textarea.tsx` | The component. Label / field / helper-or-error composition, a11y wiring, focus ring, disabled. |
+| `Textarea.variants.ts` | Pure resolvers (`TEXTAREA_SIZES`, `resolveTextareaStatus`, `resolveTextareaAccessibility`) + the themed structural resolvers `textareaFieldStructure` / `textareaLayout`. No React. |
+| `index.ts` | Public surface: `Textarea`, `TextareaProps`, `TextareaSize`, `TextareaStatus`. |
+| `__tests__/Textarea.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/Textarea.render.test.tsx` | Render: value/placeholder, `onChangeText` wiring, disabled blocking, status, helper/error message, focus ring. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value` | `string` | — | Controlled — no internal copy of the text. |
+| `onChangeText` | `(text: string) => void` | — | |
+| `placeholder` | `string` | — | Rendered in `fg.muted` (not the dimmer `fg.subtle` — see WCAG below). |
+| `size` | `sm \| md \| lg` | `md` | Fixed internal `minHeight` (72 / 96 / 128dp) — not a numeric prop. |
+| `status` | `default \| error` | `default` | Closed union — drives the field boundary + message colour. |
+| `disabled` | `boolean` | `false` | `editable={false}` + dimmed; blocks `changeText`. |
+| `label` | `string` | — | Rendered above the field; also the field's `accessibilityLabel`. |
+| `helperText` | `string` | — | Shown when `status` is `default`, or as the `error` fallback (see below). |
+| `errorText` | `string` | — | Shown instead of `helperText` when `status` is `error` and it's provided. |
+| `maxLength` | `number` | — | Passed straight to `TextInput`. |
+| `containerStyle` | `LayoutStyle` | — | The documented exception — outer box, applied exactly once, last. |
+| `testID` | `string` | — | Set on the `TextInput`. |
+
+No `icon` prop: multiline fields don't carry a leading/trailing icon in this catalogue (per spec).
+
+## Accessibility contract (WCAG)
+
+- **2.5.x target size** — every `size`'s `minHeight` (72/96/128dp) already clears 44dp on its own; a
+  multiline field IS its own touch target, so no `hitSlop` is needed (unlike Button's compact sizes).
+- **1.4.3** — value text and label share `fg.default` (≥ 4.5:1 on the canvas, every brand/mode).
+  Placeholder deliberately uses `fg.muted`, not `fg.subtle` — `fg.subtle` measures as low as ~3.2:1
+  against the canvas on some brands, which fails AA for real, visible placeholder text.
+- **1.4.11** — the field boundary is `border.interactive` (`default`) or `status.danger.solid`
+  (`error`), both measured ≥ 3:1 against the canvas on every brand/mode. **Not** `status.danger.border`
+  (the pale `ramp[200]` chip outline) — measured as low as ~1.7:1, nowhere near 3:1. This mirrors why
+  Button's outline never tints by tone either.
+- **2.4.7 / 2.4.11** — a visible focus ring (`border.focus`) appears on focus, offset a small gap
+  OUTSIDE the field on the canvas — identical construction to Button's, and for the same reason: drawn
+  over the field's own (status-dependent) boundary colour, its ≥ 3:1 isn't guaranteed for every status.
+- **Web** — RNW renders `TextInput` as a real `<textarea>`, 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. Native is untouched, since
+  `outlineWidth` also drives TV remote-control focus there.
+- **No motion in this component.** The focus ring is a plain conditional render, exactly like Button's
+  own ring (which is also not animated) — `useReducedMotion` gates only real animation (Button's press
+  fade), and there is none here, so WCAG 2.3.3 is not applicable.
+- No `accessibilityRole` override: RN's `TextInput` already exposes the native text-field
+  role/behaviour on both platforms, and RN's `AccessibilityRole` union has no closer ARIA-style
+  `textbox` value to assign.
+- `accessibilityState={{ disabled }}` tracks the same flag `editable` uses.
+- The label `Text` and the helper/error `Text` are both hidden from assistive tech
+  (`accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"`) — their content
+  is carried by the `TextInput`'s own `accessibilityLabel` / `accessibilityHint` (RN's platform
+  equivalent of `aria-describedby`), so a screen-reader user gets ONE announcement at the field, not a
+  separate stop for the label/message plus a repeat on focus.
+
+## Why `status` is a union, not a `color`
+
+Same reasoning as Button's `tone`: every colour a field boundary or message can show is a role lookup
+(`resolveTextareaStatus`), guaranteed legible in both modes on every brand, never an app-supplied hex.
+
+## Patterns the other modules can copy
+
+1. **The visible helper/error `Text` and the `accessibilityHint` are the SAME computed string**
+   (`resolveTextareaAccessibility().accessibilityHint`) — never two separate strings that could drift.
+2. **When `status` is `error`, the message slot always renders in the danger colour** — `errorText` if
+   given, else `helperText` as a fallback — because the field itself is invalid; a bare `helperText` in
+   error state still reads as "something's wrong", not as an unrelated hint styled inconsistently.
+3. **Structure vs colour split**, pure testable resolvers, closed unions, `containerStyle` (not
+   `style`) as the one documented `LayoutStyle` exception, no `{...rest}` — all copied from Button.
+
+## Known gaps
+
+- No `Input` module exists yet to diff this against (built in parallel) — the "same contract as
+  Input" note in the spec is honoured by prop-name convention (`value`/`onChangeText`/`status`/
+  `disabled`/`label`/`helperText`/`errorText`/`maxLength`/`containerStyle`), not by a shared import.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Renders only host elements (`View`/`Text`/`TextInput`) — nothing to memoize.

package/lib/module/modules/textarea/Textarea.js

@@ -0,0 +1,136 @@
+"use strict";
+
+/**
+ * Textarea — the multiline sibling of `Input` (Input itself is being built in parallel; this module
+ * does not depend on it). Same closed-prop shape the rest of the catalogue follows: `size` / `status`
+ * are closed unions, colour is resolved from `RoleColors`, and `containerStyle` is the one documented
+ * `LayoutStyle` exception for a component wrapping a native `TextInput` (CLAUDE.md).
+ */
+
+import { memo, useState } from "react";
+import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+import { resolveTextareaAccessibility, resolveTextareaStatus, textareaFieldStructure, textareaLayout, TEXTAREA_SIZES } from "./Textarea.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Matches Button's own focus ring exactly: a small gap OUTSIDE the field, on the canvas, because
+// `border.focus` is the role token proven ≥ 3:1 against the canvas (drawn over the field's own
+// boundary colour its ≥ 3:1 isn't guaranteed for every `status`).
+const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_GAP = 2;
+export const Textarea = /*#__PURE__*/memo(function Textarea(props) {
+  const {
+    value,
+    onChangeText,
+    placeholder,
+    size = "md",
+    status = "default",
+    disabled = false,
+    label,
+    helperText,
+    errorText,
+    maxLength,
+    containerStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const spec = TEXTAREA_SIZES[size];
+  const statusColors = resolveTextareaStatus(theme.colors, status);
+  const a11y = resolveTextareaAccessibility({
+    label,
+    helperText,
+    errorText,
+    status,
+    disabled
+  });
+  const message = a11y.accessibilityHint;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [textareaLayout(theme), containerStyle],
+    children: [label !== undefined &&
+    /*#__PURE__*/
+    // Hidden from AT: its text is carried by the TextInput's own `accessibilityLabel` below, so a
+    // screen-reader user gets ONE announcement at the field, not a separate stop for this Text
+    // plus a repeat when focus lands on the input — the same "no double announcement" idiom
+    // Button uses for its spinner.
+    _jsx(Text, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+        fontSize: theme.fontSizes.sm,
+        color: theme.colors.fg.default
+      }],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [textareaFieldStructure(theme, {
+        size
+      }), {
+        borderColor: statusColors.border
+      }, disabled && styles.dimmed],
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        testID: testID,
+        value: value,
+        onChangeText: onChangeText,
+        placeholder: placeholder,
+        placeholderTextColor: theme.colors.fg.muted,
+        editable: !disabled,
+        multiline: true,
+        maxLength: maxLength,
+        textAlignVertical: "top",
+        accessibilityLabel: a11y.accessibilityLabel,
+        accessibilityHint: a11y.accessibilityHint,
+        accessibilityState: a11y.accessibilityState,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+          fontSize: spec.fontSize,
+          color: theme.colors.fg.default,
+          minHeight: spec.minHeight
+        }, styles.input, Platform.OS === "web" && styles.webOutlineReset]
+      }), focused && /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: "textarea-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
+        }
+      })]
+    }), message !== undefined &&
+    /*#__PURE__*/
+    // Hidden from AT for the same reason as the label — its content is already the TextInput's
+    // `accessibilityHint` (RN has no `aria-describedby`; `accessibilityHint` is the platform
+    // equivalent), so this Text is the sighted-user copy of the same one string.
+    _jsx(Text, {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: statusColors.message
+      }],
+      children: message
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  // Zeroes the TextInput's own default padding — the field box (`textareaFieldStructure`) owns
+  // padding, so the two never disagree on where the text sits.
+  input: {
+    padding: 0
+  },
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
+  dimmed: {
+    opacity: 0.5
+  },
+  // RNW renders `TextInput` as a real `<textarea>`, which paints the browser's own default focus
+  // 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
+  }
+});
+//# sourceMappingURL=Textarea.js.map

package/lib/module/modules/textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useState","Platform","StyleSheet","Text","TextInput","View","useTheme","resolveTextareaAccessibility","resolveTextareaStatus","textareaFieldStructure","textareaLayout","TEXTAREA_SIZES","jsx","_jsx","jsxs","_jsxs","FOCUS_RING_WIDTH","FOCUS_RING_GAP","Textarea","props","value","onChangeText","placeholder","size","status","disabled","label","helperText","errorText","maxLength","containerStyle","testID","theme","focused","setFocused","spec","statusColors","colors","a11y","message","accessibilityHint","style","children","undefined","accessibilityElementsHidden","importantForAccessibility","fontStyleForWeight","fontWeights","medium","fontSize","fontSizes","sm","color","fg","default","borderColor","border","styles","dimmed","placeholderTextColor","muted","editable","multiline","textAlignVertical","accessibilityLabel","accessibilityState","onFocus","onBlur","regular","minHeight","input","OS","webOutlineReset","pointerEvents","position","top","left","right","bottom","borderWidth","focus","borderRadius","radii","base","xs","create","padding","opacity","outlineWidth"],"sourceRoot":"../../../../src","sources":["modules/textarea/Textarea.tsx"],"mappings":"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","ignoreList":[]}