@utilitywarehouse/hearth-react-native 0.23.0-test-list → 0.24.0

package/.turbo/turbo-build.log

@@ -1,5 +1,4 @@
-
-
-> @utilitywarehouse/hearth-react-native@0.23.0-test-list build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
-> tsc
-
+
+> @utilitywarehouse/hearth-react-native@0.24.0 build /home/runner/work/hearth/hearth/packages/react-native
+> tsc
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,72 @@
+
+> @utilitywarehouse/hearth-react-native@0.24.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> TIMING=1 eslint .
+
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
+  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
+  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
+  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
+  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
+  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
+  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
+  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
+  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
+  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
+   75:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  291:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
+  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
+  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
+   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
+   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
+  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
+  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
+   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
+  174:7  warning  React Hook useImperativeHandle has a missing dependency: 'updateValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+✖ 25 problems (0 errors, 25 warnings)
+
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |  1400.036 |    60.2%
+react-hooks/exhaustive-deps               |   100.065 |     4.3%
+react-hooks/rules-of-hooks                |    83.204 |     3.6%
+no-global-assign                          |    71.807 |     3.1%
+@typescript-eslint/ban-ts-comment         |    53.514 |     2.3%
+no-loss-of-precision                      |    35.722 |     1.5%
+@typescript-eslint/triple-slash-reference |    35.355 |     1.5%
+no-unexpected-multiline                   |    32.651 |     1.4%
+no-useless-escape                         |    30.776 |     1.3%
+no-misleading-character-class             |    29.528 |     1.3%

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.24.0
+
+### Minor Changes
+
+- [#977](https://github.com/utilitywarehouse/hearth/pull/977) [`9d2b534`](https://github.com/utilitywarehouse/hearth/commit/9d2b5348a5748cb613f537808069de2e86bd21d7) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `ProgressBar` component with linear and circular variants.
+
+  **Developer changes**:
+
+  Use `ProgressBar` with a default percentage label, or override the label to show a custom value:
+
+  ```tsx
+  import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+  <ProgressBar value={42} label="Uploading documents" />
+
+  <ProgressBar
+      value={68}
+      max={100}
+      label="Data allowance"
+      variant="circular"
+      formatValueText={(value, { max }) => `${max - value}GB remaining`}
+  />
+  ```
+
+### Patch Changes
+
+- [#978](https://github.com/utilitywarehouse/hearth/pull/978) [`26a1173`](https://github.com/utilitywarehouse/hearth/commit/26a11731a493a8b92ac2a3a183516376ab54663b) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Tighten `Modal` prop types and fix brand background text styling
+
+  Improves TypeScript safety so `stickyFooter` is not allowed when `inNavModal` is true, and `background` can only be set when `inNavModal` is true. Also ensures headings, body text, and button content are correctly inverted when using the brand background.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+  No changes required unless you were relying on invalid prop combinations.
+
 ## 0.23.0
 
 ### Minor Changes

package/build/components/List/List.js

@@ -6,7 +6,7 @@ import { Card } from '../Card';
 import { SectionHeader } from '../SectionHeader';
 import { ListContext } from './List.context';
 const List = ({ children, heading, helperText, headerTrailingContent, invalidText, ...props }) => {
-    const { loading, disabled, container = 'none', testID, style, ...rest } = props;
+    const { loading, disabled, container = 'none' } = props;
     const orderRef = useRef([]);
     const [firstItemId, setFirstItemId] = useState(undefined);
     const containerToCard = {
@@ -35,7 +35,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, invalidTex
         registerItem,
     };
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...rest, style: [styles.container, style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { testID: testID, children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, testID: testID, children: _jsx(_Fragment, { children: children }) })))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent, invalidText: invalidText })) : null, container === 'none' ? (_jsx(View, { children: children })) : (React.Children.count(children) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: children }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/Modal/Modal.js

@@ -20,6 +20,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const theme = useTheme();
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
+    const isBrandBackground = background === 'brand';
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -105,10 +106,10 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         noButtons,
         stickyFooter,
         showHandle: props.showHandle,
