@boostdev/design-system-react-native 0.2.5 → 0.3.0

package/CHANGELOG.md

@@ -1,6 +1,93 @@
 # Changelog
 
 All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.3.0] - 2026-09-23
+### Added
+- Feat(alert): support arbitrary and theme-aware children
+
+Render string/number children in the themed body Text as before, but render any other node as-is so children can hold custom layout (View, Pressable, etc.). Also accept a function child that receives the variant's resolved text color, so custom content can match the theme. ([`4a43a8e`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/4a43a8ead2a70675a2e7eb39e86a0bed18515c93))
+- Feat(notification-banner): support arbitrary and theme-aware children
+
+Mirror the Alert change: only string/number children go in the themed body Text; any other node renders as-is. Move flex:1 onto a wrapper View so layout is preserved for non-text children. Accept a function child that receives the resolved text color. ([`d804efc`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/d804efc5721924b700730c23402838ca5da1bcb6))
+
+### Fixed
+- Fix(dropdown-menu): make each item reachable for VoiceOver on iOS
+
+The sheet's content was wrapped in a no-op Pressable to swallow presses.
+On iOS a Pressable is accessible by default, and an accessible view is a
+single element to VoiceOver and XCUITest: the whole sheet (title, Done,
+every item) read as one element whose label listed all items, and no item
+could be picked on its own. The wrapper was also unneeded: the backdrop is
+a sibling behind the sheet, so sheet touches never reach it.
+
+The wrapper is gone, so title, Done and each menuitem are separate
+elements. The backdrop still closes on press but is hidden from assistive
+tech (testID "bds-dropdownmenu-backdrop"); Done is the accessible close.
+The sheet is accessibilityViewIsModal and closes on VoiceOver's escape
+gesture. Specs pin the roleless backdrop, the missing "Close menu" button,
+independent menuitems and no press-swallowing wrapper around them.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`a42e0da`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/a42e0daa2ece8db443326b07840c8a15edcb2884))
+- Fix(side-sheet): hide the backdrop from assistive tech, close on escape
+
+The full-screen backdrop was an accessible "Close side sheet" button next
+to the real close button. VoiceOver listed the close control twice, and a
+double-tap on the full-screen element activates its centre, which can land
+on the panel instead of closing.
+
+The backdrop still closes on press but is hidden from assistive tech
+(testID "bds-sidesheet-backdrop"); the close button is the one accessible
+close. The panel is accessibilityViewIsModal and closes on VoiceOver's
+escape gesture. Specs pin exactly one "Close side sheet" button and a
+roleless backdrop that still calls onClose.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`4b93294`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/4b932947c3989cbf9a23cedb9c545b2d37243781))
+- Fix(dialog): make the dialog's content reachable for VoiceOver on iOS
+
+The backdrop Pressable wrapped the panel. On iOS a Pressable is
+accessible by default, and an accessible view is a single element to
+VoiceOver and XCUITest: an open dialog was one full-screen "Close dialog"
+button. The title, the content and the dialog's own buttons could not be
+reached, and a VoiceOver double-tap activated the centre of the screen
+(the panel), so it did nothing.
+
+The backdrop is now a sibling behind the panel: it still closes on press
+but is hidden from assistive tech (testID "bds-dialog-backdrop"), and the
+close button is the accessible close. The panel is a plain View,
+accessibilityViewIsModal, and closes on VoiceOver's escape gesture.
+Verified on an iPhone 17 simulator (iOS 26.1): title, close button,
+content and a "Klaar" button inside are separate elements, a backdrop tap
+closes, a panel tap does not, and the dialog looks the same. Specs pin one
+"Close dialog" button, a roleless backdrop that does not contain the
+content, and content presses that do not close.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`fe6703e`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/fe6703e4aeb9b716212dacf94886cdc7629b2f55))
+- Fix(popover): keep the popover's content reachable for VoiceOver on iOS
+
+The "Close popover" backdrop Pressable wrapped the panel, so on iOS the
+open popover was a single accessibility element and its content could not
+be reached by VoiceOver or XCUITest.
+
+The backdrop is now a sibling behind the panel. Popover has no close
+button, so the backdrop stays the accessible "Close popover" button, with
+onAccessibilityTap so a VoiceOver double-tap closes it (without it the
+activation lands on the centred panel). The panel is a plain View and
+VoiceOver's escape gesture closes the popover. Specs pin the separate
+backdrop button, content outside it, and content presses that do not
+close.
+
+Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> ([`5ddb57c`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/5ddb57c5158b8181d9d87eb706099662519fbdad))
+
+## [0.2.6] - 2026-06-15
+### Fixed
+- Fix(collapsible): render the disclosure indicator as a border-box chevron instead of the ▸ (U+25B8) glyph char
+
+The Collapsible's caret was a text glyph, which reads as a stray unicode
+character rather than a crisp icon. It is now a small View with two adjacent
+borders, rotated -45deg when collapsed (points right) to 45deg when expanded
+(points down) — font-independent and icon-like, with the toggle animation
+preserved. The spec pins it as a border chevron, not a glyph. ([`ee649db`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/ee649db))
+
 ## [0.2.5] - 2026-06-12
 ### Fixed
 - Fix(side-sheet): body sizes to content instead of collapsing to zero height

