pixelize-native-library 1.0.6

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

@@ -0,0 +1,61 @@
+# divider/ — a hairline separator between sections of content
+
+`Divider` renders a single themed hairline, horizontal or vertical. It takes no children, no
+interaction, and no text of its own.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Divider.tsx` | The component. Resolves the orientation's structural style + the decorative colour, applies them inline, `style` last. |
+| `Divider.variants.ts` | Pure resolver (`resolveDividerColor`) + the themed structural variant resolver `dividerStructure`. No React. |
+| `index.ts` | Public surface: `Divider`, `DividerProps`, `DividerOrientation`. |
+| `__tests__/Divider.test.ts` | Pure: colour-resolution mapping (all brands × modes) + a regression guard against silently upgrading to a guaranteed-3:1 border token. |
+| `__tests__/Divider.render.test.tsx` | Render: `testID` forwards, each orientation resolves the theme-correct thickness/span, the colour matches the pure mapping, `accessibilityRole="none"`, consumer `style` applies last. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `orientation` | `horizontal \| vertical` | `horizontal` | Closed union. `horizontal` = full width, `borderWidths.thin` tall. `vertical` = `alignSelf: "stretch"`, `borderWidths.thin` wide. |
+| `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Forwarded to the outermost `View`. |
+
+## Why the colour is `border.default`, not `border.interactive`
+
+`Card`'s `outline` variant and `Button`'s `outline` variant both deliberately reach past
+`colors.border.default` for `colors.border.interactive`, because those borders are real UI
+boundaries that must clear WCAG 1.4.11's 3:1 floor. A `Divider` is the opposite case: it draws no
+interactive boundary and conveys no information of its own (removing it changes spacing, not
+meaning), so 1.4.11 — which binds a "User Interface Component" or a "Graphical Object … required to
+understand the content" — does not apply to it. `border.default` is the intended decorative rung for
+exactly this job; it measures ~1.0–1.4:1 against `bg.canvas` on every brand × mode (same figures
+`Card.variants.ts` documents for its own un-bordered variants), which is the correct subtle
+shadcn-style rule, not an oversight. `Divider.test.ts` asserts the mapping itself (never a raw ramp,
+never accidentally the guaranteed-3:1 `interactive`/`focus` tokens) rather than gating it at 3:1.
+
+## Accessibility contract (WCAG)
+
+- **`accessibilityRole="none"`** — a divider carries no information and has no children to inherit
+  semantics from (unlike `Card`, which reaches the same "no role" conclusion for a different reason
+  — see `card/MODULE.md`), so it is explicitly excluded from the accessibility tree.
+- **1.4.11** — N/A by design; see above. There is no boundary being asserted.
+- **1.4.3** — N/A. Divider renders no text.
+- **2.3.3 (reduced motion)** — N/A. Divider has no animation.
+- **Touch target (2.5.x)** — N/A. Divider is not interactive.
+
+## Patterns copied from `button/` (the reference module) and `card/`
+
+1. **Structure vs colour split.** Static/theme-numeric structure (thickness) → `createThemedVariants`
+   (registered once per theme). Colour → resolved from role tokens, applied inline.
+2. **Pure, testable resolver** in `Divider.variants.ts` (no React) so the colour-mapping contract is
+   unit-tested against real palettes — never eyeballed.
+3. **Closed union only** (`orientation`), `style: LayoutStyle` last and once, no `{...rest}`.
+
+## 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 `DividerImpl` internally, exported as `Divider = memo(DividerImpl)`. No children, no library child components — nothing else to memoize.

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

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

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

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

package/lib/module/modules/drawer/Drawer.js

