pixelize-native-library 1.0.6

package/lib/module/modules/filter-sheet/MODULE.md

@@ -0,0 +1,115 @@
+# filter-sheet/ — a staged, grouped filter panel for a board/list's filter dimensions
+
+`FilterSheet` wraps this library's OWN `Drawer` (`../drawer`) as the sheet shell for a fully
+app-supplied set of filter DIMENSIONS — consumed exactly as `BottomNav` consumes `Drawer` for its
+own overflow sheet, through `Drawer`'s public props, never its internal `Drawer.variants.ts`.
+
+**Deliberately narrow scope — a product decision, not an omission**, mirroring tickets-web's own
+FilterBar but leaving out its rich/admin-only surface: no date-range filtering (`kind` is closed to
+`"single" | "multi"`), no advanced field/operator/value query builder, no per-board admin
+default-filter editor, no saved views, and no search input (a consumer places its own `Input`
+elsewhere — search stays outside the grouped panel, the same stance tickets-web already takes).
+
+## Files
+
+| File | Role |
+|------|------|
+| `FilterSheet.tsx` | The component. Owns `visible`/staged-edit state, wraps `Drawer`, wires Apply/Reset/quick-toggle/dimension-change. Data types (`FilterDimension`, `FilterOption`, `FilterValues`) live here, same precedent as `BottomNav`'s own data types. |
+| `FilterSheetBody.tsx` | PRIVATE (not exported) — the sheet's content: title header, per-dimension quick-chip rows, a single-open `Accordion` of facet controls, the Apply/Reset footer. Also hosts the private `DimensionControl` and `QuickChip` sub-components. |
+| `FilterChip.tsx` | Public. A small removable/locked chip for showing one currently-applied filter fact — see "FilterChip vs the quick chip" below. |
+| `FilterSheet.variants.ts` | Pure resolvers (`resolveFilterChipColors`, `resolveFilterChipAccessibility`, `resolveQuickChipColors`, `resolveFilterSheetBodyHeight`) + themed structural resolvers. No React, no lucide. |
+| `filterSheet.helpers.ts` | Pure, framework-free: `countActiveFilters`, `normalizeFilterValues`, `resolveResetValues`, `applyQuickToggle`, `isOptionSelected`. No React, no `react-native` import at all. |
+| `index.ts` | Public surface: `FilterSheet`, `FilterSheetProps`, `FilterChip`, `FilterChipProps`, `FilterDimension`, `FilterDimensionKind`, `FilterOption`, `FilterValues`, `countActiveFilters`. |
+| `__tests__/FilterSheet.test.ts` | Pure: WCAG contrast (chip + quick-chip, all brands × modes), touch target, `resolveFilterChipAccessibility`, `resolveFilterSheetBodyHeight`. |
+| `__tests__/filterSheet.helpers.test.ts` | Pure: active-filter counting, value normalisation, reset, quick-toggle, option-selected — both `kind`s. |
+| `__tests__/FilterSheet.render.test.tsx` | Render: open/close, Apply commits + closes, backdrop/back dismiss discards, Reset clears without closing/applying, quick-toggle is immediate, single-open accordion, dimension control wiring. |
+| `__tests__/FilterChip.render.test.tsx` | Render: removable vs locked shape + accessibility props. |
+
+## Props
+
+### `FilterSheetProps`
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `visible` / `onRequestClose` | `boolean` / `() => void` | — | Required. Controlled, same pair `Drawer` itself takes. |
+| `dimensions` | `FilterDimension[]` | — | Required. Fully consumer-supplied — zero hardcoded domain vocabulary. |
+| `values` | `FilterValues` | — | Required. The currently APPLIED values, not the sheet's in-progress edits. |
+| `onApply` | `(values: FilterValues) => void` | — | Required. The sheet's one commit point. |
+| `onReset` | `() => void` | — | Omit → no Reset button renders at all. |
+| `title` / `applyLabel` / `resetLabel` | `string` | `"Filters"` / `"Apply"` / `"Reset"` | |
+| `testID` | `string` | — | Seeds `-panel`/`-backdrop`/`-handle` (Drawer's own), `-quick-${key}-${value}`, `-accordion-${key}`, `-control-${key}`, `-reset`, `-apply`. |
+
+`FilterDimension`: `key`, `label`, `kind: "single" | "multi"`, `options: FilterOption[]`.
+`FilterOption`: `label`, `value`, `quick?: boolean`. `FilterValues = Record<string, string | string[]>`.
+
+### `FilterChipProps`
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `label` | `string` | Required. |
+| `onRemove` | `() => void` | Omit → non-removable/"locked" chip: plain `View`, no press, no "x". |
+| `style` | `LayoutStyle` | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | |
+
+No `tone`/`size` — a single fixed shape, since a chip states a filter FACT, not a severity level.
+
+## Interaction model (decided, not assumed — see filter-sheet's own build brief)
+
+1. `FilterSheet` wraps `Drawer` internally (`<Drawer visible={visible} onRequestClose={...}>`) — the
+   consumer never touches `Drawer` directly for this use case.
+2. Internal STAGED state seeds from `values` on every closed→open transition (a `useEffect` gated on
+   the previous `visible`, not on every render) — edits inside the sheet are local until Apply.
+3. Any dismissal that isn't Apply — backdrop tap, Android back, VoiceOver escape — DISCARDS the
+   staged edits: `onRequestClose` fires, `onApply` never does.
+4. Apply calls `onApply(staged)`, then `onRequestClose()` — the sheet closes itself on commit, the
+   same "close on selection commit" precedent `MultiSelect`'s own row toggle does NOT need (it has
+   no Apply step) but `Select`'s single-choice commit does.
+5. Reset (rendered only when `onReset` is supplied) clears every dimension's staged value —
+   `multi → []`, `single` → cleared — WITHOUT closing the sheet and WITHOUT calling `onApply`, then
+   invokes the consumer's own `onReset`.
+6. Each dimension renders as one `Accordion` section (`type="single"` — one open at a time): title =
+   `dimension.label`, content = `MultiSelect` (`kind: "multi"`) or `RadioGroup` (`kind: "single"`),
+   pre-wired to the staged value for `dimension.key`.
+7. A `quick: true` option renders as a one-tap pill ABOVE the whole Accordion (grouped per
+   dimension, in dimension order) — tapping it toggles that value into staged IMMEDIATELY, not
+   staged-then-Apply for the tap itself (the "staged" concept is the sheet's overall commit point,
+   not each individual tap).
+8. No search input anywhere in this module.
+
+### FilterChip vs the quick chip — two different chips, on purpose
+
+The public `FilterChip` (frozen shape: `label`/`onRemove`) is for a consumer showing currently
+APPLIED filters elsewhere in its own UI (e.g. "Status: Open ✕" above a list) — it has no notion of
+"selected" and no bare press-to-select. The quick-option pill inside `FilterSheetBody` needs both a
+press-to-toggle AND a selected visual state, neither of which `FilterChip`'s contract supports — so
+it is a small, PRIVATE, unexported component (`QuickChip`), not a repurposed `FilterChip`.
+
+## Controlled vs internal state
+
+| State | Owner | Mechanism |
+|---|---|---|
+| Sheet open | **App** | `visible`/`onRequestClose` — same pair `Drawer` itself takes. |
+| Applied filter values | **App** | `values` in; `onApply(values)` out. |
+| Dimensions/options data | **App** | `dimensions` — zero hardcoded vocabulary. |
+| In-progress (staged) edits | **Library** | internal `useState`, re-seeded from `values` on every closed→open transition; discarded on any non-Apply dismissal. |
+| Which Accordion section is open | **Library** | `Accordion`'s own uncontrolled state (this module never controls it). |
+
+## API stability contract
+
+**Frozen:** `FilterSheetProps.visible/onRequestClose/dimensions/values/onApply`,
+`FilterDimension.key/label/kind/options`, `FilterOption.label/value`, `FilterChipProps.label`.
+`FilterDimensionKind` is closed to `"single" | "multi"` today; it **may gain new members** (e.g. a
+future `"range"`) in a MINOR release if a real product need arises, but `"single"`/`"multi"` can
+never be renamed or removed — existing consumers' exhaustive `switch`es would only need a new case,
+never a migration.
+
+**Extension points (optional, additive):** `onReset`, `title`, `applyLabel`, `resetLabel`, `testID`,
+`FilterOption.quick`, `FilterChipProps.onRemove/style/testID`.
+
+## Known gaps
+
+- No control over which Accordion section starts open on a fresh sheet open — left to `Accordion`'s
+  own uncontrolled default (all collapsed). Not requested by this module's spec.
+- `MultiSelect`'s own option sheet opens as a NESTED native `Modal` while `FilterSheet`'s `Drawer` is
+  already showing — this is the library's existing, tested `MultiSelect` composed as-is (per
+  CLAUDE.md's component decision order), not a new modal-stacking mechanism built for this module.