package/dist/index.cjs

@@ -530,6 +530,7 @@ function Alert({
     error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
   };
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === "function" ? children({ color: text }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     import_react_native9.View,
     {
@@ -540,7 +541,7 @@ function Alert({
         icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.View, { style: styles7.icon, children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native9.View, { style: styles7.content, children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: [styles7.title, { color: text }], children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: [styles7.body, { color: text }], children })
+          typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native9.Text, { style: [styles7.body, { color: text }], children: resolvedChildren }) : resolvedChildren
         ] }),
         onDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_react_native9.Pressable,
@@ -569,8 +570,10 @@ var styles8 = import_react_native10.StyleSheet.create({
     paddingHorizontal: import_native.spacing.m,
     gap: import_native.spacing.xs
   },
+  body: {
+    flex: 1
+  },
   content: {
-    flex: 1,
     fontSize: import_native.font.size.bodyS,
     fontFamily: import_native.font.family.body,
     lineHeight: lineHeight.bodyS
@@ -596,6 +599,7 @@ function NotificationBanner({
     error: { bg: colors2.colorRedSubtle, text: colors2.colorOnBg, border: colors2.colorError }
   };
   const { bg, text, border: borderColor } = variantColors[variant];
+  const resolvedChildren = typeof children === "function" ? children({ color: text }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_react_native10.View,
     {
@@ -603,7 +607,7 @@ function NotificationBanner({
       accessibilityLiveRegion: isUrgent ? "assertive" : "polite",
       style: [styles8.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { style: [styles8.content, { color: text }], children }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.View, { style: styles8.body, children: typeof resolvedChildren === "string" || typeof resolvedChildren === "number" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native10.Text, { style: [styles8.content, { color: text }], children: resolvedChildren }) : resolvedChildren }),
         action,
         onDismiss && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_react_native10.Pressable,
@@ -1145,7 +1149,12 @@ var styles15 = import_react_native17.StyleSheet.create({
     lineHeight: lineHeight.body
   },
   chevron: {
-    fontSize: import_native.font.size.body,
+    // Border-box chevron (no glyph font dependency): a small square with two
+    // adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
+    width: 8,
+    height: 8,
+    borderRightWidth: 2,
+    borderBottomWidth: 2,
     marginStart: import_native.spacing.xs
   },
   content: {
@@ -1184,9 +1193,9 @@ function Collapsible({
     }
     onToggle?.(next);
   }, [isOpen, isControlled, onToggle, rotation]);
-  const rotateZ = rotation.interpolate({
+  const rotate = rotation.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "90deg"]
+    outputRange: ["-45deg", "45deg"]
   });
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     import_react_native17.View,
@@ -1205,12 +1214,12 @@ function Collapsible({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native17.Text, { style: [styles15.summaryText, { color: colors2.colorOnBg }], children: summary }),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                import_react_native17.Animated.Text,
+                import_react_native17.Animated.View,
                 {
-                  style: [styles15.chevron, { color: colors2.colorOnBgSubtle, transform: [{ rotateZ }] }],
+                  testID: "bds-collapsible-chevron",
+                  style: [styles15.chevron, { borderColor: colors2.colorOnBgSubtle, transform: [{ rotate }] }],
                   importantForAccessibility: "no",
-                  accessibilityElementsHidden: true,
-                  children: "\u25B8"
+                  accessibilityElementsHidden: true
                 }
               )
             ]
@@ -3792,46 +3801,48 @@ function Dialog({
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native44.Pressable,
-        {
-          style: styles40.overlay,
-          onPress: onClose,
-          accessibilityRole: "button",
-          accessibilityLabel: "Close dialog",
-          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-            import_react_native44.Pressable,
-            {
-              style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
-              onPress: () => {
-              },
-              accessibilityRole: "none",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_react_native44.Pressable,
-                  {
-                    style: styles40.closeButton,
-                    onPress: onClose,
-                    accessibilityRole: "button",
-                    accessibilityLabel: "Close dialog",
-                    hitSlop: 8,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      import_react_native44.Text,
-                      {
-                        style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
-                        "aria-hidden": true,
-                        children: "\u2715"
-                      }
-                    )
-                  }
-                ),
-                !!title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native44.View, { style: styles40.header, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native44.Text, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
-                children
-              ]
-            }
-          )
-        }
-      )
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native44.View, { style: styles40.overlay, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native44.Pressable,
+          {
+            testID: "bds-dialog-backdrop",
+            style: import_react_native44.StyleSheet.absoluteFill,
+            onPress: onClose,
+            accessible: false,
+            importantForAccessibility: "no"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          import_react_native44.View,
+          {
+            style: [styles40.panel, { backgroundColor: colors2.colorGreySubtle }, style],
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: onClose,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_react_native44.Pressable,
+                {
+                  style: styles40.closeButton,
+                  onPress: onClose,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close dialog",
+                  hitSlop: 8,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    import_react_native44.Text,
+                    {
+                      style: [styles40.closeText, { color: colors2.colorOnBgSubtle }],
+                      "aria-hidden": true,
+                      children: "\u2715"
+                    }
+                  )
+                }
+              ),
+              !!title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native44.View, { style: styles40.header, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native44.Text, { style: [styles40.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
+              children
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -3949,8 +3960,9 @@ function SideSheet({
               {
                 style: import_react_native45.StyleSheet.absoluteFill,
                 onPress: onClose,
-                accessibilityRole: "button",
-                accessibilityLabel: "Close side sheet"
+                testID: "bds-sidesheet-backdrop",
+                accessible: false,
+                importantForAccessibility: "no"
               }
             )
           }
@@ -3966,7 +3978,8 @@ function SideSheet({
               },
               style
             ],
-            accessibilityRole: "none",
+            accessibilityViewIsModal: true,
+            onAccessibilityEscape: onClose,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 import_react_native45.View,
@@ -4278,8 +4291,9 @@ function DropdownMenu({
                 {
                   style: import_react_native47.StyleSheet.absoluteFill,
                   onPress: () => setOpen(false),
-                  accessibilityRole: "button",
-                  accessibilityLabel: "Close menu"
+                  testID: "bds-dropdownmenu-backdrop",
+                  accessible: false,
+                  importantForAccessibility: "no"
                 }
               )
             }
@@ -4294,100 +4308,95 @@ function DropdownMenu({
                   transform: [{ translateY: slideAnim }]
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                import_react_native47.Pressable,
-                {
-                  onPress: () => {
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native47.SafeAreaView, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                      import_react_native47.View,
-                      {
-                        style: [
-                          styles43.sheetHeader,
-                          { borderBottomColor: colors2.colorBgSubtle }
-                        ],
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native47.Text, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                            import_react_native47.Pressable,
-                            {
-                              accessibilityRole: "button",
-                              accessibilityLabel: "Close",
-                              onPress: () => setOpen(false),
-                              hitSlop: 8,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                                import_react_native47.Text,
-                                {
-                                  style: [
-                                    styles43.closeText,
-                                    { color: colors2.colorInteractive }
-                                  ],
-                                  children: "Done"
-                                }
-                              )
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                      import_react_native47.FlatList,
-                      {
-                        data: items,
-                        keyExtractor: (item) => item.id,
-                        renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-                          item.separator && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                            import_react_native47.View,
+              accessibilityViewIsModal: true,
+              onAccessibilityEscape: () => setOpen(false),
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native47.SafeAreaView, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                  import_react_native47.View,
+                  {
+                    style: [
+                      styles43.sheetHeader,
+                      { borderBottomColor: colors2.colorBgSubtle }
+                    ],
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native47.Text, { style: [styles43.sheetTitle, { color: colors2.colorOnBg }], children: title }),
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                        import_react_native47.Pressable,
+                        {
+                          accessibilityRole: "button",
+                          accessibilityLabel: "Close",
+                          onPress: () => setOpen(false),
+                          hitSlop: 8,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                            import_react_native47.Text,
                             {
                               style: [
-                                styles43.separator,
-                                { backgroundColor: colors2.colorBgSubtle }
-                              ],
-                              accessibilityRole: "none"
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                            import_react_native47.Pressable,
-                            {
-                              accessibilityRole: "menuitem",
-                              accessibilityLabel: item.label,
-                              accessibilityState: { disabled: item.disabled },
-                              disabled: item.disabled,
-                              onPress: () => handleItemPress(item),
-                              style: ({ pressed }) => [
-                                styles43.item,
-                                pressed && { backgroundColor: colors2.colorBgSubtle },
-                                item.disabled && { opacity: 0.4 }
+                                styles43.closeText,
+                                { color: colors2.colorInteractive }
                               ],
-                              children: [
-                                !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                                  import_react_native47.View,
-                                  {
-                                    importantForAccessibility: "no-hide-descendants",
-                                    accessibilityElementsHidden: true,
-                                    children: item.icon
-                                  }
-                                ),
-                                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                                  import_react_native47.Text,
-                                  {
-                                    style: [
-                                      styles43.itemText,
-                                      { color: colors2.colorOnBg }
-                                    ],
-                                    children: item.label
-                                  }
-                                )
-                              ]
+                              children: "Done"
                             }
                           )
-                        ] })
-                      }
-                    )
-                  ] })
-                }
-              )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  import_react_native47.FlatList,
+                  {
+                    data: items,
+                    keyExtractor: (item) => item.id,
+                    renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+                      item.separator && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                        import_react_native47.View,
+                        {
+                          style: [
+                            styles43.separator,
+                            { backgroundColor: colors2.colorBgSubtle }
+                          ],
+                          accessibilityRole: "none"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+                        import_react_native47.Pressable,
+                        {
+                          accessibilityRole: "menuitem",
+                          accessibilityLabel: item.label,
+                          accessibilityState: { disabled: item.disabled },
+                          disabled: item.disabled,
+                          onPress: () => handleItemPress(item),
+                          style: ({ pressed }) => [
+                            styles43.item,
+                            pressed && { backgroundColor: colors2.colorBgSubtle },
+                            item.disabled && { opacity: 0.4 }
+                          ],
+                          children: [
+                            !!item.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                              import_react_native47.View,
+                              {
+                                importantForAccessibility: "no-hide-descendants",
+                                accessibilityElementsHidden: true,
+                                children: item.icon
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                              import_react_native47.Text,
+                              {
+                                style: [
+                                  styles43.itemText,
+                                  { color: colors2.colorOnBg }
+                                ],
+                                children: item.label
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] })
             }
           )
         ] })
@@ -4431,6 +4440,7 @@ function Popover({
 }) {
   const { colors: colors2 } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const close = () => setIsOpen(false);
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native48.View, { style: [styles44.wrapper, style], children: [
     import_react19.default.cloneElement(children, {
       onPress: () => setIsOpen(true),
@@ -4443,27 +4453,28 @@ function Popover({
         visible: isOpen,
         transparent: true,
         animationType: "fade",
-        onRequestClose: () => setIsOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_react_native48.Pressable,
-          {
-            style: styles44.overlay,
-            onPress: () => setIsOpen(false),
-            accessibilityRole: "button",
-            accessibilityLabel: "Close popover",
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              import_react_native48.Pressable,
-              {
-                style: [styles44.panel, { backgroundColor: colors2.colorBg }],
-                onPress: () => {
-                },
-                accessibilityRole: "none",
-                accessibilityLabel,
-                children: content
-              }
-            )
-          }
-        )
+        onRequestClose: close,
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native48.View, { style: styles44.overlay, onAccessibilityEscape: close, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_react_native48.Pressable,
+            {
+              testID: "bds-popover-backdrop",
+              style: import_react_native48.StyleSheet.absoluteFill,
+              onPress: close,
+              onAccessibilityTap: close,
+              accessibilityRole: "button",
+              accessibilityLabel: "Close popover"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_react_native48.View,
+            {
+              style: [styles44.panel, { backgroundColor: colors2.colorBg }],
+              accessibilityLabel,
+              children: content
+            }
+          )
+        ] })
       }
     )
   ] });

