pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/date-picker/TimePicker.js

@@ -0,0 +1,179 @@
+"use strict";
+
+/**
+ * TimePicker — hour / minute (/ AM-PM) selection columns.
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { Animated, FlatList, Platform, Pressable, Text, View } from "react-native";
+import { usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { applyMeridiem, buildHourOptions, buildMinuteOptions, DEFAULT_TIME_HOUR, fromDisplayHour, resolvePressedAccessibilityState, resolveTimeOptionColors, TIME_OPTION_HEIGHT, timeColumnStructure, timeColumnsStructure, timeOptionStructure, toDisplayHour, toMeridiem, withTime } from "./DatePicker.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MERIDIEMS = ["AM", "PM"];
+const TimeOption = /*#__PURE__*/memo(function TimeOption({
+  label,
+  value,
+  selected,
+  accessibilityLabel,
+  theme,
+  onPress,
+  testID
+}) {
+  const press = usePressMotion();
+  const resting = useMemo(() => resolveTimeOptionColors(theme.colors, {
+    selected,
+    pressed: false
+  }), [theme.colors, selected]);
+  const pressedBackground = useMemo(() => resolveTimeOptionColors(theme.colors, {
+    selected,
+    pressed: true
+  }).background, [theme.colors, selected]);
+  const optionStructure = useMemo(() => timeOptionStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(selected ? theme.fontWeights.medium : theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: resting.label
+  }], [theme, selected, resting.label]);
+  const handlePress = useCallback(() => onPress(value), [onPress, value]);
+  const pressedState = useMemo(() => resolvePressedAccessibilityState(selected), [selected]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  const optionStyle = useCallback(({
+    pressed
+  }) => [optionStructure, {
+    overflow: "hidden",
+    backgroundColor: pressed ? pressedBackground : resting.background
+  }], [optionStructure, pressedBackground, resting.background]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    "aria-pressed": pressedState["aria-pressed"],
+    accessibilityState: pressedState.accessibilityState,
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
+    style: optionStyle,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      testID: testID ? `${testID}-motion` : undefined,
+      style: press.style,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: labelStyle,
+        children: label
+      })
+    })
+  });
+});
+function nearestIndex(options, target) {
+  let bestIndex = 0;
+  let bestDiff = Infinity;
+  options.forEach((option, index) => {
+    const diff = Math.abs(option - target);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      bestIndex = index;
+    }
+  });
+  return bestIndex;
+}
+export const TimePicker = /*#__PURE__*/memo(function TimePicker({
+  value,
+  onChange,
+  use24Hour = false,
+  minuteStep = 1,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const hasValue = value != null;
+  const hour24 = value ? value.getHours() : DEFAULT_TIME_HOUR;
+  const minute = value ? value.getMinutes() : 0;
+  const displayHour = toDisplayHour(hour24, use24Hour);
+  const meridiem = toMeridiem(hour24);
+  const hours = useMemo(() => buildHourOptions(use24Hour), [use24Hour]);
+  const minutes = useMemo(() => buildMinuteOptions(minuteStep), [minuteStep]);
+  const initialHourIndex = Math.max(0, hours.indexOf(displayHour));
+  const initialMinuteIndex = nearestIndex(minutes, minute);
+  const commitHour = useCallback(nextDisplayHour => {
+    onChange(withTime(value, fromDisplayHour(nextDisplayHour, meridiem, use24Hour), minute));
+  }, [value, meridiem, use24Hour, minute, onChange]);
+  const commitMinute = useCallback(nextMinute => onChange(withTime(value, hour24, nextMinute)), [value, hour24, onChange]);
+  const commitMeridiem = useCallback(nextMeridiem => onChange(withTime(value, applyMeridiem(hour24, nextMeridiem), minute)), [value, hour24, minute, onChange]);
+  const pressHour = useCallback(value => commitHour(Number(value)), [commitHour]);
+  const pressMinute = useCallback(value => commitMinute(Number(value)), [commitMinute]);
+  const pressMeridiem = useCallback(value => commitMeridiem(value), [commitMeridiem]);
+  const renderHour = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(TimeOption, {
+    label: String(item).padStart(2, "0"),
+    value: String(item),
+    selected: hasValue && item === displayHour,
+    accessibilityLabel: `${item} ${use24Hour ? "hours" : "o'clock"}`,
+    theme: theme,
+    onPress: pressHour,
+    testID: testID ? `${testID}-hour-${item}` : undefined
+  }), [hasValue, displayHour, use24Hour, theme, pressHour, testID]);
+  const renderMinute = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(TimeOption, {
+    label: String(item).padStart(2, "0"),
+    value: String(item),
+    selected: hasValue && item === minute,
+    accessibilityLabel: `${item} minutes`,
+    theme: theme,
+    onPress: pressMinute,
+    testID: testID ? `${testID}-minute-${item}` : undefined
+  }), [hasValue, minute, theme, pressMinute, testID]);
+  const hourKeyExtractor = useCallback(item => `hour-${item}`, []);
+  const minuteKeyExtractor = useCallback(item => `minute-${item}`, []);
+  const getItemLayout = useCallback((_data, index) => ({
+    length: TIME_OPTION_HEIGHT,
+    offset: TIME_OPTION_HEIGHT * index,
+    index
+  }), []);
+  const columnStructure = useMemo(() => timeColumnStructure(theme), [theme]);
+  const rootStyle = useMemo(() => [timeColumnsStructure(theme), style], [theme, style]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      testID: testID ? `${testID}-hours` : undefined,
+      accessibilityLabel: "Hour",
+      data: hours,
+      keyExtractor: hourKeyExtractor,
+      renderItem: renderHour,
+      getItemLayout: getItemLayout,
+      initialScrollIndex: initialHourIndex,
+      style: columnStructure,
+      bounces: false
+    }), /*#__PURE__*/_jsx(FlatList, {
+      testID: testID ? `${testID}-minutes` : undefined,
+      accessibilityLabel: "Minute",
+      data: minutes,
+      keyExtractor: minuteKeyExtractor,
+      renderItem: renderMinute,
+      getItemLayout: getItemLayout,
+      initialScrollIndex: initialMinuteIndex,
+      style: columnStructure,
+      bounces: false
+    }), !use24Hour && /*#__PURE__*/_jsx(View, {
+      style: columnStructure,
+      accessibilityLabel: "AM or PM",
+      testID: testID ? `${testID}-meridiem` : undefined,
+      children: MERIDIEMS.map(option => /*#__PURE__*/_jsx(TimeOption, {
+        label: option,
+        value: option,
+        selected: hasValue && option === meridiem,
+        accessibilityLabel: option,
+        theme: theme,
+        onPress: pressMeridiem,
+        testID: testID ? `${testID}-meridiem-${option}` : undefined
+      }, option))
+    })]
+  });
+});
+//# sourceMappingURL=TimePicker.js.map

