pixelize-native-library 1.0.6

package/lib/module/modules/radio-group/MODULE.md

@@ -0,0 +1,75 @@
+# radio-group/ — a single-select group of radio rows
+
+One component owns the whole group — there is no separate `Radio` export. Each option renders as
+a row with a themed ring + dot (plain `View`s, no icon) and its own `accessibilityRole="radio"`;
+the container carries `accessibilityRole="radiogroup"` so assistive tech announces the grouping
+without collapsing the individually-focusable rows into one.
+
+## Files
+
+| File | Role |
+|------|------|
+| `RadioGroup.tsx` | The component. Row composition, press wiring, a11y wiring. |
+| `RadioGroup.variants.ts` | Pure resolvers (`RADIO_GROUP_SIZES`, `resolveRadioGroupColors`, `resolveRadioRowAccessibility`) + the themed/untethemed structural resolvers (`radioGroupStructure`, `radioRowStructure`, `radioRingStructure`, `radioDotStructure`). No React, no lucide. |
+| `index.ts` | Public surface: `RadioGroup`, `RadioGroupProps`, `RadioGroupOption`, `RadioGroupSize`. |
+| `__tests__/RadioGroup.test.ts` | Pure: WCAG contrast (label-on-canvas, label-on-pressed-row, ring, dot — all brands × modes) + touch target + a11y contract. |
+| `__tests__/RadioGroup.render.test.tsx` | Render: selection, press blocking when disabled, per-row a11y state. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `options` | `{ label: string; value: string }[]` | — | Rendered in order. |
+| `value` | `string` | — | The selected option's `value`. |
+| `onValueChange` | `(value: string) => void` | — | Fires with the pressed option's `value`; gated off while `disabled`. |
+| `disabled` | `boolean` | `false` | Dims every row and blocks all presses. |
+| `size` | `sm \| md` | `md` | 36 / 44 dp visual row height; `sm` reaches 44 via `hitSlop`. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
+| `testID` | `string` | — | Container's testID; each row gets `` `${testID}-${option.value}` `` when set. |
+
+No per-option `disabled` and no `tone` — this is a single-purpose, single-select control, not a
+closed union of appearances. The ring is always `border.interactive`; the selected dot is always
+`accent.solid`. That is the whole reason there is no `color`/`tone` prop to resolve.
+
+## Accessibility contract (WCAG)
+
+- **2.5.x target size** — every size reaches ≥ 44 dp: `sm`'s 36 dp row grows via `hitSlop`; `md` is
+  already 44 dp.
+- **1.4.3** — the label uses `fg.default` on the canvas, measured ≥ 4.5:1 for every brand × mode.
+- **1.4.11** — the ring boundary is `border.interactive` (≥ 3:1 on the canvas, every brand × mode);
+  the selected dot (`accent.solid`) is measured the same way as a non-text UI indicator.
+- **4.1.2** — `accessibilityRole="radio"` per row, `accessibilityState={ checked, disabled }` (not
+  `selected` — that key is for `role="tab"`/`"option"`; Checkbox/Switch use the same `checked`
+  semantics for their own toggle roles);
+  `accessibilityRole="radiogroup"` on the container (a real, recognised RN role — no fallback
+  needed on this RN version). The container is intentionally left non-`accessible` so it groups
+  without swallowing the rows into one focus stop.
+- **2.3.3** — n/a: nothing here animates. The dot appears/disappears by conditional render (not a
+  fade or a slide), so there is no transition for `useReducedMotion` to gate.
+- Disabled rows are exempt from the contrast minimum (WCAG 1.4.3), so the uniform `opacity: 0.5`
+  dim is correct, same as Button.
+
+## Patterns (copied from Button)
+
+1. **Structure vs colour split.** Row height, ring/dot diameter, gaps, and border *width* are
+   `createThemedVariants`/`createVariants` (registered once per `(theme, size)`); the dot's size
+   alone has no theme dependency, so it uses the untethemed `createVariants`. Colour is resolved by
+   `resolveRadioGroupColors` from role tokens and applied inline over the structural style.
+2. **Pure, testable resolvers** in `RadioGroup.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**, no icon (per spec — the ring/dot are
+   plain Views, not glyphs).
+4. **Defence-in-depth press gating** — `onPress` is `undefined` while `disabled` (mirrors
+   `resolveButtonAccessibility`'s `blocked ? undefined : onPress`), on top of the `Pressable`
+   `disabled` prop.
+
+## Known gaps
+
+- No visible keyboard-focus ring (Button's `border.focus` ring pattern, WCAG 2.4.7) — left out of
+  v1 since touch is the primary input surface for this control; the same `onFocus`/`onBlur` +
+  `border.focus` pattern from `Button.tsx` would extend cleanly here if a future task needs it for
+  external-keyboard / RN Web use.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `options.map()` renders host `Pressable`/`View`/`Text`, not a library child component, so the inline per-row `onPress`/style closures were left as-is.

package/lib/module/modules/radio-group/RadioGroup.js

@@ -0,0 +1,87 @@
+"use strict";
+
+/**
+ * RadioGroup — one component owns the whole group; there is no separate `Radio` export. Each
+ * option is a row (ring + dot drawn with plain Views, no icon) that carries its own
+ * `accessibilityRole="radio"`, wrapped in a container carrying `accessibilityRole="radiogroup"` so
+ * assistive tech announces the grouping without collapsing the individually-focusable rows into one.
+ *
+ * No animation anywhere (the dot appears/disappears by conditional render, not a fade or a move),
+ * so there is nothing for `useReducedMotion` (WCAG 2.3.3) to gate — unlike Button's press fade.
+ */
+
+import { memo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+import { RADIO_GROUP_SIZES, radioDotStructure, radioGroupStructure, radioRingStructure, radioRowStructure, resolveRadioGroupColors, resolveRadioRowAccessibility } from "./RadioGroup.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RadioGroup = /*#__PURE__*/memo(function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  disabled = false,
+  size = "md",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const spec = RADIO_GROUP_SIZES[size];
+  const colors = resolveRadioGroupColors(theme.colors);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessibilityRole: "radiogroup",
+    style: [radioGroupStructure(theme, {
+      size
+    }), style],
+    children: options.map(option => {
+      const selected = option.value === value;
+      const a11y = resolveRadioRowAccessibility({
+        selected,
+        disabled
+      });
+      return /*#__PURE__*/_jsxs(Pressable, {
+        testID: testID ? `${testID}-${option.value}` : undefined,
+        accessibilityRole: a11y.accessibilityRole,
+        accessibilityState: a11y.accessibilityState,
+        accessibilityLabel: option.label,
+        disabled: a11y.disabled,
+        onPress: disabled ? undefined : () => onValueChange(option.value),
+        hitSlop: spec.hitSlop,
+        style: ({
+          pressed
+        }) => [radioRowStructure(theme, {
+          size
+        }), pressed && !disabled && {
+          backgroundColor: colors.pressedRow
+        }, disabled && styles.dimmed],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [radioRingStructure(theme, {
+            size
+          }), {
+            borderColor: colors.ring
+          }],
+          children: selected && /*#__PURE__*/_jsx(View, {
+            style: [radioDotStructure({
+              size
+            }), {
+              backgroundColor: colors.dot
+            }]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+            fontSize: spec.fontSize,
+            color: colors.label
+          }],
+          children: option.label
+        })]
+      }, option.value);
+    })
+  });
+});
+const styles = StyleSheet.create({
+  // A disabled row is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
+  dimmed: {
+    opacity: 0.5
+  }
+});
+//# sourceMappingURL=RadioGroup.js.map

package/lib/module/modules/radio-group/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","Pressable","StyleSheet","Text","View","useTheme","RADIO_GROUP_SIZES","radioDotStructure","radioGroupStructure","radioRingStructure","radioRowStructure","resolveRadioGroupColors","resolveRadioRowAccessibility","jsx","_jsx","jsxs","_jsxs","RadioGroup","options","value","onValueChange","disabled","size","style","testID","theme","spec","colors","accessibilityRole","children","map","option","selected","a11y","undefined","accessibilityState","accessibilityLabel","label","onPress","hitSlop","pressed","backgroundColor","pressedRow","styles","dimmed","borderColor","ring","dot","fontStyleForWeight","fontWeights","regular","fontSize","color","create","opacity"],"sourceRoot":"../../../../src","sources":["modules/radio-group/RadioGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/radio-group/RadioGroup.variants.js

@@ -0,0 +1,163 @@
+"use strict";
+
+/**
+ * RadioGroup's style + behaviour resolution — pure, React/lucide-free, same split as Button:
+ *  - STRUCTURE (rowGap, row/ring/dot sizing, border WIDTH) lives in `createThemedVariants` /
+ *    `createVariants` below, registered once per (theme, size) — never rebuilt per render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveRadioGroupColors`), never a raw hex:
+ *    the outer ring is always `border.interactive`, the selected dot is always `accent.solid`.
+ *  - `resolveRadioRowAccessibility` derives the per-row a11y surface purely, so the
+ *    "selected"/"disabled" contract is unit-testable without rendering React Native.
+ */
+
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
+/** Same floor as Button — Apple HIG minimum and WCAG 2.5.5 (AAA). */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+/**
+ * RadioGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
+ * test can assert `rowMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export const RADIO_GROUP_SIZES = {
+  sm: {
+    rowMinHeight: 36,
+    ringSize: 18,
+    dotSize: 8,
+    fontSize: 14,
+    hitSlop: slopFor(36)
+  },
+  md: {
+    rowMinHeight: 44,
+    ringSize: 20,
+    dotSize: 10,
+    fontSize: 16,
+    hitSlop: slopFor(44)
+  }
+};
+/**
+ * Maps the theme's role colours onto the group's fixed visual roles. There is no per-row tone —
+ * every ring is the same neutral interactive outline, and the selected dot is always the accent —
+ * so, unlike Button, this has no closed union to resolve; it is pure indirection into the roles.
+ */
+export function resolveRadioGroupColors(colors) {
+  return {
+    ring: colors.border.interactive,
+    dot: colors.accent.solid,
+    label: colors.fg.default,
+    // `bg.sunken` (a pale neutral tint), NOT `bg.hover`: measured, `bg.hover`'s saturated mid-tone
+    // drops the brand-tinted label below 4.5:1 on 4 of 8 brands in light mode — same class of bug
+    // Button's "neutral" tone documents fixing the same way.
+    pressedRow: colors.bg.sunken
+  };
+}
+/**
+ * Derives one row's accessibility surface purely, mirroring `resolveButtonAccessibility`. Reports
+ * `accessibilityState.checked` — not `.selected` (that key is for role="tab"/"option"; a radio's
+ * checked state is `checked`, same as this repo's Checkbox/Switch) — so the rendered `disabled`
+ * prop and the announced `accessibilityState.disabled` always agree, so a screen reader never
+ * hears a state the touch handling contradicts.
+ */
+export function resolveRadioRowAccessibility(input) {
+  return {
+    accessibilityRole: "radio",
+    accessibilityState: {
+      checked: input.selected,
+      disabled: input.disabled
+    },
+    disabled: input.disabled
+  };
+}
+
+/** Gap between rows. Structural, theme-scaled, registered once per (theme, size). */
+export const radioGroupStructure = createThemedVariants(theme => ({
+  variants: {
+    size: {
+      sm: {
+        rowGap: theme.space[1]
+      },
+      md: {
+        rowGap: theme.space[2]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+
+/**
+ * One row's layout — height, gap to the label, inset padding, and the corner radius the pressed
+ * background rounds to. Colour (the pressed fill) is resolved and applied inline over this.
+ */
+export const radioRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: theme.radii.base
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: RADIO_GROUP_SIZES.sm.rowMinHeight,
+        columnGap: theme.space[2],
+        paddingHorizontal: theme.space[2]
+      },
+      md: {
+        minHeight: RADIO_GROUP_SIZES.md.rowMinHeight,
+        columnGap: theme.space[3],
+        paddingHorizontal: theme.space[2]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+
+/** The outer ring. Border WIDTH is theme-scaled; the diameter is the component's own constant. */
+export const radioRingStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: theme.borderWidths.thick
+  },
+  variants: {
+    size: {
+      sm: {
+        width: RADIO_GROUP_SIZES.sm.ringSize,
+        height: RADIO_GROUP_SIZES.sm.ringSize,
+        borderRadius: RADIO_GROUP_SIZES.sm.ringSize / 2
+      },
+      md: {
+        width: RADIO_GROUP_SIZES.md.ringSize,
+        height: RADIO_GROUP_SIZES.md.ringSize,
+        borderRadius: RADIO_GROUP_SIZES.md.ringSize / 2
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+
+/** The inner selected dot. No theme dependency at all, so it uses the untethemed resolver. */
+export const radioDotStructure = createVariants({
+  variants: {
+    size: {
+      sm: {
+        width: RADIO_GROUP_SIZES.sm.dotSize,
+        height: RADIO_GROUP_SIZES.sm.dotSize,
+        borderRadius: RADIO_GROUP_SIZES.sm.dotSize / 2
+      },
+      md: {
+        width: RADIO_GROUP_SIZES.md.dotSize,
+        height: RADIO_GROUP_SIZES.md.dotSize,
+        borderRadius: RADIO_GROUP_SIZES.md.dotSize / 2
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+//# sourceMappingURL=RadioGroup.variants.js.map

package/lib/module/modules/radio-group/RadioGroup.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","createVariants","MIN_TOUCH_TARGET","slopFor","height","Math","max","ceil","RADIO_GROUP_SIZES","sm","rowMinHeight","ringSize","dotSize","fontSize","hitSlop","md","resolveRadioGroupColors","colors","ring","border","interactive","dot","accent","solid","label","fg","default","pressedRow","bg","sunken","resolveRadioRowAccessibility","input","accessibilityRole","accessibilityState","checked","selected","disabled","radioGroupStructure","theme","variants","size","rowGap","space","defaultVariants","radioRowStructure","base","flexDirection","alignItems","borderRadius","radii","minHeight","columnGap","paddingHorizontal","radioRingStructure","justifyContent","borderWidth","borderWidths","thick","width","radioDotStructure"],"sourceRoot":"../../../../src","sources":["modules/radio-group/RadioGroup.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,oBAAoB,EAAEC,cAAc,QAAQ,2BAAkB;AAIvE;AACA,OAAO,MAAMC,gBAAgB,GAAG,EAAE;AAElC,MAAMC,OAAO,GAAIC,MAAc,IAAaC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAAC,CAACL,gBAAgB,GAAGE,MAAM,IAAI,CAAC,CAAC,CAAC;AAenG;AACA;AACA;AACA;AACA,OAAO,MAAMI,iBAAiB,GAAG;EAC/BC,EAAE,EAAE;IAAEC,YAAY,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,CAAC;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAEX,OAAO,CAAC,EAAE;EAAE,CAAC;EACtFY,EAAE,EAAE;IAAEL,YAAY,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAEX,OAAO,CAAC,EAAE;EAAE;AACxF,CAA+D;AAa/D;AACA;AACA;AACA;AACA;AACA,OAAO,SAASa,uBAAuBA,CAACC,MAAkB,EAAoB;EAC5E,OAAO;IACLC,IAAI,EAAED,MAAM,CAACE,MAAM,CAACC,WAAW;IAC/BC,GAAG,EAAEJ,MAAM,CAACK,MAAM,CAACC,KAAK;IACxBC,KAAK,EAAEP,MAAM,CAACQ,EAAE,CAACC,OAAO;IACxB;IACA;IACA;IACAC,UAAU,EAAEV,MAAM,CAACW,EAAE,CAACC;EACxB,CAAC;AACH;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,4BAA4BA,CAACC,KAAiC,EAA8B;EAC1G,OAAO;IACLC,iBAAiB,EAAE,OAAO;IAC1BC,kBAAkB,EAAE;MAAEC,OAAO,EAAEH,KAAK,CAACI,QAAQ;MAAEC,QAAQ,EAAEL,KAAK,CAACK;IAAS,CAAC;IACzEA,QAAQ,EAAEL,KAAK,CAACK;EAClB,CAAC;AACH;;AAEA;AACA,OAAO,MAAMC,mBAAmB,GAAGrC,oBAAoB,CAAEsC,KAAY,KAAM;EACzEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ/B,EAAE,EAAE;QAAEgC,MAAM,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;MAAE,CAAC;MAC9B3B,EAAE,EAAE;QAAE0B,MAAM,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;MAAE;IAC/B;EACF,CAAC;EACDC,eAAe,EAAE;IAAEH,IAAI,EAAE;EAAK;AAChC,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA;AACA,OAAO,MAAMI,iBAAiB,GAAG5C,oBAAoB,CAAEsC,KAAY,KAAM;EACvEO,IAAI,EAAE;IACJC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAEV,KAAK,CAACW,KAAK,CAACJ;EAC5B,CAAC;EACDN,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ/B,EAAE,EAAE;QACFyC,SAAS,EAAE1C,iBAAiB,CAACC,EAAE,CAACC,YAAY;QAC5CyC,SAAS,EAAEb,KAAK,CAACI,KAAK,CAAC,CAAC,CAAC;QACzBU,iBAAiB,EAAEd,KAAK,CAACI,KAAK,CAAC,CAAC;MAClC,CAAC;MACD3B,EAAE,EAAE;QACFmC,SAAS,EAAE1C,iBAAiB,CAACO,EAAE,CAACL,YAAY;QAC5CyC,SAAS,EAAEb,KAAK,CAACI,KAAK,CAAC,CAAC,CAAC;QACzBU,iBAAiB,EAAEd,KAAK,CAACI,KAAK,CAAC,CAAC;MAClC;IACF;EACF,CAAC;EACDC,eAAe,EAAE;IAAEH,IAAI,EAAE;EAAK;AAChC,CAAC,CAAC,CAAC;;AAEH;AACA,OAAO,MAAMa,kBAAkB,GAAGrD,oBAAoB,CAAEsC,KAAY,KAAM;EACxEO,IAAI,EAAE;IACJE,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE,QAAQ;IACxBC,WAAW,EAAEjB,KAAK,CAACkB,YAAY,CAACC;EAClC,CAAC;EACDlB,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ/B,EAAE,EAAE;QACFiD,KAAK,EAAElD,iBAAiB,CAACC,EAAE,CAACE,QAAQ;QACpCP,MAAM,EAAEI,iBAAiB,CAACC,EAAE,CAACE,QAAQ;QACrCqC,YAAY,EAAExC,iBAAiB,CAACC,EAAE,CAACE,QAAQ,GAAG;MAChD,CAAC;MACDI,EAAE,EAAE;QACF2C,KAAK,EAAElD,iBAAiB,CAACO,EAAE,CAACJ,QAAQ;QACpCP,MAAM,EAAEI,iBAAiB,CAACO,EAAE,CAACJ,QAAQ;QACrCqC,YAAY,EAAExC,iBAAiB,CAACO,EAAE,CAACJ,QAAQ,GAAG;MAChD;IACF;EACF,CAAC;EACDgC,eAAe,EAAE;IAAEH,IAAI,EAAE;EAAK;AAChC,CAAC,CAAC,CAAC;;AAEH;AACA,OAAO,MAAMmB,iBAAiB,GAAG1D,cAAc,CAAC;EAC9CsC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ/B,EAAE,EAAE;QACFiD,KAAK,EAAElD,iBAAiB,CAACC,EAAE,CAACG,OAAO;QACnCR,MAAM,EAAEI,iBAAiB,CAACC,EAAE,CAACG,OAAO;QACpCoC,YAAY,EAAExC,iBAAiB,CAACC,EAAE,CAACG,OAAO,GAAG;MAC/C,CAAC;MACDG,EAAE,EAAE;QACF2C,KAAK,EAAElD,iBAAiB,CAACO,EAAE,CAACH,OAAO;QACnCR,MAAM,EAAEI,iBAAiB,CAACO,EAAE,CAACH,OAAO;QACpCoC,YAAY,EAAExC,iBAAiB,CAACO,EAAE,CAACH,OAAO,GAAG;MAC/C;IACF;EACF,CAAC;EACD+B,eAAe,EAAE;IAAEH,IAAI,EAAE;EAAK;AAChC,CAAC,CAAC","ignoreList":[]}

package/lib/module/modules/radio-group/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/radio-group`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveRadioGroupColors`,
+ * `RADIO_GROUP_SIZES`, …) stay internal — a consumer configures a RadioGroup through its props,
+ * never by importing its internals.
+ */
+
+export { RadioGroup } from "./RadioGroup.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/radio-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioGroup"],"sourceRoot":"../../../../src","sources":["modules/radio-group/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,iBAAc","ignoreList":[]}

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

@@ -0,0 +1,131 @@
+# reorder/ — a drag-to-reorder list with a required non-drag alternative
+
+`Reorder` renders a vertical list of `{ id, label }` items, each with a drag "grip" glyph on the
+left and a label. Dragging the grip reorders the list live, with the other rows sliding out of the
+way to preview the drop position. Wave 3: hand-built on `PanResponder` + `Animated` only — no new
+dependency.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Reorder.tsx` | The component. `PanResponder` wiring on the grip only, the ephemeral drag-preview state, and the two `Button` up/down alternatives. `ReorderRow` is a private sub-component (its shift-settle effect needs a per-row hook instance, and Rules of Hooks forbid a hook inside the `.map()` body); each row's `shift` `Animated.Value` itself is owned by `Reorder`, keyed by `item.id` in a `Map`, so `handleDragEnd` can reset every row's `shift` to 0 synchronously on drop. |
+| `Reorder.variants.ts` | Pure resolvers (`resolveReorderColors`, `resolveReorderMoveState`, `moveItem`, `resolveRowPitch`, `resolveDragTargetIndex`, `resolveRowShift`) + the themed/untethered structural resolvers. No React, no lucide. |
+| `index.ts` | Public surface: `Reorder`, `ReorderProps`, `ReorderItem`. |
+| `__tests__/Reorder.test.ts` | Pure: WCAG contrast (all brands × modes), grip touch target, and the drag/alternative-path arithmetic (`moveItem`, `resolveRowPitch`, `resolveDragTargetIndex`, `resolveRowShift`, `resolveReorderMoveState`). |
+| `__tests__/Reorder.render.test.tsx` | Render: label rendering, grip hidden from a11y, grip start/move gating, the WCAG 2.5.7 alternative reordering the first/last/a middle item both directions, disabled gating, testID wiring, reduced-motion shift animation, and a real (fabricated-touch-history) grant/move/release regression test proving a previewed row's `shift` resets to 0 synchronously on drop. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `items` | `{ id: string; label: string }[]` | — | Required. Rendered top to bottom, in array order. Fully controlled — `Reorder` never mutates this array itself. |
+| `onReorder` | `(next: { id: string; label: string }[]) => void` | — | Required. Fired on drag release (only if the position actually changed) AND on every up/down button press. |
+| `disabled` | `boolean` | `false` | Blocks both interaction paths: gates a new drag from starting and disables every move button. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Seeds `${testID}-item-<i>`, `-grip`, `-move-up`, `-move-down` per row. |
+
+No `variant`/`size`/`tone` — every row reads identically (same reasoning `Timeline`'s minimal prop
+set documents for its own tone-less component); the only per-row state is structural (dragging or
+not), not a caller-facing appearance choice.
+
+## Interaction model
+
+- **Drag path**: `PanResponder` lives on the grip `View` only (not the row), so the label never
+  fights the gesture. While dragging, `Reorder` tracks only `{ startIndex, targetIndex }` — the
+  `items` array itself is NEVER mutated mid-drag. Every other row's on-screen offset is a pure
+  function of that pair (`resolveRowShift`); the dragged row's own offset follows the raw touch `dy`
+  via a shared `Animated.Value`. On release, `moveItem(items, startIndex, targetIndex)` is computed
+  once and handed to `onReorder` — a no-op if the position didn't change.
+- **Row pitch**: the drag math (`resolveDragTargetIndex`, `resolveRowShift`) is driven by
+  `resolveRowPitch(theme.space[2])` — `REORDER_ROW_HEIGHT` (56dp) PLUS the list's `rowGap` (the same
+  `theme.space[2]` token `reorderListStructure` applies), never `REORDER_ROW_HEIGHT` alone. That gap
+  is real on-screen distance between row tops; a pitch that ignores it flips the target row early and
+  undershoots the preview shift by `rowGap` per row.
+- **Shift reset on drop**: each row's `shift` `Animated.Value` is owned by `Reorder` (a `Map` keyed by
+  `item.id`), not by `ReorderRow` itself, so `handleDragEnd` can call `setValue(0)` on every row
+  synchronously, in the same tick the array reorder commits — BEFORE the `dragState → null` update
+  flips every row's `shiftTarget` prop to 0. Because React relocates a reordered row instantly via its
+  stable `item.id` key, a row still holding a stale mid-drag `shift` at that instant would visibly
+  jump to its new slot and then animate back — the synchronous reset is what prevents that.
+- **`onReorder` is called as a plain statement in `handleDragEnd`, never inside a `setDragState`
+  updater function.** `useState` updaters must be pure; nesting the consumer's own state setter
+  (`onReorder`, e.g. `setItems`) inside `setDragState((prev) => …)` let React invoke it while
+  processing `Reorder`'s own render, surfacing as "Cannot update a component while rendering a
+  different component" (fixed — was a real bug, not a lint nit). `handleDragEnd` reads the current
+  value via a `dragStateRef` mirror (kept in sync every render) rather than closing over `dragState`
+  directly — see "Performance" below for why the callback itself must NOT depend on `dragState` —
+  calls `onReorder` first if the position changed, then `setDragState(null)` — same synchronous
+  ordering relative to the `shiftValues` reset above, so the shift-reset-on-drop fix is unaffected.
+- **Accessible alternative (WCAG 2.5.7 — required, not optional)**: every row also renders two
+  `Button` icon-only presses, "Move `<label>` up" / "Move `<label>` down", reusing the shipped
+  `chevron-up`/`chevron-down` `IconName`s. Each is a real `Button` (`variant="ghost" size="sm"
+  tone="neutral"`) — a real `accessibilityRole="button"`, Button's own verified ≥44dp touch target,
+  and Button's own disabled/focus/press contract, all reused rather than reimplemented. Disabled at
+  the list's own start/end via `resolveReorderMoveState`, and by the list's `disabled` prop
+  everywhere. This path calls the exact same `moveItem` the drag path calls, so both are guaranteed
+  to agree on the result for the same intent.
+- **Grip glyph**: no `IconName` in the closed 22-name set represents a drag handle, and that set is
+  never extended for one component (per the build brief) — the grip is three plain themed `View`
+  bars (`fg.muted`, `radii.full`), not an icon.
+
+## Accessibility contract (WCAG)
+
+- **2.5.7 (Dragging Movements)** — the up/down `Button`s ARE the required non-dragging alternative;
+  see "Interaction model" above. Verified end-to-end in `Reorder.render.test.tsx`: pressing "Move
+  Alpha down" (first item), "Move Gamma up" (last item), and "Move Beta up"/"Move Beta down" (a
+  middle item, both directions) each produce the exact expected resulting array — no drag involved.
+- **Grip hidden from assistive tech** — `PanResponder` gestures are invisible to a screen reader;
+  exposing the grip as a focusable-but-non-operable element would be worse than not exposing it at
+  all. It carries `accessibilityElementsHidden` + `importantForAccessibility="no-hide-descendants"`
+  (the same pairing `Timeline`'s decorative connector uses) — the up/down `Button`s are the one real
+  accessible affordance for reordering.
+- **2.5.5 / 2.5.8 (target size)** — the grip's visual footprint (three 20×3dp bars + gaps) reaches
+  44dp via `hitSlop` on BOTH axes (`GRIP_HIT_SLOP`), same discipline as `Button`'s own `hitSlop`
+  extended to two dimensions. The move buttons reuse `Button`'s own already-verified `sm` touch
+  target (32dp visual + 6dp slop each side = 44dp) — not re-tested here, since that contract lives
+  and is proven in `button/__tests__/Button.test.ts`.
+- **1.4.3** — the row label (`fg.default`) is measured ≥ 4.5:1 against BOTH the resting row fill
+  (`bg.surface`) and the dragging row fill (`bg.raised`), for all 8 brands × both modes.
+- **1.4.11** — the grip glyph (`fg.muted`) is measured ≥ 3:1 against both row fills as a graphical
+  UI affordance, same reasoning `Spinner.variants.ts` documents for its own "Graphical Objects"
+  clause. The grip's disabled colour (`fg.disabled`) is NOT contrast-gated — a disabled control is
+  exempt from the minimum, same reasoning `Button`'s `dimmed` state documents.
+- **2.3.3 (reduced motion)** — the row-shift preview is skipped (`Animated.Value.setValue`, no
+  `Animated.timing`) when `useReducedMotion()` is true, the identical pattern
+  `Accordion`'s chevron rotation uses, verified the same way (`jest.spyOn(Animated, "timing")`).
+
+## Why the drag never mutates `items` mid-gesture
+
+`Reorder` is fully controlled — the consumer owns `items` via `onReorder`. Mutating a local copy
+mid-drag would create a second source of truth that has to be reconciled with the next `items` prop
+the consumer sends back, and — because the dragged row's `key` is stable (`item.id`) — reordering the
+underlying array WOULD re-mount nothing, but WOULD instantly reset every row's `index` prop mid-
+gesture, which is exactly what the shift-preview math is built to avoid needing. Instead, only the
+ephemeral `{ startIndex, targetIndex }` pair changes during a drag, and `moveItem` is computed once,
+on release. Because the preview's `resolveRowShift` and the commit's `moveItem` share the same splice
+semantics, the row a shifted neighbour vacated is exactly where the dragged row lands — no jump when
+the consumer's new `items` prop arrives.
+
+## Known gaps
+
+- The live drag gesture's EXACT arithmetic is not re-derived from a fabricated `gestureState` end to
+  end: `PanResponder`'s internal handlers reconstruct `gestureState.dy` from `event.touchHistory`'s
+  centroid bookkeeping, and asserting a specific `dy` from fabricated touch history would mostly test
+  that reconstruction, not `Reorder` — so the exact arithmetic (`resolveDragTargetIndex`,
+  `resolveRowShift`, `moveItem`) is exhaustively pure-tested instead. What IS verified on the real
+  rendered node: `onStartShouldSetResponder`/`onMoveShouldSetResponder` (the gating predicates, which
+  read no touch data) correctly return `false` when `disabled`; a real fabricated-touch-history
+  grant/move/release (using a saturating `dy`, so it never depends on an exact row boundary) proves
+  the shift-reset-on-drop fix; and every other consequence of a real drag beyond that is a manual/QA
+  pass on-device before release.
+- No `variant`/`size` — a single fixed 56dp row height (`REORDER_ROW_HEIGHT`) and one visual style,
+  per the build brief's preference for a fixed height over per-row `onLayout` measurement.
+- The dragged row is visually lifted via `elevation.md` + a raised fill + `zIndex`, not a scale
+  transform — the build brief left this as an implementation choice ("slightly scaled or just
+  elevated — your call"); scale was skipped to avoid a second `Animated.Value` per row for a purely
+  decorative flourish.
+
+## Performance
+
+`Reorder` (exported) and the internal `ReorderRow` are both wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — the literal "Reorder rows" case CLAUDE.md's Performance section calls out by name; without memoizing the row itself, memoizing its callbacks would have no effect, since `Reorder` re-renders every row on each drag-move tick. `colors` is `useMemo`'d; `handleDragStart`/`handleDragMove`/`handleMove`/`handleMoveUp`/`handleMoveDown` are `useCallback`'d with stable deps, so a row whose own props didn't change skips re-rendering during a drag. `handleDragEnd` needs the CURRENT `dragState` at drop time but must NOT be recreated on every drag-target transition (that would hand every row a changed `onDragEnd` reference and defeat their memo on the exact hot path this pass targets) — it reads `dragState` through a `dragStateRef` mirror instead of depending on `dragState` directly, so its own identity stays stable across a whole drag. `onMoveUp`/`onMoveDown` are now `(index: number) => void` (was `() => void`) so one stable per-list callback replaces the old per-row `() => handleMove(index, index ± 1)` closure; `ReorderRow` itself binds its own `index` via `handlePressUp`/`handlePressDown` so `Button` (a library child) also gets a stable `onPress`.