pixelize-native-library 1.0.6

package/lib/module/modules/card/Card.variants.js

@@ -0,0 +1,75 @@
+"use strict";
+
+/**
+ * Card's style resolution — same split as Button.variants:
+ *  - STRUCTURE (padding, radius, border WIDTH) lives in the themed `cardStructure` resolver, static
+ *    per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is variant-driven and resolved from the theme's ROLE colours by `resolveCardVariant`,
+ *    never a raw ramp and never a hardcoded hex. Elevation (a shadow, not a role colour) is applied
+ *    directly by the component from `theme.elevation.md` — nothing to resolve here.
+ *
+ * Free of React, so the WCAG test imports this directly (mocking only `react-native`'s
+ * `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * Maps `variant` onto the theme's role colours. The whole reason the prop is a closed union and not
+ * `color?: string`: every colour a Card can show is one of these role lookups, so it inverts
+ * light↔dark for free and can never be an off-palette value an app invented.
+ *
+ * The outline border deliberately reads `colors.border.interactive`, NOT `colors.border.default`:
+ * `default` is the decorative divider rung and measures ~1.0–1.4:1 against `bg.surface`/`bg.raised`
+ * on every brand × mode — nowhere near WCAG 1.4.11's 3:1 floor for a rendered UI boundary.
+ * `interactive` is the token proven ≥ 3:1 everywhere (see `Card.test.ts`) — the identical
+ * substitution `Button`'s outline variant makes, for the identical reason.
+ */
+export function resolveCardVariant(colors, variant) {
+  switch (variant) {
+    case "flat":
+      return {
+        background: colors.bg.surface,
+        border: undefined
+      };
+    case "outline":
+      return {
+        background: colors.bg.surface,
+        border: colors.border.interactive
+      };
+    case "elevated":
+      return {
+        background: colors.bg.raised,
+        border: undefined
+      };
+  }
+}
+
+/**
+ * Structural styles only — padding, radius, border WIDTH. No colours (those are variant-driven and
+ * applied inline over this) and no shadow (elevation is applied directly from `theme.elevation.md`,
+ * already rendered per-platform — never re-derived here), so this compiles once per theme identity
+ * via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const cardStructure = createThemedVariants(theme => ({
+  base: {
+    borderRadius: theme.radii.lg,
+    padding: theme.space[4]
+  },
+  variants: {
+    variant: {
+      flat: {
+        borderWidth: 0
+      },
+      outline: {
+        borderWidth: theme.borderWidths.thin
+      },
+      elevated: {
+        borderWidth: 0
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "elevated"
+  }
+}));
+//# sourceMappingURL=Card.variants.js.map

package/lib/module/modules/card/Card.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","resolveCardVariant","colors","variant","background","bg","surface","border","undefined","interactive","raised","cardStructure","theme","base","borderRadius","radii","lg","padding","space","variants","flat","borderWidth","outline","borderWidths","thin","elevated","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/card/Card.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,oBAAoB,QAAQ,2BAAkB;AAUvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACC,MAAkB,EAAEC,OAAoB,EAAqB;EAC9F,QAAQA,OAAO;IACb,KAAK,MAAM;MACT,OAAO;QAAEC,UAAU,EAAEF,MAAM,CAACG,EAAE,CAACC,OAAO;QAAEC,MAAM,EAAEC;MAAU,CAAC;IAC7D,KAAK,SAAS;MACZ,OAAO;QAAEJ,UAAU,EAAEF,MAAM,CAACG,EAAE,CAACC,OAAO;QAAEC,MAAM,EAAEL,MAAM,CAACK,MAAM,CAACE;MAAY,CAAC;IAC7E,KAAK,UAAU;MACb,OAAO;QAAEL,UAAU,EAAEF,MAAM,CAACG,EAAE,CAACK,MAAM;QAAEH,MAAM,EAAEC;MAAU,CAAC;EAC9D;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,aAAa,GAAGX,oBAAoB,CAAEY,KAAY,KAAM;EACnEC,IAAI,EAAE;IACJC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAACC,EAAE;IAC5BC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;EACxB,CAAC;EACDC,QAAQ,EAAE;IACRhB,OAAO,EAAE;MACPiB,IAAI,EAAE;QAAEC,WAAW,EAAE;MAAE,CAAC;MACxBC,OAAO,EAAE;QAAED,WAAW,EAAET,KAAK,CAACW,YAAY,CAACC;MAAK,CAAC;MACjDC,QAAQ,EAAE;QAAEJ,WAAW,EAAE;MAAE;IAC7B;EACF,CAAC;EACDK,eAAe,EAAE;IAAEvB,OAAO,EAAE;EAAW;AACzC,CAAC,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,81 @@
+# card/ — a plain, variant-driven container
+
+`Card` groups content with a themed background, optional border, and optional elevation. It takes
+no icon, no press handler, and renders no text of its own — `children` is ordinary composition.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Card.tsx` | The component. Resolves the variant's colours + elevation, applies them inline over the structural style, in that order, `style` last. |
+| `Card.variants.ts` | Pure resolver (`resolveCardVariant`) + the themed structural variant resolver `cardStructure`. No React. |
+| `index.ts` | Public surface: `Card`, `CardProps`, `CardVariant`. |
+| `__tests__/Card.test.ts` | Pure: WCAG 1.4.11 (outline border, all brands × modes) + variant→colour resolution. |
+| `__tests__/Card.render.test.tsx` | Render: children compose, `testID` forwards, each variant resolves the theme-correct background/border, only `elevated` carries a shadow, consumer `style` applies last. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `variant` | `elevated \| outline \| flat` | `elevated` | Closed union — see below. |
+| `children` | `ReactNode` | — | Ordinary composition, not a prop spread. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`. |
+
+## Variant → appearance
+
+| Variant | Background | Border | Elevation |
+|---------|-----------|--------|-----------|
+| `flat` | `bg.surface` | none | none |
+| `outline` | `bg.surface` | `border.interactive`, `borderWidths.thin` | none |
+| `elevated` (default) | `bg.raised` | none | `theme.elevation.md` (already-rendered `ElevationStyle`, spread as-is — never re-derived) |
+
+Padding (`theme.space[4]`) and radius (`theme.radii.lg`) are shared across all three variants via
+`cardStructure`; only border WIDTH varies by variant there (colour is resolved separately and
+applied inline, same split as every other module).
+
+## Why the outline border is `border.interactive`, not `border.default`
+
+`colors.border.default` is the decorative divider rung — measured at ~1.0–1.4:1 against
+`bg.surface`/`bg.raised` on every brand × mode, nowhere near WCAG 1.4.11's 3:1 floor for a rendered
+UI boundary. `border.interactive` is the token proven ≥ 3:1 everywhere (`Card.test.ts` measures all
+8 brands × both modes). This is the identical substitution `Button`'s outline variant makes, for the
+identical reason — see `resolveCardVariant`'s doc comment.
+
+`flat` and `elevated` render no border at all, so their near-identical background vs. `bg.canvas`
+(also ~1.0–1.4:1) is not a WCAG 1.4.11 concern: there is no boundary being asserted, and this
+matches the shadcn aesthetic where an un-bordered surface reads as a subtle grouping, not a hard
+edge. `elevated` additionally separates itself with a shadow, not a colour jump.
+
+## Accessibility contract (WCAG)
+
+- **No `accessibilityRole`.** `Card` is a plain grouping container with no interaction and no text
+  of its own — there is nothing here for assistive tech to announce beyond its children, so the
+  *correct* role (rule 8) is none, exactly like an unstyled `View`. Children carry their own
+  semantics.
+- **1.4.11** — the only rendered non-text boundary (`outline`'s border) clears ≥ 3:1 against
+  `bg.canvas`, measured for all 8 brands × both modes (`Card.test.ts`).
+- **1.4.3** — N/A. Card renders no text; contrast for whatever a consumer places in `children` is
+  that content's own responsibility, same as `Button.test.ts` only measures what Button itself
+  renders.
+- **2.3.3 (reduced motion)** — N/A. Card has no animation.
+- **Touch target (2.5.x)** — N/A. Card is not interactive; it has no press handler to reach 44dp.
+
+## Patterns copied from `button/` (the reference module)
+
+1. **Structure vs colour split.** Static/theme-numeric structure (padding, radius, border *width*)
+   → `createThemedVariants` (registered once per theme). Colour → resolved from role tokens per
+   `variant`, applied inline. Elevation (a shadow, not a role colour) is applied directly from
+   `theme.elevation.md` — spread as-is, never re-derived.
+2. **Pure, testable resolver** in `Card.variants.ts` (no React) so the WCAG contract is
+   unit-tested by measuring real palettes — never eyeballed.
+3. **Closed union only** (`variant`), `style: LayoutStyle` last and once, no `{...rest}`, no
+   internals receiving consumer style.
+
+## Known gaps
+
+None — no icon, no new theme token, no new core helper needed for this component.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `CardImpl` internally, exported as `Card = memo(CardImpl)`. Renders only a `View` around consumer-supplied `children` — no library child component, nothing to memoize.

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

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/card`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The variant resolver (`resolveCardVariant`, `cardStructure`) stays
+ * internal — a consumer configures a Card through its props, never by importing its internals.
+ */
+
+export { Card } from "./Card.js";
+//# sourceMappingURL=index.js.map

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

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