package/lib/module/modules/date-picker/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/date-picker`. Value exports and type exports are split
+ * for `verbatimModuleSyntax`. `PickerField`/`PickerShell` are internal composition helpers (see
+ * their own doc comments) and are deliberately not re-exported — a consumer builds a date/time UI
+ * through `Calendar`, `TimePicker`, `DatePicker`, or `DateRangePicker`, never their internals.
+ */
+
+export { Calendar } from "./Calendar.js";
+export { TimePicker } from "./TimePicker.js";
+export { DatePicker } from "./DatePicker.js";
+export { DateRangePicker } from "./DateRangePicker.js";
+//# sourceMappingURL=index.js.map

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

@@ -7,9 +7,9 @@
  * `Card.tsx` — made explicit here since, unlike `Card`, a divider has no children to carry meaning).
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { dividerStructure, resolveDividerColor } from "./Divider.variants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function DividerImpl({
@@ -18,14 +18,15 @@ function DividerImpl({
   testID
 }) {
   const theme = useTheme();
+  const rootStyle = useMemo(() => [dividerStructure(theme, {
+    orientation
+  }), {
+    backgroundColor: resolveDividerColor(theme.colors)
+  }, style], [theme, orientation, style]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessibilityRole: "none",
-    style: [dividerStructure(theme, {
-      orientation
-    }), {
-      backgroundColor: resolveDividerColor(theme.colors)
-    }, style]
+    style: rootStyle
   });
 }
 

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

@@ -1,8 +1,9 @@
 "use strict";
 
+import { StyleSheet } from "react-native";
 /**
  * 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`