package/lib/module/modules/filter-sheet/filterSheet.helpers.js

@@ -0,0 +1,90 @@
+"use strict";
+
+/**
+ * FilterSheet's pure, framework-free logic — no React, no `react-native` import at all. Types are
+ * imported `import type` only (erased by `verbatimModuleSyntax`), so this file pulls in no runtime
+ * dependency on `FilterSheet.tsx`, React, or React Native — it stays testable under plain jest with
+ * zero mocking, the same "orthogonal concern gets its own file" call `BottomNav.search.ts` makes.
+ *
+ * `values`/`staged` are always the CONSUMER's shape (`Record<string, string | string[]>`); every
+ * helper here normalises defensively rather than trusting a caller passed exactly what a
+ * dimension's `kind` expects (e.g. a stale `string` left over for a dimension that became
+ * `kind: "multi"` in a later release of the consumer's own dimension config).
+ */
+
+function isDimensionActive(dimension, values) {
+  const value = values[dimension.key];
+  return dimension.kind === "multi" ? Array.isArray(value) && value.length > 0 : typeof value === "string" && value.length > 0;
+}
+
+/**
+ * How many DIMENSIONS currently have a selection — not the total number of selected options. A
+ * `multi` dimension with 3 selected values still counts as ONE active filter, matching the
+ * "N filters applied" badge this exists to power (see MODULE.md's interaction model). Exported from
+ * `index.ts` as the module's one pure, UI-free public helper — every consumer needs this arithmetic
+ * and would otherwise reimplement it slightly differently each time.
+ */
+export function countActiveFilters(dimensions, values) {
+  return dimensions.reduce((count, dimension) => isDimensionActive(dimension, values) ? count + 1 : count, 0);
+}
+
+/**
+ * Normalises a consumer's `values` into the shape every dimension's `kind` actually expects —
+ * defensive, not a plain copy: a `multi` dimension always gets a real array (never a stray leftover
+ * string), and a `single` dimension with no/empty value is OMITTED entirely rather than carrying an
+ * empty string, so `values[key]` reads `undefined` exactly like a freshly-reset one. Used both to
+ * seed the sheet's staged state on open and to build the Reset target below.
+ */
+export function normalizeFilterValues(dimensions, values) {
+  const next = {};
+  for (const dimension of dimensions) {
+    const value = values[dimension.key];
+    if (dimension.kind === "multi") {
+      next[dimension.key] = Array.isArray(value) ? value : [];
+    } else if (typeof value === "string" && value.length > 0) {
+      next[dimension.key] = value;
+    }
+  }
+  return next;
+}
+
+/** Every dimension cleared: `multi` → `[]`, `single` → omitted (see `normalizeFilterValues` above).
+ *  Reset only ever replaces the SHEET's own staged state — it never calls `onApply` (see MODULE.md
+ *  interaction model, point 5). */
+export function resolveResetValues(dimensions) {
+  return normalizeFilterValues(dimensions, {});
+}
+
+/**
+ * Applies ONE quick-option tap to a dimension's staged value, immediately (not gated behind Apply —
+ * see MODULE.md interaction model, point 7). `multi` toggles the value in/out of the array, exactly
+ * like `MultiSelect`'s own row toggle; `single` toggles the WHOLE dimension between that value and
+ * cleared — a second tap on the same quick option un-selects it, since a quick option is the only
+ * way to clear a `single` dimension short of the sheet's own Reset button.
+ */
+export function applyQuickToggle(values, dimension, optionValue) {
+  const next = {
+    ...values
+  };
+  if (dimension.kind === "multi") {
+    const current = Array.isArray(next[dimension.key]) ? next[dimension.key] : [];
+    next[dimension.key] = current.includes(optionValue) ? current.filter(v => v !== optionValue) : [...current, optionValue];
+    return next;
+  }
+  const current = typeof next[dimension.key] === "string" ? next[dimension.key] : "";
+  if (current === optionValue) {
+    delete next[dimension.key];
+  } else {
+    next[dimension.key] = optionValue;
+  }
+  return next;
+}
+
+/** Whether ONE option is currently selected within a dimension's (usually staged) values — shared
+ *  by the quick-chip row, which needs this to render its own selected look independent of whichever
+ *  Accordion section happens to be expanded. */
+export function isOptionSelected(dimension, values, optionValue) {
+  const value = values[dimension.key];
+  return dimension.kind === "multi" ? Array.isArray(value) && value.includes(optionValue) : value === optionValue;
+}
+//# sourceMappingURL=filterSheet.helpers.js.map