package/lib/module/modules/checkbox/Checkbox.js

@@ -0,0 +1,115 @@
+"use strict";
+
+/**
+ * Checkbox — a Pressable custom box (React Native ships no native `Checkbox`/`Switch` equivalent
+ * with tri-state support). Every state — unchecked, checked, indeterminate, disabled — maps to a
+ * role-coloured pairing proven ≥ 3:1 / ≥ 4.5:1 across every brand × mode, same discipline as
+ * `Button`.
+ */
+
+import { memo, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { CHECKBOX_SIZES, checkboxBoxStructure, checkboxRowStructure, resolveCheckboxAccessibility, resolveCheckboxColors } from "./Checkbox.variants.js";
+
+/** A checkbox with a visible label. `accessibilityLabel` defaults to `label`. Pressing the label
+ * toggles too — it lives inside the same `Pressable` row as the box. */
+
+/**
+ * A checkbox with no visible label (e.g. a table row's select-all box). It has no visible text, so
+ * `accessibilityLabel` is REQUIRED at the type level — the same trap `Button`'s icon-only shape
+ * closes. `label?: never` makes the two shapes mutually exclusive.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+// The focus ring sits a small gap OUTSIDE the box, because `border.focus` is the role token proven
+// ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over the filled box its contrast isn't guaranteed.
+const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_GAP = 2;
+function CheckboxImpl(props) {
+  const {
+    checked,
+    onCheckedChange,
+    indeterminate = false,
+    disabled = false,
+    size = "md",
+    style,
+    testID,
+    label,
+    accessibilityLabel
+  } = props;
+  const theme = useTheme();
+  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const [focused, setFocused] = useState(false);
+  const spec = CHECKBOX_SIZES[size];
+  const colors = resolveCheckboxColors(theme.colors);
+  const a11y = resolveCheckboxAccessibility({
+    label,
+    accessibilityLabel,
+    checked,
+    indeterminate,
+    disabled
+  });
+  const filled = checked || indeterminate;
+  const handlePress = () => {
+    if (disabled) return;
+    onCheckedChange(!checked);
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: a11y.accessibilityLabel,
+    accessibilityState: a11y.accessibilityState,
+    disabled: a11y.disabled,
+    onPress: handlePress,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    hitSlop: spec.hitSlop,
+    style: [checkboxRowStructure(theme), disabled && styles.dimmed, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [checkboxBoxStructure(theme, {
+        size
+      }), {
+        borderColor: filled ? colors.fill : colors.border,
+        backgroundColor: filled ? colors.fill : "transparent"
+      }],
+      children: [focused && /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: "checkbox-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.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+        }
+      }), filled && /*#__PURE__*/_jsx(Icon, {
+        name: indeterminate ? "minus" : "check",
+        size: spec.iconSize,
+        color: colors.icon,
+        strokeWidth: ICON_STROKE
+      })]
+    }), label !== undefined && /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: spec.fontSize,
+        color: colors.label
+      }],
+      children: label
+    })]
+  });
+}
+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
+  }
+});
+
+// A consumer's screen re-renders far more often than Checkbox's own props change — memo is near-free
+// insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+export const Checkbox = /*#__PURE__*/memo(CheckboxImpl);
+//# sourceMappingURL=Checkbox.js.map

