@utilitywarehouse/hearth-react-native 0.4.2 → 0.6.0

package/build/tokens/layout.d.ts

@@ -7,8 +7,8 @@ export declare const mobile: {
         readonly minWidth: 320;
     };
     readonly container: {
+        readonly margin: 16;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 16;
         readonly paddingTop: 24;
         readonly width: 360;
     };
@@ -17,7 +17,6 @@ export declare const mobile: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 16;
-        readonly margin: 16;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -36,8 +35,8 @@ export declare const tablet: {
         readonly minWidth: 740;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 32;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 24;
         readonly width: 744;
     };
@@ -46,7 +45,6 @@ export declare const tablet: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 28;
@@ -65,8 +63,8 @@ export declare const desktop: {
         readonly minWidth: 992;
     };
     readonly container: {
+        readonly margin: 32;
         readonly paddingBottom: 48;
-        readonly paddingHorizontal: 32;
         readonly paddingTop: 32;
         readonly width: 1096;
     };
@@ -75,7 +73,6 @@ export declare const desktop: {
         readonly columnWidth: 64;
         readonly gridSize: 8;
         readonly gutter: 24;
-        readonly margin: 32;
     };
     readonly spacing: {
         readonly '2xl': 40;
@@ -95,8 +92,8 @@ declare const layout: {
             readonly minWidth: 320;
         };
         readonly container: {
+            readonly margin: 16;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 16;
             readonly paddingTop: 24;
             readonly width: 360;
         };
@@ -105,7 +102,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 16;
-            readonly margin: 16;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -124,8 +120,8 @@ declare const layout: {
             readonly minWidth: 740;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 32;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 24;
             readonly width: 744;
         };
@@ -134,7 +130,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 28;
@@ -153,8 +148,8 @@ declare const layout: {
             readonly minWidth: 992;
         };
         readonly container: {
+            readonly margin: 32;
             readonly paddingBottom: 48;
-            readonly paddingHorizontal: 32;
             readonly paddingTop: 32;
             readonly width: 1096;
         };
@@ -163,7 +158,6 @@ declare const layout: {
             readonly columnWidth: 64;
             readonly gridSize: 8;
             readonly gutter: 24;
-            readonly margin: 32;
         };
         readonly spacing: {
             readonly '2xl': 40;

package/build/tokens/layout.js

@@ -7,8 +7,8 @@ export const mobile = {
         minWidth: 320,
     },
     container: {
+        margin: 16,
         paddingBottom: 32,
-        paddingHorizontal: 16,
         paddingTop: 24,
         width: 360,
     },
@@ -17,7 +17,6 @@ export const mobile = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 16,
-        margin: 16,
     },
     spacing: {
         '2xl': 28,
@@ -36,8 +35,8 @@ export const tablet = {
         minWidth: 740,
     },
     container: {
+        margin: 32,
         paddingBottom: 32,
-        paddingHorizontal: 32,
         paddingTop: 24,
         width: 744,
     },
@@ -46,7 +45,6 @@ export const tablet = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 28,
@@ -65,8 +63,8 @@ export const desktop = {
         minWidth: 992,
     },
     container: {
+        margin: 32,
         paddingBottom: 48,
-        paddingHorizontal: 32,
         paddingTop: 32,
         width: 1096,
     },
@@ -75,7 +73,6 @@ export const desktop = {
         columnWidth: 64,
         gridSize: 8,
         gutter: 24,
-        margin: 32,
     },
     spacing: {
         '2xl': 40,

package/docs/components/AllComponents.web.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
+  BellMediumIcon,
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ChevronRightMediumIcon,
@@ -9,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 {
@@ -24,8 +29,11 @@ import {
   Box,
   Button,
   Card,
+  Carousel,
+  CarouselItem,
   Center,
   Checkbox,
+  Container,
   CurrencyInput,
   DatePicker,
   DatePickerInput,
@@ -41,6 +49,7 @@ import {
   Icon,
   IconButton,
   IconContainer,
+  IndicatorIconButton,
   InlineLink,
   Input,
   LI,
@@ -49,6 +58,8 @@ import {
   ListItem,
   Modal,
   OL,
+  ProgressStep,
+  ProgressStepper,
   Radio,
   RadioCard,
   RadioCardGroup,
@@ -63,6 +74,7 @@ import {
   Tabs,
   TabsList,
   Textarea,
+  ThemedImage,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
@@ -148,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">
@@ -214,12 +226,63 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Card" link="/?path=/docs/components-card--docs">
             <Center flex={1}>
-              <Card colorScheme="white">
+              <Card colorScheme="neutralStrong">
                 <Heading>I am a card</Heading>
                 <BodyText>And do card stuff.</BodyText>
               </Card>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Carousel" link="/?path=/docs/components-carousel--docs">
+            <Center flex={1}>
+              <Carousel itemWidth={150} centered width={150}>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="blue700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="purple700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm another carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+                <CarouselItem>
+                  <Box
+                    backgroundColor="green700"
+                    width={150}
+                    height={100}
+                    px="100"
+                    borderRadius="md"
+                  >
+                    <Center flex={1}>
+                      <BodyText color="white" textAlign="center">
+                        I'm also a carousel item
+                      </BodyText>
+                    </Center>
+                  </Box>
+                </CarouselItem>
+              </Carousel>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Center" link="/?path=/docs/primitives-center--docs">
             <Center flex={1}>
               <Center backgroundColor="red400" padding="300" width={200} height={100}>
@@ -237,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 />
@@ -330,6 +400,14 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Indicator Icon Button"
+            link="/?path=/docs/components-indicator-icon-button--docs"
+          >
+            <Center flex={1}>
+              <IndicatorIconButton icon={BellMediumIcon} onPress={() => null} indicator={true} />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
@@ -410,8 +488,8 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="List" link="/?path=/docs/components-list--docs">
             <Center flex={1} p="300">
               <List>
-                <ListItem text="List Item 1" divider onPress={() => console.log('item pressed')} />
-                <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 1" onPress={() => console.log('item pressed')} />
+                <ListItem heading="List Item 2" onPress={() => console.log('item pressed')} />
               </List>
             </Center>
           </ComponentWrapper>
@@ -445,6 +523,19 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Progress Stepper"
+            link="/?path=/docs/components-progress-stepper--docs"
+          >
+            <Center flex={1} px="300">
+              <ProgressStepper>
+                <ProgressStep id="customer-data" state="complete" />
+                <ProgressStep id="shipping-data" state="complete" />
+                <ProgressStep id="payment-data" state="active" />
+                <ProgressStep id="summary" state="incomplete" />
+              </ProgressStepper>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Radio" link="/?path=/docs/forms-radio--docs">
             <Center flex={1}>
               <RadioGroup>
@@ -469,7 +560,11 @@ const AllComponents: React.FC = () => {
             link="/?path=/docs/components-section-header--docs"
           >
             <Center flex={1} p="300">
-              <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
+              <SectionHeader
+                heading="Heading"
+                helperText="Supporting text"
+                trailingContent={<Link href="#">More</Link>}
+              />
             </Center>
           </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
@@ -535,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"
@@ -576,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/BadgeList.tsx

@@ -1,64 +1,28 @@
-import {
-  Badge,
-  BadgeText,
-  Box,
-  Flex,
-  List,
-  ListItem,
-  ListItemContent,
-  ListItemHelperText,
-  ListItemIcon,
-  ListItemLeadingContent,
-  ListItemText,
-  ListItemTrailingContent,
-  ListItemTrailingIcon,
-} from '../../src';
+import { IconContainer, List, ListItem } from '../../src';
 
-import {
-  ChevronRightMediumIcon,
-  ElectricityMediumIcon,
-  GasMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
+import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const BadgeList = () => {
   return (
     <List>
-      <ListItem onPress={() => console.log('pressed')} divider>
-        <ListItemLeadingContent>
-          <Box padding="300" borderRadius="lg" bg="energyBlue300">
-            <ListItemIcon as={ElectricityMediumIcon} color="energyBlue600" />
-          </Box>
-        </ListItemLeadingContent>
-        <ListItemContent>
-          <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="info">
-            <BadgeText>Text</BadgeText>
-          </Badge>
-          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
-        </ListItemContent>
-        <ListItemTrailingContent>
-          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
-        </ListItemTrailingContent>
-      </ListItem>
-      <ListItem onPress={() => console.log('pressed')} divider={false}>
-        <ListItemLeadingContent>
-          <Box padding="300" borderRadius="lg" bg="energyBlue300">
-            <ListItemIcon as={GasMediumIcon} color="energyBlue600" />
-          </Box>
-        </ListItemLeadingContent>
-        <ListItemContent>
-          <Flex direction="row" style={{ justifyContent: 'space-between' }}>
-            <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="positive">
-              <BadgeText>Smart meter</BadgeText>
-            </Badge>
-          </Flex>
-          <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
-        </ListItemContent>
-        <ListItemTrailingContent>
-          <ListItemTrailingIcon as={ChevronRightMediumIcon} />
-        </ListItemTrailingContent>
-      </ListItem>
+      <ListItem
+        heading="Electricity"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('pressed')}
+        leadingContent={
+          <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Text' }}
+      />
+      <ListItem
+        heading="Gas"
+        helperText="Last reading 23/03/24"
+        onPress={() => console.log('pressed')}
+        leadingContent={
+          <IconContainer icon={GasMediumIcon} size="md" variant="emphasis" color="energy" />
+        }
+        badge={{ text: 'Smart Meter' }}
+      />
     </List>
   );
 };

package/docs/components/SwitchList.tsx

@@ -16,9 +16,8 @@ const SwitchList = () => {
   return (
     <List container="subtleWhite">
       <ListItem
-        text="Notifications"
+        heading="Notifications"
         helperText="Allow notifications"
-        divider
         leadingContent={<ListItemIcon as={BellMediumIcon} />}
         trailingContent={
           <Switch value={notifications} onValueChange={setNotifications} size="small" />
@@ -26,25 +25,22 @@ const SwitchList = () => {
         onPress={() => setNotifications(!notifications)}
       />
       <ListItem
-        text="Secure ID"
+        heading="Secure ID"
         helperText="Use secure ID"
-        divider
         leadingContent={<ListItemIcon as={LockMediumIcon} />}
         trailingContent={<Switch value={secureId} onValueChange={setSecureId} size="small" />}
         onPress={() => setSecureId(!secureId)}
       />
       <ListItem
-        text="Location"
+        heading="Location"
         helperText="Allow location"
-        divider
         leadingContent={<ListItemIcon as={LocationMediumIcon} />}
         trailingContent={<Switch value={location} onValueChange={setLocation} size="small" />}
         onPress={() => setLocation(!location)}
       />
       <ListItem
-        text="Dark mode"
+        heading="Dark mode"
         helperText="Enable dark mode"
-        divider
         leadingContent={<ListItemIcon as={EyeMediumIcon} />}
         trailingContent={<Switch value={darkMode} onValueChange={setDarkMode} size="small" />}
         onPress={() => setDarkMode(!darkMode)}

package/docs/getting-started.mdx

@@ -8,6 +8,7 @@ import { BackToTopButton, NextPrevPage } from './components';
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
 Although there are a few components that require a `BottomSheetModalProvider` to be wrapped around your app.
+You should also make sure you're app is wrapped in a `GestureHandlerRootView` from `react-native-gesture-handler`.
 
 ```tsx
 import {
@@ -16,14 +17,17 @@ import {
   BodyText,
   BottomSheetModalProvider,
 } from '@utilitywarehouse/hearth-react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App: React.FC = () => (
-  <BottomSheetModalProvider>
-    <Box p="200">
-      <Alert variant="info" text="Welcome to Hearth React Native!" />
-      <BodyText>Start building your app with Hearth React Native components.</BodyText>
-    </Box>
-  </BottomSheetModalProvider>
+  <GestureHandlerRootView>
+    <BottomSheetModalProvider>
+      <Box p="200">
+        <Alert colorScheme="positive" text="Welcome to Hearth React Native!" />
+        <BodyText>Start building your app with Hearth React Native components.</BodyText>
+      </Box>
+    </BottomSheetModalProvider>
+  </GestureHandlerRootView>
 );
 ```
 
@@ -33,19 +37,31 @@ By default the light colour mode is enabled. If you want to enable dark mode, yo
 use the `useColorMode` hook to toggle between light and dark modes.
 
 ```tsx
-import { useColorMode, Box, Alert, BodyText, Button } from '@utilitywarehouse/hearth-react-native';
+import {
+  useColorMode,
+  Box,
+  Alert,
+  BodyText,
+  Button,
+  BottomSheetModalProvider,
+} from '@utilitywarehouse/hearth-react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const App: React.FC = () => {
   const [colorMode, setColorMode] = useColorMode();
 
   return (
-    <Box p="200">
-      <Alert variant="info" text="Welcome to Hearth React Native!" />
-      <BodyText>Start building your app with Hearth React Native components.</BodyText>
-      <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
-        Toggle Color Mode
-      </Button>
-    </Box>
+    <GestureHandlerRootView>
+      <BottomSheetModalProvider>
+        <Box p="200">
+          <Alert colorScheme="positive" text="Welcome to Hearth React Native!" />
+          <BodyText>Start building your app with Hearth React Native components.</BodyText>
+          <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
+            Toggle Color Mode
+          </Button>
+        </Box>
+      </BottomSheetModalProvider>
+    </GestureHandlerRootView>
   );
 };
 ```

package/docs/introduction.mdx

@@ -42,7 +42,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,

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.4.2",
+  "version": "0.6.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -52,15 +52,17 @@
     "storybook": "^9.1.6",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
+    "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.5.0",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.5.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.0",
+    "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@utilitywarehouse/hearth-react-native-icons": "0.4.0",
+    "@utilitywarehouse/hearth-react-native-icons": "0.6.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",