+ *  - STRUCTURE (the StyleSheet.hairlineWidth'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.
@@ -27,19 +28,19 @@ export function resolveDividerColor(colors) {
 }
 
 /**
- * Structural styles only — the hairline's thickness on the theme's `borderWidths` scale, spanning
+ * Structural styles only — the StyleSheet.hairlineWidth'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 => ({
+export const dividerStructure = createThemedVariants(_theme => ({
   variants: {
     orientation: {
       horizontal: {
-        height: theme.borderWidths.thin,
+        height: StyleSheet.hairlineWidth,
         width: "100%"
       },
       vertical: {
-        width: theme.borderWidths.thin,
+        width: StyleSheet.hairlineWidth,
         alignSelf: "stretch"
       }
     }

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

@@ -59,3 +59,11 @@ None — no icon, no new theme token, no new core helper needed for this compone
 ## 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.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.

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

@@ -12,7 +12,8 @@
  * 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.
+ * without ever showing a frozen half-animated frame. Every duration and easing comes from the global
+ * motion system (`core/motion`) — `slow`/`decelerate` entering, `normal`/`accelerate` leaving.
  *
  * 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
@@ -36,18 +37,20 @@
  * 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 { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Keyboard, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import { MOTION_TRANSFORM, useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { useTheme } from "../../theme/hooks.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 { drawerGrabberStructure, drawerHandleStructure, drawerOverlayStructure, drawerPanelStructure, 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";
+// Decorative dismiss scrim, not a role token — same reasoning Modal's MODAL_BACKDROP records.
+// Opacity is the shared `scrimOpacity` knob, not a locally-guessed hex.
+const DRAWER_BACKDROP = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const Drawer = /*#__PURE__*/memo(function Drawer({
   visible,
   onRequestClose,
@@ -55,13 +58,12 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
+  const motion = useMotion();
   const {
     height: windowHeight
   } = useWindowDimensions();
-  const panelColors = resolveDrawerPanelColors(theme.colors);
-  const duration = resolveDrawerAnimationDuration(reducedMotion);
-  const bottomInset = resolveDrawerBottomInset(theme.space[5], Platform.OS);
+  const panelColors = useMemo(() => resolveDrawerPanelColors(theme.colors), [theme.colors]);
+  const bottomInset = useMemo(() => resolveDrawerBottomInset(theme.space[5], Platform.OS), [theme.space]);
   const portalContainer = useContext(ModalPortalContext);
 
   // Kept mounted through the exit animation — see the file-level comment on why RN Modal's own
@@ -69,77 +71,161 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   const [mounted, setMounted] = useState(visible);
   const mountedRef = useRef(mounted);
   mountedRef.current = mounted;
-  const progress = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const progress = useAnimatedValue(visible ? 1 : 0);
+  const running = useRef(null);
   const unmountTimer = useRef(null);
+
+  // The panel is bottom-anchored (`translateY` rests at 0, flush with the window's own bottom
+  // edge), so RN's `KeyboardAvoidingView` doesn't help here — shrinking the panel's own height
+  // moves its TOP edge up but leaves its bottom (and therefore any content near the bottom, e.g. a
+  // search field's results) exactly where it was, still under the keyboard. Growing the panel's
+  // OWN bottom padding by the keyboard's height instead keeps the bottom edge flush with the
+  // window but pushes `children` up inside the panel by that same amount, landing their bottom
+  // edge right above the keyboard's top edge. `keyboardWillShow`/`keyboardWillHide` on iOS track
+  // the keyboard's own slide so this can animate in lockstep; Android has no "will" pair. Driven by
+  // an `Animated.Value` (not a plain `setState` snap) so the padding grows in step with the
+  // keyboard's own slide-in instead of jumping the panel's top edge — and the still-focused
+  // input inside it — in one frame, which on some Android/IME combos can itself confuse the soft
+  // keyboard into dismissing right as the user starts typing.
+  // Gated on `mounted`: the usual consumer keeps one `<Drawer visible={false}>` permanently in the
+  // tree, so an unguarded listener runs this JS-driven tween on every keyboard open anywhere on the
+  // screen. `Keyboard.metrics()` seeds the height on open, since nothing tracked it while closed.
+  // react-native-web's `Keyboard` is a stub with no `metrics` method at all (unlike the other calls
+  // here, which it does implement as no-ops), so it's skipped on web rather than called and crashing.
+  const keyboardHeight = useAnimatedValue(0);
   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
+    if (!mounted) return undefined;
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const fallbackMs = motion.duration("normal");
+    const settle = (toValue, eventMs) => {
+      if (!motion.enabled) {
+        keyboardHeight.setValue(toValue);
+        return;
+      }
+      Animated.timing(keyboardHeight, {
+        toValue,
+        duration: eventMs || fallbackMs,
+        useNativeDriver: false
       }).start();
-      unmountTimer.current = setTimeout(() => setMounted(false), duration);
-    }
+    };
+    const initialMetrics = Platform.OS === "web" ? undefined : Keyboard.metrics();
+    keyboardHeight.setValue(initialMetrics?.height ?? 0);
+    const showSub = Keyboard.addListener(showEvent, e => {
+      settle(e.endCoordinates.height, e.duration);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, e => {
+      settle(0, e?.duration);
+    });
     return () => {
-      if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+      showSub.remove();
+      hideSub.remove();
     };
-  }, [visible, duration, progress]);
+  }, [keyboardHeight, mounted, motion]);
+  useEffect(() => {
+    const clearUnmount = () => {
+      if (unmountTimer.current !== null) {
+        clearTimeout(unmountTimer.current);
+        unmountTimer.current = null;
+      }
+    };
+    running.current?.stop();
+    clearUnmount();
+    if (visible) {
+      setMounted(true);
+      if (!motion.enabled) {
+        progress.setValue(1);
+        return;
+      }
+      running.current = motion.timing(progress, 1, {
+        duration: "slow",
+        easing: "decelerate"
+      });
+      running.current.start();
+      return;
+    }
+    if (!mountedRef.current) return;
+    const exitMs = motion.duration("normal");
+    if (!motion.enabled || exitMs === 0) {
+      progress.setValue(0);
+      setMounted(false);
+      return;
+    }
+    running.current = motion.timing(progress, 0, {
+      duration: "normal",
+      easing: "accelerate"
+    });
+    running.current.start();
+    unmountTimer.current = setTimeout(() => {
+      unmountTimer.current = null;
+      setMounted(false);
+    }, exitMs);
+    return clearUnmount;
+  }, [visible, motion, progress]);
+  useEffect(() => () => {
+    running.current?.stop();
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+  }, []);
 
   // 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 floatingStyle = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.lg);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "lg"),