package/lib/module/modules/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useState","Pressable","StyleSheet","Text","View","Icon","useTheme","CHECKBOX_SIZES","checkboxBoxStructure","checkboxRowStructure","resolveCheckboxAccessibility","resolveCheckboxColors","jsx","_jsx","jsxs","_jsxs","ICON_STROKE","FOCUS_RING_WIDTH","FOCUS_RING_GAP","CheckboxImpl","props","checked","onCheckedChange","indeterminate","disabled","size","style","testID","label","accessibilityLabel","theme","focused","setFocused","spec","colors","a11y","filled","handlePress","accessibilityRole","accessibilityState","onPress","onFocus","onBlur","hitSlop","styles","dimmed","children","borderColor","fill","border","backgroundColor","pointerEvents","position","top","left","right","bottom","borderWidth","focus","borderRadius","radii","sm","name","iconSize","color","icon","strokeWidth","undefined","fontStyleForWeight","fontWeights","regular","fontSize","create","opacity","Checkbox"],"sourceRoot":"../../../../src","sources":["modules/checkbox/Checkbox.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/checkbox/Checkbox.variants.js

@@ -0,0 +1,122 @@
+"use strict";
+
+/**
+ * Checkbox's style + behaviour resolution — the pure functions the component (and its tests) depend
+ * on, plus the themed structural variant resolvers.
+ *
+ * The split every sibling module copies (see `Button.variants.ts`):
+ *  - STRUCTURE (box size, radius, border WIDTH, row gap) lives in the two `createThemedVariants`
+ *    resolvers below — static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveCheckboxColors`), never a raw ramp,
+ *    never a hardcoded hex. Unlike Button's `tone`, a checkbox has no per-instance colour choice —
+ *    every state (unchecked / checked / indeterminate) maps to exactly one role pairing, so the
+ *    resolver takes no selector argument.
+ *  - ACCESSIBILITY prop derivation is `resolveCheckboxAccessibility`, kept pure so the
+ *    "indeterminate reports mixed / disabled blocks the toggle" 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` and `Button.variants.ts` do).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * Same touch-target floor as `Button` (44dp, WCAG 2.5.5 AAA). Duplicated rather than imported —
+ * modules never import across `src/modules/*` — so this is the component's own copy.
+ */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = dimension => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - dimension) / 2));
+/**
+ * Checkbox-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
+ * test can assert `boxSize + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export const CHECKBOX_SIZES = {
+  sm: {
+    boxSize: 16,
+    iconSize: 12,
+    fontSize: 14,
+    hitSlop: slopFor(16)
+  },
+  md: {
+    boxSize: 20,
+    iconSize: 14,
+    fontSize: 16,
+    hitSlop: slopFor(20)
+  }
+};
+/**
+ * Maps the checkbox's states onto role colours. There is no `tone`/`color` prop to widen — every
+ * colour a checkbox can show is one of these role lookups, guaranteed legible in both modes and
+ * never an off-palette value an app invented (same reasoning as `resolveButtonTone`, minus the
+ * selector: a checkbox has exactly one accent identity, not a closed union of them).
+ */
+export function resolveCheckboxColors(colors) {
+  return {
+    border: colors.border.interactive,
+    fill: colors.accent.solid,
+    icon: colors.accent.onSolid,
+    label: colors.fg.default
+  };
+}
+/**
+ * Derives the accessibility surface once, purely, so the contract is testable without a renderer:
+ *  - `indeterminate` reports `"mixed"` over the literal `checked` value — regardless of `checked` —
+ *    because a screen reader must hear the tri-state, not a stale boolean (matches the visual: the
+ *    "minus" glyph also wins over "check" whenever `indeterminate` is true).
+ *  - `disabled` blocks the toggle (the `Pressable disabled` prop), so `accessibilityState.disabled`
+ *    always matches what actually renders.
+ */
+export function resolveCheckboxAccessibility(input) {
+  const isDisabled = input.disabled === true;
+  return {
+    accessibilityRole: "checkbox",
+    accessibilityLabel: input.accessibilityLabel ?? input.label,
+    accessibilityState: {
+      checked: input.indeterminate === true ? "mixed" : input.checked,
+      disabled: isDisabled
+    },
+    disabled: isDisabled
+  };
+}
+
+/**
+ * Structural row styles — layout only, no colour. Applied to the outermost `Pressable`, before the
+ * consumer's own `style` (last, once). Fixed regardless of `size`: the box (below) is what scales.
+ */
+export const checkboxRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[2]
+  }
+}));
+
+/**
+ * Structural box styles — size, radius, border WIDTH. No colours: border/fill colour is
+ * checked-state-driven and applied inline over this, same split as `buttonStructure`. Compiles once
+ * per theme identity via the `WeakMap`-cached themed resolver, never rebuilds per render.
+ */
+export const checkboxBoxStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.sm,
+    borderWidth: theme.borderWidths.thick
+  },
+  variants: {
+    size: {
+      sm: {
+        width: CHECKBOX_SIZES.sm.boxSize,
+        height: CHECKBOX_SIZES.sm.boxSize
+      },
+      md: {
+        width: CHECKBOX_SIZES.md.boxSize,
+        height: CHECKBOX_SIZES.md.boxSize
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}));
+//# sourceMappingURL=Checkbox.variants.js.map

