@utilitywarehouse/hearth-react-native 0.35.9 → 0.36.1

package/build/components/ToggleButton/ToggleButtonRoot.d.ts

@@ -5,7 +5,7 @@ declare const ButtonRoot: {
             active?: boolean;
             disabled?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ButtonRoot;

package/build/components/ToggleButton/ToggleButtonText.d.ts

@@ -2,7 +2,7 @@ import { type TextProps } from 'react-native';
 declare const ToggleButtonText: {
     ({ children, toggled, ...props }: TextProps & {
         toggled: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonText;

package/build/components/ToggleButtonCard/ToggleButtonCard.d.ts

@@ -1,11 +1,11 @@
 import ToggleButtonCardProps from './ToggleButtonCard.props';
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
 declare const ToggleButtonCardGroup: {
-    ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const ToggleButtonCard: {
-    ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react").JSX.Element;
     displayName: string;
 };
 export { ToggleButtonCard, ToggleButtonCardGroup };

package/build/components/ToggleButtonCard/ToggleButtonCardGroup.d.ts

@@ -1,6 +1,6 @@
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
 declare const ToggleButtonCardGroup: {
-    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, ...props }: ToggleButtonCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonCardGroup;

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.d.ts

@@ -6,7 +6,7 @@ declare const ToggleButtonCardRoot: {
             checked?: boolean;
             active?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonCardRoot;

package/build/components/UnstyledIconButton/UnstyledIconButton.d.ts

@@ -1,6 +1,6 @@
 import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
 declare const UnstyledIconButton: {
-    ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButton;

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.d.ts

@@ -1,6 +1,6 @@
 import IconProps from '../Icon/Icon.props';
 declare const UnstyledIconButtonIcon: {
-    ({ children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonIcon;

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -6,10 +6,9 @@ import { useUnstyledIconButtonContext } from './UnstyledIconButton.context';
 const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
-    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? // @ts-expect-error - Spread types may only be created from object types.
-                { ...styles.icon, ...props.style }
-            : [styles.icon, props.style], children: children }));
+    return (_jsx(Icon, { ...props, style: (Platform.OS === 'web'
+            ? { ...styles.icon, ...props.style }
+            : [styles.icon, props.style]), children: children }));
 };
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
 const styles = StyleSheet.create(theme => ({

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.d.ts

@@ -5,7 +5,7 @@ declare const UnstyledIconButtonRoot: {
             active?: boolean;
             disabled?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonRoot;

package/build/components/UnstyledIconButton/UnstyledIconButtonSpinner.d.ts

@@ -1,6 +1,6 @@
 import type { SpinnerProps } from '../Spinner';
 declare const UnstyledIconButtonSpinner: {
-    ({ color, ...props }: Omit<SpinnerProps, "size">): import("react/jsx-runtime").JSX.Element;
+    ({ color, ...props }: Omit<SpinnerProps, "size">): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonSpinner;

package/build/core/index.d.ts

@@ -1,5 +1,5 @@
-export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
-export type { UnistylesBreakpoints, UnistylesThemes, UnistylesVariants, } from 'react-native-unistyles';
 export * from './breakpoints';
 export * from './themes';
+export { Display, Hide, ScopedTheme, StyleSheet, UnistylesRuntime, createUnistylesElement, getServerUnistyles, hydrateServerUnistyles, mq, resetServerUnistyles, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
+export type { UnistylesBreakpoints, UnistylesThemes, UnistylesVariants, } from 'react-native-unistyles';
 export type * from '../types/unistyles';

package/build/core/index.js

@@ -1,3 +1,3 @@
-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';
+export { Display, Hide, ScopedTheme, StyleSheet, UnistylesRuntime, createUnistylesElement, getServerUnistyles, hydrateServerUnistyles, mq, resetServerUnistyles, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.9",
+  "version": "0.36.1",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -47,44 +47,43 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@figma/code-connect": "^1.4.9",
-    "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.2.1",
-    "@storybook/addon-docs": "^10.2.1",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-vitest": "^10.2.1",
-    "@storybook/react-native-web-vite": "^10.2.1",
+    "@gorhom/bottom-sheet": "5.2.14",
+    "@storybook/addon-a11y": "^10.5.6",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/addon-vitest": "^10.5.6",
+    "@storybook/react-native-web-vite": "^10.5.6",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.6",
-    "@types/react-native": "^0.72.8",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "globals": "^15.15.0",
     "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-native": "0.80.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.2",
     "react-native-edge-to-edge": "1.6.1",
-    "react-native-gesture-handler": "2.28.0",
-    "react-native-nitro-modules": "0.31.4",
-    "react-native-reanimated": "4.1.3",
-    "react-native-safe-area-context": "5.6.1",
-    "react-native-svg": "^15.12.1",
-    "react-native-unistyles": "3.0.17",
+    "react-native-gesture-handler": "2.32.0",
+    "react-native-nitro-modules": "0.36.5",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-svg": "15.15.4",
+    "react-native-unistyles": "3.3.0",
     "react-native-web": "^0.20.0",
-    "react-native-worklets": "^0.5.1",
+    "react-native-worklets": "0.10.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.4.1",
+    "storybook": "^10.5.6",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.2",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.5"
+    "@utilitywarehouse/hearth-tokens": "^0.4.6"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/public/llms/components/badge.md

@@ -100,6 +100,21 @@ The `Badge` component has different sizes to style the spinner.
       </Box>
     );
   })}
+  <VariantTitle title="Flat base">
+    <Flex direction="row" spacing="md">
+      <Badge colorScheme="info" variant="subtle" flatBase>
+        subtle flatBase
+      </Badge>
+      <Badge colorScheme="info" variant="emphasis" flatBase>
+        emphasis flatBase
+      </Badge>
+    </Flex>
+  </VariantTitle>
+  <VariantTitle title="With icon">
+    <Badge colorScheme="info" icon={TickSmallIcon}>
+      With icon
+    </Badge>
+  </VariantTitle>
 </Flex>
 ```
 

package/public/llms/components/body-text.md

@@ -77,5 +77,20 @@ The `BodyText` component has different sizes to style the text.
       Hello there, I'm some body text!
     </BodyText>
   </VariantTitle>
+  <VariantTitle title="Semibold">
+    <BodyText {...args} weight="semibold">
+      Hello there, I'm some semi bold body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="Bold">
+    <BodyText {...args} weight="bold">
+      Hello there, I'm some bold body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="Underline">
+    <BodyText {...args} underline>
+      Hello there, I'm some underlined body text!
+    </BodyText>
+  </VariantTitle>
 </Box>
 ```

package/public/llms/components/button.md

@@ -163,6 +163,18 @@ const MyComponent = () => {
         ))}
     </Flex>
   ))}
+  <Flex direction="column" spacing="lg">
+    <VariantTitle title="Padding None" invert={inverted}>
+      <Button
+        text={text}
+        colorScheme="functional"
+        variant="ghost"
+        size="sm"
+        inverted={inverted}
+        paddingNone
+      />
+    </VariantTitle>
+  </Flex>
 </Flex>
 ```
 

package/public/llms/components/checkbox.md

@@ -121,7 +121,12 @@ The `CheckboxGroup` component is used to group multiple checkbox inputs together
 
 ```jsx
 // Example usage
-import { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxLabel, } from '@utilitywarehouse/hearth-react-native';
+import {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxIndicator,
+  CheckboxLabel,
+} from '@utilitywarehouse/hearth-react-native';
 
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 

package/public/llms/components/description-list.md

@@ -94,6 +94,38 @@ import { DescriptionList, DescriptionListItem } from '@utilitywarehouse/hearth-r
       ))}
     </DescriptionList>
   </VariantTitle>
+  <VariantTitle title="With links">
+    <DescriptionList direction="row">
+      <DescriptionListItem
+        heading="Account Number"
+        description="123456789"
+        trailingContent={<Link href="https://example.com/account">Manage account</Link>}
+      />
+      <DescriptionListItem
+        heading="Status"
+        description="Active"
+        trailingContent={
+          <Link href="https://example.com/status" showIcon={false}>
+            Change
+          </Link>
+        }
+      />
+    </DescriptionList>
+  </VariantTitle>
+  <VariantTitle title="With numeric values">
+    <DescriptionList direction="row">
+      <DescriptionListItem
+        heading="Account Balance"
+        description="Current balance"
+        numericValue="£5,432.10"
+      />
+      <DescriptionListItem
+        heading="Available Credit"
+        description="Credit limit minus current balance"
+        numericValue="£1,234.56"
+      />
+    </DescriptionList>
+  </VariantTitle>
 </Flex>
 ```
 

package/public/llms/components/detail-text.md

@@ -91,5 +91,10 @@ The `DetailText` component has different sizes to style the text.
       Hello there, I'm some detail text!
     </DetailText>
   </VariantTitle>
+  <VariantTitle title="Underline">
+    <DetailText {...args} underline>
+      Hello there, I'm some underlined detail text!
+    </DetailText>
+  </VariantTitle>
 </Box>
 ```

package/public/llms/components/expandable-card.md

@@ -407,7 +407,7 @@ If you need to use the `ExpandableCard` component in a more advanced way, you ca
 
 ```tsx
 // Example usage
-<div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 350 }}>
+<View style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 350 }}>
   <ExpandableCard
     expanded={triggerContentExpanded}
     onExpandedChange={setTriggerContentExpanded}
@@ -446,7 +446,7 @@ If you need to use the `ExpandableCard` component in a more advanced way, you ca
       <BodyText>Last Updated: 12/11/25</BodyText>
     </ExpandableCardExpandedContent>
   </ExpandableCard>
-</div>
+</View>
 ```
 
 ```tsx

package/public/llms/components/heading.md

@@ -70,6 +70,16 @@ The `Heading` component has different sizes to style the text.
       Hello there, I'm a heading!
     </Heading>
   </VariantTitle>
+  <VariantTitle title="2XL">
+    <Heading {...args} size="2xl">
+      Hello there, I'm a heading!
+    </Heading>
+  </VariantTitle>
+  <VariantTitle title="Underline">
+    <Heading {...args} underline>
+      Hello there, an underlined Heading!
+    </Heading>
+  </VariantTitle>
 </Box>
 ```
 

package/public/llms/components/icon-button.md

@@ -135,6 +135,45 @@ const MyComponent = () => {
         ))}
     </Flex>
   ))}
