pixelize-native-library 1.0.6

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

@@ -0,0 +1,88 @@
+# stepper/ — horizontal multi-step progress display
+
+`Stepper` renders a horizontal row of numbered circles connected by lines (checkout/onboarding:
+"Step 2 of 4"), each with a label underneath. v1 is deliberately **display-only** — no `onPress`,
+no `onStepPress` — a small surface per spec, not a step navigator.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Stepper.tsx` | The component. Composition + a11y wiring only — no press/focus/animation logic. |
+| `Stepper.variants.ts` | Pure resolvers (`resolveStepState`, `resolveStepCircleColors`, `resolveStepLabelColor`, `resolveStepConnectorColor`, `resolveStepperAccessibility`) + the structural variant resolvers `stepCircleStructure`, `stepLabelStructure`, `stepConnectorLineStructure`. No React, no lucide. |
+| `index.ts` | Public surface: `Stepper`, `StepperProps`, `StepperStep`. |
+| `__tests__/Stepper.test.ts` | Pure: state arithmetic, WCAG contrast (all brands × modes), accessibility-summary contract. |
+| `__tests__/Stepper.render.test.tsx` | Render: labels/numbers render, single collapsed `progressbar` node, per-state circle colour, consumer `style` applies last. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `steps` | `{ label: string }[]` | — | Required. Rendered left→right in array order. |
+| `activeStep` | `number` | — | Required, 0-indexed. `0` is the first step. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`; each circle gets `${testID}-circle-${index}` when set. |
+
+No `onPress`/`onStepPress` — intentionally out of scope for v1 (see spec). No `color`/`tone` prop:
+every colour a step can show is one of exactly three states, resolved from role tokens (below).
+
+## Step states
+
+A step is one of three states, derived by pure index arithmetic (`resolveStepState`):
+
+| State | When | Circle | Label |
+|-------|------|--------|-------|
+| `completed` | `index < activeStep` | `accent.solid` fill, `accent.onSolid` number | `fg.default` |
+| `active` | `index === activeStep` | same as `completed` (both are "reached", per spec) | `fg.default` |
+| `upcoming` | `index > activeStep` | `bg.sunken` fill, `fg.muted` number | `fg.muted` |
+
+The connector between step `index` and `index + 1` (`resolveStepConnectorColor`) is `accent.solid`
+while `index < activeStep` (a reached segment), else the decorative `border.default` — matching the
+spec's "accent.solid up to the active step, border.default beyond it". Each step column draws its
+own leading + trailing connector half so a circle stays centered under its label regardless of
+label length, rather than centered between two circles' worth of connector; `Stepper.tsx` colours
+both halves from the same function so they always agree.
+
+## Accessibility contract (WCAG)
+
+- **4.1.2** — the whole row is ONE accessible node (`accessible` on the container), same collapsing
+  idiom `Badge` uses for its icon + label: a screen reader gets a single summary announcement
+  instead of reading every circle and label individually.
+- `accessibilityRole="progressbar"`, `accessibilityValue={{ min: 0, max: steps.length - 1, now:
+  activeStep }}` — the raw 0-indexed progress triple (floors `max` at 0 for a single-step stepper).
+- `accessibilityLabel` is a natural-language summary, e.g. `"Step 2 of 4: Shipping"` — the 1-based
+  ordinal plus the active step's label (omits the `: <label>` suffix, never a dangling colon, if
+  `activeStep` has no matching step).
+- **1.4.3** — every step-number-on-circle and label-on-canvas pairing is measured ≥ 4.5:1 for all 3
+  states × 8 brands × both modes (`Stepper.test.ts`); `completed`/`active` are asserted to read
+  identically, per spec.
+- **1.4.11** — the reached connector (`accent.solid`) is measured ≥ 3:1 against the canvas for all
+  8 brands × both modes. The not-yet-reached connector (`border.default`) has no 3:1 gate by design
+  — same reasoning `Divider.variants.ts` documents for its own decorative hairline: it conveys no
+  information the numbered circles don't already carry, so WCAG 1.4.11 (which binds only a "User
+  Interface Component" or a required "Graphical Object") does not apply to it.
+- No touch target / `hitSlop`, no focus ring, no reduced-motion handling — Stepper is
+  non-interactive (no `Pressable`) and has no animation to suppress, same as `Badge`/`Divider`.
+
+## Patterns copied from Button (the reference module) and Badge
+
+1. **Structure vs colour split.** Circle diameter/radius and label spacing → `createThemedVariants`
+   / `createThemedTextVariants` (registered once per theme). The connector's own fixed height has
+   no theme dependency, so it uses untethemed `createVariants` instead — same reasoning
+   `RadioGroup.variants.ts` documents for `radioDotStructure`. Colour is state-driven, resolved from
+   role tokens, applied inline.
+2. **Pure, testable resolvers** in `Stepper.variants.ts` (no React/lucide) so the WCAG + state
+   contract is unit-tested against real palettes — never eyeballed.
+3. **Closed state, not a closed union prop.** There is no `tone`/`variant` prop to widen; a step's
+   appearance is entirely derived from `activeStep` vs its own index.
+4. `style: LayoutStyle` last and once, no `{...rest}`.
+
+## Known gaps
+
+- v1 is display-only by spec — no `onStepPress`/interactive step navigation. A future version
+  adding that would need its own accessibility pass (per-step `button` role, focus order) rather
+  than bolting `onPress` onto the current single-collapsed-node contract.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). The `steps.map()` renders host `View`/`Text` directly, no library child component — nothing to memoize.