package/lib/module/modules/filter-sheet/filterSheet.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isDimensionActive","dimension","values","value","key","kind","Array","isArray","length","countActiveFilters","dimensions","reduce","count","normalizeFilterValues","next","resolveResetValues","applyQuickToggle","optionValue","current","includes","filter","v","isOptionSelected"],"sourceRoot":"../../../../src","sources":["modules/filter-sheet/filterSheet.helpers.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/filter-sheet/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/filter-sheet`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. `FilterSheetBody`, every resolver in `FilterSheet.variants.ts`, and
+ * every helper in `filterSheet.helpers.ts` OTHER than `countActiveFilters` stay internal — a
+ * consumer configures a FilterSheet through its props, never by importing its internals.
+ */
+
+export { FilterSheet } from "./FilterSheet.js";
+export { FilterChip } from "./FilterChip.js";
+// Pure, framework-free — the module's one non-component export (see MODULE.md).
+export { countActiveFilters } from "./filterSheet.helpers.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/filter-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FilterSheet","FilterChip","countActiveFilters"],"sourceRoot":"../../../../src","sources":["modules/filter-sheet/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,kBAAe;AAS3C,SAASC,UAAU,QAAQ,iBAAc;AAGzC;AACA,SAASC,kBAAkB,QAAQ,0BAAuB","ignoreList":[]}

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

@@ -0,0 +1,132 @@
+"use strict";
+
+/**
+ * Input — wraps RN's `TextInput`. Colour is `status`-driven (never a free `color` prop), structure
+ * 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).
+ */
+
+import { memo, useState } from "react";
+import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.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;
+const FOCUS_RING_GAP = 2;
+export const Input = /*#__PURE__*/memo(function Input(props) {
+  const {
+    value,
+    onChangeText,
+    placeholder,
+    size = "md",
+    status = "default",
+    disabled = false,
+    label,
+    helperText,
+    errorText,
+    leadingIcon,
+    trailingIcon,
+    secureTextEntry,
+    accessibilityLabel,
+    containerStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const spec = INPUT_SIZES[size];
+  const statusColors = resolveInputStatus(theme.colors, status);
+  const a11y = resolveInputAccessibility({
+    label,
+    accessibilityLabel,
+    disabled
+  });
+
+  // Error message takes priority over the helper text — the field shows one message at a time.
+  const message = status === "error" ? errorText : helperText;
+  const glyph = name => /*#__PURE__*/_jsx(Icon, {
+    name: name,
+    size: spec.iconSize,
+    color: theme.colors.fg.muted,
+    strokeWidth: 2
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [label !== undefined &&
+    /*#__PURE__*/
+    // Decorative — the real accessible name lives on the TextInput below, so this isn't a
+    // second element a screen reader would announce redundantly right after it.
+    _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]
+      }],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [inputStructure(theme, {
+        size
+      }), {
+        borderColor: statusColors.border
+      }, disabled && styles.dimmed],
+      children: [focused && !disabled && /*#__PURE__*/_jsx(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
+        }
+      }), leadingIcon && glyph(leadingIcon), /*#__PURE__*/_jsx(TextInput, {
+        testID: testID,
+        value: value,
+        onChangeText: onChangeText,
+        placeholder: placeholder,
+        placeholderTextColor: theme.colors.fg.muted,
+        secureTextEntry: secureTextEntry,
+        editable: a11y.editable,
+        accessibilityLabel: a11y.accessibilityLabel,
+        accessibilityState: a11y.accessibilityState,
+        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]
+      }), 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
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  // 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 `<input>`, 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=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useState","Platform","StyleSheet","Text","TextInput","View","Icon","useTheme","INPUT_SIZES","inputStructure","resolveInputAccessibility","resolveInputStatus","jsx","_jsx","jsxs","_jsxs","FOCUS_RING_WIDTH","FOCUS_RING_GAP","Input","props","value","onChangeText","placeholder","size","status","disabled","label","helperText","errorText","leadingIcon","trailingIcon","secureTextEntry","accessibilityLabel","containerStyle","testID","theme","focused","setFocused","spec","statusColors","colors","a11y","message","glyph","name","iconSize","color","fg","muted","strokeWidth","style","children","undefined","accessibilityElementsHidden","importantForAccessibility","fontStyleForWeight","fontWeights","medium","fontSize","fontSizes","sm","default","marginBottom","space","borderColor","border","styles","dimmed","pointerEvents","position","top","left","right","bottom","borderWidth","focus","borderRadius","radii","base","placeholderTextColor","editable","accessibilityState","hitSlop","onFocus","onBlur","flex","alignSelf","padding","regular","OS","webOutlineReset","accessibilityLiveRegion","xs","marginTop","create","opacity","outlineWidth"],"sourceRoot":"../../../../src","sources":["modules/input/Input.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,122 @@
+"use strict";
+
+/**
+ * Input's style + behaviour resolution — same split as Button.variants:
+ *  - STRUCTURE (height, padding, radius, border WIDTH) lives in the themed `inputStructure`
+ *    resolver, static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is `status`-driven (never a free `color` prop) and resolved from the theme's ROLE
+ *    colours by `resolveInputStatus`, so it is guaranteed legible in both modes.
+ *  - ACCESSIBILITY prop derivation is `resolveInputAccessibility`, kept pure so the
+ *    "accessibilityLabel falls back to the visible label / disabled blocks editing" contract is
+ *    unit-testable without rendering React Native.
+ *
+ * Free of `lucide` and of any React tree, so the WCAG + behaviour tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+
+/** A state, not a brand tone — an input's colour reports validity, so it is never called `tone`. */
+
+/** Same floor as Button — 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));
+/**
+ * Input-specific dimensions. Height/iconSize/slop are the component's own design constants;
+ * `fontSize` sits on the theme's `fontSizes` scale (14/16/18) — same numbers as Button's sizes, so
+ * an icon-adjacent label and a field row line up when placed side by side.
+ */
+export const INPUT_SIZES = {
+  sm: {
+    height: 32,
+    fontSize: 14,
+    iconSize: 16,
+    hitSlop: slopFor(32)
+  },
+  md: {
+    height: 40,
+    fontSize: 16,
+    iconSize: 18,
+    hitSlop: slopFor(40)
+  },
+  lg: {
+    height: 48,
+    fontSize: 18,
+    iconSize: 20,
+    hitSlop: slopFor(48)
+  }
+};
+/**
+ * Maps `status` onto the theme's role colours. The whole reason the prop is a closed union and not
+ * `color?: string`: every colour an Input can show is one of these role lookups, so it can never be
+ * an off-palette value an app invented, and it inverts light↔dark for free.
+ *
+ * The error border deliberately reads `status.danger.solid`, NOT `status.danger.border` —
+ * `StatusColors.border` is documented as the decorative chip/badge outline (`ramp[200]`) and
+ * measures below 3:1 against the canvas on every brand × mode (as low as 2.07:1). A 1px field
+ * outline is a real UI boundary (WCAG 1.4.11), so it needs the rung that actually clears 3:1;
+ * `solid` does, comfortably, everywhere (≥ 3.37:1 light, ≥ 5.05:1 dark) — see `Input.test.ts`.
+ */
+export function resolveInputStatus(colors, status) {
+  if (status === "error") {
+    return {
+      border: colors.status.danger.solid,
+      message: colors.status.danger.text
+    };
+  }
+  return {
+    border: colors.border.interactive,
+    message: colors.fg.muted
+  };
+}
+/**
+ * Derives the accessibility surface once, purely, so the fallback contract is testable without a
+ * 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).
+ */
+export function resolveInputAccessibility(input) {
+  const disabled = input.disabled === true;
+  return {
+    accessibilityLabel: input.accessibilityLabel ?? input.label,
+    accessibilityState: {
+      disabled
+    },
+    editable: !disabled
+  };
+}
+
+/**
+ * Structural styles only — layout, height, padding, radius, border WIDTH. No colours (those are
+ * status-driven and applied inline over this), so this compiles once per theme identity via the
+ * `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const inputStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.radii.base,
+    columnGap: theme.space[2]
+  },
+  variants: {
+    size: {
+      sm: {
+        height: INPUT_SIZES.sm.height,
+        paddingHorizontal: theme.space[3]
+      },
+      md: {
+        height: INPUT_SIZES.md.height,
+        paddingHorizontal: theme.space[4]
+      },
+      lg: {
+        height: INPUT_SIZES.lg.height,
+        paddingHorizontal: theme.space[6]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+//# sourceMappingURL=Input.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","slopFor","height","Math","max","ceil","INPUT_SIZES","sm","fontSize","iconSize","hitSlop","md","lg","resolveInputStatus","colors","status","border","danger","solid","message","text","interactive","fg","muted","resolveInputAccessibility","input","disabled","accessibilityLabel","label","accessibilityState","editable","inputStructure","theme","base","flexDirection","alignItems","borderWidth","borderWidths","thin","borderRadius","radii","columnGap","space","variants","size","paddingHorizontal","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/input/Input.variants.ts"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,97 @@
+# input/ — a controlled text field with label, status, and helper/error messaging
+
+`Input` wraps RN's `TextInput`. It follows Button's reference pattern: structure vs colour split,
+pure/testable resolvers, closed unions, no `{...rest}`.
+
+## Files
+
+| File | Role |
+|------|------|
+| `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. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value` | `string` | — | Required — controlled. |
+| `onChangeText` | `(text: string) => void` | — | Required. |
+| `placeholder` | `string` | — | |
+| `size` | `sm \| md \| lg` | `md` | 32 / 40 / 48 dp; short sizes reach 44 via `hitSlop`. |
+| `status` | `default \| error` | `default` | Closed union — a **state**, not a brand `tone`. |
+| `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`. |
+| `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`. |
+
+## Accessibility contract (WCAG)
+
+- **2.5.5 / 2.5.8 target size** — every size reaches ≥ 44 dp via `hitSlop` on the `TextInput`. This
+  only holds because the `TextInput` carries `alignSelf: "stretch"`, so it fills the row's full
+  `spec.height` instead of shrinking to its intrinsic single-line text height — the same
+  height-must-match-hitSlop assumption Button satisfies by setting `height` directly on the
+  `Pressable` that receives its `hitSlop`. `Input.render.test.tsx` asserts the rendered node, not
+  just the `height + 2·hitSlop` arithmetic.
+- **1.4.3** — label/value text (`fg.default`), placeholder/helper text (`fg.muted`), and the error
+  message (`status.danger.text`) are all measured ≥ 4.5:1 against the canvas, for all 8 brands ×
+  both modes (`Input.test.ts`). The field renders no explicit background (transparent, like Button's
+  outline/ghost/link variants), so the canvas is what every colour is actually read against.
+- **1.4.11** — the resting/focus border (`border.interactive` / `border.focus`) and the error border
+  clear 3:1 against the canvas. The error border deliberately reads `status.danger.solid`, **not**
+  `status.danger.border` — the latter is `StatusColors`' documented decorative chip/badge outline
+  and measures as low as ~2.07:1 against the canvas on several brands in dark mode. `solid` clears
+  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).
+- **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
+  visible focus indicator — this doesn't touch native, where `outlineWidth` drives TV remote focus.
+- The visible label `Text` is hidden from the accessibility tree
+  (`accessibilityElementsHidden` / `importantForAccessibility="no-hide-descendants"`): RN's
+  `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.
+- 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.
+
+## Why `status` is a union, not a `color`
+
+Same reasoning as Button's `tone`: every colour an Input can show is a role lookup
+(`resolveInputStatus`), so it is guaranteed legible in both modes and can never be an off-palette
+value an app invented. `status` is named for what it actually is — validity state, not brand
+identity — so it is never called `tone`.
+
+## Patterns copied from Button
+
+1. **Structure vs colour split** — `inputStructure` (via `createThemedVariants`) holds only layout
+   numbers (height, padding, radius, border *width*); colour is resolved by `resolveInputStatus` and
+   applied inline.
+2. **Pure, testable resolvers** in `Input.variants.ts` (no React/lucide) — the WCAG + behaviour
+   contract is unit-tested against the real palettes, never eyeballed.
+3. **Closed unions only** (`size` / `status`), icons as NAMEs, `containerStyle: LayoutStyle` last and
+   once, no `{...rest}`.
+4. **Offset focus ring** — identical geometry/token to Button's (`border.focus`, 2dp gap + 2dp width).
+
+## Known gaps
+
+- No visibility-toggle button for `secureTextEntry` — would need an "eye" icon outside the current
+  22-name catalogue (`core/icon`); flagged rather than adding one from this module.
+- `leadingIcon`/`trailingIcon` are decorative-only in v1 (no `onClear` callback was in scope) — a
+  trailing `"x"` renders but doesn't clear the field; a future version could add an explicit
+  `onClear` prop if a consuming app needs it.
+
+## 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.

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["Input"],"sourceRoot":"../../../../src","sources":["modules/input/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,YAAS;;AAK/B;AACA","ignoreList":[]}