@@ -0,0 +1,171 @@
+"use strict";
+
+/**
+ * Drawer — a bottom-sheet-style panel built directly on REACT NATIVE'S OWN `Modal`, the same
+ * "transient overlay, raw RN Modal" pattern Select already established for this library (never this
+ * library's own `../modal` COMPONENT, a persistent title/children dialog — a different shape). The one
+ * deliberate exception, same as Select's, is the web portal mechanism below — a plain context + a
+ * stateless helper, not the `Modal` component's rendered output.
+ *
+ * The panel slides up from the bottom and the backdrop fades in, both driven by ONE Animated
+ * `progress` value — never RN Modal's native `animationType`, which can only pick a single discrete
+ * transition for the whole native surface and can't keep a custom-Animated backdrop opacity in
+ * lockstep with a custom panel slide. `animationType` is therefore always `"none"` here; this module
+ * owns the whole transition, so it can collapse to an instant snap under reduced motion (WCAG 2.3.3)
+ * without ever showing a frozen half-animated frame.
+ *
+ * Because RN's `<Modal>` only hides its children once native dismissal completes (or the component
+ * unmounts) — the same fact Modal.tsx's own top comment documents — the sheet stays internally
+ * "mounted" for one more animation tick after `visible` goes false, so the exit slide/fade actually
+ * plays before the native Modal disappears. A plain `setTimeout` (not the `Animated.timing`
+ * completion callback, which rides `requestAnimationFrame`) unmounts it afterwards — the same
+ * determinism fix `Toast.tsx`'s `hide()` uses, for the same reason (a RAF callback doesn't resolve on
+ * a predictable jest-fake-timer tick).
+ *
+ * Fully controlled: the caller owns `visible` and reacts to `onRequestClose`, which fires from the
+ * backdrop press, the Android hardware back button (RN Modal's own `onRequestClose` — free), and, via
+ * `onAccessibilityEscape` on the panel, iOS VoiceOver's two-finger-Z escape gesture — identical wiring
+ * to this library's own `Modal`.
+ *
+ * Web portal opt-in: when an ancestor renders `ModalPortalProvider` (web only), this bypasses RN's
+ * `<Modal>` and portals the SAME backdrop+panel tree into the provided container via `renderWebPortal`
+ * instead — see `../modal/ModalPortalContext.ts` for why. `ModalPortalContext`/`renderWebPortal` are
+ * read directly from `../modal` (a plain context + a stateless helper, no footprint of this library's
+ * own `Modal` COMPONENT), the same one deliberate cross-module exception `Select.tsx`'s own top comment
+ * documents. Every other case (native, or web with no provider — the default `ModalPortalContext` value
+ * is `null`) renders through RN's own `<Modal>`, byte-identical to before this mechanism existed.
+ */
+
+import { memo, useContext, useEffect, useRef, useState } from "react";
+import { Animated, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useTheme } from "../../theme/index.js";
+import { ModalPortalContext } from "../modal/ModalPortalContext.js";
+import { renderWebPortal } from "../modal/renderWebPortal";
+import { drawerGrabberStructure, drawerHandleStructure, drawerOverlayStructure, drawerPanelStructure, resolveDrawerAnimationDuration, resolveDrawerBottomInset, resolveDrawerPanelColors } from "./Drawer.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Decorative dismiss scrim behind the panel — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it. Same
+// justification as Modal's MODAL_BACKDROP / Select's BACKDROP_SCRIM.
+const DRAWER_BACKDROP = "#00000080";
+export const Drawer = /*#__PURE__*/memo(function Drawer({
+  visible,
+  onRequestClose,
+  children,
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const panelColors = resolveDrawerPanelColors(theme.colors);
+  const duration = resolveDrawerAnimationDuration(reducedMotion);
+  const bottomInset = resolveDrawerBottomInset(theme.space[5], Platform.OS);
+  const portalContainer = useContext(ModalPortalContext);
+
+  // Kept mounted through the exit animation — see the file-level comment on why RN Modal's own
+  // `visible` prop can't drive this directly.
+  const [mounted, setMounted] = useState(visible);
+  const mountedRef = useRef(mounted);
+  mountedRef.current = mounted;
+  const progress = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const unmountTimer = useRef(null);
+  useEffect(() => {
+    if (unmountTimer.current !== null) {
+      clearTimeout(unmountTimer.current);
+      unmountTimer.current = null;
+    }
+    if (visible) {
+      setMounted(true);
+      Animated.timing(progress, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }).start();
+    } else if (mountedRef.current) {
+      Animated.timing(progress, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true
+      }).start();
+      unmountTimer.current = setTimeout(() => setMounted(false), duration);
+    }
+    return () => {
+      if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+    };
+  }, [visible, duration, progress]);
+
+  // Slides from fully off-screen (the window's own height, always ≥ the panel's own, since the
+  // panel is capped to 90% of it) to resting at the bottom edge.
+  const translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [windowHeight, 0]
+  });
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      style: StyleSheet.absoluteFill,
+      onPress: onRequestClose,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: DRAWER_BACKDROP,
+          opacity: progress
+        }]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: drawerOverlayStructure(),
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        testID: testID ? `${testID}-panel` : undefined,
+        accessibilityViewIsModal: true,
+        onAccessibilityEscape: onRequestClose,
+        style: [drawerPanelStructure(theme), {
+          backgroundColor: panelColors.background,
+          paddingBottom: bottomInset,
+          transform: [{
+            translateY
+          }]
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          testID: testID ? `${testID}-handle` : undefined,
+          style: drawerHandleStructure(theme),
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /*#__PURE__*/_jsx(View, {
+            style: [drawerGrabberStructure(), {
+              backgroundColor: panelColors.grabber
+            }]
+          })
+        }), children]
+      })
+    })]
+  });
+  if (Platform.OS === "web" && portalContainer != null) {
+    if (!mounted) return null;
+    // Gated on `mounted`, not `visible` — reproduces RN Modal's own `visible={mounted}` below, so the
+    // portal path keeps rendering through the same mount-through-exit-animation lifecycle the file-level
+    // comment describes (the exit slide/fade still plays before unmount). Unlike Modal.tsx's portal
+    // branch, this loses NO animation fidelity: Drawer's slide+fade was already entirely self-driven by
+    // `progress` (RNModal's own `animationType` is always `"none"` either way), so the SAME Animated tree
+    // renders identically whether it's inside RN's `<Modal>` or portaled straight into `portalContainer`.
+    // Reproduces just the sizing RN's `<Modal>` otherwise supplies (see ModalPortalContext.ts) — never
+    // touching the shared `drawerOverlayStructure`/`drawerPanelStructure` resolvers the RNModal path
+    // below still uses untouched.
+    return renderWebPortal(/*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: content
+    }), portalContainer);
+  }
+  return /*#__PURE__*/_jsx(RNModal, {
+    visible: mounted,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: onRequestClose,
+    children: content
+  });
+});
+//# sourceMappingURL=Drawer.js.map