package/lib/module/modules/stepper/Stepper.js

@@ -0,0 +1,100 @@
+"use strict";
+
+/**
+ * Stepper — a horizontal, multi-step progress DISPLAY (checkout/onboarding: "Step 2 of 4"). v1 is
+ * deliberately non-interactive: no `onPress`, no `onStepPress` — a small, display-only surface, per
+ * spec. The whole row collapses into ONE `progressbar`-role accessible node (`accessible` on the
+ * container) so a screen reader gets a single summary announcement instead of reading every circle
+ * and label individually, the same collapsing idiom `Badge` uses for its icon + label.
+ *
+ * Each step is its own `flex: 1` column so the circles stay evenly spaced regardless of label
+ * length; the connector to the NEXT step is drawn as two identically-coloured halves — the trailing
+ * half of this column, the leading half of the next — so a circle stays centered under its own
+ * label rather than centered between two circles' worth of connector.
+ */
+
+import { memo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../theme/index.js";
+import { resolveStepCircleColors, resolveStepConnectorColor, resolveStepLabelColor, resolveStepState, resolveStepperAccessibility, stepCircleStructure, stepConnectorLineStructure, stepLabelStructure } from "./Stepper.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Stepper = /*#__PURE__*/memo(function Stepper({
+  steps,
+  activeStep,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const a11y = resolveStepperAccessibility({
+    steps,
+    activeStep
+  });
+  const lastIndex = steps.length - 1;
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityValue: a11y.accessibilityValue,
+    accessibilityLabel: a11y.accessibilityLabel,
+    style: [styles.row, style],
+    children: steps.map((step, index) => {
+      const state = resolveStepState(index, activeStep);
+      const circleColors = resolveStepCircleColors(theme.colors, state);
+      const labelColor = resolveStepLabelColor(theme.colors, state);
+      // No segment exists before the first circle or after the last — a transparent spacer keeps
+      // every circle centered in its column via the same left/right flex split as every other one.
+      const leadingConnector = index === 0 ? "transparent" : resolveStepConnectorColor(theme.colors, index - 1, activeStep);
+      const trailingConnector = index === lastIndex ? "transparent" : resolveStepConnectorColor(theme.colors, index, activeStep);
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.column,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.connectorRow,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [stepConnectorLineStructure(), {
+              backgroundColor: leadingConnector
+            }]
+          }), /*#__PURE__*/_jsx(View, {
+            testID: testID === undefined ? undefined : `${testID}-circle-${index}`,
+            style: [stepCircleStructure(theme), {
+              backgroundColor: circleColors.fill
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+                fontSize: theme.fontSizes.sm,
+                color: circleColors.text
+              }],
+              children: index + 1
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: [stepConnectorLineStructure(), {
+              backgroundColor: trailingConnector
+            }]
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: [stepLabelStructure(theme), theme.fontStyleForWeight(theme.fontWeights.medium), {
+            fontSize: theme.fontSizes.xs,
+            color: labelColor
+          }],
+          children: step.label
+        })]
+      }, index);
+    })
+  });
+});
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  column: {
+    flex: 1,
+    alignItems: "center"
+  },
+  connectorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%"
+  }
+});
+//# sourceMappingURL=Stepper.js.map

