@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/docs/components/AllComponents.web.tsx

@@ -10,6 +10,10 @@ import {
   InsuranceMediumIcon,
   MobileMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
+// @ts-ignore
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+// @ts-ignore
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import {
@@ -29,6 +33,7 @@ import {
   CarouselItem,
   Center,
   Checkbox,
+  Container,
   CurrencyInput,
   DatePicker,
   DatePickerInput,
@@ -53,8 +58,8 @@ import {
   ListItem,
   Modal,
   OL,
-  ProgressStepper,
   ProgressStep,
+  ProgressStepper,
   Radio,
   RadioCard,
   RadioCardGroup,
@@ -69,6 +74,7 @@ import {
   Tabs,
   TabsList,
   Textarea,
+  ThemedImage,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
@@ -154,7 +160,7 @@ const AllComponents: React.FC = () => {
   return (
     <div className="sb-unstyled">
       <ScrollView contentContainerStyle={styles.container}>
-        <Flex direction="row" wrap="wrap" space="md">
+        <Flex direction="row" wrap="wrap" space="md" style={styles.grid}>
           <ComponentWrapper name="Accordion" link="/?path=/docs/components-accordion--docs">
             <Center flex={1} p="200">
               <Accordion type="single">
@@ -294,6 +300,13 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
+            <Container space="md" backgroundColor="backgroundSecondary">
+              <Box h={20} bg="blue300" />
+              <Box h={20} bg="blue400" />
+              <Box h={20} bg="blue500" />
+            </Container>
+          </ComponentWrapper>
           <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
             <Center flex={1} padding="200">
               <CurrencyInput />
@@ -514,7 +527,7 @@ const AllComponents: React.FC = () => {
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"
           >
-            <Center flex={1}>
+            <Center flex={1} px="300">
               <ProgressStepper>
                 <ProgressStep id="customer-data" state="complete" />
                 <ProgressStep id="shipping-data" state="complete" />
@@ -617,6 +630,17 @@ const AllComponents: React.FC = () => {
               <Textarea numberOfLines={3} placeholder="This is a textarea" />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Themed Image"
+            link="/?path=/docs/utility-components-themed-image--docs"
+          >
+            <Center flex={1} p="300">
+              <ThemedImage
+                light={<SpotBillingLight width={160} height={160} />}
+                dark={<SpotBillingDark width={160} height={160} />}
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Toggle Button Card"
             link="/?path=/docs/components-toggle-button-card--docs"
@@ -658,6 +682,17 @@ const AllComponents: React.FC = () => {
 
 const styles = StyleSheet.create(theme => ({
   container: {},
+  grid: {
+    _web: {
+      display: 'grid',
+      gridTemplateColumns: {
+        xs: '1fr',
+        md: 'repeat(3, 1fr)',
+        lg: 'repeat(auto-fit, minmax(300px, 1fr))',
+      },
+      gap: theme.space['200'],
+    },
+  },
   component: {
     borderColor: theme.color.warmWhite[300],
     borderWidth: theme.borderWidth['1'],

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet, View } from 'react-native';
-import { Card, CardAction, Heading, Link } from '../../src';
+import { Card, CardPressHandler, Heading, Link } from '../../src';
 import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
@@ -34,7 +34,7 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
         {!!prevLink && (
           <Card gap="100">
             {!!prevTitle && <Heading size="sm">{prevTitle}</Heading>}
-            <CardAction>
+            <CardPressHandler>
               <Link
                 onPress={() => openLink(prevLink)}
                 iconPosition="left"
@@ -42,16 +42,16 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
               >
                 Prev Page
               </Link>
-            </CardAction>
+            </CardPressHandler>
           </Card>
         )}
         <div />
         {!!nextLink && (
           <Card gap="100">
             {!!nextTitle && <Heading size="sm">{nextTitle}</Heading>}
-            <CardAction>
+            <CardPressHandler>
               <Link onPress={() => openLink(nextLink)}>Next Page</Link>
-            </CardAction>
+            </CardPressHandler>
           </Card>
         )}
       </View>

package/docs/components/VariantTitle.tsx

@@ -1,5 +1,6 @@
 import { ViewProps } from 'react-native';
-import { Box, DetailText, useColorMode } from '../../src';
+import { StyleSheet } from 'react-native-unistyles';
+import { Box, DetailText } from '../../src';
 
 const VariantTitle = ({
   title,
@@ -12,14 +13,10 @@ const VariantTitle = ({
   invert?: boolean;
   children: ViewProps['children'];
 }) => {
-  const [colorMode] = useColorMode();
+  styles.useVariants({ invert });
   return (
     <Box gap="100" w="full">
-      <DetailText
-        textTransform={upperCase ? 'uppercase' : 'none'}
-        size="sm"
-        color={invert ? 'warmWhite50' : colorMode === 'light' ? 'grey600' : 'grey200'}
-      >
+      <DetailText textTransform={upperCase ? 'uppercase' : 'none'} size="sm" style={styles.text}>
         {title}
       </DetailText>
       {children}
@@ -27,4 +24,17 @@ const VariantTitle = ({
   );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.colorMode === 'light' ? theme.color.grey[600] : theme.color.grey[200],
+    variants: {
+      invert: {
+        true: {
+          color: theme.color.warmWhite[50],
+        },
+      },
+    },
+  },
+}));
+
 export default VariantTitle;

package/docs/layout-components.docs.mdx

@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as BoxStories from '../src/components/Box/Box.stories';
+import * as ContainerStories from '../src/components/Container/Container.stories';
 import * as FlexStories from '../src/components/Flex/Flex.stories';
 import * as GridStories from '../src/components/Grid/Grid.stories';
 import { BackToTopButton, NextPrevPage } from './components';
@@ -15,6 +16,7 @@ upon our design tokens, and providing styling options which make it easier to
 apply design decisions coherently.
 
 - [Box](#box)
+- [Container](#container)
 - [Flex](#flex)
 - [Grid](#grid)
 
@@ -36,6 +38,34 @@ elements within `Flex` and `Grid` containers.
 </Box>
 ```
 
+## Container
+
+<Canvas of={ContainerStories.Playground} sourceState="none" />
+
+`Container` is a specialised layout component that provides consistent page-level
+spacing using the design system's responsive layout tokens. It automatically applies
+appropriate margin and padding based on the current breakpoint, making it ideal for
+wrapping page content or major sections.
+
+```tsx
+<Container space="lg">
+  <Box>{...}</Box>
+  <Box>{...}</Box>
+</Container>
+```
+
+When you need custom spacing, you can override the defaults while maintaining
+the convenience of the component:
+
+```tsx
+<Container
+  marginHorizontal="none"
+  space="xl"
+>
+  {...}
+</Container>
+```
+
 ## Flex
 
 <Canvas of={FlexStories.Playground} sourceState="none" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,38 +24,42 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@figma/code-connect": "^1.3.3",
-    "@gorhom/bottom-sheet": "5.1.6",
-    "@storybook/addon-a11y": "^9.1.6",
-    "@storybook/addon-docs": "^9.1.6",
-    "@storybook/addon-vitest": "^9.1.6",
-    "@storybook/react-native-web-vite": "^9.1.6",
+    "@gorhom/bottom-sheet": "5.2.6",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-docs": "^10.0.5",
+    "@storybook/addon-vitest": "^10.0.5",
+    "@storybook/react": "^10.0.5",
+    "@storybook/react-native-web-vite": "^10.0.5",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "9.1.6",
+    "eslint-plugin-storybook": "10.0.5",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.26.0",
-    "react-native-nitro-modules": "^0.28.0",
-    "react-native-reanimated": "3.19.1",
+    "react-native-nitro-modules": "^0.31.4",
+    "react-native-reanimated": "4.1.3",
     "react-native-svg": "^15.12.1",
-    "react-native-unistyles": "3.0.10",
+    "react-native-unistyles": "3.0.17",
     "react-native-web": "^0.20.0",
+    "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.6",
+    "storybook": "^10.0.5",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
+    "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.2",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.2",
+    "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {

package/src/components/BottomSheet/BottomSheetBackdrop.tsx

@@ -1,7 +1,7 @@
 import { BottomSheetBackdrop as Backdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
-import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 
 const StyledBottomSheetBackdrop = withUnistyles(Backdrop);
 
@@ -9,7 +9,7 @@ const BottomSheetBackdrop = ({ style, ...props }: BottomSheetDefaultBackdropProp
   const theme = useTheme();
   return (
     <StyledBottomSheetBackdrop
-      // @ts-expect-error - style unistyles error
+      // @ts-expect-error - style prop type issue
       style={[styles.backdrop, style]}
       opacity={theme.components.overlay.opacity / 100}
       appearsOnIndex={0}

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -1,8 +1,7 @@
- 
 import { BottomSheetFlatList as FlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 import { useBottomSheetContext } from './BottomSheet.context';
-import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
 
 const StyledBottomSheetFlatList = withUnistyles(FlatList);
 
@@ -20,7 +19,7 @@ const BottomSheetFlatList = ({
 
   return (
     <StyledBottomSheetFlatList
-      // @ts-expect-error - style
+      // @ts-expect-error - style prop type issue
       style={[styles.container, style]}
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       {...props}

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -7,7 +7,7 @@ const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
   return (
     <StyledBottomSheetHandle
-      // @ts-expect-error - style
+      // @ts-expect-error - style prop type issue
       style={[styles.handle, style]}
       indicatorStyle={[styles.indicator, indicatorStyle]}
       {...props}

package/src/components/Button/ButtonIcon.tsx

@@ -13,7 +13,8 @@ const ButtonIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

package/src/components/Button/ButtonRoot.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 import { ButtonContext } from './Button.context';
 import type { BaseButtonProps } from './Button.props';
 
@@ -17,7 +17,7 @@ const ButtonRoot = ({
   ...props
 }: BaseButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active, disabled = false } = states || {};
-  const { pressed } = useCardActionContext();
+  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     variant,
@@ -103,7 +103,6 @@ const styles = StyleSheet.create(theme => ({
         ghost: {
           backgroundColor: 'transparent',
           borderWidth: 0,
-          textDecoration: 'underline',
         },
       },
       size: {
@@ -349,7 +348,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'functional',
         styles: {
-          textDecorationColor: theme.color.interactive.functional.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
@@ -397,7 +395,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'affirmative',
         styles: {
-          textDecorationColor: theme.color.interactive.affirmative.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
@@ -421,7 +418,6 @@ const styles = StyleSheet.create(theme => ({
         variant: 'ghost',
         colorScheme: 'destructive',
         styles: {
-          textDecorationColor: theme.color.interactive.destructive.foreground.subtle,
           _web: {
             _hover: {
               backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,

package/src/components/Button/ButtonText.tsx

@@ -22,7 +22,10 @@ const styles = StyleSheet.create(theme => ({
         emphasis: {},
         solid: {},
         outline: {},
-        ghost: {},
+        ghost: {
+          textDecorationStyle: 'solid',
+          textDecorationLine: 'underline',
+        },
       },
       colorScheme: {
         highlight: {},

package/src/components/Card/Card.context.ts

@@ -1,7 +1,14 @@
 import { createContext, useContext } from 'react';
+import CardProps from './Card.props';
 
 interface CardContextProps {
   pressed?: boolean;
+  noPadding?: boolean;
+  hasActions?: boolean;
+  hasContent?: boolean;
+  hasOnlyActions?: boolean;
+  space?: CardProps['space'];
+  variant?: CardProps['variant'];
 }
 
 export const CardContext = createContext<CardContextProps>({});