@utilitywarehouse/hearth-react-native 0.35.5 → 0.35.7

package/build/components/Flex/Flex.props.d.ts

@@ -1,6 +1,6 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SpacingValues } from '../../types';
-interface FlexProps extends ViewProps, MarginProps, PaddingProps, FlexLayoutProps, GapProps, Omit<DisplayProps, 'direction'> {
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, PaddingProps, SizeProps, SpacingValues } from '../../types';
+interface FlexProps extends ViewProps, MarginProps, PaddingProps, FlexLayoutProps, GapProps, Pick<SizeProps, 'width'>, Omit<DisplayProps, 'direction'> {
     direction?: ViewStyle['flexDirection'];
     align?: FlexAlignType;
     justify?: ViewStyle['justifyContent'];

package/build/components/NavModal/NavModal.js

@@ -16,6 +16,7 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const isBrandBackground = background === 'brand';
+    const backgroundVariant = background === 'default' ? 'neutral' : background;
     const isFullScreenPresentation = presentation === 'fullScreenModal';
     const usesSheetPresentation = !isFullScreenPresentation;
     const triggerCloseAnimation = useCallback(() => {
@@ -67,7 +68,7 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
     const hasDescription = description !== undefined && description !== null;
     styles.useVariants({
         loading,
-        background: isBrandBackground ? 'brand' : 'primary',
+        background: backgroundVariant,
         presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
         useSafeAreaInsets,
         usesSheetPresentation,
@@ -104,9 +105,12 @@ const styles = StyleSheet.create((theme, rt) => ({
                 brand: {
                     backgroundColor: theme.color.background.brand,
                 },
-                primary: {
+                neutral: {
                     backgroundColor: theme.color.background.secondary,
                 },
+                primary: {
+                    backgroundColor: theme.color.background.primary,
+                },
             },
             usesSheetPresentation: {
                 true: {},
@@ -197,12 +201,15 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
         variants: {
             background: {
-                primary: {
+                neutral: {
                     backgroundColor: theme.color.surface.neutral.strong,
                 },
                 brand: {
                     backgroundColor: theme.color.background.brand,
                 },
+                primary: {
+                    backgroundColor: theme.color.background.primary,
+                },
             },
             presentation: {
                 modal: {

package/build/components/NavModal/NavModal.props.d.ts

@@ -6,7 +6,7 @@ export interface NavModalRef {
 }
 type NavModalBaseProps = ModalCommonBaseProps & {
     ref?: Ref<NavModalRef>;
-    background?: 'default' | 'brand';
+    background?: 'default' | 'brand' | 'primary';
     scrollable?: boolean;
     presentation?: 'fullScreenModal' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal';
     useSafeAreaInsets?: boolean;

package/build/types/utilityProps.d.ts

@@ -282,7 +282,7 @@ export interface IconColorProps {
  * Common text styling props shared across text components (BodyText, Heading, DetailText).
  * Includes margin utility props, simplified semantic text color, and standard text style props.
  */
-export interface CommonTextProps extends RNTextProps, MarginProps {
+export interface CommonTextProps extends RNTextProps, MarginProps, Pick<FlexLayoutProps, 'flexShrink'> {
     /** Whether to truncate text with an ellipsis. */
     truncated?: boolean;
     /** Whether to show strikethrough text. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.5",
+  "version": "0.35.7",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -78,10 +78,10 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
     "@utilitywarehouse/hearth-react-icons": "^0.9.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
     "@utilitywarehouse/hearth-tokens": "^0.4.4"
   },

package/public/llms/components/nav-modal.md

@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
 | `image`                  | `ReactNode`                                                                                                      | Optional image or illustration shown above the text content.                                                                                                                                     | -              |
 | `children`               | `ReactNode`                                                                                                      | Content rendered inside the modal body.                                                                                                                                                          | -              |
 | `stickyFooter`           | `boolean`                                                                                                        | Keeps action buttons pinned to the bottom instead of flowing with the content.                                                                                                                   | `true`         |
-| `background`             | `'default' /\| 'brand'`                                                                                          | Switches between the default surface background and the brand background treatment.                                                                                                              | `'default'`    |
+| `background`             | `'default' /\| 'brand' /\| 'primary'`                                                                            | Switches between the default surface background, the brand background, and the primary background treatment.                                                                                     | `'default'`    |
 | `scrollable`             | `boolean`                                                                                                        | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll.                                                                                         | `true`         |
 | `presentation`           | `'modal' \| 'fullScreenModal' \| 'transparentModal' `<br />` \| 'containedModal' \| 'containedTransparentModal'` | Matches the React Navigation screen presentation. `fullScreenModal` uses the full-screen layout; the other values use the sheet-style layout.                                                    | `'modal'`      |
 | `useSafeAreaInsets`      | `boolean`                                                                                                        | Whether to apply safe area insets as padding within the component. This is enabled by default to fix full-screen presentation padding but can be disabled if you want to manage insets yourself. | `true`         |
@@ -184,6 +184,19 @@ When `footer` is provided, the primary and secondary button props are not availa
 </View>
 ```
 
+### Primary Background
+
+```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 the primary background.</BodyText>
+    </Box>
+  </NavModal>
+</View>
+```
+
 ### Full-Screen Presentation
 
 ```tsx

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.35.5
+Current version: v0.35.7
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.