@utilitywarehouse/hearth-react-native 0.8.2 → 0.10.0

package/build/tokens/components/light/table.js

@@ -5,6 +5,7 @@ export default {
     borderRadius: 16,
     cell: {
         borderWidth: 1,
+        minHeight: 48,
         padding: 12,
     },
     emphasis: {
@@ -13,9 +14,7 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
-        neutral: {
-            backgroundColor: '#f1efe4',
-        },
+        height: 56,
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/light/time-picker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gap: 6;
+    readonly gapContainer: 4;
+    readonly minWidth: 288;
+    readonly paddingHorizontal: 16;
+    readonly paddingVertical: 12;
+    readonly time: {
+        readonly columnGap: 4;
+        readonly content: {
+            readonly gap: 8;
+            readonly item: {
+                readonly gap: 2;
+            };
+        };
+        readonly footer: {
+            readonly gap: 8;
+        };
+        readonly gap: 16;
+        readonly item: {
+            readonly height: 40;
+            readonly width: 64;
+        };
+        readonly rowGap: 2;
+    };
+};
+export default _default;

package/build/tokens/components/light/time-picker.js

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gap: 6,
+    gapContainer: 4,
+    minWidth: 288,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    time: {
+        columnGap: 4,
+        content: {
+            gap: 8,
+            item: {
+                gap: 2,
+            },
+        },
+        footer: {
+            gap: 8,
+        },
+        gap: 16,
+        item: {
+            height: 40,
+            width: 64,
+        },
+        rowGap: 2,
+    },
+};

package/build/tokens/components/light/timeline.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly bar: {
+        readonly width: 2;
+    };
+    readonly content: {
+        readonly gap: 8;
+        readonly paddingBottom: 24;
+        readonly paddingTop: 2;
+    };
+    readonly gap: 12;
+    readonly progress: {
+        readonly circle: {
+            readonly height: 28;
+            readonly width: 28;
+        };
+    };
+    readonly static: {
+        readonly circle: {
+            readonly height: 12;
+            readonly width: 12;
+        };
+    };
+};
+export default _default;

package/build/tokens/components/light/timeline.js

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    bar: {
+        width: 2,
+    },
+    content: {
+        gap: 8,
+        paddingBottom: 24,
+        paddingTop: 2,
+    },
+    gap: 12,
+    progress: {
+        circle: {
+            height: 28,
+            width: 28,
+        },
+    },
+    static: {
+        circle: {
+            height: 12,
+            width: 12,
+        },
+    },
+};

package/build/tokens/components/light/toast.d.ts

@@ -4,10 +4,14 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 16;
+    readonly bottomPosition: 32;
+    readonly gap: 16;
     readonly padding: 14;
     readonly stack: {
-        readonly gapHorizontal: 8;
+        readonly gap: 12;
+    };
+    readonly text: {
+        readonly gap: 8;
     };
 };
 export default _default;

package/build/tokens/components/light/toast.js

@@ -4,9 +4,13 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 16,
+    bottomPosition: 32,
+    gap: 16,
     padding: 14,
     stack: {
-        gapHorizontal: 8,
+        gap: 12,
+    },
+    text: {
+        gap: 8,
     },
 };

package/docs/components/AllComponents.web.tsx