package/dist/index.d.cts

@@ -137,20 +137,30 @@ interface SkeletonProps {
 declare function Skeleton({ style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the alert's theme. */
+type AlertContentRenderProp = (props: {
+    color: string;
+}) => ReactNode;
 interface AlertProps {
     variant?: AlertVariant;
     icon?: ReactNode;
     title?: string;
-    children: ReactNode;
+    children: ReactNode | AlertContentRenderProp;
     onDismiss?: () => void;
     style?: StyleProp<ViewStyle>;
 }
 declare function Alert({ variant, icon, title, children, onDismiss, style, }: Readonly<AlertProps>): react_jsx_runtime.JSX.Element;
 
 type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the banner's theme. */
+type BannerContentRenderProp = (props: {
+    color: string;
+}) => ReactNode;
 interface NotificationBannerProps {
     variant?: BannerVariant;
-    children: ReactNode;
+    children: ReactNode | BannerContentRenderProp;
     action?: ReactNode;
     onDismiss?: () => void;
     style?: StyleProp<ViewStyle>;

package/dist/index.d.ts

@@ -137,20 +137,30 @@ interface SkeletonProps {
 declare function Skeleton({ style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the alert's theme. */
+type AlertContentRenderProp = (props: {
+    color: string;
+}) => ReactNode;
 interface AlertProps {
     variant?: AlertVariant;
     icon?: ReactNode;
     title?: string;
-    children: ReactNode;
+    children: ReactNode | AlertContentRenderProp;
     onDismiss?: () => void;
     style?: StyleProp<ViewStyle>;
 }
 declare function Alert({ variant, icon, title, children, onDismiss, style, }: Readonly<AlertProps>): react_jsx_runtime.JSX.Element;
 
 type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+/** Function form of children: receives the variant's resolved text color so
+ *  custom content can match the banner's theme. */
+type BannerContentRenderProp = (props: {
+    color: string;
+}) => ReactNode;
 interface NotificationBannerProps {
     variant?: BannerVariant;
-    children: ReactNode;
+    children: ReactNode | BannerContentRenderProp;
     action?: ReactNode;
     onDismiss?: () => void;
     style?: StyleProp<ViewStyle>;