@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Modal/Modal.docs.mdx → public/llms/components/modal.md}

@@ -1,25 +1,13 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { BodyText, BottomSheetModal, Box, Button, Center, Flex, Heading, Modal } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Modal.stories';
-
-<Meta title="Components / Modal" />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6300-2825&t=JmfcCbdIvO3jcjc3-4" />
-
-<BackToTopButton />
-
 # Modal
 
 The `Modal` component provides a versatile dialog interface that slides up from the bottom of the screen. It's built on top of
-the <StorybookLink to="components-bottom-sheet">`BottomSheetModal`</StorybookLink>
+the `BottomSheetModal`
 component and includes pre-configured layouts for common modal patterns including headers, content areas, and action buttons.
 
 The Modal component is ideal for displaying important information, collecting user input, or presenting choices that require user attention
 without navigating away from the current screen.
 
-If you need a modal layout inside a React Navigation modal screen, use <StorybookLink to="components-nav-modal">`NavModal`</StorybookLink> instead.
+If you need a modal layout inside a React Navigation modal screen, use `NavModal` instead.
 
 - [Playground](#playground)
 - [Usage](#usage)
@@ -31,6 +19,7 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
   - [Modal with Image](#modal-with-image)
   - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
+  - [JSX Description](#jsx-description)
   - [Sticky Custom Footer](#sticky-custom-footer)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
@@ -42,21 +31,21 @@ If you need a modal layout inside a React Navigation modal screen, use <Storyboo
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
-
-## Usage
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={openModal}>Open Modal</Button>
+
+    <Modal ref={modalRef} {...args} />
+  </ViewWrap>
+</View>
+```
 
 ### Basic Usage
 
-<UsageWrap>
-  <Center>
-    <Button onPress={() => {}}>Open Modal</Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useRef, useCallback } from 'react';
 import { Modal, Button, BottomSheetModal } from '@utilitywarehouse/hearth-react-native';
 
@@ -93,30 +82,30 @@ const MyComponent = () => {
 
 The Modal component extends the `BottomSheetModal` component and accepts all of its props, plus the following additional props:
 
-| Property                      | Type                                                               | Description                                                                                                        | Default        |
-| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------- |
-| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                                 | -              |
-| `description`                 | `string`                                                           | The description text displayed below the heading                                                                   | -              |
-| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                           | `true`         |
-| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                                 | -              |
-| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                               | -              |
-| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                        | -              |
-| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                      | -              |
-| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                          | -              |
-| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                        | `true`         |
-| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                      | `true`         |
-| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                      | -              |
-| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                       | `false`        |
-| `loadingHeading`              | `string`                                                           | The heading text to be displayed when loading is true. If not provided, the regular heading will be shown.         | `'Loading...'` |
-| `loadingDescription`          | `string`                                                           | The description text to be displayed when loading is true. If not provided, the regular description will be shown. | -              |
-| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                          | -              |
-| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                        | -              |
-| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')           | -              |
-| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline')      | -              |
-| `footer`                      | `ReactNode`                                                        | Custom footer content that replaces the built-in action buttons                                                    | -              |
-| `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                         | -              |
-| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                       | -              |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                            | `false`        |
+| Property                      | Type                                                               | Description                                                                                                            | Default        |
+| ----------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                                     | -              |
+| `description`                 | `ReactNode`                                                        | The description content displayed below the heading. Pass a string for the default styling, or JSX for custom content. | -              |
+| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                               | `true`         |
+| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                                     | -              |
+| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                                   | -              |
+| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                            | -              |
+| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                          | -              |
+| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                              | -              |
+| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                            | `true`         |
+| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                          | `true`         |
+| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                          | -              |
+| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                           | `false`        |
+| `loadingHeading`              | `string`                                                           | The heading text to be displayed when loading is true. If not provided, the regular heading will be shown.             | `'Loading...'` |
+| `loadingDescription`          | `string`                                                           | The description text to be displayed when loading is true. If not provided, the regular description will be shown.     | -              |
+| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                              | -              |
+| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                            | -              |
+| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')               | -              |
+| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline')          | -              |
+| `footer`                      | `ReactNode`                                                        | Custom footer content that replaces the built-in action buttons                                                        | -              |
+| `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                             | -              |
+| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                           | -              |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                                | `false`        |
 
 When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
 
@@ -133,9 +122,7 @@ The `ModalImage` component can be used to display an image within the Modal. It
 | `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
 | `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
 
-For more details about the ThemedImage component used internally, refer to the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
-
-## Features
+For more details about the ThemedImage component used internally, refer to the `ThemedImage` documentation.
 
 ### Automatic Layout Management
 
@@ -177,6 +164,7 @@ The Modal component is built with comprehensive accessibility support to ensure
 The Modal component automatically manages focus to provide a seamless experience:
 
 ```tsx
+// Example usage
 // Focus is automatically set when modal opens
 const MyModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
@@ -199,6 +187,7 @@ const MyModal = () => {
 You can enhance accessibility by providing custom labels for buttons and close actions:
 
 ```tsx
+// Example usage
 <Modal
   ref={modalRef}
   heading="Delete Item"
@@ -223,6 +212,7 @@ You can enhance accessibility by providing custom labels for buttons and close a
 Loading states are fully accessible with proper announcements:
 
 ```tsx
+// Example usage
 <Modal
   ref={modalRef}
   heading="Processing Payment"
@@ -247,6 +237,7 @@ Loading states are fully accessible with proper announcements:
 To test accessibility in your Modal implementation:
 
 ```tsx
+// Example usage
 import { AccessibilityInfo } from 'react-native';
 
 const TestableModal = () => {
@@ -283,19 +274,39 @@ The Modal component handles platform-specific accessibility differences:
 - **Android**: Implements TalkBack-specific accessibility patterns
 - **Cross-platform**: Consistent behavior across both platforms
 
-## Examples
-
 ### Basic Modal
 
-<Canvas of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={openModal}>Open Modal</Button>
+
+    <Modal ref={modalRef} {...args} />
+  </ViewWrap>
+</View>
+```
 
 ### Modal with Image
 
 Use the `image` prop to display an image-centric modal with centered content:
 
-<Canvas of={Stories.WithImage} />
+```tsx
+// Example usage
+<Modal
+  heading="Modal Heading"
+  description="This is a modal description"
+  showCloseButton
+  primaryButtonText="Primary"
+  secondaryButtonText="Cancel"
+  onPressCloseButton={() => null}
+  onPressPrimaryButton={() => null}
+  onPressSecondaryButton={() => null}
+/>
+```
 
 ```tsx
+// Example usage
 import { Modal, ModalImage, Button } from '@utilitywarehouse/hearth-react-native';
 
 const ImageModal = () => {
@@ -324,9 +335,34 @@ const ImageModal = () => {
 
 Create a modal that takes up the full screen height:
 
-<Canvas of={Stories.FullscreenModal} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 800 } : { flex: 1 }}>
+  <ViewWrap>
+    <Button onPress={openModal}>Open Fullscreen Modal</Button>
+
+    <Modal
+      ref={modalRef}
+      heading="Fullscreen Modal Heading"
+      description="This is a fullscreen modal description"
+      onPressCloseButton={closeModal}
+      primaryButtonText="Primary"
+      onPressPrimaryButton={closeModal}
+      secondaryButtonText="Cancel"
+      onPressSecondaryButton={closeModal}
+      fullscreen
+    >
+      <Box gap="200">
+        <BodyText>This is a fullscreen modal with content.</BodyText>
+        <BodyText>You can swipe it up and down to close.</BodyText>
+      </Box>
+    </Modal>
+  </ViewWrap>
+</View>
+```
 
 ```tsx
+// Example usage
 const FullscreenModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -351,9 +387,22 @@ const FullscreenModal = () => {
 
 Add custom content between the header and footer sections:
 
-<Canvas of={Stories.WithCustomContent} />
+```tsx
+// Example usage
+<Modal
+  heading="Modal Heading"
+  description="This is a modal description"
+  showCloseButton
+  primaryButtonText="Primary"
+  secondaryButtonText="Cancel"
+  onPressCloseButton={() => null}
+  onPressPrimaryButton={() => null}
+  onPressSecondaryButton={() => null}
+/>
+```
 
 ```tsx
+// Example usage
 const CustomContentModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -381,13 +430,43 @@ const CustomContentModal = () => {
 };
 ```
 
+### JSX Description
+
+`description` accepts a string for the default text styling, or JSX when you need custom content such as a link:
+
+```tsx
+// Example usage
+<Modal
+  ref={modalRef}
+  heading="Update available"
+  description={
+    <BodyText>
+      Read the <InlineLink onPress={() => {}}>release notes</InlineLink> before updating.
+    </BodyText>
+  }
+/>
+```
+
 ### Sticky Custom Footer
 
 Replace the built-in buttons with a custom sticky footer when you need custom layouts or button arrangements:
 
-<Canvas of={Stories.StickyCustomFooter} />
+```tsx
+// Example usage
+<Modal
+  heading="Modal Heading"
+  description="This is a modal description"
+  showCloseButton
+  primaryButtonText="Primary"
+  secondaryButtonText="Cancel"
+  onPressCloseButton={() => null}
+  onPressPrimaryButton={() => null}
+  onPressSecondaryButton={() => null}
+/>
+```
 
 ```tsx
+// Example usage
 const StickyCustomFooterModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -431,9 +510,22 @@ const StickyCustomFooterModal = () => {
 
 Show a loading spinner while processing:
 
-<Canvas of={Stories.Loading} />
+```tsx
+// Example usage
+<Modal
+  heading="Modal Heading"
+  description="This is a modal description"
+  showCloseButton
+  primaryButtonText="Primary"
+  secondaryButtonText="Cancel"
+  onPressCloseButton={() => null}
+  onPressPrimaryButton={() => null}
+  onPressSecondaryButton={() => null}
+/>
+```
 
 ```tsx
+// Example usage
 const LoadingModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -469,6 +561,7 @@ const LoadingModal = () => {
 Remove the close button for critical actions:
 
 ```tsx
+// Example usage
 const CriticalModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -496,6 +589,7 @@ const CriticalModal = () => {
 Create a modal with only one action button:
 
 ```tsx
+// Example usage
 const AlertModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -517,7 +611,7 @@ const AlertModal = () => {
 
 ### Navigation Modals
 
-For React Navigation modal screens, use <StorybookLink to="components-navmodal">`NavModal`</StorybookLink>. It contains the extracted screen-based modal layout, background variants, scrollable content handling, and the Android `triggerCloseAnimation()` ref used during navigation dismissal.
+For React Navigation modal screens, use `NavModal`. It contains the extracted screen-based modal layout, background variants, scrollable content handling, and the Android `triggerCloseAnimation()` ref used during navigation dismissal.
 
 ### Close handlers and state management
 
@@ -529,6 +623,7 @@ The Modal component provides multiple ways to handle closing the modal and manag
 - Use the `onChange` prop to detect when the modal is opened or closed based on the index parameter (0 for open, -1 for closed) and manage state accordingly.
 
 ```tsx
+// Example usage
 const MyModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -566,13 +661,12 @@ const MyModal = () => {
 };
 ```
 
-## Integration Notes
-
 ### BottomSheetModalProvider
 
 When using the Modal component, ensure your app is wrapped with `BottomSheetModalProvider`:
 
 ```tsx
+// Example usage
 import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
 
 const App = () => {
@@ -583,6 +677,7 @@ const App = () => {
 If your app already handles safe-area padding around modal content, you can disable Hearth's bottom-sheet safe-area spacing:
 
 ```tsx
+// Example usage
 import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
 
 const App = () => {
@@ -605,6 +700,7 @@ The Modal component forwards its ref to the underlying `BottomSheetModal`, givin
 - `snapToPosition(position)` - Snap to a specific position
 
 ```tsx
+// Example usage
 const modalRef = useRef<BottomSheetModal>(null);
 
 // Open modal
@@ -620,5 +716,5 @@ modalRef.current?.snapToIndex(1);
 ## External Resources
 
 This component is built on top of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) (v5). For more information about the
-underlying BottomSheet functionality, please refer to the <StorybookLink to="components-bottomsheet">BottomSheet documentation</StorybookLink> and
+underlying BottomSheet functionality, please refer to the BottomSheet documentation and
 the [official documentation](https://gorhom.dev/react-native-bottom-sheet/).

package/{src/components/NavModal/NavModal.docs.mdx → public/llms/components/nav-modal.md}

@@ -1,22 +1,8 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BodyText, Button, Flex } from '../../';
-import StorybookLink from '../../../../../shared/storybook/StorybookLink';
-import modalAndroidVideo from '../../../docs/assets/modal-android.mp4';
-import modaliOSVideo from '../../../docs/assets/modal-ios.mp4';
-import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './NavModal.stories';
-
-<Meta title="Components / Nav Modal" />
-
-<ViewFigmaButton url="https://www.figma.com/design/dLI9bmyMr42LV7dtFeW27J/Hearth-Patterns---Guides?node-id=6314-9103&t=oq3NaPLaAu3di6Db-4" />
-
-<BackToTopButton />
-
 # Nav Modal
 
 The `NavModal` component is the screen-based modal layout for navigation flows. Use it when a screen is already being presented by React Navigation with `presentation: 'modal'` or `presentation: 'fullScreenModal'` and you want Hearth's modal structure, actions, and Android close animation support.
 
-If you need a bottom-sheet modal that you present with a ref, use <StorybookLink to="components-modal">`Modal`</StorybookLink> instead.
+If you need a bottom-sheet modal that you present with a ref, use `Modal` instead.
 
 - [Playground](#playground)
 - [Usage](#usage)
@@ -27,13 +13,22 @@ If you need a bottom-sheet modal that you present with a ref, use <StorybookLink
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+  <NavModal {...args}>
+    <Box gap="200">
+      <BodyText>This is a navigation modal with content.</BodyText>
+      <BodyText>Use it for React Navigation modal screens instead of bottom sheets.</BodyText>
+    </Box>
+  </NavModal>
+</View>
+```
 
 ## Usage
 
 ```tsx
+// Example usage
 import { useNavigation } from '@react-navigation/native';
 import type { NavigationAction } from '@react-navigation/native';
 import { useCallback, useEffect, useRef } from 'react';
@@ -139,7 +134,7 @@ const styles = StyleSheet.create({
 | Property                 | Type                                                                                                             | Description                                                                                                                                                                                      | Default        |
 | ------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
 | `heading`                | `string`                                                                                                         | Heading text shown at the top of the modal when no `image` is provided.                                                                                                                          | -              |
-| `description`            | `string`                                                                                                         | Supporting text shown below the heading when no `image` is provided.                                                                                                                             | -              |
+| `description`            | `ReactNode`                                                                                                      | Supporting text shown below the heading when no `image` is provided. Pass a string for the default styling, or JSX for custom content.                                                           | -              |
 | `showCloseButton`        | `boolean`                                                                                                        | Whether to render the close button in the top-right corner.                                                                                                                                      | `true`         |
 | `primaryButtonText`      | `string`                                                                                                         | Label for the primary action button.                                                                                                                                                             | -              |
 | `secondaryButtonText`    | `string`                                                                                                         | Label for the secondary action button.                                                                                                                                                           | -              |
@@ -171,23 +166,68 @@ When `footer` is provided, the primary and secondary button props are not availa
 
 ## Examples
 
-| ios                                                                            | android                                                                            |
-| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
-| <video src={modaliOSVideo} width={300} height="auto" controls loop autoPlay /> | <video src={modalAndroidVideo} width={300} height="auto" controls loop autoPlay /> |
+| ios | android |
+| --- | ------- |
+|     |         |
 
 ### Brand Background
 
-<Canvas of={Stories.BrandBackground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+  <NavModal {...args}>
+    <Box gap="200">
+      <BodyText inverted>Brand background content stays readable with inverted text.</BodyText>
+      <BodyText inverted>Buttons and the close icon also invert automatically.</BodyText>
+    </Box>
+  </NavModal>
+</View>
+```
 
 ### Full-Screen Presentation
 
-<Canvas of={Stories.FullScreenPresentation} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+  <NavModal {...args}>
+    <Box gap="200">
+      <BodyText>This uses the full-screen navigation modal presentation.</BodyText>
+      <BodyText>The content switches away from the sheet-style card treatment.</BodyText>
+    </Box>
+  </NavModal>
+</View>
+```
 
 ### Sticky Custom Footer
 
-<Canvas of={Stories.StickyCustomFooter} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 720 } : { flex: 1 }}>
+  <NavModal
+    heading="Confirm changes"
+    description="This example replaces the default buttons with a custom sticky footer."
+    footer={
+      <Flex direction="row" spacing="md">
+        <Button variant="outline" colorScheme="functional" style={{ flex: 1 }}>
+          Back
+        </Button>
+        <Button style={{ flex: 1 }}>Continue</Button>
+      </Flex>
+    }
+    footerStyle={{
+      boxShadow: '0px -6px 12px rgba(16, 24, 40, 0.12)',
+    }}
+  >
+    <Box gap="200">
+      <BodyText>This sticky footer stays pinned while the body content scrolls.</BodyText>
+      <BodyText>Use the footer prop when you need custom layouts or custom buttons.</BodyText>
+    </Box>
+  </NavModal>
+</View>
+```
 
 ```tsx
+// Example usage
 <NavModal
   heading="Confirm changes"
   description="Use a custom sticky footer when your actions need a custom layout."
@@ -206,3 +246,19 @@ When `footer` is provided, the primary and secondary button props are not availa
   <BodyText>This sticky footer stays pinned while the content scrolls.</BodyText>
 </NavModal>
 ```
+
+### JSX Description
+
+`description` accepts a string for the default text styling, or JSX when you need custom content such as a link.
+
+```tsx
+// Example usage
+<NavModal
+  heading="Update available"
+  description={
+    <BodyText>
+      Read the <InlineLink onPress={() => {}}>release notes</InlineLink> before updating.
+    </BodyText>
+  }
+/>
+```