@@ -6,9 +6,12 @@ import {
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ChevronRightMediumIcon,
+  EditSmallIcon,
   ElectricityMediumIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
+  ShareSmallIcon,
+  TrashSmallIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 // @ts-ignore
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
@@ -60,8 +63,13 @@ import {
   Link,
   List,
   ListItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
   Modal,
   OL,
+  Pill,
+  PillGroup,
   ProgressStep,
   ProgressStepper,
   Radio,
@@ -79,6 +87,7 @@ import {
   TabsList,
   Textarea,
   ThemedImage,
+  ToastItem,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
@@ -159,6 +168,10 @@ const AllComponents: React.FC = () => {
   }, [datePickerRef]);
   const [switchEnabled, setSwitchEnabled] = React.useState(false);
   const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
+  const menuRef = useRef<any>(null);
+  const handleMenuOpenPress = useCallback(() => {
+    menuRef.current?.present();
+  }, []);
 
   const [colorMode] = useColorMode();
   const isDark = colorMode === 'dark';
@@ -564,6 +577,29 @@ const AllComponents: React.FC = () => {
               </List>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Menu" link="/?path=/docs/components-menu--docs">
+            <Center flex={1}>
+              <BottomSheetModalProvider>
+                <MenuTrigger onPress={handleMenuOpenPress}>
+                  <Button>Open Menu</Button>
+                </MenuTrigger>
+                <Menu ref={menuRef} heading="Actions">
+                  <MenuItem icon={EditSmallIcon} text="Edit" onPress={() => console.log('Edit')} />
+                  <MenuItem
+                    icon={ShareSmallIcon}
+                    text="Share"
+                    onPress={() => console.log('Share')}
+                  />
+                  <MenuItem
+                    icon={TrashSmallIcon}
+                    text="Delete"
+                    colorScheme="destructive"
+                    onPress={() => console.log('Delete')}
+                  />
+                </Menu>
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Modal" link="/?path=/docs/components-modal--docs">
             <Center flex={1}>
               <Button onPress={handleModalOpenPress}>Open Modal</Button>
@@ -594,6 +630,21 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
+            <Center flex={1} p="200">
+              {(() => {
+                const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
+                return (
+                  <PillGroup value={pillValue} onChange={v => setPillValue(v as string[])} wrap={false} multiple>
+                    <Pill value="all" label="All" />
+                    <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
+                    <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
+                    <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
+                  </PillGroup>
+                );
+              })()}
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"
@@ -712,6 +763,14 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Toast" link="/?path=/docs/components-toast--docs">
+            <Center flex={1} p="200">
+              <ToastItem
+                onClose={() => {}}
+                toast={{ id: 'tst', text: "I'm a toast", duration: 0 }}
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Toggle Button Card"
             link="/?path=/docs/components-toggle-button-card--docs"

package/docs/components/BackToTopButton.tsx

@@ -29,7 +29,7 @@ const ScrollButton = () => {
       <Button
         onPress={scrollToTop}
         variant="ghost"
-        colorScheme="grey"
+        colorScheme="functional"
         size="sm"
         // @ts-expect-error - This is a playground
         style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,10 +57,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.3",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-tokens": "^0.1.3"
+    "@utilitywarehouse/hearth-tokens": "^0.2.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Banner/Banner.docs.mdx

@@ -69,8 +69,8 @@ const MyComponent = () => (
 | iconContainerVariant | `'subtle' \| 'emphasis'`                                                                           | Icon container visual style                                            | `'subtle'`     |
 | iconContainerSize    | `'sm' \| 'md' \| 'lg'`                                                                             | Icon container size                                                    | `'md'`         |
 | iconContainerColor   | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Icon container color scheme                                            | `'pig'`        |
-| illustration         | `{ light: ImageSource, dark: ImageSource }`                                                        | Themed illustration object (mutually exclusive with icon/image)        | `-`            |
-| image                | `{ light: ImageSource, dark: ImageSource }`                                                        | Themed image object (mutually exclusive with icon/illustration)        | `-`            |
+| illustration         | `ThemedImageProps \| ImageProps`                                                                   | Themed illustration object (mutually exclusive with icon/image)        | `-`            |
+| image                | `ThemedImageProps \| ImageProps`                                                                   | Themed image object (mutually exclusive with icon/illustration)        | `-`            |
 | heading              | `string`                                                                                           | Heading text                                                           | `-` (required) |
 | description          | `string`                                                                                           | Description text                                                       | `-` (required) |
 | direction            | `'horizontal' \| 'vertical'`                                                                       | Layout direction for icon/image and content                            | `'horizontal'` |
@@ -156,14 +156,23 @@ Display a themed image that automatically switches between light and dark modes:
 import { Banner } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Banner
-    image={{
-      light: { uri: 'https://example.com/light-image.jpg' },
-      dark: { uri: 'https://example.com/dark-image.jpg' },
-    }}
-    heading="Featured Content"
-    description="Discover amazing content curated just for you."
-  />
+  <>
+    <Banner
+      image={{
+        source: { uri: 'https://example.com/image.jpg' },
+      }}
+      heading="Featured Content"
+      description="Discover amazing content curated just for you."
+    />
+    <Banner
+      image={{
+        light: { uri: 'https://example.com/light-image.jpg' },
+        dark: { uri: 'https://example.com/dark-image.jpg' },
+      }}
+      heading="Featured Content"
+      description="Discover amazing content curated just for you."
+    />
+  </>
 );
 ```
 

package/src/components/Banner/Banner.props.ts

@@ -51,12 +51,12 @@ export interface BannerProps
    * Illustration to display in the banner
    * Mutually exclusive with icon and image
    */
-  illustration?: ThemedImageProps & ImageProps;
+  illustration?: ThemedImageProps | ImageProps;
   /**
    * Image to display in the banner
    * Mutually exclusive with icon and illustration
    */
-  image?: ThemedImageProps & ImageProps;
+  image?: ThemedImageProps | ImageProps;
   /**
    * Heading text
    */

package/src/components/Banner/Banner.stories.tsx

@@ -326,10 +326,7 @@ export const VerticalLayout: Story = {
           <Banner
             variant="emphasis"
             image={{
-              light: {
-                uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
-              },
-              dark: {
+              source: {
                 uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
               },
             }}

package/src/components/Banner/Banner.tsx

@@ -1,14 +1,18 @@
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View } from 'react-native';
+import { Image, ImageProps, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
-import { ThemedImage } from '../ThemedImage';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import type BannerProps from './Banner.props';
 
+const isThemedImageProps = (props: ThemedImageProps | ImageProps): props is ThemedImageProps => {
+  return 'light' in props && 'dark' in props;
+};
+
 const Banner = ({
   icon,
   iconContainerVariant = 'subtle',
@@ -44,8 +48,17 @@ const Banner = ({
       );
     }
     if (illustration) {
+      if (isThemedImageProps(illustration)) {
+        return (
+          <ThemedImage
+            {...illustration}
+            resizeMode="cover"
+            style={[styles.media, styles.imageWrapper, illustration.style]}
+          />
+        );
+      }
       return (
-        <ThemedImage
+        <Image
           {...illustration}
           resizeMode="cover"
           style={[styles.media, styles.imageWrapper, illustration.style]}
@@ -53,9 +66,16 @@ const Banner = ({
       );
     }
     if (image) {
+      if (isThemedImageProps(image)) {
+        return (
+          <View style={[styles.media, styles.imageWrapper]}>
+            <ThemedImage {...image} style={[styles.image, image.style]} />
+          </View>
+        );
+      }
       return (
         <View style={[styles.media, styles.imageWrapper]}>
-          <ThemedImage {...image} style={[styles.image, image.style]} />
+          <Image {...image} style={[styles.image, image.style]} />
         </View>
       );
     }
@@ -74,7 +94,17 @@ const Banner = ({
 
   const content = (
     <View style={styles.container}>
+      {onClose && direction === 'vertical' && (
+        <UnstyledIconButton
+          icon={CloseSmallIcon}
+          size="sm"
+          onPress={onClose}
+          style={styles.closeButton}
+          accessibilityLabel="Close banner"
+        />
+      )}
       {renderIconOrImage()}
+
       <View style={styles.contentContainer}>
         <View style={styles.contentTextContainer}>
           <View style={styles.textContainer}>
@@ -104,7 +134,7 @@ const Banner = ({
             style={styles.chevron}
           />
         )}
-        {onClose && (
+        {onClose && direction === 'horizontal' && (
           <UnstyledIconButton
             icon={CloseSmallIcon}
             size="sm"
@@ -137,9 +167,9 @@ const Banner = ({
 Banner.displayName = 'Banner';
 
 const styles = StyleSheet.create(theme => ({
-  card: {},
+  card: { flexDirection: 'row', _web: { flexDirection: 'column' } },
   pressable: {
-    width: '100%',
+    flex: 1,
   },
   container: {
     flexDirection: 'row',
@@ -273,6 +303,16 @@ const styles = StyleSheet.create(theme => ({
   },
   closeButton: {
     alignSelf: 'flex-start',
+    variants: {
+      direction: {
+        vertical: {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+        },
+        horizontal: {},
+      },
+    },
   },
 }));
 

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -1,10 +1,18 @@
 import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultHandleProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetHandle/types';
+import { Platform, View } from 'react-native';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 
 const StyledBottomSheetHandle = withUnistyles(Handle);
 
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
+  if (Platform.OS === 'web') {
+    return (
+      <View style={[styles.handle, style]}>
+        <View style={[styles.indicator, indicatorStyle]} />
+      </View>
+    );
+  }
   return (
     <StyledBottomSheetHandle
       style={[styles.handle, style]}
@@ -22,6 +30,10 @@ const styles = StyleSheet.create(theme => ({
     paddingTop: theme.components.bottomSheet.padding,
     paddingHorizontal: theme.components.bottomSheet.padding,
     paddingBottom: theme.components.bottomSheet.gap,
+    _web: {
+      alignItems: 'center',
+      cursor: 'grab',
+    },
   },
   indicator: {
     width: theme.components.bottomSheet.handle.width,

package/src/components/DatePickerInput/DatePickerInput.docs.mdx

@@ -232,6 +232,6 @@ Selection through the calendar always returns a JavaScript `Date` that is reform
 ### Best practices
 
 - Always pair with `FormField` for proper label, helper text, and error message announcements.
-- Use `openButtonLabel` to customize the calendar button announcement if the default doesn't fit your use case.
+- Use `openButtonLabel` to customise the calendar button announcement if the default doesn't fit your use case.
 - Provide clear validation feedback through `FormField` when manual date entry doesn't match the expected format.
 - Test with VoiceOver and TalkBack to ensure the date entry flow works smoothly in your specific context.

package/src/components/Menu/Menu.context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export interface IMenuContext {
+  close: () => void;
+}
+
+export const MenuContext = createContext<IMenuContext | undefined>(undefined);
+
+export const useMenuContext = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error('useMenuContext must be used within a Menu component');
+  }
+  return context;
+};