@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

package/build/tokens/components/dark/modal.js

@@ -10,17 +10,20 @@ export default {
         gap: 12,
     },
     gap: 24,
-    padding: 48,
+    heading: {
+        gap: 24,
+    },
+    illustration: {
+        padding: 48,
+    },
+    padding: 24,
     mobile: {
-        padding: 16,
         width: 360,
     },
     tablet: {
-        padding: 48,
         width: 504,
     },
     desktop: {
-        padding: 48,
         width: 680,
     },
 };

package/build/tokens/components/dark/rating.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderWidth: 2;
+    readonly gap: 4;
+};
+export default _default;

package/build/tokens/components/dark/rating.js

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderWidth: 2,
+    gap: 4,
+};

package/build/tokens/components/dark/table.d.ts

@@ -13,9 +13,6 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
-        readonly neutral: {
-            readonly backgroundColor: "#30302c";
-        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

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

@@ -13,9 +13,6 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
-        neutral: {
-            backgroundColor: '#30302c',
-        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/dark/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/dark/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/dark/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: 24;
+            readonly width: 24;
+        };
+    };
+    readonly static: {
+        readonly circle: {
+            readonly height: 12;
+            readonly width: 12;
+        };
+    };
+};
+export default _default;

package/build/tokens/components/dark/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: 24,
+            width: 24,
+        },
+    },
+    static: {
+        circle: {
+            height: 12,
+            width: 12,
+        },
+    },
+};

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

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

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

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

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

@@ -21,6 +21,9 @@ declare const _default: {
     readonly minWidth: 120;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 12;
+    readonly stepper: {
+        readonly gap: 4;
+    };
     readonly textArea: {
         readonly height: 96;
     };

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

@@ -21,6 +21,9 @@ export default {
     minWidth: 120,
     paddingHorizontal: 16,
     paddingVertical: 12,
+    stepper: {
+        gap: 4,
+    },
     textArea: {
         height: 96,
     },

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

@@ -10,17 +10,20 @@ declare const _default: {
         readonly gap: 12;
     };
     readonly gap: 24;
-    readonly padding: 16;
+    readonly heading: {
+        readonly gap: 24;
+    };
+    readonly illustration: {
+        readonly padding: 48;
+    };
+    readonly padding: 24;
     readonly mobile: {
-        readonly padding: 16;
         readonly width: 360;
     };
     readonly tablet: {
-        readonly padding: 48;
         readonly width: 504;
     };
     readonly desktop: {
-        readonly padding: 48;
         readonly width: 680;
     };
 };

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

@@ -10,17 +10,20 @@ export default {
         gap: 12,
     },
     gap: 24,
-    padding: 16,
+    heading: {
+        gap: 24,
+    },
+    illustration: {
+        padding: 48,
+    },
+    padding: 24,
     mobile: {
-        padding: 16,
         width: 360,
     },
     tablet: {
-        padding: 48,
         width: 504,
     },
     desktop: {
-        padding: 48,
         width: 680,
     },
 };

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderWidth: 2;
+    readonly gap: 4;
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderWidth: 2,
+    gap: 4,
+};

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

@@ -13,9 +13,6 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
-        readonly neutral: {
-            readonly backgroundColor: "#f1efe4";
-        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

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

@@ -13,9 +13,6 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
-        neutral: {
-            backgroundColor: '#f1efe4',
-        },
         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/docs/adding-shadows.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, NextPrevPage } from './components';
+
+<Meta title="Guides / Adding Shadows" />
+<BackToTopButton />
+
+# Adding Shadows
+
+You can add shadows to your components in Hearth React Native using the Unistyles styling system. Shadows help create depth and visual hierarchy in your UI.
+
+- [Using Predefined Shadows](#using-predefined-shadows)
+- [Components with Shadow Props](#components-with-shadow-props)
+
+## Using Predefined Shadows
+
+Hearth provides a set of predefined shadow styles that you can easily apply to your components. These shadows are defined in the theme and can be accessed via the `theme.helpers.shadow` object.
+
+```tsx
+import { View } from 'react-native';
+import { StyleSheet, Input } from '@utilitywarehouse/hearth-react-native';
+
+const styles = StyleSheet.create(theme => ({
+  input: {
+    boxShadow: theme.helpers.shadow.functional, // Apply a predefined shadow
+  },
+}));
+
+const MyComponent = () => (
+  <View>
+    <Input placeholder="Input with shadow" style={styles.input} />
+  </View>
+);
+```
+
+## Components with Shadow Props
+
+Some Hearth components, like `Card`, allow you to specify shadow colors directly via props. You can use the `shadowColor` prop to set the shadow color based on the theme.
+
+```tsx
+import { Card } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Card shadowColor="brand">{/* Card content */}</Card>;
+```

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,6 +63,9 @@ import {
   Link,
   List,
   ListItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
   Modal,
   OL,
   ProgressStep,
@@ -159,6 +165,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 +574,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>

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.1",
+  "version": "0.9.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,11 +56,11 @@
     "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.3",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@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

@@ -24,7 +24,7 @@ The `Banner` component is a versatile card-based component for displaying inform
   - [With Link](#with-link)
   - [Pressable](#pressable)
   - [With Close Button](#with-close-button)
-  - [Vertical Layout](#vertical-layout)
+  - [Vertical Layout](#vertical-layout-1)
   - [Color Schemes](#color-schemes)
   - [Complex Examples](#complex-examples)
 
@@ -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."
+    />
+  </>
 );
 ```