pixelize-native-library 1.2.1 → 1.3.0

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DateRangePickerProps.js.map

package/lib/module/modules/date-picker/MODULE.md

@@ -23,11 +23,13 @@ logic, formatting) is hand-written and unit-tested rather than pulled in from a
 | `__tests__/DatePicker.render.test.tsx` | Render: all four components, open/close, selection, disabled, clear, tabs, backdrop dismiss, web-portal opt-in, **and the rendered 44dp targets**. |
 | `__tests__/DatePicker.motion.test.tsx` | Reduce-motion: the sheet's reveal and a time option's press must be at their end value on the next frame. |
 | `__tests__/PickerShell.keyboard.web.test.tsx` | Escape / Tab trap / focus restore on the web-portal branch, and their deliberate absence on the RNModal branch. |
+| `__tests__/PickerShell.dom.test.tsx` | Real DOM: the sheet's modal/hidden props on react-native-web. |
 | `__tests__/Calendar.keys.web.test.ts` | The web key→move mapping and the roving-focus effect, against a hand-built DOM. |
 
 ## Props
 
-**Calendar** — `value?`, `onChange?(date)` (single mode), `mode?: "single" | "range"` (`single`),
+**Calendar** — `value?`, `onChange?(date)` (single mode), `onSelect?(date)` (alias for `onChange`,
+taking precedence when both are passed), `mode?: "single" | "range"` (`single`),
 `rangeValue?`, `onRangeChange?(range)`, `minDate?`, `maxDate?`, `disabledDates?: Date[]`,
 `firstDayOfWeek?: 0 | 1` (`1` = Monday), `locale?` (`en-US`, drives month/weekday NAMES only via
 `Intl`), `style?`, `testID?`. `onChange` is optional — a range-only `Calendar` isn't forced to pass a
@@ -37,7 +39,8 @@ no-op; the reverse holds for `onRangeChange`.
 `testID?`.
 
 **DatePicker** — `value?`, `onChange(date | null)`, `mode?: "date" | "datetime" | "time"` (`date`),
-`label?`, `placeholder?` (`"Select date"`), `minDate?`, `maxDate?`, `disabled?`, `error?`,
+`confirmOnSelect?` (`false`; when true, tapping a day in `mode="date"` commits and closes the sheet —
+ignored in the other two modes), `label?`, `placeholder?` (`"Select date"`), `minDate?`, `maxDate?`, `disabled?`, `error?`,
 `clearable?` (`true`), `format?(date)` (replaces the whole field string), `use24Hour?`,
 `firstDayOfWeek?`, `locale?`, `containerStyle?: LayoutStyle`, `testID?`.
 
@@ -181,10 +184,4 @@ month grid are plain views, matching `Tabs`'/`Menu`'s choice not to virtualize s
 Formatters (`Intl.DateTimeFormat`) are cached per `(locale, shape)` — a month render formats 42
 accessible day labels, and constructing a fresh formatter per cell measurably dominated that work.
 
-## 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.
+`PickerShell`'s backdrop scrim uses `MOTION_TRANSFORM.scrimOpacity`.

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=PickerFieldProps.js.map

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

@@ -17,19 +17,22 @@
  */
 
 import { memo, useContext, useMemo, useRef } from "react";
