@utilitywarehouse/hearth-react-native 0.4.2 → 0.5.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -53,14 +53,14 @@
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "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-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",

package/src/components/Alert/AlertTitle.tsx

@@ -1,15 +1,15 @@
 import type { TextProps, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import { useAlertContext } from './Alert.context';
 
 const AlertTitle = ({ children, style, ...props }: TextProps) => {
   const { colorScheme } = useAlertContext();
   styles.useVariants({ colorScheme });
   return (
-    <DetailText size="md" style={[styles.title as TextStyle, style]} {...props}>
+    <BodyText size="md" weight="semibold" style={[styles.title as TextStyle, style]} {...props}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 
@@ -18,16 +18,16 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       colorScheme: {
         info: {
-          color: theme.color.feedback.info.foreground,
+          color: theme.color.feedback.info.foreground.default,
         },
         positive: {
-          color: theme.color.feedback.positive.foreground,
+          color: theme.color.feedback.positive.foreground.default,
         },
         danger: {
-          color: theme.color.feedback.danger.foreground,
+          color: theme.color.feedback.danger.foreground.default,
         },
         warning: {
-          color: theme.color.feedback.warning.foreground,
+          color: theme.color.feedback.warning.foreground.default,
         },
       },
     },

package/src/components/Badge/Badge.props.ts

@@ -19,6 +19,7 @@ interface BadgeProps extends ViewProps {
   size?: 'sm' | 'md';
   icon?: ComponentType;
   flatBase?: boolean;
+  text?: string | number;
 }
 
 export default BadgeProps;

package/src/components/Badge/Badge.tsx

@@ -14,6 +14,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     flatBase = false,
     size = 'sm',
     style,
+    text,
     ...rest
   } = props;
 
@@ -22,7 +23,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     [colorScheme, flatBase, variant, size]
   );
 
-  const childIsText = typeof children === 'string' || typeof children === 'number';
+  const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
 
   styles.useVariants({ colorScheme, flatBase, variant, size });
 
@@ -30,7 +31,7 @@ const Badge = ({ children, ...props }: BadgeProps) => {
     <BadgeContext.Provider value={value}>
       <View {...rest} style={[styles.container, style]}>
         {!!icon && <BadgeIcon as={icon} />}
-        {childIsText ? <BadgeText>{children}</BadgeText> : children}
+        {childIsText ? <BadgeText>{text ?? children}</BadgeText> : children}
       </View>
     </BadgeContext.Provider>
   );

package/src/components/Button/ButtonRoot.tsx

@@ -103,6 +103,7 @@ const styles = StyleSheet.create(theme => ({
         ghost: {
           backgroundColor: 'transparent',
           borderWidth: 0,
+          textDecoration: 'underline',
         },
       },
       size: {
@@ -348,6 +349,7 @@ 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,
@@ -395,6 +397,7 @@ 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,
@@ -418,6 +421,7 @@ 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

@@ -1,15 +1,15 @@
 import { TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
 import { useButtonContext } from './Button.context';
 
 const ButtonText = ({ children, ...props }: TextProps) => {
   const { colorScheme, variant, inverted, disabled } = useButtonContext();
   styles.useVariants({ colorScheme, variant, inverted, disabled });
   return (
-    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" weight="semibold" {...props} style={[styles.text, props.style]}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 

package/src/components/Card/CardRoot.tsx

@@ -85,6 +85,8 @@ const Card = ({
         disabled={disabled}
         style={[styles.card, computedStyles, style as ViewStyle]}
         onPress={handlePress}
+        accessible={showPressed}
+        importantForAccessibility={showPressed ? 'yes' : 'no'}
       >
         {children}
       </Pressable>

package/src/components/Carousel/Carousel.context.tsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import { CarouselContextValue } from './Carousel.props';
+
+const CarouselContext = createContext<CarouselContextValue>({} as CarouselContextValue);
+
+export const useCarouselContext = () => useContext(CarouselContext);
+
+export default CarouselContext;