package/lib/module/modules/checkbox/Checkbox.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","slopFor","dimension","Math","max","ceil","CHECKBOX_SIZES","sm","boxSize","iconSize","fontSize","hitSlop","md","resolveCheckboxColors","colors","border","interactive","fill","accent","solid","icon","onSolid","label","fg","default","resolveCheckboxAccessibility","input","isDisabled","disabled","accessibilityRole","accessibilityLabel","accessibilityState","checked","indeterminate","checkboxRowStructure","theme","base","flexDirection","alignItems","columnGap","space","checkboxBoxStructure","justifyContent","borderRadius","radii","borderWidth","borderWidths","thick","variants","size","width","height","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/checkbox/Checkbox.variants.ts"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,76 @@
+# checkbox/ — a Pressable tri-state checkbox (checked / unchecked / indeterminate)
+
+React Native ships no native `Checkbox`. `Checkbox` is a custom `Pressable` box that follows the same
+structure/colour/accessibility split as the reference module, `Button` — see `button/MODULE.md` for
+the pattern rationale.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Checkbox.tsx` | The component. Composition, a11y wiring, focus ring, label press-through, disabled. |
+| `Checkbox.variants.ts` | Pure resolvers (`CHECKBOX_SIZES`, `resolveCheckboxColors`, `resolveCheckboxAccessibility`) + the themed structural resolvers `checkboxRowStructure` / `checkboxBoxStructure`. No React, no lucide. |
+| `index.ts` | Public surface: `Checkbox`, `CheckboxProps`, `CheckboxSize`. |
+| `__tests__/Checkbox.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/Checkbox.render.test.tsx` | Render: states, press-toggle (box and label), disabled, indeterminate, focus ring. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `checked` | `boolean` | — | Controlled; the component holds no state of its own. |
+| `onCheckedChange` | `(checked: boolean) => void` | — | Called with `!checked` on press. Not called while `disabled`. |
+| `indeterminate` | `boolean` | `false` | Renders "minus" instead of "check" and reports `accessibilityState.checked` as `"mixed"` — **regardless of `checked`**. The usual pairing is `checked={false}`, but indeterminate always wins the glyph/state either way. |
+| `label` | `string` | — | Rendered beside the box, inside the same `Pressable` row — pressing the label toggles too. Required unless unlabelled (see below). |
+| `disabled` | `boolean` | `false` | Dimmed; blocks the toggle. |
+| `size` | `sm \| md` | `md` | 16 / 20 dp box; both reach 44dp via `hitSlop`. |
+| `accessibilityLabel` | `string` | `label` | **Required** when there is no visible `label` (type-enforced). |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | |
+
+`CheckboxProps` is a discriminated union: a labelled checkbox OR an unlabelled one (`label?: never` +
+required `accessibilityLabel`) — the same shape `Button` uses for icon-only buttons, so an
+unlabelled checkbox (e.g. a table row's select-all box) can never ship without an accessible name.
+
+There is no `variant`/`tone` prop: unlike Button, a checkbox has exactly one accent identity, not a
+closed union of them — `resolveCheckboxColors` takes no selector argument.
+
+## Accessibility contract (WCAG)
+
+- `accessibilityRole="checkbox"`, `accessibilityState.checked` is `true | false | "mixed"`,
+  `accessibilityState.disabled` mirrors the `disabled` prop.
+- **2.5.5 / 2.5.8 target size** — both sizes reach ≥ 44 dp via `hitSlop` on the `Pressable` row (the
+  box stays 16/20dp; the touch area grows around it).
+- **1.4.11** — the unchecked box boundary is `border.interactive` (≥ 3:1 on the canvas, every
+  brand × mode); the checked/indeterminate fill (`accent.solid`) is its own boundary against the
+  canvas, also measured ≥ 3:1.
+- **Non-text contrast** — the check/minus glyph (`accent.onSolid`) on the fill clears ≥ 3:1 (in
+  practice it clears the stronger 4.5:1 text minimum too, since it's the same derived on-fill colour
+  `Button` uses for labels).
+- **1.4.3** — the label reads `fg.default` on the canvas, ≥ 4.5:1.
+- **2.4.7 / 2.4.11** — a visible focus ring (`border.focus`) appears around the box on keyboard /
+  external-keyboard / AT focus (`onFocus`/`onBlur`), offset outside the box for the same reason
+  Button's ring sits outside its fill: `border.focus`'s ≥ 3:1 proof is against the canvas, not a
+  solid fill.
+- Pressing the box **or** the label toggles — both live inside one `Pressable` row, not two
+  separate touch targets.
+
+## Patterns copied from `Button` (the reference module)
+
+1. **Structure vs colour split.** Static/theme-numeric structure (box size, radius, border *width*,
+   row gap) → `createThemedVariants`, registered once per theme. Colour → resolved from role tokens,
+   applied inline. Focus → one `border.focus` ring offset onto the canvas.
+2. **Pure, testable resolvers** in `Checkbox.variants.ts` (no React/lucide) so the WCAG + behaviour
+   contract is unit-tested by measuring real palettes — never eyeballed.
+3. **Closed shape, no `{...rest}`**, `style: LayoutStyle` last and once, icon selection is a NAME
+   (`"check" | "minus"`) from the shared `core/icon` registry, never a new glyph.
+4. **Type-enforced a11y** — make the unlabelled-with-no-accessible-name state unrepresentable.
+
+## Known gaps
+
+- No animation (press scrim, checked transition) — a checkbox's state change is instant, so no
+  `useReducedMotion` handling is needed (WCAG 2.3.3 doesn't apply: there's nothing that moves).
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `CheckboxImpl` internally, exported as `Checkbox = memo(CheckboxImpl)`. Its one child, `Icon`, only ever receives primitives — nothing to memoize.

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["Checkbox"],"sourceRoot":"../../../../src","sources":["modules/checkbox/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,eAAY","ignoreList":[]}

package/lib/module/modules/divider/Divider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+/**
+ * Divider — a single hairline separator between sections of content. Purely decorative: it carries
+ * no information of its own, so `accessibilityRole="none"` keeps it out of the accessibility tree
+ * (the same "no role" conclusion `Card` documents for its own plain-`View` container — see
+ * `Card.tsx` — made explicit here since, unlike `Card`, a divider has no children to carry meaning).
+ */
+
+import { memo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+import { dividerStructure, resolveDividerColor } from "./Divider.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function DividerImpl({
+  orientation = "horizontal",
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessibilityRole: "none",
+    style: [dividerStructure(theme, {
+      orientation
+    }), {
+      backgroundColor: resolveDividerColor(theme.colors)
+    }, style]
+  });
+}
+
+// A consumer's screen re-renders far more often than Divider's own props change — memo is near-free
+// insurance for a design-system primitive (see CLAUDE.md "Performance" section).
+export const Divider = /*#__PURE__*/memo(DividerImpl);
+//# sourceMappingURL=Divider.js.map

package/lib/module/modules/divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","View","useTheme","dividerStructure","resolveDividerColor","jsx","_jsx","DividerImpl","orientation","style","testID","theme","accessibilityRole","backgroundColor","colors","Divider"],"sourceRoot":"../../../../src","sources":["modules/divider/Divider.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,IAAI,QAAQ,cAAc;AAGnC,SAASC,QAAQ,QAAQ,sBAAa;AAEtC,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU3E,SAASC,WAAWA,CAAC;EAAEC,WAAW,GAAG,YAAY;EAAEC,KAAK;EAAEC;AAAqB,CAAC,EAAE;EAChF,MAAMC,KAAK,GAAGT,QAAQ,CAAC,CAAC;EAExB,oBACEI,IAAA,CAACL,IAAI;IACHS,MAAM,EAAEA,MAAO;IACfE,iBAAiB,EAAC,MAAM;IACxBH,KAAK,EAAE,CACLN,gBAAgB,CAACQ,KAAK,EAAE;MAAEH;IAAY,CAAC,CAAC,EACxC;MAAEK,eAAe,EAAET,mBAAmB,CAACO,KAAK,CAACG,MAAM;IAAE,CAAC,EACtDL,KAAK;EACL,CACH,CAAC;AAEN;;AAEA;AACA;AACA,OAAO,MAAMM,OAAO,gBAAGf,IAAI,CAACO,WAAW,CAAC","ignoreList":[]}

package/lib/module/modules/divider/Divider.variants.js

@@ -0,0 +1,51 @@
+"use strict";
+
+/**
+ * Divider's style resolution — same split as `Card.variants` / `Button.variants`:
+ *  - STRUCTURE (the hairline's thickness on the cross axis) lives in the themed `dividerStructure`
+ *    resolver, static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveDividerColor`, never a raw ramp
+ *    and never a hardcoded hex.
+ *
+ * Free of React, so the colour-resolution test imports this directly (mocking only `react-native`'s
+ * `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * Maps the divider onto the theme's role colours. `colors.border.default` — the decorative rung,
+ * deliberately NOT `colors.border.interactive` — is the correct choice here: a divider draws no
+ * interactive boundary and conveys no information of its own (removing it changes spacing, not
+ * meaning), and WCAG 1.4.11 binds only a "User Interface Component" or a "Graphical Object …
+ * required to understand the content" — neither of which a decorative separator is. It measures
+ * ~1.0–1.4:1 against `bg.canvas` on every brand × mode (see `Card.variants.ts`'s identical note for
+ * its own un-bordered variants) — that is the intended subtle shadcn-style rule, not an oversight,
+ * which is why this module's tests assert the mapping rather than gating it at 3:1.
+ */
+export function resolveDividerColor(colors) {
+  return colors.border.default;
+}
+
+/**
+ * Structural styles only — the hairline's thickness on the theme's `borderWidths` scale, spanning
+ * the full cross axis. No colour (resolved separately, applied inline over this), so this compiles
+ * once per theme identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const dividerStructure = createThemedVariants(theme => ({
+  variants: {
+    orientation: {
+      horizontal: {
+        height: theme.borderWidths.thin,
+        width: "100%"
+      },
+      vertical: {
+        width: theme.borderWidths.thin,
+        alignSelf: "stretch"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+}));
+//# sourceMappingURL=Divider.variants.js.map

package/lib/module/modules/divider/Divider.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","resolveDividerColor","colors","border","default","dividerStructure","theme","variants","orientation","horizontal","height","borderWidths","thin","width","vertical","alignSelf","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/divider/Divider.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,oBAAoB,QAAQ,2BAAkB;AAIvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAACC,MAAkB,EAAU;EAC9D,OAAOA,MAAM,CAACC,MAAM,CAACC,OAAO;AAC9B;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGL,oBAAoB,CAAEM,KAAY,KAAM;EACtEC,QAAQ,EAAE;IACRC,WAAW,EAAE;MACXC,UAAU,EAAE;QAAEC,MAAM,EAAEJ,KAAK,CAACK,YAAY,CAACC,IAAI;QAAEC,KAAK,EAAE;MAAO,CAAC;MAC9DC,QAAQ,EAAE;QAAED,KAAK,EAAEP,KAAK,CAACK,YAAY,CAACC,IAAI;QAAEG,SAAS,EAAE;MAAU;IACnE;EACF,CAAC;EACDC,eAAe,EAAE;IAAER,WAAW,EAAE;EAAa;AAC/C,CAAC,CAAC,CAAC","ignoreList":[]}