package/lib/module/modules/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useContext","useEffect","useRef","useState","Animated","Modal","RNModal","Platform","Pressable","StyleSheet","useWindowDimensions","View","useReducedMotion","useTheme","ModalPortalContext","renderWebPortal","drawerGrabberStructure","drawerHandleStructure","drawerOverlayStructure","drawerPanelStructure","resolveDrawerAnimationDuration","resolveDrawerBottomInset","resolveDrawerPanelColors","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DRAWER_BACKDROP","Drawer","visible","onRequestClose","children","testID","theme","reducedMotion","height","windowHeight","panelColors","colors","duration","bottomInset","space","OS","portalContainer","mounted","setMounted","mountedRef","current","progress","Value","unmountTimer","clearTimeout","timing","toValue","useNativeDriver","start","setTimeout","translateY","interpolate","inputRange","outputRange","content","undefined","accessible","style","absoluteFill","onPress","pointerEvents","backgroundColor","opacity","accessibilityViewIsModal","onAccessibilityEscape","background","paddingBottom","transform","accessibilityElementsHidden","importantForAccessibility","grabber","transparent","animationType"],"sourceRoot":"../../../../src","sources":["modules/drawer/Drawer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/drawer/Drawer.variants.js

@@ -0,0 +1,118 @@
+"use strict";
+
+/**
+ * Drawer's style + behaviour resolution — same split as Modal/Select:
+ *  - STRUCTURE (padding, radius, the grabber's fixed dimensions) lives in the `createThemedVariants`
+ *    resolvers below, static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveDrawerPanelColors`, never a raw
+ *    ramp and never a hardcoded hex.
+ *  - The reduced-motion contract (WCAG 2.3.3) is `resolveDrawerAnimationDuration`, and the
+ *    safe-area-less bottom-inset fallback is `resolveDrawerBottomInset` — both kept pure so they are
+ *    unit-testable without rendering React Native.
+ *
+ * Free of React and of any `Modal`/`Pressable`/`Animated` import, so the tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
+
+/** The slide-up + backdrop-fade duration in ms. A component design constant — not on the theme's
+ *  numeric scale — same status `PRESS_FADE_MS` (Button) / `ANIMATION_MS` (Toast) have. */
+export const DRAWER_ANIMATION_MS = 260;
+
+/** WCAG 2.3.3 — the slide/fade collapses to an instant snap (never a frozen frame) when the OS has
+ *  reduced motion on. Mirrors Modal's `resolveModalAnimationType`, pulled into its own resolver
+ *  because Drawer drives the transition with `Animated.timing` (a duration), not RN Modal's
+ *  `animationType` (a discrete enum) — Modal's own native transition can't also fade a separately
+ *  Animated backdrop in lockstep with a custom slide, which is why this module never sets
+ *  `animationType` to anything but `"none"` and does the whole transition itself. */
+export function resolveDrawerAnimationDuration(reducedMotion) {
+  return reducedMotion ? 0 : DRAWER_ANIMATION_MS;
+}
+
+/**
+ * Static bottom-inset fallback. `react-native-safe-area-context` is listed as an optional peer in
+ * `peerDependenciesMeta`, but — same finding `Toast`'s MODULE.md already recorded — it is not
+ * actually installed as a dependency of THIS package (only pulled in transitively by the `example`
+ * workspace), so importing `useSafeAreaInsets` here would work in this repo's dev sandbox and then
+ * fail to resolve in a consumer app that installs `pixelize-native-library` without also installing that
+ * package. This constant approximates the iOS home-indicator inset instead; see MODULE.md "Known
+ * gaps" for the real fix once the dependency is added for real.
+ */
+export const DRAWER_IOS_HOME_INDICATOR_INSET = 20;
+
+/** Adds the static iOS home-indicator approximation to a base padding; Android's gesture/3-button
+ *  nav already reserves its own space outside the app window, so it needs no extra padding here. */
+export function resolveDrawerBottomInset(basePadding, platformOS) {
+  return platformOS === "ios" ? basePadding + DRAWER_IOS_HOME_INDICATOR_INSET : basePadding;
+}
+
+/** The grabber's fixed pill dimensions — a design constant, not a `size` scale (Drawer takes no
+ *  `size` prop; unlike Modal/Select it has exactly one shape). */
+export const GRABBER_WIDTH = 36;
+export const GRABBER_HEIGHT = 4;
+/**
+ * Maps the panel onto role colours. Kept this small on purpose, same reasoning Modal's own
+ * `resolveModalPanelColors` documents: `children` is arbitrary consumer content this module has no
+ * colour opinion about, and Drawer owns no text of its own (no `title`, unlike Modal) — so there is
+ * no text/fill pairing here for a WCAG 1.4.3 test to measure. See `Drawer.test.ts` for the full
+ * accounting of what this module does and does not owe a contrast test.
+ */
+export function resolveDrawerPanelColors(colors) {
+  return {
+    background: colors.bg.surface,
+    grabber: colors.bg.sunken
+  };
+}
+
+/** The full-screen overlay the panel bottom-aligns in. `box-none` (applied by the component) lets a
+ *  tap on its empty area above the panel fall through to the backdrop press underneath — same shape
+ *  as Modal's `modalOverlayStructure` / Select's `selectOverlayStructure`, bottom-aligned instead of
+ *  centered. No theme dependency (no themed numbers used), so it uses the untethemed resolver, same
+ *  idiom `drawerGrabberStructure` below does. */
+export const drawerOverlayStructure = createVariants({
+  base: {
+    flex: 1,
+    justifyContent: "flex-end"
+  }
+});
+
+/**
+ * Structural styles only — layout, padding, top-corner radius. No colour (resolved by
+ * `resolveDrawerPanelColors`, applied inline over this) and no bottom padding (the safe-area-aware
+ * amount is themed but state-dependent on `Platform.OS`, so it's computed by
+ * `resolveDrawerBottomInset` and applied inline in `Drawer.tsx`), so this compiles once per theme
+ * identity via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export const drawerPanelStructure = createThemedVariants(theme => ({
+  base: {
+    width: "100%",
+    maxHeight: "90%",
+    borderTopLeftRadius: theme.radii.lg,
+    borderTopRightRadius: theme.radii.lg,
+    paddingHorizontal: theme.space[5],
+    ...theme.elevation.lg
+  }
+}));
+
+/** The grabber's touch-friendly wrapper strip — its own row, above `children`, so a future pointer
+ *  down on it can never land on scrollable content underneath (see MODULE.md on why swipe-to-dismiss
+ *  isn't wired to it in v1). */
+export const drawerHandleStructure = createThemedVariants(theme => ({
+  base: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.space[3]
+  }
+}));
+
+/** No theme dependency at all (fixed design constants, not a themed scale), so it uses the
+ *  untethemed resolver — same idiom as RadioGroup's `radioDotStructure`. */
+export const drawerGrabberStructure = createVariants({
+  base: {
+    width: GRABBER_WIDTH,
+    height: GRABBER_HEIGHT,
+    borderRadius: GRABBER_HEIGHT / 2
+  }
+});
+//# sourceMappingURL=Drawer.variants.js.map