package/lib/module/modules/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","StyleSheet","Text","View","useTheme","resolveStepCircleColors","resolveStepConnectorColor","resolveStepLabelColor","resolveStepState","resolveStepperAccessibility","stepCircleStructure","stepConnectorLineStructure","stepLabelStructure","jsx","_jsx","jsxs","_jsxs","Stepper","steps","activeStep","style","testID","theme","a11y","lastIndex","length","accessible","accessibilityRole","accessibilityValue","accessibilityLabel","styles","row","children","map","step","index","state","circleColors","colors","labelColor","leadingConnector","trailingConnector","column","connectorRow","backgroundColor","undefined","fill","fontStyleForWeight","fontWeights","semibold","fontSize","fontSizes","sm","color","text","numberOfLines","medium","xs","label","create","flexDirection","alignItems","flex","width"],"sourceRoot":"../../../../src","sources":["modules/stepper/Stepper.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/stepper/Stepper.variants.js

@@ -0,0 +1,146 @@
+"use strict";
+
+/**
+ * Stepper's pure resolvers + the themed/untethemed structural variant resolvers — the same split
+ * every sibling module follows (see `Button.variants.ts`):
+ *  - STRUCTURE (circle diameter, connector height, the pill radius, label spacing) lives in the
+ *    resolvers below — `createThemedVariants` where a value comes off the theme scale (the circle's
+ *    `radii.full`, the label's `space[2]` gap), `createVariants` where it doesn't (the connector's
+ *    own fixed height, same reasoning `RadioGroup.variants.ts` documents for `radioDotStructure`).
+ *    Both are registered once per identity, never rebuilt per render.
+ *  - COLOUR is state-driven, never a raw ramp and never a hardcoded hex. A step has no `tone`/
+ *    `variant` prop to widen — it is one of exactly three states (`resolveStepState`), and every
+ *    colour it can show is a role lookup off that state (`resolveStepCircleColors`,
+ *    `resolveStepLabelColor`, `resolveStepConnectorColor`).
+ *  - ACCESSIBILITY is `resolveStepperAccessibility`, kept pure so the single-summary-announcement
+ *    contract ("Step 2 of 4: …") is unit-testable without rendering React Native.
+ *
+ * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
+ */
+
+import { createThemedVariants, createThemedTextVariants, createVariants } from "../../core/style/index.js";
+/**
+ * Visual diameter of a step's numbered circle, in dp. Not a touch target — Stepper is a v1
+ * DISPLAY-only component with no `onPress` (no `onStepPress` either — see `StepperProps`), so the
+ * 44dp floor other interactive modules hold themselves to (see `Button`'s `MIN_TOUCH_TARGET`) does
+ * not apply here, the same reasoning `Badge`/`Avatar` document for their own non-interactive boxes.
+ */
+export const STEP_CIRCLE_DIAMETER = 28;
+
+/** The connector line's thickness, in dp. A fixed design constant, not on the theme's border scale. */
+export const CONNECTOR_HEIGHT = 2;
+
+/**
+ * A step is "completed" strictly before `activeStep`, "active" AT `activeStep`, or "upcoming"
+ * strictly after it. Pure index arithmetic — no theme dependency — so the render layer and the
+ * tests share one source of truth for which of the three states a given index resolves to.
+ */
+export function resolveStepState(index, activeStep) {
+  if (index < activeStep) return "completed";
+  if (index === activeStep) return "active";
+  return "upcoming";
+}
+/**
+ * Maps a step's state onto role colours for its circle. Completed and active read IDENTICALLY (per
+ * spec — both are "reached" steps): the accent-filled circle with its derived on-colour number.
+ * Upcoming reads as the quiet neutral `bg.sunken` fill with the `fg.muted` number. There is no
+ * `tone` prop to widen: every colour a step circle can show is one of these two role lookups,
+ * guaranteed legible in both modes and never an off-palette value an app invented.
+ */
+export function resolveStepCircleColors(colors, state) {
+  if (state === "upcoming") return {
+    fill: colors.bg.sunken,
+    text: colors.fg.muted
+  };
+  return {
+    fill: colors.accent.solid,
+    text: colors.accent.onSolid
+  };
+}
+
+/**
+ * The label below a reached step (completed/active) is the primary `fg.default`; an upcoming
+ * step's label is the quieter `fg.muted` — mirroring the same reached/upcoming split the circle
+ * uses, so the label's emphasis never contradicts its circle. Both rungs are already measured
+ * against `bg.canvas` elsewhere in this library (`Input`/`Select`/`Textarea` for `fg.muted`), and
+ * `Stepper.test.ts` measures them again here, for this component's own actual pairing.
+ */
+export function resolveStepLabelColor(colors, state) {
+  return state === "upcoming" ? colors.fg.muted : colors.fg.default;
+}
+
+/**
+ * The connector segment between step `index` and step `index + 1`: solid accent up to (and
+ * including the approach into) the active step, the neutral decorative `border.default` beyond it —
+ * matching the spec's "accent.solid up to the active step, border.default beyond it". Split into
+ * two identically-coloured halves by `Stepper.tsx` (the trailing half of column `index`, the
+ * leading half of column `index + 1`) so the circle stays centered under its label regardless of
+ * label length — this function only ever answers for ONE logical segment, so both halves agree.
+ */
+export function resolveStepConnectorColor(colors, index, activeStep) {
+  return index < activeStep ? colors.accent.solid : colors.border.default;
+}
+/**
+ * Derives ONE summary announcement for the whole stepper — "Step 2 of 4: <label>" — instead of
+ * letting a screen reader step through every circle and label individually (kept pure so the
+ * wording is unit-tested without a renderer; `Stepper.tsx` pairs this with `accessible` on the
+ * container, the same collapsing idiom `Badge` uses for its icon + label). `activeStep` is
+ * 0-indexed internally; the announcement surfaces the natural 1-based ordinal, and
+ * `accessibilityValue` surfaces the raw 0-indexed `min`/`max`/`now` progress triple.
+ */
+export function resolveStepperAccessibility(input) {
+  const {
+    steps,
+    activeStep
+  } = input;
+  const activeLabel = steps[activeStep]?.label;
+  const summary = `Step ${activeStep + 1} of ${steps.length}` + (activeLabel === undefined ? "" : `: ${activeLabel}`);
+  return {
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: Math.max(steps.length - 1, 0),
+      now: activeStep
+    },
+    accessibilityLabel: summary
+  };
+}
+
+/**
+ * The numbered circle's structure — diameter + full radius, the same `radii.full` idiom `Avatar`
+ * uses (a finite 9999, not `Infinity` — RN rejects non-finite style values) to clip a square box to
+ * a perfect circle. No colour (state-driven, applied inline over this), so this compiles once per
+ * theme identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const stepCircleStructure = createThemedVariants(theme => ({
+  base: {
+    width: STEP_CIRCLE_DIAMETER,
+    height: STEP_CIRCLE_DIAMETER,
+    borderRadius: theme.radii.full,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+/** The label's gap under its circle — on the theme's spacing scale, so it's themed. */
+export const stepLabelStructure = createThemedTextVariants(theme => ({
+  base: {
+    marginTop: theme.space[2],
+    textAlign: "center"
+  }
+}));
+
+/**
+ * One connector half's structure — a flex-filled hairline. `CONNECTOR_HEIGHT` has no theme
+ * dependency (the component's own fixed design constant, not on the theme's border scale), so this
+ * uses the untethemed `createVariants` rather than `createThemedVariants` — same reasoning
+ * `RadioGroup.variants.ts` documents for `radioDotStructure`.
+ */
+export const stepConnectorLineStructure = createVariants({
+  base: {
+    flex: 1,
+    height: CONNECTOR_HEIGHT
+  }
+});
+//# sourceMappingURL=Stepper.variants.js.map