+  <VariantTitle title="Service icon buttons">
+    <ButtonGroup spacing="md">
+      <IconButton
+        icon={ElectricityMediumIcon}
+        backgroundColor="energyBlue200"
+        activeBackgroundColor="energyBlue300"
+        variant="emphasis"
+        shadowColor="energyBlue300"
+      />
+      <IconButton
+        icon={BroadbandMediumIcon}
+        backgroundColor="broadbandGreen200"
+        activeBackgroundColor="broadbandGreen300"
+        variant="emphasis"
+        shadowColor="broadbandGreen300"
+      />
+      <IconButton
+        icon={MobileMediumIcon}
+        backgroundColor="mobileRose200"
+        activeBackgroundColor="mobileRose300"
+        variant="emphasis"
+        shadowColor="mobileRose400"
+      />
+      <IconButton
+        icon={InsuranceMediumIcon}
+        backgroundColor="insuranceOrange300"
+        activeBackgroundColor="insuranceOrange400"
+        variant="emphasis"
+        shadowColor="insuranceOrange400"
+      />
+      <IconButton
+        icon={CashbackCardMediumIcon}
+        backgroundColor="cashbackLilac300"
+        activeBackgroundColor="cashbackLilac400"
+        variant="emphasis"
+        shadowColor="cashbackLilac500"
+      />
+    </ButtonGroup>
+  </VariantTitle>
 </Flex>
 ```
 

package/public/llms/components/icon-container.md

@@ -95,5 +95,21 @@ Use the matrix below to compare every combination of size, variant, and color.
       </VariantTitle>
     </Box>
   ))}
+  <Box gap="300">
+    <VariantTitle title="Radius none">
+      <Flex direction="row" wrap="wrap" spacing="md">
+        {colors.map(color => (
+          <IconContainer
+            key={`radius-none-${color}`}
+            icon={icon}
+            size="md"
+            variant="subtle"
+            color={color}
+            radiusNone
+          />
+        ))}
+      </Flex>
+    </VariantTitle>
+  </Box>
 </Flex>
 ```

package/public/llms/components/modal.md

@@ -300,6 +300,7 @@ Use the `image` prop to display an image-centric modal with centered content:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -396,6 +397,7 @@ Add custom content between the header and footer sections:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -460,6 +462,7 @@ Replace the built-in buttons with a custom sticky footer when you need custom la
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}
@@ -519,6 +522,7 @@ Show a loading spinner while processing:
   showCloseButton
   primaryButtonText="Primary"
   secondaryButtonText="Cancel"
+  loadingHeading="Loading"
   onPressCloseButton={() => null}
   onPressPrimaryButton={() => null}
   onPressSecondaryButton={() => null}

package/public/llms/components/themed-image.md

@@ -93,12 +93,8 @@ function MyComponent() {
 // Example usage
 <Box gap="200">
   <ThemedImage
-    light={{
-      uri: pig,
-    }}
-    dark={{
-      uri: pig,
-    }}
+    light={pig as ImageSourcePropType}
+    dark={pig as ImageSourcePropType}
     width={200}
     height={200}
     style={{ width: 200, height: 200, borderRadius: 8 }}

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.9
+Current version: v0.36.1
 
 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.