package/lib/module/modules/drawer/Drawer.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","createVariants","DRAWER_ANIMATION_MS","resolveDrawerAnimationDuration","reducedMotion","DRAWER_IOS_HOME_INDICATOR_INSET","resolveDrawerBottomInset","basePadding","platformOS","GRABBER_WIDTH","GRABBER_HEIGHT","resolveDrawerPanelColors","colors","background","bg","surface","grabber","sunken","drawerOverlayStructure","base","flex","justifyContent","drawerPanelStructure","theme","width","maxHeight","borderTopLeftRadius","radii","lg","borderTopRightRadius","paddingHorizontal","space","elevation","drawerHandleStructure","alignItems","paddingVertical","drawerGrabberStructure","height","borderRadius"],"sourceRoot":"../../../../src","sources":["modules/drawer/Drawer.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,oBAAoB,EAAEC,cAAc,QAAQ,2BAAkB;;AAEvE;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAG,GAAG;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,8BAA8BA,CAACC,aAAsB,EAAU;EAC7E,OAAOA,aAAa,GAAG,CAAC,GAAGF,mBAAmB;AAChD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,+BAA+B,GAAG,EAAE;;AAEjD;AACA;AACA,OAAO,SAASC,wBAAwBA,CAACC,WAAmB,EAAEC,UAAkB,EAAU;EACxF,OAAOA,UAAU,KAAK,KAAK,GAAGD,WAAW,GAAGF,+BAA+B,GAAGE,WAAW;AAC3F;;AAEA;AACA;AACA,OAAO,MAAME,aAAa,GAAG,EAAE;AAC/B,OAAO,MAAMC,cAAc,GAAG,CAAC;AAY/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,wBAAwBA,CAACC,MAAkB,EAAqB;EAC9E,OAAO;IACLC,UAAU,EAAED,MAAM,CAACE,EAAE,CAACC,OAAO;IAC7BC,OAAO,EAAEJ,MAAM,CAACE,EAAE,CAACG;EACrB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAGjB,cAAc,CAAC;EACnDkB,IAAI,EAAE;IACJC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGtB,oBAAoB,CAAEuB,KAAY,KAAM;EAC1EJ,IAAI,EAAE;IACJK,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,KAAK;IAChBC,mBAAmB,EAAEH,KAAK,CAACI,KAAK,CAACC,EAAE;IACnCC,oBAAoB,EAAEN,KAAK,CAACI,KAAK,CAACC,EAAE;IACpCE,iBAAiB,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC,CAAC;IACjC,GAAGR,KAAK,CAACS,SAAS,CAACJ;EACrB;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA;AACA,OAAO,MAAMK,qBAAqB,GAAGjC,oBAAoB,CAAEuB,KAAY,KAAM;EAC3EJ,IAAI,EAAE;IACJe,UAAU,EAAE,QAAQ;IACpBb,cAAc,EAAE,QAAQ;IACxBc,eAAe,EAAEZ,KAAK,CAACQ,KAAK,CAAC,CAAC;EAChC;AACF,CAAC,CAAC,CAAC;;AAEH;AACA;AACA,OAAO,MAAMK,sBAAsB,GAAGnC,cAAc,CAAC;EACnDkB,IAAI,EAAE;IACJK,KAAK,EAAEf,aAAa;IACpB4B,MAAM,EAAE3B,cAAc;IACtB4B,YAAY,EAAE5B,cAAc,GAAG;EACjC;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,161 @@
+# drawer/ — a bottom-sheet panel built on React Native's own Modal
+
+`Drawer` is a hand-rolled bottom-sheet: a panel that slides up from the bottom edge over a
+translucent fading backdrop, presented in REACT NATIVE'S OWN `Modal` — the same "transient overlay,
+raw RN Modal" pattern `Select` already established for this library. It is NOT this library's own
+`../modal` (a persistent title/children dialog, centered, a different shape entirely) and it imports
+nothing from it.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Drawer.tsx` | The component. RN `Modal` composition, the mount-through-exit-animation state machine, the slide + backdrop-fade transition, dismiss wiring. Falls back to the web portal mechanism below when opted in. |
+| `Drawer.variants.ts` | Pure resolvers (`resolveDrawerAnimationDuration`, `resolveDrawerBottomInset`, `resolveDrawerPanelColors`) + the themed/untethemed structural resolvers (`drawerOverlayStructure`, `drawerPanelStructure`, `drawerHandleStructure`, `drawerGrabberStructure`). No React, no lucide. Untouched by the web portal mechanism — see below. |
+| `index.ts` | Public surface: `Drawer`, `DrawerProps`. |
+| `__tests__/Drawer.test.ts` | Pure: reduced-motion contract, bottom-inset fallback, panel/grabber colour resolution (all brands × modes). |
+| `__tests__/Drawer.render.test.tsx` | Render: visibility, mount-through-exit-animation, dismissal paths, modal semantics, grabber a11y, reduced motion, and the web-portal opt-in branch (mocking `renderWebPortal`). |
+
+## Props
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `visible` | `boolean` | Required. Fully controlled — Drawer never tracks its own open state. |
+| `onRequestClose` | `() => void` | Required. Fires from backdrop press, Android hardware back, and iOS VoiceOver's escape gesture. Never fired from an internal state. |
+| `children` | `ReactNode` | Required. Arbitrary consumer content below the grabber. |
+| `testID` | `string` | Also seeds `${testID}-backdrop`, `${testID}-panel`, `${testID}-handle`. |
+
+No `style`/`containerStyle` prop — same precedent as this library's own `Modal` (also style-less):
+it's a full-screen transient overlay whose position is fixed by the component, not something an
+app's layout places.
+
+## Animation
+
+One `Animated.Value` (`progress`, 0 → 1) drives BOTH the panel's `translateY` (interpolated from the
+window's own height down to `0`) and the backdrop's `opacity`, so they move in lockstep. This is why
+the underlying RN `<Modal>` is always given `animationType="none"` — RN's native transition is a
+single discrete enum for the whole native surface; it can't also fade a separately-Animated backdrop
+in step with a custom slide, so this module owns the entire transition instead (same reasoning
+`Modal.tsx`'s reduced-motion note documents for its own native-vs-JS boundary, in reverse).
+
+`resolveDrawerAnimationDuration` (WCAG 2.3.3) collapses the duration to `0` under
+`useReducedMotion()` — an instant snap, never a frozen half-slid frame, same contract every other
+animated module in this catalogue holds.
+
+**Exit-animation lifecycle.** RN's `<Modal>` only actually hides its children once native dismissal
+completes or the component unmounts — flipping `visible` straight to the native `Modal`'s own
+`visible` prop would cut the exit slide/fade off before it plays. So Drawer keeps its own `mounted`
+state, distinct from the caller's `visible` prop: on close, the exit animation starts immediately and
+a plain `setTimeout` (matching `duration`, not the `Animated.timing` completion callback — that rides
+`requestAnimationFrame`, which doesn't resolve deterministically under fake timers) unmounts the
+underlying `<Modal>` once the animation has actually finished. Same idiom as `Toast.tsx`'s `hide()`.
+
+## Web portal mechanism (opt-in)
+
+Same containment bug, same fix, as `Modal`/`Select`/`Menu`: `react-native-web`'s own `<Modal>`
+unconditionally portals to `document.body` (no `container`/`portalHost` override exists — see
+`../modal/ModalPortalContext.ts`), which breaks visual containment inside a fixed-size preview
+frame (`example/DeviceFrame.tsx`'s 390px phone card) — the sheet rendered full-browser-viewport
+instead of clipped to the frame.
+
+`Drawer.tsx` reads `ModalPortalContext`/`renderWebPortal` straight from `../modal` (the same
+deliberate cross-module exception `Select.tsx`'s own top comment documents — a plain context +
+stateless helper, never this library's own `Modal` component). Gated on
+`Platform.OS === "web" && portalContainer != null`; every other case (native, or web with no
+`ModalPortalProvider`) renders through RN's own `<Modal>`, byte-identical to before this
+mechanism existed. See `../modal/MODULE.md`'s "Web portal mechanism" section for the full
+context/renderer design.
+
+**Unlike `Modal`'s portal branch, Drawer loses no animation fidelity.** Modal's portal path
+skips RN `<Modal>`'s native open/close animation because that's what drives Modal's fade; Drawer
+never relied on RN Modal's `animationType` in the first place (always `"none"` — see Animation
+above) — the slide+fade is 100% driven by the `progress` `Animated.Value` regardless of which
+container the tree renders into, so the portaled tree animates identically to the RNModal path.
+The portal branch is gated on `mounted` (not `visible`), reproducing RN Modal's own
+`visible={mounted}` so the same mount-through-exit-animation lifecycle applies on both paths —
+the exit slide/fade still plays out before the portaled tree unmounts.
+
+**Known minor gap:** `translateY`'s off-screen starting point interpolates from the actual
+browser `useWindowDimensions().height`, not the portal container's height (there's no cheap way
+to read the container's own height from a portal-container ref alone). Inside a frame shorter
+than the full window, the panel starts further off-screen than strictly necessary, animating
+over the same fixed duration — the resting position (`translateY: 0`) and clipping are still
+correct, this only affects how far the panel travels before entering view. Not a visual escape;
+left as-is rather than adding a container-height measurement this component doesn't otherwise
+need.
+
+## Accessibility contract (WCAG)
+
+- **2.3.3** — see Animation above.
+- `accessibilityViewIsModal` on the panel, same as this library's `Modal`.
+- **iOS VoiceOver escape** — `onAccessibilityEscape` on the panel calls `onRequestClose`, identical
+  wiring to `Modal.tsx`.
+- **Android hardware back** — free: RN `Modal`'s own `onRequestClose` prop is wired straight through.
+- The grabber (a `bg.sunken` pill) is `accessibilityElementsHidden` +
+  `importantForAccessibility="no-hide-descendants"` on its wrapper — purely decorative, so it carries
+  no WCAG 1.4.11 obligation (a decorative graphic is out of that SC's scope entirely, same status the
+  backdrop scrims across this library already have). Its dismiss affordance is real (backdrop press +
+  hardware back + VoiceOver escape); it does not itself act as a control.
+- No owned text (`children` is arbitrary consumer content, same stance `Modal`'s own
+  `resolveModalPanelColors` doc comment takes for its body — Drawer additionally has no `title`
+  either), so there is nothing here for a WCAG 1.4.3 test to measure. `Drawer.test.ts`'s file header
+  records this reasoning explicitly rather than silently omitting the usual `contrastRatio` block.
+
+## Known gaps
+
+- **No `react-native-safe-area-context` wiring.** It's listed in `peerDependenciesMeta` as an
+  optional peer, but is NOT actually declared in `peerDependencies` in this package's own
+  `package.json` — it only resolves in this repo's dev sandbox because the `example` workspace
+  depends on it directly and npm workspaces hoist it into the root `node_modules`. Importing
+  `useSafeAreaInsets` here would work in this repo and then fail to resolve for a consumer app that
+  installs `pixelize-native-library` without separately installing that package. `Toast.tsx`'s own MODULE.md
+  already flagged the same gap for its overlay inset. Bottom padding instead uses
+  `resolveDrawerBottomInset`: the theme's own `space[5]` plus a static iOS home-indicator
+  approximation (`DRAWER_IOS_HOME_INDICATOR_INSET`, 20dp) on iOS only. Revisit once
+  `react-native-safe-area-context` is added as a REAL peer dependency (a `package.json` change, out of
+  this module's scope) — swap the static constant for a real `useSafeAreaInsets().bottom` read.
+- **No swipe-down-to-dismiss in v1 — a deliberate choice, not an oversight.** The spec allowed this as
+  a documented v1 gap, and three considerations pointed the same way:
+  1. **Testability.** This is the first hand-rolled gesture module in this catalogue — there is no
+     `PanResponder` test precedent anywhere in the other 27 shipped components. `PanResponder`
+     computes `dx`/`dy`/`vx`/`vy` internally from a raw native touch-event history; accurately
+     reproducing that in `@testing-library/react-native` (which has no real touch pipeline) means
+     either hand-crafting synthetic touch streams that only approximate the real responder math, or
+     shipping the gesture path untested. Both fall short of the "measured, never eyeballed" bar the
+     rest of this library holds itself to.
+  2. **Full dismiss parity already exists without it** — backdrop press, Android hardware back, and
+     the iOS VoiceOver escape gesture together already satisfy WCAG 2.5.7's non-drag-alternative
+     requirement; a swipe would be a nice-to-have affordance, not a missing capability.
+  3. **Risk to `children`.** A `PanResponder` broad enough to feel natural on the whole panel risks
+     fighting a `ScrollView`/`FlatList` inside `children` (a scroll gesture starting near the top of
+     scrollable content vs. a sheet-dismiss swipe is a real, easy-to-get-wrong disambiguation); scoping
+     it to only the grabber's small handle strip avoids that fight but makes the gesture much narrower
+     and less discoverable than the "drag anywhere" affordance users expect from a bottom sheet.
+  A future version should revisit this with `PanResponder` scoped to `drawerHandleStructure`'s handle
+  strip only (never the full panel), driving `resolveDrawerAnimationDuration`'s same `progress` value,
+  gated by a real distance/velocity threshold — and, at that point, a way to verify the gesture math
+  deterministically (e.g. extracting the dy/vy → dismiss decision into its own pure, unit-tested
+  function, the same "keep the decision pure, wire the mechanism thin" split this file already uses
+  everywhere else) rather than only relying on `PanResponder`'s live wiring.
+- No `size` prop — v1 is a single shape (content sizes the panel up to a 90% max-height cap), matching
+  the spec this module was built against.
+
+## Patterns copied from Modal / Select / Toast
+
+1. **Structure vs colour split.** Structural values (padding, top-corner radius, the grabber's fixed
+   pill) → `createThemedVariants` (or the untethemed `createVariants` where nothing is theme-scaled,
+   same idiom `RadioGroup`'s `radioDotStructure` uses) — never a fresh inline style object per render.
+   Colour → resolved from role tokens, applied inline.
+2. **Pure, testable resolvers** in `Drawer.variants.ts` (no React/lucide) — reduced motion, the
+   bottom-inset fallback, and colour resolution are all unit-tested without rendering React Native.
+3. **RN's raw `Modal`, not this library's own `../modal` COMPONENT** — same isolation contract
+   `Select.tsx`'s own top comment states, so Drawer never depends on a sibling module's rendered
+   output. The one deliberate exception is the web portal mechanism (`ModalPortalContext`/
+   `renderWebPortal` — a plain context + stateless helper, not the `Modal` component) — see "Web
+   portal mechanism" above.
+4. **Mount-through-exit-animation + deterministic timer-based unmount** — copied from `Toast.tsx`'s
+   `hide()`, adapted from a provider's imperative `show`/`hide` to a fully-controlled `visible` prop.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only renders host primitives (`Pressable`/`View`/`Animated.View`/RN's own `Modal`) — no library child component receives a derived callback/array, so no `useCallback`/`useMemo` was needed.

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

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

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

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

package/lib/module/modules/empty-state/EmptyState.js

@@ -0,0 +1,79 @@
+"use strict";
+
+/**
+ * EmptyState — a centred placeholder for "nothing here yet" / zero-result states: an optional
+ * decorative icon, a required title, an optional description, and an optional call-to-action.
+ * The action is rendered through this library's own, stable `Button` module — a justified
+ * composition (the same reasoning `AlertDialog` documents for its own footer buttons) — never a
+ * hand-rolled `Pressable` that would duplicate Button's press/focus/disabled/hit-target wiring.
+ *
+ * No `accessibilityRole` of its own: like `Card`, this is a plain grouping container with no
+ * interaction beyond the composed Button, so there is nothing here for assistive tech to announce
+ * beyond its children — the title and description read as their own `Text` elements, in order,
+ * and the icon (redundant with the title) is hidden from the accessibility tree entirely.
+ */
+
+import { memo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { Button } from "../button/index.js";
+import { EMPTY_STATE_ICON_SIZE, emptyStateStructure, resolveEmptyStateColors } from "./EmptyState.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A lighter stroke than the default 2 — at 48dp a 2px stroke reads heavier than the muted,
+// secondary role this glyph plays next to the title.
+const ICON_STROKE = 1.5;
+export const EmptyState = /*#__PURE__*/memo(function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = resolveEmptyStateColors(theme.colors);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [emptyStateStructure(theme), style],
+    children: [icon !== undefined &&
+    /*#__PURE__*/
+    // Decorative — redundant with the visible title below, so it is hidden from assistive
+    // tech rather than announced as a second, unexplained element (same contract `Avatar` and
+    // `Skeleton` give their own decorative default).
+    _jsx(View, {
+      testID: testID === undefined ? undefined : `${testID}-icon`,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: icon,
+        size: EMPTY_STATE_ICON_SIZE,
+        color: colors.icon,
+        strokeWidth: ICON_STROKE
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [theme.fontStyleForWeight(theme.fontWeights.bold), styles.text, {
+        fontSize: theme.fontSizes.lg,
+        color: colors.title
+      }],
+      children: title
+    }), description !== undefined && /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        fontSize: theme.fontSizes.sm,
+        color: colors.description
+      }],
+      children: description
+    }), action !== undefined && /*#__PURE__*/_jsx(Button, {
+      label: action.label,
+      onPress: action.onPress,
+      tone: "accent",
+      variant: "solid"
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  text: {
+    textAlign: "center"
+  }
+});
+//# sourceMappingURL=EmptyState.js.map