package/lib/module/modules/stepper/Stepper.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","createThemedTextVariants","createVariants","STEP_CIRCLE_DIAMETER","CONNECTOR_HEIGHT","resolveStepState","index","activeStep","resolveStepCircleColors","colors","state","fill","bg","sunken","text","fg","muted","accent","solid","onSolid","resolveStepLabelColor","default","resolveStepConnectorColor","border","resolveStepperAccessibility","input","steps","activeLabel","label","summary","length","undefined","accessibilityRole","accessibilityValue","min","max","Math","now","accessibilityLabel","stepCircleStructure","theme","base","width","height","borderRadius","radii","full","alignItems","justifyContent","stepLabelStructure","marginTop","space","textAlign","stepConnectorLineStructure","flex"],"sourceRoot":"../../../../src","sources":["modules/stepper/Stepper.variants.ts"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,65 @@
+# switch/ — a themed wrapper over React Native's native Switch
+
+`Switch` re-themes React Native's own `<Switch>` rather than hand-building a track/thumb — the
+native primitive already ships correct per-platform toggle semantics, so this module only maps its
+two colours onto ROLE tokens and leaves sizing/animation to RN.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Switch.tsx` | The component. Wraps RN's `Switch`, wires theme colours + accessibility + `hitSlop`. |
+| `Switch.variants.ts` | Pure resolvers (`resolveSwitchColors`, `resolveSwitchAccessibility`) + the `SWITCH_HIT_SLOP` touch-target constant. No React. |
+| `index.ts` | Public surface: `Switch`, `SwitchProps`. |
+| `__tests__/Switch.test.ts` | Pure: WCAG non-text contrast (all brands × modes) + touch target + a11y contract. |
+| `__tests__/Switch.render.test.tsx` | Render: on/off → `accessibilityState.checked`, disabled wiring, toggle calls `onValueChange`. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `value` | `boolean` | — | Required. Controlled — RN's own controlled-component contract. |
+| `onValueChange` | `(value: boolean) => void` | — | Required. |
+| `disabled` | `boolean` | `false` | Blocks toggling; RN renders its own native disabled treatment. |
+| `accessibilityLabel` | `string` | — | **Required** — a switch never renders visible text, so this is the only accessible name (mirrors `Button`'s icon-only contract). |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once. |
+| `testID` | `string` | — | |
+
+No `size` prop — RN's `Switch` is a native primitive with an intrinsic size that doesn't scale
+cleanly. No `variant`/`tone` either: a switch has exactly one on/off visual language, so there is
+nothing to close a union over.
+
+## Accessibility contract (WCAG)
+
+- **1.4.11 (non-text contrast)** — both track colours clear ≥3:1 against the canvas, and the
+  single thumb colour clears ≥3:1 against BOTH track colours, measured for all 8 brands × both
+  modes (`__tests__/Switch.test.ts`). `thumbColor` is `bg.canvas` alone — not `fg.default`, which
+  measured as low as 1.16:1 against the off-track on several brands despite looking plausible
+  unmeasured; `bg.canvas` clears ≥3:1 against both tracks on every brand × mode.
+- **2.5.x target size** — RN's `Switch` has an intrinsic height shorter than 44dp (51×31pt on iOS,
+  the smaller of the two platforms), so `SWITCH_HIT_SLOP` (7dp symmetric) expands it to the 44dp
+  floor — same `hitSlop` pattern as `Button`.
+- `accessibilityRole="switch"`, `accessibilityState={{ checked: value, disabled }}` — RN's own
+  `Switch` defaults the role but never sets `checked` itself, so `resolveSwitchAccessibility` sets
+  both explicitly rather than relying on the native default.
+- **2.3.3 (reduced motion)** — N/A. This module adds no JS-driven animation; the thumb slide is
+  native platform animation this wrapper doesn't control (unlike `Button`'s own press-fade).
+
+## Patterns
+
+1. **Colour, not structure.** There is no custom sizing/spacing to register via
+   `createThemedVariants` — RN's `Switch` has no configurable height/padding/radius/border-width of
+   its own, so nothing needs a structural variant here. Colour is the only themed surface
+   (`resolveSwitchColors`), resolved via `useThemeColors()` — the raw-string escape hatch, since
+   `trackColor`/`thumbColor` (like `placeholderTextColor`) accept no token object.
+2. **Pure, testable resolvers** in `Switch.variants.ts`, mirroring `Button`'s split.
+3. **No disabled dimming layered on top** — RN's native `Switch` already renders its own
+   per-platform disabled treatment; an extra opacity would double up rather than help.
+
+## Known gaps
+
+None.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Its only child is RN's own `<Switch>` (host-level primitive) — nothing to memoize.

package/lib/module/modules/switch/Switch.js

@@ -0,0 +1,53 @@
+"use strict";
+
+/**
+ * Switch — a thin themed wrapper over React Native's own `<Switch>`. The native primitive already
+ * ships correct per-platform accessibility semantics (a real toggle control, not a hand-built
+ * track/thumb), so this module re-themes its two colours from ROLE tokens and leaves sizing/shape
+ * to RN — which is also why there is no `size` prop.
+ */
+
+import { memo } from "react";
+import { Switch as RNSwitch } from "react-native";
+import { useThemeColors } from "../../theme/index.js";
+import { resolveSwitchAccessibility, resolveSwitchColors, SWITCH_HIT_SLOP } from "./Switch.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = /*#__PURE__*/memo(function Switch({
+  value,
+  onValueChange,
+  disabled = false,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  // `trackColor`/`thumbColor` accept no token object — the same raw-string escape hatch as
+  // `placeholderTextColor` — so colour is resolved via `useThemeColors()`, not `useTheme().colors`.
+  const colors = useThemeColors();
+  const {
+    trackOff,
+    trackOn,
+    thumbColor
+  } = resolveSwitchColors(colors);
+  const a11y = resolveSwitchAccessibility({
+    value,
+    disabled
+  });
+  return /*#__PURE__*/_jsx(RNSwitch, {
+    testID: testID,
+    value: value,
+    onValueChange: onValueChange,
+    disabled: disabled,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: a11y.accessibilityState,
+    trackColor: {
+      false: trackOff,
+      true: trackOn
+    },
+    thumbColor: thumbColor,
+    ios_backgroundColor: trackOff,
+    hitSlop: SWITCH_HIT_SLOP,
+    style: style
+  });
+});
+//# sourceMappingURL=Switch.js.map

package/lib/module/modules/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","Switch","RNSwitch","useThemeColors","resolveSwitchAccessibility","resolveSwitchColors","SWITCH_HIT_SLOP","jsx","_jsx","value","onValueChange","disabled","accessibilityLabel","style","testID","colors","trackOff","trackOn","thumbColor","a11y","accessibilityRole","accessibilityState","trackColor","false","true","ios_backgroundColor","hitSlop"],"sourceRoot":"../../../../src","sources":["modules/switch/Switch.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,MAAM,IAAIC,QAAQ,QAAQ,cAAc;AAGjD,SAASC,cAAc,QAAQ,sBAAa;AAE5C,SAASC,0BAA0B,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgBrG,OAAO,MAAMP,MAAM,gBAAGD,IAAI,CAAC,SAASC,MAAMA,CAAC;EACzCQ,KAAK;EACLC,aAAa;EACbC,QAAQ,GAAG,KAAK;EAChBC,kBAAkB;EAClBC,KAAK;EACLC;AACW,CAAC,EAAE;EACd;EACA;EACA,MAAMC,MAAM,GAAGZ,cAAc,CAAC,CAAC;EAC/B,MAAM;IAAEa,QAAQ;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAGb,mBAAmB,CAACU,MAAM,CAAC;EACrE,MAAMI,IAAI,GAAGf,0BAA0B,CAAC;IAAEK,KAAK;IAAEE;EAAS,CAAC,CAAC;EAE5D,oBACEH,IAAA,CAACN,QAAQ;IACPY,MAAM,EAAEA,MAAO;IACfL,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEA,QAAS;IACnBS,iBAAiB,EAAED,IAAI,CAACC,iBAAkB;IAC1CR,kBAAkB,EAAEA,kBAAmB;IACvCS,kBAAkB,EAAEF,IAAI,CAACE,kBAAmB;IAC5CC,UAAU,EAAE;MAAEC,KAAK,EAAEP,QAAQ;MAAEQ,IAAI,EAAEP;IAAQ,CAAE;IAC/CC,UAAU,EAAEA,UAAW;IACvBO,mBAAmB,EAAET,QAAS;IAC9BU,OAAO,EAAEpB,eAAgB;IACzBO,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}

package/lib/module/modules/switch/Switch.variants.js

@@ -0,0 +1,61 @@
+"use strict";
+
+/**
+ * Switch's pure resolvers — colour + accessibility + the touch-target constant. No React, no
+ * lucide, same split as `Button.variants.ts`: the WCAG + behaviour tests import these directly,
+ * measuring real palettes instead of eyeballing a hex.
+ */
+
+/**
+ * Maps the switch's track + thumb onto ROLE colours — never a hardcoded hex, so it's guaranteed
+ * legible in both modes and can never be an off-palette value an app invented.
+ *
+ * `trackOff` is `border.interactive`, the same proven ≥3:1-on-every-canvas neutral outline token
+ * `Button` uses for its outline boundary — not `border.default` (decorative, no contrast
+ * guarantee). `thumbColor` is `bg.canvas` alone, not `fg.default`: measured, `fg.default` falls as
+ * low as 1.16:1 against `trackOff` on several brands (it reads as a body-text colour, not a
+ * non-text UI surface), while `bg.canvas` clears ≥3:1 against BOTH `trackOff` and `trackOn` on
+ * every brand × mode — see `__tests__/Switch.test.ts`.
+ */
+export function resolveSwitchColors(colors) {
+  return {
+    trackOff: colors.border.interactive,
+    trackOn: colors.accent.solid,
+    thumbColor: colors.bg.canvas
+  };
+}
+/**
+ * RN's own `<Switch>` defaults `accessibilityRole` to `"switch"` but never sets
+ * `accessibilityState.checked` itself (only `disabled` is merged in, on Android) — so this module
+ * sets both explicitly, kept pure so the contract is testable without rendering React Native.
+ */
+export function resolveSwitchAccessibility(input) {
+  return {
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: input.value,
+      disabled: input.disabled === true
+    }
+  };
+}
+
+/** WCAG 2.5.5 (AAA) / HIG floor every interactive control is held to — same constant as `Button`. */
+export const MIN_TOUCH_TARGET = 44;
+
+/**
+ * RN's `Switch` has no `size` prop (a native intrinsic control doesn't scale cleanly), so its
+ * visual height is a platform constant rather than something this library chooses. 31 is iOS's
+ * exact intrinsic height (51×31pt) — the shorter of the two platforms' native defaults, so sizing
+ * the hit-slop off it keeps Android (whose default Material Switch is taller) covered too.
+ */
+export const SWITCH_HEIGHT = 31;
+const slop = Math.max(0, Math.ceil((MIN_TOUCH_TARGET - SWITCH_HEIGHT) / 2));
+
+/** Symmetric touch expansion so `SWITCH_HEIGHT + 2·slop ≥ 44`, same `hitSlop` pattern as `Button`. */
+export const SWITCH_HIT_SLOP = {
+  top: slop,
+  bottom: slop,
+  left: slop,
+  right: slop
+};
+//# sourceMappingURL=Switch.variants.js.map

package/lib/module/modules/switch/Switch.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveSwitchColors","colors","trackOff","border","interactive","trackOn","accent","solid","thumbColor","bg","canvas","resolveSwitchAccessibility","input","accessibilityRole","accessibilityState","checked","value","disabled","MIN_TOUCH_TARGET","SWITCH_HEIGHT","slop","Math","max","ceil","SWITCH_HIT_SLOP","top","bottom","left","right"],"sourceRoot":"../../../../src","sources":["modules/switch/Switch.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAACC,MAAkB,EAAgB;EACpE,OAAO;IACLC,QAAQ,EAAED,MAAM,CAACE,MAAM,CAACC,WAAW;IACnCC,OAAO,EAAEJ,MAAM,CAACK,MAAM,CAACC,KAAK;IAC5BC,UAAU,EAAEP,MAAM,CAACQ,EAAE,CAACC;EACxB,CAAC;AACH;AAYA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CAACC,KAA+B,EAA4B;EACpG,OAAO;IACLC,iBAAiB,EAAE,QAAQ;IAC3BC,kBAAkB,EAAE;MAAEC,OAAO,EAAEH,KAAK,CAACI,KAAK;MAAEC,QAAQ,EAAEL,KAAK,CAACK,QAAQ,KAAK;IAAK;EAChF,CAAC;AACH;;AAEA;AACA,OAAO,MAAMC,gBAAgB,GAAG,EAAE;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAG,EAAE;AAE/B,MAAMC,IAAI,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,IAAI,CAAC,CAACL,gBAAgB,GAAGC,aAAa,IAAI,CAAC,CAAC,CAAC;;AAE3E;AACA,OAAO,MAAMK,eAAe,GAAG;EAAEC,GAAG,EAAEL,IAAI;EAAEM,MAAM,EAAEN,IAAI;EAAEO,IAAI,EAAEP,IAAI;EAAEQ,KAAK,EAAER;AAAK,CAAU","ignoreList":[]}

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

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

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

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