-        background: background === 'brand' ? 'brand' : 'primary',
+        background: isBrandBackground ? 'brand' : 'primary',
     });
-    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: background === 'brand' && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: background === 'brand' && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: background === 'brand' && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -119,7 +120,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     ]);
     return inNavModal ? (_jsxs(View, { style: {
             flex: 1,
-            backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+            backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
         }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({

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

@@ -3,16 +3,14 @@ import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
-interface ModalProps extends Omit<BottomSheetProps, 'children'> {
+interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
     loading?: boolean;
     image?: ReactNode;
     showCloseButton?: boolean;
     heading?: string;
     loadingHeading?: string;
     description?: string;
-    inNavModal?: boolean;
     fullscreen?: boolean;
-    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
@@ -24,6 +22,14 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
     closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
-    background?: 'default' | 'brand';
 }
+type ModalProps = (ModalPropsBase & {
+    inNavModal?: false | undefined;
+    stickyFooter?: boolean;
+    background?: never;
+}) | (ModalPropsBase & {
+    inNavModal: true;
+    stickyFooter?: never;
+    background?: 'default' | 'brand';
+});
 export default ModalProps;

package/build/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './List';
 export * from './Menu';
 export * from './Modal';
 export * from './PillGroup';
+export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';

package/build/components/index.js

@@ -41,6 +41,7 @@ export * from './List';
 export * from './Menu';
 export * from './Modal';
 export * from './PillGroup';
+export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';

package/docs/components/AllComponents.web.tsx

@@ -74,6 +74,7 @@ import {
   OL,
   Pill,
   PillGroup,
+  ProgressBar,
   ProgressStep,
   ProgressStepper,
   Radio,
@@ -663,6 +664,11 @@ const AllComponents: React.FC = () => {
               </PillGroup>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Progress Bar" link="/?path=/docs/components-progress-bar--docs">
+            <Center flex={1} px="300">
+              <ProgressBar value={58} label="Order progress" />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.23.0-test-list",
+  "version": "0.24.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,9 +55,9 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },

package/src/components/List/List.tsx

@@ -14,8 +14,7 @@ const List = ({
   invalidText,
   ...props
 }: ListProps) => {
-  const { loading, disabled, container = 'none', testID, style, ...rest } = props;
-
+  const { loading, disabled, container = 'none' } = props;
   const orderRef = useRef<string[]>([]);
   const [firstItemId, setFirstItemId] = useState<string | undefined>(undefined);
   const containerToCard: {
@@ -52,7 +51,7 @@ const List = ({
   styles.useVariants({ disabled });
   return (
     <ListContext.Provider value={value}>
-      <View {...rest} style={[styles.container, style]}>
+      <View {...props} style={[styles.container, props.style]}>
         {heading ? (
           <SectionHeader
             heading={heading}
@@ -62,10 +61,10 @@ const List = ({
           />
         ) : null}
         {container === 'none' ? (
-          <View testID={testID}>{children}</View>
+          <View>{children}</View>
         ) : (
           React.Children.count(children) > 0 && (
-            <Card {...containerToCard} noPadding style={styles.card} testID={testID}>
+            <Card {...containerToCard} noPadding style={styles.card}>
               <>{children}</>
             </Card>
           )

package/src/components/Modal/Modal.props.ts

@@ -4,16 +4,14 @@ import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
-interface ModalProps extends Omit<BottomSheetProps, 'children'> {
+interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
   loading?: boolean;
   image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
   loadingHeading?: string;
   description?: string;
-  inNavModal?: boolean;
   fullscreen?: boolean;
-  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
@@ -25,7 +23,18 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
-  background?: 'default' | 'brand';
 }
 
+type ModalProps =
+  | (ModalPropsBase & {
+      inNavModal?: false | undefined;
+      stickyFooter?: boolean;
+      background?: never;
+    })
+  | (ModalPropsBase & {
+      inNavModal: true;
+      stickyFooter?: never;
+      background?: 'default' | 'brand';
+    });
+
 export default ModalProps;

package/src/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { useRef } from 'react';
 import { ImageSourcePropType, Platform, View } from 'react-native';
 import { Modal, ModalImage } from '.';

package/src/components/Modal/Modal.tsx

@@ -59,6 +59,7 @@ const Modal = ({
   const theme = useTheme();
   const backgroundOpacity = useSharedValue(0);
   const pretendContentTranslateY = useSharedValue(20);
+  const isBrandBackground = background === 'brand';
 
   const triggerCloseAnimation = useCallback(() => {
     if (Platform.OS === 'android' && inNavModal) {
@@ -171,7 +172,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
-    background: background === 'brand' ? 'brand' : 'primary',
+    background: isBrandBackground ? 'brand' : 'primary',
   });
 
   const footer = (
@@ -180,7 +181,7 @@ const Modal = ({
         <Button
           onPress={handlePrimaryButtonPress}
           text={primaryButtonText}
-          inverted={background === 'brand' && inNavModal}
+          inverted={isBrandBackground && inNavModal}
           {...primaryButtonProps}
           variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
           colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -190,7 +191,7 @@ const Modal = ({
         <Button
           onPress={handleSecondaryButtonPress}
           text={secondaryButtonText}
-          inverted={background === 'brand' && inNavModal}
+          inverted={isBrandBackground && inNavModal}
           {...secondaryButtonProps}
           variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
           colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -209,8 +210,11 @@ const Modal = ({
           screenReaderFocusable
           ref={viewRef}
         >
-          <Spinner size="lg" />
-          <Heading size="lg" textAlign="center">
+          <Spinner
+            size="lg"
+            color={isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined}
+          />
+          <Heading size="lg" textAlign="center" inverted={isBrandBackground && inNavModal}>
             {loadingHeading}
           </Heading>
         </View>
@@ -225,18 +229,22 @@ const Modal = ({
           <View style={styles.header}>
             <View style={styles.headerTextContent}>
               {heading && !image ? (
-                <Heading size="lg" accessible>
+                <Heading size="lg" accessible inverted={isBrandBackground && inNavModal}>
                   {heading}
                 </Heading>
               ) : null}
-              {description && !image ? <BodyText accessible>{description}</BodyText> : null}
+              {description && !image ? (
+                <BodyText accessible inverted={isBrandBackground && inNavModal}>
+                  {description}
+                </BodyText>
+              ) : null}
             </View>
             {showCloseButton ? (
               <UnstyledIconButton
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
-                inverted={background === 'brand' && inNavModal}
+                inverted={isBrandBackground && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -246,12 +254,21 @@ const Modal = ({
               {image}
               <View style={styles.textContent}>
                 {heading ? (
-                  <Heading size="lg" textAlign="center" accessible>
+                  <Heading
+                    size="lg"
+                    textAlign="center"
+                    accessible
+                    inverted={isBrandBackground && inNavModal}
+                  >
                     {heading}
                   </Heading>
                 ) : null}
                 {description ? (
-                  <BodyText textAlign="center" accessible>
+                  <BodyText
+                    textAlign="center"
+                    accessible
+                    inverted={isBrandBackground && inNavModal}
+                  >
                     {description}
                   </BodyText>
                 ) : null}
@@ -285,7 +302,7 @@ const Modal = ({
     <View
       style={{
         flex: 1,
-        backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+        backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
       }}
     >
       {Platform.OS === 'android' ? (

package/src/components/ProgressBar/ProgressBar.docs.mdx

@@ -0,0 +1,90 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Box, Center, ProgressBar } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './ProgressBar.stories';
+
+<Meta title="Components / Progress Bar" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704&t=Jg2fPJPQNzOyspmQ-4" />
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977&t=Jg2fPJPQNzOyspmQ-4" />
+
+# Progress Bar
+
+Progress bars communicate task completion for linear flows and bounded operations. Use the linear variant for
+inline layouts and the circular variant when space is tighter or when progress needs more emphasis.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Circular Sizes](#circular-sizes)
+- [Examples](#examples)
+  - [Custom Value Labels](#custom-value-labels)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 260 }}>
+      <ProgressBar value={42} label="Uploading documents" />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <ProgressBar value={42} label="Uploading documents" />;
+```
+
+## Props
+
+| Property          | Type                                                                                      | Description                                              | Default   |
+| ----------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------- |
+| `variant`         | `'linear' \| 'circular'`                                                                  | The progress bar variant.                                | `linear`  |
+| `colorScheme`     | `'default' \| 'success' \| 'danger'`                                                      | The color scheme for the progress indicator.             | `default` |
+| `size`            | `'sm' \| 'md'`                                                                            | Circular size. Only applies to the circular variant.     | `md`      |
+| `value`           | `number`                                                                                  | Current progress value.                                  |           |
+| `min`             | `number`                                                                                  | Minimum value.                                           | `0`       |
+| `max`             | `number`                                                                                  | Maximum value.                                           | `100`     |
+| `label`           | `string`                                                                                  | Accessible label for the progress bar.                   |           |
+| `hideLabel`       | `boolean`                                                                                 | Visually hide the label and value text.                  | `false`   |
+| `formatValueText` | `(value: number, meta: { min: number; `<br />` max: number; percent: number }) => string` | Override the default percentage label.                   |           |
+| `aria-valuetext`  | `string`                                                                                  | A human-readable text alternative for the current value. |           |
+
+## Variants
+
+<Canvas of={Stories.Variants} />
+
+## Circular Sizes
+
+<Canvas of={Stories.CircularSizes} />
+
+## Examples
+
+### Custom Value Labels
+
+Use `formatValueText` to show values that are not percentages, such as remaining data allowance.
+
+<Canvas of={Stories.CustomValueLabels} />
+
+```tsx
+import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <ProgressBar
+    value={68}
+    max={100}
+    label="Data allowance"
+    formatValueText={(value, { max }) => `${max - value}GB remaining`}
+  />
+);
+```

package/src/components/ProgressBar/ProgressBar.figma.tsx

@@ -0,0 +1,79 @@
+import figma from '@figma/code-connect';
+import { ProgressBar } from '../';
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704',
+  {
+    props: {
+      value: figma.enum('Progress', {
+        '0%': 0,
+        '10%': 10,
+        '20%': 20,
+        '30%': 30,
+        '40%': 40,
+        '50%': 50,
+        '60%': 60,
+        '70%': 70,
+        '80%': 80,
+        '90%': 90,
+        '100%': 100,
+      }),
+      colorScheme: figma.enum('Color Scheme', {
+        Default: 'default',
+        Success: 'success',
+        Danger: 'danger',
+      }),
+      label: figma.boolean('Label?', { true: figma.string('Label') }),
+    },
+    example: props => (
+      <ProgressBar
+        variant="linear"
+        value={props.value}
+        colorScheme={props.colorScheme}
+        label={props.label}
+      />
+    ),
+  }
+);
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977',
+  {
+    props: {
+      value: figma.enum('Progress', {
+        '0%': 0,
+        '10%': 10,
+        '20%': 20,
+        '30%': 30,
+        '40%': 40,
+        '50%': 50,
+        '60%': 60,
+        '70%': 70,
+        '80%': 80,
+        '90%': 90,
+        '100%': 100,
+      }),
+      colorScheme: figma.enum('Color Scheme', {
+        Default: 'default',
+        Success: 'success',
+        Danger: 'danger',
+      }),
+      size: figma.enum('Size', {
+        'SM-80': 'sm',
+        'MD-140': 'md',
+      }),
+      label: figma.boolean('Label?', { true: figma.string('Label') }),
+    },
+    example: props => (
+      <ProgressBar
+        variant="circular"
+        value={props.value}
+        colorScheme={props.colorScheme}
+        size={props.size}
+        label={props.label}
+      />
+    ),
+  }
+);