-import { Animated, Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import { Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
-import { useReveal } from "../../core/motion/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
+import { MOTION_TRANSFORM, useReveal } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
-import { ModalPortalContext } from "../modal/ModalPortalContext.js";
-import { renderWebPortal } from "../modal/renderWebPortal";
+import { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
 import { pickerFooterStructure, pickerOverlayStructure, pickerSheetStructure } from "./DatePicker.variants.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+
 // Decorative dismiss scrim behind the sheet — 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 constant
 // Select/Menu use for their identical backdrop.
-const BACKDROP_SCRIM = "#00000099";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BACKDROP_SCRIM = withAlpha("#000000", MOTION_TRANSFORM.scrimOpacity);
 export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   open,
   accessibilityLabel,
@@ -41,6 +44,10 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const portalContainer = useContext(ModalPortalContext);
   const sheetRef = useRef(null);
   // Only on the portal branch: the RN <Modal> path below already gets Escape/trap/restore from
@@ -70,9 +77,10 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
       style: styles.backdrop,
       onPress: onCancel
     }), /*#__PURE__*/_jsx(View, {
-      style: overlayStructure,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [overlayStructure, {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsxs(Reanimated.View, {
         ref: sheetRef,
         testID: testID ? `${testID}-sheet` : undefined
         // Mirrors Modal/BottomSheet: on the web-portal path there is no RN <Modal> to take the
@@ -85,7 +93,7 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
         accessibilityLabel: accessibilityLabel,
         onAccessibilityEscape: onCancel,
         style: sheetStyle,
-        children: [children, /*#__PURE__*/_jsxs(View, {
+        children: [renderNodeSlot(children, childrenSlotStyle), /*#__PURE__*/_jsxs(View, {
           style: footerStructure,
           children: [/*#__PURE__*/_jsx(Button, {
             variant: "outline",
@@ -110,8 +118,9 @@ export const PickerShell = /*#__PURE__*/memo(function PickerShell({
   if (portalled) {
     if (!open) return null;
     return renderWebPortal(/*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, {
+        pointerEvents: 'box-none'
+      }],
       children: sheet
     }), portalContainer);
   }

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=PickerShellProps.js.map

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

@@ -5,7 +5,8 @@
  */
 
 import { memo, useCallback, useMemo } from "react";
-import { Animated, FlatList, Platform, Pressable, Text, View } from "react-native";
+import { FlatList, Platform, Pressable, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { usePressMotion } from "../../core/motion/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { rippleColor } from "../../theme/platform/stateLayer.native.js";
@@ -58,7 +59,7 @@ const TimeOption = /*#__PURE__*/memo(function TimeOption({
     onPressOut: press.onPressOut,
     android_ripple: androidRipple,
     style: optionStyle,
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    children: /*#__PURE__*/_jsx(Reanimated.View, {
       testID: testID ? `${testID}-motion` : undefined,
       style: press.style,
       children: /*#__PURE__*/_jsx(Text, {

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=TimePickerProps.js.map

package/lib/module/modules/description-list/DescriptionList.js

@@ -0,0 +1,90 @@
+"use strict";
+
+/**
+ * DescriptionList — read-only label/value pairs for record-detail screens. Not pressable; use
+ * `list-item` for navigable rows.
+ */
+
+import { memo, useMemo } from "react";
+import { View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
+import { CopyButton } from "../copy-button/index.js";
+import { Skeleton } from "../skeleton/index.js";
+import { Text } from "../text/index.js";
+import { descriptionListRowStructure, descriptionListStructure, resolveDescriptionListLabelStyle, resolveDescriptionListValueRowStructure, resolveDescriptionListValueStyle } from "./DescriptionList.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LOADING_ROWS = 4;
+export const DescriptionList = /*#__PURE__*/memo(function DescriptionList({
+  items,
+  columns = 1,
+  layout = "stacked",
+  isLoading = false,
+  copyable = false,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const rootStyle = useMemo(() => [descriptionListStructure(theme), style], [theme, style]);
+  const rowStructure = descriptionListRowStructure(theme, {
+    layout,
+    columns
+  });
+  const labelStyle = useMemo(() => resolveDescriptionListLabelStyle(theme), [theme]);
+  const valueStyle = useMemo(() => resolveDescriptionListValueStyle(theme, theme.colors), [theme]);
+  const valueRowStyle = useMemo(() => resolveDescriptionListValueRowStructure(), []);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: rootStyle,
+      children: Array.from({
+        length: LOADING_ROWS
+      }, (_, index) => /*#__PURE__*/_jsxs(View, {
+        style: rowStructure,
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          width: 96,
+          height: 12,
+          staggerIndex: index
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          width: layout === "inline" ? 120 : 180,
+          height: 16,
+          staggerIndex: index
+        })]
+      }, index))
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    accessible: true,
+    accessibilityRole: "none",
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: "row",
+        flexWrap: columns === 2 ? "wrap" : "nowrap"
+      },
+      children: items.map((item, index) => {
+        const rowCopyable = copyable && item.copyable !== false && item.value.length > 0;
+        return /*#__PURE__*/_jsxs(View, {
+          style: rowStructure,
+          testID: testID ? `${testID}-row-${index}` : undefined,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: labelStyle,
+            children: item.label
+          }), /*#__PURE__*/_jsxs(View, {
+            style: valueRowStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: valueStyle,
+              children: item.value
+            }), rowCopyable ? /*#__PURE__*/_jsx(CopyButton, {
+              value: item.value,
+              variant: "icon",
+              size: "sm",
+              testID: testID ? `${testID}-copy-${index}` : undefined
+            }) : null]
+          })]
+        }, `${item.label}-${index}`);
+      })
+    })
+  });
+});
+//# sourceMappingURL=DescriptionList.js.map

package/lib/module/modules/description-list/DescriptionList.variants.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { createThemedVariants } from "../../core/style/index.js";
+export const descriptionListStructure = createThemedVariants(() => ({
+  base: {
+    width: "100%"
+  },
+  variants: {},
+  defaultVariants: {}
+}));
+export const descriptionListRowStructure = createThemedVariants(theme => ({
+  base: {
+    paddingVertical: theme.space[2],
+    gap: theme.space[1]
+  },
+  variants: {
+    layout: {
+      stacked: {
+        flexDirection: "column"
+      },
+      inline: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between"
+      }
+    },
+    columns: {
+      1: {
+        width: "100%"
+      },
+      2: {
+        width: "50%"
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "stacked",
+    columns: 1
+  }
+}));
+export function resolveDescriptionListLabelStyle(theme) {
+  return {
+    fontSize: theme.fontSizes.xs,
+    color: theme.colors.fg.muted,
+    ...theme.fontStyleForWeight(theme.fontWeights.medium)
+  };
+}
+export function resolveDescriptionListValueStyle(theme, colors) {
+  return {
+    fontSize: theme.fontSizes.sm,
+    color: colors.fg.default,
+    ...theme.fontStyleForWeight(theme.fontWeights.regular)
+  };
+}
+export function resolveDescriptionListValueRowStructure() {
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 1
+  };
+}
+//# sourceMappingURL=DescriptionList.variants.js.map

package/lib/module/modules/description-list/DescriptionListProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DescriptionListProps.js.map

package/lib/module/modules/description-list/MODULE.md

@@ -0,0 +1,15 @@
+# description-list/ — a read-only label/value grid for record-detail screens
+
+Read-only label/value grid for record-detail screens (`columns`, `layout`, loading skeletons, optional per-row copy).
+
+## Exports
+
+- `DescriptionList` — `items` (required), `columns` (`1`|`2`, default `1`), `layout`
+  (`stacked`|`inline`, default `stacked`), `isLoading` (`false`), `copyable` (`false` — only rows
+  whose own `DescriptionListItem.copyable` is set show the affordance), `style`, `testID`
+- Types: `DescriptionListItem`, `DescriptionListProps`, `DescriptionListLayout`, `DescriptionListColumns`
+
+## Dependencies
+
+- `copy-button`, `skeleton`, `text`
+- Not a substitute for `list-item` (no press/navigation semantics).

package/lib/module/modules/description-list/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DescriptionList } from "./DescriptionList.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DividerProps.js.map

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

@@ -8,6 +8,7 @@ interaction, and no text of its own.
 | File | Role |
 |------|------|
 | `Divider.tsx` | The component. Resolves the orientation's structural style + the decorative colour, applies them inline, `style` last. |
+| `DividerProps.ts` | `DividerProps` interface, imported back into `Divider.tsx` as a type-only import. |
 | `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. |
@@ -59,11 +60,3 @@ 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/document-viewer/DocumentViewer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { memo } from "react";
+import { Linking, View } from "react-native";
+import { Button } from "../button/index.js";
+import { Modal } from "../modal/index.js";
+import { Text } from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DocumentViewer = /*#__PURE__*/memo(function DocumentViewer({
+  uri,
+  title = "Document",
+  visible,
+  onRequestClose,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    title: title,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: style,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        children: "In-app PDF rendering needs a documented optional peer (proposed: `react-native-pdf` or system viewer)."
+      }), /*#__PURE__*/_jsx(Button, {
+        label: "Open in browser",
+        variant: "outline",
+        onPress: () => void Linking.openURL(uri)
+      })]
+    })
+  });
+});
+//# sourceMappingURL=DocumentViewer.js.map

package/lib/module/modules/document-viewer/DocumentViewerProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DocumentViewerProps.js.map

package/lib/module/modules/document-viewer/MODULE.md

@@ -0,0 +1,12 @@
+# document-viewer/ — a document and PDF viewing shell
+
+Land-deed / PDF viewing shell. **No PDF peer is wired yet** — the body renders a note plus an
+"Open in browser" `Button` that hands `uri` to RN's `Linking`, inside this library's own `Modal`.
+Proposed peer: `react-native-pdf` or the platform document APIs.
+
+## Props
+
+`uri` (required, remote PDF URL), `title?`, `visible` (required), `onRequestClose` (required),
+`style?: LayoutStyle`, `testID?`.
+
+Exported from the package root as `DocumentViewer` / `DocumentViewerProps`.

package/lib/module/modules/document-viewer/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DocumentViewer } from "./DocumentViewer.js";
+//# sourceMappingURL=index.js.map

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

@@ -38,14 +38,16 @@
  */
 
 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 { Keyboard, Modal as RNModal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import Reanimated, { interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { MOTION_TRANSFORM, runTiming, useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { reanimatedEasing } from "../../core/motion/reanimatedEasing.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 { ModalPortalContext, renderWebPortal } from "../../core/overlay/index.js";
+import { renderNodeSlot } from "../../core/slot/index.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, not a role token — same reasoning Modal's MODAL_BACKDROP records.
@@ -58,6 +60,10 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   testID
 }) {
   const theme = useTheme();
+  const childrenSlotStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    color: theme.colors.fg.default,
+    fontSize: theme.fontSizes.md
+  }], [theme]);
   const motion = useMotion();
   const {
     height: windowHeight
@@ -93,24 +99,21 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
   // 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);
+  const keyboardRunning = useRef(null);
   useEffect(() => {
     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();
+      keyboardRunning.current?.stop();
+      const durationMs = eventMs || fallbackMs;
+      const snap = !motion.enabled;
+      keyboardRunning.current = runTiming(keyboardHeight, toValue, durationMs, reanimatedEasing("standard"), 0, snap);
+      keyboardRunning.current.start();
     };
     const initialMetrics = Platform.OS === "web" ? undefined : Keyboard.metrics();
-    keyboardHeight.setValue(initialMetrics?.height ?? 0);
+    keyboardHeight.value = initialMetrics?.height ?? 0;
     const showSub = Keyboard.addListener(showEvent, e => {
       settle(e.endCoordinates.height, e.duration);
     });
@@ -118,6 +121,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
       settle(0, e?.duration);
     });
     return () => {
+      keyboardRunning.current?.stop();
       showSub.remove();
       hideSub.remove();
     };
@@ -134,7 +138,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     if (visible) {
       setMounted(true);
       if (!motion.enabled) {
-        progress.setValue(1);
+        progress.value = 1;
         return;
       }
       running.current = motion.timing(progress, 1, {
@@ -147,7 +151,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     if (!mountedRef.current) return;
     const exitMs = motion.duration("normal");
     if (!motion.enabled || exitMs === 0) {
-      progress.setValue(0);
+      progress.value = 0;
       setMounted(false);
       return;
     }
@@ -178,20 +182,18 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
       ...floatingSurfaceStyle(theme, "lg")
     };
   }, [theme]);
-  const panelStyle = useMemo(() => [drawerPanelStructure(theme), floatingStyle, {
+  const panelStaticStyle = useMemo(() => [drawerPanelStructure(theme), floatingStyle], [theme, floatingStyle]);
+  const panelAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
-      translateY: progress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [windowHeight, 0]
-      })
+      translateY: interpolate(progress.value, [0, 1], [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 backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
+  const keyboardPaddingStyle = useAnimatedStyle(() => ({
+    paddingBottom: bottomInset + keyboardHeight.value
+  }));
   const grabberStyle = useMemo(() => [drawerGrabberStructure(), {
     backgroundColor: panelColors.grabber
   }], [panelColors.grabber]);
@@ -202,20 +204,22 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
       tabIndex: -1,
       style: StyleSheet.absoluteFill,
       onPress: onRequestClose,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        pointerEvents: "none",
-        style: backdropStyle
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        style: [styles.backdrop, backdropAnimatedStyle, {
+          pointerEvents: 'none'
+        }]
       })
     }), /*#__PURE__*/_jsx(View, {
-      style: drawerOverlayStructure(),
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [drawerOverlayStructure(), {
+        pointerEvents: 'box-none'
+      }],
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
         testID: testID ? `${testID}-panel` : undefined,
         accessibilityViewIsModal: true,
         onAccessibilityEscape: onRequestClose,
-        style: panelStyle,
-        children: /*#__PURE__*/_jsxs(Animated.View, {
-          style: keyboardPadding,
+        style: [panelStaticStyle, panelAnimatedStyle],
+        children: /*#__PURE__*/_jsxs(Reanimated.View, {
+          style: keyboardPaddingStyle,
           children: [/*#__PURE__*/_jsx(View, {
             testID: testID ? `${testID}-handle` : undefined,
             style: drawerHandleStructure(theme),
@@ -224,7 +228,7 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
             children: /*#__PURE__*/_jsx(View, {
               style: grabberStyle
             })
-          }), children]
+          }), renderNodeSlot(children, childrenSlotStyle)]
         })
       })
     })]
@@ -241,8 +245,9 @@ export const Drawer = /*#__PURE__*/memo(function Drawer({
     // touching the shared `drawerOverlayStructure`/`drawerPanelStructure` resolvers the RNModal path
     // below still uses untouched.
     return renderWebPortal(/*#__PURE__*/_jsx(View, {
-      style: StyleSheet.absoluteFill,
-      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, {
+        pointerEvents: 'box-none'
+      }],
       children: content
     }), portalContainer);
   }

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=DrawerProps.js.map