+      ...floatingSurfaceStyle(theme, "lg")
+    };
+  }, [theme]);
+  const panelStyle = useMemo(() => [drawerPanelStructure(theme), floatingStyle, {
+    transform: [{
+      translateY: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [windowHeight, 0]
+      })
+    }]
+  }], [theme, floatingStyle, progress, windowHeight]);
+  const backdropStyle = useMemo(() => [styles.backdrop, {
+    opacity: progress
+  }], [progress]);
+  const keyboardPadding = useMemo(() => ({
+    paddingBottom: Animated.add(bottomInset, keyboardHeight)
+  }), [bottomInset, keyboardHeight]);
+  const grabberStyle = useMemo(() => [drawerGrabberStructure(), {
+    backgroundColor: panelColors.grabber
+  }], [panelColors.grabber]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Pressable, {
       testID: testID ? `${testID}-backdrop` : undefined,
       accessible: false,
+      tabIndex: -1,
       style: StyleSheet.absoluteFill,
       onPress: onRequestClose,
       children: /*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "none",
-        style: [StyleSheet.absoluteFill, {
-          backgroundColor: DRAWER_BACKDROP,
-          opacity: progress
-        }]
+        style: backdropStyle
       })
     }), /*#__PURE__*/_jsx(View, {
       style: drawerOverlayStructure(),
       pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      children: /*#__PURE__*/_jsx(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]
+        style: panelStyle,
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          style: keyboardPadding,
+          children: [/*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-handle` : undefined,
+            style: drawerHandleStructure(theme),
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: /*#__PURE__*/_jsx(View, {
+              style: grabberStyle
+            })
+          }), children]
+        })
       })
     })]
   });
@@ -163,9 +249,17 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   return /*#__PURE__*/_jsx(RNModal, {
     visible: mounted,
     transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: onRequestClose,
     children: content
   });
 });
+const styles = StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: DRAWER_BACKDROP
+  }
+});
 //# sourceMappingURL=Drawer.js.map

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

@@ -6,8 +6,9 @@
  *    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
+ *  - TIMING is not here at all: duration, easing and the reduced-motion contract (WCAG 2.3.3) come
+ *    from the global motion system (`core/motion`), so retuning the library retunes this drawer.
+ *  - The safe-area-less bottom-inset fallback is `resolveDrawerBottomInset` — kept pure so it is
  *    unit-testable without rendering React Native.
  *
  * Free of React and of any `Modal`/`Pressable`/`Animated` import, so the tests import it directly
@@ -16,20 +17,6 @@
 
 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
@@ -88,10 +75,10 @@ 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
+    borderTopLeftRadius: theme.radii.xl,
+    borderTopRightRadius: theme.radii.xl,
+    borderCurve: "continuous",
+    paddingHorizontal: theme.space[5]
   }
 }));