@utilitywarehouse/hearth-react-native 0.35.4 → 0.35.6

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/core/configure.d.ts

@@ -0,0 +1 @@
+export {};

package/build/core/configure.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { breakpoints } from './breakpoints';
+import { themes } from './themes';
+StyleSheet.configure({
+    breakpoints,
+    themes,
+    settings: {
+        initialTheme: 'light',
+        adaptiveThemes: false,
+    },
+});

package/build/core/index.js

@@ -1,14 +1,3 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { breakpoints } from './breakpoints';
-import { themes } from './themes';
 export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
 export * from './breakpoints';
 export * from './themes';
-StyleSheet.configure({
-    breakpoints,
-    themes,
-    settings: {
-        initialTheme: 'light',
-        adaptiveThemes: false,
-    },
-});

package/build/index.d.ts

@@ -1,3 +1,4 @@
+import './core/configure';
 export * from './core';
 export * from './hooks';
 export * from './components';

package/build/index.js

@@ -1,4 +1,5 @@
 'use client';
+import './core/configure';
 export * from './core';
 export * from './hooks';
 export * from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.4",
+  "version": "0.35.6",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -12,7 +12,9 @@
   "types": "build/index.d.ts",
   "module": "build/index",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "build/core/configure.js"
+  ],
   "bin": {
     "hearth-react-native": "./scripts/init-ai.js"
   },
@@ -77,11 +79,11 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
     "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.4"
+    "@utilitywarehouse/hearth-tokens": "^0.4.4",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.5"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

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.4
+Current version: v0.35.6
 
 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.